{"version":3,"sources":["webpack:///./src/helpers/media.ts","webpack:///./src/helpers/typography.ts","webpack:///./src/hooks/useIntersectionObserver.ts","webpack:///./src/hooks/useInView.ts","webpack:///./node_modules/@tti/image-transform/dist/esm/ImageTransform.js","webpack:///./node_modules/@tti/image-transform/dist/esm/index.js","webpack:///./node_modules/@tti/brand-empire/dist/esm/helpers/brand.js","webpack:///./node_modules/@tti/brand-empire/dist/esm/helpers/fonts.js","webpack:///./node_modules/@tti/brand-empire/dist/esm/helpers/grids.js","webpack:///./src/helpers/columns.ts","webpack:///./src/stories/Widgets/Media/SectionTitle/SectionTitle.styles.ts","webpack:///./src/stories/Widgets/Media/SectionTitle/SectionTitle.tsx","webpack:///./src/helpers/animation.ts","webpack:///./src/helpers/grids.ts","webpack:///./img/icons/chevron-down.svg"],"names":["Device","from","size","until","H1Styles","css","fonts","helvetica","Tablet","DesktopLarge","H1","styled","h1","H2Styles","H2","h2","H3Styles","H3","h3","H4Styles","H4","h4","PStyles","P","p","PLargeStyles","PSmallStyles","BlockquoteStyles","Typography","Blockquote","blockquote","useIntersectionObserver","callback","options","observerRef","useRef","rootRef","elementRef","useEffect","current","IntersectionObserver","root","observe","disconnect","useInView","reverse","isEditMode","useState","inView","setInView","entries","isIntersecting","FormatMode","imageUrl","this","_params","split","length","_imageUrl","queries","query","push","join","key","value","toString","width","addParameter","height","mode","url","blue","base","light","dark","white","black","grey","11","7","1","helveticaConfig","family","weight","style","font","ls","sitePadding","Default","FullWidth","Content","ContentWide","Wrapper","section","grids","MobileLarge","DesktopSmall","Title","brand","Description","Image","img","Media","div","animation","easeInOutCubic","ReadMoreButtonWrapper","ReadMoreButton","showReadMore","SectionTitleStyles","columns","TabletLarge","fadeInUp","SectionTitle","props","threshold","pageContext","React","createElement","ref","title","description","Fragment","dangerouslySetInnerHTML","__html","readMoreAnchor","readMoreText","as","href","ChevronDown","media","sizes","srcSet","ImageTransform","Crop","Desktop","MobileSmall","src","alt","keyframes","fadeIn","duration","delay","easingFunc","amount","slideUp","order","animateOnExit","baseFixed","SitePadding","SitePaddingBreakoutLeft","SitePaddingBreakoutRight","SitePaddingBreakout","Fixed","styles","xmlns","viewBox","data-name","d","fill","stroke","strokeWidth"],"mappings":"yGAAO,IAAIA,EAaJ,SAASC,EAAKC,GACjB,4BAAsBA,EAAtB,OAEG,SAASC,EAAMD,GAClB,4BAAsBA,EAAO,EAA7B,OAjBJ,sGACA,SAAWF,GACPA,EAAOA,EAAM,YAAkB,KAAO,cACtCA,EAAOA,EAAM,OAAa,KAAO,SACjCA,EAAOA,EAAM,YAAkB,KAAO,cACtCA,EAAOA,EAAM,OAAa,KAAO,SACjCA,EAAOA,EAAM,YAAkB,MAAQ,cACvCA,EAAOA,EAAM,aAAmB,MAAQ,eACxCA,EAAOA,EAAM,QAAc,MAAQ,UACnCA,EAAOA,EAAM,aAAmB,MAAQ,eACxCA,EAAOA,EAAM,cAAoB,MAAQ,gBACzCA,EAAOA,EAAM,UAAgB,MAAQ,YAVzC,CAWGA,IAAWA,EAAS,M,gCCZvB,2DAGMI,EAAWC,YAAH,iIACVC,IAAMC,UAAU,sBAITN,YAAKD,IAAOQ,QAKZP,YAAKD,IAAOS,eAKjBC,EAAKC,IAAOC,GAAV,qEAAGD,CAAH,SACJP,GAEES,EAAWR,YAAH,iIACVC,IAAMC,UAAU,sBAITN,YAAKD,IAAOQ,QAKZP,YAAKD,IAAOS,eAKjBK,EAAKH,IAAOI,GAAV,qEAAGJ,CAAH,SACJE,GAEEG,EAAWX,YAAH,iIACVC,IAAMC,UAAU,sBAITN,YAAKD,IAAOQ,QAKZP,YAAKD,IAAOS,eAKjBQ,EAAKN,IAAOO,GAAV,qEAAGP,CAAH,SACJK,GAEEG,EAAWd,YAAH,iIACVC,IAAMC,UAAU,sBAITN,YAAKD,IAAOQ,QAKZP,YAAKD,IAAOS,eAKjBW,EAAKT,IAAOU,GAAV,qEAAGV,CAAH,SACJQ,GAEEG,EAAUjB,YAAH,iIACTC,IAAMC,UAAU,gBAITN,YAAKD,IAAOQ,QAKZP,YAAKD,IAAOS,eAKjBc,EAAIZ,IAAOa,EAAV,oEAAGb,CAAH,QACHW,GAEEG,EAAepB,YAAH,iIACdC,IAAMC,UAAU,gBAITN,YAAKD,IAAOQ,QAKZP,YAAKD,IAAOS,eAKjBiB,EAAerB,YAAH,qFACdC,IAAMC,UAAU,gBAITN,YAAKD,IAAOS,eAKjBkB,EAAmBtB,YAAH,mJAClBC,IAAMC,UAAU,gBAKTN,YAAKD,IAAOQ,QAKZP,YAAKD,IAAOS,eAQVmB,EAAa,CACtBxB,WACAS,WACAG,WACAG,WACAM,eACAH,UACAI,eACAC,mBACAjB,KACAI,KACAG,KACAG,KACAG,IACAM,WAjBelB,IAAOmB,WAAV,6EAAGnB,CAAH,QACZgB,K,owBC1GWI,MAtBf,SAAiCC,GAAwB,IAAdC,EAAc,uDAAJ,GAC3CC,EAAcC,iBAAO,MACrBC,EAAUD,iBAAO,MACjBE,EAAaF,iBAAO,MAiB1B,OAhBAG,qBAAU,WACN,GAAKD,EAAWE,QAQhB,OALAL,EAAYK,QAAU,IAAIC,qBAAqBR,EAAzB,GAClBS,KAAML,EAAQG,SACXN,IAEPC,EAAYK,QAAQG,QAAQL,EAAWE,SAChC,WACyB,OAAxBL,EAAYK,SAGhBL,EAAYK,QAAQI,gBAEzB,CAACX,EAAUC,IACP,CAAEI,aAAYH,cAAaE,Y,u8BCzB/B,SAASQ,EAAUX,GAA8C,IAArCY,EAAqC,wDAApBC,EAAoB,0DACxCC,oBAAS,GAD+B,SAC7DC,EAD6D,KACrDC,EADqD,OAE7ClB,GAAwB,SAACmB,GACxCA,EAAQ,GAAGC,eACXF,GAAU,IAEO,IAAZJ,GACLI,GAAU,KAEfhB,GAPKI,EAF4D,EAE5DA,WAQR,MAAO,CAACA,IAAYS,GAAoBE,K,gCCZrC,IAAII,E,kCACX,SAAWA,GACPA,EAAgB,IAAI,MACpBA,EAAmB,OAAI,SACvBA,EAAiB,KAAI,OACrBA,EAAgB,IAAI,MACpBA,EAAgB,IAAI,MACpBA,EAAoB,QAAI,UAN5B,CAOGA,IAAeA,EAAa,KAmDhB,MAlDf,MACI,YAAYC,GACRC,KAAKC,QAAU,GAEf,MAAMC,EAAQH,EAASG,MAAM,KAE7B,GAAIA,EAAMC,OAAS,EACfH,KAAKI,UAAYF,EAAM,OAD3B,CAKA,GAAIA,EAAMC,OAAS,EAAG,CAElB,MAAME,EAAUH,EAAM,GAAGA,MAAM,KAE/B,IAAK,MAAMI,KAASD,EAChBL,KAAKC,QAAQM,KAAKD,GAG1BN,KAAKI,UAAYF,EAAM,IAE3B,UACI,MAAO,GAAGF,KAAKI,aAAaJ,KAAKC,QAAQO,KAAK,OAElD,aAAaC,EAAKC,GACgB,IAA1BV,KAAKI,UAAUD,QAGnBH,KAAKC,QAAQM,KAAK,GAAGE,KAAOC,EAAMC,cAEtC,MAAMC,GAEF,OADAZ,KAAKa,aAAa,QAASD,GACpBZ,KAEX,OAAOc,GAEH,OADAd,KAAKa,aAAa,SAAUC,GACrBd,KAEX,KAAKe,GAED,OADAf,KAAKa,aAAa,OAAQE,GACnBf,KAEX,cAEI,OADAA,KAAKa,aAAa,cAAe,GAC1Bb,KAEX,WACI,OAAOA,KAAKgB,MCvDL,O,qICDA,OACXC,KAAM,CACFC,KAAM,UACNC,MAAO,UACPC,KAAM,WAEVC,MAAO,OACPC,MAAO,UACPC,KAAM,CACFC,GAAI,UACJC,EAAG,UACHC,EAAG,Y,OCVJ,MAAMC,EAAkB,CAC3B,eAAkB,CACdC,OAAQ,gCACRC,OAAQ,IACRC,MAAO,UAEX,oBAAuB,CACnBF,OAAQ,iCACRC,OAAQ,IACRC,MAAO,UAEX,qBAAwB,CACpBF,OAAQ,iCACRC,OAAQ,IACRC,MAAO,WAIf,SAASC,EAAKH,EAAQC,EAAQC,GAC1B,OAAO,GAAI;mBACIF;mBACAC;kBACDC;IAGH,OACX7E,UAAW,CACP,eAAkB8E,EAAKJ,EAAgB,gBAAgBC,OAAQD,EAAgB,gBAAgBE,OAAQF,EAAgB,gBAAgBG,OACvI,oBAAuBC,EAAKJ,EAAgB,qBAAqBC,OAAQD,EAAgB,qBAAqBE,OAAQF,EAAgB,qBAAqBG,OAC3J,qBAAwBC,EAAKJ,EAAgB,sBAAsBC,OAAQD,EAAgB,sBAAsBE,OAAQF,EAAgB,sBAAsBG,QAEnKE,GAAKtB,GACM,QAAQA,EAAQ,cChC/B,MAAMQ,EAAO,GAAI;;;;EAKXe,EAAc,GAAI;;;;;;EAWT,OACXC,QALY,GAAI;IAChBhB;IACAe;oCCfJ,kBAEME,EAAYpF,YAAH,0BAGTqF,EAAUrF,YAAH,+FAGFJ,YAAKD,IAAOQ,QAIZP,YAAKD,IAAOS,eAIjBkF,EAActF,YAAH,4DAGNJ,YAAKD,IAAOS,eAIR,KACXgF,YACAC,UACAC,gB,+HCnBEC,EAAUjF,IAAOkF,QAAV,8EAAGlF,CAAH,sIACTmF,IAAMN,QAMCvF,YAAKD,IAAO+F,aAIZ9F,YAAKD,IAAOgG,eAIjBC,EAAQtF,IAAOC,GAAV,4EAAGD,CAAH,mKAEAuF,IAAMvB,MACbrE,IAAMC,UAAU,sBAMTN,YAAKD,IAAO+F,aAIZ9F,YAAKD,IAAOgG,eAIjBG,EAAcxF,IAAOa,EAAV,kFAAGb,CAAH,mCACbiB,IAAWN,QAEJ4E,IAAMvB,OAEXyB,EAAQzF,IAAO0F,IAAV,4EAAG1F,CAAH,wFASL2F,EAAQ3F,IAAO4F,IAAV,4EAAG5F,CAAH,ySASPyF,EAG2BI,IAAUC,eAAgCD,IAAUC,gBAE7E,qBAAGzD,OACH3C,YADsB,2CAKtB,OAUkB6F,IAAMtB,OAKxB8B,EAAwB/F,IAAO4F,IAAV,4FAAG5F,CAAH,0CAIrBgG,EAAiBhG,IAAO4F,IAAV,qFAAG5F,CAAH,0IAChBiB,IAAWN,QAEJ4E,IAAMvB,MASJuB,IAAMvB,OAGf,qBAAGiC,aACDvG,YADgC,qCAMhC,QAYOwG,EAAqB,CAC9BjB,UACAF,QAZY/E,IAAO4F,IAAV,8EAAG5F,CAAH,wDACTmG,IAAQnB,YAGD1F,YAAKD,IAAO+G,aACjBd,EAAUU,EAAmBR,GAC3B,gBAAGnD,EAAH,EAAGA,OAAH,OAAgBgE,YAAShE,EAAQ,GAAI,IAAK,EAAGwD,IAAUC,mBAO3DN,cACAF,QACAK,QACAF,QACAM,wBACAC,kB,+8BCtGWM,UAxBM,SAACC,GAAU,QACCtE,YAAU,CAAEuE,UAAW,KAAO,EAAOD,EAAME,YAAYtE,YADxD,GACrBT,EADqB,KACTW,EADS,KAE5B,OAAQqE,IAAMC,cAAcT,EAAmBjB,QAAS,CAAE2B,IAAKlF,IAC1D6E,EAAMM,OAASN,EAAMO,cAAiBJ,IAAMC,cAAcT,EAAmBnB,QAAS,CAAE1C,OAAQA,GAC7FkE,EAAMM,MAASH,IAAMC,cAAcT,EAAmBZ,MAAO,KACzDoB,IAAMC,cAAc,OAAQ,KAAMJ,EAAMM,QAAW,KACvDN,EAAMO,YAAeJ,IAAMC,cAAcD,IAAMK,SAAU,KACrDL,IAAMC,cAAcT,EAAmBV,YAAa,CAAEwB,wBAAyB,CAAEC,OAAQV,EAAMO,eAC/FP,EAAMW,gBAAkBX,EAAMY,cAAiBT,IAAMC,cAAcT,EAAmBH,sBAAuB,KACzGW,IAAMC,cAAcT,EAAmBF,eAAgB,CAAEoB,GAAI,IAAKC,KAAMd,EAAMW,gBAC1EX,EAAMY,aACN,IACAT,IAAMC,cAAcW,IAAa,SAAa,MAC9DZ,IAAMC,cAAcT,EAAmBP,MAAO,CAAEtD,OAAQA,GACpDqE,IAAMC,cAAc,UAAW,KAC3BD,IAAMC,cAAc,SAAU,CAAEY,MAAOjI,YAAKD,IAAOS,cAAe0H,MAAO,QAASC,OAAQ,GAAF,OAAK,IAAIC,IAAenB,EAAM7D,UAAUa,MAAM,MAAME,OAAO,KAAKC,KAAKjB,IAAWkF,MAAhF,YACxFjB,IAAMC,cAAc,SAAU,CAAEY,MAAOjI,YAAKD,IAAOuI,SAAUJ,MAAO,QAASC,OAAQ,GAAF,OAAK,IAAIC,IAAenB,EAAM7D,UAAUa,MAAM,MAAME,OAAO,KAAKC,KAAKjB,IAAWkF,MAAhF,YACnFjB,IAAMC,cAAc,SAAU,CAAEY,MAAOjI,YAAKD,IAAOgG,cAAemC,MAAO,QAASC,OAAQ,GAAF,OAAK,IAAIC,IAAenB,EAAM7D,UAAUa,MAAM,MAAME,OAAO,KAAKC,KAAKjB,IAAWkF,MAAhF,YACxFjB,IAAMC,cAAc,SAAU,CAAEY,MAAOjI,YAAKD,IAAO+G,aAAcoB,MAAO,QAASC,OAAQ,GAAF,OAAK,IAAIC,IAAenB,EAAM7D,UAAUa,MAAM,MAAME,OAAO,KAAKC,KAAKjB,IAAWkF,MAAhF,YACvFjB,IAAMC,cAAc,SAAU,CAAEY,MAAOjI,YAAKD,IAAOQ,QAAS2H,MAAO,QAASC,OAAQ,GAAF,OAAK,IAAIC,IAAenB,EAAM7D,UAAUa,MAAM,KAAKE,OAAO,KAAKC,KAAKjB,IAAWkF,MAA/E,WAClFjB,IAAMC,cAAc,SAAU,CAAEY,MAAOjI,YAAKD,IAAO+F,aAAcoC,MAAO,QAASC,OAAQ,GAAF,OAAK,IAAIC,IAAenB,EAAM7D,UAAUa,MAAM,KAAKE,OAAO,KAAKC,KAAKjB,IAAWkF,MAA/E,WACvFjB,IAAMC,cAAc,SAAU,CAAEY,MAAOjI,YAAKD,IAAOwI,aAAcL,MAAO,QAASC,OAAQ,GAAF,OAAK,IAAIC,IAAenB,EAAM7D,UAAUa,MAAM,KAAKE,OAAO,KAAKC,KAAKjB,IAAWkF,MAA/E,WACvFjB,IAAMC,cAAcT,EAAmBT,MAAO,CAAEqC,IAAK,IAAIJ,IAAenB,EAAM7D,UAAUiB,IAAKoE,IAAKxB,EAAMM,MAAOW,MAAO,e,+BC5BtI,iHACM1B,EAAiB,uCACR,KACXA,kBAEUkC,YAAH,iDAaJ,SAASC,EAAO5F,EAAQ6F,EAAUC,EAAOC,GAC5C,OAAO1I,YAAP,2CACsBwI,EAAcC,EAAWC,EAE7C/F,EACI3C,YADE,gBAIFA,YAJE,iBASL,SAAS2G,EAAShE,EAAQgG,EAAQH,EAAUC,EAAOC,GACtD,OAAO1I,YAAP,qEACsBwI,EAAcC,EAAWC,EAAyBF,EAAcC,EAAWC,EAE/F/F,EACI3C,YADE,+BAKFA,YALE,2CAOsB2I,IAI3B,SAASC,EAAQjG,EAAQkG,GAAuE,IAAhEJ,EAAgE,uDAAxD,IAAKC,EAAmD,uDAAtCtC,EAAgB0C,IAAsB,yDACnG,OAAInG,EACO3C,YAAP,mEAE4ByI,EAAgB,IAARI,EAAiBH,GAGhDI,EACE9I,YAAP,qEAE4ByI,EAAgB,IAARI,EAAiBH,GAI9C1I,YAAP,mC,+BC5DR,oDAEMmE,EAAOnE,YAAH,iFAMJ+I,EAAY/I,YAAH,sGAOJJ,YAAKD,IAAOQ,SAKV6I,EAAchJ,YAAH,kPAIbJ,YAAKD,IAAOQ,QAKZP,YAAKD,IAAO+G,aAKZ9G,YAAKD,IAAOgG,cAKZ/F,YAAKD,IAAOS,eAKjB6I,EAA0BjJ,YAAH,sLAMlBJ,YAAKD,IAAOQ,QAIZP,YAAKD,IAAO+G,aAIZ9G,YAAKD,IAAOgG,cAIZ/F,YAAKD,IAAOS,eAIjB8I,EAA2BlJ,YAAH,2LAMnBJ,YAAKD,IAAOQ,QAIZP,YAAKD,IAAO+G,aAIZ9G,YAAKD,IAAOgG,cAIZ/F,YAAKD,IAAOS,eAIjB+I,EAAsBnJ,YAAH,uRAOdJ,YAAKD,IAAOQ,QAKZP,YAAKD,IAAO+G,aAKZ9G,YAAKD,IAAOgG,cAKZ/F,YAAKD,IAAOS,eAKjB+E,EAAUnF,YAAH,aACTmE,EACA6E,GAEEI,EAAQpJ,YAAH,SACP+I,GAEW,KACX5D,UACAiE,QACAD,sBACAF,0BACAC,2BACA/E,S,unBC/HY,kBACdkF,OADc,IAEXxC,EAFW,uBAGV,2BAAKyC,MAAM,6BAA6BC,QAAQ,qBAAwB1C,GAAO,0BAAM2C,YAAU,YAAYC,EAAE,4BAA4BC,KAAK,OAAOC,OAAO,eAAeC,YAAY","file":"32-4b5d4a0bbf8e8ba91054.js","sourcesContent":["export var Device;\r\n(function (Device) {\r\n Device[Device[\"MobileSmall\"] = 320] = \"MobileSmall\";\r\n Device[Device[\"Mobile\"] = 375] = \"Mobile\";\r\n Device[Device[\"MobileLarge\"] = 480] = \"MobileLarge\";\r\n Device[Device[\"Tablet\"] = 768] = \"Tablet\";\r\n Device[Device[\"TabletLarge\"] = 1024] = \"TabletLarge\";\r\n Device[Device[\"DesktopSmall\"] = 1280] = \"DesktopSmall\";\r\n Device[Device[\"Desktop\"] = 1366] = \"Desktop\";\r\n Device[Device[\"DesktopLarge\"] = 1600] = \"DesktopLarge\";\r\n Device[Device[\"ActualDesktop\"] = 1920] = \"ActualDesktop\";\r\n Device[Device[\"DesktopXL\"] = 2560] = \"DesktopXL\";\r\n})(Device || (Device = {}));\r\nexport function from(size) {\r\n return `(min-width: ${size}px)`;\r\n}\r\nexport function until(size) {\r\n return `(max-width: ${size - 1}px)`;\r\n}\r\n","import { fonts } from '@tti/brand-empire';\r\nimport styled, { css } from 'styled-components';\r\nimport { Device, from } from './media';\r\nconst H1Styles = css `\r\n ${fonts.helvetica['87-condensed-heavy']};\r\n font-size: 45px;\r\n line-height: 55px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n font-size: 63px;\r\n line-height: 70px;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n font-size: 85px;\r\n line-height: 95px;\r\n }\r\n`;\r\nconst H1 = styled.h1 `\r\n ${H1Styles};\r\n`;\r\nconst H2Styles = css `\r\n ${fonts.helvetica['87-condensed-heavy']};\r\n font-size: 35px;\r\n line-height: 45px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n font-size: 53px;\r\n line-height: 60px;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n font-size: 72px;\r\n line-height: 80px;\r\n }\r\n`;\r\nconst H2 = styled.h2 `\r\n ${H2Styles};\r\n`;\r\nconst H3Styles = css `\r\n ${fonts.helvetica['87-condensed-heavy']};\r\n font-size: 27px;\r\n line-height: 43px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n font-size: 43px;\r\n line-height: 50px;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n font-size: 50px;\r\n line-height: 61px;\r\n }\r\n`;\r\nconst H3 = styled.h3 `\r\n ${H3Styles};\r\n`;\r\nconst H4Styles = css `\r\n ${fonts.helvetica['87-condensed-heavy']};\r\n font-size: 18px;\r\n line-height: 32px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n font-size: 30px;\r\n line-height: 37px;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n font-size: 32px;\r\n line-height: 43px;\r\n }\r\n`;\r\nconst H4 = styled.h4 `\r\n ${H4Styles};\r\n`;\r\nconst PStyles = css `\r\n ${fonts.helvetica['57-condensed']};\r\n font-size: 16px;\r\n line-height: 26px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n font-size: 17px;\r\n line-height: 27px;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n font-size: 19px;\r\n line-height: 29px;\r\n }\r\n`;\r\nconst P = styled.p `\r\n ${PStyles}\r\n`;\r\nconst PLargeStyles = css `\r\n ${fonts.helvetica['57-condensed']};\r\n font-size: 18px;\r\n line-height: 28px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n font-size: 20px;\r\n line-height: 30px;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n font-size: 22px;\r\n line-height: 32px;\r\n }\r\n`;\r\nconst PSmallStyles = css `\r\n ${fonts.helvetica['57-condensed']};\r\n font-size: 14px;\r\n line-height: 24px;\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n font-size: 16px;\r\n line-height: 26px;\r\n }\r\n`;\r\nconst BlockquoteStyles = css `\r\n ${fonts.helvetica['57-condensed']};\r\n font-style: italic;\r\n font-size: 18px;\r\n line-height: 28px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n font-size: 20px;\r\n line-height: 30px;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n font-size: 22px;\r\n line-height: 32px;\r\n }\r\n`;\r\nconst Blockquote = styled.blockquote `\r\n ${BlockquoteStyles}\r\n`;\r\nexport const Typography = {\r\n H1Styles,\r\n H2Styles,\r\n H3Styles,\r\n H4Styles,\r\n PLargeStyles,\r\n PStyles,\r\n PSmallStyles,\r\n BlockquoteStyles,\r\n H1,\r\n H2,\r\n H3,\r\n H4,\r\n P,\r\n Blockquote,\r\n};\r\n","import { useEffect, useRef } from 'react';\r\n/**\r\n * Use the IntersectionObserver to track visibility of an element in the viewport.\r\n * @param {IntersectionObserverCallback} callback\r\n * @param {IntersectionObserverInit} options\r\n * @returns {UseIntersectionObserverReturn}\r\n */\r\nfunction useIntersectionObserver(callback, options = {}) {\r\n const observerRef = useRef(null);\r\n const rootRef = useRef(null);\r\n const elementRef = useRef(null);\r\n useEffect(() => {\r\n if (!elementRef.current) {\r\n return undefined;\r\n }\r\n observerRef.current = new IntersectionObserver(callback, {\r\n root: rootRef.current,\r\n ...options,\r\n });\r\n observerRef.current.observe(elementRef.current);\r\n return () => {\r\n if (observerRef.current === null) {\r\n return;\r\n }\r\n observerRef.current.disconnect();\r\n };\r\n }, [callback, options]);\r\n return { elementRef, observerRef, rootRef };\r\n}\r\nexport default useIntersectionObserver;\r\n","import { useState } from 'react';\r\nimport useIntersectionObserver from './useIntersectionObserver';\r\nexport function useInView(options, reverse = false, isEditMode = false) {\r\n const [inView, setInView] = useState(false);\r\n const { elementRef } = useIntersectionObserver((entries) => {\r\n if (entries[0].isIntersecting) {\r\n setInView(true);\r\n }\r\n else if (reverse === true) {\r\n setInView(false);\r\n }\r\n }, options);\r\n return [elementRef, isEditMode ? true : inView];\r\n}\r\n","export var FormatMode;\r\n(function (FormatMode) {\r\n FormatMode[\"Pad\"] = \"pad\";\r\n FormatMode[\"BoxPad\"] = \"boxpad\";\r\n FormatMode[\"Crop\"] = \"crop\";\r\n FormatMode[\"Min\"] = \"min\";\r\n FormatMode[\"Max\"] = \"max\";\r\n FormatMode[\"Stretch\"] = \"stretch\";\r\n})(FormatMode || (FormatMode = {}));\r\nclass ImageTransform {\r\n constructor(imageUrl) {\r\n this._params = [];\r\n // Check if the url has an existing params and pass them into _params first\r\n const split = imageUrl.split('?');\r\n // This means it's got multiple ? in and I'm not dealing with that\r\n if (split.length > 2) {\r\n this._imageUrl = split[0];\r\n return;\r\n }\r\n // If we have a querystring\r\n if (split.length > 1) {\r\n // Split the querystring on &\r\n const queries = split[1].split('&');\r\n // Loop through and add them\r\n for (const query of queries) {\r\n this._params.push(query);\r\n }\r\n }\r\n this._imageUrl = split[0];\r\n }\r\n get url() {\r\n return `${this._imageUrl}?${this._params.join('&')}`;\r\n }\r\n addParameter(key, value) {\r\n if (this._imageUrl.length === 0) {\r\n return;\r\n }\r\n this._params.push(`${key}=${value.toString()}`);\r\n }\r\n width(width) {\r\n this.addParameter('width', width);\r\n return this;\r\n }\r\n height(height) {\r\n this.addParameter('height', height);\r\n return this;\r\n }\r\n mode(mode) {\r\n this.addParameter('mode', mode);\r\n return this;\r\n }\r\n entropyCrop() {\r\n this.addParameter('entropycrop', 1);\r\n return this;\r\n }\r\n toString() {\r\n return this.url;\r\n }\r\n}\r\nexport default ImageTransform;\r\n","import ImageTransform, { FormatMode } from './ImageTransform';\r\nexport default ImageTransform;\r\nexport { FormatMode };\r\n","export default {\r\n blue: {\r\n base: '#006eaf',\r\n light: '#007cf9',\r\n dark: '#00578b',\r\n },\r\n white: '#fff',\r\n black: '#2c2a29',\r\n grey: {\r\n 11: '#53565a',\r\n 7: '#97999b',\r\n 1: '#EDEDED',\r\n },\r\n};\r\n","import { css } from 'styled-components';\r\nexport const helveticaConfig = {\r\n ['57-condensed']: {\r\n family: 'Helvetica Neue LT W05_57 Cond',\r\n weight: 400,\r\n style: 'normal',\r\n },\r\n ['77-condensed-bold']: {\r\n family: 'Helvetica Neue LT W05_77 Bd Cn',\r\n weight: 700,\r\n style: 'normal',\r\n },\r\n ['87-condensed-heavy']: {\r\n family: 'Helvetica Neue LT W05_87 Hv Cn',\r\n weight: 900,\r\n style: 'normal',\r\n },\r\n};\r\n// TODO: I can't for the life of me get the return type of this function to play nicely with styled components when importing, leaving this for now\r\nfunction font(family, weight, style) {\r\n return css `\r\n font-family: ${family};\r\n font-weight: ${weight};\r\n font-style: ${style};\r\n `;\r\n}\r\nexport default {\r\n helvetica: {\r\n ['57-condensed']: font(helveticaConfig['57-condensed'].family, helveticaConfig['57-condensed'].weight, helveticaConfig['57-condensed'].style),\r\n ['77-condensed-bold']: font(helveticaConfig['77-condensed-bold'].family, helveticaConfig['77-condensed-bold'].weight, helveticaConfig['77-condensed-bold'].style),\r\n ['87-condensed-heavy']: font(helveticaConfig['87-condensed-heavy'].family, helveticaConfig['87-condensed-heavy'].weight, helveticaConfig['87-condensed-heavy'].style),\r\n },\r\n ls: (value) => {\r\n return `calc(${value / 1000} * 1em)`;\r\n },\r\n};\r\n","import { css } from 'styled-components';\r\nconst base = css `\r\n display: grid;\r\n grid-gap: 16px;\r\n width: 100%;\r\n`;\r\nconst sitePadding = css `\r\n padding: 18px 0px;\r\n\r\n @media (min-width: 768px) {\r\n padding: 170px;\r\n }\r\n`;\r\nconst Default = css `\r\n ${base};\r\n ${sitePadding};\r\n`;\r\nexport default {\r\n Default,\r\n};\r\n","import { css } from 'styled-components';\r\nimport { from, Device } from './media';\r\nconst FullWidth = css `\r\n grid-column: span 12;\r\n`;\r\nconst Content = css `\r\n grid-column: span 12;\r\n\r\n @media ${from(Device.Tablet)} {\r\n grid-column: 3 / span 8;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n grid-column: 4 / span 6;\r\n }\r\n`;\r\nconst ContentWide = css `\r\n grid-column: span 12;\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n grid-column: 3 / span 8;\r\n }\r\n`;\r\nexport default {\r\n FullWidth,\r\n Content,\r\n ContentWide,\r\n};\r\n","import animation, { fadeInUp } from '@helpers/animation';\r\nimport { Device, from } from '@helpers/media';\r\nimport columns from '@helpers/columns';\r\nimport grids from '@helpers/grids';\r\nimport { Typography } from '@helpers/typography';\r\nimport { brand, fonts } from '@tti/brand-empire';\r\nimport styled, { css } from 'styled-components';\r\nconst Wrapper = styled.section `\r\n ${grids.Default};\r\n min-height: 115px;\r\n position: relative;\r\n align-items: center;\r\n padding: 20px;\r\n\r\n @media ${from(Device.MobileLarge)} {\r\n min-height: 215px;\r\n }\r\n\r\n @media ${from(Device.DesktopSmall)} {\r\n min-height: 350px;\r\n }\r\n`;\r\nconst Title = styled.h1 `\r\n position: relative;\r\n color: ${brand.white};\r\n ${fonts.helvetica['87-condensed-heavy']};\r\n text-transform: uppercase;\r\n line-height: 1.2;\r\n font-size: 25px;\r\n overflow: hidden;\r\n\r\n @media ${from(Device.MobileLarge)} {\r\n font-size: 32px;\r\n }\r\n\r\n @media ${from(Device.DesktopSmall)} {\r\n font-size: 40px;\r\n }\r\n`;\r\nconst Description = styled.p `\r\n ${Typography.PStyles};\r\n margin: 24px 0px;\r\n color: ${brand.white};\r\n`;\r\nconst Image = styled.img `\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n z-index: -2;\r\n`;\r\nconst Media = styled.div `\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -2;\r\n overflow: hidden;\r\n\r\n ${Image} {\r\n filter: blur(7px);\r\n transform: scaleX(1.2);\r\n transition: transform 1s ${animation.easeInOutCubic}, filter 500ms ${animation.easeInOutCubic};\r\n\r\n ${({ inView }) => inView\r\n ? css `\r\n filter: blur(0px);\r\n transform: scaleX(1);\r\n `\r\n : null};\r\n }\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: ${brand.black};\r\n opacity: 0.8;\r\n z-index: -1;\r\n }\r\n`;\r\nconst ReadMoreButtonWrapper = styled.div `\r\n display: flex;\r\n justify-content: center;\r\n`;\r\nconst ReadMoreButton = styled.div `\r\n ${Typography.PStyles};\r\n font-weight: 700;\r\n color: ${brand.white};\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n\r\n svg {\r\n margin-left: 5px;\r\n width: 18px;\r\n height: 9px;\r\n color: ${brand.white};\r\n }\r\n\r\n ${({ showReadMore }) => showReadMore\r\n ? css `\r\n svg {\r\n transform: rotate(-180deg);\r\n }\r\n `\r\n : null}\r\n`;\r\nconst Content = styled.div `\r\n ${columns.ContentWide};\r\n text-align: center;\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n ${Title}, ${ReadMoreButton}, ${Description} {\r\n ${({ inView }) => fadeInUp(inView, 20, 600, 0, animation.easeInOutCubic)};\r\n }\r\n }\r\n`;\r\nexport const SectionTitleStyles = {\r\n Wrapper,\r\n Content,\r\n Description,\r\n Title,\r\n Media,\r\n Image,\r\n ReadMoreButtonWrapper,\r\n ReadMoreButton,\r\n};\r\n","import { Device, from } from '@helpers/media';\r\nimport { useInView } from '@hooks/useInView';\r\nimport ImageTransform, { FormatMode } from '@tti/image-transform';\r\nimport React from 'react';\r\nimport { SectionTitleStyles } from './SectionTitle.styles';\r\nimport ChevronDown from '@img/icons/chevron-down.svg';\r\nconst SectionTitle = (props) => {\r\n const [elementRef, inView] = useInView({ threshold: 0.3 }, false, props.pageContext.isEditMode);\r\n return (React.createElement(SectionTitleStyles.Wrapper, { ref: elementRef },\r\n (props.title || props.description) && (React.createElement(SectionTitleStyles.Content, { inView: inView },\r\n props.title ? (React.createElement(SectionTitleStyles.Title, null,\r\n React.createElement(\"span\", null, props.title))) : null,\r\n props.description ? (React.createElement(React.Fragment, null,\r\n React.createElement(SectionTitleStyles.Description, { dangerouslySetInnerHTML: { __html: props.description } }),\r\n props.readMoreAnchor && props.readMoreText && (React.createElement(SectionTitleStyles.ReadMoreButtonWrapper, null,\r\n React.createElement(SectionTitleStyles.ReadMoreButton, { as: \"a\", href: props.readMoreAnchor },\r\n props.readMoreText,\r\n \" \",\r\n React.createElement(ChevronDown, null)))))) : null)),\r\n React.createElement(SectionTitleStyles.Media, { inView: inView },\r\n React.createElement(\"picture\", null,\r\n React.createElement(\"source\", { media: from(Device.DesktopLarge), sizes: \"100vw\", srcSet: `${new ImageTransform(props.imageUrl).width(1920).height(350).mode(FormatMode.Crop)} 1920w` }),\r\n React.createElement(\"source\", { media: from(Device.Desktop), sizes: \"100vw\", srcSet: `${new ImageTransform(props.imageUrl).width(1366).height(350).mode(FormatMode.Crop)} 1366w` }),\r\n React.createElement(\"source\", { media: from(Device.DesktopSmall), sizes: \"100vw\", srcSet: `${new ImageTransform(props.imageUrl).width(1280).height(350).mode(FormatMode.Crop)} 1280w` }),\r\n React.createElement(\"source\", { media: from(Device.TabletLarge), sizes: \"100vw\", srcSet: `${new ImageTransform(props.imageUrl).width(1024).height(215).mode(FormatMode.Crop)} 1024w` }),\r\n React.createElement(\"source\", { media: from(Device.Tablet), sizes: \"100vw\", srcSet: `${new ImageTransform(props.imageUrl).width(768).height(215).mode(FormatMode.Crop)} 768w` }),\r\n React.createElement(\"source\", { media: from(Device.MobileLarge), sizes: \"100vw\", srcSet: `${new ImageTransform(props.imageUrl).width(480).height(215).mode(FormatMode.Crop)} 480w` }),\r\n React.createElement(\"source\", { media: from(Device.MobileSmall), sizes: \"100vw\", srcSet: `${new ImageTransform(props.imageUrl).width(320).height(115).mode(FormatMode.Crop)} 320w` }),\r\n React.createElement(SectionTitleStyles.Image, { src: new ImageTransform(props.imageUrl).url, alt: props.title, sizes: \"100vw\" })))));\r\n};\r\nexport default SectionTitle;\r\n","import { css, keyframes } from 'styled-components';\r\nconst easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1)';\r\nexport default {\r\n easeInOutCubic,\r\n};\r\nconst reset = keyframes `\r\n 100% {\r\n transform: translate(0%, 0%);\r\n opacity: 1;\r\n }\r\n`;\r\nexport function fadeInLeft(amount, duration, delay, easingFunc) {\r\n return css `\r\n opacity: 0;\r\n transform: translateX(-${amount}px);\r\n animation: ${reset} ${duration}ms ${delay}ms ${easingFunc} forwards;\r\n `;\r\n}\r\nexport function fadeIn(inView, duration, delay, easingFunc) {\r\n return css `\r\n transition: opacity ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n ${inView\r\n ? css `\r\n opacity: 1;\r\n `\r\n : css `\r\n opacity: 0;\r\n `}\r\n `;\r\n}\r\nexport function fadeInUp(inView, amount, duration, delay, easingFunc) {\r\n return css `\r\n transition: opacity ${duration}ms ${delay}ms ${easingFunc}, transform ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n ${inView\r\n ? css `\r\n opacity: 1;\r\n transform: none;\r\n `\r\n : css `\r\n opacity: 0;\r\n transform: translateY(${amount}px);\r\n `}\r\n `;\r\n}\r\nexport function slideUp(inView, order, delay = 300, easingFunc = easeInOutCubic, animateOnExit = true) {\r\n if (inView) {\r\n return css `\r\n transform: translateY(0%);\r\n transition: transform 650ms ${delay + order * 100}ms ${easingFunc};\r\n `;\r\n }\r\n else if (animateOnExit) {\r\n return css `\r\n transform: translateY(120%);\r\n transition: transform 650ms ${delay + order * 100}ms ${easingFunc};\r\n `;\r\n }\r\n else {\r\n return css `\r\n transform: translateY(120%);\r\n `;\r\n }\r\n}\r\nexport function greyscaleImgFade(inView, duration, delay, filterDelay, easingFunc) {\r\n return css `\r\n transition: opacity ${duration}ms ${delay}ms ${easingFunc}, filter ${duration}ms ${filterDelay}ms ${easingFunc};\r\n\r\n ${inView\r\n ? css `\r\n opacity: 1;\r\n filter: grayscale(0);\r\n `\r\n : css `\r\n opacity: 0;\r\n filter: grayscale(1);\r\n `}\r\n `;\r\n}\r\n","import { css } from 'styled-components';\r\nimport { Device, from } from './media';\r\nconst base = css `\r\n display: grid;\r\n grid-gap: 16px;\r\n width: 100%;\r\n grid-template-columns: repeat(12, 1fr);\r\n`;\r\nconst baseFixed = css `\r\n display: grid;\r\n grid-gap: 16px;\r\n width: 100%;\r\n // 78px being the width of one column at 375 of the base grid above\r\n grid-auto-columns: 78px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n // 117px being the width of one column at 1920 of the base grid above\r\n grid-auto-columns: 117px;\r\n }\r\n`;\r\nexport const SitePadding = css `\r\n padding-left: 18px;\r\n padding-right: 18px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n padding-left: 40px;\r\n padding-right: 40px;\r\n }\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n padding-left: 70px;\r\n padding-right: 70px;\r\n }\r\n\r\n @media ${from(Device.DesktopSmall)} {\r\n padding-left: 130px;\r\n padding-right: 130px;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n padding-left: 170px;\r\n padding-right: 170px;\r\n }\r\n`;\r\nconst SitePaddingBreakoutLeft = css `\r\n left: 0;\r\n right: 0px;\r\n grid-column: span 12;\r\n margin-left: -18px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n margin-left: -40px;\r\n }\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n margin-left: -70px;\r\n }\r\n\r\n @media ${from(Device.DesktopSmall)} {\r\n margin-left: -130px;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n margin-left: -170px;\r\n }\r\n`;\r\nconst SitePaddingBreakoutRight = css `\r\n left: 0;\r\n right: 0px;\r\n grid-column: span 12;\r\n margin-right: -18px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n margin-right: -40px;\r\n }\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n margin-right: -70px;\r\n }\r\n\r\n @media ${from(Device.DesktopSmall)} {\r\n margin-right: -130px;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n margin-right: -170px;\r\n }\r\n`;\r\nconst SitePaddingBreakout = css `\r\n left: 0;\r\n right: 0px;\r\n grid-column: span 12;\r\n margin-left: -18px;\r\n margin-right: -18px;\r\n\r\n @media ${from(Device.Tablet)} {\r\n margin-left: -40px;\r\n margin-right: -40px;\r\n }\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n margin-left: -70px;\r\n margin-right: -70px;\r\n }\r\n\r\n @media ${from(Device.DesktopSmall)} {\r\n margin-left: -130px;\r\n margin-right: -130px;\r\n }\r\n\r\n @media ${from(Device.DesktopLarge)} {\r\n margin-left: -170px;\r\n margin-right: -170px;\r\n }\r\n`;\r\nconst Default = css `\r\n ${base};\r\n ${SitePadding};\r\n`;\r\nconst Fixed = css `\r\n ${baseFixed};\r\n`;\r\nexport default {\r\n Default,\r\n Fixed,\r\n SitePaddingBreakout,\r\n SitePaddingBreakoutLeft,\r\n SitePaddingBreakoutRight,\r\n base,\r\n};\r\n","import React from \"react\";\nexport default (({\n styles = {},\n ...props\n}) => );"],"sourceRoot":""}