}\n />\n);\n\nexport default ProductCategoryCardsQuery;\n\nconst componentQuery = graphql`\n query ProductCategoryCardsQuery {\n bundleImages: allContentfulAsset(\n filter: { contentful_id: { eq: \"2RQ7pdzdW9JmLk0z0shhzM\" } }\n ) {\n nodes {\n node_locale\n title\n description\n fluid(maxWidth: 580, quality: 90) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n }\n allContentfulProductCategory {\n nodes {\n node_locale\n shortName\n contentful_id\n cardImage {\n title\n description\n fluid(maxWidth: 580, quality: 90) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n backgroundColor\n shopLandingReference {\n slug\n header {\n childMarkdownRemark {\n rawMarkdownBody\n }\n }\n }\n }\n }\n }\n`;\n","// to indexed object, toObject with fallback for non-array-like ES3 strings\nvar IObject = require('./_iobject');\nvar defined = require('./_defined');\nmodule.exports = function (it) {\n return IObject(defined(it));\n};\n","\"use strict\";\n\nvar _interopRequireWildcard3 = require(\"@babel/runtime/helpers/interopRequireWildcard\");\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutPropertiesLoose\"));\n\nvar _interopRequireWildcard2 = _interopRequireDefault(require(\"@babel/runtime/helpers/interopRequireWildcard\"));\n\nvar _inheritsLoose2 = _interopRequireDefault(require(\"@babel/runtime/helpers/inheritsLoose\"));\n\nvar _react = _interopRequireWildcard3(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _index = _interopRequireDefault(require(\"../index\"));\n\nvar ImageWithIEPolyfill = /*#__PURE__*/function (_Component) {\n (0, _inheritsLoose2.default)(ImageWithIEPolyfill, _Component);\n\n function ImageWithIEPolyfill() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _Component.call.apply(_Component, [this].concat(args)) || this;\n _this.imageRef = _this.props.innerRef || /*#__PURE__*/(0, _react.createRef)();\n _this.placeholderRef = /*#__PURE__*/(0, _react.createRef)();\n return _this;\n }\n\n var _proto = ImageWithIEPolyfill.prototype;\n\n // Load object-fit/position polyfill if required (e.g. in IE)\n _proto.componentDidMount = function componentDidMount() {\n var _this2 = this;\n\n var testImg = document.createElement(\"img\");\n\n if (typeof testImg.style.objectFit === \"undefined\" || typeof testImg.style.objectPosition === \"undefined\") {\n Promise.resolve().then(function () {\n return (0, _interopRequireWildcard2.default)(require(\"object-fit-images\"));\n }).then(function (_ref) {\n var ObjectFitImages = _ref.default;\n ObjectFitImages(_this2.imageRef.current.imageRef.current);\n ObjectFitImages(_this2.placeholderRef.current);\n });\n }\n };\n\n _proto.render = function render() {\n var _this$props = this.props,\n objectFit = _this$props.objectFit,\n objectPosition = _this$props.objectPosition,\n props = (0, _objectWithoutPropertiesLoose2.default)(_this$props, [\"objectFit\", \"objectPosition\"]);\n var polyfillStyle = {\n objectFit: objectFit,\n objectPosition: objectPosition,\n fontFamily: \"\\\"object-fit: \" + objectFit + \"; object-position: \" + objectPosition + \"\\\"\"\n };\n return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({\n ref: this.imageRef,\n placeholderRef: this.placeholderRef\n }, props, {\n imgStyle: (0, _extends2.default)({}, props.imgStyle, polyfillStyle),\n placeholderStyle: (0, _extends2.default)({}, props.placeholderStyle, polyfillStyle)\n }));\n };\n\n return ImageWithIEPolyfill;\n}(_react.Component); // If you modify these propTypes, please don't forget to update following files as well:\n// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/withIEPolyfill/index.d.ts\n// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/README.md#gatsby-image-props\n// https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/gatsby-image.md#gatsby-image-props\n\n\nImageWithIEPolyfill.propTypes = {\n objectFit: _propTypes.default.string,\n objectPosition: _propTypes.default.string\n};\nImageWithIEPolyfill.defaultProps = {\n objectFit: \"cover\",\n objectPosition: \"50% 50%\"\n};\n\nvar _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {\n return /*#__PURE__*/_react.default.createElement(ImageWithIEPolyfill, (0, _extends2.default)({}, props, {\n innerRef: ref\n }));\n});\n\nexports.default = _default;","import React from \"react\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { responsive, media } from \"../utils/style\";\n\n// Components\nimport Img from \"gatsby-image/withIEPolyfill\";\n\n// Styled Elements\nconst Wrapper = styled.div`\n background-color: ${p => p.backgroundColor};\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n margin-top: 52px;\n\n ${responsive.md`\n margin-top: 64px;\n `};\n\n width: calc(100vw - 16px);\n height: calc(100vw - 16px);\n\n &.short {\n height: calc((100vw - 16px) * 0.72368421052);\n }\n\n &.height-fit {\n height: fit-content;\n }\n\n &.full-width-mobile {\n ${media.mobile`\n width: 100%;\n `}\n }\n\n padding-left: 8px;\n padding-right: 8px;\n\n ${responsive.sm`\n width: calc(100vw - 48px);\n height: calc((100vw - 48px) * 0.52778);\n padding-left: 0px;\n padding-right: 0px;\n\n &.short {\n height: calc((100vw - 48px) * 0.52778);\n }\n\n &.height-fit {\n height: fit-contet;\n }\n\n `}\n\n ${responsive.md`\n height: calc((100vw - 48px) * 0.3883196721);\n\n &.short {\n height: calc((100vw - 48px) * 0.3883196721);\n }\n\n &.height-fit {\n height: fit-content;\n }\n\n `}\n\n ${responsive.lg`\n width: calc(100vw - 80px);\n height: calc((100vw - 80px) * 0.3888024883);\n max-width: 1920px;\n max-height: calc(1920px * 0.3888024883);\n\n &.short {\n height: calc((100vw - 80px) * 0.3888024883);\n }\n\n &.height-fit {\n height: fit-content;\n max-height: fit-content;\n }\n\n `}\n\n > .container {\n height: 100%;\n\n > .row {\n height: 100%;\n\n > .col-12 {\n height: 100%;\n }\n }\n }\n`;\n\nconst Column = styled.div`\n position: relative;\n`;\n\nconst ContentArea = styled.div`\n z-index: 1;\n position: relative;\n height: 100%;\n width: 100%;\n`;\n\nexport default class PageHero extends React.Component {\n render() {\n const {\n id = \"page-hero\",\n backgroundColor = \"#ffd600\",\n children,\n className,\n columnStyling = \"col-12\",\n imageMobile,\n imageDesktop,\n imageObjectPosition = \"50% 50%\",\n } = this.props;\n\n const defaultStyle = {\n position: \"absolute\",\n left: 0,\n top: 0,\n width: \"100%\",\n height: \"100%\",\n zIndex: \"0\",\n userSelect: \"none\",\n userDrag: \"none\",\n pointerEvents: \"none\",\n touchCallout: \"none\",\n };\n\n return (\n \n \n
\n \n {children}\n \n
\n
\n {imageMobile && (\n
\n )}\n {imageDesktop && (\n
\n )}\n
\n \n {hasImage && this.renderImage()}\n {title}\n {detailCopy}\n {hasCta && (\n \n {ctaText}\n \n )}\n \n
\n \n \n \n );\n }\n}\n\nexport const myQuery = graphql`\n fragment gutterSummary on ContentfulGutterAnnotation {\n __typename\n title\n detailCopy\n ctaText\n ctaUrl\n image {\n file {\n url\n }\n fluid(maxWidth: 280, maxHeight: 180, quality: 100) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Gutter from \"../Gutter\";\nimport { Font, media, rem, Color, maxLines } from \"../../utils/style\";\nimport MagicLink from \"../MagicLink\";\nimport { graphql } from \"gatsby\";\n\nconst Annotation = styled.div`\n position: relative;\n top: ${p => {\n return p.top ? `${p.top}px` : \"45px\";\n }}\n ${media.tablet`\n position: static;\n `};\n`;\n\nconst CtaContent = styled.div`\n border: 2px solid ${Color.ritualBlue};\n padding: 40px;\n display: flex;\n align-items: flex-end;\n justify-content: left;\n transition: all 0.3s;\n\n * {\n transition: all 0.3s;\n }\n\n &:hover {\n background: ${Color.ritualBlue};\n color: white;\n\n * {\n color: white;\n }\n\n .fact-link {\n background: white !important;\n\n span {\n color: ${Color.ritualBlue} !important;\n }\n }\n }\n\n ${media.notDesktop`\n padding: 40px 24px;\n `} ${media.tablet`\n margin: 30px 0;\n `};\n`;\n\nconst Box = styled.div`\n padding: 0;\n width: 100%;\n`;\n\nconst CtaTitle = styled.h2`\n ${Font.circular}\n color: ${Color.ritualBlue};\n font-size: ${rem(18)};\n font-weight: 400;\n text-align: left;\n text-transform: uppercase;\n letter-spacing: 1px;\n line-height: ${rem(26)};\n`;\n\nconst CtaCopy = styled.p`\n ${Font.dutch} margin: 64px 0 32px;\n color: ${Color.ritualBlue};\n font-size: ${rem(20)};\n line-height: ${rem(30)};\n font-weight: normal;\n text-align: left;\n\n ${maxLines(26, 3)} ${media.notDesktop`\n font-size: ${rem(18)};\n line-height: ${rem(24)}\n ${maxLines(24, 3)}\n `};\n`;\n\nconst CtaLink = styled(MagicLink).attrs({\n className: \"btn btn--primary fact-link\",\n})`\n width: 100% !important;\n margin: 0;\n`;\n\nexport default class GutterCta extends React.Component {\n render() {\n let {\n title,\n shortCopy,\n ctaText,\n ctaUrl,\n top,\n overrideContent,\n hideGutter,\n className,\n } = this.props;\n if (overrideContent || !title) {\n return {overrideContent};\n }\n return (\n \n \n \n \n {title}\n {shortCopy}\n \n {ctaText}\n \n \n \n \n \n );\n }\n}\n\nexport const myQuery = graphql`\n fragment gutterCtaSummary on ContentfulGutterCta {\n __typename\n title\n shortCopy\n ctaUrl\n ctaText\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Gutter from \"../Gutter\";\nimport { Font, media, rem, Color } from \"../../utils/style\";\nimport MagicLink, { magicUrl } from \"../MagicLink\";\nimport Img from \"gatsby-image\";\nimport { graphql } from \"gatsby\";\n\nconst StyledGutter = styled(Gutter)``;\n\nconst Annotation = styled.div`\n position: relative;\n top: ${p => {\n return p.top ? `${p.top}px` : \"45px\";\n }}\n ${media.tablet`\n position: static;\n `};\n`;\n\nconst CtaCopy = styled.p`\n ${Font.dutch}\n color: ${Color.ritualBlue};\n font-size: ${rem(20)};\n line-height: ${rem(30)};\n font-style: italic;\n text-align: left;\n letter-spacing: 0;\n padding: 24px;\n margin: 0;\n\n ${media.tablet`\n font-size: ${rem(18)};\n line-height: ${rem(28)};\n `}\n`;\n\nconst CtaContent = styled.div`\n border: 2px solid ${Color.ritualBlue};\n display: flex;\n align-items: flex-end;\n justify-content: left;\n transition: color 200ms;\n\n * {\n transition: color 200ms;\n }\n\n &:hover {\n cursor: pointer;\n color: white;\n\n * {\n color: white;\n }\n\n ${CtaCopy} {\n color: ${Color.ritualBlue};\n }\n }\n\n ${media.tablet`\n margin: 30px 0;\n `};\n`;\n\nconst Box = styled.div`\n padding: 0;\n width: 100%;\n`;\n\nconst CategoryName = styled.h2`\n ${Font.circular}\n color: ${Color.ritualBlue};\n font-size: ${rem(18)};\n font-weight: 300;\n text-align: left;\n text-transform: uppercase;\n letter-spacing: 1px;\n line-height: ${rem(28)};\n`;\n\nconst ArticleName = styled.h2`\n ${Font.circular}\n color: ${Color.ritualBlue};\n font-size: ${rem(30)};\n font-weight: 500;\n text-align: left;\n letter-spacing: 0;\n line-height: ${rem(36)};\n margin: 0;\n\n ${media.tablet`\n font-size: ${rem(26)};\n line-height: ${rem(36)};\n `}\n`;\n\nconst ImageArea = styled.div`\n width: 100%;\n height: 300px;\n display: flex;\n align-items: flex-end;\n position: relative;\n\n ${media.tablet`\n height: 250px;\n `};\n`;\n\nconst ImageContent = styled.div`\n margin: 24px;\n z-index: 1;\n`;\n\nexport default class GutterImage extends React.Component {\n renderContent() {\n let { title, shortCopy, article, image } = this.props;\n return (\n \n \n {shortCopy && {shortCopy}}\n \n \n \n {article.category.title}\n {article.title}\n \n \n \n \n );\n }\n\n render() {\n let {\n title,\n article,\n top,\n overrideContent,\n className,\n hideGutter,\n } = this.props;\n if (overrideContent || !title) {\n return {overrideContent};\n }\n return (\n \n \n {article ? (\n \n {this.renderContent()}\n \n ) : (\n this.renderContent()\n )}\n \n \n );\n }\n}\n\nexport const myQuery = graphql`\n fragment gutterImageSummary on ContentfulGutterImage {\n __typename\n title\n shortCopy\n article {\n __typename\n title\n slug\n category {\n title\n }\n }\n image {\n file {\n url\n }\n fluid(maxHeight: 300, quality: 90) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n backgroundColor\n }\n`;\n","import React from \"react\";\nimport Gutter from \"../Gutter\";\nimport GutterAnnotation from \"./GutterAnnotation\";\nimport GutterCta from \"./GutterCta\";\nimport GutterImage from \"./GutterImage\";\n\nexport default class GutterElement extends React.Component {\n render() {\n let { __typename, title, overrideContent } = this.props;\n if (overrideContent || !title) {\n return {overrideContent};\n }\n if (__typename === \"ContentfulGutterAnnotation\") {\n return ;\n } else if (__typename === \"ContentfulGutterCta\") {\n return ;\n } else if (__typename === \"ContentfulGutterImage\") {\n return ;\n } else {\n return null;\n }\n }\n}\n","import React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport $ from \"jquery\";\nimport styled from \"styled-components\";\nimport GutterElement from \"./GutterElement\";\nimport { rem, atMost, media, Font, Color } from \"../../utils/style\";\n\nconst Content = styled.div`\n * {\n ${Font.dutch}\n }\n\n p {\n ${Font.dutch}\n font-size: ${rem(20)};\n line-height: ${rem(32)};\n margin: 0 0 ${rem(26)};\n\n &:last-of-type {\n margin: 0;\n }\n\n ${media.mobile`\n font-size: ${rem(17)};\n line-height: ${rem(28)};\n `}\n }\n\n h1,\n h2,\n h3 {\n ${Font.circular}\n font-weight: 400;\n margin-bottom: ${rem(16)};\n\n em {\n ${Font.dutch}\n }\n }\n\n a {\n ${Font.dutch}\n cursor: pointer;\n text-decoration: underline;\n text-decoration-color: ${Color.ritualBlue};\n\n &:hover {\n text-decoration: underline;\n text-decoration-color: ${Color.ritualYellow};\n }\n }\n\n li {\n font-size: ${rem(20)};\n\n &::marker {\n ${Font.circular}\n }\n }\n\n strong, em {\n ${Font.circular}\n }\n\n &.answer {\n position: relative;\n padding-left: 70px;\n\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 32px;\n height: 32px;\n border-radius: 32px;\n background-color: ${Color.ritualBlue};\n }\n\n ${media.mobile`\n padding-left: 45px;\n `}\n }\n`;\n\nexport default class ContentWithCallout extends React.Component {\n constructor(props) {\n super(props);\n this.answerRef = undefined;\n this.shouldInterpolate = false;\n this.state = { isMobile: false };\n }\n\n componentDidMount() {\n let { hideGutter, content, gutterItem } = this.props;\n this.updateGutterItemOnResize();\n this.onResize();\n this.shouldInterpolate =\n gutterItem && this.shouldInterpolateAnnotation(content);\n if (hideGutter) {\n hideGutter(this.shouldInterpolate);\n }\n }\n\n componentWillUnmount() {\n this.unbindResize();\n }\n\n unbindResize() {\n $(window).off(\"resize.contentCallout\");\n }\n\n updateGutterItemOnResize() {\n $(window).on(\"resize.contentCallout\", this.onResize.bind(this));\n }\n\n onResize() {\n this.updateIsMobile();\n this.updateCodePosition();\n }\n\n updateIsMobile() {\n const shouldBeMobile = atMost.mobile();\n if (this.state.isMobile !== shouldBeMobile) {\n this.setState({ isMobile: shouldBeMobile });\n }\n }\n\n updateCodePosition() {\n if (this.answerRef) {\n let firstCode = $(this.answerRef).find(\"code\");\n let codeTop = firstCode.length\n ? firstCode.position().top + firstCode.outerHeight() / 2 + 20\n : 45;\n this.props.onCalloutMoved(codeTop);\n }\n }\n\n regexPeriodAndSpaceAfterCallout() {\n return new RegExp(/<\\/code>((.|[\\r\\n])*?)\\.\\s/);\n }\n\n shouldInterpolateAnnotation(content) {\n return this.regexPeriodAndSpaceAfterCallout().test(content);\n }\n\n insertAnnotationAfterEndOfSentence(content, gutterItem) {\n let gutterItemHtml = renderToStaticMarkup(\n ,\n );\n let nestableContent = content;\n let regexResult = \"$&\"; // Regex syntax for any matches found\n return nestableContent.replace(\n this.regexPeriodAndSpaceAfterCallout(),\n regexResult + \"\" + gutterItemHtml + \"\",\n );\n }\n\n renderContent(content, type) {\n return (\n {\n this.answerRef = r;\n }}\n dangerouslySetInnerHTML={{ __html: content }}\n />\n );\n }\n\n renderContentWithAnnotation(content, type) {\n return (\n \n \n
\n );\n }\n\n render() {\n let { content, gutterItem, type } = this.props;\n let { isMobile } = this.state;\n let contentWithAnnotation = this.shouldInterpolate\n ? this.insertAnnotationAfterEndOfSentence(content, gutterItem)\n : content;\n return (\n \n {isMobile\n ? this.renderContentWithAnnotation(contentWithAnnotation, type)\n : this.renderContent(content, type)}\n
\n );\n }\n}\n","import React from \"react\";\nimport $ from \"jquery\";\nimport styled from \"styled-components\";\nimport GutterElement from \"./GutterElement\";\nimport ContentWithCallout from \"./ContentWithCallout\";\nimport Row from \"../Row\";\nimport { Font, media, Color, rem } from \"../../utils/style\";\nimport { graphql } from \"gatsby\";\n\nconst Article = styled(Row)`\n color: ${Color.ritualBlue};\n margin-top: 30px;\n margin-bottom: 30px;\n`;\n\nconst ArticleQuestion = styled.h3`\n ${Font.circular} position: relative;\n font-size: ${rem(22)};\n line-height: ${rem(30)};\n letter-spacing: -0.2px;\n padding-left: 70px;\n margin: 0 0 26px;\n\n ${media.mobile`\n padding-left: 45px;\n font-size: ${rem(22)};\n line-height: ${rem(30)};\n `} &:after {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 32px;\n height: 32px;\n border-radius: 32px;\n background-color: ${Color.ritualYellow};\n }\n\n &:before {\n content: \"\";\n position: absolute;\n left: 2px;\n top: 34px;\n width: 28px;\n height: 3px;\n background-color: ${Color.ritualYellow};\n }\n`;\n\nexport default class ArticleQA extends React.Component {\n constructor(props) {\n super(props);\n this.annotation = null;\n this.questionRef = null;\n this.state = { annotationTop: 0, hideGutter: false };\n }\n\n setAnnotationTop(top) {\n this.setState({\n annotationTop: top + $(this.questionRef).outerHeight(),\n });\n }\n\n setHideGutter(hideGutter) {\n this.setState({\n hideGutter: hideGutter,\n });\n }\n\n render() {\n let { question, answer, gutterItem } = this.props.data;\n let firstGutterItem = gutterItem ? gutterItem[0] : null;\n let { annotationTop, hideGutter } = this.state;\n return (\n \n {\n this.annotation = p;\n }}\n {...firstGutterItem}\n overrideContent={this.props.gutterContent}\n top={annotationTop}\n hideGutter={hideGutter}\n className=\"d-md-block\"\n />\n \n
(this.questionRef = p)}>\n {question}\n \n
\n
\n
(this.mythRef = p)}>\n \n \n \n \n {myth}\n \n
{\n this.answerRef = r;\n }}\n >\n \n \n \n \n \n \n \n \n
\n \n );\n }\n}\n\nexport const myQuery = graphql`\n fragment articleAnswerBlock on ContentfulContentInterviewStandaloneAnswer {\n answer {\n childMarkdownRemark {\n html\n }\n }\n contentBody: answer {\n childMarkdownRemark {\n timeToRead\n }\n }\n gutterItem {\n ... on ContentfulGutterAnnotation {\n ...gutterSummary\n }\n ... on ContentfulGutterCta {\n ...gutterCtaSummary\n }\n ... on ContentfulGutterImage {\n ...gutterImageSummary\n }\n }\n }\n`;\n","import $ from \"jquery\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport Row from \"../Row\";\nimport GutterElement from \"./GutterElement\";\nimport Img from \"gatsby-image\";\nimport { media, Color } from \"../../utils/style\";\nimport { graphql } from \"gatsby\";\n\nconst ImageModule = styled(Row)`\n margin-top: 30px;\n margin-bottom: 30px;\n`;\n\nconst ImageCol = styled.div.attrs({\n className: \"col-12 col-md-7 offset-md-1\",\n})``;\n\nconst ImageWrapper = styled.div`\n border: 4px solid ${Color.ritualBlue};\n padding: 25px 35px;\n\n ${media.mobile`\n padding: 10px 15px;\n border-width: 2px;\n `} img {\n display: block;\n width: 100%;\n margin: 0;\n }\n`;\n\nexport default class ArticleStandaloneImage extends React.Component {\n constructor(props) {\n super(props);\n this.annotation = null;\n this.imageRef = null;\n this.state = {\n annotationTop: 0,\n hideGutter: false,\n };\n }\n\n setAnnotationTop(top) {\n this.setState({\n annotationTop: top + $(this.imageRef).outerHeight(),\n });\n }\n\n setHideGutter(hideGutter) {\n this.setState({\n hideGutter: hideGutter,\n });\n }\n\n render() {\n let {\n data: { image, gutterItem },\n gutterContent,\n } = this.props;\n let firstGutterItem = gutterItem ? gutterItem[0] : null;\n let { annotationTop, hideGutter } = this.state;\n return (\n \n \n \n (this.imageRef = r)}>\n \n \n \n \n );\n }\n}\n\nexport const myQuery = graphql`\n fragment standaloneImageBlock on ContentfulContentStandaloneImage {\n title\n image {\n description\n file {\n url\n }\n fluid(maxWidth: 960, quality: 90) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n gutterItem {\n __typename\n ... on ContentfulGutterAnnotation {\n ...gutterSummary\n }\n ... on ContentfulGutterCta {\n ...gutterCtaSummary\n }\n ... on ContentfulGutterImage {\n ...gutterImageSummary\n }\n }\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Row from \"../Row\";\nimport Gutter from \"../Gutter\";\nimport GutterAnnotation from \"./GutterAnnotation\";\nimport { Font, media, rem, Color } from \"../../utils/style\";\nimport { graphql } from \"gatsby\";\n\nconst Quote = styled.blockquote.attrs({\n className: \"col-12 col-md-7 offset-md-1\",\n})`\n margin-top: 30px;\n margin-bottom: 30px;\n\n p {\n position: relative;\n ${Font.circular}\n color: ${Color.ritualBlue};\n font-size: ${rem(34)};\n line-height: ${rem(40)};\n letter-spacing: -0.5px;\n font-weight: 400;\n text-align: left;\n margin-bottom: 0;\n padding-left: 70px;\n\n ${media.mobile`\n padding-left: 45px;\n font-size: ${rem(22)};\n line-height: ${rem(30)};\n letter-spacing: -0.2px;\n `}\n\n &:after {\n content: '';\n position: absolute;\n left: 0;\n width: 4px;\n top: 0;\n bottom: 0;\n background-color: ${Color.ritualBlue};\n\n ${media.mobile`\n width: 6px;\n `}\n }\n }\n`;\n\nexport default class ArticleBlockQuote extends React.Component {\n renderGutter() {\n let {\n gutterContent,\n data: { gutterItem },\n } = this.props;\n let { annotationTop } = this.state;\n return gutterContent ? (\n {gutterContent}\n ) : (\n \n );\n }\n\n render() {\n let { quote } = this.props.data;\n return (\n \n \n \n
\n );\n }\n}\n\nexport const myQuery = graphql`\n fragment blockQuoteBlock on ContentfulContentBlockquote {\n quote {\n childMarkdownRemark {\n html\n }\n }\n contentBody: quote {\n childMarkdownRemark {\n timeToRead\n }\n }\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Row from \"../Row\";\nimport GutterElement from \"./GutterElement\";\nimport ContentWithCallout from \"./ContentWithCallout\";\nimport { processHtml } from '../../utils/markdown';\nimport { graphql } from \"gatsby\";\n\nimport { Font, media, rem, Color } from \"../../utils/style\";\n\nconst ContentRow = styled(Row)`\n margin-top: 30px;\n margin-bottom: 30px;\n`;\n\nconst Content = styled.div.attrs({\n className: \"col-12 col-md-7 offset-md-1\",\n})`\n * {\n color: ${Color.ritualBlue};\n }\n\n .gatsby-resp-image-wrapper {\n margin: 30px 0;\n }\n\n h3 {\n ${Font.circular}\n font-size: ${rem(24)};\n line-height: ${rem(32)};\n margin: 0 0 ${rem(26)};\n\n ${media.mobile`\n font-size: ${rem(22)};\n line-height: ${rem(30)};\n `}\n }\n\n p {\n ${Font.dutch}\n font-size: ${rem(20)};\n line-height: ${rem(30)};\n margin: 0 0 ${rem(26)};\n\n &:last-of-type {\n margin: 0;\n }\n\n ${media.mobile`\n font-size: ${rem(18)};\n line-height: ${rem(28)};\n `}\n }\n`;\n\nexport default class ArticleContentGeneric extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n annotationTop: 0,\n hideGutter: false,\n };\n }\n\n setAnnotationTop(top) {\n this.setState({\n annotationTop: top,\n });\n }\n\n setHideGutter(hideGutter) {\n this.setState({\n hideGutter: hideGutter,\n });\n }\n\n render() {\n let {\n data: { body, gutterItem },\n gutterContent,\n } = this.props;\n let firstGutterItem = gutterItem ? gutterItem[0] : null;\n let { annotationTop, hideGutter } = this.state;\n const content = processHtml(body.childMarkdownRemark.html);\n\n return (\n \n \n \n \n \n \n );\n }\n}\n\nexport const myQuery = graphql`\n fragment genericContentBlock on ContentfulContentGeneric {\n body {\n childMarkdownRemark {\n html\n }\n }\n contentBody: body {\n childMarkdownRemark {\n timeToRead\n }\n }\n gutterItem {\n ... on ContentfulGutterAnnotation {\n ...gutterSummary\n }\n ... on ContentfulGutterCta {\n ...gutterCtaSummary\n }\n ... on ContentfulGutterImage {\n ...gutterImageSummary\n }\n }\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Font, media, rem, Color } from \"../../utils/style\";\nimport Text from \"../Text\";\n\nconst Wrapper = styled.div`\n border: 2px solid ${Color.ritualBlue};\n padding: 40px;\n\n ${media.notDesktop`\n padding: 30px 24px;\n margin-bottom: 60px;\n `};\n`;\n\nconst Content = styled.div`\n text-align: left;\n\n ul {\n padding-left: 0;\n margin: 0;\n }\n\n li, p {\n ${Font.dutch}\n color: ${Color.ritualBlue};\n font-size: ${rem(20)};\n line-height: ${rem(30)};\n font-style: italic;\n margin: 0 0 20px;\n list-style-position: inside;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n * {\n font: inherit;\n color: inherit;\n }\n\n ${media.notDesktop`\n font-size: ${rem(18)};\n line-height: ${rem(28)};\n `}\n }\n`;\n\nconst Title = styled.h3`\n ${Font.circular};\n color: ${Color.ritualBlue};\n font-size: ${rem(20)};\n line-height: ${rem(30)};\n font-weight: 400;\n text-align: left;\n letter-spacing: 0;\n margin: 0 0 16px;\n\n ${media.notDesktop`\n font-size: ${rem(18)};\n line-height: ${rem(28)};\n `};\n`;\n\nexport default class ArticleEssentialTakeaways extends React.Component {\n render() {\n let {\n childMarkdownRemark: { html },\n } = this.props.content;\n return (\n \n \n <Text\n id=\"hub.essential-takeaways.title\"\n defaultMessage=\"Essential Takeaways\"\n />\n \n \n \n );\n }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Row from \"../Row\";\nimport Gutter from \"../Gutter\";\nimport { graphql } from \"gatsby\";\n\nimport { Font, media, rem, Color } from \"../../utils/style\";\n\nconst Content = styled.div.attrs({\n className: \"col-12 col-md-7 offset-md-1\",\n})`\n margin-top: 30px;\n margin-bottom: 50px;\n display: flex;\n align-items: center;\n\n ${media.mobile`\n margin-bottom: 30px;\n `};\n`;\n\nconst BioAvatar = styled.div`\n position: relative;\n width: 114px;\n height: 114px;\n overflow: hidden;\n border-radius: 114px;\n float: left;\n\n ${media.mobile`\n width: 84px;\n height: 84px;\n align-self: start;\n `} img {\n display: block;\n width: 100%;\n height: 100%;\n margin: 0;\n }\n`;\n\nconst BioContent = styled.div`\n float: left;\n padding-left: 40px;\n width: calc(100% - 114px);\n ${Font.dutch}\n color: ${Color.ritualBlue};\n font-size: ${rem(20)};\n line-height: ${rem(30)};\n\n ${media.mobile`\n width: calc(100% - 84px);\n padding-left: 14px;\n padding-top: 0;\n font-size: ${rem(18)};\n line-height: ${rem(28)};\n `}\n\n p {\n font: inherit;\n color: inherit;\n margin: 0;\n }\n`;\n\nconst Arrow = styled.div`\n position: absolute;\n bottom: -48px;\n left: 85px;\n\n svg {\n transform: rotate(-10deg);\n }\n\n ${media.mobile`\n display: none;\n `};\n`;\n\nexport default class ArticleInterviewerBio extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n annotationTop: 0,\n };\n }\n\n setAnnotationTop(top) {\n this.setState({\n annotationTop: top,\n });\n }\n\n render() {\n let { interviewerName, bio, avatar } = this.props.data;\n return (\n \n \n \n \n 
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n }\n}\n\nexport const myQuery = graphql`\n fragment interviewerBioContentBlock on ContentfulContentInterviewBio {\n interviewerName\n bio {\n childMarkdownRemark {\n html\n }\n }\n avatar {\n file {\n url\n }\n }\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport MagicLink from \"../MagicLink\";\nimport Img from \"gatsby-image\";\nimport Row from \"../Row\";\nimport Container from \"../Container\";\nimport Text from \"../Text\";\nimport RitualButton from \"../global/RitualButton\";\nimport { Font, media, Color, rem, maxLines } from \"../../utils/style\";\nimport { calculateReadingTime } from \"../../utils/readingTime\";\n\nconst RelatedWrapper = styled.div.attrs({\n role: \"section\",\n})`\n margin-top: 50px;\n background-color: rgba(225, 233, 240, 0.56);\n\n ${media.tablet`\n margin-top: 30px;\n `};\n`;\n\nconst RelatedHeader = styled.div.attrs({\n className: \"col-12\",\n})`\n h2 {\n ${Font.circular};\n text-align: center !important;\n font-size: ${rem(48)};\n font-weight: 500;\n line-height: ${rem(54)};\n letter-spacing: ${rem(-1.4)};\n color: ${Color.ritualBlue};\n margin: ${rem(120)} 0 ${rem(55)};\n\n ${media.tablet`\n font-size: ${rem(30)};\n line-height: ${rem(36)};\n letter-spacing: ${rem(-0.4)};\n margin: ${rem(80)} 0 ${rem(24)};\n `};\n }\n`;\n\nconst RelatedArticle = styled.div.attrs(p => ({\n className: `col-12 col-sm-6 col-lg-5 ${p.i === 0 ? \"offset-lg-1\" : \"\"}`,\n}))`\n &:first-child {\n padding-left: 0 !important;\n }\n\n &:last-child {\n padding-right: 0 !important;\n }\n\n ${media.tablet`\n &:first-child {\n padding-left: 0 !important;\n padding-right: 13px !important;\n }\n\n &:last-child {\n padding-right: 0 !important;\n padding-left: 13px !important;\n }\n `};\n\n ${media.mobile`\n &:first-child {\n padding-left: 20px !important;\n padding-right: 20px !important;\n margin-bottom: 24px;\n }\n\n &:last-child {\n padding-right: 20px !important;\n padding-left: 20px !important;\n }\n `};\n`;\n\nconst RelatedArticleContent = styled.div.attrs({\n className: \"content\",\n})`\n position: relative;\n text-decoration: none;\n padding: 50px;\n height: 427px;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: left;\n cursor: pointer;\n background-color: ${props => props.color};\n\n img {\n transition: all 0.2s ease-in-out !important;\n }\n\n &:hover {\n cursor: pointer;\n\n img {\n transform: scale(1.1);\n }\n }\n\n ${media.mobile`\n &:hover img {\n transform: none;\n }\n `};\n\n ${media.notDesktop`\n height: 340px;\n padding: 40px 24px;\n `};\n\n ${media.tablet`\n padding: 24px;\n `};\n`;\n\nconst RelatedFloatBottom = styled.div`\n align-self: flex-end;\n max-width: 320px;\n text-decoration: none;\n z-index: 2;\n color: ${props => (props.color ? props.color : Color.ritualBlue)};\n\n span,\n h2,\n p {\n color: inherit;\n }\n\n &:hover {\n text-decoration: none;\n color: ${props => (props.color ? props.color : Color.ritualBlue)};\n }\n`;\n\nconst RelatedReadtime = styled.span`\n ${Font.circular};\n display: block;\n margin: 0;\n padding: 0;\n font-size: ${rem(16)};\n line-height: ${rem(26)};\n margin: 0 0 ${rem(5)};\n`;\n\nconst RelatedTitle = styled.p`\n ${Font.circular};\n font-size: ${rem(24)};\n line-height: ${rem(32)};\n font-weight: 400;\n margin: 0;\n padding: 0;\n\n ${media.tablet`\n font-size: ${rem(22)};\n line-height: ${rem(32)};\n letter-spacing: -0.2px;\n `};\n`;\n\nconst RelatedPreview = styled.p`\n ${Font.dutch}\n font-size: ${rem(20)};\n line-height: ${rem(30)};\n margin: ${rem(16)} 0 0;\n ${maxLines(30, 3)};\n\n ${media.tablet`\n ${maxLines(26, 3)}\n font-size: ${rem(16)};\n line-height: ${rem(26)};\n `};\n`;\n\nconst StyledArticlesButton = styled(RitualButton)`\n color: ${Color.ritualBlue};\n background-color: transparent;\n margin: auto;\n`;\n\nconst StyledArticlesButtonContainer = styled(Container)`\n display: flex;\n padding: ${rem(56)} 0px ${rem(120)};\n\n ${media.mobile`\n padding: ${rem(40)} 0px ${rem(80)};\n `};\n`;\n\nexport default class ArticleRelated extends React.Component {\n renderArticles() {\n let { data, showPreview = false } = this.props;\n if (!data || !data.length) {\n return null;\n }\n return (\n data &&\n data.map((node, i) => {\n let {\n title,\n previewText,\n heroImage,\n primaryContent,\n heroBackgroundColor,\n heroSecondaryColor,\n } = node;\n let readingTime = calculateReadingTime(primaryContent);\n return (\n \n \n \n \n \n \n \n \n \n {title}\n {showPreview && (\n {previewText}\n )}\n \n \n \n \n );\n })\n );\n }\n\n render() {\n return (\n \n \n \n \n Related Articles
\n \n
\n {this.renderArticles()}
\n \n \n \n See All Articles\n \n \n \n );\n }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Font, responsive, rgba, rem } from \"../../utils/style\";\nimport Row from \"../Row\";\nimport Img from \"gatsby-image\";\n\n// Services\nimport intl from \"../../services/intl\";\n\nconst StyledRow = styled(Row)`\n margin-top: 80px;\n`;\n\nconst StyledColumn = styled.div.attrs({\n className: \"col-12 col-md-7 offset-md-5\",\n})``;\n\nconst ExpertsSection = styled.div`\n h3 {\n color: ${Color.ritualBlue};\n font-size: ${rem(30)};\n font-weight: 500;\n letter-spacing: -0.4px;\n line-height: ${rem(36)};\n margin-bottom: 16px;\n\n ${responsive.md`\n font-size: ${rem(48)};\n letter-spacing: -1.4px;\n line-height: ${rem(54)};\n `}\n }\n\n p {\n ${Font.dutch};\n color: ${Color.ritualBlue};\n font-size: ${rem(18)};\n font-weight: normal;\n letter-spacing: 0px;\n line-height: ${rem(28)};\n margin-bottom: 32px;\n\n ${responsive.md`\n font-size: ${rem(20)};\n font-weight: normal;\n line-height: ${rem(30)};\n margin-bottom: 40px;\n `}\n }\n`;\n\nconst ExpertsContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: left;\n\n p {\n ${Font.circular}\n }\n`;\n\nconst MobileExpert = styled.div.attrs({\n className: \"d-block d-md-none\",\n})`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: left;\n margin-bottom: 32px;\n\n p {\n color: ${rgba(Color.ritualBlue, 0.56)}\n font-size: ${rem(14)};\n font-weight: 500;\n letter-spacing: 0px;\n line-height: ${rem(24)};\n margin-bottom: 0;\n }\n\n > div {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 8px;\n\n .gatsby-image-wrapper {\n height: 84px;\n width: 84px;\n border-radius: 135px;\n margin-right: 14px;\n margin-bottom: 0;\n }\n\n p {\n color: ${Color.ritualBlue};\n font-size: ${rem(16)};\n font-weight: 500;\n letter-spacing: 0px;\n line-height: ${rem(26)};\n margin-bottom: 0;\n }\n }\n`;\n\nconst DesktopExpert = styled.div.attrs({\n className: \"d-none d-md-flex\",\n})`\n display: flex;\n flex-direction: row;\n margin-bottom: 40px;\n\n .gatsby-image-wrapper {\n border-radius: 135px;\n margin-right: 30px;\n }\n\n div {\n display: flex;\n flex-direction: column;\n justift-content: left;\n align-items: top;\n\n p:first-of-type {\n font-size: ${rem(20)};\n font-weight: 500;\n letter-spacing: 0px;\n line-height: ${rem(30)};\n margin-bottom: 16px;\n }\n\n p:last-of-type {\n color: ${rgba(Color.ritualBlue, 0.56)};\n font-size: ${rem(16)};\n font-weight: 300;\n letter-spacing: 0px;\n line-height: ${rem(26)};\n margin-bottom: 0;\n }\n }\n`;\n\nexport default class ArticleExperts extends React.Component {\n renderExpert(expert) {\n const { image, name, articleTitle, currentTitle, bio } = expert;\n const expertTitle = articleTitle\n ? articleTitle\n : `${name}, ${currentTitle}`;\n\n if (!image || !name || !bio || !currentTitle) return;\n\n return (\n <>\n \n \n {bio.bio}
\n \n\n \n \n \n
{expertTitle}
\n
{bio.bio}
\n
{heading}
\n {subheading}
\n \n {experts.map(expert => {\n return this.renderExpert(expert);\n })}\n \n \n \n \n );\n }\n}\n","import _Object$keys from 'babel-runtime/core-js/object/keys';\n/* eslint-disable prefer-template */\n\nexport default function objectToGetParams(object) {\n return '?' + _Object$keys(object).filter(function (key) {\n return !!object[key];\n }).map(function (key) {\n return key + '=' + encodeURIComponent(object[key]);\n }).join('&');\n}\n/* eslint-enable prefer-template */","import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';\nimport _classCallCheck from 'babel-runtime/helpers/classCallCheck';\nimport _createClass from 'babel-runtime/helpers/createClass';\nimport _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';\nimport _inherits from 'babel-runtime/helpers/inherits';\nimport _Object$keys from 'babel-runtime/core-js/object/keys';\nimport _extends from 'babel-runtime/helpers/extends';\nimport _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';\nimport _typeof from 'babel-runtime/helpers/typeof';\nimport React, { PureComponent } from 'react';\nimport cx from 'classnames';\n\nvar isPromise = function isPromise(obj) {\n return !!obj && ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === 'object' || typeof obj === 'function') && typeof obj.then === 'function';\n};\n\nvar getBoxPositionOnWindowCenter = function getBoxPositionOnWindowCenter(width, height) {\n return {\n left: window.outerWidth / 2 + (window.screenX || window.screenLeft || 0) - width / 2,\n top: window.outerHeight / 2 + (window.screenY || window.screenTop || 0) - height / 2\n };\n};\n\nvar getBoxPositionOnScreenCenter = function getBoxPositionOnScreenCenter(width, height) {\n return {\n top: (window.screen.height - height) / 2,\n left: (window.screen.width - width) / 2\n };\n};\n\nfunction windowOpen(url, _ref, onClose) {\n var _ref$height = _ref.height,\n height = _ref$height === undefined ? 400 : _ref$height,\n _ref$width = _ref.width,\n width = _ref$width === undefined ? 550 : _ref$width,\n configRest = _objectWithoutProperties(_ref, ['height', 'width']);\n\n var config = _extends({\n height: height,\n width: width,\n location: 'no',\n toolbar: 'no',\n status: 'no',\n directories: 'no',\n menubar: 'no',\n scrollbars: 'yes',\n resizable: 'no',\n centerscreen: 'yes',\n chrome: 'yes'\n }, configRest);\n\n var shareDialog = window.open(url, '', _Object$keys(config).map(function (key) {\n return key + '=' + config[key];\n }).join(', '));\n\n if (onClose) {\n var interval = window.setInterval(function () {\n try {\n if (shareDialog === null || shareDialog.closed) {\n window.clearInterval(interval);\n onClose(shareDialog);\n }\n } catch (e) {\n /* eslint-disable no-console */\n console.error(e);\n /* eslint-enable no-console */\n }\n }, 1000);\n }\n\n return shareDialog;\n}\n\nvar ShareButton = function (_PureComponent) {\n _inherits(ShareButton, _PureComponent);\n\n function ShareButton() {\n var _ref2;\n\n var _temp, _this, _ret;\n\n _classCallCheck(this, ShareButton);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = ShareButton.__proto__ || _Object$getPrototypeOf(ShareButton)).call.apply(_ref2, [this].concat(args))), _this), _this.onClick = function (e) {\n var _this$props = _this.props,\n disabled = _this$props.disabled,\n onClick = _this$props.onClick,\n openWindow = _this$props.openWindow,\n beforeOnClick = _this$props.beforeOnClick;\n\n if (disabled) {\n return;\n }\n\n e.preventDefault();\n\n var link = _this.link();\n\n var clickHandler = openWindow ? function () {\n return _this.openWindow(link);\n } : function () {\n return onClick(link);\n };\n\n if (beforeOnClick) {\n var returnVal = beforeOnClick();\n\n if (isPromise(returnVal)) {\n returnVal.then(clickHandler);\n } else {\n clickHandler();\n }\n } else {\n clickHandler();\n }\n }, _this.onKeyPress = function (e) {\n if (e.key === 'Enter' || e.key === 13 || e.key === ' ' || e.key === 32) {\n _this.onClick(e);\n }\n }, _this.openWindow = function (link) {\n var _this$props2 = _this.props,\n windowPosition = _this$props2.windowPosition,\n onShareWindowClose = _this$props2.onShareWindowClose,\n windowWidth = _this$props2.windowWidth,\n windowHeight = _this$props2.windowHeight;\n\n var windowConfig = _extends({\n height: windowHeight,\n width: windowWidth\n }, windowPosition === 'windowCenter' ? getBoxPositionOnWindowCenter(windowWidth, windowHeight) : getBoxPositionOnScreenCenter(windowWidth, windowHeight));\n\n windowOpen(link, windowConfig, onShareWindowClose);\n }, _temp), _possibleConstructorReturn(_this, _ret);\n }\n\n _createClass(ShareButton, [{\n key: 'link',\n value: function link() {\n var _props = this.props,\n url = _props.url,\n opts = _props.opts,\n networkLink = _props.networkLink;\n return networkLink(url, opts);\n }\n }, {\n key: 'render',\n value: function render() {\n var _props2 = this.props,\n additionalProps = _props2.additionalProps,\n children = _props2.children,\n className = _props2.className,\n disabled = _props2.disabled,\n disabledStyle = _props2.disabledStyle,\n network = _props2.network,\n role = _props2.role,\n style = _props2.style,\n tabIndex = _props2.tabIndex;\n var classes = cx('SocialMediaShareButton', 'SocialMediaShareButton--' + network, {\n 'SocialMediaShareButton--disabled': !!disabled,\n disabled: !!disabled\n }, className);\n return React.createElement('div', _extends({\n 'aria-label': network\n }, additionalProps, {\n role: role,\n tabIndex: tabIndex,\n onClick: this.onClick,\n onKeyPress: this.onKeyPress,\n className: classes,\n style: _extends({}, style, disabled ? disabledStyle : {})\n }), children);\n }\n }]);\n\n return ShareButton;\n}(PureComponent);\n\nShareButton.defaultProps = {\n disabledStyle: {\n opacity: 0.6\n },\n openWindow: true,\n role: 'button',\n windowPosition: 'windowCenter',\n tabIndex: '0'\n};\n\nfunction createShareButton(network, link) {\n var optsMap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {\n return {};\n };\n var propTypes = arguments[3];\n var defaultProps = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};\n var CreatedButton = React.forwardRef(function (props, ref) {\n return React.createElement(ShareButton, _extends({}, props, {\n ref: ref,\n network: network,\n networkLink: link,\n opts: optsMap(props)\n }));\n });\n CreatedButton.defaultProps = defaultProps;\n return CreatedButton;\n}\n\nexport default createShareButton;","import PropTypes from 'prop-types';\nimport assert from 'assert';\nimport objectToGetParams from './utils/objectToGetParams';\nimport createShareButton from './utils/createShareButton';\n\nfunction facebookLink(url, _ref) {\n var quote = _ref.quote,\n hashtag = _ref.hashtag;\n assert(url, 'facebook.url');\n return 'https://www.facebook.com/sharer/sharer.php' + objectToGetParams({\n u: url,\n quote: quote,\n hashtag: hashtag\n });\n}\n\nvar FacebookShareButton = createShareButton('facebook', facebookLink, function (props) {\n /* eslint-disable no-console */\n if (props.picture) {\n console.warn('FacebookShareButton warning: picture is a deprecated prop.');\n }\n\n if (props.title) {\n console.warn('FacebookShareButton warning: title is a deprecated prop. Use \"quote\" instead.');\n }\n\n if (props.description) {\n console.warn('FacebookShareButton warning: description is a deprecated prop.\\n Use \"quote\" instead.');\n }\n /* eslint-enable no-console */\n\n\n return {\n quote: props.quote,\n hashtag: props.hashtag\n };\n}, {\n quote: PropTypes.string,\n hashtag: PropTypes.string\n}, {\n windowWidth: 550,\n windowHeight: 400\n});\nexport default FacebookShareButton;","import PropTypes from 'prop-types';\nimport assert from 'assert';\nimport objectToGetParams from './utils/objectToGetParams';\nimport createShareButton from './utils/createShareButton';\n\nfunction twitterLink(url, _ref) {\n var title = _ref.title,\n via = _ref.via,\n _ref$hashtags = _ref.hashtags,\n hashtags = _ref$hashtags === undefined ? [] : _ref$hashtags;\n assert(url, 'twitter.url');\n assert(Array.isArray(hashtags), 'twitter.hashtags is not an array');\n return 'https://twitter.com/share' + objectToGetParams({\n url: url,\n text: title,\n via: via,\n hashtags: hashtags.join(',')\n });\n}\n\nvar TwitterShareButton = createShareButton('twitter', twitterLink, function (props) {\n return {\n hashtags: props.hashtags,\n title: props.title,\n via: props.via\n };\n}, {\n hashtags: PropTypes.arrayOf(PropTypes.string),\n title: PropTypes.string,\n via: PropTypes.string\n}, {\n windowWidth: 550,\n windowHeight: 400\n});\nexport default TwitterShareButton;","import PropTypes from 'prop-types';\nimport assert from 'assert';\nimport objectToGetParams from './utils/objectToGetParams';\nimport createShareButton from './utils/createShareButton';\n\nfunction pinterestLink(url, _ref) {\n var media = _ref.media,\n description = _ref.description;\n assert(url, 'pinterest.url');\n assert(media, 'pinterest.media');\n return 'https://pinterest.com/pin/create/button/' + objectToGetParams({\n url: url,\n media: media,\n description: description\n });\n}\n\nvar PinterestShareButton = createShareButton('pinterest', pinterestLink, function (props) {\n return {\n media: props.media,\n description: props.description\n };\n}, {\n media: PropTypes.string.isRequired,\n description: PropTypes.string\n}, {\n windowWidth: 1000,\n windowHeight: 730\n});\nexport default PinterestShareButton;","import PropTypes from 'prop-types';\nimport objectToGetParams from './utils/objectToGetParams';\nimport createShareButton from './utils/createShareButton';\n\nfunction emailLink(url, _ref) {\n var subject = _ref.subject,\n body = _ref.body,\n separator = _ref.separator;\n return 'mailto:' + objectToGetParams({\n subject: subject,\n body: body ? body + separator + url : url\n });\n}\n\nvar EmailShareButton = createShareButton('email', emailLink, function (props) {\n return {\n subject: props.subject,\n body: props.body,\n separator: props.separator\n };\n}, {\n subject: PropTypes.string,\n body: PropTypes.string,\n separator: PropTypes.string\n}, {\n separator: ' ',\n openWindow: false,\n onClick: function onClick(link) {\n window.location.href = link;\n }\n});\nexport default EmailShareButton;","import React from \"react\";\nimport styled from \"styled-components\";\nimport {\n FacebookShareButton,\n TwitterShareButton,\n PinterestShareButton,\n EmailShareButton,\n} from \"react-share\";\n\n// Services\nimport intl from \"../../services/intl\";\n\n// Components\nimport Row from \"../Row\";\nimport Text from \"../Text\";\n\n// Utils\nimport { Font, media, Color, rem } from \"../../utils/style\";\nimport config from \"../../utils/siteConfig\";\nimport metrics from \"../../utils/metrics\";\nimport { Icons, Social } from \"../../utils/svg\";\n\nconst ShareRow = styled(Row)`\n margin-top: 60px;\n`;\n\nconst StyledColumn = styled.div.attrs({\n className: \"col-12 col-md-3 offset-md-5\",\n})`\n position: relative;\n padding-top: ${rem(30)};\n\n &:after {\n content: \"\";\n position: absolute;\n top: -3px;\n left: 0;\n width: 300%;\n height: 3px;\n background-color: ${Color.ritualBlue};\n\n ${media.mobile`\n width: auto;\n right: 20px;\n left: 20px;\n `};\n }\n`;\n\nconst ShareTitle = styled.h2`\n ${Font.circular}\n color: ${Color.ritualBlue};\n font-size: ${rem(20)};\n line-height: ${rem(30)};\n font-weight: 400;\n margin: 0;\n`;\n\nconst ShareColumn = styled.div.attrs({\n className: \"col-2\",\n})`\n overflow: hidden;\n\n & > div {\n margin: 2px 0 0;\n cursor: pointer;\n float: right;\n width: 22px;\n height: 20px;\n text-align: center;\n transition: opacity 200ms ease-in-out;\n\n [data-whatintent=\"mouse\"] &:focus,\n [data-whatintent=\"touch\"] &:focus {\n outline: none;\n }\n\n &:hover {\n opacity: 0.56;\n }\n\n svg {\n vertical-align: middle;\n }\n }\n`;\n\nconst SVGWrapper = styled.div`\n height: ${p => (p.height ? p.height : 18)}px;\n width: auto;\n position: relative;\n\n svg {\n height: 100%;\n }\n`;\n\nexport default class ArticleShare extends React.Component {\n getMailto() {\n let subject = \"Subject Line Here\";\n let body = \"Body goes here\";\n\n let mailto = `mailto:?subject=${subject}&body=${body}`.replace(\n /\\s/g,\n \"%20\",\n );\n return mailto;\n }\n\n trackWithSegment(location) {\n metrics.track(\"Article Shared\", {\n location: location,\n });\n }\n\n render() {\n let { title, slug, heroImage } = this.props.data;\n let shareUrl = `${config.siteUrl}/articles/${slug}`;\n let shareImageUrl = `https:${heroImage.share.src}`;\n let email = {\n subject: intl.t(\n \"hub.article.share.email-subject\",\n \"I was skeptical too...\",\n ),\n body: intl.t(\n \"hub.article.share.email-body\",\n `I read \"{title}\" and thought you'd want the facts too. Check it out here: {shareUrl}`,\n { title, shareUrl },\n ),\n };\n return (\n \n \n \n \n \n \n \n
\n \n {\n this.trackWithSegment(\"Facebook\");\n }}\n >\n \n \n \n \n \n \n {\n this.trackWithSegment(\"Twitter\");\n }}\n >\n \n \n \n \n \n \n {\n this.trackWithSegment(\"Pinterest\");\n }}\n >\n \n \n \n \n \n \n {\n this.trackWithSegment(\"Email\");\n }}\n >\n \n \n \n \n \n
\n \n \n );\n }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { v4 } from \"uuid\";\nimport { Icons } from \"../../utils/svg\";\nimport { media } from \"../../utils/style\";\nimport metrics from \"../../utils/metrics\";\n\n// Components\nimport MagicVideo from \"../MagicVideo\";\n\n// Styled Elements\nconst OverlayContainer = styled.div`\n cursor: pointer;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 999;\n`;\n\nconst OverlayContent = styled.div.attrs({\n className: \"d-flex align-items-center justify-content-center\",\n})`\n z-index: 1001;\n position: fixed;\n top: 120px;\n bottom: 120px;\n left: 135px;\n right: 135px;\n\n ${media.mobile`\n top: 80px;\n left: 24px;\n bottom: 80px;\n right: 24px;\n `};\n`;\n\nconst OverlayBackground = styled.div`\n z-index: 1000;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(255, 255, 255, 0.8);\n cursor: default;\n backdrop-filter: blur(10px);\n`;\n\nconst CloseButton = styled.button`\n font-weight: 400;\n position: absolute;\n color: #142b6f;\n width: 44px;\n height: 44px;\n right: 90px;\n top: 60px;\n opacity: 1;\n float: right;\n font-weight: 400;\n line-height: 1;\n text-shadow: 0 1px 0 #fff;\n background: transparent;\n border: none;\n outline: none !important;\n z-index: 1001;\n cursor: pointer;\n transition: opacity 200ms ease-in-out;\n\n &:hover {\n opacity: 0.56;\n }\n\n ${media.mobile`\n top: 10px;\n right: 25px;\n `};\n`;\n\nexport default class VideoOverlay extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n session_id: null,\n sendSeekStarted: true,\n sendSeekCompleted: true,\n };\n\n this.video = React.createRef();\n }\n\n componentDidMount() {\n this.setState({\n session_id: v4(),\n });\n }\n\n isPhone() {\n return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(\n navigator.userAgent,\n );\n }\n\n play() {\n if (!this.video) return;\n\n if (this.isPhone()) {\n this.video.webkitEnterFullscreen();\n }\n this.video.current.play();\n }\n\n stop() {\n if (!this.video) return;\n\n this.video.current.pause();\n }\n\n _trackVideoEvent(eventName, currentTime, duration, volume) {\n const { articleVideo } = this.props;\n\n metrics.track(eventName, {\n session_id: this.state.session_id,\n content_asset_id: articleVideo.id,\n content_asset_title: articleVideo.title,\n content_asset_description: articleVideo.description,\n content_pod_id: articleVideo.id,\n position: Math.floor(currentTime),\n total_length: Math.floor(duration),\n // bitrate: 55,\n // framerate: 29,\n video_player: \"html5\",\n sound: Math.floor(volume * 100),\n // full_screen: false,\n ad_enabled: false,\n quality: \"hd1080\",\n livestream: false,\n });\n }\n\n onPause(e) {\n let { currentTime, duration, volume } = e.target;\n this._trackVideoEvent(\n \"Video Playback Paused\",\n currentTime,\n duration,\n volume,\n );\n }\n\n onPlay(e) {\n let { currentTime, duration, volume } = e.target;\n if (currentTime === 0) {\n this._trackVideoEvent(\n \"Video Playback Started\",\n currentTime,\n duration,\n volume,\n );\n } else {\n this._trackVideoEvent(\n \"Video Playback Resumed\",\n currentTime,\n duration,\n volume,\n );\n }\n }\n\n onEnded(e) {\n const { currentTime, duration, volume } = e.target;\n\n this._trackVideoEvent(\n \"Video Playback Completed\",\n currentTime,\n duration,\n volume,\n );\n }\n\n onSeeking(e) {\n if (this.sendSeekStartedTimeout) {\n clearTimeout(this.sendSeekStartedTimeout);\n }\n\n if (this.state.sendSeekStarted) {\n let { currentTime, duration, volume } = e.target;\n this._trackVideoEvent(\n \"Video Playback Seek Started\",\n currentTime,\n duration,\n volume,\n );\n this.setState({\n sendSeekStarted: false,\n });\n }\n\n this.sendSeekStartedTimeout = setTimeout(() => {\n this.setState({\n sendSeekStarted: true,\n });\n }, 500);\n }\n\n onSeeked(e) {\n if (this.sendSeekCompletedTimeout) {\n clearTimeout(this.sendSeekCompletedTimeout);\n }\n\n const { currentTime, duration, volume } = e.target;\n\n this.sendSeekCompletedTimeout = setTimeout(() => {\n this._trackVideoEvent(\n \"Video Playback Seek Completed\",\n currentTime,\n duration,\n volume,\n );\n }, 500);\n }\n\n render() {\n const { articleVideo, onClick, visible } = this.props;\n\n return (\n \n \n \n \n \n \n \n \n \n );\n }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { graphql } from \"gatsby\";\nimport Img from \"gatsby-image\";\n\nimport Container from \"../Container\";\nimport MagicLink from \"../MagicLink\";\n\nimport { rem, Font, media, responsive } from \"../../utils/style\";\nimport metrics from \"../../utils/metrics\";\nimport NameMap from \"../../utils/nameMap\";\n\nconst ProductContainer = styled(Container).attrs({\n id: \"product-cards\",\n})`\n margin: 120px auto;\n margin-top: ${props => props.noTopMargin && 0};\n position: relative;\n z-index: 10;\n\n ${media.tablet`\n margin: 40px auto 80px;\n margin-top: ${props => props.noTopMargin && 0};\n `};\n`;\n\nconst Grid = styled.div.attrs({\n id: \"product-cards_grid\",\n})`\n display: grid;\n grid-template-columns: repeat(${p => p.numberOfProducts}, 1fr);\n grid-gap: 30px;\n width: ${p => (p.numberOfProducts === 1 ? \"50%\" : \"auto\")};\n margin: ${p => (p.numberOfProducts === 1 ? \"0 -15px 0 25%\" : \"0 -15px\")};\n\n ${media.notDesktop`\n grid-gap: 20px;\n `}\n\n ${media.tablet`\n ${p =>\n p.numberOfProducts > 2 &&\n `\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n `};\n `}\n\n ${media.mobile`\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: repeat(${p => p.numberOfProducts}, 1fr);\n grid-gap: 24px;\n padding: 0 20px;\n margin: 0 -15px;\n width: auto;\n `}\n`;\n\nconst ProductLink = styled(MagicLink).attrs(p => ({\n id: `product-cards_grid_card-${p.index}`,\n}))`\n position: relative;\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n height: ${p => (p.numberOfProducts > 2 ? \"370px\" : \"570px\")};\n padding: ${p =>\n p.numberOfProducts > 2 ? \"24px 24px 18px\" : \"40px 40px 24px\"};\n background-color: ${p => (p.backgroundColor ? p.backgroundColor : \"#CCC\")};\n z-index: 1;\n\n img {\n transition: transform 0.2s ease-in-out !important;\n }\n\n &:hover {\n img {\n transform: scale(1.1);\n }\n }\n\n ${media.notDesktop`\n height: ${p => (p.numberOfProducts > 2 ? \"294px\" : \"454px\")};\n padding: 24px;\n `}\n\n ${media.tablet`\n height: ${p => (p.numberOfProducts > 2 ? \"280px\" : \"340px\")};\n width: ${p => (p.numberOfProducts > 2 ? \"45%\" : \"340px\")};\n margin: ${p => (p.numberOfProducts > 2 ? \"8px\" : \"0\")};\n `}\n\n ${media.mobile`\n height: 280px\n width: 100%;\n margin: 0;\n\n &:hover img {\n transform: none;\n }\n `}\n`;\n\nconst ImageWrapper = styled.div.attrs(p => ({\n id: `product-cards_grid_card-${p.index}_image-wrapper`,\n}))`\n background: #f3f3f7;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n`;\n\nconst ProductContent = styled.div.attrs(p => ({\n id: `product-cards_grid_card-${p.index}_content`,\n}))`\n position: relative;\n z-index: 1;\n`;\n\nconst ProductTitle = styled.h2.attrs(p => ({\n id: `product-cards_grid_card-${p.index}_content_title`,\n}))`\n ${Font.circular}\n font-size: ${rem(22)};\n line-height: ${rem(32)};\n letter-spacing: -0.3px;\n font-weight: 500;\n\n\n ${responsive.lg`\n font-size: ${rem(26)};\n line-height: ${rem(36)};\n margin-bottom: ${p => (p.numberOfProducts > 2 ? \"8px\" : \"16px\")};\n `}\n\n em {\n ${Font.dutch}\n font-weight: 300;\n }\n\n`;\n\nconst ProductDescription = styled.p.attrs(p => ({\n id: `product-cards_grid_card-${p.index}_content_description`,\n}))`\n ${Font.dutch}\n font-size: ${rem(16)};\n line-height: ${rem(26)};\n margin-bottom: 0;\n\n ${responsive.lg`\n font-size: ${rem(18)};\n line-height: ${rem(28)};\n margin-bottom: 8px;\n `}\n`;\n\nfunction trackCTAClick(title, location, url, event) {\n metrics.track(\"CTA Clicked\", {\n title: title,\n nonInteraction: false,\n location: location,\n });\n}\n\nexport default function ProductCards({ products, ...props }) {\n const numberOfProducts = products.length;\n\n return (\n \n \n {products.map((product, index) => (\n \n ))}\n \n \n );\n}\n\nfunction ProductCard({ product, numberOfProducts, index }) {\n const productName = NameMap(product.name).plain;\n const name = NameMap(product.name).html;\n\n return (\n \n trackCTAClick(\n productName,\n \"Product Card\",\n `/products/${product.slug}`,\n event,\n )\n }\n to={`/products/${product.slug}`}\n hrefLang=\"x-default\"\n aria-label={`Learn more about ${productName}`}\n >\n \n \n \n \n \n \n {product.shortDescription}\n \n \n \n );\n}\n\nexport const componentFragment = graphql`\n fragment ProductCardFragment on ContentfulProduct {\n __typename\n name {\n name\n childMarkdownRemark {\n html\n }\n }\n slug\n shortDescription\n summary\n cardImage {\n file {\n url\n }\n fluid(maxWidth: 1710, quality: 90) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n description\n }\n cardBackgroundColor\n }\n`;\n","import React, { Component } from \"react\";\nimport Helmet from \"react-helmet\";\nimport config from \"../../utils/siteConfig\";\nimport GeneralTags from \"./GeneralTags\";\n\nclass ArticleSEO extends Component {\n render() {\n const defaultTitle = config.siteTitle;\n const {\n title,\n description,\n image,\n image: { url: imgUrlPartial, width: imgWidth, height: imgHeight },\n pagePath,\n } = this.props;\n\n const pageUrl = `${config.siteUrl}/${pagePath}`;\n const imgUrl = `https:${imgUrlPartial}`;\n\n // Overwrite properties below with new image attributes\n let meta = [\n { name: \"image\", content: imgUrl },\n { property: \"og:type\", content: \"article\" },\n { property: \"og:image\", content: imgUrl },\n { property: \"og:image:width\", content: imgWidth },\n { property: \"og:image:height\", content: imgHeight },\n { name: \"twitter:image\", content: imgUrl },\n ];\n\n let schemaOrgJSONLD = [\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n itemListElement: [\n {\n \"@type\": \"ListItem\",\n position: 1,\n item: {\n \"@id\": config.siteUrl,\n name: defaultTitle,\n },\n },\n {\n \"@type\": \"ListItem\",\n position: 2,\n item: {\n \"@id\": pageUrl,\n name: title,\n },\n },\n ],\n },\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BlogPosting\",\n url: pageUrl,\n name: title,\n alternateName: config.siteTitleAlt || \"\",\n headline: title,\n image: {\n \"@type\": \"ImageObject\",\n url: imgUrl,\n width: imgWidth,\n height: imgHeight,\n },\n author: {\n \"@type\": \"Person\",\n name: config.author,\n url: config.authorUrl,\n },\n publisher: {\n \"@type\": \"Organization\",\n name: config.publisher,\n url: config.siteUrl,\n logo: {\n \"@type\": \"ImageObject\",\n width: 512,\n height: 512,\n url: config.siteLogo,\n },\n },\n mainEntityOfPage: pageUrl,\n },\n ];\n\n return (\n \n \n \n \n \n
\n );\n }\n}\n\nexport default ArticleSEO;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Color, responsive } from \"../../utils/style\";\nimport $ from \"jquery\";\n\n// Animations\nimport ScrollMagic from \"scrollmagic\";\nimport gsap from \"gsap\";\n\nconst ProgressBar = styled.div`\n position: fixed;\n bottom: -4px;\n top: 52px;\n left: 0;\n height: 4px;\n background-color: ${Color.ritualYellow};\n display: block;\n z-index: 100;\n\n ${responsive.md`\n top: 64px;\n `}\n`;\n\nexport default class ArticleReadProgress extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n scrolled: false,\n topPosition: 0,\n };\n this.timeout = null;\n }\n\n componentDidMount() {\n this.timeout = setTimeout(() => {\n this.initializeScrollMagic();\n this.updateScrollMagicOnResize();\n }, 1000);\n $(window).on(\"scroll.readHandler\", this.handleScrollPosition.bind(this));\n }\n\n componentWillUnmount() {\n if (this.timeout) {\n clearTimeout(this.timeout);\n }\n this.destroyScrollMagic();\n $(window).off(\"scroll.readHandler\");\n }\n\n handleScrollPosition() {\n const headerHeight = $(\"header\").outerHeight();\n const height = $(\"#article-hero\").height() - headerHeight;\n const prevState = this.state.scrolled;\n if ($(window).scrollTop() >= height && !prevState) {\n this.setState({\n scrolled: true,\n });\n } else if ($(window).scrollTop() < height && prevState) {\n this.setState({\n scrolled: false,\n });\n }\n }\n\n updateScrollMagicOnResize() {\n $(window).on(\n \"resize.readprogress\",\n this.debouncedUpdateScrollMagic.bind(this),\n );\n }\n\n debouncedUpdateScrollMagic() {\n if (this.scrollMagicTimeout) {\n clearTimeout(this.scrollMagicTimeout);\n }\n this.scrollMagicTimeout = setTimeout(() => {\n this.updateScrollMagic();\n }, 200);\n }\n\n updateScrollMagic() {\n this.destroyScrollMagic();\n this.initializeScrollMagic();\n }\n\n destroyScrollMagic() {\n if (this.controller) {\n this.controller.destroy(true);\n }\n $(window).off(\"resize.readprogress\");\n }\n\n initializeScrollMagic() {\n this.controller = new ScrollMagic.Controller({\n globalSceneOptions: {},\n });\n this.initializeProgressBar();\n }\n\n initializeProgressBar() {\n let articleLength = $(\".article-container\").innerHeight();\n let halfViewport = $(window).innerHeight() / 4;\n\n new ScrollMagic.Scene({\n triggerElement: \".article-container\",\n duration: articleLength + halfViewport + 480,\n })\n .setTween(this.progressTween(articleLength, halfViewport))\n .addTo(this.controller);\n }\n\n progressTween(barLength, stationaryLength) {\n let timeline = gsap.timeline();\n return timeline\n .fromTo(\n \".read-bar\",\n {\n css: {\n right: \"100%\",\n },\n ease: \"none\",\n },\n {\n duration: barLength,\n css: {\n right: \"0%\",\n },\n ease: \"none\",\n },\n )\n .delay(stationaryLength)\n .fromTo(\n \".read-bar\",\n {\n css: {\n height: \"4px\",\n },\n },\n {\n duration: 480,\n css: {\n height: \"0px\",\n },\n },\n );\n }\n\n render() {\n let { scrolled } = this.state;\n\n return ;\n }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\n\n// Services\nimport intl from \"../../services/intl\";\n\n// Utils\nimport { Color, Font, media, rem, responsive } from \"../../utils/style\";\nimport { Icons } from \"../../utils/svg\";\nimport { isBright } from \"../../utils/luma\";\n\n// Components\nimport RitualButton from \"../global/RitualButton\";\nimport Container from \"../Container\";\nimport Row from \"../Row\";\nimport ArticleReadProgress from \"./ArticleReadProgress\";\nimport Text from \"../Text\";\n\n// Styled Elements\nconst HeroRow = styled(Row)`\n height: 100%;\n`;\n\nconst HeroColumn = styled.div.attrs({\n className: \"col-12 col-md-7 offset-md-5 d-flex\",\n})``;\n\nconst HeroContent = styled.div.attrs({\n className: \"align-self-end\",\n})`\n margin-bottom: 60px;\n z-index: 2;\n\n ${media.mobile`\n margin-bottom: 40px;\n `};\n`;\n\nconst Category = styled.span`\n ${Font.circular}\n color: ${p => {\n return p.color ? p.color : Color.ritualBlue;\n }};\n font-size: ${rem(16)};\n line-height: ${rem(26)};\n font-weight: 400;\n text-align: left;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 0;\n`;\n\nconst Title = styled.h1`\n ${Font.circular}\n color: ${p => {\n return p.color ? p.color : Color.ritualBlue;\n }};\n font-size: ${rem(30)};\n line-height: ${rem(36)};\n letter-spacing: -0.4px;\n font-weight: 400;\n text-align: left;\n margin: ${rem(16)} 0;\n\n ${responsive.md`\n font-size: ${rem(34)};\n line-height: ${rem(40)};\n letter-spacing: -1.4px;\n `};\n\n ${responsive.lg`\n font-size: ${rem(48)};\n line-height: ${rem(54)};\n letter-spacing: -1.4px;\n `};\n`;\n\nconst ReadingTime = styled.span`\n ${Font.circular}\n color: ${p => {\n return p.color ? p.color : Color.ritualBlue;\n }};\n font-size: ${rem(16)};\n line-height: ${rem(26)};\n font-weight: 500;\n text-align: left;\n letter-spacing: 0;\n margin: 0;\n\n ${media.tablet`\n font-size: ${rem(14)};\n line-height: ${rem(24)};\n `}\n`;\n\nconst PlayButton = styled(RitualButton)`\n i {\n margin-left: 8px;\n\n svg {\n color: #fff;\n transition: color 0.2s;\n\n g,\n path {\n fill: currentColor !important;\n }\n }\n }\n\n &:hover {\n i {\n svg {\n color: ${Color.ritualBlue};\n }\n }\n }\n`;\n\nexport default class ArticleImageHero extends React.Component {\n render() {\n const {\n title,\n category,\n heroBackgroundColor,\n heroSecondaryColor,\n readTime,\n onClick,\n articleVideo,\n } = this.props;\n\n const darkOrBright = isBright(heroBackgroundColor) ? \"dark\" : \"bright\";\n let lengthInMinutes = undefined;\n\n if (articleVideo) {\n lengthInMinutes = intl.t(\"hub.hero.video-length\", \"{length} min video\", {\n length: articleVideo.videoLength / 60,\n });\n }\n\n return (\n <>\n \n \n \n {category.title}\n {title}\n \n {articleVideo && (\n \n {\" \"}\n \n \n \n \n \n \n )}\n {lengthInMinutes ? (\n \n {lengthInMinutes}\n \n ) : (\n \n \n \n )}\n \n \n \n \n \n \n );\n }\n}\n","export function isBright(color) {\n let luma = undefined;\n if (color) {\n let c = color.substring(1);\n let rgb = parseInt(c, 16);\n let r = (rgb >> 16) & 0xff;\n let g = (rgb >> 8) & 0xff;\n let b = (rgb >> 0) & 0xff;\n\n luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n }\n return luma > 190;\n}\n","import React from \"react\";\nimport { graphql } from \"gatsby\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { media } from \"../utils/style\";\nimport config from \"../utils/siteConfig\";\nimport { calculateReadingTime } from \"../utils/readingTime\";\n\n// Components\nimport Container from \"../components/Container\";\nimport ArticleQA from \"../components/hub/ArticleQA\";\nimport ArticleMythFact from \"../components/hub/ArticleMythFact\";\nimport ArticleStandaloneAnswer from \"../components/hub/ArticleStandaloneAnswer\";\nimport ArticleStandaloneImage from \"../components/hub/ArticleStandaloneImage\";\nimport ArticleBlockQuote from \"../components/hub/ArticleBlockQuote\";\nimport ArticleContentGeneric from \"../components/hub/ArticleContentGeneric\";\nimport ArticleEssentialTakeaways from \"../components/hub/ArticleEssentialTakeaways\";\nimport ArticleInterviewerBio from \"../components/hub/ArticleInterviewerBio\";\nimport ArticleRelated from \"../components/hub/ArticleRelated\";\nimport ArticleExperts from \"../components/hub/ArticleExperts\";\nimport ArticleShare from \"../components/hub/ArticleShare\";\nimport VideoOverlay from \"../components/hub/VideoOverlay\";\nimport ProductCards from \"../components/home/ProductCards\";\nimport ArticleSEO from \"../components/seo/Article\";\nimport ProductCategoryCards from \"../components/product/ProductCategoryCards\";\nimport ArticleHero from \"../components/hub/ArticleHero\";\nimport PageHero from \"../components/PageHero\";\nimport ArticleReadProgress from \"../components/hub/ArticleReadProgress\";\nimport StickyProductNav from \"../components/global/StickyProductNav\";\nimport Text from \"../components/Text\";\n\n// Styled Elements\nconst ArticleContainer = styled(Container).attrs({\n role: \"section\",\n})``;\n\nconst CardsSection = styled.section``;\n\nconst ProductCardContainer = styled.div`\n margin: 120px auto 0px;\n\n ${media.mobile`\n margin: 80px auto 0px;\n `};\n`;\n\nvar Components = {\n ContentfulContentInterviewQA: ArticleQA,\n ContentfulContentMythFact: ArticleMythFact,\n ContentfulContentInterviewStandaloneAnswer: ArticleStandaloneAnswer,\n ContentfulContentStandaloneImage: ArticleStandaloneImage,\n ContentfulContentBlockquote: ArticleBlockQuote,\n ContentfulContentGeneric: ArticleContentGeneric,\n ContentfulContentInterviewBio: ArticleInterviewerBio,\n};\n\nexport default class Content extends React.Component {\n constructor(props) {\n super(props);\n\n let {\n title,\n pageTitle,\n slug,\n heroImage,\n previewText,\n } = this.props.data.contentfulArticleFreeform;\n\n this.state = {\n showVideoOverlay: false,\n seo: {\n pagePath: `${config.contentHubArticlesUrl}/${slug}`,\n title: pageTitle || `${title} - Ritual`,\n description: previewText,\n image: {\n url: heroImage.share.src,\n width: heroImage.share.width,\n height: heroImage.share.height,\n },\n },\n };\n\n this.videoOverlay = React.createRef();\n }\n\n componentDidMount() {\n this.props.updatePageData({\n label: \"Article\",\n });\n\n this.props.updateLayoutState({\n navColor: \"#ffffff\",\n banner: false,\n });\n }\n\n showOverlay() {\n this.setState({\n showVideoOverlay: true,\n });\n if (this.videoOverlay) {\n this.videoOverlay.current.play();\n }\n }\n\n hideOverlay() {\n this.setState({\n showVideoOverlay: false,\n });\n if (this.videoOverlay) {\n this.videoOverlay.current.stop();\n }\n }\n\n renderComponent(componentNode, i, gutterContent) {\n let component = Components[componentNode.__typename];\n if (component) {\n let reactComponent = React.createElement(component, {\n data: componentNode,\n gutterContent: gutterContent,\n key: `component-` + i,\n });\n return reactComponent;\n } else {\n return null;\n }\n }\n\n render() {\n let { showVideoOverlay } = this.state;\n let { contentfulArticleFreeform } = this.props.data;\n let {\n articleVideo,\n primaryContent,\n essentialTakeaways,\n relatedArticles,\n products,\n experts,\n heroBackgroundColor,\n desktopImage,\n mobileImage,\n } = contentfulArticleFreeform;\n const { location } = this.props;\n\n let readTime = calculateReadingTime(primaryContent);\n\n const productsHasContent = products && products.length > 0;\n const hasProducts =\n productsHasContent && products[0].__typename === \"ContentfulProduct\";\n const hasCategories =\n productsHasContent &&\n products[0].__typename === \"ContentfulProductCategory\";\n\n const productSku = location.state ? location.state.productSku : \"\";\n\n return (\n <>\n \n\n {productSku && (\n \n )}\n\n \n \n \n \n\n \n\n \n \n \n
\n {primaryContent &&\n primaryContent.map((c, i) => {\n let gutterContent =\n i === 0 ? (\n \n ) : (\n false\n );\n return this.renderComponent(c, i, gutterContent);\n })}\n \n {experts && }\n \n \n\n \n {hasProducts && !hasCategories && (\n \n \n \n )}\n\n {hasCategories && (\n \n )}\n \n\n \n\n {articleVideo && (\n \n )}\n \n );\n }\n}\n\nexport const pageQuery = graphql`\n fragment expandPrimaryContent on ContentfulArticleFreeform {\n primaryContent {\n __typename\n ... on ContentfulContentGeneric {\n ...genericContentBlock\n }\n ... on ContentfulContentBlockquote {\n ...blockQuoteBlock\n }\n ... on ContentfulContentInterviewQA {\n ...articleQABlock\n }\n ... on ContentfulContentMythFact {\n ...articleMythFactBlock\n }\n ... on ContentfulContentInterviewStandaloneAnswer {\n ...articleAnswerBlock\n }\n ... on ContentfulContentStandaloneImage {\n ...standaloneImageBlock\n }\n ... on ContentfulContentInterviewBio {\n ...interviewerBioContentBlock\n }\n }\n }\n\n fragment articleProductLinks on ContentfulArticleFreeform {\n products {\n __typename\n ... on ContentfulProduct {\n name {\n name\n childMarkdownRemark {\n html\n }\n }\n slug\n shortDescription\n summary\n cardImage {\n title\n file {\n url\n }\n fluid(maxWidth: 570, quality: 90) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n cardBackgroundColor\n }\n ... on ContentfulProductCategory {\n categoryName\n cardImage {\n title\n description\n fluid(maxWidth: 580, quality: 80) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n backgroundColor\n shopLandingReference {\n slug\n }\n }\n }\n }\n\n query FreeformArticleQuery($locale: String!, $slug: String!) {\n contentfulArticleFreeform(\n node_locale: { eq: $locale }\n slug: { eq: $slug }\n ) {\n title\n category {\n title\n }\n pageTitle\n slug\n previewText\n heroBackgroundColor\n heroSecondaryColor\n essentialTakeaways {\n childMarkdownRemark {\n html\n }\n }\n desktopImage: heroImage {\n description\n fluid(maxWidth: 1920, quality: 90) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n mobileImage: heroImage {\n description\n fluid(maxHeight: 912, quality: 90) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n heroImage {\n file {\n url\n }\n desktop: fluid(maxWidth: 1920, quality: 90, cropFocus: TOP) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n mobile: fixed(width: 960, height: 560, quality: 90, cropFocus: LEFT) {\n ...GatsbyContentfulFixed_withWebp_noBase64\n }\n share: resize(width: 1200, height: 630, quality: 90, cropFocus: LEFT) {\n src\n width\n height\n }\n }\n heroImageMobile {\n fixed(width: 375, height: 552, quality: 100, cropFocus: TOP) {\n ...GatsbyContentfulFixed_withWebp_noBase64\n }\n }\n articleVideo {\n title\n description {\n description\n }\n videoLength\n sources {\n id\n file {\n url\n contentType\n }\n description\n }\n captions {\n file {\n url\n }\n description\n }\n }\n ...expandPrimaryContent\n ...articleProductLinks\n expertsHeading\n expertsSubheading\n experts {\n name\n title\n currentTitle\n articleTitle\n bio {\n bio\n childMarkdownRemark {\n html\n }\n }\n image {\n title\n description\n fluid(maxWidth: 400, quality: 90) {\n ...GatsbyContentfulFluid_withWebp_noBase64\n }\n }\n }\n relatedArticles {\n __typename\n title\n slug\n previewText\n heroBackgroundColor\n heroSecondaryColor\n ...expandPrimaryContent\n category {\n slug\n title\n }\n heroImage {\n file {\n url\n }\n desktop: fixed(\n width: 960\n height: 560\n quality: 100\n cropFocus: LEFT\n ) {\n ...GatsbyContentfulFixed_withWebp_noBase64\n }\n mobile: fixed(\n width: 960\n height: 560\n quality: 100\n cropFocus: LEFT\n ) {\n ...GatsbyContentfulFixed_withWebp_noBase64\n }\n }\n }\n }\n }\n`;\n","require('../../modules/es6.object.assign');\nmodule.exports = require('../../modules/_core').Object.assign;\n","module.exports = require('./_hide');\n","require('../../modules/es6.object.create');\nvar $Object = require('../../modules/_core').Object;\nmodule.exports = function create(P, D) {\n return $Object.create(P, D);\n};\n","var $export = require('./_export');\n// 19.1.2.4 / 15.2.3.6 Object.defineProperty(O, P, Attributes)\n$export($export.S + $export.F * !require('./_descriptors'), 'Object', { defineProperty: require('./_object-dp').f });\n","// 19.1.3.19 Object.setPrototypeOf(O, proto)\nvar $export = require('./_export');\n$export($export.S, 'Object', { setPrototypeOf: require('./_set-proto').set });\n","// 7.2.1 RequireObjectCoercible(argument)\nmodule.exports = function (it) {\n if (it == undefined) throw TypeError(\"Can't call method on \" + it);\n return it;\n};\n","var store = require('./_shared')('wks');\nvar uid = require('./_uid');\nvar Symbol = require('./_global').Symbol;\nvar USE_SYMBOL = typeof Symbol == 'function';\n\nvar $exports = module.exports = function (name) {\n return store[name] || (store[name] =\n USE_SYMBOL && Symbol[name] || (USE_SYMBOL ? Symbol : uid)('Symbol.' + name));\n};\n\n$exports.store = store;\n","// 19.1.2.9 / 15.2.3.2 Object.getPrototypeOf(O)\nvar has = require('./_has');\nvar toObject = require('./_to-object');\nvar IE_PROTO = require('./_shared-key')('IE_PROTO');\nvar ObjectProto = Object.prototype;\n\nmodule.exports = Object.getPrototypeOf || function (O) {\n O = toObject(O);\n if (has(O, IE_PROTO)) return O[IE_PROTO];\n if (typeof O.constructor == 'function' && O instanceof O.constructor) {\n return O.constructor.prototype;\n } return O instanceof Object ? ObjectProto : null;\n};\n"],"sourceRoot":""}