@royaloperahouse/harmonic 0.18.6 → 0.18.8-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.
- package/CHANGELOG.md +6 -0
- package/README.md +267 -43
- package/dist/components/atoms/Buttons/Auxiliary/AuxiliaryButton.style.d.ts +9 -1
- package/dist/components/atoms/Buttons/Button.d.ts +10 -3
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.d.ts +17 -3
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.style.d.ts +9 -1
- package/dist/components/atoms/Buttons/Secondary/SecondaryButton.style.d.ts +9 -1
- package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.d.ts +4 -0
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.style.d.ts +5 -0
- package/dist/components/atoms/VideoControlsImpact/index.d.ts +2 -0
- package/dist/components/molecules/HotFilters/HotFilters.style.d.ts +16 -1
- package/dist/components/molecules/PageHeading/Compact/Compact.style.d.ts +16 -1
- package/dist/components/molecules/PageHeading/Impact/Impact.style.d.ts +302 -9
- package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +1 -1
- package/dist/components/molecules/Swipe/Swipe.d.ts +1 -0
- package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +3 -1
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +3 -1
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +16 -1
- package/dist/harmonic.cjs.development.css +319 -0
- package/dist/harmonic.cjs.development.js +625 -370
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +637 -379
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +1 -0
- package/dist/types/impactHeader.d.ts +14 -32
- package/dist/types/signUpForm.d.ts +1 -0
- package/dist/types/types.d.ts +15 -1
- package/dist/types/upsell.d.ts +2 -0
- package/package.json +3 -4
- package/README.GIT +0 -293
package/dist/harmonic.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React__default, { createElement, memo, useCallback, useRef, useImperativeHandle, useMemo, useEffect, useState,
|
|
1
|
+
import React__default, { createElement, memo, forwardRef, useCallback, useRef, useImperativeHandle, useMemo, useEffect, useState, cloneElement, useLayoutEffect } from 'react';
|
|
2
2
|
import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
|
-
import
|
|
3
|
+
import { isPast, intervalToDuration, differenceInDays } from 'date-fns';
|
|
4
4
|
import { renderToString } from 'react-dom/server';
|
|
5
5
|
import Select$1, { components } from 'react-select';
|
|
6
6
|
import Select$2 from 'react-select/async';
|
|
@@ -237,7 +237,8 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
|
237
237
|
em = _ref2.em,
|
|
238
238
|
_ref2$color = _ref2.color,
|
|
239
239
|
color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
|
|
240
|
-
serif = _ref2.serif,
|
|
240
|
+
_ref2$serif = _ref2.serif,
|
|
241
|
+
serif = _ref2$serif === void 0 ? false : _ref2$serif,
|
|
241
242
|
hierarchy = _ref2.hierarchy,
|
|
242
243
|
tag = _ref2.tag,
|
|
243
244
|
className = _ref2.className,
|
|
@@ -2649,7 +2650,7 @@ var Icon = /*#__PURE__*/memo(function (props) {
|
|
|
2649
2650
|
Icon.displayName = 'Icon';
|
|
2650
2651
|
|
|
2651
2652
|
var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className", "href", "onClick"];
|
|
2652
|
-
var Button = function
|
|
2653
|
+
var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
2653
2654
|
var children = _ref.children,
|
|
2654
2655
|
iconName = _ref.iconName,
|
|
2655
2656
|
iconDirection = _ref.iconDirection,
|
|
@@ -2659,7 +2660,7 @@ var Button = function Button(_ref) {
|
|
|
2659
2660
|
href = _ref.href,
|
|
2660
2661
|
onClick = _ref.onClick,
|
|
2661
2662
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
2662
|
-
var truncatedString = children.substring(0, 30);
|
|
2663
|
+
var truncatedString = children == null ? void 0 : children.substring(0, 30);
|
|
2663
2664
|
var handleClick = useCallback(function (e) {
|
|
2664
2665
|
if (!href) e.preventDefault();
|
|
2665
2666
|
onClick == null || onClick(e);
|
|
@@ -2671,7 +2672,8 @@ var Button = function Button(_ref) {
|
|
|
2671
2672
|
href: href != null ? href : '#',
|
|
2672
2673
|
onClick: handleClick,
|
|
2673
2674
|
iconName: iconName,
|
|
2674
|
-
className: className
|
|
2675
|
+
className: className,
|
|
2676
|
+
ref: ref
|
|
2675
2677
|
}), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
|
|
2676
2678
|
"data-testid": "button-icon",
|
|
2677
2679
|
className: iconClassName
|
|
@@ -2682,7 +2684,8 @@ var Button = function Button(_ref) {
|
|
|
2682
2684
|
}))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
|
|
2683
2685
|
color: "inherit"
|
|
2684
2686
|
}, truncatedString));
|
|
2685
|
-
};
|
|
2687
|
+
});
|
|
2688
|
+
Button.displayName = 'Button';
|
|
2686
2689
|
|
|
2687
2690
|
var getPointerEvents = function getPointerEvents(_ref) {
|
|
2688
2691
|
var disabled = _ref.disabled;
|
|
@@ -2747,7 +2750,7 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$3 || (_te
|
|
|
2747
2750
|
var AriaDescription = /*#__PURE__*/styled.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
2748
2751
|
|
|
2749
2752
|
var _excluded$3 = ["children", "disabled", "className"];
|
|
2750
|
-
var PrimaryButton = function
|
|
2753
|
+
var PrimaryButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
2751
2754
|
var children = _ref.children,
|
|
2752
2755
|
disabled = _ref.disabled,
|
|
2753
2756
|
className = _ref.className,
|
|
@@ -2762,6 +2765,7 @@ var PrimaryButton = function PrimaryButton(_ref) {
|
|
|
2762
2765
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
|
|
2763
2766
|
id: disabledButtonDescriptionId
|
|
2764
2767
|
}, disabledButtonDescription), /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2768
|
+
ref: ref,
|
|
2765
2769
|
disabled: true,
|
|
2766
2770
|
"aria-disabled": "true",
|
|
2767
2771
|
role: "button",
|
|
@@ -2771,10 +2775,13 @@ var PrimaryButton = function PrimaryButton(_ref) {
|
|
|
2771
2775
|
onClick: handleClick
|
|
2772
2776
|
}), children));
|
|
2773
2777
|
}
|
|
2774
|
-
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2778
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2779
|
+
ref: ref
|
|
2780
|
+
}, props, {
|
|
2775
2781
|
className: className
|
|
2776
2782
|
}), children);
|
|
2777
|
-
};
|
|
2783
|
+
});
|
|
2784
|
+
PrimaryButton.displayName = 'PrimaryButton';
|
|
2778
2785
|
|
|
2779
2786
|
var COLORS$1 = {
|
|
2780
2787
|
disabled: 'var(--color-state-disabled)',
|
|
@@ -3670,6 +3677,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3670
3677
|
isTablet = _useViewport.isTablet,
|
|
3671
3678
|
hydrated = _useViewport.hydrated;
|
|
3672
3679
|
if (!hydrated) return null;
|
|
3680
|
+
var preventMouseFocus = function preventMouseFocus(e) {
|
|
3681
|
+
e.preventDefault();
|
|
3682
|
+
};
|
|
3673
3683
|
var onClickLeftHandler = function onClickLeftHandler() {
|
|
3674
3684
|
if (onClickPrev) {
|
|
3675
3685
|
onClickPrev();
|
|
@@ -3722,6 +3732,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3722
3732
|
className: className
|
|
3723
3733
|
}, availablePrev ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
3724
3734
|
size: size,
|
|
3735
|
+
onMouseDown: preventMouseFocus,
|
|
3725
3736
|
onClick: onClickLeftHandler,
|
|
3726
3737
|
onKeyDown: onPrevKeyDownHandler,
|
|
3727
3738
|
tabIndex: 0,
|
|
@@ -3731,9 +3742,12 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3731
3742
|
role: "button"
|
|
3732
3743
|
}, renderPrevIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
3733
3744
|
size: size,
|
|
3734
|
-
|
|
3745
|
+
onMouseDown: preventMouseFocus,
|
|
3746
|
+
"data-testid": "iconprevnoavailable",
|
|
3747
|
+
"aria-hidden": "true"
|
|
3735
3748
|
}, renderPrevIcon())), availableNext ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
3736
3749
|
size: size,
|
|
3750
|
+
onMouseDown: preventMouseFocus,
|
|
3737
3751
|
onClick: onClickRightHandler,
|
|
3738
3752
|
onKeyDown: onNextKeyDownHandler,
|
|
3739
3753
|
tabIndex: 0,
|
|
@@ -3743,9 +3757,12 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3743
3757
|
role: "button"
|
|
3744
3758
|
}, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
3745
3759
|
size: size,
|
|
3746
|
-
|
|
3760
|
+
onMouseDown: preventMouseFocus,
|
|
3761
|
+
"data-testid": "iconnextnoavailable",
|
|
3762
|
+
"aria-hidden": "true"
|
|
3747
3763
|
}, renderNextIcon())), showFullscreen && !isMobile && !isTablet && (/*#__PURE__*/React__default.createElement(FullscreenIconWrapper, {
|
|
3748
3764
|
size: size,
|
|
3765
|
+
onMouseDown: preventMouseFocus,
|
|
3749
3766
|
onClick: onClickFullscreenHandler,
|
|
3750
3767
|
onKeyDown: onFullscreenKeyDownHandler,
|
|
3751
3768
|
tabIndex: 0,
|
|
@@ -3923,6 +3940,7 @@ var Tab = function Tab(_ref) {
|
|
|
3923
3940
|
className = _ref.className,
|
|
3924
3941
|
role = _ref.role,
|
|
3925
3942
|
ariaLabel = _ref.ariaLabel,
|
|
3943
|
+
tabLinkId = _ref.tabLinkId,
|
|
3926
3944
|
color = _ref.color,
|
|
3927
3945
|
dataTestId = _ref.dataTestId,
|
|
3928
3946
|
isOpen = _ref.isOpen;
|
|
@@ -3957,8 +3975,9 @@ var Tab = function Tab(_ref) {
|
|
|
3957
3975
|
className: className,
|
|
3958
3976
|
"data-testid": dataTestId
|
|
3959
3977
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
3960
|
-
|
|
3978
|
+
id: tabLinkId,
|
|
3961
3979
|
trimText: trimText,
|
|
3980
|
+
color: color,
|
|
3962
3981
|
withTextInMobile: withTextInMobile,
|
|
3963
3982
|
"aria-hidden": "true"
|
|
3964
3983
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -4646,6 +4665,31 @@ var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templa
|
|
|
4646
4665
|
var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4647
4666
|
var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4648
4667
|
|
|
4668
|
+
var pad = function pad(num) {
|
|
4669
|
+
return String(num || 0).padStart(2, '0');
|
|
4670
|
+
};
|
|
4671
|
+
var renderTimerValue = function renderTimerValue(value, label, separator) {
|
|
4672
|
+
if (separator === void 0) {
|
|
4673
|
+
separator = true;
|
|
4674
|
+
}
|
|
4675
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
|
|
4676
|
+
className: "harmonic-timer-value"
|
|
4677
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4678
|
+
color: "inherit",
|
|
4679
|
+
hierarchy: "h3",
|
|
4680
|
+
size: "medium",
|
|
4681
|
+
"data-testid": label
|
|
4682
|
+
}, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
|
|
4683
|
+
className: "harmonic-timer-label"
|
|
4684
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4685
|
+
color: "inherit",
|
|
4686
|
+
size: "large"
|
|
4687
|
+
}, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4688
|
+
color: "inherit",
|
|
4689
|
+
hierarchy: "h3",
|
|
4690
|
+
size: "medium"
|
|
4691
|
+
}, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
|
|
4692
|
+
};
|
|
4649
4693
|
var Timer = function Timer(_ref) {
|
|
4650
4694
|
var endDate = _ref.endDate,
|
|
4651
4695
|
title = _ref.title,
|
|
@@ -4654,43 +4698,22 @@ var Timer = function Timer(_ref) {
|
|
|
4654
4698
|
bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
|
|
4655
4699
|
_ref$color = _ref.color,
|
|
4656
4700
|
color = _ref$color === void 0 ? ThemeColor['base-black'] : _ref$color;
|
|
4657
|
-
var
|
|
4658
|
-
seconds =
|
|
4659
|
-
setSeconds =
|
|
4660
|
-
var
|
|
4661
|
-
minutes =
|
|
4662
|
-
setMinutes =
|
|
4663
|
-
var
|
|
4664
|
-
hours =
|
|
4665
|
-
setHours =
|
|
4666
|
-
var
|
|
4667
|
-
days =
|
|
4668
|
-
setDays =
|
|
4669
|
-
var
|
|
4670
|
-
isEndDateReached =
|
|
4671
|
-
setIsEndDateReached =
|
|
4672
|
-
|
|
4673
|
-
if (separator === void 0) {
|
|
4674
|
-
separator = true;
|
|
4675
|
-
}
|
|
4676
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
|
|
4677
|
-
className: "harmonic-timer-value"
|
|
4678
|
-
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4679
|
-
color: "inherit",
|
|
4680
|
-
hierarchy: "h3",
|
|
4681
|
-
size: "medium"
|
|
4682
|
-
}, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
|
|
4683
|
-
className: "harmonic-timer-label"
|
|
4684
|
-
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4685
|
-
color: "inherit",
|
|
4686
|
-
size: "large"
|
|
4687
|
-
}, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4688
|
-
color: "inherit",
|
|
4689
|
-
hierarchy: "h3",
|
|
4690
|
-
size: "medium"
|
|
4691
|
-
}, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
|
|
4692
|
-
};
|
|
4693
|
-
React__default.useEffect(function () {
|
|
4701
|
+
var _useState = useState('00'),
|
|
4702
|
+
seconds = _useState[0],
|
|
4703
|
+
setSeconds = _useState[1];
|
|
4704
|
+
var _useState2 = useState('00'),
|
|
4705
|
+
minutes = _useState2[0],
|
|
4706
|
+
setMinutes = _useState2[1];
|
|
4707
|
+
var _useState3 = useState('00'),
|
|
4708
|
+
hours = _useState3[0],
|
|
4709
|
+
setHours = _useState3[1];
|
|
4710
|
+
var _useState4 = useState('00'),
|
|
4711
|
+
days = _useState4[0],
|
|
4712
|
+
setDays = _useState4[1];
|
|
4713
|
+
var _useState5 = useState(false),
|
|
4714
|
+
isEndDateReached = _useState5[0],
|
|
4715
|
+
setIsEndDateReached = _useState5[1];
|
|
4716
|
+
useEffect(function () {
|
|
4694
4717
|
if (isEndDateReached) return undefined;
|
|
4695
4718
|
// We use this to set values for the timer immediately
|
|
4696
4719
|
var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
|
|
@@ -4698,19 +4721,21 @@ var Timer = function Timer(_ref) {
|
|
|
4698
4721
|
return setInterval(fn, delay);
|
|
4699
4722
|
};
|
|
4700
4723
|
var updateValues = function updateValues() {
|
|
4701
|
-
var futureDate =
|
|
4702
|
-
var nowDate =
|
|
4703
|
-
var
|
|
4704
|
-
|
|
4705
|
-
if (differenceInMilliseconds < 0) {
|
|
4724
|
+
var futureDate = new Date(endDate);
|
|
4725
|
+
var nowDate = new Date();
|
|
4726
|
+
var diffInMs = futureDate.getTime() - nowDate.getTime();
|
|
4727
|
+
if (diffInMs < 0) {
|
|
4706
4728
|
setIsEndDateReached(true);
|
|
4707
4729
|
if (endDateHandler) endDateHandler();
|
|
4708
4730
|
} else {
|
|
4709
|
-
var
|
|
4710
|
-
|
|
4711
|
-
|
|
4712
|
-
|
|
4713
|
-
var
|
|
4731
|
+
var duration = intervalToDuration({
|
|
4732
|
+
start: nowDate,
|
|
4733
|
+
end: futureDate
|
|
4734
|
+
});
|
|
4735
|
+
var daysDiff = pad(differenceInDays(futureDate, nowDate));
|
|
4736
|
+
var hoursDiff = pad(duration.hours);
|
|
4737
|
+
var minutesDiff = pad(duration.minutes);
|
|
4738
|
+
var secondsDiff = pad(duration.seconds);
|
|
4714
4739
|
setDays(daysDiff);
|
|
4715
4740
|
setHours(hoursDiff);
|
|
4716
4741
|
setMinutes(minutesDiff);
|
|
@@ -4722,7 +4747,7 @@ var Timer = function Timer(_ref) {
|
|
|
4722
4747
|
clearInterval(interval);
|
|
4723
4748
|
};
|
|
4724
4749
|
});
|
|
4725
|
-
var hideTimer =
|
|
4750
|
+
var hideTimer = isPast(new Date(endDate));
|
|
4726
4751
|
if (hideTimer) return null;
|
|
4727
4752
|
return /*#__PURE__*/React__default.createElement(TimerWrapper, {
|
|
4728
4753
|
color: color
|
|
@@ -5440,6 +5465,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5440
5465
|
className = _ref.className,
|
|
5441
5466
|
role = _ref.role,
|
|
5442
5467
|
ariaLabel = _ref.ariaLabel,
|
|
5468
|
+
tabLinkId = _ref.tabLinkId,
|
|
5443
5469
|
trimTabText = _ref.trimTabText;
|
|
5444
5470
|
var node = useRef();
|
|
5445
5471
|
var _useState = useState(false),
|
|
@@ -5536,6 +5562,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5536
5562
|
};
|
|
5537
5563
|
var renderTab = function renderTab() {
|
|
5538
5564
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
|
|
5565
|
+
tabLinkId: tabLinkId,
|
|
5539
5566
|
trimText: trimTabText,
|
|
5540
5567
|
title: title,
|
|
5541
5568
|
titleLink: titleLink,
|
|
@@ -5615,7 +5642,8 @@ var Account = function Account(_ref) {
|
|
|
5615
5642
|
iconName: iconName,
|
|
5616
5643
|
withOptionsInMobile: false,
|
|
5617
5644
|
withIcon: "left",
|
|
5618
|
-
className: className
|
|
5645
|
+
className: className,
|
|
5646
|
+
tabLinkId: "account-link"
|
|
5619
5647
|
});
|
|
5620
5648
|
};
|
|
5621
5649
|
|
|
@@ -5937,7 +5965,7 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5937
5965
|
};
|
|
5938
5966
|
|
|
5939
5967
|
var _templateObject$D, _templateObject2$t, _templateObject3$j, _templateObject4$g, _templateObject5$c, _templateObject6$8, _templateObject7$5;
|
|
5940
|
-
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n
|
|
5968
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n border-top: 2px solid var(--color-base-light-grey);\n border-bottom: ", ";\n"])), function (_ref) {
|
|
5941
5969
|
var showLine = _ref.showLine;
|
|
5942
5970
|
return showLine ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
5943
5971
|
});
|
|
@@ -5961,13 +5989,31 @@ var ContentContainer = /*#__PURE__*/styled(ExtendedBodyCopyHarmonic).withConfig(
|
|
|
5961
5989
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5962
5990
|
return prop !== 'textHeight';
|
|
5963
5991
|
}
|
|
5964
|
-
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref6) {
|
|
5992
|
+
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n overflow: ", ";\n margin-bottom: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref6) {
|
|
5965
5993
|
var textHeight = _ref6.textHeight;
|
|
5966
5994
|
return textHeight;
|
|
5995
|
+
}, function (_ref7) {
|
|
5996
|
+
var textHeight = _ref7.textHeight;
|
|
5997
|
+
return textHeight === '0px' ? 'hidden' : 'visible';
|
|
5998
|
+
}, function (_ref8) {
|
|
5999
|
+
var textHeight = _ref8.textHeight;
|
|
6000
|
+
return textHeight === '0px' ? '0px' : '12px';
|
|
5967
6001
|
}, devices.mobile);
|
|
5968
6002
|
var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
5969
6003
|
|
|
5970
6004
|
/* eslint-disable react/no-unstable-nested-components */
|
|
6005
|
+
/** In-flow height only so absolutely positioned UI (e.g. react-select menu) does not inflate scrollHeight. */
|
|
6006
|
+
function getPanelContentHeight(panel) {
|
|
6007
|
+
var inner = panel.firstElementChild;
|
|
6008
|
+
if (!inner || !(inner instanceof HTMLElement)) {
|
|
6009
|
+
return panel.scrollHeight;
|
|
6010
|
+
}
|
|
6011
|
+
var innerStyle = window.getComputedStyle(inner);
|
|
6012
|
+
var marginY = (parseFloat(innerStyle.marginTop) || 0) + (parseFloat(innerStyle.marginBottom) || 0);
|
|
6013
|
+
var panelStyle = window.getComputedStyle(panel);
|
|
6014
|
+
var paddingY = (parseFloat(panelStyle.paddingTop) || 0) + (parseFloat(panelStyle.paddingBottom) || 0);
|
|
6015
|
+
return inner.offsetHeight + marginY + paddingY;
|
|
6016
|
+
}
|
|
5971
6017
|
var Accordion = function Accordion(_ref) {
|
|
5972
6018
|
var _expandedStateIcon$ic, _collapsedStateIcon$i;
|
|
5973
6019
|
var _ref$title = _ref.title,
|
|
@@ -6008,7 +6054,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
6008
6054
|
var intervalRef = useRef(null);
|
|
6009
6055
|
useEffect(function () {
|
|
6010
6056
|
if (content.current && initOpen) {
|
|
6011
|
-
setTextHeight(content.current
|
|
6057
|
+
setTextHeight(getPanelContentHeight(content.current) + "px");
|
|
6012
6058
|
}
|
|
6013
6059
|
}, [initOpen]);
|
|
6014
6060
|
useEffect(function () {
|
|
@@ -6034,7 +6080,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
6034
6080
|
return cleanup;
|
|
6035
6081
|
}
|
|
6036
6082
|
var updateHeight = function updateHeight() {
|
|
6037
|
-
setTextHeight(el
|
|
6083
|
+
setTextHeight(getPanelContentHeight(el) + "px");
|
|
6038
6084
|
};
|
|
6039
6085
|
rafRef.current = window.requestAnimationFrame(updateHeight);
|
|
6040
6086
|
if (typeof ResizeObserver !== 'undefined') {
|
|
@@ -6090,6 +6136,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
6090
6136
|
var toggleAccordion = function toggleAccordion() {
|
|
6091
6137
|
if (React__default.Children.count(children) === 0) return;
|
|
6092
6138
|
if (openAccordion) {
|
|
6139
|
+
setIcon(collapsedStateIconData);
|
|
6093
6140
|
setOpenAccordion(false);
|
|
6094
6141
|
setTextHeight('0px');
|
|
6095
6142
|
setIcon(collapsedStateIconData);
|
|
@@ -6624,7 +6671,7 @@ var CastFiltersComponentWrapper = /*#__PURE__*/styled.div(_templateObject$J || (
|
|
|
6624
6671
|
var CastFiltersWrapper = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6625
6672
|
var HeadingTextWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
|
|
6626
6673
|
var RotatorButtonsWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6627
|
-
var CastWrapper = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x:
|
|
6674
|
+
var CastWrapper = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x: hidden;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n\n @media ", " {\n flex-direction: column;\n gap: 10px;\n overflow-x: scroll;\n }\n"])), devices.mobile);
|
|
6628
6675
|
var ActionButtons = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n gap: 32px;\n\n .mobile-only {\n visibility: hidden;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n }\n\n @media ", " {\n .mobile-only {\n visibility: visible;\n padding-block: 24px;\n font-size: 17px;\n line-height: 24px;\n }\n\n flex-direction: row-reverse;\n gap: unset;\n justify-content: space-between;\n border-block-end: 2px solid var(--base-color-light-grey);\n\n :has(.mobile-only) {\n justify-content: left;\n }\n\n :not(:has(.mobile-only)) {\n padding-block: 12px;\n }\n\n a {\n width: fit-content;\n }\n }\n"])), devices.mobile);
|
|
6629
6676
|
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n margin-block-start: 2px;\n margin-inline: 2px;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n\n :focus-visible {\n outline: none;\n\n & > div:first-child {\n outline: 2px solid var(--color-base-black);\n }\n }\n\n @media ", " {\n flex-direction: row;\n gap: 20px;\n margin-block-end: 2px;\n margin-inline-end: unset;\n\n p {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
|
|
6630
6677
|
var PersonToggle = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n width: 86px;\n height: 86px;\n min-width: 86px;\n border: 4px solid;\n border-color: ", ";\n border-radius: 50%;\n background: var(--color-base-white);\n position: relative;\n box-shadow: inset 0 0 0 4px var(--color-base-white);\n"])), function (_ref) {
|
|
@@ -6714,7 +6761,7 @@ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
|
|
|
6714
6761
|
return movedSlides;
|
|
6715
6762
|
};
|
|
6716
6763
|
|
|
6717
|
-
var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
|
|
6764
|
+
var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange", "limitDragToNavigableRange"];
|
|
6718
6765
|
var MAX_CLONES_NUMBER = 6;
|
|
6719
6766
|
var CLICK_DRAG_THRESHOLD = 10;
|
|
6720
6767
|
var getClonesCount = function getClonesCount(infinite, childrenLength) {
|
|
@@ -6739,6 +6786,8 @@ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
6739
6786
|
slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
|
|
6740
6787
|
onActiveChange = _ref.onActiveChange,
|
|
6741
6788
|
onOverflowChange = _ref.onOverflowChange,
|
|
6789
|
+
_ref$limitDragToNavig = _ref.limitDragToNavigableRange,
|
|
6790
|
+
limitDragToNavigableRange = _ref$limitDragToNavig === void 0 ? false : _ref$limitDragToNavig,
|
|
6742
6791
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
6743
6792
|
var containerRef = useRef(null);
|
|
6744
6793
|
var childRefs = useRef([]);
|
|
@@ -6844,6 +6893,39 @@ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
6844
6893
|
}, 0);
|
|
6845
6894
|
return (slidesOffsetBefore || 0) - widthsBefore;
|
|
6846
6895
|
};
|
|
6896
|
+
var canScrollRightFromIndex = function canScrollRightFromIndex(index) {
|
|
6897
|
+
if (infinite) return true;
|
|
6898
|
+
if (slideWidths.length === 0 || containerWidth === 0) return false;
|
|
6899
|
+
var totalContentWidth = slideWidths.reduce(function (sum, width) {
|
|
6900
|
+
return sum + width;
|
|
6901
|
+
}, 0);
|
|
6902
|
+
var widthBeforeCurrent = slideWidths.slice(0, index).reduce(function (sum, width) {
|
|
6903
|
+
return sum + width;
|
|
6904
|
+
}, 0);
|
|
6905
|
+
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
6906
|
+
var remainingToRight = totalContentWidth - widthBeforeCurrent - visibleSpace;
|
|
6907
|
+
var visible = getVisibleIndexes(index, slideWidths, containerWidth, slides.length);
|
|
6908
|
+
var lastVisibleIndex = visible.length ? visible[visible.length - 1] : index;
|
|
6909
|
+
var nextIndex = lastVisibleIndex + 1;
|
|
6910
|
+
if (nextIndex >= slideWidths.length) return false;
|
|
6911
|
+
var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
|
|
6912
|
+
if (nextSlideWidth === 0) return false;
|
|
6913
|
+
var EPS = 1; // pixel tolerance
|
|
6914
|
+
// full next slide fits
|
|
6915
|
+
if (remainingToRight + EPS >= nextSlideWidth) return true;
|
|
6916
|
+
return remainingToRight > 0;
|
|
6917
|
+
};
|
|
6918
|
+
var canMoveNext = function canMoveNext() {
|
|
6919
|
+
return canScrollRightFromIndex(currentIndex);
|
|
6920
|
+
};
|
|
6921
|
+
var getMaxNavigableIndex = function getMaxNavigableIndex() {
|
|
6922
|
+
if (infinite) return slides.length - 1;
|
|
6923
|
+
var index = 0;
|
|
6924
|
+
while (index < slides.length - 1 && canScrollRightFromIndex(index)) {
|
|
6925
|
+
index += 1;
|
|
6926
|
+
}
|
|
6927
|
+
return index;
|
|
6928
|
+
};
|
|
6847
6929
|
var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
|
|
6848
6930
|
var delta = currentTranslate.current - getTranslateX();
|
|
6849
6931
|
var direction = delta > 0 ? -1 : 1;
|
|
@@ -6851,7 +6933,8 @@ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
6851
6933
|
if (Math.abs(delta) > 20) {
|
|
6852
6934
|
movedSlides = Math.max(1, movedSlides);
|
|
6853
6935
|
var targetIndex = currentIndex + direction * movedSlides;
|
|
6854
|
-
var
|
|
6936
|
+
var maxNavigableIndex = limitDragToNavigableRange ? getMaxNavigableIndex() : slides.length - 1;
|
|
6937
|
+
var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(maxNavigableIndex, targetIndex));
|
|
6855
6938
|
if (!infinite) {
|
|
6856
6939
|
currentTranslate.current = getTranslateForIndex(finalIndex);
|
|
6857
6940
|
setDragTranslateX(null);
|
|
@@ -6866,28 +6949,6 @@ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
6866
6949
|
}
|
|
6867
6950
|
setDragTranslateX(null);
|
|
6868
6951
|
};
|
|
6869
|
-
var canMoveNext = function canMoveNext() {
|
|
6870
|
-
if (infinite) return true;
|
|
6871
|
-
if (slideWidths.length === 0 || containerWidth === 0) return false;
|
|
6872
|
-
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
6873
|
-
return acc + w;
|
|
6874
|
-
}, 0);
|
|
6875
|
-
var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
|
|
6876
|
-
return acc + w;
|
|
6877
|
-
}, 0);
|
|
6878
|
-
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
6879
|
-
var remainingToRight = totalWidth - widthsBefore - visibleSpace;
|
|
6880
|
-
var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
6881
|
-
var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
|
|
6882
|
-
var nextIndex = lastVisibleIndex + 1;
|
|
6883
|
-
if (nextIndex >= slideWidths.length) return false;
|
|
6884
|
-
var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
|
|
6885
|
-
if (nextSlideWidth === 0) return false;
|
|
6886
|
-
var EPS = 1; // pixel tolerance
|
|
6887
|
-
// full next slide fits
|
|
6888
|
-
if (remainingToRight + EPS >= nextSlideWidth) return true;
|
|
6889
|
-
return remainingToRight > 0;
|
|
6890
|
-
};
|
|
6891
6952
|
var handleTransitionEnd = function handleTransitionEnd() {
|
|
6892
6953
|
setTransitioning(false);
|
|
6893
6954
|
if (!infinite) return;
|
|
@@ -7099,11 +7160,13 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7099
7160
|
};
|
|
7100
7161
|
var onNext = function onNext() {
|
|
7101
7162
|
var _swipeRef$current4;
|
|
7102
|
-
|
|
7163
|
+
if (!availableNext) return;
|
|
7164
|
+
(_swipeRef$current4 = swipeRef.current) == null || _swipeRef$current4.nextSlide();
|
|
7103
7165
|
};
|
|
7104
7166
|
var onPrev = function onPrev() {
|
|
7105
7167
|
var _swipeRef$current5;
|
|
7106
|
-
|
|
7168
|
+
if (!availablePrev) return;
|
|
7169
|
+
(_swipeRef$current5 = swipeRef.current) == null || _swipeRef$current5.prevSlide();
|
|
7107
7170
|
};
|
|
7108
7171
|
useEffect(function () {
|
|
7109
7172
|
var el = castWrapperRef.current;
|
|
@@ -7126,15 +7189,15 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7126
7189
|
};
|
|
7127
7190
|
}, []);
|
|
7128
7191
|
var handleMouseDown = useCallback(function (e) {
|
|
7129
|
-
if (!castWrapperRef.current) return;
|
|
7192
|
+
if (!isMobile || !castWrapperRef.current) return;
|
|
7130
7193
|
isDraggingRef.current = true;
|
|
7131
7194
|
hasDraggedRef.current = false;
|
|
7132
7195
|
startXRef.current = e.clientX;
|
|
7133
7196
|
scrollStartRef.current = castWrapperRef.current.scrollLeft;
|
|
7134
7197
|
if (e.target === castWrapperRef.current) e.preventDefault();
|
|
7135
|
-
}, []);
|
|
7198
|
+
}, [isMobile]);
|
|
7136
7199
|
var handleMouseMove = useCallback(function (e) {
|
|
7137
|
-
if (!isDraggingRef.current || !castWrapperRef.current) return;
|
|
7200
|
+
if (!isMobile || !isDraggingRef.current || !castWrapperRef.current) return;
|
|
7138
7201
|
var deltaX = e.clientX - startXRef.current;
|
|
7139
7202
|
var threshold = 5;
|
|
7140
7203
|
if (Math.abs(deltaX) > threshold) {
|
|
@@ -7142,17 +7205,19 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7142
7205
|
e.preventDefault();
|
|
7143
7206
|
castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
|
|
7144
7207
|
}
|
|
7145
|
-
}, []);
|
|
7208
|
+
}, [isMobile]);
|
|
7146
7209
|
var handleMouseUp = useCallback(function () {
|
|
7210
|
+
if (!isMobile) return;
|
|
7147
7211
|
isDraggingRef.current = false;
|
|
7148
7212
|
setTimeout(function () {
|
|
7149
7213
|
hasDraggedRef.current = false;
|
|
7150
7214
|
}, 0);
|
|
7151
|
-
}, []);
|
|
7215
|
+
}, [isMobile]);
|
|
7152
7216
|
var handleMouseLeave = useCallback(function () {
|
|
7217
|
+
if (!isMobile) return;
|
|
7153
7218
|
isDraggingRef.current = false;
|
|
7154
7219
|
hasDraggedRef.current = false;
|
|
7155
|
-
}, []);
|
|
7220
|
+
}, [isMobile]);
|
|
7156
7221
|
var handleClick = React__default.useCallback(function (index, onClick) {
|
|
7157
7222
|
if (hasDraggedRef.current) return;
|
|
7158
7223
|
if (onSelect) onSelect(index);
|
|
@@ -7238,7 +7303,8 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7238
7303
|
onIndexChange: onIndexChangeHandler,
|
|
7239
7304
|
"data-testid": "cast-filter-swipe",
|
|
7240
7305
|
ref: swipeRef,
|
|
7241
|
-
onOverflowChange: handleOverflowChange
|
|
7306
|
+
onOverflowChange: handleOverflowChange,
|
|
7307
|
+
limitDragToNavigableRange: true
|
|
7242
7308
|
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7243
7309
|
size: "medium",
|
|
7244
7310
|
className: "mobile-only"
|
|
@@ -7576,22 +7642,25 @@ var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$n |
|
|
|
7576
7642
|
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') 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') format('woff2');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n";
|
|
7577
7643
|
styleInject(css_248z$1);
|
|
7578
7644
|
|
|
7579
|
-
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 /* Shadows */\n --shadow-floating: 0px 4px 38px 0px #0000000a;\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 --button-anchor-tab-color: var(--color-primary-red);\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-small-width: 44px;\n --rotator-button-small-icon-width: 28px;\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-margin: 12px;\n\n --line-height-listing: 36px;\n\n --upsell-border-color: var(--color-primary-red);\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\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\n --line-height-listing: 34px;\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\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 }\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 --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-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: 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: 4px;\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 --page-header-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-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: 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";
|
|
7580
|
-
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
7645
|
+
var css_248z$2 = "/* ~~~~~ 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";
|
|
7581
7646
|
styleInject(css_248z$2);
|
|
7582
7647
|
|
|
7583
|
-
var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n /* Stream theme overrides */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-background: #1a1a1a;\n --color-primary-button: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-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-anchor-tab-color: var(--color-primary-black);\n\n --rotator-button-color: var(--color-base-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-black);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\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-black);\n\n --heading-promo-bg-color: var(--color-base-black);\n --page-header-bg-color: var(--color-primary-black);\n\n --upsell-border-color: var(--color-primary-black);\n}\n";
|
|
7584
|
-
var
|
|
7648
|
+
var css_248z$3 = ".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 /* Shadows */\n --shadow-floating: 0px 4px 38px 0px #0000000a;\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 --button-anchor-tab-color: var(--color-primary-red);\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-small-width: 44px;\n --rotator-button-small-icon-width: 28px;\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-margin: 12px;\n\n --line-height-listing: 36px;\n\n --upsell-border-color: var(--color-primary-red);\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\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\n --line-height-listing: 34px;\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\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 }\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 --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-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: 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: 4px;\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 --page-header-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-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: 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";
|
|
7649
|
+
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
7585
7650
|
styleInject(css_248z$3);
|
|
7586
7651
|
|
|
7587
|
-
var css_248z$4 = ".
|
|
7588
|
-
var
|
|
7652
|
+
var css_248z$4 = ".stream-theme-module_streamTheme__lTfqQ {\n /* Stream theme overrides */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-background: #1a1a1a;\n --color-primary-button: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-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-anchor-tab-color: var(--color-primary-black);\n\n --rotator-button-color: var(--color-base-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-black);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\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-black);\n\n --heading-promo-bg-color: var(--color-base-black);\n --page-header-bg-color: var(--color-primary-black);\n\n --upsell-border-color: var(--color-primary-black);\n}\n";
|
|
7653
|
+
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
7589
7654
|
styleInject(css_248z$4);
|
|
7590
7655
|
|
|
7591
|
-
var css_248z$5 = ".
|
|
7592
|
-
var
|
|
7656
|
+
var css_248z$5 = ".cinema-theme-module_cinemaTheme__f5QFs {\n /* White */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-button: #ffffff;\n --color-primary-background: #1a1a1a;\n --color-primary-button-reverse-bg: #ffffff;\n --color-primary-button-reverse: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n --button-color: var(--color-primary-black);\n --button-bg-color: var(--color-base-white);\n --button-hover-color: var(--color-white-hovered);\n --button-pressed-color: var(--color-white-pressed);\n --button-secondary-color: var(--color-base-white);\n --button-secondary-hover-color: var(--color-white-hovered);\n --button-secondary-pressed-color: var(--color-white-pressed);\n --button-tertiary-color: var(--color-base-white);\n --button-tertiary-hover-color: var(--color-white-hovered);\n --button-tertiary-pressed-color: var(--color-white-pressed);\n --button-anchor-tab-color: var(--color-primary-black);\n\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-black);\n\n --announcement-banner-color: var(--color-primary-red);\n --announcement-banner-bg-color: var(--color-base-white);\n --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n\n --information-panel-color: var(--color-primary-black);\n --information-panel-bg-color: var(--color-base-white);\n --information-panel-button-color: var(--color-base-white);\n --information-panel-button-bg-color: var(--color-primary-red);\n --information-panel-button-hover-color: var(--color-rbo-red-hovered);\n --information-panel-button-pressed-color: var(--color-rbo-red-pressed);\n\n --heading-promo-bg-color: var(--color-base-white);\n --page-header-bg-color: var(--color-primary-black);\n\n --upsell-border-color: var(--color-primary-black);\n}\n";
|
|
7657
|
+
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
7593
7658
|
styleInject(css_248z$5);
|
|
7594
7659
|
|
|
7660
|
+
var css_248z$6 = ".schools-theme-module_schoolsTheme__CWHba {\n /* Schools theme overrides */\n --base-color-primary: #c8102e;\n --color-primary: #c8102e;\n --color-primary-button: #c8102e;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n\n @media only screen and (max-width: calc(var(--breakpoint-sm) - 1px)) {\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n }\n}\n";
|
|
7661
|
+
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
7662
|
+
styleInject(css_248z$6);
|
|
7663
|
+
|
|
7595
7664
|
/* eslint-disable react/jsx-no-useless-fragment */
|
|
7596
7665
|
var DEFAULT_THEME = ThemeType.Core;
|
|
7597
7666
|
var getThemeClass = function getThemeClass(theme) {
|
|
@@ -7859,91 +7928,274 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7859
7928
|
};
|
|
7860
7929
|
|
|
7861
7930
|
var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
|
|
7862
|
-
var
|
|
7863
|
-
var
|
|
7864
|
-
var
|
|
7865
|
-
|
|
7866
|
-
|
|
7867
|
-
|
|
7868
|
-
|
|
7869
|
-
var
|
|
7931
|
+
var ImpactHeaderWrapper = /*#__PURE__*/styled.header(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-black);\n padding: 36px 0;\n\n @media ", " {\n padding: 21px 0;\n }\n"])), devices.mobile);
|
|
7932
|
+
var ImpactTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: grid;\n grid-template-columns: ", ";\n padding: 0 50px;\n\n @media ", " {\n padding: 0 50px;\n }\n\n @media ", " {\n padding: 0 20px;\n grid-template-columns: ", ";\n }\n"])), function (_ref) {
|
|
7933
|
+
var hasButton = _ref.hasButton,
|
|
7934
|
+
sponsorPresent = _ref.sponsorPresent;
|
|
7935
|
+
if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
|
|
7936
|
+
return '1fr';
|
|
7937
|
+
}, devices.tablet, devices.mobile, function (_ref2) {
|
|
7938
|
+
var sponsorPresent = _ref2.sponsorPresent;
|
|
7939
|
+
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7940
|
+
});
|
|
7941
|
+
var TitleButtonWrapper = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7942
|
+
var sponsorWidth = _ref3.sponsorWidth;
|
|
7943
|
+
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7944
|
+
});
|
|
7945
|
+
var TitleButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n position: static;\n margin-right: 0;\n }\n"])), devices.mobile);
|
|
7946
|
+
var MobileButtonWrapper = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n box-sizing: border-box;\n padding: 0 20px 16px 20px;\n"])));
|
|
7947
|
+
var ImpactTitle = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n align-self: center;\n grid-column: ", ";\n min-width: 0;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 2;\n max-height: calc(48px * 2);\n text-align: center;\n padding-bottom: 2px;\n\n @media ", " {\n grid-column: 1;\n -webkit-line-clamp: 4;\n max-height: calc(34px * 4);\n text-align: left;\n }\n"])), function (_ref4) {
|
|
7948
|
+
var hasColumns = _ref4.hasColumns;
|
|
7949
|
+
return hasColumns ? '3' : '1';
|
|
7950
|
+
}, devices.mobile);
|
|
7951
|
+
var ImpactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n aspect-ratio: 21 / 9;\n height: auto;\n &::before {\n content: '';\n display: block;\n padding-top: calc(9 / 21 * 100%);\n }\n\n > picture,\n img,\n video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n img {\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: cover;\n }\n }\n @media ", " {\n aspect-ratio: 1 / 1;\n &::before {\n padding-top: 100%;\n }\n max-height: 100vh;\n img {\n object-fit: cover;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
7952
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 5;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n z-index: ", ";\n min-width: ", ";\n\n @media ", " {\n grid-column: 3;\n justify-content: flex-start;\n min-width: unset;\n }\n"])), zIndexes.sponsorship, function (_ref5) {
|
|
7953
|
+
var buttonWidth = _ref5.buttonWidth;
|
|
7954
|
+
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7955
|
+
}, devices.mobile);
|
|
7956
|
+
|
|
7957
|
+
var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q;
|
|
7958
|
+
var VideoPlayButton$1 = /*#__PURE__*/styled.button(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n background-color: var(--color-base-transparent);\n border: none;\n cursor: pointer;\n\n @media ", " {\n width: 60px;\n height: 60px;\n }\n"])), devices.mobile);
|
|
7959
|
+
var VideoControlsWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
7960
|
+
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 20px;\n\n @media ", " {\n margin: 20px 4px;\n }\n"])), devices.mobile);
|
|
7961
|
+
var LeftWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7962
|
+
|
|
7963
|
+
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
7964
|
+
var videoElementId = _ref.videoElementId,
|
|
7965
|
+
_ref$loop = _ref.loop,
|
|
7966
|
+
loop = _ref$loop === void 0 ? false : _ref$loop;
|
|
7967
|
+
var _React$useState = React__default.useState(false),
|
|
7968
|
+
playing = _React$useState[0],
|
|
7969
|
+
setPlaying = _React$useState[1];
|
|
7970
|
+
var getVideoElement = function getVideoElement() {
|
|
7971
|
+
return document.querySelector("#" + videoElementId);
|
|
7972
|
+
};
|
|
7973
|
+
React__default.useEffect(function () {
|
|
7974
|
+
var video = getVideoElement();
|
|
7975
|
+
if (video) {
|
|
7976
|
+
video.loop = loop;
|
|
7977
|
+
}
|
|
7978
|
+
}, [loop]);
|
|
7979
|
+
var handlePlay = React__default.useCallback(function () {
|
|
7980
|
+
var video = getVideoElement();
|
|
7981
|
+
if (!video) return;
|
|
7982
|
+
if (playing) {
|
|
7983
|
+
video.pause();
|
|
7984
|
+
setPlaying(false);
|
|
7985
|
+
} else {
|
|
7986
|
+
video == null || video.play();
|
|
7987
|
+
setPlaying(true);
|
|
7988
|
+
}
|
|
7989
|
+
}, [playing]);
|
|
7990
|
+
return /*#__PURE__*/React__default.createElement(VideoControlsWrapper$1, {
|
|
7991
|
+
className: "video-controls-container"
|
|
7992
|
+
}, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper$1, null, /*#__PURE__*/React__default.createElement(LeftWrapper$1, null, /*#__PURE__*/React__default.createElement(VideoPlayButton$1, {
|
|
7993
|
+
id: "play",
|
|
7994
|
+
onClick: handlePlay,
|
|
7995
|
+
className: "video-play-button",
|
|
7996
|
+
"data-testid": "video-play-button",
|
|
7997
|
+
"aria-label": !playing ? 'Play' : 'Pause'
|
|
7998
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7999
|
+
iconName: !playing ? 'Play' : 'Pause',
|
|
8000
|
+
color: "white"
|
|
8001
|
+
})))));
|
|
8002
|
+
};
|
|
7870
8003
|
|
|
7871
8004
|
var _excluded$k = ["text"];
|
|
7872
|
-
var
|
|
7873
|
-
|
|
7874
|
-
|
|
7875
|
-
|
|
7876
|
-
|
|
7877
|
-
|
|
7878
|
-
|
|
7879
|
-
|
|
7880
|
-
|
|
7881
|
-
|
|
7882
|
-
|
|
7883
|
-
|
|
7884
|
-
|
|
7885
|
-
|
|
7886
|
-
|
|
7887
|
-
|
|
7888
|
-
|
|
7889
|
-
|
|
7890
|
-
|
|
7891
|
-
|
|
7892
|
-
|
|
7893
|
-
|
|
7894
|
-
|
|
7895
|
-
|
|
7896
|
-
|
|
7897
|
-
|
|
7898
|
-
|
|
8005
|
+
var CHAR_LIMIT = 100;
|
|
8006
|
+
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
8007
|
+
var mobileVideo = video.mobile || video.desktop;
|
|
8008
|
+
var desktopVideo = video.desktop || video.mobile;
|
|
8009
|
+
var mobilePoster = poster.mobile || poster.desktop;
|
|
8010
|
+
var desktopPoster = poster.desktop || poster.mobile;
|
|
8011
|
+
var _useState = useState(desktopPoster),
|
|
8012
|
+
posterUrl = _useState[0],
|
|
8013
|
+
setPoster = _useState[1];
|
|
8014
|
+
var _useState2 = useState(desktopVideo),
|
|
8015
|
+
videoUrl = _useState2[0],
|
|
8016
|
+
setVideoUrl = _useState2[1];
|
|
8017
|
+
var isMobile = useMobile();
|
|
8018
|
+
useEffect(function () {
|
|
8019
|
+
setPoster(isMobile ? mobilePoster : desktopPoster);
|
|
8020
|
+
setVideoUrl(isMobile ? mobileVideo : desktopVideo);
|
|
8021
|
+
}, [isMobile]);
|
|
8022
|
+
return {
|
|
8023
|
+
posterUrl: posterUrl,
|
|
8024
|
+
videoUrl: videoUrl
|
|
8025
|
+
};
|
|
8026
|
+
};
|
|
8027
|
+
var VideoWithControls = function VideoWithControls(_ref) {
|
|
8028
|
+
var video = _ref.video,
|
|
8029
|
+
poster = _ref.poster;
|
|
8030
|
+
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
8031
|
+
posterUrl = _useResponsiveVideo.posterUrl,
|
|
8032
|
+
videoUrl = _useResponsiveVideo.videoUrl;
|
|
8033
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
|
|
8034
|
+
id: video.elementId,
|
|
8035
|
+
width: "100%",
|
|
8036
|
+
height: "100%",
|
|
8037
|
+
poster: posterUrl,
|
|
8038
|
+
src: videoUrl,
|
|
8039
|
+
"data-testid": "impact-video",
|
|
8040
|
+
playsInline: true
|
|
8041
|
+
}, /*#__PURE__*/React__default.createElement("source", {
|
|
8042
|
+
src: videoUrl
|
|
8043
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
8044
|
+
src: posterUrl,
|
|
8045
|
+
alt: poster.alt,
|
|
8046
|
+
"data-testid": "impact-image"
|
|
8047
|
+
})), /*#__PURE__*/React__default.createElement(VideoControlsImpact, {
|
|
8048
|
+
loop: true,
|
|
8049
|
+
videoElementId: video.elementId
|
|
8050
|
+
}));
|
|
8051
|
+
};
|
|
8052
|
+
var ImpactHeaderImage = function ImpactHeaderImage(_ref2) {
|
|
8053
|
+
var mobile = _ref2.mobile,
|
|
8054
|
+
desktop = _ref2.desktop,
|
|
8055
|
+
alt = _ref2.alt;
|
|
8056
|
+
return /*#__PURE__*/React__default.createElement("picture", {
|
|
7899
8057
|
"data-testid": "impact-picture"
|
|
7900
|
-
},
|
|
7901
|
-
srcSet:
|
|
8058
|
+
}, mobile && /*#__PURE__*/React__default.createElement("source", {
|
|
8059
|
+
srcSet: mobile,
|
|
7902
8060
|
media: "" + devices.mobile,
|
|
7903
8061
|
"data-testid": "impact-mobile-image-source"
|
|
7904
|
-
})
|
|
7905
|
-
srcSet:
|
|
8062
|
+
}), /*#__PURE__*/React__default.createElement("source", {
|
|
8063
|
+
srcSet: desktop,
|
|
7906
8064
|
media: "" + devices.desktop,
|
|
7907
8065
|
"data-testid": "impact-desktop-image-source"
|
|
7908
8066
|
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7909
|
-
src:
|
|
7910
|
-
alt:
|
|
8067
|
+
src: desktop,
|
|
8068
|
+
alt: alt,
|
|
7911
8069
|
"data-testid": "impact-image"
|
|
7912
|
-
}))
|
|
7913
|
-
|
|
7914
|
-
|
|
7915
|
-
|
|
7916
|
-
|
|
7917
|
-
|
|
7918
|
-
|
|
7919
|
-
}
|
|
8070
|
+
}));
|
|
8071
|
+
};
|
|
8072
|
+
var ImpactHeaderVideo = function ImpactHeaderVideo(_ref3) {
|
|
8073
|
+
var video = _ref3.video,
|
|
8074
|
+
poster = _ref3.poster;
|
|
8075
|
+
if (!video.desktop && !video.mobile) {
|
|
8076
|
+
return /*#__PURE__*/React__default.createElement(ImpactHeaderImage, Object.assign({}, poster));
|
|
8077
|
+
}
|
|
8078
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8079
|
+
video: video,
|
|
8080
|
+
poster: poster
|
|
8081
|
+
});
|
|
8082
|
+
};
|
|
8083
|
+
var useElementWidth = function useElementWidth() {
|
|
8084
|
+
var _React$useState = React__default.useState(undefined),
|
|
8085
|
+
width = _React$useState[0],
|
|
8086
|
+
setWidth = _React$useState[1];
|
|
8087
|
+
var observerRef = React__default.useRef(null);
|
|
8088
|
+
var ref = React__default.useCallback(function (node) {
|
|
8089
|
+
if (observerRef.current) {
|
|
8090
|
+
observerRef.current.disconnect();
|
|
8091
|
+
observerRef.current = null;
|
|
8092
|
+
}
|
|
8093
|
+
if (!node) return;
|
|
8094
|
+
observerRef.current = new ResizeObserver(function () {
|
|
8095
|
+
setWidth(node.offsetWidth);
|
|
8096
|
+
});
|
|
8097
|
+
observerRef.current.observe(node);
|
|
8098
|
+
}, []);
|
|
8099
|
+
return [ref, width];
|
|
8100
|
+
};
|
|
8101
|
+
var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
8102
|
+
var text = _ref4.text,
|
|
8103
|
+
link = _ref4.link,
|
|
8104
|
+
_ref4$sponsor = _ref4.sponsor,
|
|
8105
|
+
sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
|
|
8106
|
+
customSponsorImage = _ref4.customSponsorImage,
|
|
8107
|
+
bgUrlDesktop = _ref4.bgUrlDesktop,
|
|
8108
|
+
bgUrlDevice = _ref4.bgUrlDevice,
|
|
8109
|
+
_ref4$bgImageAltText = _ref4.bgImageAltText,
|
|
8110
|
+
bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
|
|
8111
|
+
videoUrlDesktop = _ref4.videoUrlDesktop,
|
|
8112
|
+
videoUrlMobile = _ref4.videoUrlMobile,
|
|
8113
|
+
className = _ref4.className;
|
|
8114
|
+
var _useViewport = useViewport(),
|
|
8115
|
+
isMobile = _useViewport.isMobile,
|
|
8116
|
+
hydrated = _useViewport.hydrated;
|
|
8117
|
+
var _useElementWidth = useElementWidth(),
|
|
8118
|
+
buttonRef = _useElementWidth[0],
|
|
8119
|
+
buttonWidth = _useElementWidth[1];
|
|
8120
|
+
var _useElementWidth2 = useElementWidth(),
|
|
8121
|
+
sponsorRef = _useElementWidth2[0],
|
|
8122
|
+
sponsorWidth = _useElementWidth2[1];
|
|
8123
|
+
var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
|
|
8124
|
+
var _ref5 = link || {},
|
|
8125
|
+
linkText = _ref5.text,
|
|
8126
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
|
|
8127
|
+
var video = {
|
|
8128
|
+
elementId: 'impact-header-video',
|
|
8129
|
+
desktop: videoUrlDesktop,
|
|
8130
|
+
mobile: videoUrlMobile
|
|
8131
|
+
};
|
|
8132
|
+
var poster = {
|
|
8133
|
+
desktop: bgUrlDesktop,
|
|
8134
|
+
mobile: bgUrlDevice,
|
|
8135
|
+
alt: bgImageAltText
|
|
8136
|
+
};
|
|
8137
|
+
var sponsorContent = sponsor ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
8138
|
+
"data-testid": customSponsorImage ? 'impact-custom-sponsor' : undefined
|
|
8139
|
+
}, customSponsorImage != null ? customSponsorImage : {}))) : null;
|
|
8140
|
+
var hasButton = !isMobile && !!(link && linkText);
|
|
8141
|
+
var showSideColumns = hasButton || !!sponsor;
|
|
8142
|
+
var showTitleBar = !!(text || hasButton || sponsor);
|
|
8143
|
+
var renderSponsor = function renderSponsor() {
|
|
8144
|
+
if (isMobile) {
|
|
8145
|
+
if (!sponsorContent) return null;
|
|
8146
|
+
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8147
|
+
"data-testid": "impact-sponsor"
|
|
8148
|
+
}, sponsorContent);
|
|
8149
|
+
}
|
|
8150
|
+
if (!showSideColumns) return null;
|
|
8151
|
+
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8152
|
+
ref: sponsorRef,
|
|
8153
|
+
buttonWidth: buttonWidth,
|
|
8154
|
+
"data-testid": "impact-sponsor"
|
|
8155
|
+
}, sponsorContent);
|
|
8156
|
+
};
|
|
8157
|
+
if (!hydrated) return null;
|
|
8158
|
+
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
8159
|
+
theme: ThemeType.Cinema
|
|
8160
|
+
}, showTitleBar ? (/*#__PURE__*/React__default.createElement(ImpactHeaderWrapper, {
|
|
8161
|
+
className: className
|
|
8162
|
+
}, /*#__PURE__*/React__default.createElement(ImpactTitleWrapper, {
|
|
8163
|
+
"data-testid": "impact-title-wrapper",
|
|
8164
|
+
sponsorPresent: !!sponsor,
|
|
8165
|
+
hasButton: hasButton
|
|
8166
|
+
}, !isMobile && showSideColumns ? (/*#__PURE__*/React__default.createElement(TitleButtonWrapper, {
|
|
8167
|
+
sponsorWidth: sponsorWidth
|
|
8168
|
+
}, hasButton ? (/*#__PURE__*/React__default.createElement(TitleButton, Object.assign({
|
|
8169
|
+
ref: buttonRef
|
|
8170
|
+
}, restLink, {
|
|
7920
8171
|
"data-testid": "impact-link"
|
|
7921
|
-
}
|
|
7922
|
-
|
|
7923
|
-
|
|
7924
|
-
|
|
7925
|
-
|
|
7926
|
-
|
|
7927
|
-
|
|
7928
|
-
|
|
7929
|
-
|
|
8172
|
+
}), linkText)) : null)) : null, text ? (/*#__PURE__*/React__default.createElement(ImpactTitle, {
|
|
8173
|
+
size: "large",
|
|
8174
|
+
color: "white",
|
|
8175
|
+
hasColumns: !isMobile && showSideColumns
|
|
8176
|
+
}, truncatedText)) : null, renderSponsor()))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderAssetWrapper, {
|
|
8177
|
+
className: className
|
|
8178
|
+
}, /*#__PURE__*/React__default.createElement(ImpactHeaderVideo, {
|
|
8179
|
+
video: video,
|
|
8180
|
+
poster: poster
|
|
8181
|
+
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
7930
8182
|
};
|
|
7931
8183
|
|
|
7932
|
-
var _templateObject$
|
|
7933
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8184
|
+
var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$r, _templateObject5$l;
|
|
8185
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
7934
8186
|
var color = _ref.color;
|
|
7935
8187
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
7936
8188
|
}, devices.mobileAndTablet);
|
|
7937
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
8189
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
7938
8190
|
var hasImage = _ref2.hasImage;
|
|
7939
8191
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7940
8192
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7941
8193
|
var hasImage = _ref3.hasImage;
|
|
7942
8194
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7943
8195
|
});
|
|
7944
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
7945
|
-
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7946
|
-
var ScrollDownWrapper
|
|
8196
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
8197
|
+
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8198
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7947
8199
|
|
|
7948
8200
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7949
8201
|
var _image$src, _image$alt;
|
|
@@ -7957,7 +8209,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7957
8209
|
"data-testid": "wrapper"
|
|
7958
8210
|
}, /*#__PURE__*/React__default.createElement(LeftPanel, {
|
|
7959
8211
|
hasImage: hasImage
|
|
7960
|
-
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper
|
|
8212
|
+
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
7961
8213
|
"data-testid": "scroll-link"
|
|
7962
8214
|
}, /*#__PURE__*/React__default.createElement(TabLink, {
|
|
7963
8215
|
iconName: "Arrow",
|
|
@@ -7973,11 +8225,11 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7973
8225
|
})))));
|
|
7974
8226
|
};
|
|
7975
8227
|
|
|
7976
|
-
var _templateObject$
|
|
7977
|
-
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$
|
|
7978
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7979
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7980
|
-
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8228
|
+
var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject4$s, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
8229
|
+
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
8230
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
8231
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
8232
|
+
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
7981
8233
|
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
|
|
7982
8234
|
var theme = _ref.theme;
|
|
7983
8235
|
return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
@@ -8187,7 +8439,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8187
8439
|
})))))))))));
|
|
8188
8440
|
};
|
|
8189
8441
|
|
|
8190
|
-
var _templateObject$
|
|
8442
|
+
var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$t;
|
|
8191
8443
|
var GRID = {
|
|
8192
8444
|
desktop: {
|
|
8193
8445
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8200,19 +8452,19 @@ var GRID = {
|
|
|
8200
8452
|
right: '2 / 1 / 3 / 15'
|
|
8201
8453
|
}
|
|
8202
8454
|
};
|
|
8203
|
-
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8455
|
+
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8204
8456
|
var $background = _ref.$background;
|
|
8205
8457
|
return "var(--color-" + $background + ")";
|
|
8206
8458
|
});
|
|
8207
|
-
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8459
|
+
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8208
8460
|
var hasImage = _ref2.hasImage;
|
|
8209
8461
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8210
8462
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8211
8463
|
var hasImage = _ref3.hasImage;
|
|
8212
8464
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8213
8465
|
});
|
|
8214
|
-
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8215
|
-
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8466
|
+
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
|
|
8467
|
+
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8216
8468
|
|
|
8217
8469
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
8218
8470
|
var _image$src, _image$alt;
|
|
@@ -8235,10 +8487,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8235
8487
|
})))));
|
|
8236
8488
|
};
|
|
8237
8489
|
|
|
8238
|
-
var _templateObject$
|
|
8239
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
8240
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
8241
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8490
|
+
var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
|
|
8491
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8492
|
+
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
8493
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8242
8494
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
8243
8495
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8244
8496
|
var invert = _ref.invert,
|
|
@@ -8349,7 +8601,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8349
8601
|
};
|
|
8350
8602
|
|
|
8351
8603
|
var _excluded$l = ["text"];
|
|
8352
|
-
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
8604
|
+
var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
|
|
8353
8605
|
var mobileVideo = video.mobile || video.desktop;
|
|
8354
8606
|
var desktopVideo = video.desktop || video.mobile;
|
|
8355
8607
|
var mobilePoster = poster.mobile || poster.desktop;
|
|
@@ -8370,10 +8622,10 @@ var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
|
8370
8622
|
videoUrl: videoUrl
|
|
8371
8623
|
};
|
|
8372
8624
|
};
|
|
8373
|
-
var VideoWithControls = function VideoWithControls(_ref) {
|
|
8625
|
+
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
8374
8626
|
var video = _ref.video,
|
|
8375
8627
|
poster = _ref.poster;
|
|
8376
|
-
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
8628
|
+
var _useResponsiveVideo = useResponsiveVideo$1(video, poster),
|
|
8377
8629
|
posterUrl = _useResponsiveVideo.posterUrl,
|
|
8378
8630
|
videoUrl = _useResponsiveVideo.videoUrl;
|
|
8379
8631
|
var isIOS = useIOS();
|
|
@@ -8426,7 +8678,7 @@ var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
|
|
|
8426
8678
|
if (!video.desktop && !video.mobile) {
|
|
8427
8679
|
return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
|
|
8428
8680
|
}
|
|
8429
|
-
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8681
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
|
|
8430
8682
|
video: video,
|
|
8431
8683
|
poster: poster
|
|
8432
8684
|
});
|
|
@@ -8489,11 +8741,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8489
8741
|
}), linkText))))));
|
|
8490
8742
|
};
|
|
8491
8743
|
|
|
8492
|
-
var _templateObject$
|
|
8493
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8494
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8495
|
-
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8496
|
-
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8744
|
+
var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject4$u, _templateObject5$o, _templateObject6$h, _templateObject7$d;
|
|
8745
|
+
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
8746
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8747
|
+
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8748
|
+
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8497
8749
|
var hasImages = _ref.hasImages;
|
|
8498
8750
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8499
8751
|
}, devices.mobile, function (_ref2) {
|
|
@@ -8568,10 +8820,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8568
8820
|
}))))));
|
|
8569
8821
|
};
|
|
8570
8822
|
|
|
8571
|
-
var _templateObject$
|
|
8572
|
-
var linkButtonStyles = /*#__PURE__*/css(_templateObject$
|
|
8573
|
-
var PageNav = /*#__PURE__*/styled.a(_templateObject2$
|
|
8574
|
-
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
8823
|
+
var _templateObject$Y, _templateObject2$M, _templateObject3$A, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
|
|
8824
|
+
var linkButtonStyles = /*#__PURE__*/css(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
8825
|
+
var PageNav = /*#__PURE__*/styled.a(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8826
|
+
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8575
8827
|
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
8576
8828
|
var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8577
8829
|
var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
@@ -8727,19 +8979,19 @@ var Pagination = function Pagination(_ref) {
|
|
|
8727
8979
|
}))))));
|
|
8728
8980
|
};
|
|
8729
8981
|
|
|
8730
|
-
var _templateObject$
|
|
8731
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8982
|
+
var _templateObject$Z;
|
|
8983
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: ", ";\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop, function (_ref) {
|
|
8732
8984
|
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8733
8985
|
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8734
8986
|
});
|
|
8735
8987
|
|
|
8736
|
-
var _templateObject$Z, _templateObject2$M;
|
|
8737
|
-
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8738
|
-
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8739
|
-
|
|
8740
8988
|
var _templateObject$_, _templateObject2$N;
|
|
8741
|
-
var
|
|
8742
|
-
var
|
|
8989
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8990
|
+
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8991
|
+
|
|
8992
|
+
var _templateObject$$, _templateObject2$O;
|
|
8993
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
|
|
8994
|
+
var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8743
8995
|
|
|
8744
8996
|
var Person = function Person(_ref) {
|
|
8745
8997
|
var person = _ref.person,
|
|
@@ -8762,7 +9014,7 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8762
9014
|
var _role$people;
|
|
8763
9015
|
var role = _ref.role,
|
|
8764
9016
|
className = _ref.className;
|
|
8765
|
-
return /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
9017
|
+
return /*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
8766
9018
|
className: className
|
|
8767
9019
|
}, /*#__PURE__*/React__default.createElement(RoleContent, {
|
|
8768
9020
|
title: "role",
|
|
@@ -8778,9 +9030,9 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8778
9030
|
})));
|
|
8779
9031
|
};
|
|
8780
9032
|
|
|
8781
|
-
var _templateObject
|
|
8782
|
-
var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject
|
|
8783
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9033
|
+
var _templateObject$10, _templateObject2$P;
|
|
9034
|
+
var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
9035
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n filter: ", ";\n }\n"])), function (_ref) {
|
|
8784
9036
|
var greyscale = _ref.greyscale;
|
|
8785
9037
|
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8786
9038
|
});
|
|
@@ -8829,14 +9081,14 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8829
9081
|
}));
|
|
8830
9082
|
};
|
|
8831
9083
|
|
|
8832
|
-
var _templateObject$
|
|
8833
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8834
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
9084
|
+
var _templateObject$11, _templateObject2$Q, _templateObject3$B, _templateObject4$v;
|
|
9085
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
9086
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
8835
9087
|
var columnCount = _ref.columnCount;
|
|
8836
9088
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8837
9089
|
}, devices.mobile, devices.tablet);
|
|
8838
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8839
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9090
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
9091
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8840
9092
|
|
|
8841
9093
|
// Get the total character length of a property in an array of objects
|
|
8842
9094
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8925,7 +9177,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8925
9177
|
columnSpanSmallDevice: 1,
|
|
8926
9178
|
key: "credit-entry-" + name + "-" + index,
|
|
8927
9179
|
"data-testid": "credit-entry"
|
|
8928
|
-
}, /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
9180
|
+
}, /*#__PURE__*/React__default.createElement(TextWrapper$1, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
8929
9181
|
title: "role",
|
|
8930
9182
|
"data-roh": dataROH
|
|
8931
9183
|
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
@@ -8963,8 +9215,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8963
9215
|
}, creditEntries);
|
|
8964
9216
|
};
|
|
8965
9217
|
|
|
8966
|
-
var _templateObject$
|
|
8967
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$
|
|
9218
|
+
var _templateObject$12;
|
|
9219
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
8968
9220
|
|
|
8969
9221
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
8970
9222
|
var items = _ref.items;
|
|
@@ -8982,14 +9234,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
8982
9234
|
}));
|
|
8983
9235
|
};
|
|
8984
9236
|
|
|
8985
|
-
var _templateObject$
|
|
9237
|
+
var _templateObject$13, _templateObject3$C, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
8986
9238
|
var LENGTH_TEXT = 28;
|
|
8987
9239
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8988
9240
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8989
9241
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8990
9242
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8991
9243
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8992
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9244
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8993
9245
|
var imageToLeft = _ref.imageToLeft;
|
|
8994
9246
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8995
9247
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8999,7 +9251,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templa
|
|
|
8999
9251
|
var asCard = _ref3.asCard;
|
|
9000
9252
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9001
9253
|
});
|
|
9002
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9254
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
9003
9255
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9004
9256
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
9005
9257
|
}, function (_ref5) {
|
|
@@ -9023,7 +9275,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$B || (_templat
|
|
|
9023
9275
|
}
|
|
9024
9276
|
return '';
|
|
9025
9277
|
});
|
|
9026
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9278
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
9027
9279
|
var marginBottom = _ref7.marginBottom;
|
|
9028
9280
|
return marginBottom + "px";
|
|
9029
9281
|
}, function (_ref8) {
|
|
@@ -9063,7 +9315,7 @@ var _excluded$m = ["text"],
|
|
|
9063
9315
|
_excluded3$1 = ["text"];
|
|
9064
9316
|
var _buttonTypeToButton$1;
|
|
9065
9317
|
var LENGTH_TEXT$1 = 28;
|
|
9066
|
-
var LENGTH_TEXT_PARAGRAPH =
|
|
9318
|
+
var LENGTH_TEXT_PARAGRAPH = 185;
|
|
9067
9319
|
var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
|
|
9068
9320
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
9069
9321
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -9254,25 +9506,25 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9254
9506
|
}))));
|
|
9255
9507
|
};
|
|
9256
9508
|
|
|
9257
|
-
var _templateObject$
|
|
9509
|
+
var _templateObject$14, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$g;
|
|
9258
9510
|
var LENGTH_TEXT$2 = 28;
|
|
9259
9511
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9260
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9512
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9261
9513
|
var imageToLeft = _ref.imageToLeft;
|
|
9262
9514
|
return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
|
|
9263
9515
|
}, devices.tablet, function (_ref2) {
|
|
9264
9516
|
var imageToLeft = _ref2.imageToLeft;
|
|
9265
9517
|
return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
|
|
9266
9518
|
}, devices.mobile);
|
|
9267
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9519
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9268
9520
|
var imageToLeft = _ref3.imageToLeft;
|
|
9269
9521
|
return imageToLeft ? 'left' : 'right';
|
|
9270
9522
|
}, devices.mobile);
|
|
9271
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9523
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
9272
9524
|
var imageToLeft = _ref4.imageToLeft;
|
|
9273
9525
|
return imageToLeft ? 'right' : 'left';
|
|
9274
9526
|
}, devices.mobile);
|
|
9275
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$
|
|
9527
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9276
9528
|
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9277
9529
|
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9278
9530
|
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
|
|
@@ -9297,8 +9549,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templat
|
|
|
9297
9549
|
return '';
|
|
9298
9550
|
});
|
|
9299
9551
|
|
|
9300
|
-
var _templateObject$
|
|
9301
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9552
|
+
var _templateObject$15;
|
|
9553
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
9302
9554
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9303
9555
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9304
9556
|
return aspectRatio;
|
|
@@ -9329,7 +9581,7 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
9329
9581
|
return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
|
|
9330
9582
|
};
|
|
9331
9583
|
|
|
9332
|
-
var VideoWithControls$
|
|
9584
|
+
var VideoWithControls$2 = function VideoWithControls(_ref) {
|
|
9333
9585
|
var video = _ref.video,
|
|
9334
9586
|
settings = _ref.settings;
|
|
9335
9587
|
var videoRef = useRef(null);
|
|
@@ -9404,7 +9656,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9404
9656
|
}, isImage && (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
9405
9657
|
aspectRatio: AspectRatio['4:3'],
|
|
9406
9658
|
"data-testid": "AspectRatioWrapper"
|
|
9407
|
-
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
9659
|
+
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
|
|
9408
9660
|
video: children,
|
|
9409
9661
|
settings: videoSettings
|
|
9410
9662
|
}));
|
|
@@ -9467,7 +9719,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9467
9719
|
size: titleSize,
|
|
9468
9720
|
hierarchy: titleHierarchy
|
|
9469
9721
|
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
|
|
9470
|
-
size: "
|
|
9722
|
+
size: "small"
|
|
9471
9723
|
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
|
|
9472
9724
|
size: "large",
|
|
9473
9725
|
dangerouslySetInnerHTML: {
|
|
@@ -9480,8 +9732,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9480
9732
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9481
9733
|
};
|
|
9482
9734
|
|
|
9483
|
-
var _templateObject$
|
|
9484
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9735
|
+
var _templateObject$16;
|
|
9736
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9485
9737
|
|
|
9486
9738
|
/**
|
|
9487
9739
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9536,9 +9788,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9536
9788
|
})));
|
|
9537
9789
|
};
|
|
9538
9790
|
|
|
9539
|
-
var _templateObject$
|
|
9540
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9541
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9791
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E;
|
|
9792
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9793
|
+
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9542
9794
|
var horizontalMode = _ref.horizontalMode;
|
|
9543
9795
|
if (horizontalMode) return 'row';
|
|
9544
9796
|
return 'column';
|
|
@@ -9546,7 +9798,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObjec
|
|
|
9546
9798
|
var gap = _ref2.gap;
|
|
9547
9799
|
return gap + "px";
|
|
9548
9800
|
});
|
|
9549
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9801
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9550
9802
|
var darkMode = _ref3.darkMode;
|
|
9551
9803
|
if (darkMode) return 'var(--base-color-white)';
|
|
9552
9804
|
return 'var(--base-color-errorstate)';
|
|
@@ -9623,10 +9875,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9623
9875
|
}, error))));
|
|
9624
9876
|
};
|
|
9625
9877
|
|
|
9626
|
-
var _templateObject$
|
|
9627
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9628
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9629
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9878
|
+
var _templateObject$18, _templateObject2$T, _templateObject3$F;
|
|
9879
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9880
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9881
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9630
9882
|
|
|
9631
9883
|
/* eslint-disable react/no-danger */
|
|
9632
9884
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9682,8 +9934,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9682
9934
|
return null;
|
|
9683
9935
|
};
|
|
9684
9936
|
|
|
9685
|
-
var _templateObject$
|
|
9686
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9937
|
+
var _templateObject$19;
|
|
9938
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9687
9939
|
|
|
9688
9940
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9689
9941
|
var HarmonicSize = {
|
|
@@ -9725,8 +9977,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9725
9977
|
}, description)))));
|
|
9726
9978
|
};
|
|
9727
9979
|
|
|
9728
|
-
var _templateObject$
|
|
9729
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
9980
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7, _templateObject0$7, _templateObject1$5;
|
|
9981
|
+
var stateStyles = /*#__PURE__*/css(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
9730
9982
|
var theme = _ref.theme;
|
|
9731
9983
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9732
9984
|
}, function (_ref2) {
|
|
@@ -9736,12 +9988,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$19 || (_templateObject$19 = /
|
|
|
9736
9988
|
var theme = _ref3.theme;
|
|
9737
9989
|
return theme.colors.lightgrey;
|
|
9738
9990
|
});
|
|
9739
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
9991
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9740
9992
|
var theme = _ref4.theme;
|
|
9741
9993
|
return theme.colors.darkgrey;
|
|
9742
9994
|
});
|
|
9743
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$
|
|
9744
|
-
var listItemStyles = /*#__PURE__*/css(_templateObject4$
|
|
9995
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9996
|
+
var listItemStyles = /*#__PURE__*/css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9745
9997
|
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
9746
9998
|
var theme = _ref5.theme;
|
|
9747
9999
|
return {
|
|
@@ -10106,9 +10358,9 @@ function Select(_ref3) {
|
|
|
10106
10358
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10107
10359
|
}
|
|
10108
10360
|
|
|
10109
|
-
var _templateObject$
|
|
10110
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
10111
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10361
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$H, _templateObject4$z;
|
|
10362
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10363
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n\n .harmonic-select__control--is-focused {\n border-color: var(--color-base-dark-grey);\n box-shadow: ", ";\n }\n\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--color-primary-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n\n @media ", " {\n font-size: 17px;\n }\n }\n\n .harmonic-select__placeholder {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__single-value {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--color-base-light-grey);\n background: var(--color-base-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--color-base-dark-grey);\n }\n }\n\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--color-base-mid-grey);\n }\n\n .harmonic-select__menu-list {\n padding: 10px 0;\n }\n\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-primary-black);\n\n @media ", " {\n font-size: 17px;\n }\n\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--color-base-light-grey);\n }\n }\n\n .harmonic-select__option--is-selected {\n color: var(--color-primary-black);\n background: none;\n }\n\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n color: var(--color-primary-black);\n }\n\n .harmonic-select__menu-notice {\n color: var(--color-primary-black);\n padding: 20px 20px;\n text-align: left;\n }\n\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
10112
10364
|
var width = _ref.width;
|
|
10113
10365
|
if (!width) return 'none';
|
|
10114
10366
|
return width + "px";
|
|
@@ -10125,12 +10377,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateOb
|
|
|
10125
10377
|
if (darkMode) return "0 0 0 1px var(--color-state-medium)";
|
|
10126
10378
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10127
10379
|
}, devices.mobile, devices.mobile);
|
|
10128
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10380
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n\n @media ", " {\n margin: 0 0 12px;\n }\n"])), function (_ref5) {
|
|
10129
10381
|
var darkMode = _ref5.darkMode;
|
|
10130
10382
|
if (darkMode) return "var(--color-base-white)";
|
|
10131
10383
|
return "var(--color-primary-black)";
|
|
10132
10384
|
}, devices.mobile);
|
|
10133
|
-
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10385
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
10134
10386
|
var darkMode = _ref6.darkMode;
|
|
10135
10387
|
if (darkMode) return "var(--color-base-white)";
|
|
10136
10388
|
return "var(--color-state-error)";
|
|
@@ -10249,10 +10501,10 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10249
10501
|
})));
|
|
10250
10502
|
};
|
|
10251
10503
|
|
|
10252
|
-
var _templateObject$
|
|
10253
|
-
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$
|
|
10254
|
-
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$
|
|
10255
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
10504
|
+
var _templateObject$1c, _templateObject3$I, _templateObject4$A, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
|
|
10505
|
+
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
|
|
10506
|
+
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
|
|
10507
|
+
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
|
|
10256
10508
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10257
10509
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
10258
10510
|
}, function (_ref2) {
|
|
@@ -10355,8 +10607,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10355
10607
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10356
10608
|
};
|
|
10357
10609
|
|
|
10358
|
-
var _templateObject$
|
|
10359
|
-
var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$
|
|
10610
|
+
var _templateObject$1d, _templateObject2$W, _templateObject3$J;
|
|
10611
|
+
var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
10360
10612
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10361
10613
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10362
10614
|
return aspectRatio;
|
|
@@ -10366,8 +10618,8 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1c || (_templateObjec
|
|
|
10366
10618
|
height = _ref2.height;
|
|
10367
10619
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10368
10620
|
});
|
|
10369
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
10370
|
-
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$
|
|
10621
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
10622
|
+
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
10371
10623
|
|
|
10372
10624
|
var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10373
10625
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -10400,11 +10652,11 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10400
10652
|
}, caption))));
|
|
10401
10653
|
};
|
|
10402
10654
|
|
|
10403
|
-
var _templateObject$
|
|
10404
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10405
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10406
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
10407
|
-
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10655
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$u, _templateObject6$n;
|
|
10656
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
10657
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10658
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10659
|
+
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10408
10660
|
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
10409
10661
|
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
10410
10662
|
|
|
@@ -10444,14 +10696,14 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10444
10696
|
}, title)))));
|
|
10445
10697
|
};
|
|
10446
10698
|
|
|
10447
|
-
var _templateObject$
|
|
10448
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10449
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10450
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
10699
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v;
|
|
10700
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
10701
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
10702
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10451
10703
|
var isVisible = _ref.isVisible;
|
|
10452
10704
|
return isVisible ? 'visible' : 'hidden';
|
|
10453
10705
|
});
|
|
10454
|
-
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
10706
|
+
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10455
10707
|
var isVisible = _ref2.isVisible;
|
|
10456
10708
|
return isVisible ? 'visible' : 'hidden';
|
|
10457
10709
|
});
|
|
@@ -10536,11 +10788,11 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10536
10788
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10537
10789
|
};
|
|
10538
10790
|
|
|
10539
|
-
var _templateObject$
|
|
10540
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
10541
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
10542
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
10543
|
-
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$
|
|
10791
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$w;
|
|
10792
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10793
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
|
|
10794
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
10795
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
|
|
10544
10796
|
var isActive = _ref.isActive;
|
|
10545
10797
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10546
10798
|
}, Colors.MidGrey);
|
|
@@ -10700,14 +10952,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10700
10952
|
});
|
|
10701
10953
|
};
|
|
10702
10954
|
|
|
10703
|
-
var _templateObject$
|
|
10704
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10705
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
10706
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
10955
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o;
|
|
10956
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10957
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10958
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10707
10959
|
var color = _ref.color;
|
|
10708
10960
|
return "var(--base-color-" + color + ")";
|
|
10709
10961
|
});
|
|
10710
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
10962
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10711
10963
|
var Text = /*#__PURE__*/styled.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10712
10964
|
var color = _ref2.color;
|
|
10713
10965
|
return "var(--base-color-" + color + ")";
|
|
@@ -10794,11 +11046,11 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10794
11046
|
}, strengthLabel))));
|
|
10795
11047
|
};
|
|
10796
11048
|
|
|
10797
|
-
var _templateObject$
|
|
10798
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
10799
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2
|
|
10800
|
-
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10801
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$
|
|
11049
|
+
var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
|
|
11050
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11051
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11052
|
+
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11053
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10802
11054
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10803
11055
|
}, devices.tablet, devices.mobile);
|
|
10804
11056
|
var TableCell = /*#__PURE__*/styled.td(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
@@ -11009,22 +11261,22 @@ var Table = function Table(_ref) {
|
|
|
11009
11261
|
}))));
|
|
11010
11262
|
};
|
|
11011
11263
|
|
|
11012
|
-
var _templateObject$
|
|
11013
|
-
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$
|
|
11264
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$P, _templateObject4$G, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
11265
|
+
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11014
11266
|
var theme = _ref.theme;
|
|
11015
11267
|
return "var(--color-" + theme + ")";
|
|
11016
11268
|
}, function (_ref2) {
|
|
11017
11269
|
var theme = _ref2.theme;
|
|
11018
11270
|
return "var(--color-" + theme + ")";
|
|
11019
11271
|
});
|
|
11020
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2
|
|
11021
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
11022
|
-
var Error = /*#__PURE__*/styled.div(_templateObject4$
|
|
11272
|
+
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
11273
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
11274
|
+
var Error = /*#__PURE__*/styled.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
11023
11275
|
var Form = /*#__PURE__*/styled.form(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
11024
11276
|
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
11025
11277
|
var ServerError = /*#__PURE__*/styled.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
11026
11278
|
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
11027
|
-
var ButtonWrapper$
|
|
11279
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
11028
11280
|
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
11029
11281
|
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
11030
11282
|
var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
|
|
@@ -11052,7 +11304,9 @@ var themeToColor = function themeToColor(theme) {
|
|
|
11052
11304
|
var SignUpTitle = function SignUpTitle(_ref) {
|
|
11053
11305
|
var title = _ref.title,
|
|
11054
11306
|
_ref$isMobile = _ref.isMobile,
|
|
11055
|
-
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile
|
|
11307
|
+
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
|
|
11308
|
+
_ref$titleFontFamily = _ref.titleFontFamily,
|
|
11309
|
+
titleFontFamily = _ref$titleFontFamily === void 0 ? false : _ref$titleFontFamily;
|
|
11056
11310
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
11057
11311
|
columnStartDesktop: 3,
|
|
11058
11312
|
columnSpanDesktop: 10,
|
|
@@ -11061,7 +11315,7 @@ var SignUpTitle = function SignUpTitle(_ref) {
|
|
|
11061
11315
|
}, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
11062
11316
|
color: "black",
|
|
11063
11317
|
hierarchy: "h3",
|
|
11064
|
-
serif:
|
|
11318
|
+
serif: titleFontFamily === 'Victor',
|
|
11065
11319
|
size: isMobile ? 'small' : 'medium'
|
|
11066
11320
|
}, title)));
|
|
11067
11321
|
};
|
|
@@ -11314,10 +11568,10 @@ var SignUpForm = function SignUpForm(_ref) {
|
|
|
11314
11568
|
tabIndex: 0
|
|
11315
11569
|
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11316
11570
|
size: "small"
|
|
11317
|
-
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
11571
|
+
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
11318
11572
|
onClick: handleFormSubmit,
|
|
11319
11573
|
theme: theme
|
|
11320
|
-
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
11574
|
+
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
11321
11575
|
onClick: handleFormSubmit,
|
|
11322
11576
|
theme: theme
|
|
11323
11577
|
})), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
|
|
@@ -11434,12 +11688,12 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11434
11688
|
}))))));
|
|
11435
11689
|
};
|
|
11436
11690
|
|
|
11437
|
-
var _templateObject$
|
|
11438
|
-
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11691
|
+
var _templateObject$1k, _templateObject2$11, _templateObject4$H, _templateObject5$A;
|
|
11692
|
+
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
11439
11693
|
var withShadow = _ref.withShadow;
|
|
11440
|
-
return withShadow && css(_templateObject2$
|
|
11694
|
+
return withShadow && css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11441
11695
|
}, devices.mobile);
|
|
11442
|
-
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$
|
|
11696
|
+
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
|
|
11443
11697
|
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11444
11698
|
|
|
11445
11699
|
var defaultGrid = {
|
|
@@ -11498,12 +11752,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11498
11752
|
return null;
|
|
11499
11753
|
};
|
|
11500
11754
|
|
|
11501
|
-
var _templateObject$
|
|
11502
|
-
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$
|
|
11755
|
+
var _templateObject$1l, _templateObject2$12;
|
|
11756
|
+
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
|
|
11503
11757
|
var hide = _ref.hide;
|
|
11504
11758
|
return hide && "display: none;";
|
|
11505
11759
|
}, devices.mobileAndTablet);
|
|
11506
|
-
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$
|
|
11760
|
+
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
|
|
11507
11761
|
|
|
11508
11762
|
/**
|
|
11509
11763
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11595,8 +11849,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11595
11849
|
}));
|
|
11596
11850
|
};
|
|
11597
11851
|
|
|
11598
|
-
var _templateObject$
|
|
11599
|
-
var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$
|
|
11852
|
+
var _templateObject$1m;
|
|
11853
|
+
var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
|
|
11600
11854
|
|
|
11601
11855
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11602
11856
|
return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
|
|
@@ -11631,14 +11885,9 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11631
11885
|
_ref2$renderGridItem = _ref2.renderGridItem,
|
|
11632
11886
|
renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
|
|
11633
11887
|
var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
|
|
11634
|
-
var content = /*#__PURE__*/React__default.createElement(
|
|
11635
|
-
tag: "div",
|
|
11636
|
-
size: "large",
|
|
11637
|
-
"data-testid": "text-container",
|
|
11888
|
+
var content = /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
|
|
11638
11889
|
className: textContainerClassName,
|
|
11639
|
-
|
|
11640
|
-
__html: addTypographyClasses(text)
|
|
11641
|
-
}
|
|
11890
|
+
html: text
|
|
11642
11891
|
});
|
|
11643
11892
|
var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
11644
11893
|
columnStartDesktop: columnStartDesktop,
|
|
@@ -11656,20 +11905,20 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11656
11905
|
}, gridItemOrContent);
|
|
11657
11906
|
};
|
|
11658
11907
|
|
|
11659
|
-
var _templateObject$
|
|
11908
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11660
11909
|
var color = 'primary-black';
|
|
11661
11910
|
var Button$2 = /*#__PURE__*/styled(SecondaryButton).attrs({
|
|
11662
11911
|
borderColor: color,
|
|
11663
11912
|
hoveredColor: color,
|
|
11664
11913
|
pressedColor: color,
|
|
11665
11914
|
textColor: color
|
|
11666
|
-
})(_templateObject$
|
|
11667
|
-
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11668
|
-
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$
|
|
11915
|
+
})(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11916
|
+
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11917
|
+
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11669
11918
|
var Heading = /*#__PURE__*/styled(HarmonicHeader).attrs({
|
|
11670
11919
|
serif: true,
|
|
11671
11920
|
size: 'medium'
|
|
11672
|
-
})(_templateObject4$
|
|
11921
|
+
})(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11673
11922
|
var Intro = /*#__PURE__*/styled(HarmonicSubtitle).attrs({
|
|
11674
11923
|
size: 'large'
|
|
11675
11924
|
})(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
@@ -11869,11 +12118,11 @@ var Navigation = function Navigation(_ref) {
|
|
|
11869
12118
|
})))))));
|
|
11870
12119
|
};
|
|
11871
12120
|
|
|
11872
|
-
var _templateObject$
|
|
11873
|
-
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11874
|
-
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
11875
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$
|
|
11876
|
-
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12121
|
+
var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$C, _templateObject6$s, _templateObject7$m;
|
|
12122
|
+
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
12123
|
+
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
12124
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
12125
|
+
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11877
12126
|
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11878
12127
|
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11879
12128
|
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
@@ -11934,17 +12183,17 @@ var Footer = function Footer(_ref) {
|
|
|
11934
12183
|
}, additionalInfo))));
|
|
11935
12184
|
};
|
|
11936
12185
|
|
|
11937
|
-
var _templateObject$
|
|
12186
|
+
var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11938
12187
|
var LIST_ITEM_GAP = 32;
|
|
11939
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12188
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
|
|
11940
12189
|
var bottomBorder = _ref.bottomBorder;
|
|
11941
12190
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11942
12191
|
}, zIndexes.anchor, function (_ref2) {
|
|
11943
12192
|
var withShadow = _ref2.withShadow;
|
|
11944
|
-
return withShadow && css(_templateObject2$
|
|
12193
|
+
return withShadow && css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11945
12194
|
});
|
|
11946
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
11947
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12195
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
12196
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
11948
12197
|
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11949
12198
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11950
12199
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
@@ -12215,17 +12464,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12215
12464
|
})))) : null))));
|
|
12216
12465
|
};
|
|
12217
12466
|
|
|
12218
|
-
var _templateObject$
|
|
12219
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12467
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
|
|
12468
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
12220
12469
|
var sticky = _ref.sticky;
|
|
12221
12470
|
return sticky ? 'sticky' : 'initial';
|
|
12222
12471
|
}, zIndexes.anchor);
|
|
12223
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
12224
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
12472
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
12473
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
12225
12474
|
var title = _ref2.title;
|
|
12226
12475
|
return title ? 'row' : 'row-reverse';
|
|
12227
12476
|
}, devices.tablet, devices.mobile);
|
|
12228
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$
|
|
12477
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
12229
12478
|
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
12230
12479
|
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
12231
12480
|
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
@@ -12275,14 +12524,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12275
12524
|
}, message))));
|
|
12276
12525
|
};
|
|
12277
12526
|
|
|
12278
|
-
var _templateObject$
|
|
12279
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
12280
|
-
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$
|
|
12281
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12282
|
-
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$
|
|
12527
|
+
var _templateObject$1r, _templateObject2$17, _templateObject3$U, _templateObject4$M;
|
|
12528
|
+
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
|
|
12529
|
+
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
|
|
12530
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
|
|
12531
|
+
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
12283
12532
|
|
|
12284
|
-
var _templateObject$
|
|
12285
|
-
var Wrapper$a = /*#__PURE__*/styled.div(_templateObject$
|
|
12533
|
+
var _templateObject$1s;
|
|
12534
|
+
var Wrapper$a = /*#__PURE__*/styled.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
|
|
12286
12535
|
|
|
12287
12536
|
var UpsellCards = function UpsellCards(_ref) {
|
|
12288
12537
|
var upsellCards = _ref.upsellCards;
|
|
@@ -12311,13 +12560,15 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12311
12560
|
upsellCards = _ref.upsellCards,
|
|
12312
12561
|
_ref$theme = _ref.theme,
|
|
12313
12562
|
theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme,
|
|
12314
|
-
className = _ref.className
|
|
12563
|
+
className = _ref.className,
|
|
12564
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
12315
12565
|
var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
|
|
12316
12566
|
return _extends({}, card, {
|
|
12317
12567
|
theme: card.theme || theme,
|
|
12318
12568
|
secondaryTheme: card.secondaryTheme || card.theme || theme
|
|
12319
12569
|
});
|
|
12320
12570
|
}) : [];
|
|
12571
|
+
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12321
12572
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
12322
12573
|
theme: theme
|
|
12323
12574
|
}, /*#__PURE__*/React__default.createElement(Grid, {
|
|
@@ -12330,7 +12581,7 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12330
12581
|
columnStartSmallDevice: 1,
|
|
12331
12582
|
columnSpanSmallDevice: 14
|
|
12332
12583
|
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
|
|
12333
|
-
serif:
|
|
12584
|
+
serif: isVictorTitleFont
|
|
12334
12585
|
}, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
|
|
12335
12586
|
text: richText != null ? richText : '',
|
|
12336
12587
|
columnStartDesktop: 1,
|
|
@@ -12344,9 +12595,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12344
12595
|
})))));
|
|
12345
12596
|
};
|
|
12346
12597
|
|
|
12347
|
-
var _templateObject$
|
|
12348
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12349
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
12598
|
+
var _templateObject$1t, _templateObject2$18;
|
|
12599
|
+
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
12600
|
+
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
12350
12601
|
var bottomBorder = _ref.bottomBorder;
|
|
12351
12602
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
12352
12603
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -12377,11 +12628,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12377
12628
|
}, children)));
|
|
12378
12629
|
};
|
|
12379
12630
|
|
|
12380
|
-
var _templateObject$
|
|
12381
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
12382
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
12383
|
-
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12384
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
12631
|
+
var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N;
|
|
12632
|
+
var InnerModal = /*#__PURE__*/styled.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
12633
|
+
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
12634
|
+
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
12635
|
+
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
12385
12636
|
|
|
12386
12637
|
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
12387
12638
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -12585,21 +12836,21 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12585
12836
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12586
12837
|
};
|
|
12587
12838
|
|
|
12588
|
-
var _templateObject$
|
|
12589
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12839
|
+
var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
|
|
12840
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
|
|
12590
12841
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12591
12842
|
return "& {\n .swipe-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n\n > figure {\n margin: 0px;\n\n > div {\n height: " + imagesHeightDesktop + "px;\n }\n }\n }\n }";
|
|
12592
12843
|
}, devices.mobile, function (_ref2) {
|
|
12593
12844
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12594
12845
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12595
12846
|
});
|
|
12596
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12847
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12597
12848
|
var type = _ref3.type,
|
|
12598
12849
|
isActive = _ref3.isActive;
|
|
12599
12850
|
return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n\n @media " + devices.tablet + " {\n & {\n .swipe-slide {\n " + getCardSlideTabletStyles(type) + "\n }\n }\n }\n\n @media " + devices.mobile + " {\n && {\n .swipe-slide {\n " + getCardSlideMobileStyles(type) + "\n }\n }\n }\n ";
|
|
12600
12851
|
});
|
|
12601
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
12602
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12852
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$W || (_templateObject3$W = /*#__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);
|
|
12853
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$O || (_templateObject4$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12603
12854
|
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12604
12855
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12605
12856
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
@@ -12637,7 +12888,8 @@ var Carousel = function Carousel(_ref) {
|
|
|
12637
12888
|
_ref$infinite = _ref.infinite,
|
|
12638
12889
|
infinite = _ref$infinite === void 0 ? true : _ref$infinite,
|
|
12639
12890
|
_ref$useOffset = _ref.useOffset,
|
|
12640
|
-
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset
|
|
12891
|
+
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset,
|
|
12892
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
12641
12893
|
var _useState = useState(false),
|
|
12642
12894
|
isFullscreen = _useState[0],
|
|
12643
12895
|
setIsFullscreen = _useState[1];
|
|
@@ -12787,6 +13039,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12787
13039
|
var carouselTitleId = "carousel-title-" + title;
|
|
12788
13040
|
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
12789
13041
|
var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
13042
|
+
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12790
13043
|
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
12791
13044
|
className: className,
|
|
12792
13045
|
type: type,
|
|
@@ -12810,7 +13063,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12810
13063
|
isDescriptionPresent: !!description
|
|
12811
13064
|
}, /*#__PURE__*/React__default.createElement(TitleText$1, {
|
|
12812
13065
|
size: "medium",
|
|
12813
|
-
serif:
|
|
13066
|
+
serif: isVictorTitleFont,
|
|
12814
13067
|
hierarchy: titleSemanticLevelValue
|
|
12815
13068
|
}, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
12816
13069
|
size: "large"
|
|
@@ -12850,11 +13103,11 @@ var Carousel = function Carousel(_ref) {
|
|
|
12850
13103
|
}, children))));
|
|
12851
13104
|
};
|
|
12852
13105
|
|
|
12853
|
-
var _templateObject$
|
|
12854
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
12855
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12856
|
-
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
12857
|
-
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
13106
|
+
var _templateObject$1w, _templateObject2$1b, _templateObject3$X, _templateObject4$P, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$d, _templateObject0$b, _templateObject1$7, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
13107
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
13108
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13109
|
+
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
13110
|
+
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$P || (_templateObject4$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12858
13111
|
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$F || (_templateObject5$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12859
13112
|
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12860
13113
|
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$p || (_templateObject7$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
@@ -13000,7 +13253,7 @@ var VideoSlide = function VideoSlide(_ref) {
|
|
|
13000
13253
|
});
|
|
13001
13254
|
return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
|
|
13002
13255
|
isCurrentSlide: isCurrentSlide
|
|
13003
|
-
}, /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
13256
|
+
}, /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
|
|
13004
13257
|
video: video,
|
|
13005
13258
|
settings: settings
|
|
13006
13259
|
}));
|
|
@@ -13031,7 +13284,10 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
|
|
|
13031
13284
|
isCurrentSlide: index === currentSlide
|
|
13032
13285
|
})) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
|
|
13033
13286
|
alt: mediaContent.alt
|
|
13034
|
-
}, mediaContent
|
|
13287
|
+
}, mediaContent, {
|
|
13288
|
+
fetchPriority: index === currentSlide ? 'high' : 'auto',
|
|
13289
|
+
loading: index === currentSlide ? 'eager' : 'lazy'
|
|
13290
|
+
})))));
|
|
13035
13291
|
}));
|
|
13036
13292
|
};
|
|
13037
13293
|
|
|
@@ -13040,7 +13296,8 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13040
13296
|
carouselTitle = _ref.carouselTitle,
|
|
13041
13297
|
slides = _ref.slides,
|
|
13042
13298
|
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
13043
|
-
className = _ref.className
|
|
13299
|
+
className = _ref.className,
|
|
13300
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
13044
13301
|
var slidesMedia = useMemo(function () {
|
|
13045
13302
|
return slides.map(function (_ref2) {
|
|
13046
13303
|
var mediaContent = _ref2.mediaContent;
|
|
@@ -13071,6 +13328,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13071
13328
|
var handleClickInside = function handleClickInside(e) {
|
|
13072
13329
|
e.stopPropagation();
|
|
13073
13330
|
};
|
|
13331
|
+
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
13074
13332
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid$1, {
|
|
13075
13333
|
role: "region",
|
|
13076
13334
|
"aria-labelledby": carouselTitleId,
|
|
@@ -13083,7 +13341,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13083
13341
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
13084
13342
|
className: TYPOGRAPHY_CLASS_NAME,
|
|
13085
13343
|
size: "medium",
|
|
13086
|
-
serif:
|
|
13344
|
+
serif: isVictorTitleFont,
|
|
13087
13345
|
hierarchy: titleSemanticLevelValue
|
|
13088
13346
|
}, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
13089
13347
|
onClickNext: onNext,
|
|
@@ -13175,9 +13433,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
13175
13433
|
})));
|
|
13176
13434
|
};
|
|
13177
13435
|
|
|
13178
|
-
var _templateObject$
|
|
13179
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
13180
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
13436
|
+
var _templateObject$1x, _templateObject3$Y;
|
|
13437
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
13438
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
13181
13439
|
|
|
13182
13440
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
13183
13441
|
var children = _ref.children;
|
|
@@ -13772,8 +14030,8 @@ var Theme = function Theme(_ref) {
|
|
|
13772
14030
|
}, children);
|
|
13773
14031
|
};
|
|
13774
14032
|
|
|
13775
|
-
var _templateObject$
|
|
13776
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
14033
|
+
var _templateObject$1y;
|
|
14034
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13777
14035
|
var theme = _ref.theme;
|
|
13778
14036
|
return theme.colors.primary;
|
|
13779
14037
|
}, function (_ref2) {
|
|
@@ -14720,10 +14978,10 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1x || (_templa
|
|
|
14720
14978
|
return theme.footer.tablet.paddingBottom;
|
|
14721
14979
|
}, devices.desktop, devices.largeDesktop);
|
|
14722
14980
|
|
|
14723
|
-
var _templateObject$
|
|
14724
|
-
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$
|
|
14725
|
-
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$
|
|
14726
|
-
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$
|
|
14981
|
+
var _templateObject$1z, _templateObject2$1c, _templateObject3$Z;
|
|
14982
|
+
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$1z || (_templateObject$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14983
|
+
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$1c || (_templateObject2$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14984
|
+
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
|
|
14727
14985
|
|
|
14728
14986
|
/* eslint-disable react/no-danger */
|
|
14729
14987
|
var Quote = function Quote(_ref) {
|
|
@@ -14753,5 +15011,5 @@ var Quote = function Quote(_ref) {
|
|
|
14753
15011
|
}, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
|
|
14754
15012
|
};
|
|
14755
15013
|
|
|
14756
|
-
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$
|
|
15014
|
+
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$2 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
|
|
14757
15015
|
//# sourceMappingURL=harmonic.esm.js.map
|