@royaloperahouse/chord 0.7.7 → 0.7.8
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 +3 -0
- package/dist/chord.cjs.development.js +41 -38
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +41 -38
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +6 -3
- package/dist/types/navigation.d.ts +10 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4525,29 +4525,34 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
4525
4525
|
})));
|
|
4526
4526
|
};
|
|
4527
4527
|
|
|
4528
|
-
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a,
|
|
4528
|
+
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject6$6, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2;
|
|
4529
4529
|
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
4530
4530
|
var sticky = _ref.sticky;
|
|
4531
4531
|
return sticky ? 'sticky' : 'initial';
|
|
4532
4532
|
}, zIndexes.anchor);
|
|
4533
|
-
var
|
|
4534
|
-
var
|
|
4535
|
-
var
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
var
|
|
4539
|
-
|
|
4540
|
-
|
|
4541
|
-
}, function (_ref3) {
|
|
4533
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
4534
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\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) {
|
|
4535
|
+
var title = _ref2.title;
|
|
4536
|
+
return title ? 'row' : 'row-reverse';
|
|
4537
|
+
}, devices.tablet, devices.mobile);
|
|
4538
|
+
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n height: 50px;\n }\n }\n"])), devices.mobile);
|
|
4539
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4540
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
4541
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
4542
4542
|
var theme = _ref3.theme;
|
|
4543
4543
|
return theme.colors.primaryButtonReverseBg;
|
|
4544
4544
|
}, function (_ref4) {
|
|
4545
4545
|
var theme = _ref4.theme;
|
|
4546
|
-
return theme.colors.
|
|
4546
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4547
4547
|
}, function (_ref5) {
|
|
4548
4548
|
var theme = _ref5.theme;
|
|
4549
4549
|
return theme.colors.primaryButtonReverse;
|
|
4550
|
+
}, function (_ref6) {
|
|
4551
|
+
var theme = _ref6.theme;
|
|
4552
|
+
return theme.colors.primaryButtonReverse;
|
|
4550
4553
|
});
|
|
4554
|
+
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4555
|
+
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
4551
4556
|
|
|
4552
4557
|
var _excluded$b = ["text"],
|
|
4553
4558
|
_excluded2 = ["text"];
|
|
@@ -4556,7 +4561,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
4556
4561
|
var title = _ref.title,
|
|
4557
4562
|
links = _ref.links,
|
|
4558
4563
|
_ref$sticky = _ref.sticky,
|
|
4559
|
-
sticky = _ref$sticky === void 0 ? false : _ref$sticky
|
|
4564
|
+
sticky = _ref$sticky === void 0 ? false : _ref$sticky,
|
|
4565
|
+
message = _ref.message;
|
|
4560
4566
|
|
|
4561
4567
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
4562
4568
|
primaryButtonText = _ref2.text,
|
|
@@ -4568,30 +4574,27 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
4568
4574
|
|
|
4569
4575
|
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
4570
4576
|
sticky: sticky
|
|
4571
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
4572
|
-
|
|
4573
|
-
|
|
4574
|
-
columnStartDevice: 2,
|
|
4575
|
-
columnSpanDevice: 12
|
|
4576
|
-
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4577
|
+
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
4578
|
+
title: title
|
|
4579
|
+
}, title ? /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4577
4580
|
"data-testid": "anchor-title"
|
|
4578
4581
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4579
4582
|
level: 5
|
|
4580
|
-
}, title))
|
|
4581
|
-
columnStartDesktop: 12,
|
|
4582
|
-
columnSpanDesktop: 5,
|
|
4583
|
-
columnStartDevice: 2,
|
|
4584
|
-
columnSpanDevice: 12,
|
|
4583
|
+
}, title)) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
|
|
4585
4584
|
"data-testid": "anchor-ctas"
|
|
4586
|
-
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) :
|
|
4585
|
+
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : message && /*#__PURE__*/React__default.createElement(MessageWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4586
|
+
level: 6
|
|
4587
|
+
}, message)))), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : message && /*#__PURE__*/React__default.createElement(MessageWrapperMobile, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4588
|
+
level: 6
|
|
4589
|
+
}, message)));
|
|
4587
4590
|
};
|
|
4588
4591
|
|
|
4589
|
-
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$
|
|
4592
|
+
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$6;
|
|
4590
4593
|
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4591
4594
|
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
4592
4595
|
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
|
|
4593
4596
|
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && a {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 28px 20px;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
|
|
4594
|
-
var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4597
|
+
var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\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 text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\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"])));
|
|
4595
4598
|
|
|
4596
4599
|
var Accordion = function Accordion(_ref) {
|
|
4597
4600
|
var _ref$title = _ref.title,
|
|
@@ -4660,7 +4663,7 @@ var Accordions = function Accordions(_ref) {
|
|
|
4660
4663
|
}));
|
|
4661
4664
|
};
|
|
4662
4665
|
|
|
4663
|
-
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$
|
|
4666
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$7, _templateObject6$7, _templateObject7$4, _templateObject8$4, _templateObject9$3;
|
|
4664
4667
|
var LENGTH_LARGE_TEXT = 28;
|
|
4665
4668
|
var LENGTH_SMALL_TEXT = 19;
|
|
4666
4669
|
var LENGTH_TEXT_TABLET = 10;
|
|
@@ -4674,11 +4677,11 @@ var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$c ||
|
|
|
4674
4677
|
var fullWidth = _ref2.fullWidth;
|
|
4675
4678
|
return fullWidth ? '0' : '20px';
|
|
4676
4679
|
});
|
|
4677
|
-
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4680
|
+
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4678
4681
|
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
4679
4682
|
var TextContainer = /*#__PURE__*/styled__default.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
4680
|
-
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$
|
|
4681
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
4683
|
+
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4684
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n opacity: 0;\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref3) {
|
|
4682
4685
|
var size = _ref3.size,
|
|
4683
4686
|
primaryButtonTextLength = _ref3.primaryButtonTextLength,
|
|
4684
4687
|
tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
|
|
@@ -4872,7 +4875,7 @@ var Cards = function Cards(_ref) {
|
|
|
4872
4875
|
}));
|
|
4873
4876
|
};
|
|
4874
4877
|
|
|
4875
|
-
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$
|
|
4878
|
+
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$8;
|
|
4876
4879
|
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
4877
4880
|
var imageToLeft = _ref.imageToLeft;
|
|
4878
4881
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
@@ -4886,7 +4889,7 @@ var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$i |
|
|
|
4886
4889
|
return imageToLeft ? 'right' : 'left';
|
|
4887
4890
|
}, devices.mobile);
|
|
4888
4891
|
var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4889
|
-
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4892
|
+
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
4890
4893
|
|
|
4891
4894
|
var Editorial = function Editorial(_ref) {
|
|
4892
4895
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -4917,7 +4920,7 @@ var Editorial = function Editorial(_ref) {
|
|
|
4917
4920
|
})))));
|
|
4918
4921
|
};
|
|
4919
4922
|
|
|
4920
|
-
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$
|
|
4923
|
+
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$9, _templateObject6$8, _templateObject7$5;
|
|
4921
4924
|
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
4922
4925
|
var theme = _ref.theme;
|
|
4923
4926
|
return theme.colors.primary;
|
|
@@ -4925,7 +4928,7 @@ var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (
|
|
|
4925
4928
|
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
4926
4929
|
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4927
4930
|
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), devices.mobile);
|
|
4928
|
-
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4931
|
+
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
4929
4932
|
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4930
4933
|
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
4931
4934
|
|
|
@@ -4998,7 +5001,7 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
4998
5001
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
4999
5002
|
};
|
|
5000
5003
|
|
|
5001
|
-
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$
|
|
5004
|
+
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$a, _templateObject6$9, _templateObject7$6;
|
|
5002
5005
|
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n background-image: url('", "');\n background-repeat: no-repeat;\n background-size: cover;\n position: relative;\n display: flex;\n align-items: center;\n\n ::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--base-color-black);\n filter: opacity(40%);\n z-index: ", ";\n }\n\n @media ", " {\n & {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n background-image: url('", "');\n background-position: center;\n display: flex;\n align-items: start;\n }\n }\n"])), function (_ref) {
|
|
5003
5006
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
5004
5007
|
return bgUrlDesktop;
|
|
@@ -5010,7 +5013,7 @@ var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_temp
|
|
|
5010
5013
|
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . . logo logo logo logo . . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . . logo logo logo logo logo logo . . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. . . . . logo logo logo logo . . . . .'\n '. text text text text text text text text text text text text .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5011
5014
|
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__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.contentOverlay, devices.mobileAndTablet);
|
|
5012
5015
|
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5013
|
-
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5016
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-5);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5014
5017
|
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
5015
5018
|
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\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 border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5016
5019
|
|
|
@@ -5119,7 +5122,7 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5119
5122
|
}));
|
|
5120
5123
|
};
|
|
5121
5124
|
|
|
5122
|
-
var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$g, _templateObject5$
|
|
5125
|
+
var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$g, _templateObject5$b, _templateObject6$a, _templateObject7$7;
|
|
5123
5126
|
var LENGTH_TEXT = 28;
|
|
5124
5127
|
var LENGTH_TEXT_TABLET$1 = 10;
|
|
5125
5128
|
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$K || (_templateObject$K = /*#__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) {
|
|
@@ -5138,7 +5141,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
|
|
|
5138
5141
|
return imageToLeft ? 'right' : 'left';
|
|
5139
5142
|
}, devices.mobile);
|
|
5140
5143
|
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 32px 0;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n & {\n margin: 0 0 24px 0;\n }\n }\n"])), devices.mobile);
|
|
5141
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$
|
|
5144
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
5142
5145
|
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
5143
5146
|
var theme = _ref5.theme;
|
|
5144
5147
|
return theme.colors.black;
|