{"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/brands/StackMediaLanding.js","webpack:///./src/components/sections/BrandsStackMediaStatic.js","webpack:///./src/components/styles/OutlinedText.js","webpack:///./src/pages/brands/stack-media.js","webpack:///./src/components/ArrowButton.js","webpack:///./src/components/LinesFromRight.js","webpack:///./src/components/HeroOutlineTitle.js","webpack:///./src/components/styles/TextHighlight.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","ContainerRelative","mediaDesktop","Column","DisplayWrapper","Display","Image","Bottom","gray4","Space","SubTitle","Eyebrows20","Trigger","StackMediaLanding","PureComponent","constructor","super","this","state","controllerSM","sceneSM","id","uniqueId","ScrollMagic","TweenLite","defaultOverwrite","ScrollMagicPluginGsap","TimelineMax","initAnimation","componentWillUnmount","destroy","TopToVars","translateY","ease","Linear","easeIn","tweenSM","to","Controller","Scene","triggerElement","duration","offset","setTween","addTo","setState","render","from","Link","OutlinedText","component","fluid","image","childImageSharp","BrandsStackMediaStatic","images","useStaticQuery","file","paddingBottom","subtitle","TextHighlight","Outline","textBlack1","size","inline","Element","styles","display","style","DeferSection","loadable","StackMedia","description","VARIANTS","shade","brandColor1Shade","icon","iconArrowBrandColor1Shade","hoverColor","brandColor1","tint","brandColor1Tint","iconArrowBrandColor1Tint","iconArrowWhite","gray2","Arrow","Animation","keyframes","Button","variant","opts","omit","alt","src","Line1","skew","linesSkew","Line2","Line3","Background","padding","paddingTopMobile","marginTop","marginBottom","paddingTop","TitleOutline","undefined","Headline64","Text","strong","black1","brandColor3"],"mappings":"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","file":"component---src-pages-brands-stack-media-js-de0f577207fa95b73b98.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, { PureComponent } from \"react\";\nimport MainHeroTitle from \"../MainHeroTitle\";\nimport { gray4, white } from \"../styles/Colors\";\nimport Container from \"../styles/Container\";\nimport styled from \"styled-components\";\nimport { mediaDesktop, mediaMedium } from \"../styles/variables\";\nimport Image from \"../Image\";\nimport { Eyebrows20 } from \"../styles/Eyebrows\";\nimport OutlinedText from \"../styles/OutlinedText\";\nimport { Headline80 } from \"../styles/Headings\";\nimport uniqueId from \"lodash/uniqueId\";\nimport { Linear, TimelineMax, TweenLite } from \"gsap/dist/gsap\";\nimport { ScrollMagicPluginGsap } from \"scrollmagic-plugin-gsap\";\nimport { Link } from \"gatsby\";\n\nconst ContainerRelative = styled(Container)`\n  position: relative;\n  padding-top: 43px;\n\n  @media (${mediaMedium}) {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    padding-top: 98px;\n    padding-bottom: 240px;\n  }\n\n  @media (${mediaDesktop}) {\n    padding-top: 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: hidden;\n  padding-bottom: 0;\n\n  @media (${mediaMedium}) {\n    padding-bottom: 0;\n  }\n`;\n\nconst Column = styled.div`\n  position: relative;\n  z-index: 2;\n`;\n\nconst DisplayWrapper = styled.div`\n  margin-top: 64px;\n  width: 120%;\n  transform: translateX(-10%);\n\n  @media (${mediaMedium}) {\n    margin-top: 0;\n    position: absolute;\n    right: -60%;\n    top: -17%;\n    width: 500px;\n    transform: none;\n  }\n\n  @media (min-width: 980px) {\n    width: 700px;\n  }\n`;\n\nconst Display = styled(Image)`\n  margin: 0 auto;\n\n  @media (${mediaMedium}) {\n    margin: 0;\n    transform: none;\n    max-width: none !important;\n    max-height: none !important;\n  }\n`;\n\nconst Bottom = styled.div`\n  background-color: ${gray4};\n  margin-top: -20%;\n  position: relative;\n  z-index: 1;\n\n  @media (min-width: 720px) {\n    margin-top: 0;\n  }\n\n  @media (${mediaMedium}) {\n    position: static;\n    z-index: initial;\n    margin: 0;\n  }\n`;\n\nconst Space = styled.div`\n  padding-top: 0;\n  padding-bottom: 88px;\n\n  @media (${mediaMedium}) {\n    display: block;\n    width: 100%;\n    padding-top: 104px;\n  }\n`;\n\nconst SubTitle = styled(Eyebrows20)`\n  margin: 0 0 28px;\n`;\n\nconst Trigger = styled.div`\n  position: absolute;\n  bottom: 10%;\n\n  @media (${mediaMedium}) {\n    bottom: 0;\n  }\n`;\n\nclass StackMediaLanding extends PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      controllerSM: null,\n      sceneSM: null,\n      id: uniqueId(\"lading-\")\n    };\n  }\n\n  async componentDidMount() {\n    this.ScrollMagic = await import(\"scrollmagic\");\n    TweenLite.defaultOverwrite = \"none\";\n\n    ScrollMagicPluginGsap(this.ScrollMagic, TweenLite, TimelineMax);\n\n    this.initAnimation();\n  }\n\n  componentWillUnmount() {\n    const { controllerSM, sceneSM } = this.state;\n\n    if (controllerSM) controllerSM.destroy(true);\n    if (sceneSM) sceneSM.destroy(true);\n  }\n\n  initAnimation() {\n    const TopToVars = {\n      translateY: \"-40%\",\n      ease: Linear.easeIn\n    };\n\n    const tweenSM = TweenLite.to(`#${this.state.id}-display`, 1, TopToVars);\n\n    // init controller\n    const controllerSM = new this.ScrollMagic.Controller();\n\n    // build scene\n    const sceneSM = new this.ScrollMagic.Scene({\n      triggerElement: `#${this.state.id}-trigger-top`,\n      duration: 500,\n      offset: -200\n    })\n      .setTween(tweenSM)\n      .addTo(controllerSM);\n\n    this.setState({ controllerSM, sceneSM });\n  }\n\n  render() {\n    return (\n      <>\n        <Wrapper>\n          <ContainerRelative>\n            <Trigger id={`${this.state.id}-trigger-top`} />\n\n            <div>\n              <SubTitle as=\"span\">STACKMEDIA FOR BRANDS</SubTitle>\n              <MainHeroTitle\n                link={{ to: \"/contact/?smopt=brand\", state: { from: \"brand\" }, as: Link }}\n                label=\"Sign Up\"\n              >\n                NATIVE ADVERTISING,{\" \"}\n                <OutlinedText component={Headline80} as=\"span\">\n                  REIMAGINED\n                </OutlinedText>\n              </MainHeroTitle>\n            </div>\n\n            <Column id={`${this.state.id}-display`}>\n              <DisplayWrapper>\n                <Display fluid={this.props.image.childImageSharp.fluid} />\n              </DisplayWrapper>\n            </Column>\n          </ContainerRelative>\n          <Bottom>\n            <Container>\n              <Space />\n            </Container>\n          </Bottom>\n        </Wrapper>\n      </>\n    );\n  }\n}\n\nexport default StackMediaLanding;\n","import React from \"react\";\nimport { graphql, useStaticQuery } from \"gatsby\";\nimport { brandColor2, gray4 } from \"../styles/Colors\";\nimport HeroTitleOutline from \"../HeroOutlineTitle\";\nimport HeroDivideRight from \"../HeroDivideRight\";\nimport TextHighlight from \"../styles/TextHighlight\";\nimport StackMediaLanding from \"../brands/StackMediaLanding\";\n\nconst BrandsStackMediaStatic = () => {\n  const images = useStaticQuery(graphql`\n    query {\n      file(relativePath: { eq: \"65-brands-ads-landing.png\" }) {\n        childImageSharp {\n          fluid(quality: 80) {\n            ...GatsbyImageSharpFluid_withWebp_noBase64\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n\n  return (\n    <>\n      <StackMediaLanding image={images.file} />\n\n      <HeroTitleOutline\n        theme={{\n          background: gray4,\n          fill: gray4,\n          paddingBottom: \"0px\",\n          width: \"640px\"\n        }}\n        title=\"WHY\"\n        subtitle=\"STACKMEDIA ?\"\n      />\n\n      <HeroDivideRight\n        theme={{ background: gray4, lines: brandColor2 }}\n        contentTag={\"div\"}\n      >\n        <p>\n          We believe you should only pay for advertising that drives real\n          results.\n        </p>\n        <p>\n          That’s why we threw out the traditional CPM model, and built the first\n          and only{\" \"}\n          <TextHighlight theme={{ background: gray4 }}>\n            CPC performance-based\n          </TextHighlight>{\" \"}\n          sponsored content platform, delivering premium articles, email, +\n          native ad placements at scale.\n        </p>\n      </HeroDivideRight>\n    </>\n  );\n};\n\nexport default BrandsStackMediaStatic;\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 Layout from \"../../components/Layout\";\nimport Seo from \"../../components/Seo\";\nimport loadable from \"@loadable/component\";\nimport LazyLoadSection from \"../../components/LazyLoadSection\";\nimport StaticSection from \"../../components/sections/BrandsStackMediaStatic\";\n\nconst DeferSection = loadable(() =>\n  import(\"../../components/sections/BrandsStackMediaDefer\")\n);\n\nconst StackMedia = () => (\n  <Layout>\n    <Seo\n      title=\"StackMedia Advertising Solutions\"\n      description=\"We help marketers get more value from their advertising dollars. Reach targeted audiences at scale with our publisher network.\"\n    />\n\n    <LazyLoadSection static={<StaticSection />}>\n      <DeferSection />\n    </LazyLoadSection>\n  </Layout>\n);\n\nexport default StackMedia;\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 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 from \"react\";\nimport styled from \"styled-components\";\nimport { black1, brandColor3 } from \"./Colors\";\nimport { mediaMedium } from \"./variables\";\n\nconst Text = styled.strong`\n  font-weight: 800;\n  position: relative;\n  color: ${(props) => props.theme.color ?? black1};\n  box-shadow: inset 0 -0.325em ${(props) => props.theme.background ?? \"red\"},\n    inset 0 -0.525em ${brandColor3};\n  display: inline;\n\n  span {\n    position: relative;\n    z-index: 2;\n  }\n\n  @media (${mediaMedium}) {\n    &:before {\n      height: 8px;\n      bottom: 9px;\n    }\n  }\n`;\n\nconst TextHighlight = ({ theme, children }) => {\n  return (\n    <Text theme={theme}>\n      <span>{children}</span>\n    </Text>\n  );\n};\n\nexport default TextHighlight;\n"],"sourceRoot":""}