{"version":3,"sources":["webpack:///./src/images/9-cta-arrow-brand-color-1-shade.svg","webpack:///./src/images/9-cta-arrow-brand-color-1-tint.svg","webpack:///./src/components/snippets/DecorationLeftLarge.js","webpack:///./src/components/HeroDivideRight.js","webpack:///./src/images/9-cta-arrow-white.svg","webpack:///./src/components/MainHeroTitle.js","webpack:///./src/components/sections/PublishersSelfShopsStatic.js","webpack:///./src/components/styles/OutlinedText.js","webpack:///./src/components/ArrowButton.js","webpack:///./src/components/styles/animations.js","webpack:///./src/pages/publishers/self-serve-shops.js","webpack:///./src/components/LinesFromRight.js","webpack:///./src/components/HeroOutlineTitle.js","webpack:///./src/components/HeroLanding.js"],"names":["module","exports","DecorationLeftLarge","width","height","viewBox","fill","d","stroke","className","Wrapper","styled","div","props","theme","background","white","mediaMedium","ContainerBox","Container","Box","Row","span","RowButton","Decoration","Title","Eyebrows16","AnimatedWrapper","HeroDivideRight","contentTag","links","title","children","staticLines","LinesFromRight","color","lines","brandColor2","AnimatedLineSvg","static","triggerOffset","svgWidth","as","map","link","key","label","ArrowButton","attrs","args","large","TitleWrapper","titleWidth","MainHeroTitle","cleanTitle","Headline80","PublishersSelfShopsStatic","images","useStaticQuery","section","image","landing","imageMobile","to","state","from","Link","bottomMargins","animationPre","keyFrames","SlideInRight","imageMaxWidth","topPadding","bottomPadding","imageTranslate","imageMarginTop","component","black1","paddingBottom","paddingTopMobile","subtitle","brandColor3","Outline","textBlack1","size","OutlinedText","inline","Element","styles","display","style","VARIANTS","shade","brandColor1Shade","icon","iconArrowBrandColor1Shade","hoverColor","brandColor1","tint","brandColor1Tint","iconArrowBrandColor1Tint","iconArrowWhite","gray2","Arrow","Image","Animation","keyframes","Button","variant","opts","omit","alt","src","FadeSlideInTopRight","FadeSlideInRight","SlideInLeft","SlideInBottom","SlideInTop","FlyBy","WobbleFrames","FadeInBottomFrames","MoveInBottom","active","translateFrom","FadeInBottom","css","FadeInRight","FadeInLeft","FadeIn","FadeInRightSmall","FadeInLeftSmall","AsyncSection","loadable","SelfServeShops","description","Line1","skew","linesSkew","Line2","Line3","Background","padding","marginTop","marginBottom","paddingTop","TitleOutline","undefined","Headline64","ContainerRelative","mediaDesktop","topLargePadding","wrapperOverflow","bottomPaddingMedia","Display","imageWidth","mediaTransform","hasMobileImage","imageBottom","imageSize","gatsbyWidth","DesktopImage","Bottom","Space","bottomSizeMedia","bottomSizeBottomMedia","bottomSize","SubTitle","Eyebrows20","ImageMedia","mediaImgWidth","mediaImgHeight","mediaImgMargins","mediaCss","Blur","blurheight","blurPosition","blurHeightLarge","HomeLanding","animationComponent","noBottom","blurImage","setActive","useState","handleLoad","onLoad","fluid","childImageSharp","bottom","position"],"mappings":"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","file":"component---src-pages-publishers-self-serve-shops-js-21a7a6711ae98c54ebce.js","sourcesContent":["module.exports = \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjJweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMjIgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+SWNvbiAvIEFycm93IFNtYWxsPC90aXRsZT4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ1RBLVNlY29uZGFyeS0vLTE4cHQtLy1EZWZhdWx0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTQuMDAwMDAwLCAtOS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikljb24tLy1BcnJvdy1TbWFsbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQuMDAwMDAwLCAyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTYuNzI0MDI4OSw3IEwyMiwxMi4zMTAzNDQ4IEwxNi43MjQwMjg5LDE3LjYyMDY4OTcgTDE1LjY2ODgzNDcsMTYuNTU4NjIwNyBMMTkuMTk1LDEzLjAwNyBMMCwxMy4wMDc5NjkzIEwwLDExLjUwNTk3NyBMMTkuMDg5LDExLjUwNSBMMTUuNjY4ODM0Nyw4LjA2MjA2ODk3IEwxNi43MjQwMjg5LDcgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjYjIzNjFhIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==\"","module.exports = \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjJweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMjIgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+SWNvbiAvIEFycm93IFNtYWxsPC90aXRsZT4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ1RBLVNlY29uZGFyeS0vLTE4cHQtLy1EZWZhdWx0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTQuMDAwMDAwLCAtOS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikljb24tLy1BcnJvdy1TbWFsbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQuMDAwMDAwLCAyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTYuNzI0MDI4OSw3IEwyMiwxMi4zMTAzNDQ4IEwxNi43MjQwMjg5LDE3LjYyMDY4OTcgTDE1LjY2ODgzNDcsMTYuNTU4NjIwNyBMMTkuMTk1LDEzLjAwNyBMMCwxMy4wMDc5NjkzIEwwLDExLjUwNTk3NyBMMTkuMDg5LDExLjUwNSBMMTUuNjY4ODM0Nyw4LjA2MjA2ODk3IEwxNi43MjQwMjg5LDcgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjZmY3MDUyIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==\"","import React from \"react\";\n\nconst DecorationLeftLarge = () => {\n  return (\n    <svg width=\"2656\" height=\"1794\" viewBox=\"0 0 2656 1794\" fill=\"none\">\n      <path d=\"M2656 21H1116L28.5 1793\" stroke=\"#184179\" className=\"line\" />\n      <path d=\"M2656 39H1077.5L1 1793.5\" stroke=\"#184179\" className=\"line\" />\n      <path d=\"M2656 1H1156L54.5 1793.5\" stroke=\"#184179\" className=\"line\" />\n    </svg>\n  );\n};\n\nexport default DecorationLeftLarge;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Eyebrows16 } from \"./styles/Eyebrows\";\nimport { Body28 } from \"./styles/BodyTypes\";\nimport Container from \"./styles/Container\";\nimport { mediaMedium } from \"./styles/variables\";\nimport { brandColor2, white } from \"./styles/Colors\";\nimport ArrowButton from \"./ArrowButton\";\nimport LinesFromRight from \"./LinesFromRight\";\nimport AnimatedLineSvg from \"./AnimatedLineSvg\";\nimport DecorationLeftLarge from \"./snippets/DecorationLeftLarge\";\n\nconst Wrapper = styled.div`\n  padding: 24px 0 58px;\n  position: relative;\n  overflow: hidden;\n  background: ${(props) => props.theme.background ?? white};\n\n  @media (${mediaMedium}) {\n    padding: 120px 0 116px;\n  }\n`;\n\nconst ContainerBox = styled(Container)`\n  position: relative;\n\n  @media (${mediaMedium}) {\n    display: flex;\n    justify-content: flex-end;\n  }\n`;\n\nconst Box = styled.div`\n  max-width: ${(props) => props.width ?? \"528px\"};\n\n  > div {\n    p {\n      margin-bottom: 0;\n    }\n  }\n`;\n\nconst Row = styled.span`\n  display: block;\n  margin-top: 24px;\n\n  @media (${mediaMedium}) {\n    margin-top: 67px;\n  }\n`;\n\nconst RowButton = styled.span`\n  display: block;\n\n  &:not(:last-child) {\n    margin-bottom: 18px;\n  }\n\n  @media (${mediaMedium}) {\n    &:not(:last-child) {\n      margin-bottom: 23px;\n    }\n  }\n`;\n\nconst Decoration = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 50px;\n  left: -16%;\n  pointer-events: none;\n`;\n\nconst Title = styled(Eyebrows16)`\n  margin-bottom: 38px;\n`;\n\nconst AnimatedWrapper = styled.div`\n  position: absolute;\n  width: 2656px;\n  height: 100%;\n  top: -52px;\n  pointer-events: none;\n\n  @media (max-width: 1079px) {\n    right: -80%;\n  }\n\n  @media (max-width: 980px) {\n    right: -90%;\n  }\n\n  @media (max-width: 890px) {\n    right: -115%;\n  }\n\n  @media (min-width: 1080px) {\n    left: -60%;\n    right: initial;\n  }\n`;\n\nconst HeroDivideRight = ({\n  contentTag,\n  links,\n  theme,\n  title,\n  children,\n  staticLines\n}) => {\n  return (\n    <Wrapper theme={theme}>\n      {theme && theme.background && (\n        <Decoration>\n          <LinesFromRight\n            color={theme && theme.lines ? theme.lines : brandColor2}\n          />\n        </Decoration>\n      )}\n\n      <ContainerBox>\n        {(!theme || (theme && !theme.background)) && (\n          <AnimatedWrapper>\n            <AnimatedLineSvg\n              static={staticLines}\n              triggerOffset={-300}\n              svgWidth=\"100%\"\n            >\n              <DecorationLeftLarge />\n            </AnimatedLineSvg>\n          </AnimatedWrapper>\n        )}\n        <Box theme={theme}>\n          {title && <Title>{title}</Title>}\n          <Body28 theme={theme} as={contentTag ?? \"p\"}>\n            {children}\n            {links && (\n              <Row>\n                {links.map((link) => {\n                  return (\n                    <RowButton key={link.label}>\n                      <ArrowButton attrs={link.args} large={true}>\n                        {link.label}\n                      </ArrowButton>\n                    </RowButton>\n                  );\n                })}\n              </Row>\n            )}\n          </Body28>\n        </Box>\n      </ContainerBox>\n    </Wrapper>\n  );\n};\n\nexport default HeroDivideRight;\n","module.exports = \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjJweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMjIgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+SWNvbiAvIEFycm93IFNtYWxsPC90aXRsZT4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ1RBLVNlY29uZGFyeS0vLTE4cHQtLy1EZWZhdWx0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTQuMDAwMDAwLCAtOS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikljb24tLy1BcnJvdy1TbWFsbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQuMDAwMDAwLCAyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTYuNzI0MDI4OSw3IEwyMiwxMi4zMTAzNDQ4IEwxNi43MjQwMjg5LDE3LjYyMDY4OTcgTDE1LjY2ODgzNDcsMTYuNTU4NjIwNyBMMTkuMTk1LDEzLjAwNyBMMCwxMy4wMDc5NjkzIEwwLDExLjUwNTk3NyBMMTkuMDg5LDExLjUwNSBMMTUuNjY4ODM0Nyw4LjA2MjA2ODk3IEwxNi43MjQwMjg5LDcgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==\"","import React from \"react\";\nimport { Headline80 } from \"./styles/Headings\";\nimport PrimaryButton from \"./PrimaryButton\";\nimport styled from \"styled-components\";\nimport { mediaMedium } from \"./styles/variables\";\n\nconst Wrapper = styled.div`\n  position: relative;\n  z-index: 4;\n`;\n\nconst TitleWrapper = styled.div`\n  max-width: ${(props) => props.theme.titleWidth ?? \"570px\"};\n  margin-bottom: 22px;\n  text-transform: uppercase;\n\n  @media (${mediaMedium}) {\n    margin-bottom: 40px;\n  }\n`;\n\nconst MainHeroTitle = ({ children, label, link, cleanTitle, theme, as }) => {\n  const Title = cleanTitle ? \"div\" : Headline80;\n  return (\n    <Wrapper>\n      <TitleWrapper theme={theme}>\n        <Title as=\"h1\">{children}</Title>\n      </TitleWrapper>\n\n      {label && <PrimaryButton attrs={link}>{label}</PrimaryButton>}\n    </Wrapper>\n  );\n};\n\nexport default MainHeroTitle;\n","import React from \"react\";\nimport HomeLanding from \"../HeroLanding\";\nimport { graphql, Link, useStaticQuery } from \"gatsby\";\nimport OutlinedText from \"../styles/OutlinedText\";\nimport { Headline80 } from \"../styles/Headings\";\nimport HeroTitleOutline from \"../HeroOutlineTitle\";\nimport { black1, brandColor3, white } from \"../styles/Colors\";\nimport HeroDivideRight from \"../HeroDivideRight\";\nimport { SlideInRight } from \"../styles/animations\";\n\nconst PublishersSelfShopsStatic = () => {\n  const images = useStaticQuery(graphql`\n    query {\n      landing: file(relativePath: { eq: \"21-shop-landing.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 1170, maxHeight: 1672, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp_noBase64\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n\n  return (\n    <>\n      <HomeLanding\n        section=\"Self-serve Shops\"\n        image={images.landing}\n        imageMobile={images.landing}\n        link={{\n          label: \"Get Started\",\n          attrs: { to: \"/contact/\", state: { from: \"publisher\" }, as: Link }\n        }}\n        bottomMargins=\"-35%\"\n        theme={{\n          animationPre: \"transform: translateY(30%);\",\n          keyFrames: SlideInRight,\n          imageMaxWidth: \"700px\",\n          topPadding: \"98px\",\n          bottomPadding: \"240px\",\n          imageTranslate:\n            \"translate(calc(100% * 4 / 12), calc(100% * 2.8 / 12))\",\n          imageMarginTop: 0\n        }}\n      >\n        We Build <br /> The Shop\n        <OutlinedText component={Headline80} as=\"span\">\n          You Make It A Hit\n        </OutlinedText>\n      </HomeLanding>\n\n      <HeroTitleOutline\n        theme={{\n          color: white,\n          background: black1,\n          width: \"420px\",\n          paddingBottom: \"0px\",\n          paddingTopMobile: \"100px\"\n        }}\n        title=\"Your Shop,\"\n        subtitle=\"Your Rules\"\n      />\n\n      <HeroDivideRight\n        theme={{\n          width: \"800px\",\n          color: white,\n          background: black1,\n          lines: brandColor3\n        }}\n        contentTag={\"div\"}\n      >\n        <p>\n          If you have a smaller audience size, but still want to dive into the\n          world of commerce — our Self-Serve Shops are the solution you need.\n        </p>\n        <p>\n          We’ll empower you with a Shop and our exclusive offers, and you’ll\n          take it from there.\n        </p>\n      </HeroDivideRight>\n    </>\n  );\n};\n\nexport default PublishersSelfShopsStatic;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { textBlack1, white } from \"./Colors\";\nimport { mediaMedium } from \"./variables\";\n\nconst Outline = styled.span`\n  color: ${(props) => props.color ?? textBlack1};\n  -webkit-text-fill-color: ${(props) => props.fill ?? white};\n  -webkit-text-stroke-width: ${(props) => props.size ?? \"1px\"};\n  -webkit-text-stroke-color: ${(props) =>\n    props.stroke ?? props.color ?? textBlack1};\n\n  @media (${mediaMedium}) {\n    -webkit-text-stroke-width: ${(props) => props.size ?? \"2px\"};\n  }\n`;\n\nconst OutlinedText = ({\n  color,\n  fill,\n  stroke,\n  size,\n  as,\n  component,\n  children,\n  inline\n}) => {\n  const Element = component ?? \"<span />\";\n  const styles = inline ? { display: \"inline\" } : {};\n\n  return (\n    <Element style={styles} as={as}>\n      <Outline color={color} fill={fill} stroke={stroke} size={size}>\n        {children}\n      </Outline>\n    </Element>\n  );\n};\n\nexport default OutlinedText;\n","import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport Image from \"./Image\";\n\nimport omit from \"lodash/omit\";\nimport { Link } from \"gatsby\";\nimport {\n  brandColor1,\n  brandColor1Shade,\n  brandColor1Tint,\n  gray2,\n  white\n} from \"./styles/Colors\";\n\nimport iconArrowBrandColor1Shade from \"../images/9-cta-arrow-brand-color-1-shade.svg\";\nimport iconArrowBrandColor1Tint from \"../images/9-cta-arrow-brand-color-1-tint.svg\";\nimport iconArrowWhite from \"../images/9-cta-arrow-white.svg\";\n\nconst VARIANTS = {\n  shade: {\n    color: brandColor1Shade,\n    icon: iconArrowBrandColor1Shade,\n    hoverColor: brandColor1\n  },\n  tint: {\n    color: brandColor1Tint,\n    icon: iconArrowBrandColor1Tint,\n    hoverColor: brandColor1\n  },\n  white: {\n    color: white,\n    icon: iconArrowWhite,\n    hoverColor: gray2\n  }\n};\n\nconst Arrow = styled(Image)`\n  margin-left: 19px;\n  transition: 0.3s transform;\n`;\n\nconst Animation = keyframes`\n  to {transform: scale(1) translateX(0%)}\n  50% {transform: scale(1.2) translateX(10%)}\n  from {transform: scale(1) translateX(0%)}\n`;\n\nconst Button = styled(Link)`\n  display: inline-flex;\n  align-items: center;\n  color: ${(props) => VARIANTS[props.variant].color};\n  transition: 0.3s color;\n  cursor: pointer;\n  text-decoration: none;\n\n  &:hover {\n    color: ${(props) => VARIANTS[props.variant].hoverColor};\n\n    ${Arrow} {\n      animation: ${Animation} 1s linear infinite;\n    }\n  }\n`;\n\nconst ArrowButton = ({ attrs, large, children, variant = \"shade\" }) => {\n  const opts = omit(attrs, [\"as\"]);\n  opts.as = (attrs && attrs.as) || (attrs && attrs.to) ? attrs.as : \"span\";\n  return (\n    <Button {...opts} variant={variant}>\n      <span>{children}</span>{\" \"}\n      <Arrow\n        alt=\"\"\n        src={VARIANTS[variant].icon}\n        width={large ? 36 : 22}\n        height={large ? 17 : 11}\n      />\n    </Button>\n  );\n};\n\nexport default ArrowButton;\n","import styled, { keyframes, css } from \"styled-components\";\n\nexport const FadeSlideInTopRight = keyframes`\n  0% {\n    transform: translateY(-20%) translateX(20%);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(0) translateX(0);\n    opacity: 1;\n  }\n`;\n\nexport const SlideInRight = keyframes`\n  0% {\n    transform: translateX(30%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n`;\n\nexport const FadeSlideInRight = keyframes`\n  0% {\n    transform: translateX(30%);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n`;\n\nexport const SlideInLeft = keyframes`\n  0% {\n    transform: translateX(-30%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n`;\n\nexport const SlideInBottom = keyframes`\n  0% {\n    transform: translateY(20%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n`;\n\nexport const SlideInTop = keyframes`\n  0% {\n    transform: translateY(-20%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n`;\n\nexport const FlyBy = keyframes`\n  0% {\n    transform: translateY(20%) translateX(-20%);\n  }\n  100% {\n    transform: translateY(0) translateX(0);\n  }\n`;\n\nexport const FadeInFrames = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(40%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const WobbleFrames = keyframes`\n  0% {\n    -webkit-transform: none;\n    transform: none\n  }\n  15% {\n    transform: translate3d(0, -15%, 0);\n  }\n  30% {\n    transform: translate3d(0, 10%, 0);\n  }\n  45% {\n    transform: translate3d(0, -15%, 0);\n  }\n  60% {\n    transform: translate3d(0, 0%, 0);\n  }\n  75% {\n    transform: translate3d(0, -15%, 0);\n  }\n  100% {\n    transform: none\n  }\n`;\n\nexport const FadeInBottomFrames = keyframes`\n  0% {\n    transform: translateY(20%);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`;\n\nexport const MoveInBottom = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform;\n  transform: translateY(\n    ${(props) => (props.active ? 0 : props.translateFrom ?? 20)}%\n  );\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n`;\n\nexport const FadeInBottom = styled.div`\n  transform: translateY(20%);\n  opacity: 0;\n  animation: ${(props) =>\n    props.active\n      ? css`\n          ${FadeInBottomFrames} 0.8s ease forwards 0.1s\n        `\n      : \"none\"};\n`;\n\nexport const FadeInRight = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  transform: translateX(${(props) => (props.active ? 0 : 20)}%);\n`;\n\nexport const FadeInLeft = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform, opacity;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  transform: translateX(${(props) => (props.active ? 0 : -70)}%);\n  opacity: ${(props) => (props.active ? 1 : 0)};\n`;\n\nexport const FadeIn = styled.div`\n  transition: ease 0.8s;\n  transition-property: opacity;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  opacity: ${(props) => (props.active ? 1 : 0)};\n`;\n\nexport const FadeInSmall = styled(FadeInBottom)`\n  transform: translateY(${(props) => (props.active ? 0 : 20)}%);\n`;\n\nexport const FadeInRightSmall = styled(FadeInRight)`\n  transform: translateX(${(props) => (props.active ? 0 : 50)}%);\n`;\n\nexport const FadeInLeftSmall = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform, opacity;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  transform: translateX(${(props) => (props.active ? 0 : -20)}%);\n  opacity: ${(props) => (props.active ? 1 : 0)};\n`;","import React from \"react\";\nimport Layout from \"../../components/Layout\";\nimport Seo from \"../../components/Seo\";\nimport loadable from \"@loadable/component\";\nimport LazyLoadSection from \"../../components/LazyLoadSection\";\nimport StaticSection from \"../../components/sections/PublishersSelfShopsStatic\";\n\nconst AsyncSection = loadable(() =>\n  import(\"../../components/sections/PublishersSelfShopsDefer\")\n);\n\nconst SelfServeShops = () => (\n  <Layout>\n    <Seo\n      title=\"Self-Serve eCommerce Platform for Publishers\"\n      description=\"Launch a branded eCommerce shop with StackCommerce’s technology and manage the shop with our intuitive commerce toolkit.\"\n    />\n\n    <LazyLoadSection static={<StaticSection />}>\n      <AsyncSection />\n    </LazyLoadSection>\n  </Layout>\n);\n\nexport default SelfServeShops;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { linesSkew, mediaMedium } from \"./styles/variables\";\nimport { brandColor2 } from \"./styles/Colors\";\n\nconst Wrapper = styled.div`\n  position: relative;\n  width: 100%;\n  padding-top: 100%;\n  pointer-events: none;\n`;\n\nconst Line1 = styled.span`\n  @media (${mediaMedium}) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 35%;\n    transform: skewX(${(props) => props.skew ?? linesSkew});\n    border-top: 1px solid;\n    border-left: 1px solid;\n    border-color: ${(props) => props.color ?? brandColor2};\n  }\n`;\n\nconst Line2 = styled(Line1)`\n  @media (${mediaMedium}) {\n    top: 18px;\n    left: calc(35% - 32px);\n  }\n`;\n\nconst Line3 = styled(Line1)`\n  @media (${mediaMedium}) {\n    top: 36px;\n    left: calc(35% - 64px);\n  }\n`;\n\nconst LinesFromRight = ({ color, skew }) => {\n  return (\n    <Wrapper>\n      <Line1 skew={skew} color={color} />\n      <Line2 skew={skew} color={color} />\n      <Line3 skew={skew} color={color} />\n    </Wrapper>\n  );\n};\n\nexport default LinesFromRight;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Headline64 } from \"./styles/Headings\";\nimport Container from \"./styles/Container\";\nimport { mediaMedium } from \"./styles/variables\";\nimport OutlinedText from \"./styles/OutlinedText\";\nimport { white } from \"./styles/Colors\";\n\nconst Background = styled.div`\n  background: ${(props) => props.theme.background ?? white};\n  padding: ${(props) => props.theme.padding ?? 0};\n`;\n\nconst Wrapper = styled(Container)`\n  padding-top: ${(props) => props.theme.paddingTopMobile ?? \"0px\"};\n\n  @media (${mediaMedium}) {\n    margin-top: ${(props) => props.theme.marginTop ?? \"-100px\"};\n    margin-bottom: ${(props) => props.theme.marginBottom ?? \"0px\"};\n    position: relative;\n    z-index: 2;\n    padding-bottom: ${(props) => props.theme.paddingBottom ?? \"0\"};\n    padding-top: ${(props) => props.theme.paddingTop ?? \"0px\"};\n  }\n`;\n\nconst Box = styled.div`\n  max-width: ${(props) => props.theme.width ?? \"400px\"};\n  padding: 16px 0;\n`;\n\nconst TitleOutline = ({ title, theme, subtitle, inline }) => {\n  return (\n    <Background theme={theme}>\n      <Wrapper theme={theme}>\n        <Box theme={theme}>\n          <Headline64 theme={theme}>\n            {title}{\" \"}\n            <OutlinedText\n              inline\n              color={theme && theme.color ? theme.color : undefined}\n              fill={theme && theme.background ? theme.background : undefined}\n              as=\"span\"\n              component={Headline64}\n            >\n              {subtitle}\n            </OutlinedText>\n          </Headline64>\n        </Box>\n      </Wrapper>\n    </Background>\n  );\n};\n\nexport default TitleOutline;\n","import React, { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { black1, white } from \"./styles/Colors\";\nimport { mediaDesktop, mediaMedium } from \"./styles/variables\";\nimport MainHeroTitle from \"./MainHeroTitle\";\nimport Container from \"./styles/Container\";\nimport { Eyebrows20 } from \"./styles/Eyebrows\";\nimport Image from \"./Image\";\n\nconst ContainerRelative = styled(Container)`\n  position: relative;\n  padding-top: 43px;\n\n  @media (${mediaMedium}) {\n    padding-top: ${(props) => props.theme.topPadding ?? \"38px\"};\n    padding-bottom: ${(props) => props.theme.bottomPadding ?? \"240px\"};\n  }\n\n  @media (${mediaDesktop}) {\n    padding-top: ${(props) => props.theme.topLargePadding ?? \"38px\"};\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  z-index: 1;\n  max-width: 100vw;\n  background-color: ${white};\n  overflow: ${(props) => props.theme.wrapperOverflow ?? \"hidden\"};\n  padding-bottom: ${(props) => props.theme.bottomPaddingMedia ?? \"0px\"};\n\n  @media (${mediaMedium}) {\n    padding-bottom: 0;\n  }\n`;\n\nconst Display = styled.div`\n  width: ${(props) => props.theme.imageWidth ?? \"100vw\"};\n  max-width: ${(props) => props.theme.imageMaxWidth ?? \"100vw\"};\n  transform: ${(props) => props.theme.mediaTransform ?? \"translateX(-20px)\"};\n  margin-top: ${(props) => props.theme.imageMarginTop ?? \"64px\"};\n  ${(props) => (props.hasMobileImage ? \"display: none;\" : \"\")};\n\n  .gatsby-image-wrapper {\n    opacity: ${(props) => (props.active ? 1 : 0)};\n    ${(props) => props.theme.animationPre ?? \"\"}\n    animation: ${(props) =>\n      props.theme.keyFrames && props.active\n        ? css`\n            ${props.theme.keyFrames}\n          `\n        : \"none\"}\n      0.9s ease both 0.5s;\n  }\n\n  @media (${mediaMedium}) {\n    ${(props) => (props.theme.styles ? props.theme.styles : \"\")};\n    ${(props) => (props.hasMobileImage ? \"display: block;\" : \"\")};\n    position: absolute;\n    right: 0;\n    border: 0;\n    bottom: ${(props) => props.theme.imageBottom ?? \"0\"};\n    transform: ${(props) =>\n      props.theme.imageTranslate ??\n      \"translate(calc(100% * 4 / 12), calc(100% * 2 / 12))\"};\n    z-index: 1;\n    width: ${(props) => props.theme.imageSize ?? \"calc(100% * 10 / 12)\"};\n\n    .gatsby-image-wrapper {\n      margin-right: 0;\n      margin-left: auto;\n\n      ${(props) =>\n        props.theme.gatsbyWidth\n          ? `max-width: ${props.theme.gatsbyWidth} !important; max-height: none !important`\n          : \"\"};\n    }\n  }\n`;\n\nconst DesktopImage = styled(Image)`\n  display: block;\n  width: 100%;\n`;\n\nconst Bottom = styled.div`\n  background-color: ${(props) => props.color};\n  margin-top: ${(props) => props.marginTop ?? \"0\"};\n  position: relative;\n  z-index: 1;\n\n  @media (min-width: 720px) {\n    margin-top: ${(props) => `calc(${props.marginTop}/1.5)` ?? \"0\"};\n  }\n\n  @media (${mediaMedium}) {\n    z-index: initial;\n    margin: 0;\n  }\n`;\n\nconst Space = styled.div`\n  padding-top: ${(props) => props.theme.bottomSizeMedia ?? \"0\"};\n  padding-bottom: ${(props) => props.theme.bottomSizeBottomMedia ?? \"93px\"};\n\n  @media (${mediaMedium}) {\n    display: block;\n    width: 100%;\n    padding-top: ${(props) => props.theme.bottomSize ?? \"104px\"};\n  }\n`;\n\nconst SubTitle = styled(Eyebrows20)`\n  margin: 0 0 28px;\n`;\n\nconst ImageMedia = styled(Image)`\n  pointer-events: none;\n  max-width: ${(props) => props.theme.mediaImgWidth ?? \"100%\"} !important;\n  max-height: ${(props) => props.theme.mediaImgHeight ?? \"100%\"} !important;\n  width: 100%;\n  margin: ${(props) => props.theme.mediaImgMargins ?? \"40px 0 0\"};\n  ${(props) => props.theme.mediaCss ?? \"\"};\n  z-index: 2;\n  transform: ${(props) => props.theme.mediaTransform ?? \"none\"};\n\n  opacity: ${(props) => (props.active ? 1 : 0)};\n  ${(props) => props.theme.animationPre ?? \"\"}\n  animation: ${(props) =>\n    props.theme.keyFrames && props.active\n      ? css`\n          ${props.theme.keyFrames}\n        `\n      : \"none\"}\n      0.9s ease both 0.5s;\n\n  @media (${mediaMedium}) {\n    max-width: 90% !important;\n    max-height: none !important;\n    display: none;\n  }\n`;\n\nconst Blur = styled.div`\n  z-index: 2;\n  width: 100%;\n  height: ${(props) => props.theme.blurheight ?? 30}px;\n  position: absolute;\n  bottom: ${(props) => props.theme.blurPosition ?? 0};\n  right: -25%;\n  background: linear-gradient(\n    0deg,\n    rgba(245, 245, 245, 0.95) 0%,\n    rgba(245, 245, 245, 0.9) 20%,\n    rgba(245, 245, 245, 0) 100%\n  );\n\n  @media (${mediaMedium}) {\n    height: ${(props) => props.theme.blurHeightLarge ?? 110}px;\n  }\n`;\n\nconst HomeLanding = ({\n  animationComponent,\n  link,\n  image,\n  imageMobile,\n  theme,\n  cleanTitle,\n  children,\n  section,\n  bottomMargins,\n  noBottom,\n  blurImage\n}) => {\n  const hasMobileImage = !!imageMobile;\n\n  const [active, setActive] = useState(false);\n\n  const handleLoad = () => {\n    setActive(true);\n  };\n\n  return (\n    <Wrapper theme={theme}>\n      <ContainerRelative theme={theme}>\n        {section && <SubTitle as=\"span\">{section}</SubTitle>}\n        <MainHeroTitle\n          cleanTitle={cleanTitle}\n          theme={theme}\n          link={link.attrs ?? null}\n          label={link.label}\n        >\n          {children}\n        </MainHeroTitle>\n        {!animationComponent && image && (\n          <Display\n            theme={theme}\n            active={active}\n            hasMobileImage={hasMobileImage}\n          >\n            <DesktopImage\n              onLoad={handleLoad}\n              theme={theme}\n              fluid={image.childImageSharp.fluid}\n            />\n          </Display>\n        )}\n\n        {animationComponent && animationComponent}\n      </ContainerRelative>\n\n      {!animationComponent && imageMobile && (\n        <ImageMedia\n          active={active}\n          onLoad={handleLoad}\n          theme={theme}\n          fluid={image.childImageSharp.fluid}\n        />\n      )}\n\n      {!noBottom && (\n        <Bottom\n          marginTop={bottomMargins}\n          color={theme && theme.bottom ? theme.bottom : black1}\n        >\n          <Container>\n            <Space theme={theme} />\n          </Container>\n        </Bottom>\n      )}\n      {blurImage && (\n        <Container style={{ position: \"relative\" }}>\n          <Blur theme={theme} />\n        </Container>\n      )}\n    </Wrapper>\n  );\n};\n\nexport default HomeLanding;\n"],"sourceRoot":""}