@sunrise-upc/sales-static-components 0.0.5 → 0.0.7
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/dist/cjs/components/StageTeaserComponent/DoubleGrid/DoubleGridComponent.d.ts +10 -0
- package/dist/cjs/components/StageTeaserComponent/SingleGrid/SingleGridComponent.d.ts +5 -0
- package/dist/cjs/components/StageTeaserComponent/SingleGrid/SingleGridComponent.types.d.ts +3 -0
- package/dist/cjs/components/StageTeaserComponent/StageTeaserComponent.d.ts +3 -0
- package/dist/cjs/components/StageTeaserComponent/index.d.ts +1 -0
- package/dist/cjs/components/index.d.ts +2 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/utils/StyleUtils.d.ts +2 -0
- package/dist/esm/components/StageTeaserComponent/DoubleGrid/DoubleGridComponent.d.ts +10 -0
- package/dist/esm/components/StageTeaserComponent/SingleGrid/SingleGridComponent.d.ts +5 -0
- package/dist/esm/components/StageTeaserComponent/SingleGrid/SingleGridComponent.types.d.ts +3 -0
- package/dist/esm/components/StageTeaserComponent/StageTeaserComponent.d.ts +3 -0
- package/dist/esm/components/StageTeaserComponent/index.d.ts +1 -0
- package/dist/esm/components/index.d.ts +2 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/utils/StyleUtils.d.ts +2 -0
- package/dist/index.d.ts +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import "./DoubleGridComponent.css";
|
|
3
|
+
import "./PromoBubble.css";
|
|
4
|
+
import "./PromoBubbleBottomRight.css";
|
|
5
|
+
import "./PromoBubbleBottomLeft.css";
|
|
6
|
+
import "./PromoBubbleTopLeft.css";
|
|
7
|
+
import "./PromoBubbleTopRight.css";
|
|
8
|
+
import "../../../styles/FalconColors.css";
|
|
9
|
+
declare const DoubleGridComponent: FC<any>;
|
|
10
|
+
export default DoubleGridComponent;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./StageTeaserComponent";
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default as RibbonComponent } from
|
|
1
|
+
export { default as RibbonComponent } from "./RibbonComponent";
|
|
2
|
+
export { default as StageTeaserComponent } from "./StageTeaserComponent";
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var n=require("react"),e=require("storyblok-rich-text-react-renderer-ts");function r(n,e){void 0===e&&(e={});var r=e.insertAt;if(n&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===r&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=n:t.appendChild(document.createTextNode(n))}}r(".ribbonComponent_Wrapper{\r\n width: 100%;\r\n}\r\n.ribbonComponent_Card {\r\n display: flex;\r\n align-items: center;\r\n padding:16px 0;\r\n}\r\n.ribbonComponent_DarkText{\r\n color: #ffffff !important;\r\n}\r\n.ribbonComponent_DarkDescription a {\r\ncolor: #ffffff;\r\n}\r\n.ribbonComponent_Image {\r\n margin-top: 5px;\r\n margin-right: 8px;\r\n}\r\n.ribbonComponent_Icon {\r\n height: 24px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_TextContainer {\r\n margin: 8px 0;\r\n font-size: 16px;\r\n line-height: 24px;\r\n}\r\n.ribbonComponent_Title {\r\n font-weight: 700;\r\n}\r\n.ribbonComponent_Description {\r\n font-weight: 400;\r\n}\r\n.ribbonComponent_CloseIcon {\r\n margin-right: 16px;\r\n}\r\n.ribbonComponent_HrBreaker {\r\n width: 1px;\r\n height: 32px;\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border-radius: 1px;\r\n opacity: 0.2;\r\n flex-shrink: 0;\r\n background: #3D3935;\r\n}\r\n.ribbonComponent_OnlyTimer{\r\n width:30px;\r\n}\r\n.ribbonComponent_Button{\r\n text-wrap:nowrap;\r\n}\r\n.falcon-button-defaults {\r\n border-radius: 28px;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-size: 16px;\r\n line-height: 24px;\r\n font-weight: 700;\r\n padding: 10px 24px;\r\n text-decoration: none;\r\n}\r\n.ribbonComponent_phoneIcon {\r\n background-size: contain;\r\n display: inline-flex;\r\n height: 24px;\r\n margin: 0 8px 0 10px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n}\r\n.ribbonComponent_descriptionBlockSection {\r\n display: flex;\r\n}\r\n/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .falcon-primary-button-v1-JC:visited {\r\n background-color: #e97f77;\r\n }\r\n .ribbonComponent_Card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 16px;\r\n margin-top: 16px;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n padding-bottom: 16px;\r\n padding-top: 8px;\r\n margin-left: 32px;\r\n }\r\n .ribbonComponent_descriptionBlockSection {\r\n padding-top:16px;\r\n padding-right: 78px;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_Timer{\r\n margin-left: 8px;\r\n padding-bottom: 8px;\r\n }\r\n .ribbonComponent_Button{\r\n margin-left: 8px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .ribbonComponent_HrBreaker {\r\n display: none;\r\n }\r\n .ribbonComponent_Button {\r\n padding-bottom: 16px;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n flex-direction: column;\r\n padding-right: 90px;\r\n padding-left:70px;\r\n margin: 6px 0 0 0;\r\n align-items: flex-end;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 8px 0;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 40px;\r\n padding-left: 16px;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin-left:40px;\r\n }\r\n}\r\n\r\n/* Desktop only viewport */\r\n@media (min-width: 1024px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n margin-left:0;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 0 16px;\r\n text-wrap:nowrap;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 42px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 60px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 42px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n display: none;\r\n }\r\n}\r\n@media (min-width: 1440px){\r\n .ribbonComponent_Card{\r\n max-width: 1440px;\r\n margin: auto;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 72px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 72px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 80px;\r\n }\r\n .ribbonComponent_OnlyTimer{\r\n width:60px;\r\n } \r\n}\r\n\r\n.falcon-primary-button-v1 > .falcon-button-defaults {\r\n background-color: #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1:hover {\r\n background-color: #961c13;\r\n}\r\n.falcon-primary-button-v1:visited {\r\n background-color: #c7355f;\r\n}\r\n.falcon-primary-button-v1:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-primary-button-v1-JC > .falcon-button-defaults {\r\n background-color: #ffffff;\r\n color: #da291c;\r\n}\r\n.falcon-primary-button-v1-JC:hover {\r\n background-color: #e97f77;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:visited {\r\n background-color: #961c13;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n.falcon-secondary-button-v1 > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v1:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v1:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v1-JC:hover {\r\n border-color: #f1571d;\r\n}\r\n.falcon-secondary-button-v1-JC:visited {\r\n border-color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n.falcon-secondary-button-v4 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding-left: 0;\r\n padding-right: 0;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v4:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v4-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v4-JC:hover {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4-JC:visited {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v5 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #3d3935;\r\n font-weight: 400;\r\n}\r\n.falcon-secondary-button-v5 > div {\r\n text-decoration-line: underline;\r\n}\r\n\r\n.falcon-secondary-button-dark > .falcon-button-defaults {\r\n background-color: transparent;\r\n color: #3d3935;\r\n border: 2px solid #3d3935;\r\n}\r\n.falcon-primary-dark-button {\r\n background: #5f5955;\r\n padding: 10px 24px;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n border-radius: 28px 0px 0px 28px;\r\n}\r\n.falcon-primary-dark-button:hover {\r\n background: #86807c;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n}\r\n.falcon-primary-dark-button:visited {\r\n background: #86807c;\r\n box-sizing: border-box;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n padding: 8px 22px;\r\n border: 2px solid #5f5955;\r\n}\r\n");const o=r=>n.createElement("div",null,e.render(r.content,{markResolvers:{link:(e,o)=>{const{href:t,target:l,linktype:i}=o;return"email"===i?n.createElement("a",{href:`mailto:${t}`,target:null===l||"_self"===l?"_top":"_blank"},e):r.isIFrame?n.createElement("a",{href:t,target:null===l||"_self"===l?"_top":"_blank"},e):n.createElement("a",{href:t,target:null===l?"":l,onClick:()=>{return n=e,void("function"==typeof(null==r?void 0:r.callBack)&&(null==r||r.callBack(n)));var n}},e)}}}));r("/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .timer-wrap {\r\n text-align: center !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n }\r\n .timer-container {\r\n min-width: 260px;\r\n }\r\n .timer-message {\r\n margin-bottom: 10px;\r\n }\r\n .timer-section {\r\n justify-content: center;\r\n margin-top: 4px;\r\n margin-left: unset !important;\r\n margin-right: unset !important;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .timer-message {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .timer-section {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n.timer-container {\r\n color: black;\r\n display: inline-block;\r\n max-width: 100%;\r\n min-width: 242px;\r\n /* padding-top: 10px; */\r\n}\r\n.colon {\r\n font-weight: 700;\r\n font-size: 28px;\r\n line-height: 36px;\r\n}\r\n\r\n.timer-section {\r\n display: flex;\r\n /* margin-top: 12px; */\r\n padding: 8px 0;\r\n}\r\n.timer-element {\r\n display: inline-block;\r\n min-width: 42px;\r\n padding: 0 6px;\r\n text-align: center;\r\n}\r\n.timer-value {\r\n font-weight: 700;\r\n font-size: 32px;\r\n line-height: 36px;\r\n}\r\n.timer-label {\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 16px;\r\n}\r\n.transparent-element:first-child {\r\n padding-left: 0;\r\n}\r\n");const t=n=>{switch(n){case"Primary-V1":return"falcon-primary-button-v1";case"Secondary-V1":return"falcon-secondary-button-v1";case"Secondary-V4":return"falcon-secondary-button-v4";case"Secondary-Dark":return"falcon-secondary-button-dark";case"Primary-Dark-V1":return"falcon-primary-dark-button";case"Secondary-V5":return"falcon-secondary-button-v5";default:return""}},l=n=>{let e=new Date(n);return e=((n,e,r,o,t,l,i)=>{const a=new Date(Date.UTC(e,r,o,t,l,i)),d=new Date(a.toLocaleString("en-US",{timeZone:"Europe/Vienna"})),c=new Date(a.toLocaleString("en-US",{timeZone:n})),m=d.getTime()-c.getTime();return a.setTime(a.getTime()+m),a})("Europe/Vienna",e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds()),e},i="center",a="left",d="transparent",c="00",m=({content:e})=>{var r;return n.createElement("div",{className:"container",style:{justifyContent:e.timerAlignment===i?"center":e.timerAlignment===a?"left":"right"}},n.createElement("div",{className:"timer-section",style:{color:e.timerColor,backgroundColor:e.backgroundColor,marginLeft:e.backgroundColor===d&&e.timerAlignment===a?"-9px":"unset",marginRight:e.backgroundColor===d&&"right"===e.timerAlignment?"-24px":"unset"}},n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c," "),n.createElement("div",{className:"timer-label"},e.dayLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c," "),n.createElement("div",{className:"timer-label"},e.hourLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c," "),n.createElement("div",{className:"timer-label"},e.minuteLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c),n.createElement("div",{className:"timer-label"},e.secondLabel))),n.createElement("div",{className:"timer-message",style:{color:null===(r=e.expiryLabelColor)||void 0===r?void 0:r.color}},e.expiryLabel))},s=({content:e})=>{var r,o,t,d,c,s,u,b;const p=l(new Date(null===(r=null==e?void 0:e.endTime)||void 0===r?void 0:r.replace(/-/g,"/"))),v=l(new Date(null===(o=null==e?void 0:e.startTime)||void 0===o?void 0:o.replace(/-/g,"/"))),f=(null==e?void 0:e.colorChangeTime)&&l(new Date(null===(t=null==e?void 0:e.colorChangeTime)||void 0===t?void 0:t.replace(/-/g,"/"))),[g,x]=n.useState(!1),[C,h]=n.useState(null!==(d=null==e?void 0:e.timerColor)&&void 0!==d?d:""),[y,k]=n.useState(!1),E=()=>{const n=new Date;f&&!y&&n.getTime()>f.getTime()&&(h("#da291c"),k(!0)),n.getTime()>=v.getTime()&&!g&&x(!0);const e=p.getTime()-n.getTime();if(e>0&&g){return{days:("0"+Math.floor(e/864e5)).slice(-2),hours:("0"+Math.floor(e/36e5%24)).slice(-2),mins:("0"+Math.floor(e/1e3/60%60)).slice(-2),sec:("0"+Math.floor(e/1e3%60)).slice(-2)}}return null},_={timerColor:C,backgroundColor:null==e?void 0:e.backgroundColor,expiryLabel:e.expiryLabel,timerAlignment:e.timerAlignment,dayLabel:e.dayLabel,hourLabel:e.hourLabel,minuteLabel:e.minuteLabel,secondLabel:e.secondLabel,expiryLabelColor:e.expiryLabelColor},[w,N]=n.useState(E());n.useEffect((()=>{N(E());const n=setInterval((()=>{N(E())}),1e3);return()=>{clearInterval(n)}}),[]);const T=[{label:null!==(c=null==e?void 0:e.hourLabel)&&void 0!==c?c:"",value:null==w?void 0:w.hours},{label:null!==(s=null==e?void 0:e.minuteLabel)&&void 0!==s?s:"",value:null==w?void 0:w.mins},{label:null!==(u=null==e?void 0:e.secondLabel)&&void 0!==u?u:"",value:null==w?void 0:w.sec}];return n.createElement("div",{className:"timer-wrap",style:{textAlign:e.timerAlignment===i?"center":e.timerAlignment===a?"left":"right"}},g&&n.createElement("div",{className:"timer-container"},w?n.createElement("div",{className:"timer-section",style:{color:(null==e?void 0:e.isDarkMode)?"#ffffff":C,backgroundColor:null!==(b=null==e?void 0:e.backgroundColor)&&void 0!==b?b:"transparent"}},n.createElement("div",{className:" timer-element transparent-element"},n.createElement("div",{className:"timer-value"}," ",null==w?void 0:w.days),n.createElement("div",{className:"timer-label"},e.dayLabel)),T.map(((e,r)=>n.createElement(n.Fragment,{key:r},n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",e.value),n.createElement("div",{className:"timer-label"},e.label)))))):n.createElement(m,{content:_})))};exports.RibbonComponent=({content:e})=>{var r,i,a,d,c,m,u,b,p,v,f,g,x,C,h,y,k,E,_,w,N,T,I,D,S,B;const[L,M]=n.useState(!1),J=new Date,[A,z]=n.useState(null==e?void 0:e.teaserTimer[0]),V=l(new Date(null===(i=null===(r=null==e?void 0:e.teaserTimer[0])||void 0===r?void 0:r.endTime)||void 0===i?void 0:i.replace(/-/g,"/"))),F=l(new Date(null===(d=null===(a=null==e?void 0:e.teaserTimer[0])||void 0===a?void 0:a.startTime)||void 0===d?void 0:d.replace(/-/g,"/"))),j=((null==e?void 0:e.enableDarkMode)?"ribbonComponent_DarkText ":"")+"ribbonComponent_Card",H=((null==e?void 0:e.enableDarkMode)?"ribbonComponent_DarkDescription ":"")+"ribbonComponent_TextContainer",[O,R]=n.useState(!1),U=()=>{const n=V.getTime()-J.getTime();if(n>0&&O){return{days:("0"+Math.floor(n/864e5)).slice(-2),hours:("0"+Math.floor(n/36e5%24)).slice(-2),mins:("0"+Math.floor(n/1e3/60%60)).slice(-2),sec:("0"+Math.floor(n/1e3%60)).slice(-2)}}return null},[q,P]=n.useState(U()),W=()=>{!1===L&&M(!0)};return n.useEffect((()=>{var n;if(null===(n=null==e?void 0:e.teaserTimer[0])||void 0===n?void 0:n.startTime){const n=null==e?void 0:e.teaserTimer[0];n.isDarkMode=null==e?void 0:e.enableDarkMode,z(n)}}),[]),n.useEffect((()=>{P(U()),J.getTime()>=F.getTime()&&!O&&R(!0);const n=setInterval((()=>{P(U())}),1e3);return()=>{clearInterval(n)}}),[O]),n.createElement(n.Fragment,null,!1===L&&(void 0===(null===(c=null==e?void 0:e.teaserTimer[0])||void 0===c?void 0:c.startTime)&&null===q||void 0!==(null===(m=null==e?void 0:e.teaserTimer[0])||void 0===m?void 0:m.startTime)&&null!==q)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Wrapper",style:{background:null==e?void 0:e.backgroundColor}},n.createElement("div",{className:j},n.createElement("div",{className:"ribbonComponent_descriptionBlockSection"},(null===(u=null==e?void 0:e.icon)||void 0===u?void 0:u.filename)&&n.createElement("div",{className:"ribbonComponent_Image"},n.createElement("img",{className:"ribbonComponent_Icon",src:(null==e?void 0:e.enableDarkMode)?null===(b=null==e?void 0:e.darkModeIcon)||void 0===b?void 0:b.filename:null===(p=null==e?void 0:e.icon)||void 0===p?void 0:p.filename})),(null==e?void 0:e.description)&&n.createElement("div",{className:H},n.createElement(o,{content:null==e?void 0:e.description}),n.createElement("div",null))),n.createElement("div",{className:"ribbonComponent_ButtonSection"},(null===(v=null==e?void 0:e.teaserTimer[0])||void 0===v?void 0:v.startTime)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Timer"},n.createElement(s,{content:A})),(null==e?void 0:e.buttonText)||(null==e?void 0:e.hotlineNumber)?n.createElement("div",{className:"ribbonComponent_HrBreaker"}):n.createElement("div",{className:"ribbonComponent_OnlyTimer"})),((null==e?void 0:e.buttonText)&&(null===(f=null==e?void 0:e.link)||void 0===f?void 0:f.url)||(null==e?void 0:e.hotlineNumber)&&(null===(g=null==e?void 0:e.buttonIcon)||void 0===g?void 0:g.filename))&&n.createElement("div",{className:"ribbonComponent_Button"},n.createElement("a",{href:(null==e?void 0:e.hotlineNumber)?`tel:${(null==e?void 0:e.hotlineNumber)||0}`:null===(x=null==e?void 0:e.link)||void 0===x?void 0:x.url,target:null!==(C=null==e?void 0:e.target)&&void 0!==C?C:"",rel:"_blank"===(null==e?void 0:e.target)?"opener":"noopener"},n.createElement("div",{className:t(null==e?void 0:e.buttonType)},(null==e?void 0:e.hotlineNumber)&&"left"===(null==e?void 0:e.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(h=null==e?void 0:e.buttonIcon)||void 0===h?void 0:h.filename}),(null==e?void 0:e.hotlineNumber)?null==e?void 0:e.hotlineNumber:null==e?void 0:e.buttonText,(null==e?void 0:e.hotlineNumber)&&"right"===(null==e?void 0:e.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(y=null==e?void 0:e.buttonIcon)||void 0===y?void 0:y.filename})))),(null===(k=null==e?void 0:e.closeIcon)||void 0===k?void 0:k.filename)&&(null==e?void 0:e.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon",onClick:()=>W()},n.createElement("img",{src:(null==e?void 0:e.enableDarkMode)?null!==(_=null===(E=null==e?void 0:e.darkModeCloseIcon)||void 0===E?void 0:E.filename)&&void 0!==_?_:null===(w=null==e?void 0:e.closeIcon)||void 0===w?void 0:w.filename:null===(N=null==e?void 0:e.closeIcon)||void 0===N?void 0:N.filename}))),(null===(T=null==e?void 0:e.closeIcon)||void 0===T?void 0:T.filename)&&(null==e?void 0:e.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon1",onClick:()=>W()},n.createElement("img",{src:(null==e?void 0:e.enableDarkMode)?null!==(D=null===(I=null==e?void 0:e.darkModeCloseIcon)||void 0===I?void 0:I.filename)&&void 0!==D?D:null===(S=null==e?void 0:e.closeIcon)||void 0===S?void 0:S.filename:null===(B=null==e?void 0:e.closeIcon)||void 0===B?void 0:B.filename}))))))};
|
|
1
|
+
"use strict";var n=require("react"),r=require("storyblok-rich-text-react-renderer-ts");function e(n,r){void 0===r&&(r={});var e=r.insertAt;if(n&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n))}}e(".ribbonComponent_Wrapper{\r\n width: 100%;\r\n}\r\n.ribbonComponent_Card {\r\n display: flex;\r\n align-items: center;\r\n padding:16px 0;\r\n}\r\n.ribbonComponent_DarkText{\r\n color: #ffffff !important;\r\n}\r\n.ribbonComponent_DarkDescription a {\r\ncolor: #ffffff;\r\n}\r\n.ribbonComponent_Image {\r\n margin-top: 5px;\r\n margin-right: 8px;\r\n}\r\n.ribbonComponent_Icon {\r\n height: 24px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_TextContainer {\r\n margin: 8px 0;\r\n font-size: 16px;\r\n line-height: 24px;\r\n}\r\n.ribbonComponent_Title {\r\n font-weight: 700;\r\n}\r\n.ribbonComponent_Description {\r\n font-weight: 400;\r\n}\r\n.ribbonComponent_CloseIcon {\r\n margin-right: 16px;\r\n}\r\n.ribbonComponent_HrBreaker {\r\n width: 1px;\r\n height: 32px;\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border-radius: 1px;\r\n opacity: 0.2;\r\n flex-shrink: 0;\r\n background: #3D3935;\r\n}\r\n.ribbonComponent_OnlyTimer{\r\n width:30px;\r\n}\r\n.ribbonComponent_Button{\r\n text-wrap:nowrap;\r\n}\r\n.falcon-button-defaults {\r\n border-radius: 28px;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-size: 16px;\r\n line-height: 24px;\r\n font-weight: 700;\r\n padding: 10px 24px;\r\n text-decoration: none;\r\n}\r\n.ribbonComponent_phoneIcon {\r\n background-size: contain;\r\n display: inline-flex;\r\n height: 24px;\r\n margin: 0 8px 0 10px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n}\r\n.ribbonComponent_descriptionBlockSection {\r\n display: flex;\r\n}\r\n/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .falcon-primary-button-v1-JC:visited {\r\n background-color: #e97f77;\r\n }\r\n .ribbonComponent_Card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 16px;\r\n margin-top: 16px;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n padding-bottom: 16px;\r\n padding-top: 8px;\r\n margin-left: 32px;\r\n }\r\n .ribbonComponent_descriptionBlockSection {\r\n padding-top:16px;\r\n padding-right: 78px;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_Timer{\r\n margin-left: 8px;\r\n padding-bottom: 8px;\r\n }\r\n .ribbonComponent_Button{\r\n margin-left: 8px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .ribbonComponent_HrBreaker {\r\n display: none;\r\n }\r\n .ribbonComponent_Button {\r\n padding-bottom: 16px;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n flex-direction: column;\r\n padding-right: 90px;\r\n padding-left:70px;\r\n margin: 6px 0 0 0;\r\n align-items: flex-end;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 8px 0;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 40px;\r\n padding-left: 16px;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin-left:40px;\r\n }\r\n}\r\n\r\n/* Desktop only viewport */\r\n@media (min-width: 1024px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n margin-left:0;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 0 16px;\r\n text-wrap:nowrap;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 42px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 60px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 42px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n display: none;\r\n }\r\n}\r\n@media (min-width: 1440px){\r\n .ribbonComponent_Card{\r\n max-width: 1440px;\r\n margin: auto;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 72px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 72px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 80px;\r\n }\r\n .ribbonComponent_OnlyTimer{\r\n width:60px;\r\n } \r\n}\r\n\r\n.falcon-primary-button-v1 > .falcon-button-defaults {\r\n background-color: #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1:hover {\r\n background-color: #961c13;\r\n}\r\n.falcon-primary-button-v1:visited {\r\n background-color: #c7355f;\r\n}\r\n.falcon-primary-button-v1:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-primary-button-v1-JC > .falcon-button-defaults {\r\n background-color: #ffffff;\r\n color: #da291c;\r\n}\r\n.falcon-primary-button-v1-JC:hover {\r\n background-color: #e97f77;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:visited {\r\n background-color: #961c13;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n.falcon-secondary-button-v1 > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v1:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v1:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v1-JC:hover {\r\n border-color: #f1571d;\r\n}\r\n.falcon-secondary-button-v1-JC:visited {\r\n border-color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n.falcon-secondary-button-v4 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding-left: 0;\r\n padding-right: 0;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v4:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v4-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v4-JC:hover {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4-JC:visited {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v5 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #3d3935;\r\n font-weight: 400;\r\n}\r\n.falcon-secondary-button-v5 > div {\r\n text-decoration-line: underline;\r\n}\r\n\r\n.falcon-secondary-button-dark > .falcon-button-defaults {\r\n background-color: transparent;\r\n color: #3d3935;\r\n border: 2px solid #3d3935;\r\n}\r\n.falcon-primary-dark-button {\r\n background: #5f5955;\r\n padding: 10px 24px;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n border-radius: 28px 0px 0px 28px;\r\n}\r\n.falcon-primary-dark-button:hover {\r\n background: #86807c;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n}\r\n.falcon-primary-dark-button:visited {\r\n background: #86807c;\r\n box-sizing: border-box;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n padding: 8px 22px;\r\n border: 2px solid #5f5955;\r\n}\r\n");const t=e=>n.createElement("div",null,r.render(e.content,{markResolvers:{link:(r,t)=>{const{href:o,target:a,linktype:i}=t;return"email"===i?n.createElement("a",{href:`mailto:${o}`,target:null===a||"_self"===a?"_top":"_blank"},r):e.isIFrame?n.createElement("a",{href:o,target:null===a||"_self"===a?"_top":"_blank"},r):n.createElement("a",{href:o,target:null===a?"":a,onClick:()=>{return n=r,void("function"==typeof(null==e?void 0:e.callBack)&&(null==e||e.callBack(n)));var n}},r)}}}));e("/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .timer-wrap {\r\n text-align: center !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n }\r\n .timer-container {\r\n min-width: 260px;\r\n }\r\n .timer-message {\r\n margin-bottom: 10px;\r\n }\r\n .timer-section {\r\n justify-content: center;\r\n margin-top: 4px;\r\n margin-left: unset !important;\r\n margin-right: unset !important;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .timer-message {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .timer-section {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n.timer-container {\r\n color: black;\r\n display: inline-block;\r\n max-width: 100%;\r\n min-width: 242px;\r\n /* padding-top: 10px; */\r\n}\r\n.colon {\r\n font-weight: 700;\r\n font-size: 28px;\r\n line-height: 36px;\r\n}\r\n\r\n.timer-section {\r\n display: flex;\r\n /* margin-top: 12px; */\r\n padding: 8px 0;\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n}\r\n.timer-element {\r\n display: inline-block;\r\n min-width: 42px;\r\n padding: 0 6px;\r\n text-align: center;\r\n}\r\n.timer-value {\r\n font-weight: 700;\r\n font-size: 32px;\r\n line-height: 36px;\r\n}\r\n.timer-label {\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 16px;\r\n}\r\n.transparent-element:first-child {\r\n padding-left: 0;\r\n}\r\n");const o=n=>{switch(n){case"Primary-V1":return"falcon-primary-button-v1";case"Secondary-V1":return"falcon-secondary-button-v1";case"Secondary-V4":return"falcon-secondary-button-v4";case"Secondary-Dark":return"falcon-secondary-button-dark";case"Primary-Dark-V1":return"falcon-primary-dark-button";case"Secondary-V5":return"falcon-secondary-button-v5";default:return""}},a=n=>{let r=new Date(n);return r=((n,r,e,t,o,a,i)=>{const l=new Date(Date.UTC(r,e,t,o,a,i)),d=new Date(l.toLocaleString("en-US",{timeZone:"Europe/Vienna"})),s=new Date(l.toLocaleString("en-US",{timeZone:n})),c=d.getTime()-s.getTime();return l.setTime(l.getTime()+c),l})("Europe/Vienna",r.getFullYear(),r.getMonth(),r.getDate(),r.getHours(),r.getMinutes(),r.getSeconds()),r},i="center",l="left",d="transparent",s="00",c=({content:r})=>{var e;return n.createElement("div",{className:"container",style:{justifyContent:r.timerAlignment===i?"center":r.timerAlignment===l?"left":"right"}},n.createElement("div",{className:"timer-section",style:{color:r.timerColor,backgroundColor:r.backgroundColor,marginLeft:r.backgroundColor===d&&r.timerAlignment===l?"-9px":"unset",marginRight:r.backgroundColor===d&&"right"===r.timerAlignment?"-24px":"unset"}},n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s," "),n.createElement("div",{className:"timer-label"},r.dayLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s," "),n.createElement("div",{className:"timer-label"},r.hourLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s," "),n.createElement("div",{className:"timer-label"},r.minuteLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s),n.createElement("div",{className:"timer-label"},r.secondLabel))),n.createElement("div",{className:"timer-message",style:{color:null===(e=r.expiryLabelColor)||void 0===e?void 0:e.color}},r.expiryLabel))},m=({content:r})=>{var e,t,o,d,s,m,p,b;const u=a(new Date(null===(e=null==r?void 0:r.endTime)||void 0===e?void 0:e.replace(/-/g,"/"))),g=a(new Date(null===(t=null==r?void 0:r.startTime)||void 0===t?void 0:t.replace(/-/g,"/"))),v=(null==r?void 0:r.colorChangeTime)&&a(new Date(null===(o=null==r?void 0:r.colorChangeTime)||void 0===o?void 0:o.replace(/-/g,"/"))),[x,f]=n.useState(!1),[h,T]=n.useState(null!==(d=null==r?void 0:r.timerColor)&&void 0!==d?d:""),[y,w]=n.useState(!1),B=()=>{const n=new Date;v&&!y&&n.getTime()>v.getTime()&&(T("#da291c"),w(!0)),n.getTime()>=g.getTime()&&!x&&f(!0);const r=u.getTime()-n.getTime();if(r>0&&x){return{days:("0"+Math.floor(r/864e5)).slice(-2),hours:("0"+Math.floor(r/36e5%24)).slice(-2),mins:("0"+Math.floor(r/1e3/60%60)).slice(-2),sec:("0"+Math.floor(r/1e3%60)).slice(-2)}}return null},k={timerColor:h,backgroundColor:null==r?void 0:r.backgroundColor,expiryLabel:r.expiryLabel,timerAlignment:r.timerAlignment,dayLabel:r.dayLabel,hourLabel:r.hourLabel,minuteLabel:r.minuteLabel,secondLabel:r.secondLabel,expiryLabelColor:r.expiryLabelColor},[C,P]=n.useState(B());n.useEffect((()=>{P(B());const n=setInterval((()=>{P(B())}),1e3);return()=>{clearInterval(n)}}),[]);const S=[{label:null!==(s=null==r?void 0:r.hourLabel)&&void 0!==s?s:"",value:null==C?void 0:C.hours},{label:null!==(m=null==r?void 0:r.minuteLabel)&&void 0!==m?m:"",value:null==C?void 0:C.mins},{label:null!==(p=null==r?void 0:r.secondLabel)&&void 0!==p?p:"",value:null==C?void 0:C.sec}];return n.createElement("div",{className:"timer-wrap",style:{textAlign:r.timerAlignment===i?"center":r.timerAlignment===l?"left":"right"}},x&&n.createElement("div",{className:"timer-container"},C?n.createElement("div",{className:"timer-section",style:{color:(null==r?void 0:r.isDarkMode)?"#ffffff":h,backgroundColor:null!==(b=null==r?void 0:r.backgroundColor)&&void 0!==b?b:"transparent"}},n.createElement("div",{className:" timer-element transparent-element"},n.createElement("div",{className:"timer-value"}," ",null==C?void 0:C.days),n.createElement("div",{className:"timer-label"},r.dayLabel)),S.map(((r,e)=>n.createElement(n.Fragment,{key:e},n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",r.value),n.createElement("div",{className:"timer-label"},r.label)))))):n.createElement(c,{content:k})))};e("video {\r\n object-fit: cover;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n width: 100%;\r\n border-top-right-radius: 8px;\r\n border-bottom-right-radius: 8px;\r\n}\r\n.video-wrapper {\r\n overflow: hidden;\r\n text-align: center;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n .stageTeaserContainer {\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border-radius: 8px;\r\n flex-direction: row;\r\n width: calc(100% - 10px);\r\n }\r\n .stageTeaserRightWrapper {\r\n position: relative;\r\n }\r\n .stageTeaserMainText {\r\n font-size: 48px;\r\n line-height: 60px;\r\n font-weight: 500;\r\n text-transform: uppercase;\r\n }\r\n .stageTeaserSecondaryPromoText {\r\n font-size: 14px;\r\n line-height: 16px;\r\n font-weight: 500;\r\n }\r\n .stageTeaserSecondaryPromoPercent {\r\n font-size: 34px;\r\n line-height: 38px;\r\n font-weight: 700;\r\n }\r\n .stageTeaserPromoText {\r\n font-size: 18px;\r\n line-height: 20px;\r\n font-weight: 500;\r\n }\r\n .stageTeaserLeftWrapperBackground {\r\n background: var(--primary-colour-pale-dawn-grey-200, #e6e3df);\r\n }\r\n .stageTeaserBannerWrapper .react-multi-carousel-list {\r\n position: initial;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow {\r\n background: #ffffff;\r\n box-shadow: 0px 4px 12px rgba(87, 84, 82, 0.2);\r\n border-radius: 24px;\r\n font-size: 16px;\r\n height: 44px;\r\n width: 44px;\r\n padding: 10px;\r\n z-index: 1;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow::before {\r\n color: #da291c;\r\n font-size: 16px;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow:disabled::before {\r\n color: #b3aeaa;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--right {\r\n right: 3%;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--left {\r\n left: 3%;\r\n }\r\n /* dots */\r\n .stageTeaserBannerWrapper .react-multi-carousel-dot button {\r\n background: #ffffff;\r\n opacity: 0.3;\r\n border: 0px;\r\n transition: none;\r\n }\r\n .stageTeaserBannerWrapper .react-multi-carousel-dot--active button {\r\n background: #da291c;\r\n opacity: 1;\r\n }\r\n .stageTeaserBannerWrapper .react-multi-carousel-dot button:hover:active {\r\n background: #da291c;\r\n }\r\n @media (max-width: 768px) {\r\n .stageTeaserContainer {\r\n flex-direction: column;\r\n }\r\n .stageTeaserMainText {\r\n font-size: 32px;\r\n line-height: 40px;\r\n font-weight: 500;\r\n }\r\n \r\n .stageTeaserPromoPercent {\r\n font-size: 36px;\r\n line-height: 32px;\r\n font-weight: 700;\r\n }\r\n .stageTeaserPromoText {\r\n font-size: 14px;\r\n line-height: 16px;\r\n font-weight: 500;\r\n }\r\n }\r\n @media only screen and (min-width: 376px) and (max-width: 768px) {\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--right {\r\n right: 4%;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--left {\r\n left: 4%;\r\n }\r\n }\r\n @media (min-width: 1025px) {\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--right {\r\n right: 5%;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--left {\r\n left: 5%;\r\n }\r\n }\r\n \r\n \r\n .teaserTimer {\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n }\r\n \r\n /*Tablet md & All small devices*/\r\n @media only screen and (max-width : 768px) {\r\n video {\r\n border-top-right-radius: 0px;\r\n border-bottom-right-radius: 8px;\r\n border-bottom-left-radius: 8px;\r\n }\r\n .stageTeaserRightWrapper {\r\n height: 400px;\r\n }\r\n .stageTeaserLeftWrapper {\r\n padding: 24px;\r\n text-align: center;\r\n }\r\n .stageTeaserSecondaryPromoPercent {\r\n font-size:28px;\r\n }\r\n }\r\n \r\n \r\n /*Tablet - lg*/\r\n @media only screen and (min-width : 769px) and (max-width : 1024px) {\r\n .stageTeaserRightWrapper {\r\n width: 100%;\r\n }\r\n .promoImage{\r\n padding-right: 51px;\r\n padding-top: 114px;\r\n }\r\n .stageTeaserLeftWrapper {\r\n padding: 55px;\r\n }\r\n }\r\n @media (width : 1024px) {\r\n .stageTeaserRightWrapper {\r\n width: 50%;\r\n }\r\n }\r\n /*Desktop, Laptop & Large Desktops*/\r\n @media only screen and (min-width : 1025px) {\r\n .stageTeaserLeftWrapper {\r\n padding: 120px;\r\n }\r\n }\r\n \r\n \r\n /*Extra Large Screens*/\r\n @media only screen and (min-width : 2000px) {\r\n .stageTeaserLeftWrapper {\r\n padding: 320px;\r\n }\r\n }\r\n \r\n \r\n #inboxCount{\r\n position: absolute; \r\n top: 0;\r\n right:0;\r\n }");e(".stageTeaserPromoBubble {\r\n display: flex;\r\n text-align: center;\r\n padding: 0px 16px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 4px;\r\n flex-shrink: 0;\r\n border-radius: 50%;\r\n position: absolute;\r\n}\r\n\r\n.stageTeaserPrimaryPromoBubble {\r\n width: 160px;\r\n height: 160px;\r\n background: var(--primary-colour-ice-white, #ffffff);\r\n z-index: 1;\r\n}\r\n\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPrimaryPromoBubble {\r\n background: var(--primary-colour-ice-white, #ffffff);\r\n z-index: 1;\r\n}\r\n\r\n.stageTeaserSecondaryPromoBubble {\r\n width: 120px;\r\n height: 120px;\r\n top: 171px;\r\n color: #ffffff;\r\n background: var(--primary-colour-grey-dusk-grey-600, #3d3935);\r\n}\r\n\r\n.stageTeaserPromoPercent,\r\n.stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoPercent {\r\n font-size: 52px;\r\n line-height: 52px;\r\n font-weight: 700;\r\n}\r\n\r\n/*Tablet md & All small devices*/\r\n@media only screen and (max-width: 768px) {\r\n /* primary bubble size*/\r\n .stageTeaserPrimaryPromoBubble {\r\n width: 120px;\r\n height: 120px;\r\n }\r\n \r\n .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoText {\r\n font-size: 18px;\r\n line-height: 20px;\r\n font-weight: 500;\r\n }\r\n .stageTeaserPromoPercent,\r\n .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoPercent {\r\n font-size: 24px;\r\n line-height: 32px;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoText {\r\n font-size: 10px;\r\n line-height: 14px;\r\n }\r\n /* primary with secondary size*/\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPrimaryPromoBubble {\r\n width: 96px;\r\n height: 96px;\r\n }\r\n\r\n /* secondary bubble size*/\r\n .stageTeaserSecondaryPromoBubble {\r\n width: 72px;\r\n height: 72px;\r\n }\r\n\r\n .stageTeaserSecondaryPromoPercent {\r\n font-size: 21px;\r\n line-height: 24px;\r\n }\r\n\r\n .stageTeaserSecondaryPromoText {\r\n font-size: 12px;\r\n line-height: 12px;\r\n }\r\n}\r\n\r\n/*Tablet - lg*/\r\n@media only screen and (min-width: 768px) and (max-width: 1024px) {\r\n /* primary with secondary size*/\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPrimaryPromoBubble {\r\n width: 120px;\r\n height: 120px;\r\n }\r\n .stageTeaserPromoPercent,\r\n .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoPercent {\r\n font-size: 42px;\r\n }\r\n .stageTeaserSecondaryPromoBubble {\r\n width: 84px;\r\n height: 84px;\r\n }\r\n .stageTeaserSecondaryPromoPercent{\r\n font-size: 26px;\r\n }\r\n}\r\n\r\n/*Extra Large Screens*/\r\n@media only screen and (min-width: 2000px) {\r\n /* primary with secondary size*/\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPrimaryPromoBubble {\r\n width: 360px;\r\n height: 360px;\r\n }\r\n /* secondary bubble size*/\r\n .stageTeaserSecondaryPromoBubble {\r\n width: 160px;\r\n height: 160px;\r\n top: 171px;\r\n }\r\n \r\n}\r\n");e("/* primary bubble */\r\n.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 40px;\r\n}\r\n.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n bottom: 40px;\r\n}\r\n\r\n/* primary with secondary */\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 86px;\r\n left: initial;\r\n}\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n bottom: 131px;\r\n}\r\n/* secondary bubble */\r\n.stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n right: 40px;\r\n left: initial;\r\n}\r\n.stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n bottom: 40px;\r\n top: initial;\r\n}\r\n\r\n/*Very small devices - phones*/\r\n@media screen and (max-width : 652px) {\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n right: 46px;\r\n left: initial;\r\n bottom: 48px;\r\n top: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 6px;\r\n left: initial;\r\n bottom: 102px;\r\n }\r\n}\r\n\r\n/*All small devices - phones*/\r\n@media screen and (min-width : 652px) and (max-width : 768px) {\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n right: 192px;\r\n left: initial;\r\n bottom: 48px;\r\n top: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 128px;\r\n left: initial;\r\n bottom: 102px;\r\n }\r\n}\r\n\r\n/*Tablet - md*/\r\n@media only screen and (min-width : 769px) and (max-width : 990px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 48px;\r\n left: initial;\r\n bottom: 128px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n right: 22px;\r\n left: initial;\r\n bottom: 60px;\r\n top: initial;\r\n }\r\n}\r\n\r\n/*Tablet - lg*/\r\n@media only screen and (min-width : 990px) and (max-width : 1024px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 48px;\r\n left: initial;\r\n bottom: 128px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n right: 22px;\r\n left: initial;\r\n bottom: 60px;\r\n top: initial;\r\n }\r\n}\r\n\r\n/*Desktop, Laptop & Large Desktops*/\r\n@media only screen and (min-width : 1025px) {\r\n}\r\n\r\n/*Extra Large Screens*/\r\n@media only screen and (min-width : 2000px) {\r\n}");e("/* primary bubble */\r\n.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n left: 40px;\r\n }\r\n .stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n bottom: 40px;\r\n }\r\n \r\n /* primary with secondary */\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n left: 86px;\r\n right: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n bottom: 131px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {\r\n left: 40px;\r\n right: initial;\r\n }\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {\r\n bottom: 40px;\r\n top: initial;\r\n }\r\n \r\n \r\n /*All small devices - phones*/\r\n @media screen and (max-width : 768px) {\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {\r\n left: 58px;\r\n right: initial;\r\n bottom: 48px;\r\n top: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n left: 8px;\r\n right: initial;\r\n bottom: 102px;\r\n }\r\n }\r\n \r\n /*Tablet - md*/\r\n @media only screen and (min-width : 769px) and (max-width : 990px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n left: 48px;\r\n right: initial;\r\n bottom: 128px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {\r\n left: 22px;\r\n right: initial;\r\n bottom: 60px;\r\n top: initial;\r\n }\r\n }\r\n \r\n /*Tablet - lg*/\r\n @media only screen and (min-width : 990px) and (max-width : 1024px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n left: 48px;\r\n right: initial;\r\n bottom: 128px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {\r\n left: 22px;\r\n right: initial;\r\n bottom: 60px;\r\n top: initial;\r\n }\r\n }\r\n \r\n /*Desktop, Laptop & Large Desktops*/\r\n @media only screen and (min-width : 1025px) {\r\n }\r\n \r\n /*Extra Large Screens*/\r\n @media only screen and (min-width : 2000px) {\r\n }");e("/* primary bubble */\r\n.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 40px;\r\n}\r\n.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n top: 40px;\r\n}\r\n\r\n@media screen and (max-width : 568px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: 38px;\r\n right: initial;\r\n top: 68px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 2px;\r\n right: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n@media screen and (min-width : 568px) and (max-width : 768px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: 112px;\r\n right: initial;\r\n top: 68px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 61px;\r\n right: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n@media screen and (width : 768px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: 132px;\r\n right: initial;\r\n top: 84px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 61px;\r\n right: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n\r\n/*All small devices - phones*/\r\n\r\n/*Tablet - md*/\r\n@media only screen and (min-width : 769px) and (max-width : 990px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 0px;\r\n right: initial;\r\n top: 18px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: -33px;\r\n right: initial;\r\n top: 111px;\r\n bottom: initial;\r\n }\r\n}\r\n\r\n/*Tablet - lg*/\r\n@media only screen and (min-width : 990px) and (max-width : 1024px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 22px;\r\n right: initial;\r\n top: 22px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: -22px;\r\n right: initial;\r\n top: 108px;\r\n bottom: initial;\r\n }\r\n}\r\n\r\n/*Desktop, Laptop & Large Desktops*/\r\n@media only screen and (min-width : 1025px) and (max-width : 2000px) {\r\n /* primary with secondary */\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 72px;\r\n right: initial;\r\n top: 12px;\r\n}\r\n/* secondary bubble */\r\n.stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: 20px;\r\n right: initial;\r\n top: 126px;\r\n bottom: initial;\r\n}\r\n}\r\n\r\n/*Extra Large Screens*/\r\n@media only screen and (min-width : 2000px) {\r\n \r\n/* primary with secondary */\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 0px;\r\n right: initial;\r\n top: 12px;\r\n}\r\n/* secondary bubble */\r\n.stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: -62px;\r\n right: initial;\r\n top: 41px;\r\n bottom: initial;\r\n}\r\n\r\n\r\n}");e("/* primary bubble */\r\n.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 40px;\r\n}\r\n.stageTeaserPromoBubble.stageTeaserTopRight {\r\n top: 40px;\r\n}\r\n\r\n@media screen and (max-width : 568px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 38px;\r\n left: initial;\r\n top: 68px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 2px;\r\n left: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n@media screen and (min-width : 568px) and (max-width : 768px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 112px;\r\n left: initial;\r\n top: 68px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 61px;\r\n left: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n@media screen and (width : 768px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 132px;\r\n left: initial;\r\n top: 84px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 61px;\r\n left: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n\r\n/*All small devices - phones*/\r\n\r\n/*Tablet - md*/\r\n@media only screen and (min-width : 769px) and (max-width : 990px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 72px;\r\n left: initial;\r\n top: 18px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 24px;\r\n left: initial;\r\n top: 111px;\r\n bottom: initial;\r\n }\r\n}\r\n\r\n/*Tablet - lg*/\r\n@media only screen and (min-width : 990px) and (max-width : 1024px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 78px;\r\n left: initial;\r\n top: 22px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 26px;\r\n left: initial;\r\n top: 108px;\r\n bottom: initial;\r\n }\r\n}\r\n\r\n/*Desktop, Laptop & Large Desktops*/\r\n@media only screen and (min-width : 1025px) and (max-width : 2000px) {\r\n /* primary with secondary */\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 72px;\r\n left: initial;\r\n top: 12px;\r\n}\r\n/* secondary bubble */\r\n.stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 20px;\r\n left: initial;\r\n top: 126px;\r\n bottom: initial;\r\n}\r\n}\r\n\r\n/*Extra Large Screens*/\r\n@media only screen and (min-width : 2000px) {\r\n \r\n/* primary with secondary */\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 0px;\r\n left: initial;\r\n top: 12px;\r\n}\r\n/* secondary bubble */\r\n.stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 44px;\r\n left: initial;\r\n top: 322px;\r\n bottom: initial;\r\n}\r\n\r\n\r\n}");e(".falcon-grey-600 {\r\n color: #3d3935;\r\n}\r\n\r\n.falcon-grey-500 {\r\n color: #5f5955;\r\n}\r\n.falcon-grey-400 {\r\n color: #86807c;\r\n}\r\n\r\n.falcon-grey-100 {\r\n color: #f7f6f5;\r\n}\r\n\r\n.falcon-ice-white {\r\n color: #ffffff;\r\n}\r\n.falcon-background-grey-100 {\r\n background-color: #f7f6f5;\r\n}\r\n.falcon-background-ice-white {\r\n background-color: #ffffff;\r\n}\r\n.falcon-background-transparent {\r\n background-color: transparent;\r\n}\r\n\r\n.falcon-gradient-rubyglow-diagonal {\r\n border-radius: 8px;\r\n background: linear-gradient(93.71deg, #e2271e -0.37%, #ef7c3c 100%);\r\n}\r\n.falcon-gradient-rubyglow-vertical {\r\n border-radius: 8px;\r\n background: linear-gradient(180deg, #e2271e 0%, #ef7c3c 100%);\r\n}\r\n.falcon-gradient-pinksky-diagonal {\r\n background: linear-gradient(98.52deg, #d093a6 -0.35%, #e7c9bc 100.35%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-pinksky-vertical {\r\n background: linear-gradient(180deg, #d093a6 0%, #e7c9bc 100%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-bluehaze-diagonal {\r\n background: linear-gradient(98.52deg, #7899bd -0.35%, #b8d0e3 100.35%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-bluehaze-vertical {\r\n background: linear-gradient(180deg, #7899bd 0%, #b8d0e3 100%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-greencloud-diagonal {\r\n background: linear-gradient(99.06deg, #8d989b -0.35%, #f8edd2 105.52%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-greencloud-vertical {\r\n background: linear-gradient(180deg, #8d989b 0%, #f8edd2 100%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-peachfog-diagonal {\r\n background: linear-gradient(98.52deg, #9c8a95 -0.35%, #f6d6b3 100.35%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-peachfog-vertical {\r\n background: linear-gradient(180deg, #9c8a95 0%, #f6d6b3 100%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-orange-diagonal {\r\n background: linear-gradient(105deg, #EF7C3C 0%, #E2271E 100%);\r\n border-radius: 4px 0;\r\n}\r\n.falcon-gradient-dark-blue-haze{\r\n background: linear-gradient(239deg, #4F87C1 52.95%, rgba(94, 148, 207, 0) 111%);\r\n border-radius: 4px 0;\r\n}\r\n\r\n.falcon-def-transparancy {\r\n background: rgba(0, 0, 0, 1);\r\n}\r\n");const p=({content:r})=>{var e,t,a,i,l,d,s,c,p,b,u,g,v,x,f,h,T,y,w,B,k,C,P,S,E,_,N,L,z,I,W,D,R,M,A,J,F,j,H,$;const O="none"!==(null==r?void 0:r.gradientBgColor)?(n=>{switch(n){case"rubyglow-diagonal":return"falcon-gradient-rubyglow-diagonal";case"rubyglow-vertical":return"falcon-gradient-rubyglow-vertical";case"pinksky-diagonal":return"falcon-gradient-pinksky-diagonal";case"pinksky-vertical":return"falcon-gradient-pinksky-vertical";case"bluehaze-diagonal":return"falcon-gradient-bluehaze-diagonal";case"bluehaze-vertical":return"falcon-gradient-bluehaze-vertical";case"greencloud-diagonal":return"falcon-gradient-greencloud-diagonal";case"greencloud-vertical":return"falcon-gradient-greencloud-vertical";case"peachfog-diagonal":return"falcon-gradient-peachfog-diagonal";case"peachfog-vertical":return"falcon-gradient-peachfog-vertical";case"darkblue-haze":return"falcon-gradient-dark-blue-haze";default:return""}})(null==r?void 0:r.gradientBgColor):(n=>{switch(n){case"grey-100":return"falcon-background-grey-100";case"ice-white":return"falcon-background-ice-white";case"transparent":return"falcon-background-transparent";case"none":return"none";default:return""}})(null==r?void 0:r.GenericBgColor),V="none"===(null==r?void 0:r.gradientBgColor)&&"none"===(null==r?void 0:r.GenericBgColor)?null===(e=null==r?void 0:r.solidBgColor)||void 0===e?void 0:e.color:"",U=(null==r?void 0:r.EnableTextBgColor)?null===(t=null==r?void 0:r.textbgcolor)||void 0===t?void 0:t.color:"",q=()=>{switch(null==r?void 0:r.PromoBubblePosition){case"top-left":return"stageTeaserTopLeft";case"top-right":return"stageTeaserTopRight";case"bottom-left":return"stageTeaserBottomLeft";case"bottom-right":return"stageTeaserBottomRight"}},G=null===(l=null===(i=null===(a=null==r?void 0:r.primaryPromoBubble)||void 0===a?void 0:a[0])||void 0===i?void 0:i.bgcolor)||void 0===l?void 0:l.color,Z=null===(c=null===(s=null===(d=null==r?void 0:r.primaryPromoBubble)||void 0===d?void 0:d[0])||void 0===s?void 0:s.textcolor)||void 0===c?void 0:c.color,Y=null===(u=null===(b=null===(p=null==r?void 0:r.SecondaryPromoBubble)||void 0===p?void 0:p[0])||void 0===b?void 0:b.bgcolor)||void 0===u?void 0:u.color,K=null===(x=null===(v=null===(g=null==r?void 0:r.SecondaryPromoBubble)||void 0===g?void 0:g[0])||void 0===v?void 0:v.textcolor)||void 0===x?void 0:x.color,Q=n=>{const r=n&&n.split(".").pop();return!(!r||!["webp","jpg","jpeg","png"].includes(r))},[X,nn]=n.useState(!1),[rn,en]=n.useState(""),[tn,on]=n.useState(""),an=()=>{var n,e,t,o,a,i,l,d,s;const c=window.innerWidth;c<=767?(nn(null==r?void 0:r.mobileImageFirst),Q(null===(n=null==r?void 0:r.MobilePromoImage)||void 0===n?void 0:n.filename)?en(null===(e=null==r?void 0:r.MobilePromoImage)||void 0===e?void 0:e.filename):on(null===(t=null==r?void 0:r.MobilePromoImage)||void 0===t?void 0:t.filename)):c>=768&&c<=1024?(nn(null==r?void 0:r.tabletImageFirst),Q(null===(o=null==r?void 0:r.TabletPromoImage)||void 0===o?void 0:o.filename)?en(null===(a=null==r?void 0:r.TabletPromoImage)||void 0===a?void 0:a.filename):on(null===(i=null==r?void 0:r.TabletPromoImage)||void 0===i?void 0:i.filename)):c>=1025&&(nn(null==r?void 0:r.desktopImageFirst),Q(null===(l=null==r?void 0:r.DesktopPromoImage)||void 0===l?void 0:l.filename)?en(null===(d=null==r?void 0:r.DesktopPromoImage)||void 0===d?void 0:d.filename):on(null===(s=null==r?void 0:r.DesktopPromoImage)||void 0===s?void 0:s.filename))};return n.useEffect((()=>{an(),window.addEventListener("resize",an)}),[]),n.createElement("div",{className:V?"stageTeaserContainer d-flex":O+" stageTeaserContainer d-flex",style:{backgroundColor:V}},n.createElement("div",{className:(X?"order-1":"order-0")+" stageTeaserLeftWrapper col-md-6",style:{backgroundColor:U,borderRadius:"8px"}},n.createElement("div",{className:"stageTeaserTopText text-bold"},null===(w=null===(y=null===(T=null===(h=null===(f=null==r?void 0:r.primaryheading)||void 0===f?void 0:f.content)||void 0===h?void 0:h[0])||void 0===T?void 0:T.content)||void 0===y?void 0:y[0])||void 0===w?void 0:w.text),n.createElement("div",{className:"stageTeaserMainText"},null===(S=null===(P=null===(C=null===(k=null===(B=null==r?void 0:r.mainheading)||void 0===B?void 0:B.content)||void 0===k?void 0:k[0])||void 0===C?void 0:C.content)||void 0===P?void 0:P[0])||void 0===S?void 0:S.text),n.createElement("div",{className:"stageTeaserBottomText text-bold",style:{fontSize:"14px",lineHeight:"20px"}},null===(z=null===(L=null===(N=null===(_=null===(E=null==r?void 0:r.secondaryheading)||void 0===E?void 0:E.content)||void 0===_?void 0:_[0])||void 0===N?void 0:N.content)||void 0===L?void 0:L[0])||void 0===z?void 0:z.text),n.createElement("div",{className:"teaserTimer text-center"},n.createElement(m,{content:null==r?void 0:r.timer[0]})),n.createElement("div",{className:"StageTeaserButtonContainer"},null===(I=null==r?void 0:r.teaserButtonConfig)||void 0===I?void 0:I.map((e=>{var t,a,i,l,d,s;return n.createElement("div",{className:"StageTeaserButton"},n.createElement("a",{href:`${(null===(t=null==e?void 0:e.buttonLink)||void 0===t?void 0:t.url)||0}`,target:null!==(a=null==r?void 0:r.target)&&void 0!==a?a:"",rel:"_blank"===(null==e?void 0:e.linkTarget)?"opener":"noopener"},n.createElement("div",{className:o(null==e?void 0:e.buttonType)},(null===(i=null==e?void 0:e.buttonIcon)||void 0===i?void 0:i.filename)&&"left"===(null==e?void 0:e.buttonAlignment)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(l=null==e?void 0:e.buttonIcon)||void 0===l?void 0:l.filename}),null==e?void 0:e.buttonLabel,(null===(d=null==e?void 0:e.buttonIcon)||void 0===d?void 0:d.filename)&&"right"===(null==e?void 0:e.buttonAlignment)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(s=null==e?void 0:e.buttonIcon)||void 0===s?void 0:s.filename}))))})))),n.createElement("div",{className:(X?"order-0":"order-1")+" stageTeaserRightWrapper col-md-6",style:{background:`url(${rn}) center / contain no-repeat`}},""!==tn&&n.createElement("div",{className:"video-wrapper"},n.createElement("video",{autoPlay:!0,muted:!0,loop:!0,src:tn})),(null===(W=null==r?void 0:r.primaryPromoBubble)||void 0===W?void 0:W.length)>0&&n.createElement("div",{className:`stageTeaserPromoBubble stageTeaserPrimaryPromoBubble stageTeaserPrimaryWithSecondaryBubble ${q()}`,style:{backgroundColor:G,color:Z}},n.createElement("div",{className:"stageTeaserPromoPercent"},null===(R=null===(D=null==r?void 0:r.primaryPromoBubble)||void 0===D?void 0:D[0])||void 0===R?void 0:R.primarytext),n.createElement("div",{className:"stageTeaserPromoText"},null===(A=null===(M=null==r?void 0:r.primaryPromoBubble)||void 0===M?void 0:M[0])||void 0===A?void 0:A.secondarytext)),(null===(J=null==r?void 0:r.SecondaryPromoBubble)||void 0===J?void 0:J.length)>0&&n.createElement("div",{className:`stageTeaserPromoBubble stageTeaserSecondaryPromoBubble ${q()}`,style:{backgroundColor:Y,color:K}},n.createElement("div",{className:"stageTeaserSecondaryPromoPercent"},null===(j=null===(F=null==r?void 0:r.SecondaryPromoBubble)||void 0===F?void 0:F[0])||void 0===j?void 0:j.primarytext),n.createElement("div",{className:"stageTeaserSecondaryPromoText"},null===($=null===(H=null==r?void 0:r.SecondaryPromoBubble)||void 0===H?void 0:H[0])||void 0===$?void 0:$.secondarytext))))};e(".StageTeaserCard {\r\n /* margin: 24px 0; */\r\n border-radius: 8px;\r\n height: 580px;\r\n width: 940px;\r\n background-size: cover;\r\n}\r\n\r\n.StageTeaserContainer {\r\n display: flex;\r\n flex-direction: column;\r\n /* align-items: center; */\r\n position: absolute;\r\n padding: 90px 60px;\r\n}\r\n\r\n.StageTeaserTextContainer {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.StageTeaserOverline {\r\n font-size: 18px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: 24px;\r\n}\r\n\r\n.StageTeaserHeadline {\r\n font-size: 48px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 60px;\r\n text-transform: uppercase;\r\n}\r\n\r\n.StageTeaserText {\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 20px;\r\n}\r\n\r\n.StageTeaserButtonContainer {\r\n margin: 16px 0;\r\n display: flex;\r\n}\r\n\r\n.StageTeaserButton {\r\n padding: 6px;\r\n}\r\n\r\n/* mobile only viewport */\r\n@media (max-width: 375px) {\r\n .StageTeaserCard {\r\n width: 95%;\r\n height: 1336px;\r\n }\r\n\r\n .StageTeaserContainer {\r\n height: 640px;\r\n padding: 32px 24px;\r\n }\r\n\r\n .StageTeaserTextContainer {\r\n /* max-width: 271px; */\r\n }\r\n\r\n .StageTeaserOverline {\r\n font-size: 14px;\r\n line-height: 20px;\r\n }\r\n\r\n .StageTeaserHeadline {\r\n font-size: 24px;\r\n line-height: 32px;\r\n }\r\n\r\n .StageTeaserButtonContainer {\r\n flex-direction: column;\r\n }\r\n}\r\n\r\n/* large mobiles viewport */\r\n@media (min-width: 376px) and (max-width: 767px) {\r\n .StageTeaserCard {\r\n width: 95%;\r\n height: 1336px;\r\n }\r\n\r\n .StageTeaserContainer {\r\n height: 640px;\r\n padding: 32px 24px;\r\n }\r\n\r\n .StageTeaserTextContainer {\r\n /* max-width: 75%; */\r\n }\r\n\r\n .StageTeaserOverline {\r\n font-size: 14px;\r\n line-height: 20px;\r\n }\r\n\r\n .StageTeaserHeadline {\r\n font-size: 24px;\r\n line-height: 32px;\r\n }\r\n\r\n .StageTeaserButtonContainer {\r\n flex-direction: column;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media (min-width: 768px) and (max-width: 1022px) {\r\n .StageTeaserCard {\r\n width: 100%;\r\n height: 800px;\r\n }\r\n\r\n .StageTeaserContainer {\r\n height: 800px;\r\n padding: 60px 100px;\r\n }\r\n\r\n .StageTeaserTextContainer {\r\n /* max-width: 80%; */\r\n }\r\n\r\n .StageTeaserOverline {\r\n font-size: 16px;\r\n }\r\n\r\n .StageTeaserHeadline {\r\n font-size: 32px;\r\n line-height: 40px;\r\n }\r\n}\r\n\r\n/* Desktop only viewport */\r\n@media (min-width: 1023px) and (max-width: 1439px) {\r\n .StageTeaserCard {\r\n width: 98%;\r\n height: 580px;\r\n }\r\n\r\n .StageTeaserContainer {\r\n width: 100%;\r\n }\r\n\r\n .StageTeaserCenterContainer {\r\n padding: 120px 90px;\r\n }\r\n\r\n .StageTeaserTextContainer {\r\n /* max-width: 480px; */\r\n }\r\n\r\n .StageTeaserTextCenterContainer {\r\n /* max-width: 780px; */\r\n }\r\n}\r\n\r\n/* large desktop viewport */\r\n@media (min-width: 1440px) {\r\n .StageTeaserCard {\r\n width: 2880px;\r\n height: 1620px;\r\n }\r\n\r\n .StageTeaserContainer {\r\n width: 100%;\r\n padding: 170px 108px;\r\n }\r\n\r\n .StageTeaserTextContainer {\r\n /* max-width: 736px; */\r\n }\r\n}\r\n\r\n/* falcon button styles */\r\n.falcon-button-defaults {\r\n border-radius: 28px;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-size: 16px;\r\n line-height: 24px;\r\n font-weight: 700;\r\n padding: 10px 24px;\r\n text-decoration: none;\r\n}\r\n\r\n.falcon-primary-button-v1 > .falcon-button-defaults {\r\n background-color: #da291c;\r\n color: #ffffff;\r\n}\r\n\r\n.falcon-primary-button-v1:hover {\r\n background-color: #961c13;\r\n}\r\n\r\n.falcon-primary-button-v1:visited {\r\n background-color: #c7355f;\r\n}\r\n\r\n.falcon-primary-button-v1:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-primary-button-v1-JC > .falcon-button-defaults {\r\n background-color: #ffffff;\r\n color: #da291c;\r\n}\r\n\r\n.falcon-primary-button-v1-JC:hover {\r\n background-color: #e97f77;\r\n color: #ffffff;\r\n}\r\n\r\n.falcon-primary-button-v1-JC:visited {\r\n background-color: #961c13;\r\n color: #ffffff;\r\n}\r\n\r\n.falcon-primary-button-v1-JC:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-secondary-button-v1 > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #da291c;\r\n}\r\n\r\n.falcon-secondary-button-v1:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n\r\n.falcon-secondary-button-v1:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n\r\n.falcon-secondary-button-v1:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #ffffff;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC:hover {\r\n border-color: #f1571d;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC:visited {\r\n border-color: #c7355f;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n#wrapper {\r\n width: 80%;\r\n margin: 10px auto;\r\n}\r\n\r\n.hero-unit {\r\n position: relative;\r\n}\r\n\r\n.topContent {\r\n position: inherit;\r\n bottom : 128px;\r\n}\r\n\r\n.bottomContent {\r\n position: inherit;\r\n top : 172px;\r\n}\r\n\r\n@media (max-width: 767px) {\r\n #teaserTextSection{\r\n margin-left: -180px;\r\n }\r\n #wrapper {\r\n width: 100%;\r\n margin: 10px auto;\r\n }\r\n .hero-unit {\r\n -webkit-background-size: contain;\r\n -moz-background-size: contain;\r\n -o-background-size: contain;\r\n background-size: contain;\r\n\r\n /**\r\n * below is borowed from Twitter Bootstrap hero-unit\r\n */\r\n padding: 200px;\r\n margin-bottom: 30px;\r\n -webkit-border-radius: 6px;\r\n -moz-border-radius: 6px;\r\n border-radius: 6px;\r\n margin-right: 26px;\r\n padding-right: 26px;\r\n }\r\n}\r\n\r\n@media (min-width: 768px) and (max-width: 1022px) {\r\n #wrapper {\r\n width: 100%;\r\n margin: 10px auto;\r\n }\r\n .hero-unit {\r\n /* background: url(https://a.storyblok.com/f/113473/2048x1536/5081970575/buyback-tablet.png)\r\n no-repeat center center; */\r\n -webkit-background-size: cover;\r\n -moz-background-size: cover;\r\n -o-background-size: cover;\r\n background-size: cover;\r\n\r\n /**\r\n * below is borowed from Twitter Bootstrap hero-unit\r\n */\r\n padding: 200px;\r\n margin-bottom: 30px;\r\n -webkit-border-radius: 6px;\r\n -moz-border-radius: 6px;\r\n border-radius: 6px;\r\n }\r\n}\r\n\r\n@media (min-width: 1023px) and (max-width: 1439px) {\r\n #wrapper {\r\n width: 100%;\r\n margin: 10px auto;\r\n }\r\n .hero-unit {\r\n /* background: url(https://a.storyblok.com/f/113473/2048x1536/5081970575/buyback-tablet.png)\r\n no-repeat center center; */\r\n -webkit-background-size: cover;\r\n -moz-background-size: cover;\r\n -o-background-size: cover;\r\n background-size: cover;\r\n\r\n /**\r\n * below is borowed from Twitter Bootstrap hero-unit\r\n */\r\n padding: 200px;\r\n margin-bottom: 30px;\r\n -webkit-border-radius: 6px;\r\n -moz-border-radius: 6px;\r\n border-radius: 6px;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n #wrapper {\r\n width: 99%;\r\n margin: 10px auto;\r\n }\r\n .hero-unit {\r\n /* background: url(https://a.storyblok.com/f/113473/2880x1620/7281e1302d/buyback-desktop.png)\r\n no-repeat center center; */\r\n -webkit-background-size: cover;\r\n -moz-background-size: cover;\r\n -o-background-size: cover;\r\n background-size: cover;\r\n\r\n /**\r\n * below is borowed from Twitter Bootstrap hero-unit\r\n */\r\n padding: 200px;\r\n margin-bottom: 30px;\r\n -webkit-border-radius: 6px;\r\n -moz-border-radius: 6px;\r\n border-radius: 6px;\r\n }\r\n}\r\n");const b=({content:r})=>{var e,t,a,i,l,d,s,c,p,b,u,g,v,x,f,h,T,y,w,B,k,C,P,S,E,_,N;const L=null===(d=null===(l=null===(i=null===(a=null===(t=null===(e=null==r?void 0:r.content)||void 0===e?void 0:e.primaryheading)||void 0===t?void 0:t.content)||void 0===a?void 0:a[0])||void 0===i?void 0:i.content)||void 0===l?void 0:l[0])||void 0===d?void 0:d.text,z=null===(g=null===(u=null===(b=null===(p=null===(c=null===(s=null==r?void 0:r.content)||void 0===s?void 0:s.mainheading)||void 0===c?void 0:c.content)||void 0===p?void 0:p[0])||void 0===b?void 0:b.content)||void 0===u?void 0:u[0])||void 0===g?void 0:g.text,I=null===(y=null===(T=null===(h=null===(f=null===(x=null===(v=null==r?void 0:r.content)||void 0===v?void 0:v.secondaryheading)||void 0===x?void 0:x.content)||void 0===f?void 0:f[0])||void 0===h?void 0:h.content)||void 0===T?void 0:T[0])||void 0===y?void 0:y.text,W="left"===(null===(w=null==r?void 0:r.content)||void 0===w?void 0:w.textposition)?"flex-start":"right"===(null===(B=null==r?void 0:r.content)||void 0===B?void 0:B.textposition)?"flex-end":"center",D="left"===(null===(k=null==r?void 0:r.content)||void 0===k?void 0:k.textposition)?"left":"right"===(null===(C=null==r?void 0:r.content)||void 0===C?void 0:C.textposition)?"right":"center";"left"===(null===(P=null==r?void 0:r.content)||void 0===P?void 0:P.textposition)||null===(S=null==r?void 0:r.content)||void 0===S||S.textposition;const[R,M]=n.useState(""),[A,J]=n.useState(""),F=()=>{var n,e,t,o,a,i,l;const d=window.innerWidth;d<=767?(M(`url(${null===(e=null===(n=null==r?void 0:r.content)||void 0===n?void 0:n.mobileImage)||void 0===e?void 0:e.filename}) center center / cover no-repeat`),J(null===(t=null==r?void 0:r.content)||void 0===t?void 0:t.verticaltextpostion)):d>=768&&d<=1439?(M(`url(${null===(a=null===(o=null==r?void 0:r.content)||void 0===o?void 0:o.tabImage)||void 0===a?void 0:a.filename}) center center / cover no-repeat`),J("")):d>=1440&&(M(`url(${null===(l=null===(i=null==r?void 0:r.content)||void 0===i?void 0:i.desktopimage)||void 0===l?void 0:l.filename}) center center / cover no-repeat`),J(""))};return n.useEffect((()=>{F(),window.addEventListener("resize",F)}),[]),n.createElement(n.Fragment,null,n.createElement("div",{id:"wrapper"},""!==R&&n.createElement("div",{className:"hero-unit",style:{background:R}},n.createElement("div",{id:"teaserTextSection",className:"top"===A?"topContent":"bottom"===A?"bottomContent":""},n.createElement("div",{className:"StageTeaserTextContainer",style:{color:"#ffffff",alignItems:""===A?W:"center"}},n.createElement("div",{className:"StageTeaserOverline"}," ",L," "),n.createElement("div",{className:"StageTeaserHeadline",style:{textAlign:""===A?D:"center"}},z),n.createElement("div",{className:"StageTeaserText"}," ",I," ")),n.createElement("div",{className:"StageTeaserTimer"},n.createElement("div",{className:"teaserTimer text-center"},n.createElement(m,{content:null===(E=null==r?void 0:r.content)||void 0===E?void 0:E.timer[0]}))),n.createElement("div",{className:"StageTeaserButtonContainer",style:{justifyContent:""===A?W:"",textAlign:""!==A?"center":D}},null===(N=null===(_=null==r?void 0:r.content)||void 0===_?void 0:_.teaserButtonConfig)||void 0===N?void 0:N.map((e=>{var t,a,i,l,d,s;return n.createElement("div",{className:"StageTeaserButton"},n.createElement("a",{href:`${(null===(t=null==e?void 0:e.buttonLink)||void 0===t?void 0:t.url)||0}`,target:null!==(a=null==r?void 0:r.target)&&void 0!==a?a:"",rel:"_blank"===(null==e?void 0:e.linkTarget)?"opener":"noopener"},n.createElement("div",{className:o(null==e?void 0:e.buttonType)},(null===(i=null==e?void 0:e.buttonIcon)||void 0===i?void 0:i.filename)&&"left"===(null==e?void 0:e.buttonAlignment)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(l=null==e?void 0:e.buttonIcon)||void 0===l?void 0:l.filename}),null==e?void 0:e.buttonLabel,(null===(d=null==e?void 0:e.buttonIcon)||void 0===d?void 0:d.filename)&&"right"===(null==e?void 0:e.buttonAlignment)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(s=null==e?void 0:e.buttonIcon)||void 0===s?void 0:s.filename}))))})))))))};exports.RibbonComponent=({content:r})=>{var e,i,l,d,s,c,p,b,u,g,v,x,f,h,T,y,w,B,k,C,P,S,E,_,N,L;const[z,I]=n.useState(!1),W=new Date,[D,R]=n.useState(null==r?void 0:r.teaserTimer[0]),M=a(new Date(null===(i=null===(e=null==r?void 0:r.teaserTimer[0])||void 0===e?void 0:e.endTime)||void 0===i?void 0:i.replace(/-/g,"/"))),A=a(new Date(null===(d=null===(l=null==r?void 0:r.teaserTimer[0])||void 0===l?void 0:l.startTime)||void 0===d?void 0:d.replace(/-/g,"/"))),J=((null==r?void 0:r.enableDarkMode)?"ribbonComponent_DarkText ":"")+"ribbonComponent_Card",F=((null==r?void 0:r.enableDarkMode)?"ribbonComponent_DarkDescription ":"")+"ribbonComponent_TextContainer",[j,H]=n.useState(!1),$=()=>{const n=M.getTime()-W.getTime();if(n>0&&j){return{days:("0"+Math.floor(n/864e5)).slice(-2),hours:("0"+Math.floor(n/36e5%24)).slice(-2),mins:("0"+Math.floor(n/1e3/60%60)).slice(-2),sec:("0"+Math.floor(n/1e3%60)).slice(-2)}}return null},[O,V]=n.useState($()),U=()=>{!1===z&&I(!0)};return n.useEffect((()=>{var n;if(null===(n=null==r?void 0:r.teaserTimer[0])||void 0===n?void 0:n.startTime){const n=null==r?void 0:r.teaserTimer[0];n.isDarkMode=null==r?void 0:r.enableDarkMode,R(n)}}),[]),n.useEffect((()=>{V($()),W.getTime()>=A.getTime()&&!j&&H(!0);const n=setInterval((()=>{V($())}),1e3);return()=>{clearInterval(n)}}),[j]),n.createElement(n.Fragment,null,!1===z&&(void 0===(null===(s=null==r?void 0:r.teaserTimer[0])||void 0===s?void 0:s.startTime)&&null===O||void 0!==(null===(c=null==r?void 0:r.teaserTimer[0])||void 0===c?void 0:c.startTime)&&null!==O)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Wrapper",style:{background:null==r?void 0:r.backgroundColor}},n.createElement("div",{className:J},n.createElement("div",{className:"ribbonComponent_descriptionBlockSection"},(null===(p=null==r?void 0:r.icon)||void 0===p?void 0:p.filename)&&n.createElement("div",{className:"ribbonComponent_Image"},n.createElement("img",{className:"ribbonComponent_Icon",src:(null==r?void 0:r.enableDarkMode)?null===(b=null==r?void 0:r.darkModeIcon)||void 0===b?void 0:b.filename:null===(u=null==r?void 0:r.icon)||void 0===u?void 0:u.filename})),(null==r?void 0:r.description)&&n.createElement("div",{className:F},n.createElement(t,{content:null==r?void 0:r.description}),n.createElement("div",null))),n.createElement("div",{className:"ribbonComponent_ButtonSection"},(null===(g=null==r?void 0:r.teaserTimer[0])||void 0===g?void 0:g.startTime)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Timer"},n.createElement(m,{content:D})),(null==r?void 0:r.buttonText)||(null==r?void 0:r.hotlineNumber)?n.createElement("div",{className:"ribbonComponent_HrBreaker"}):n.createElement("div",{className:"ribbonComponent_OnlyTimer"})),((null==r?void 0:r.buttonText)&&(null===(v=null==r?void 0:r.link)||void 0===v?void 0:v.url)||(null==r?void 0:r.hotlineNumber)&&(null===(x=null==r?void 0:r.buttonIcon)||void 0===x?void 0:x.filename))&&n.createElement("div",{className:"ribbonComponent_Button"},n.createElement("a",{href:(null==r?void 0:r.hotlineNumber)?`tel:${(null==r?void 0:r.hotlineNumber)||0}`:null===(f=null==r?void 0:r.link)||void 0===f?void 0:f.url,target:null!==(h=null==r?void 0:r.target)&&void 0!==h?h:"",rel:"_blank"===(null==r?void 0:r.target)?"opener":"noopener"},n.createElement("div",{className:o(null==r?void 0:r.buttonType)},(null==r?void 0:r.hotlineNumber)&&"left"===(null==r?void 0:r.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(T=null==r?void 0:r.buttonIcon)||void 0===T?void 0:T.filename}),(null==r?void 0:r.hotlineNumber)?null==r?void 0:r.hotlineNumber:null==r?void 0:r.buttonText,(null==r?void 0:r.hotlineNumber)&&"right"===(null==r?void 0:r.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(y=null==r?void 0:r.buttonIcon)||void 0===y?void 0:y.filename})))),(null===(w=null==r?void 0:r.closeIcon)||void 0===w?void 0:w.filename)&&(null==r?void 0:r.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon",onClick:()=>U()},n.createElement("img",{src:(null==r?void 0:r.enableDarkMode)?null!==(k=null===(B=null==r?void 0:r.darkModeCloseIcon)||void 0===B?void 0:B.filename)&&void 0!==k?k:null===(C=null==r?void 0:r.closeIcon)||void 0===C?void 0:C.filename:null===(P=null==r?void 0:r.closeIcon)||void 0===P?void 0:P.filename}))),(null===(S=null==r?void 0:r.closeIcon)||void 0===S?void 0:S.filename)&&(null==r?void 0:r.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon1",onClick:()=>U()},n.createElement("img",{src:(null==r?void 0:r.enableDarkMode)?null!==(_=null===(E=null==r?void 0:r.darkModeCloseIcon)||void 0===E?void 0:E.filename)&&void 0!==_?_:null===(N=null==r?void 0:r.closeIcon)||void 0===N?void 0:N.filename:null===(L=null==r?void 0:r.closeIcon)||void 0===L?void 0:L.filename}))))))},exports.StageTeaserComponent=({content:r})=>n.createElement(n.Fragment,null,"single"===(null==r?void 0:r.layoutgrid)?n.createElement(b,{content:{content:r}}):n.createElement(p,{content:r}));
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import "./DoubleGridComponent.css";
|
|
3
|
+
import "./PromoBubble.css";
|
|
4
|
+
import "./PromoBubbleBottomRight.css";
|
|
5
|
+
import "./PromoBubbleBottomLeft.css";
|
|
6
|
+
import "./PromoBubbleTopLeft.css";
|
|
7
|
+
import "./PromoBubbleTopRight.css";
|
|
8
|
+
import "../../../styles/FalconColors.css";
|
|
9
|
+
declare const DoubleGridComponent: FC<any>;
|
|
10
|
+
export default DoubleGridComponent;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./StageTeaserComponent";
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default as RibbonComponent } from
|
|
1
|
+
export { default as RibbonComponent } from "./RibbonComponent";
|
|
2
|
+
export { default as StageTeaserComponent } from "./StageTeaserComponent";
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import n,{useState as e,useEffect as r}from"react";import{render as o}from"storyblok-rich-text-react-renderer-ts";function t(n,e){void 0===e&&(e={});var r=e.insertAt;if(n&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===r&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=n:t.appendChild(document.createTextNode(n))}}t(".ribbonComponent_Wrapper{\r\n width: 100%;\r\n}\r\n.ribbonComponent_Card {\r\n display: flex;\r\n align-items: center;\r\n padding:16px 0;\r\n}\r\n.ribbonComponent_DarkText{\r\n color: #ffffff !important;\r\n}\r\n.ribbonComponent_DarkDescription a {\r\ncolor: #ffffff;\r\n}\r\n.ribbonComponent_Image {\r\n margin-top: 5px;\r\n margin-right: 8px;\r\n}\r\n.ribbonComponent_Icon {\r\n height: 24px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_TextContainer {\r\n margin: 8px 0;\r\n font-size: 16px;\r\n line-height: 24px;\r\n}\r\n.ribbonComponent_Title {\r\n font-weight: 700;\r\n}\r\n.ribbonComponent_Description {\r\n font-weight: 400;\r\n}\r\n.ribbonComponent_CloseIcon {\r\n margin-right: 16px;\r\n}\r\n.ribbonComponent_HrBreaker {\r\n width: 1px;\r\n height: 32px;\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border-radius: 1px;\r\n opacity: 0.2;\r\n flex-shrink: 0;\r\n background: #3D3935;\r\n}\r\n.ribbonComponent_OnlyTimer{\r\n width:30px;\r\n}\r\n.ribbonComponent_Button{\r\n text-wrap:nowrap;\r\n}\r\n.falcon-button-defaults {\r\n border-radius: 28px;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-size: 16px;\r\n line-height: 24px;\r\n font-weight: 700;\r\n padding: 10px 24px;\r\n text-decoration: none;\r\n}\r\n.ribbonComponent_phoneIcon {\r\n background-size: contain;\r\n display: inline-flex;\r\n height: 24px;\r\n margin: 0 8px 0 10px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n}\r\n.ribbonComponent_descriptionBlockSection {\r\n display: flex;\r\n}\r\n/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .falcon-primary-button-v1-JC:visited {\r\n background-color: #e97f77;\r\n }\r\n .ribbonComponent_Card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 16px;\r\n margin-top: 16px;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n padding-bottom: 16px;\r\n padding-top: 8px;\r\n margin-left: 32px;\r\n }\r\n .ribbonComponent_descriptionBlockSection {\r\n padding-top:16px;\r\n padding-right: 78px;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_Timer{\r\n margin-left: 8px;\r\n padding-bottom: 8px;\r\n }\r\n .ribbonComponent_Button{\r\n margin-left: 8px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .ribbonComponent_HrBreaker {\r\n display: none;\r\n }\r\n .ribbonComponent_Button {\r\n padding-bottom: 16px;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n flex-direction: column;\r\n padding-right: 90px;\r\n padding-left:70px;\r\n margin: 6px 0 0 0;\r\n align-items: flex-end;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 8px 0;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 40px;\r\n padding-left: 16px;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin-left:40px;\r\n }\r\n}\r\n\r\n/* Desktop only viewport */\r\n@media (min-width: 1024px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n margin-left:0;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 0 16px;\r\n text-wrap:nowrap;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 42px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 60px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 42px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n display: none;\r\n }\r\n}\r\n@media (min-width: 1440px){\r\n .ribbonComponent_Card{\r\n max-width: 1440px;\r\n margin: auto;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 72px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 72px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 80px;\r\n }\r\n .ribbonComponent_OnlyTimer{\r\n width:60px;\r\n } \r\n}\r\n\r\n.falcon-primary-button-v1 > .falcon-button-defaults {\r\n background-color: #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1:hover {\r\n background-color: #961c13;\r\n}\r\n.falcon-primary-button-v1:visited {\r\n background-color: #c7355f;\r\n}\r\n.falcon-primary-button-v1:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-primary-button-v1-JC > .falcon-button-defaults {\r\n background-color: #ffffff;\r\n color: #da291c;\r\n}\r\n.falcon-primary-button-v1-JC:hover {\r\n background-color: #e97f77;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:visited {\r\n background-color: #961c13;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n.falcon-secondary-button-v1 > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v1:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v1:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v1-JC:hover {\r\n border-color: #f1571d;\r\n}\r\n.falcon-secondary-button-v1-JC:visited {\r\n border-color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n.falcon-secondary-button-v4 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding-left: 0;\r\n padding-right: 0;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v4:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v4-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v4-JC:hover {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4-JC:visited {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v5 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #3d3935;\r\n font-weight: 400;\r\n}\r\n.falcon-secondary-button-v5 > div {\r\n text-decoration-line: underline;\r\n}\r\n\r\n.falcon-secondary-button-dark > .falcon-button-defaults {\r\n background-color: transparent;\r\n color: #3d3935;\r\n border: 2px solid #3d3935;\r\n}\r\n.falcon-primary-dark-button {\r\n background: #5f5955;\r\n padding: 10px 24px;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n border-radius: 28px 0px 0px 28px;\r\n}\r\n.falcon-primary-dark-button:hover {\r\n background: #86807c;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n}\r\n.falcon-primary-dark-button:visited {\r\n background: #86807c;\r\n box-sizing: border-box;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n padding: 8px 22px;\r\n border: 2px solid #5f5955;\r\n}\r\n");const l=e=>n.createElement("div",null,o(e.content,{markResolvers:{link:(r,o)=>{const{href:t,target:l,linktype:i}=o;return"email"===i?n.createElement("a",{href:`mailto:${t}`,target:null===l||"_self"===l?"_top":"_blank"},r):e.isIFrame?n.createElement("a",{href:t,target:null===l||"_self"===l?"_top":"_blank"},r):n.createElement("a",{href:t,target:null===l?"":l,onClick:()=>{return n=r,void("function"==typeof(null==e?void 0:e.callBack)&&(null==e||e.callBack(n)));var n}},r)}}}));t("/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .timer-wrap {\r\n text-align: center !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n }\r\n .timer-container {\r\n min-width: 260px;\r\n }\r\n .timer-message {\r\n margin-bottom: 10px;\r\n }\r\n .timer-section {\r\n justify-content: center;\r\n margin-top: 4px;\r\n margin-left: unset !important;\r\n margin-right: unset !important;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .timer-message {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .timer-section {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n.timer-container {\r\n color: black;\r\n display: inline-block;\r\n max-width: 100%;\r\n min-width: 242px;\r\n /* padding-top: 10px; */\r\n}\r\n.colon {\r\n font-weight: 700;\r\n font-size: 28px;\r\n line-height: 36px;\r\n}\r\n\r\n.timer-section {\r\n display: flex;\r\n /* margin-top: 12px; */\r\n padding: 8px 0;\r\n}\r\n.timer-element {\r\n display: inline-block;\r\n min-width: 42px;\r\n padding: 0 6px;\r\n text-align: center;\r\n}\r\n.timer-value {\r\n font-weight: 700;\r\n font-size: 32px;\r\n line-height: 36px;\r\n}\r\n.timer-label {\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 16px;\r\n}\r\n.transparent-element:first-child {\r\n padding-left: 0;\r\n}\r\n");const i=n=>{switch(n){case"Primary-V1":return"falcon-primary-button-v1";case"Secondary-V1":return"falcon-secondary-button-v1";case"Secondary-V4":return"falcon-secondary-button-v4";case"Secondary-Dark":return"falcon-secondary-button-dark";case"Primary-Dark-V1":return"falcon-primary-dark-button";case"Secondary-V5":return"falcon-secondary-button-v5";default:return""}},a=n=>{let e=new Date(n);return e=((n,e,r,o,t,l,i)=>{const a=new Date(Date.UTC(e,r,o,t,l,i)),d=new Date(a.toLocaleString("en-US",{timeZone:"Europe/Vienna"})),c=new Date(a.toLocaleString("en-US",{timeZone:n})),m=d.getTime()-c.getTime();return a.setTime(a.getTime()+m),a})("Europe/Vienna",e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds()),e},d="center",c="left",m="transparent",s="00",b=({content:e})=>{var r;return n.createElement("div",{className:"container",style:{justifyContent:e.timerAlignment===d?"center":e.timerAlignment===c?"left":"right"}},n.createElement("div",{className:"timer-section",style:{color:e.timerColor,backgroundColor:e.backgroundColor,marginLeft:e.backgroundColor===m&&e.timerAlignment===c?"-9px":"unset",marginRight:e.backgroundColor===m&&"right"===e.timerAlignment?"-24px":"unset"}},n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s," "),n.createElement("div",{className:"timer-label"},e.dayLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s," "),n.createElement("div",{className:"timer-label"},e.hourLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s," "),n.createElement("div",{className:"timer-label"},e.minuteLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s),n.createElement("div",{className:"timer-label"},e.secondLabel))),n.createElement("div",{className:"timer-message",style:{color:null===(r=e.expiryLabelColor)||void 0===r?void 0:r.color}},e.expiryLabel))},u=({content:o})=>{var t,l,i,m,s,u,p,v;const f=a(new Date(null===(t=null==o?void 0:o.endTime)||void 0===t?void 0:t.replace(/-/g,"/"))),g=a(new Date(null===(l=null==o?void 0:o.startTime)||void 0===l?void 0:l.replace(/-/g,"/"))),x=(null==o?void 0:o.colorChangeTime)&&a(new Date(null===(i=null==o?void 0:o.colorChangeTime)||void 0===i?void 0:i.replace(/-/g,"/"))),[C,h]=e(!1),[y,k]=e(null!==(m=null==o?void 0:o.timerColor)&&void 0!==m?m:""),[_,E]=e(!1),w=()=>{const n=new Date;x&&!_&&n.getTime()>x.getTime()&&(k("#da291c"),E(!0)),n.getTime()>=g.getTime()&&!C&&h(!0);const e=f.getTime()-n.getTime();if(e>0&&C){return{days:("0"+Math.floor(e/864e5)).slice(-2),hours:("0"+Math.floor(e/36e5%24)).slice(-2),mins:("0"+Math.floor(e/1e3/60%60)).slice(-2),sec:("0"+Math.floor(e/1e3%60)).slice(-2)}}return null},N={timerColor:y,backgroundColor:null==o?void 0:o.backgroundColor,expiryLabel:o.expiryLabel,timerAlignment:o.timerAlignment,dayLabel:o.dayLabel,hourLabel:o.hourLabel,minuteLabel:o.minuteLabel,secondLabel:o.secondLabel,expiryLabelColor:o.expiryLabelColor},[T,I]=e(w());r((()=>{I(w());const n=setInterval((()=>{I(w())}),1e3);return()=>{clearInterval(n)}}),[]);const D=[{label:null!==(s=null==o?void 0:o.hourLabel)&&void 0!==s?s:"",value:null==T?void 0:T.hours},{label:null!==(u=null==o?void 0:o.minuteLabel)&&void 0!==u?u:"",value:null==T?void 0:T.mins},{label:null!==(p=null==o?void 0:o.secondLabel)&&void 0!==p?p:"",value:null==T?void 0:T.sec}];return n.createElement("div",{className:"timer-wrap",style:{textAlign:o.timerAlignment===d?"center":o.timerAlignment===c?"left":"right"}},C&&n.createElement("div",{className:"timer-container"},T?n.createElement("div",{className:"timer-section",style:{color:(null==o?void 0:o.isDarkMode)?"#ffffff":y,backgroundColor:null!==(v=null==o?void 0:o.backgroundColor)&&void 0!==v?v:"transparent"}},n.createElement("div",{className:" timer-element transparent-element"},n.createElement("div",{className:"timer-value"}," ",null==T?void 0:T.days),n.createElement("div",{className:"timer-label"},o.dayLabel)),D.map(((e,r)=>n.createElement(n.Fragment,{key:r},n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",e.value),n.createElement("div",{className:"timer-label"},e.label)))))):n.createElement(b,{content:N})))},p=({content:o})=>{var t,d,c,m,s,b,p,v,f,g,x,C,h,y,k,_,E,w,N,T,I,D,B,L,M,S;const[J,A]=e(!1),z=new Date,[V,F]=e(null==o?void 0:o.teaserTimer[0]),j=a(new Date(null===(d=null===(t=null==o?void 0:o.teaserTimer[0])||void 0===t?void 0:t.endTime)||void 0===d?void 0:d.replace(/-/g,"/"))),H=a(new Date(null===(m=null===(c=null==o?void 0:o.teaserTimer[0])||void 0===c?void 0:c.startTime)||void 0===m?void 0:m.replace(/-/g,"/"))),O=((null==o?void 0:o.enableDarkMode)?"ribbonComponent_DarkText ":"")+"ribbonComponent_Card",U=((null==o?void 0:o.enableDarkMode)?"ribbonComponent_DarkDescription ":"")+"ribbonComponent_TextContainer",[P,R]=e(!1),W=()=>{const n=j.getTime()-z.getTime();if(n>0&&P){return{days:("0"+Math.floor(n/864e5)).slice(-2),hours:("0"+Math.floor(n/36e5%24)).slice(-2),mins:("0"+Math.floor(n/1e3/60%60)).slice(-2),sec:("0"+Math.floor(n/1e3%60)).slice(-2)}}return null},[Z,$]=e(W()),Y=()=>{!1===J&&A(!0)};return r((()=>{var n;if(null===(n=null==o?void 0:o.teaserTimer[0])||void 0===n?void 0:n.startTime){const n=null==o?void 0:o.teaserTimer[0];n.isDarkMode=null==o?void 0:o.enableDarkMode,F(n)}}),[]),r((()=>{$(W()),z.getTime()>=H.getTime()&&!P&&R(!0);const n=setInterval((()=>{$(W())}),1e3);return()=>{clearInterval(n)}}),[P]),n.createElement(n.Fragment,null,!1===J&&(void 0===(null===(s=null==o?void 0:o.teaserTimer[0])||void 0===s?void 0:s.startTime)&&null===Z||void 0!==(null===(b=null==o?void 0:o.teaserTimer[0])||void 0===b?void 0:b.startTime)&&null!==Z)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Wrapper",style:{background:null==o?void 0:o.backgroundColor}},n.createElement("div",{className:O},n.createElement("div",{className:"ribbonComponent_descriptionBlockSection"},(null===(p=null==o?void 0:o.icon)||void 0===p?void 0:p.filename)&&n.createElement("div",{className:"ribbonComponent_Image"},n.createElement("img",{className:"ribbonComponent_Icon",src:(null==o?void 0:o.enableDarkMode)?null===(v=null==o?void 0:o.darkModeIcon)||void 0===v?void 0:v.filename:null===(f=null==o?void 0:o.icon)||void 0===f?void 0:f.filename})),(null==o?void 0:o.description)&&n.createElement("div",{className:U},n.createElement(l,{content:null==o?void 0:o.description}),n.createElement("div",null))),n.createElement("div",{className:"ribbonComponent_ButtonSection"},(null===(g=null==o?void 0:o.teaserTimer[0])||void 0===g?void 0:g.startTime)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Timer"},n.createElement(u,{content:V})),(null==o?void 0:o.buttonText)||(null==o?void 0:o.hotlineNumber)?n.createElement("div",{className:"ribbonComponent_HrBreaker"}):n.createElement("div",{className:"ribbonComponent_OnlyTimer"})),((null==o?void 0:o.buttonText)&&(null===(x=null==o?void 0:o.link)||void 0===x?void 0:x.url)||(null==o?void 0:o.hotlineNumber)&&(null===(C=null==o?void 0:o.buttonIcon)||void 0===C?void 0:C.filename))&&n.createElement("div",{className:"ribbonComponent_Button"},n.createElement("a",{href:(null==o?void 0:o.hotlineNumber)?`tel:${(null==o?void 0:o.hotlineNumber)||0}`:null===(h=null==o?void 0:o.link)||void 0===h?void 0:h.url,target:null!==(y=null==o?void 0:o.target)&&void 0!==y?y:"",rel:"_blank"===(null==o?void 0:o.target)?"opener":"noopener"},n.createElement("div",{className:i(null==o?void 0:o.buttonType)},(null==o?void 0:o.hotlineNumber)&&"left"===(null==o?void 0:o.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(k=null==o?void 0:o.buttonIcon)||void 0===k?void 0:k.filename}),(null==o?void 0:o.hotlineNumber)?null==o?void 0:o.hotlineNumber:null==o?void 0:o.buttonText,(null==o?void 0:o.hotlineNumber)&&"right"===(null==o?void 0:o.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(_=null==o?void 0:o.buttonIcon)||void 0===_?void 0:_.filename})))),(null===(E=null==o?void 0:o.closeIcon)||void 0===E?void 0:E.filename)&&(null==o?void 0:o.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon",onClick:()=>Y()},n.createElement("img",{src:(null==o?void 0:o.enableDarkMode)?null!==(N=null===(w=null==o?void 0:o.darkModeCloseIcon)||void 0===w?void 0:w.filename)&&void 0!==N?N:null===(T=null==o?void 0:o.closeIcon)||void 0===T?void 0:T.filename:null===(I=null==o?void 0:o.closeIcon)||void 0===I?void 0:I.filename}))),(null===(D=null==o?void 0:o.closeIcon)||void 0===D?void 0:D.filename)&&(null==o?void 0:o.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon1",onClick:()=>Y()},n.createElement("img",{src:(null==o?void 0:o.enableDarkMode)?null!==(L=null===(B=null==o?void 0:o.darkModeCloseIcon)||void 0===B?void 0:B.filename)&&void 0!==L?L:null===(M=null==o?void 0:o.closeIcon)||void 0===M?void 0:M.filename:null===(S=null==o?void 0:o.closeIcon)||void 0===S?void 0:S.filename}))))))};export{p as RibbonComponent};
|
|
1
|
+
import n,{useState as r,useEffect as e}from"react";import{render as t}from"storyblok-rich-text-react-renderer-ts";function o(n,r){void 0===r&&(r={});var e=r.insertAt;if(n&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n))}}o(".ribbonComponent_Wrapper{\r\n width: 100%;\r\n}\r\n.ribbonComponent_Card {\r\n display: flex;\r\n align-items: center;\r\n padding:16px 0;\r\n}\r\n.ribbonComponent_DarkText{\r\n color: #ffffff !important;\r\n}\r\n.ribbonComponent_DarkDescription a {\r\ncolor: #ffffff;\r\n}\r\n.ribbonComponent_Image {\r\n margin-top: 5px;\r\n margin-right: 8px;\r\n}\r\n.ribbonComponent_Icon {\r\n height: 24px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_TextContainer {\r\n margin: 8px 0;\r\n font-size: 16px;\r\n line-height: 24px;\r\n}\r\n.ribbonComponent_Title {\r\n font-weight: 700;\r\n}\r\n.ribbonComponent_Description {\r\n font-weight: 400;\r\n}\r\n.ribbonComponent_CloseIcon {\r\n margin-right: 16px;\r\n}\r\n.ribbonComponent_HrBreaker {\r\n width: 1px;\r\n height: 32px;\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border-radius: 1px;\r\n opacity: 0.2;\r\n flex-shrink: 0;\r\n background: #3D3935;\r\n}\r\n.ribbonComponent_OnlyTimer{\r\n width:30px;\r\n}\r\n.ribbonComponent_Button{\r\n text-wrap:nowrap;\r\n}\r\n.falcon-button-defaults {\r\n border-radius: 28px;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-size: 16px;\r\n line-height: 24px;\r\n font-weight: 700;\r\n padding: 10px 24px;\r\n text-decoration: none;\r\n}\r\n.ribbonComponent_phoneIcon {\r\n background-size: contain;\r\n display: inline-flex;\r\n height: 24px;\r\n margin: 0 8px 0 10px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n}\r\n.ribbonComponent_descriptionBlockSection {\r\n display: flex;\r\n}\r\n/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .falcon-primary-button-v1-JC:visited {\r\n background-color: #e97f77;\r\n }\r\n .ribbonComponent_Card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 16px;\r\n margin-top: 16px;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n padding-bottom: 16px;\r\n padding-top: 8px;\r\n margin-left: 32px;\r\n }\r\n .ribbonComponent_descriptionBlockSection {\r\n padding-top:16px;\r\n padding-right: 78px;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_Timer{\r\n margin-left: 8px;\r\n padding-bottom: 8px;\r\n }\r\n .ribbonComponent_Button{\r\n margin-left: 8px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .ribbonComponent_HrBreaker {\r\n display: none;\r\n }\r\n .ribbonComponent_Button {\r\n padding-bottom: 16px;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n flex-direction: column;\r\n padding-right: 90px;\r\n padding-left:70px;\r\n margin: 6px 0 0 0;\r\n align-items: flex-end;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 8px 0;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 40px;\r\n padding-left: 16px;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin-left:40px;\r\n }\r\n}\r\n\r\n/* Desktop only viewport */\r\n@media (min-width: 1024px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n margin-left:0;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 0 16px;\r\n text-wrap:nowrap;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 42px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 60px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 42px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n display: none;\r\n }\r\n}\r\n@media (min-width: 1440px){\r\n .ribbonComponent_Card{\r\n max-width: 1440px;\r\n margin: auto;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 72px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 72px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 80px;\r\n }\r\n .ribbonComponent_OnlyTimer{\r\n width:60px;\r\n } \r\n}\r\n\r\n.falcon-primary-button-v1 > .falcon-button-defaults {\r\n background-color: #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1:hover {\r\n background-color: #961c13;\r\n}\r\n.falcon-primary-button-v1:visited {\r\n background-color: #c7355f;\r\n}\r\n.falcon-primary-button-v1:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-primary-button-v1-JC > .falcon-button-defaults {\r\n background-color: #ffffff;\r\n color: #da291c;\r\n}\r\n.falcon-primary-button-v1-JC:hover {\r\n background-color: #e97f77;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:visited {\r\n background-color: #961c13;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n.falcon-secondary-button-v1 > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v1:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v1:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v1-JC:hover {\r\n border-color: #f1571d;\r\n}\r\n.falcon-secondary-button-v1-JC:visited {\r\n border-color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n.falcon-secondary-button-v4 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding-left: 0;\r\n padding-right: 0;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v4:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v4-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v4-JC:hover {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4-JC:visited {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v5 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #3d3935;\r\n font-weight: 400;\r\n}\r\n.falcon-secondary-button-v5 > div {\r\n text-decoration-line: underline;\r\n}\r\n\r\n.falcon-secondary-button-dark > .falcon-button-defaults {\r\n background-color: transparent;\r\n color: #3d3935;\r\n border: 2px solid #3d3935;\r\n}\r\n.falcon-primary-dark-button {\r\n background: #5f5955;\r\n padding: 10px 24px;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n border-radius: 28px 0px 0px 28px;\r\n}\r\n.falcon-primary-dark-button:hover {\r\n background: #86807c;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n}\r\n.falcon-primary-dark-button:visited {\r\n background: #86807c;\r\n box-sizing: border-box;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n padding: 8px 22px;\r\n border: 2px solid #5f5955;\r\n}\r\n");const a=r=>n.createElement("div",null,t(r.content,{markResolvers:{link:(e,t)=>{const{href:o,target:a,linktype:i}=t;return"email"===i?n.createElement("a",{href:`mailto:${o}`,target:null===a||"_self"===a?"_top":"_blank"},e):r.isIFrame?n.createElement("a",{href:o,target:null===a||"_self"===a?"_top":"_blank"},e):n.createElement("a",{href:o,target:null===a?"":a,onClick:()=>{return n=e,void("function"==typeof(null==r?void 0:r.callBack)&&(null==r||r.callBack(n)));var n}},e)}}}));o("/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .timer-wrap {\r\n text-align: center !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n }\r\n .timer-container {\r\n min-width: 260px;\r\n }\r\n .timer-message {\r\n margin-bottom: 10px;\r\n }\r\n .timer-section {\r\n justify-content: center;\r\n margin-top: 4px;\r\n margin-left: unset !important;\r\n margin-right: unset !important;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .timer-message {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .timer-section {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n.timer-container {\r\n color: black;\r\n display: inline-block;\r\n max-width: 100%;\r\n min-width: 242px;\r\n /* padding-top: 10px; */\r\n}\r\n.colon {\r\n font-weight: 700;\r\n font-size: 28px;\r\n line-height: 36px;\r\n}\r\n\r\n.timer-section {\r\n display: flex;\r\n /* margin-top: 12px; */\r\n padding: 8px 0;\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n}\r\n.timer-element {\r\n display: inline-block;\r\n min-width: 42px;\r\n padding: 0 6px;\r\n text-align: center;\r\n}\r\n.timer-value {\r\n font-weight: 700;\r\n font-size: 32px;\r\n line-height: 36px;\r\n}\r\n.timer-label {\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 16px;\r\n}\r\n.transparent-element:first-child {\r\n padding-left: 0;\r\n}\r\n");const i=n=>{switch(n){case"Primary-V1":return"falcon-primary-button-v1";case"Secondary-V1":return"falcon-secondary-button-v1";case"Secondary-V4":return"falcon-secondary-button-v4";case"Secondary-Dark":return"falcon-secondary-button-dark";case"Primary-Dark-V1":return"falcon-primary-dark-button";case"Secondary-V5":return"falcon-secondary-button-v5";default:return""}},l=n=>{let r=new Date(n);return r=((n,r,e,t,o,a,i)=>{const l=new Date(Date.UTC(r,e,t,o,a,i)),d=new Date(l.toLocaleString("en-US",{timeZone:"Europe/Vienna"})),s=new Date(l.toLocaleString("en-US",{timeZone:n})),c=d.getTime()-s.getTime();return l.setTime(l.getTime()+c),l})("Europe/Vienna",r.getFullYear(),r.getMonth(),r.getDate(),r.getHours(),r.getMinutes(),r.getSeconds()),r},d="center",s="left",c="transparent",m="00",p=({content:r})=>{var e;return n.createElement("div",{className:"container",style:{justifyContent:r.timerAlignment===d?"center":r.timerAlignment===s?"left":"right"}},n.createElement("div",{className:"timer-section",style:{color:r.timerColor,backgroundColor:r.backgroundColor,marginLeft:r.backgroundColor===c&&r.timerAlignment===s?"-9px":"unset",marginRight:r.backgroundColor===c&&"right"===r.timerAlignment?"-24px":"unset"}},n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",m," "),n.createElement("div",{className:"timer-label"},r.dayLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",m," "),n.createElement("div",{className:"timer-label"},r.hourLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",m," "),n.createElement("div",{className:"timer-label"},r.minuteLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",m),n.createElement("div",{className:"timer-label"},r.secondLabel))),n.createElement("div",{className:"timer-message",style:{color:null===(e=r.expiryLabelColor)||void 0===e?void 0:e.color}},r.expiryLabel))},b=({content:t})=>{var o,a,i,c,m,b,g,u;const v=l(new Date(null===(o=null==t?void 0:t.endTime)||void 0===o?void 0:o.replace(/-/g,"/"))),x=l(new Date(null===(a=null==t?void 0:t.startTime)||void 0===a?void 0:a.replace(/-/g,"/"))),f=(null==t?void 0:t.colorChangeTime)&&l(new Date(null===(i=null==t?void 0:t.colorChangeTime)||void 0===i?void 0:i.replace(/-/g,"/"))),[h,T]=r(!1),[y,w]=r(null!==(c=null==t?void 0:t.timerColor)&&void 0!==c?c:""),[B,k]=r(!1),C=()=>{const n=new Date;f&&!B&&n.getTime()>f.getTime()&&(w("#da291c"),k(!0)),n.getTime()>=x.getTime()&&!h&&T(!0);const r=v.getTime()-n.getTime();if(r>0&&h){return{days:("0"+Math.floor(r/864e5)).slice(-2),hours:("0"+Math.floor(r/36e5%24)).slice(-2),mins:("0"+Math.floor(r/1e3/60%60)).slice(-2),sec:("0"+Math.floor(r/1e3%60)).slice(-2)}}return null},P={timerColor:y,backgroundColor:null==t?void 0:t.backgroundColor,expiryLabel:t.expiryLabel,timerAlignment:t.timerAlignment,dayLabel:t.dayLabel,hourLabel:t.hourLabel,minuteLabel:t.minuteLabel,secondLabel:t.secondLabel,expiryLabelColor:t.expiryLabelColor},[S,E]=r(C());e((()=>{E(C());const n=setInterval((()=>{E(C())}),1e3);return()=>{clearInterval(n)}}),[]);const _=[{label:null!==(m=null==t?void 0:t.hourLabel)&&void 0!==m?m:"",value:null==S?void 0:S.hours},{label:null!==(b=null==t?void 0:t.minuteLabel)&&void 0!==b?b:"",value:null==S?void 0:S.mins},{label:null!==(g=null==t?void 0:t.secondLabel)&&void 0!==g?g:"",value:null==S?void 0:S.sec}];return n.createElement("div",{className:"timer-wrap",style:{textAlign:t.timerAlignment===d?"center":t.timerAlignment===s?"left":"right"}},h&&n.createElement("div",{className:"timer-container"},S?n.createElement("div",{className:"timer-section",style:{color:(null==t?void 0:t.isDarkMode)?"#ffffff":y,backgroundColor:null!==(u=null==t?void 0:t.backgroundColor)&&void 0!==u?u:"transparent"}},n.createElement("div",{className:" timer-element transparent-element"},n.createElement("div",{className:"timer-value"}," ",null==S?void 0:S.days),n.createElement("div",{className:"timer-label"},t.dayLabel)),_.map(((r,e)=>n.createElement(n.Fragment,{key:e},n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",r.value),n.createElement("div",{className:"timer-label"},r.label)))))):n.createElement(p,{content:P})))},g=({content:t})=>{var o,d,s,c,m,p,g,u,v,x,f,h,T,y,w,B,k,C,P,S,E,_,N,L,z,I;const[W,D]=r(!1),R=new Date,[M,A]=r(null==t?void 0:t.teaserTimer[0]),J=l(new Date(null===(d=null===(o=null==t?void 0:t.teaserTimer[0])||void 0===o?void 0:o.endTime)||void 0===d?void 0:d.replace(/-/g,"/"))),F=l(new Date(null===(c=null===(s=null==t?void 0:t.teaserTimer[0])||void 0===s?void 0:s.startTime)||void 0===c?void 0:c.replace(/-/g,"/"))),j=((null==t?void 0:t.enableDarkMode)?"ribbonComponent_DarkText ":"")+"ribbonComponent_Card",H=((null==t?void 0:t.enableDarkMode)?"ribbonComponent_DarkDescription ":"")+"ribbonComponent_TextContainer",[$,O]=r(!1),V=()=>{const n=J.getTime()-R.getTime();if(n>0&&$){return{days:("0"+Math.floor(n/864e5)).slice(-2),hours:("0"+Math.floor(n/36e5%24)).slice(-2),mins:("0"+Math.floor(n/1e3/60%60)).slice(-2),sec:("0"+Math.floor(n/1e3%60)).slice(-2)}}return null},[U,G]=r(V()),Z=()=>{!1===W&&D(!0)};return e((()=>{var n;if(null===(n=null==t?void 0:t.teaserTimer[0])||void 0===n?void 0:n.startTime){const n=null==t?void 0:t.teaserTimer[0];n.isDarkMode=null==t?void 0:t.enableDarkMode,A(n)}}),[]),e((()=>{G(V()),R.getTime()>=F.getTime()&&!$&&O(!0);const n=setInterval((()=>{G(V())}),1e3);return()=>{clearInterval(n)}}),[$]),n.createElement(n.Fragment,null,!1===W&&(void 0===(null===(m=null==t?void 0:t.teaserTimer[0])||void 0===m?void 0:m.startTime)&&null===U||void 0!==(null===(p=null==t?void 0:t.teaserTimer[0])||void 0===p?void 0:p.startTime)&&null!==U)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Wrapper",style:{background:null==t?void 0:t.backgroundColor}},n.createElement("div",{className:j},n.createElement("div",{className:"ribbonComponent_descriptionBlockSection"},(null===(g=null==t?void 0:t.icon)||void 0===g?void 0:g.filename)&&n.createElement("div",{className:"ribbonComponent_Image"},n.createElement("img",{className:"ribbonComponent_Icon",src:(null==t?void 0:t.enableDarkMode)?null===(u=null==t?void 0:t.darkModeIcon)||void 0===u?void 0:u.filename:null===(v=null==t?void 0:t.icon)||void 0===v?void 0:v.filename})),(null==t?void 0:t.description)&&n.createElement("div",{className:H},n.createElement(a,{content:null==t?void 0:t.description}),n.createElement("div",null))),n.createElement("div",{className:"ribbonComponent_ButtonSection"},(null===(x=null==t?void 0:t.teaserTimer[0])||void 0===x?void 0:x.startTime)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Timer"},n.createElement(b,{content:M})),(null==t?void 0:t.buttonText)||(null==t?void 0:t.hotlineNumber)?n.createElement("div",{className:"ribbonComponent_HrBreaker"}):n.createElement("div",{className:"ribbonComponent_OnlyTimer"})),((null==t?void 0:t.buttonText)&&(null===(f=null==t?void 0:t.link)||void 0===f?void 0:f.url)||(null==t?void 0:t.hotlineNumber)&&(null===(h=null==t?void 0:t.buttonIcon)||void 0===h?void 0:h.filename))&&n.createElement("div",{className:"ribbonComponent_Button"},n.createElement("a",{href:(null==t?void 0:t.hotlineNumber)?`tel:${(null==t?void 0:t.hotlineNumber)||0}`:null===(T=null==t?void 0:t.link)||void 0===T?void 0:T.url,target:null!==(y=null==t?void 0:t.target)&&void 0!==y?y:"",rel:"_blank"===(null==t?void 0:t.target)?"opener":"noopener"},n.createElement("div",{className:i(null==t?void 0:t.buttonType)},(null==t?void 0:t.hotlineNumber)&&"left"===(null==t?void 0:t.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(w=null==t?void 0:t.buttonIcon)||void 0===w?void 0:w.filename}),(null==t?void 0:t.hotlineNumber)?null==t?void 0:t.hotlineNumber:null==t?void 0:t.buttonText,(null==t?void 0:t.hotlineNumber)&&"right"===(null==t?void 0:t.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(B=null==t?void 0:t.buttonIcon)||void 0===B?void 0:B.filename})))),(null===(k=null==t?void 0:t.closeIcon)||void 0===k?void 0:k.filename)&&(null==t?void 0:t.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon",onClick:()=>Z()},n.createElement("img",{src:(null==t?void 0:t.enableDarkMode)?null!==(P=null===(C=null==t?void 0:t.darkModeCloseIcon)||void 0===C?void 0:C.filename)&&void 0!==P?P:null===(S=null==t?void 0:t.closeIcon)||void 0===S?void 0:S.filename:null===(E=null==t?void 0:t.closeIcon)||void 0===E?void 0:E.filename}))),(null===(_=null==t?void 0:t.closeIcon)||void 0===_?void 0:_.filename)&&(null==t?void 0:t.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon1",onClick:()=>Z()},n.createElement("img",{src:(null==t?void 0:t.enableDarkMode)?null!==(L=null===(N=null==t?void 0:t.darkModeCloseIcon)||void 0===N?void 0:N.filename)&&void 0!==L?L:null===(z=null==t?void 0:t.closeIcon)||void 0===z?void 0:z.filename:null===(I=null==t?void 0:t.closeIcon)||void 0===I?void 0:I.filename}))))))};o("video {\r\n object-fit: cover;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n width: 100%;\r\n border-top-right-radius: 8px;\r\n border-bottom-right-radius: 8px;\r\n}\r\n.video-wrapper {\r\n overflow: hidden;\r\n text-align: center;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n .stageTeaserContainer {\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border-radius: 8px;\r\n flex-direction: row;\r\n width: calc(100% - 10px);\r\n }\r\n .stageTeaserRightWrapper {\r\n position: relative;\r\n }\r\n .stageTeaserMainText {\r\n font-size: 48px;\r\n line-height: 60px;\r\n font-weight: 500;\r\n text-transform: uppercase;\r\n }\r\n .stageTeaserSecondaryPromoText {\r\n font-size: 14px;\r\n line-height: 16px;\r\n font-weight: 500;\r\n }\r\n .stageTeaserSecondaryPromoPercent {\r\n font-size: 34px;\r\n line-height: 38px;\r\n font-weight: 700;\r\n }\r\n .stageTeaserPromoText {\r\n font-size: 18px;\r\n line-height: 20px;\r\n font-weight: 500;\r\n }\r\n .stageTeaserLeftWrapperBackground {\r\n background: var(--primary-colour-pale-dawn-grey-200, #e6e3df);\r\n }\r\n .stageTeaserBannerWrapper .react-multi-carousel-list {\r\n position: initial;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow {\r\n background: #ffffff;\r\n box-shadow: 0px 4px 12px rgba(87, 84, 82, 0.2);\r\n border-radius: 24px;\r\n font-size: 16px;\r\n height: 44px;\r\n width: 44px;\r\n padding: 10px;\r\n z-index: 1;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow::before {\r\n color: #da291c;\r\n font-size: 16px;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow:disabled::before {\r\n color: #b3aeaa;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--right {\r\n right: 3%;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--left {\r\n left: 3%;\r\n }\r\n /* dots */\r\n .stageTeaserBannerWrapper .react-multi-carousel-dot button {\r\n background: #ffffff;\r\n opacity: 0.3;\r\n border: 0px;\r\n transition: none;\r\n }\r\n .stageTeaserBannerWrapper .react-multi-carousel-dot--active button {\r\n background: #da291c;\r\n opacity: 1;\r\n }\r\n .stageTeaserBannerWrapper .react-multi-carousel-dot button:hover:active {\r\n background: #da291c;\r\n }\r\n @media (max-width: 768px) {\r\n .stageTeaserContainer {\r\n flex-direction: column;\r\n }\r\n .stageTeaserMainText {\r\n font-size: 32px;\r\n line-height: 40px;\r\n font-weight: 500;\r\n }\r\n \r\n .stageTeaserPromoPercent {\r\n font-size: 36px;\r\n line-height: 32px;\r\n font-weight: 700;\r\n }\r\n .stageTeaserPromoText {\r\n font-size: 14px;\r\n line-height: 16px;\r\n font-weight: 500;\r\n }\r\n }\r\n @media only screen and (min-width: 376px) and (max-width: 768px) {\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--right {\r\n right: 4%;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--left {\r\n left: 4%;\r\n }\r\n }\r\n @media (min-width: 1025px) {\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--right {\r\n right: 5%;\r\n }\r\n .stageTeaserBannerWrapper .react-multiple-carousel__arrow--left {\r\n left: 5%;\r\n }\r\n }\r\n \r\n \r\n .teaserTimer {\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n }\r\n \r\n /*Tablet md & All small devices*/\r\n @media only screen and (max-width : 768px) {\r\n video {\r\n border-top-right-radius: 0px;\r\n border-bottom-right-radius: 8px;\r\n border-bottom-left-radius: 8px;\r\n }\r\n .stageTeaserRightWrapper {\r\n height: 400px;\r\n }\r\n .stageTeaserLeftWrapper {\r\n padding: 24px;\r\n text-align: center;\r\n }\r\n .stageTeaserSecondaryPromoPercent {\r\n font-size:28px;\r\n }\r\n }\r\n \r\n \r\n /*Tablet - lg*/\r\n @media only screen and (min-width : 769px) and (max-width : 1024px) {\r\n .stageTeaserRightWrapper {\r\n width: 100%;\r\n }\r\n .promoImage{\r\n padding-right: 51px;\r\n padding-top: 114px;\r\n }\r\n .stageTeaserLeftWrapper {\r\n padding: 55px;\r\n }\r\n }\r\n @media (width : 1024px) {\r\n .stageTeaserRightWrapper {\r\n width: 50%;\r\n }\r\n }\r\n /*Desktop, Laptop & Large Desktops*/\r\n @media only screen and (min-width : 1025px) {\r\n .stageTeaserLeftWrapper {\r\n padding: 120px;\r\n }\r\n }\r\n \r\n \r\n /*Extra Large Screens*/\r\n @media only screen and (min-width : 2000px) {\r\n .stageTeaserLeftWrapper {\r\n padding: 320px;\r\n }\r\n }\r\n \r\n \r\n #inboxCount{\r\n position: absolute; \r\n top: 0;\r\n right:0;\r\n }");o(".stageTeaserPromoBubble {\r\n display: flex;\r\n text-align: center;\r\n padding: 0px 16px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 4px;\r\n flex-shrink: 0;\r\n border-radius: 50%;\r\n position: absolute;\r\n}\r\n\r\n.stageTeaserPrimaryPromoBubble {\r\n width: 160px;\r\n height: 160px;\r\n background: var(--primary-colour-ice-white, #ffffff);\r\n z-index: 1;\r\n}\r\n\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPrimaryPromoBubble {\r\n background: var(--primary-colour-ice-white, #ffffff);\r\n z-index: 1;\r\n}\r\n\r\n.stageTeaserSecondaryPromoBubble {\r\n width: 120px;\r\n height: 120px;\r\n top: 171px;\r\n color: #ffffff;\r\n background: var(--primary-colour-grey-dusk-grey-600, #3d3935);\r\n}\r\n\r\n.stageTeaserPromoPercent,\r\n.stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoPercent {\r\n font-size: 52px;\r\n line-height: 52px;\r\n font-weight: 700;\r\n}\r\n\r\n/*Tablet md & All small devices*/\r\n@media only screen and (max-width: 768px) {\r\n /* primary bubble size*/\r\n .stageTeaserPrimaryPromoBubble {\r\n width: 120px;\r\n height: 120px;\r\n }\r\n \r\n .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoText {\r\n font-size: 18px;\r\n line-height: 20px;\r\n font-weight: 500;\r\n }\r\n .stageTeaserPromoPercent,\r\n .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoPercent {\r\n font-size: 24px;\r\n line-height: 32px;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoText {\r\n font-size: 10px;\r\n line-height: 14px;\r\n }\r\n /* primary with secondary size*/\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPrimaryPromoBubble {\r\n width: 96px;\r\n height: 96px;\r\n }\r\n\r\n /* secondary bubble size*/\r\n .stageTeaserSecondaryPromoBubble {\r\n width: 72px;\r\n height: 72px;\r\n }\r\n\r\n .stageTeaserSecondaryPromoPercent {\r\n font-size: 21px;\r\n line-height: 24px;\r\n }\r\n\r\n .stageTeaserSecondaryPromoText {\r\n font-size: 12px;\r\n line-height: 12px;\r\n }\r\n}\r\n\r\n/*Tablet - lg*/\r\n@media only screen and (min-width: 768px) and (max-width: 1024px) {\r\n /* primary with secondary size*/\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPrimaryPromoBubble {\r\n width: 120px;\r\n height: 120px;\r\n }\r\n .stageTeaserPromoPercent,\r\n .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoPercent {\r\n font-size: 42px;\r\n }\r\n .stageTeaserSecondaryPromoBubble {\r\n width: 84px;\r\n height: 84px;\r\n }\r\n .stageTeaserSecondaryPromoPercent{\r\n font-size: 26px;\r\n }\r\n}\r\n\r\n/*Extra Large Screens*/\r\n@media only screen and (min-width: 2000px) {\r\n /* primary with secondary size*/\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPrimaryPromoBubble {\r\n width: 360px;\r\n height: 360px;\r\n }\r\n /* secondary bubble size*/\r\n .stageTeaserSecondaryPromoBubble {\r\n width: 160px;\r\n height: 160px;\r\n top: 171px;\r\n }\r\n \r\n}\r\n");o("/* primary bubble */\r\n.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 40px;\r\n}\r\n.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n bottom: 40px;\r\n}\r\n\r\n/* primary with secondary */\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 86px;\r\n left: initial;\r\n}\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n bottom: 131px;\r\n}\r\n/* secondary bubble */\r\n.stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n right: 40px;\r\n left: initial;\r\n}\r\n.stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n bottom: 40px;\r\n top: initial;\r\n}\r\n\r\n/*Very small devices - phones*/\r\n@media screen and (max-width : 652px) {\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n right: 46px;\r\n left: initial;\r\n bottom: 48px;\r\n top: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 6px;\r\n left: initial;\r\n bottom: 102px;\r\n }\r\n}\r\n\r\n/*All small devices - phones*/\r\n@media screen and (min-width : 652px) and (max-width : 768px) {\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n right: 192px;\r\n left: initial;\r\n bottom: 48px;\r\n top: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 128px;\r\n left: initial;\r\n bottom: 102px;\r\n }\r\n}\r\n\r\n/*Tablet - md*/\r\n@media only screen and (min-width : 769px) and (max-width : 990px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 48px;\r\n left: initial;\r\n bottom: 128px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n right: 22px;\r\n left: initial;\r\n bottom: 60px;\r\n top: initial;\r\n }\r\n}\r\n\r\n/*Tablet - lg*/\r\n@media only screen and (min-width : 990px) and (max-width : 1024px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {\r\n right: 48px;\r\n left: initial;\r\n bottom: 128px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {\r\n right: 22px;\r\n left: initial;\r\n bottom: 60px;\r\n top: initial;\r\n }\r\n}\r\n\r\n/*Desktop, Laptop & Large Desktops*/\r\n@media only screen and (min-width : 1025px) {\r\n}\r\n\r\n/*Extra Large Screens*/\r\n@media only screen and (min-width : 2000px) {\r\n}");o("/* primary bubble */\r\n.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n left: 40px;\r\n }\r\n .stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n bottom: 40px;\r\n }\r\n \r\n /* primary with secondary */\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n left: 86px;\r\n right: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n bottom: 131px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {\r\n left: 40px;\r\n right: initial;\r\n }\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {\r\n bottom: 40px;\r\n top: initial;\r\n }\r\n \r\n \r\n /*All small devices - phones*/\r\n @media screen and (max-width : 768px) {\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {\r\n left: 58px;\r\n right: initial;\r\n bottom: 48px;\r\n top: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n left: 8px;\r\n right: initial;\r\n bottom: 102px;\r\n }\r\n }\r\n \r\n /*Tablet - md*/\r\n @media only screen and (min-width : 769px) and (max-width : 990px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n left: 48px;\r\n right: initial;\r\n bottom: 128px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {\r\n left: 22px;\r\n right: initial;\r\n bottom: 60px;\r\n top: initial;\r\n }\r\n }\r\n \r\n /*Tablet - lg*/\r\n @media only screen and (min-width : 990px) and (max-width : 1024px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {\r\n left: 48px;\r\n right: initial;\r\n bottom: 128px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {\r\n left: 22px;\r\n right: initial;\r\n bottom: 60px;\r\n top: initial;\r\n }\r\n }\r\n \r\n /*Desktop, Laptop & Large Desktops*/\r\n @media only screen and (min-width : 1025px) {\r\n }\r\n \r\n /*Extra Large Screens*/\r\n @media only screen and (min-width : 2000px) {\r\n }");o("/* primary bubble */\r\n.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 40px;\r\n}\r\n.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n top: 40px;\r\n}\r\n\r\n@media screen and (max-width : 568px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: 38px;\r\n right: initial;\r\n top: 68px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 2px;\r\n right: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n@media screen and (min-width : 568px) and (max-width : 768px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: 112px;\r\n right: initial;\r\n top: 68px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 61px;\r\n right: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n@media screen and (width : 768px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: 132px;\r\n right: initial;\r\n top: 84px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 61px;\r\n right: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n\r\n/*All small devices - phones*/\r\n\r\n/*Tablet - md*/\r\n@media only screen and (min-width : 769px) and (max-width : 990px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 0px;\r\n right: initial;\r\n top: 18px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: -33px;\r\n right: initial;\r\n top: 111px;\r\n bottom: initial;\r\n }\r\n}\r\n\r\n/*Tablet - lg*/\r\n@media only screen and (min-width : 990px) and (max-width : 1024px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 22px;\r\n right: initial;\r\n top: 22px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: -22px;\r\n right: initial;\r\n top: 108px;\r\n bottom: initial;\r\n }\r\n}\r\n\r\n/*Desktop, Laptop & Large Desktops*/\r\n@media only screen and (min-width : 1025px) and (max-width : 2000px) {\r\n /* primary with secondary */\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 72px;\r\n right: initial;\r\n top: 12px;\r\n}\r\n/* secondary bubble */\r\n.stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: 20px;\r\n right: initial;\r\n top: 126px;\r\n bottom: initial;\r\n}\r\n}\r\n\r\n/*Extra Large Screens*/\r\n@media only screen and (min-width : 2000px) {\r\n \r\n/* primary with secondary */\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {\r\n left: 0px;\r\n right: initial;\r\n top: 12px;\r\n}\r\n/* secondary bubble */\r\n.stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {\r\n left: -62px;\r\n right: initial;\r\n top: 41px;\r\n bottom: initial;\r\n}\r\n\r\n\r\n}");o("/* primary bubble */\r\n.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 40px;\r\n}\r\n.stageTeaserPromoBubble.stageTeaserTopRight {\r\n top: 40px;\r\n}\r\n\r\n@media screen and (max-width : 568px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 38px;\r\n left: initial;\r\n top: 68px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 2px;\r\n left: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n@media screen and (min-width : 568px) and (max-width : 768px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 112px;\r\n left: initial;\r\n top: 68px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 61px;\r\n left: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n@media screen and (width : 768px) {\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 132px;\r\n left: initial;\r\n top: 84px;\r\n bottom: initial;\r\n }\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 61px;\r\n left: initial;\r\n top: -12px;\r\n }\r\n}\r\n\r\n\r\n/*All small devices - phones*/\r\n\r\n/*Tablet - md*/\r\n@media only screen and (min-width : 769px) and (max-width : 990px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 72px;\r\n left: initial;\r\n top: 18px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 24px;\r\n left: initial;\r\n top: 111px;\r\n bottom: initial;\r\n }\r\n}\r\n\r\n/*Tablet - lg*/\r\n@media only screen and (min-width : 990px) and (max-width : 1024px) {\r\n .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 78px;\r\n left: initial;\r\n top: 22px;\r\n }\r\n /* secondary bubble */\r\n .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 26px;\r\n left: initial;\r\n top: 108px;\r\n bottom: initial;\r\n }\r\n}\r\n\r\n/*Desktop, Laptop & Large Desktops*/\r\n@media only screen and (min-width : 1025px) and (max-width : 2000px) {\r\n /* primary with secondary */\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 72px;\r\n left: initial;\r\n top: 12px;\r\n}\r\n/* secondary bubble */\r\n.stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 20px;\r\n left: initial;\r\n top: 126px;\r\n bottom: initial;\r\n}\r\n}\r\n\r\n/*Extra Large Screens*/\r\n@media only screen and (min-width : 2000px) {\r\n \r\n/* primary with secondary */\r\n.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {\r\n right: 0px;\r\n left: initial;\r\n top: 12px;\r\n}\r\n/* secondary bubble */\r\n.stageTeaserSecondaryPromoBubble.stageTeaserTopRight {\r\n right: 44px;\r\n left: initial;\r\n top: 322px;\r\n bottom: initial;\r\n}\r\n\r\n\r\n}");o(".falcon-grey-600 {\r\n color: #3d3935;\r\n}\r\n\r\n.falcon-grey-500 {\r\n color: #5f5955;\r\n}\r\n.falcon-grey-400 {\r\n color: #86807c;\r\n}\r\n\r\n.falcon-grey-100 {\r\n color: #f7f6f5;\r\n}\r\n\r\n.falcon-ice-white {\r\n color: #ffffff;\r\n}\r\n.falcon-background-grey-100 {\r\n background-color: #f7f6f5;\r\n}\r\n.falcon-background-ice-white {\r\n background-color: #ffffff;\r\n}\r\n.falcon-background-transparent {\r\n background-color: transparent;\r\n}\r\n\r\n.falcon-gradient-rubyglow-diagonal {\r\n border-radius: 8px;\r\n background: linear-gradient(93.71deg, #e2271e -0.37%, #ef7c3c 100%);\r\n}\r\n.falcon-gradient-rubyglow-vertical {\r\n border-radius: 8px;\r\n background: linear-gradient(180deg, #e2271e 0%, #ef7c3c 100%);\r\n}\r\n.falcon-gradient-pinksky-diagonal {\r\n background: linear-gradient(98.52deg, #d093a6 -0.35%, #e7c9bc 100.35%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-pinksky-vertical {\r\n background: linear-gradient(180deg, #d093a6 0%, #e7c9bc 100%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-bluehaze-diagonal {\r\n background: linear-gradient(98.52deg, #7899bd -0.35%, #b8d0e3 100.35%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-bluehaze-vertical {\r\n background: linear-gradient(180deg, #7899bd 0%, #b8d0e3 100%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-greencloud-diagonal {\r\n background: linear-gradient(99.06deg, #8d989b -0.35%, #f8edd2 105.52%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-greencloud-vertical {\r\n background: linear-gradient(180deg, #8d989b 0%, #f8edd2 100%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-peachfog-diagonal {\r\n background: linear-gradient(98.52deg, #9c8a95 -0.35%, #f6d6b3 100.35%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-peachfog-vertical {\r\n background: linear-gradient(180deg, #9c8a95 0%, #f6d6b3 100%);\r\n border-radius: 8px;\r\n}\r\n.falcon-gradient-orange-diagonal {\r\n background: linear-gradient(105deg, #EF7C3C 0%, #E2271E 100%);\r\n border-radius: 4px 0;\r\n}\r\n.falcon-gradient-dark-blue-haze{\r\n background: linear-gradient(239deg, #4F87C1 52.95%, rgba(94, 148, 207, 0) 111%);\r\n border-radius: 4px 0;\r\n}\r\n\r\n.falcon-def-transparancy {\r\n background: rgba(0, 0, 0, 1);\r\n}\r\n");const u=({content:t})=>{var o,a,l,d,s,c,m,p,g,u,v,x,f,h,T,y,w,B,k,C,P,S,E,_,N,L,z,I,W,D,R,M,A,J,F,j,H,$,O,V;const U="none"!==(null==t?void 0:t.gradientBgColor)?(n=>{switch(n){case"rubyglow-diagonal":return"falcon-gradient-rubyglow-diagonal";case"rubyglow-vertical":return"falcon-gradient-rubyglow-vertical";case"pinksky-diagonal":return"falcon-gradient-pinksky-diagonal";case"pinksky-vertical":return"falcon-gradient-pinksky-vertical";case"bluehaze-diagonal":return"falcon-gradient-bluehaze-diagonal";case"bluehaze-vertical":return"falcon-gradient-bluehaze-vertical";case"greencloud-diagonal":return"falcon-gradient-greencloud-diagonal";case"greencloud-vertical":return"falcon-gradient-greencloud-vertical";case"peachfog-diagonal":return"falcon-gradient-peachfog-diagonal";case"peachfog-vertical":return"falcon-gradient-peachfog-vertical";case"darkblue-haze":return"falcon-gradient-dark-blue-haze";default:return""}})(null==t?void 0:t.gradientBgColor):(n=>{switch(n){case"grey-100":return"falcon-background-grey-100";case"ice-white":return"falcon-background-ice-white";case"transparent":return"falcon-background-transparent";case"none":return"none";default:return""}})(null==t?void 0:t.GenericBgColor),G="none"===(null==t?void 0:t.gradientBgColor)&&"none"===(null==t?void 0:t.GenericBgColor)?null===(o=null==t?void 0:t.solidBgColor)||void 0===o?void 0:o.color:"",Z=(null==t?void 0:t.EnableTextBgColor)?null===(a=null==t?void 0:t.textbgcolor)||void 0===a?void 0:a.color:"",Y=()=>{switch(null==t?void 0:t.PromoBubblePosition){case"top-left":return"stageTeaserTopLeft";case"top-right":return"stageTeaserTopRight";case"bottom-left":return"stageTeaserBottomLeft";case"bottom-right":return"stageTeaserBottomRight"}},q=null===(s=null===(d=null===(l=null==t?void 0:t.primaryPromoBubble)||void 0===l?void 0:l[0])||void 0===d?void 0:d.bgcolor)||void 0===s?void 0:s.color,K=null===(p=null===(m=null===(c=null==t?void 0:t.primaryPromoBubble)||void 0===c?void 0:c[0])||void 0===m?void 0:m.textcolor)||void 0===p?void 0:p.color,Q=null===(v=null===(u=null===(g=null==t?void 0:t.SecondaryPromoBubble)||void 0===g?void 0:g[0])||void 0===u?void 0:u.bgcolor)||void 0===v?void 0:v.color,X=null===(h=null===(f=null===(x=null==t?void 0:t.SecondaryPromoBubble)||void 0===x?void 0:x[0])||void 0===f?void 0:f.textcolor)||void 0===h?void 0:h.color,nn=n=>{const r=n&&n.split(".").pop();return!(!r||!["webp","jpg","jpeg","png"].includes(r))},[rn,en]=r(!1),[tn,on]=r(""),[an,ln]=r(""),dn=()=>{var n,r,e,o,a,i,l,d,s;const c=window.innerWidth;c<=767?(en(null==t?void 0:t.mobileImageFirst),nn(null===(n=null==t?void 0:t.MobilePromoImage)||void 0===n?void 0:n.filename)?on(null===(r=null==t?void 0:t.MobilePromoImage)||void 0===r?void 0:r.filename):ln(null===(e=null==t?void 0:t.MobilePromoImage)||void 0===e?void 0:e.filename)):c>=768&&c<=1024?(en(null==t?void 0:t.tabletImageFirst),nn(null===(o=null==t?void 0:t.TabletPromoImage)||void 0===o?void 0:o.filename)?on(null===(a=null==t?void 0:t.TabletPromoImage)||void 0===a?void 0:a.filename):ln(null===(i=null==t?void 0:t.TabletPromoImage)||void 0===i?void 0:i.filename)):c>=1025&&(en(null==t?void 0:t.desktopImageFirst),nn(null===(l=null==t?void 0:t.DesktopPromoImage)||void 0===l?void 0:l.filename)?on(null===(d=null==t?void 0:t.DesktopPromoImage)||void 0===d?void 0:d.filename):ln(null===(s=null==t?void 0:t.DesktopPromoImage)||void 0===s?void 0:s.filename))};return e((()=>{dn(),window.addEventListener("resize",dn)}),[]),n.createElement("div",{className:G?"stageTeaserContainer d-flex":U+" stageTeaserContainer d-flex",style:{backgroundColor:G}},n.createElement("div",{className:(rn?"order-1":"order-0")+" stageTeaserLeftWrapper col-md-6",style:{backgroundColor:Z,borderRadius:"8px"}},n.createElement("div",{className:"stageTeaserTopText text-bold"},null===(k=null===(B=null===(w=null===(y=null===(T=null==t?void 0:t.primaryheading)||void 0===T?void 0:T.content)||void 0===y?void 0:y[0])||void 0===w?void 0:w.content)||void 0===B?void 0:B[0])||void 0===k?void 0:k.text),n.createElement("div",{className:"stageTeaserMainText"},null===(_=null===(E=null===(S=null===(P=null===(C=null==t?void 0:t.mainheading)||void 0===C?void 0:C.content)||void 0===P?void 0:P[0])||void 0===S?void 0:S.content)||void 0===E?void 0:E[0])||void 0===_?void 0:_.text),n.createElement("div",{className:"stageTeaserBottomText text-bold",style:{fontSize:"14px",lineHeight:"20px"}},null===(W=null===(I=null===(z=null===(L=null===(N=null==t?void 0:t.secondaryheading)||void 0===N?void 0:N.content)||void 0===L?void 0:L[0])||void 0===z?void 0:z.content)||void 0===I?void 0:I[0])||void 0===W?void 0:W.text),n.createElement("div",{className:"teaserTimer text-center"},n.createElement(b,{content:null==t?void 0:t.timer[0]})),n.createElement("div",{className:"StageTeaserButtonContainer"},null===(D=null==t?void 0:t.teaserButtonConfig)||void 0===D?void 0:D.map((r=>{var e,o,a,l,d,s;return n.createElement("div",{className:"StageTeaserButton"},n.createElement("a",{href:`${(null===(e=null==r?void 0:r.buttonLink)||void 0===e?void 0:e.url)||0}`,target:null!==(o=null==t?void 0:t.target)&&void 0!==o?o:"",rel:"_blank"===(null==r?void 0:r.linkTarget)?"opener":"noopener"},n.createElement("div",{className:i(null==r?void 0:r.buttonType)},(null===(a=null==r?void 0:r.buttonIcon)||void 0===a?void 0:a.filename)&&"left"===(null==r?void 0:r.buttonAlignment)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(l=null==r?void 0:r.buttonIcon)||void 0===l?void 0:l.filename}),null==r?void 0:r.buttonLabel,(null===(d=null==r?void 0:r.buttonIcon)||void 0===d?void 0:d.filename)&&"right"===(null==r?void 0:r.buttonAlignment)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(s=null==r?void 0:r.buttonIcon)||void 0===s?void 0:s.filename}))))})))),n.createElement("div",{className:(rn?"order-0":"order-1")+" stageTeaserRightWrapper col-md-6",style:{background:`url(${tn}) center / contain no-repeat`}},""!==an&&n.createElement("div",{className:"video-wrapper"},n.createElement("video",{autoPlay:!0,muted:!0,loop:!0,src:an})),(null===(R=null==t?void 0:t.primaryPromoBubble)||void 0===R?void 0:R.length)>0&&n.createElement("div",{className:`stageTeaserPromoBubble stageTeaserPrimaryPromoBubble stageTeaserPrimaryWithSecondaryBubble ${Y()}`,style:{backgroundColor:q,color:K}},n.createElement("div",{className:"stageTeaserPromoPercent"},null===(A=null===(M=null==t?void 0:t.primaryPromoBubble)||void 0===M?void 0:M[0])||void 0===A?void 0:A.primarytext),n.createElement("div",{className:"stageTeaserPromoText"},null===(F=null===(J=null==t?void 0:t.primaryPromoBubble)||void 0===J?void 0:J[0])||void 0===F?void 0:F.secondarytext)),(null===(j=null==t?void 0:t.SecondaryPromoBubble)||void 0===j?void 0:j.length)>0&&n.createElement("div",{className:`stageTeaserPromoBubble stageTeaserSecondaryPromoBubble ${Y()}`,style:{backgroundColor:Q,color:X}},n.createElement("div",{className:"stageTeaserSecondaryPromoPercent"},null===($=null===(H=null==t?void 0:t.SecondaryPromoBubble)||void 0===H?void 0:H[0])||void 0===$?void 0:$.primarytext),n.createElement("div",{className:"stageTeaserSecondaryPromoText"},null===(V=null===(O=null==t?void 0:t.SecondaryPromoBubble)||void 0===O?void 0:O[0])||void 0===V?void 0:V.secondarytext))))};o(".StageTeaserCard {\r\n /* margin: 24px 0; */\r\n border-radius: 8px;\r\n height: 580px;\r\n width: 940px;\r\n background-size: cover;\r\n}\r\n\r\n.StageTeaserContainer {\r\n display: flex;\r\n flex-direction: column;\r\n /* align-items: center; */\r\n position: absolute;\r\n padding: 90px 60px;\r\n}\r\n\r\n.StageTeaserTextContainer {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.StageTeaserOverline {\r\n font-size: 18px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: 24px;\r\n}\r\n\r\n.StageTeaserHeadline {\r\n font-size: 48px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 60px;\r\n text-transform: uppercase;\r\n}\r\n\r\n.StageTeaserText {\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 20px;\r\n}\r\n\r\n.StageTeaserButtonContainer {\r\n margin: 16px 0;\r\n display: flex;\r\n}\r\n\r\n.StageTeaserButton {\r\n padding: 6px;\r\n}\r\n\r\n/* mobile only viewport */\r\n@media (max-width: 375px) {\r\n .StageTeaserCard {\r\n width: 95%;\r\n height: 1336px;\r\n }\r\n\r\n .StageTeaserContainer {\r\n height: 640px;\r\n padding: 32px 24px;\r\n }\r\n\r\n .StageTeaserTextContainer {\r\n /* max-width: 271px; */\r\n }\r\n\r\n .StageTeaserOverline {\r\n font-size: 14px;\r\n line-height: 20px;\r\n }\r\n\r\n .StageTeaserHeadline {\r\n font-size: 24px;\r\n line-height: 32px;\r\n }\r\n\r\n .StageTeaserButtonContainer {\r\n flex-direction: column;\r\n }\r\n}\r\n\r\n/* large mobiles viewport */\r\n@media (min-width: 376px) and (max-width: 767px) {\r\n .StageTeaserCard {\r\n width: 95%;\r\n height: 1336px;\r\n }\r\n\r\n .StageTeaserContainer {\r\n height: 640px;\r\n padding: 32px 24px;\r\n }\r\n\r\n .StageTeaserTextContainer {\r\n /* max-width: 75%; */\r\n }\r\n\r\n .StageTeaserOverline {\r\n font-size: 14px;\r\n line-height: 20px;\r\n }\r\n\r\n .StageTeaserHeadline {\r\n font-size: 24px;\r\n line-height: 32px;\r\n }\r\n\r\n .StageTeaserButtonContainer {\r\n flex-direction: column;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media (min-width: 768px) and (max-width: 1022px) {\r\n .StageTeaserCard {\r\n width: 100%;\r\n height: 800px;\r\n }\r\n\r\n .StageTeaserContainer {\r\n height: 800px;\r\n padding: 60px 100px;\r\n }\r\n\r\n .StageTeaserTextContainer {\r\n /* max-width: 80%; */\r\n }\r\n\r\n .StageTeaserOverline {\r\n font-size: 16px;\r\n }\r\n\r\n .StageTeaserHeadline {\r\n font-size: 32px;\r\n line-height: 40px;\r\n }\r\n}\r\n\r\n/* Desktop only viewport */\r\n@media (min-width: 1023px) and (max-width: 1439px) {\r\n .StageTeaserCard {\r\n width: 98%;\r\n height: 580px;\r\n }\r\n\r\n .StageTeaserContainer {\r\n width: 100%;\r\n }\r\n\r\n .StageTeaserCenterContainer {\r\n padding: 120px 90px;\r\n }\r\n\r\n .StageTeaserTextContainer {\r\n /* max-width: 480px; */\r\n }\r\n\r\n .StageTeaserTextCenterContainer {\r\n /* max-width: 780px; */\r\n }\r\n}\r\n\r\n/* large desktop viewport */\r\n@media (min-width: 1440px) {\r\n .StageTeaserCard {\r\n width: 2880px;\r\n height: 1620px;\r\n }\r\n\r\n .StageTeaserContainer {\r\n width: 100%;\r\n padding: 170px 108px;\r\n }\r\n\r\n .StageTeaserTextContainer {\r\n /* max-width: 736px; */\r\n }\r\n}\r\n\r\n/* falcon button styles */\r\n.falcon-button-defaults {\r\n border-radius: 28px;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-size: 16px;\r\n line-height: 24px;\r\n font-weight: 700;\r\n padding: 10px 24px;\r\n text-decoration: none;\r\n}\r\n\r\n.falcon-primary-button-v1 > .falcon-button-defaults {\r\n background-color: #da291c;\r\n color: #ffffff;\r\n}\r\n\r\n.falcon-primary-button-v1:hover {\r\n background-color: #961c13;\r\n}\r\n\r\n.falcon-primary-button-v1:visited {\r\n background-color: #c7355f;\r\n}\r\n\r\n.falcon-primary-button-v1:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-primary-button-v1-JC > .falcon-button-defaults {\r\n background-color: #ffffff;\r\n color: #da291c;\r\n}\r\n\r\n.falcon-primary-button-v1-JC:hover {\r\n background-color: #e97f77;\r\n color: #ffffff;\r\n}\r\n\r\n.falcon-primary-button-v1-JC:visited {\r\n background-color: #961c13;\r\n color: #ffffff;\r\n}\r\n\r\n.falcon-primary-button-v1-JC:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-secondary-button-v1 > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #da291c;\r\n}\r\n\r\n.falcon-secondary-button-v1:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n\r\n.falcon-secondary-button-v1:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n\r\n.falcon-secondary-button-v1:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #ffffff;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC:hover {\r\n border-color: #f1571d;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC:visited {\r\n border-color: #c7355f;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n#wrapper {\r\n width: 80%;\r\n margin: 10px auto;\r\n}\r\n\r\n.hero-unit {\r\n position: relative;\r\n}\r\n\r\n.topContent {\r\n position: inherit;\r\n bottom : 128px;\r\n}\r\n\r\n.bottomContent {\r\n position: inherit;\r\n top : 172px;\r\n}\r\n\r\n@media (max-width: 767px) {\r\n #teaserTextSection{\r\n margin-left: -180px;\r\n }\r\n #wrapper {\r\n width: 100%;\r\n margin: 10px auto;\r\n }\r\n .hero-unit {\r\n -webkit-background-size: contain;\r\n -moz-background-size: contain;\r\n -o-background-size: contain;\r\n background-size: contain;\r\n\r\n /**\r\n * below is borowed from Twitter Bootstrap hero-unit\r\n */\r\n padding: 200px;\r\n margin-bottom: 30px;\r\n -webkit-border-radius: 6px;\r\n -moz-border-radius: 6px;\r\n border-radius: 6px;\r\n margin-right: 26px;\r\n padding-right: 26px;\r\n }\r\n}\r\n\r\n@media (min-width: 768px) and (max-width: 1022px) {\r\n #wrapper {\r\n width: 100%;\r\n margin: 10px auto;\r\n }\r\n .hero-unit {\r\n /* background: url(https://a.storyblok.com/f/113473/2048x1536/5081970575/buyback-tablet.png)\r\n no-repeat center center; */\r\n -webkit-background-size: cover;\r\n -moz-background-size: cover;\r\n -o-background-size: cover;\r\n background-size: cover;\r\n\r\n /**\r\n * below is borowed from Twitter Bootstrap hero-unit\r\n */\r\n padding: 200px;\r\n margin-bottom: 30px;\r\n -webkit-border-radius: 6px;\r\n -moz-border-radius: 6px;\r\n border-radius: 6px;\r\n }\r\n}\r\n\r\n@media (min-width: 1023px) and (max-width: 1439px) {\r\n #wrapper {\r\n width: 100%;\r\n margin: 10px auto;\r\n }\r\n .hero-unit {\r\n /* background: url(https://a.storyblok.com/f/113473/2048x1536/5081970575/buyback-tablet.png)\r\n no-repeat center center; */\r\n -webkit-background-size: cover;\r\n -moz-background-size: cover;\r\n -o-background-size: cover;\r\n background-size: cover;\r\n\r\n /**\r\n * below is borowed from Twitter Bootstrap hero-unit\r\n */\r\n padding: 200px;\r\n margin-bottom: 30px;\r\n -webkit-border-radius: 6px;\r\n -moz-border-radius: 6px;\r\n border-radius: 6px;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n #wrapper {\r\n width: 99%;\r\n margin: 10px auto;\r\n }\r\n .hero-unit {\r\n /* background: url(https://a.storyblok.com/f/113473/2880x1620/7281e1302d/buyback-desktop.png)\r\n no-repeat center center; */\r\n -webkit-background-size: cover;\r\n -moz-background-size: cover;\r\n -o-background-size: cover;\r\n background-size: cover;\r\n\r\n /**\r\n * below is borowed from Twitter Bootstrap hero-unit\r\n */\r\n padding: 200px;\r\n margin-bottom: 30px;\r\n -webkit-border-radius: 6px;\r\n -moz-border-radius: 6px;\r\n border-radius: 6px;\r\n }\r\n}\r\n");const v=({content:t})=>{var o,a,l,d,s,c,m,p,g,u,v,x,f,h,T,y,w,B,k,C,P,S,E,_,N,L,z;const I=null===(c=null===(s=null===(d=null===(l=null===(a=null===(o=null==t?void 0:t.content)||void 0===o?void 0:o.primaryheading)||void 0===a?void 0:a.content)||void 0===l?void 0:l[0])||void 0===d?void 0:d.content)||void 0===s?void 0:s[0])||void 0===c?void 0:c.text,W=null===(x=null===(v=null===(u=null===(g=null===(p=null===(m=null==t?void 0:t.content)||void 0===m?void 0:m.mainheading)||void 0===p?void 0:p.content)||void 0===g?void 0:g[0])||void 0===u?void 0:u.content)||void 0===v?void 0:v[0])||void 0===x?void 0:x.text,D=null===(B=null===(w=null===(y=null===(T=null===(h=null===(f=null==t?void 0:t.content)||void 0===f?void 0:f.secondaryheading)||void 0===h?void 0:h.content)||void 0===T?void 0:T[0])||void 0===y?void 0:y.content)||void 0===w?void 0:w[0])||void 0===B?void 0:B.text,R="left"===(null===(k=null==t?void 0:t.content)||void 0===k?void 0:k.textposition)?"flex-start":"right"===(null===(C=null==t?void 0:t.content)||void 0===C?void 0:C.textposition)?"flex-end":"center",M="left"===(null===(P=null==t?void 0:t.content)||void 0===P?void 0:P.textposition)?"left":"right"===(null===(S=null==t?void 0:t.content)||void 0===S?void 0:S.textposition)?"right":"center";"left"===(null===(E=null==t?void 0:t.content)||void 0===E?void 0:E.textposition)||null===(_=null==t?void 0:t.content)||void 0===_||_.textposition;const[A,J]=r(""),[F,j]=r(""),H=()=>{var n,r,e,o,a,i,l;const d=window.innerWidth;d<=767?(J(`url(${null===(r=null===(n=null==t?void 0:t.content)||void 0===n?void 0:n.mobileImage)||void 0===r?void 0:r.filename}) center center / cover no-repeat`),j(null===(e=null==t?void 0:t.content)||void 0===e?void 0:e.verticaltextpostion)):d>=768&&d<=1439?(J(`url(${null===(a=null===(o=null==t?void 0:t.content)||void 0===o?void 0:o.tabImage)||void 0===a?void 0:a.filename}) center center / cover no-repeat`),j("")):d>=1440&&(J(`url(${null===(l=null===(i=null==t?void 0:t.content)||void 0===i?void 0:i.desktopimage)||void 0===l?void 0:l.filename}) center center / cover no-repeat`),j(""))};return e((()=>{H(),window.addEventListener("resize",H)}),[]),n.createElement(n.Fragment,null,n.createElement("div",{id:"wrapper"},""!==A&&n.createElement("div",{className:"hero-unit",style:{background:A}},n.createElement("div",{id:"teaserTextSection",className:"top"===F?"topContent":"bottom"===F?"bottomContent":""},n.createElement("div",{className:"StageTeaserTextContainer",style:{color:"#ffffff",alignItems:""===F?R:"center"}},n.createElement("div",{className:"StageTeaserOverline"}," ",I," "),n.createElement("div",{className:"StageTeaserHeadline",style:{textAlign:""===F?M:"center"}},W),n.createElement("div",{className:"StageTeaserText"}," ",D," ")),n.createElement("div",{className:"StageTeaserTimer"},n.createElement("div",{className:"teaserTimer text-center"},n.createElement(b,{content:null===(N=null==t?void 0:t.content)||void 0===N?void 0:N.timer[0]}))),n.createElement("div",{className:"StageTeaserButtonContainer",style:{justifyContent:""===F?R:"",textAlign:""!==F?"center":M}},null===(z=null===(L=null==t?void 0:t.content)||void 0===L?void 0:L.teaserButtonConfig)||void 0===z?void 0:z.map((r=>{var e,o,a,l,d,s;return n.createElement("div",{className:"StageTeaserButton"},n.createElement("a",{href:`${(null===(e=null==r?void 0:r.buttonLink)||void 0===e?void 0:e.url)||0}`,target:null!==(o=null==t?void 0:t.target)&&void 0!==o?o:"",rel:"_blank"===(null==r?void 0:r.linkTarget)?"opener":"noopener"},n.createElement("div",{className:i(null==r?void 0:r.buttonType)},(null===(a=null==r?void 0:r.buttonIcon)||void 0===a?void 0:a.filename)&&"left"===(null==r?void 0:r.buttonAlignment)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(l=null==r?void 0:r.buttonIcon)||void 0===l?void 0:l.filename}),null==r?void 0:r.buttonLabel,(null===(d=null==r?void 0:r.buttonIcon)||void 0===d?void 0:d.filename)&&"right"===(null==r?void 0:r.buttonAlignment)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(s=null==r?void 0:r.buttonIcon)||void 0===s?void 0:s.filename}))))})))))))},x=({content:r})=>n.createElement(n.Fragment,null,"single"===(null==r?void 0:r.layoutgrid)?n.createElement(v,{content:{content:r}}):n.createElement(u,{content:r}));export{g as RibbonComponent,x as StageTeaserComponent};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.d.ts
CHANGED