{"version":3,"file":"component---src-pages-careers-node-careers-vacancy-title-tsx-0f97557b3d403e0ac7a4.js","mappings":"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","sources":["webpack://gravitywell-website-2019/./src/components/careers/VacanciesList.tsx","webpack://gravitywell-website-2019/./src/components/html-schema-snippets/breadcrumb-schema.tsx","webpack://gravitywell-website-2019/./src/components/page-top/page-top.tsx","webpack://gravitywell-website-2019/./src/components/wysiwyg/wysiwyg.tsx","webpack://gravitywell-website-2019/./src/assets/images/careers/life-1.png","webpack://gravitywell-website-2019/./src/assets/images/careers/life-2.png","webpack://gravitywell-website-2019/./src/assets/images/careers/life-3.png","webpack://gravitywell-website-2019/./src/components/careers/JoinCard.tsx","webpack://gravitywell-website-2019/./src/pages/careers/{NodeCareersVacancy.title}.tsx"],"sourcesContent":["import React from \"react\";\nimport { navigate } from \"gatsby\";\n\nimport styled from \"src/theme/styled\";\nimport Text from \"src/components/text\";\nimport Icon from \"src/components/icon\";\nimport Link from \"src/components/link\";\n\nimport { FullWidthColumnWrapper } from \"../confines-wrappers\";\n\nexport interface IVacancy {\n  id: string;\n  created: string;\n  changed: string;\n  title: string;\n  gatsbyPath: string;\n  field_job_advert_summary?: {\n    processed: string;\n  };\n  field_job_advert_copy: {\n    processed: string;\n  };\n}\n\ninterface VacanciesListProps {\n  vacancies?: IVacancy[];\n  innerRef?: React.RefObject<HTMLDivElement>;\n}\n\nexport const VacanciesList: React.FC<VacanciesListProps> = ({ vacancies, innerRef }) => {\n  return (\n    <VacanciesWrapper innerRef={innerRef}>\n      <FullWidthColumnWrapper>\n        <SectionTitle>\n          Current opportunities at Gravitywell\n        </SectionTitle>\n\n        {vacancies ? (\n          vacancies.map(\n            ({\n              id, title, gatsbyPath\n            }) => (\n              <VacancyWrapper\n                key={id}\n                onClick={() => navigate(gatsbyPath)}\n              >\n                <Text fontWeight=\"bold\">\n                  {title}\n                </Text>\n\n                <Icon icon=\"arrowRight\" />\n              </VacancyWrapper>\n            )\n          )\n        ) : (\n          <Text fontSize=\"subhead_1\">\n            There are currently no positions available.\n          </Text>\n        )}\n\n        <ContactText fontSize=\"subhead_2\">\n          {\"We look for thoughtful, skilful people to work with long-term. If you’re interested in joining the team, please \"}\n\n          <Link href=\"mailto:careers@gravitywell.co.uk\">\n            send us a message\n          </Link>\n          .\n        </ContactText>\n      </FullWidthColumnWrapper>\n    </VacanciesWrapper>\n  );\n};\n\nconst SectionTitle = styled(Text).attrs({ fontWeight: \"heavy\" })`\n  margin-bottom: 1rem;\n\n  font-size: ${({ theme }) => theme.font.size.subhead_2};\n  @media (min-width: 768px) {\n    font-size: ${({ theme }) => theme.font.size.subhead_3};\n  }\n`;\n\nconst VacanciesWrapper = styled.div`\n  background-color: ${({ theme }) => theme.color.lightestGrey};\n  \n  margin-top: 6rem;\n  padding: 6rem 0;\n  @media (min-width: 768px) {\n    margin-top: 12rem;\n    padding: 12rem 0;\n  }\n  \n  & > div {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${SectionTitle} {\n    margin-bottom: 4rem;\n    @media (min-width: 768px) {\n      margin-bottom: 8rem;\n    }\n    \n  }\n`;\n\nconst VacancyWrapper = styled.div`\n  padding: 3rem;\n  padding-left: 0;\n  border-bottom: 2px solid black;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n\n  span, svg {\n    transition: 0.25s all ease;\n  }\n\n  &:hover {\n    cursor: pointer;\n    span {\n      color: ${({ theme }) => theme.color.brandColor};\n    }\n    svg {\n      fill: ${({ theme }) => theme.color.brandColor};\n    }\n  }\n`;\n\nconst ContactText = styled(Text)`\n  max-width: 82rem;\n\n  margin-top: 8rem;\n  margin-bottom: 4rem;\n  font-size: ${({ theme }) => theme.font.size.subhead_1};\n\n  @media (min-width: 768px) {\n    margin-top: 12rem;\n    margin-bottom: 8rem;\n    font-size: ${({ theme }) => theme.font.size.subhead_2};\n  }\n`;","import forceTrailingSlash from \"../../templates/utils/forceTrailingSlash\";\n\nexport interface IBreadCrumb {\n  name: string;\n  path: string;\n}\n\nexport interface IBreadCrumbSchema {\n  \"@context\": \"https://schema.org\";\n  \"@type\": \"BreadcrumbList\";\n  itemListElement: Array<{\n    \"@type\": \"ListItem\";\n    position: number;\n    name: string;\n    item: string;\n  }>;\n}\n\nconst breadCrumbSchema = (\n  breadcrumbs: IBreadCrumb[]\n): IBreadCrumbSchema => {\n  const breadCrumbObj: IBreadCrumbSchema = {\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"BreadcrumbList\",\n    \"itemListElement\": []\n  };\n\n  // Set the breadcrumb item element data for each breadcrumb given\n  for (const i in breadcrumbs) {\n    if (breadcrumbs[ i ]) {\n      const breadcrumb = breadcrumbs[ i ];\n\n      breadCrumbObj.itemListElement.push({\n        \"@type\": \"ListItem\",\n        \"position\": parseInt(i, 0) + 1,\n        \"name\": breadcrumb.name,\n        \"item\": forceTrailingSlash(\n          `https://www.gravitywell.co.uk${breadcrumb.path}`\n        )\n      });\n    }\n  }\n\n  return breadCrumbObj;\n};\n\nexport default breadCrumbSchema;\n","import React, { CSSProperties } from \"react\";\n\nimport styled from \"../../theme/styled\";\nimport { generator } from \"../gradients\";\nimport { IGradients } from \"../gradients/gradient-list\";\n\ninterface IPageTop {\n  id?: string;\n  className?: string;\n  gradient?: keyof IGradients;\n  backgroundImage?: string;\n  overlayColor?: string;\n  borderTop?: string;\n  backgroundColor?: string;\n  parallax?: boolean;\n  maxWidth?: number;\n  maxHeight?: number;\n  height?: \"auto\" | \"tiny\" | \"small\" | \"medium\" | \"large\";\n  minHeight?: number;\n  children: React.ReactNode;\n  style?: CSSProperties;\n  widthType?:\n    | \"FullWidthWrapper\"\n    | \"FullWidthColumnWrapper\"\n    | \"ColumnWidthWrapper\"\n    | \"HalfColumnWidthWrapper\";\n}\n\ninterface IPageTopContainer {\n  gradient?: keyof IGradients;\n  maxHeight?: string;\n  aspectRatios: IAspectRatios;\n  backgroundColor?: string;\n  borderTop?: string;\n  backgroundImage?: string;\n}\n\ninterface IAspectRatios {\n  320: string;\n  375: string;\n  480: string;\n  568: string;\n  600: string;\n  768: string;\n  960: string;\n  1024: string;\n  1280: string;\n  1440: string;\n  1920: string;\n}\n\ninterface IColorOverlay {\n  overlayColor?: string;\n}\n\nconst PageTopContainer = styled<IPageTopContainer, \"div\">(\"div\")`\n  transition: 0.2s ease-in-out;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  min-height: ${props => props.aspectRatios[ 320 ]};\n  /* padding-top: ${props => (!props.backgroundImage && \"10rem;\") || \"66%\"}; */\n  /* padding-bottom: ${props =>\n    (!props.backgroundImage && \"4.8rem;\") || \"0\"}; */\n  width: 100%;\n  border-top: ${props =>\n    props.borderTop ? `0.2rem solid ${props.borderTop}` : \"\"};\n  background-color: ${props => props.backgroundColor};\n  background: ${props =>\n    props.backgroundImage && `url(${props.backgroundImage})`};\n  background-size: ${props => props.backgroundImage && \"cover\"};\n  background-position: ${props => props.backgroundImage && \"center center\"};\n  background: ${props =>\n    props.gradient && generator({\n      gradient: props.gradient,\n      angle: -38\n    })};\n\n  .top-content-wrapper {\n    transition: 0.2s ease-in-out;\n    display: flex;\n    overflow: hidden;\n    flex-direction: column;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    padding-top: 6.4rem;\n  }\n\n  @media (min-width: 600px) {\n    min-height: ${props => props.aspectRatios[ 600 ]};\n  }\n\n  @media (min-width: 768px) {\n    .top-content-wrapper {\n      padding-top: 7.2rem;\n    }\n  }\n\n  @media (min-width: 960px) {\n    min-height: ${props => props.aspectRatios[ 960 ]};\n  }\n\n  @media (min-width: 1280px) {\n    min-height: auto;\n    max-height: ${props => props.maxHeight};\n    height: ${props => props.aspectRatios[ 1280 ]};\n  }\n\n  @media (min-width: 1440px) {\n    height: ${props => props.aspectRatios[ 1440 ]};\n  }\n`;\n\nconst ColorOverlayWrapper = styled<IColorOverlay, \"div\">(\"div\")`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  opacity: 0.5;\n  background: ${props => props.overlayColor};\n`;\n\nconst ColorOverlay = (props: IColorOverlay) => {\n  if (!props.overlayColor) {\n    return null;\n  }\n\n  return <ColorOverlayWrapper overlayColor={props.overlayColor} />;\n};\n\nconst PageTop = (props: IPageTop) => {\n  const { height } = props;\n\n  const aspectRatios: IAspectRatios = {\n    320: \"66.6vw\",\n    375: \"66.6vw\",\n    480: \"66.6vw\",\n    568: \"66.6vw\",\n    600: \"66.6vw\",\n    768: \"66.6vw\",\n    960: \"66.6vw\",\n    1024: \"66.6vw\",\n    1280: \"66.6vw\",\n    1440: \"66.6vw\",\n    1920: \"66.6vw\"\n  };\n\n  let maxHeight = \"58rem\";\n\n  switch (height) {\n    case \"large\":\n      maxHeight = \"88rem\";\n      aspectRatios[ 600 ] = \"72vw\";\n      aspectRatios[ 960 ] = \"61vw\";\n      aspectRatios[ 1280 ] = \"50vw\";\n      aspectRatios[ 1440 ] = \"45.8vw\";\n      aspectRatios[ 1920 ] = \"45.8vw\";\n      break;\n\n    case \"medium\":\n      maxHeight = \"70rem\";\n      aspectRatios[ 600 ] = \"64vw\";\n      aspectRatios[ 960 ] = \"54vw\";\n      aspectRatios[ 1280 ] = \"44vw\";\n      aspectRatios[ 1440 ] = \"36.4vw\";\n      aspectRatios[ 1920 ] = \"36.4vw\";\n      break;\n\n    case \"small\":\n      maxHeight = \"58rem\";\n      aspectRatios[ 600 ] = \"54vw\";\n      aspectRatios[ 960 ] = \"46vw\";\n      aspectRatios[ 1280 ] = \"38vw\";\n      aspectRatios[ 1440 ] = \"34.8vw\";\n      aspectRatios[ 1920 ] = \"30.2vw\";\n      break;\n\n    default:\n    case \"tiny\":\n      maxHeight = \"43.4rem\";\n      aspectRatios[ 600 ] = \"50vw\";\n      aspectRatios[ 960 ] = \"38vw\";\n      aspectRatios[ 1280 ] = \"31vw\";\n      aspectRatios[ 1440 ] = \"30.2vw\";\n      aspectRatios[ 1920 ] = \"30.2vw\";\n      break;\n\n    case \"auto\":\n      maxHeight = \"none\";\n      aspectRatios[ 600 ] = \"auto\";\n      aspectRatios[ 960 ] = \"auto\";\n      aspectRatios[ 1280 ] = \"auto\";\n      aspectRatios[ 1440 ] = \"auto\";\n      aspectRatios[ 1920 ] = \"auto\";\n      break;\n  }\n\n  return (\n    <PageTopContainer\n      id={props.id}\n      className=\"top-content-container\"\n      style={props.style}\n      gradient={props.gradient}\n      backgroundImage={props.backgroundImage}\n      backgroundColor={props.backgroundColor}\n      borderTop={props.borderTop}\n      maxHeight={maxHeight}\n      aspectRatios={aspectRatios}\n    >\n      <ColorOverlay overlayColor={props.overlayColor} />\n\n      <div className=\"top-content-wrapper\">\n        {props.children}\n      </div>\n    </PageTopContainer>\n  );\n};\n\nexport default PageTop;\n","import Parser, {\n  domToReact,\n  DOMNode\n} from \"html-react-parser\";\nimport * as React from \"react\";\nimport {\n  Text,\n  Element\n} from \"domhandler\";\n\nimport Icon from \"../icon\";\nimport Link from \"../link\";\n\ninterface IProps {\n  className?: string;\n  type: \"plain\" | \"formatted\";\n  content: string;\n}\n\nconst isTextNode = (domNode: DOMNode): domNode is Text => domNode.nodeType === 2;\nconst isElementNode = (domNode: DOMNode): domNode is Element => domNode.nodeType === 1;\n\nconst Wysiwyg = ({\n  className, type, content\n}: IProps) => {\n  return (\n    <>\n      {Parser(content, {\n        replace: domNode => {\n          const newlineRegex = /(?:\\r\\n)|(?:\\r)|(?:\\n)/gi;\n\n          // Create a JSX.Element for plain text\n          if (\n            type === \"plain\" &&\n            isTextNode(domNode) &&\n            domNode.data &&\n            domNode.type === \"text\" &&\n            newlineRegex.test(domNode.data)\n          ) {\n            domNode.data = domNode.data.replace(\n              /(?:\\r\\n)|(?:\\r)|(?:\\n)/gi,\n              \"<br />\"\n            );\n\n            return (\n              <span\n                className={className}\n                dangerouslySetInnerHTML={{ __html: domNode.data }}\n              />\n            );\n          }\n\n          // Replace <a> tags with our own <Link> JSX.Element\n          if (\n            isElementNode(domNode) &&\n            domNode.children &&\n            domNode.name === \"a\"\n          ) {\n            // Return the domNode if there is no data inside the child\n            if (!(domNode.children[ 0 ] as Text).data) {\n              return domNode;\n            }\n\n            return (\n              <Link\n                type=\"inline\"\n                href={domNode.attribs ? domNode.attribs.href : \"#\"}\n              >\n                {(domNode.children[ 0 ] as Text).data}\n              </Link>\n            );\n          }\n\n          if (isElementNode(domNode) && domNode.name === \"blockquote\") {\n            return (\n              <blockquote>\n                <span className=\"speech-mark\">\n                  <Icon\n                    className=\"icon\"\n                    icon=\"speechMarks\"\n                    size={2}\n                  />\n                </span>\n\n                {domToReact(domNode.children)}\n              </blockquote>\n            );\n          }\n\n          return domNode;\n        }\n      })}\n    </>\n  );\n};\n\nexport default Wysiwyg;\n","export default __webpack_public_path__ + \"static/life-1-0c75b5917762a1498cc6737a9eb5b9cd.png\";","export default __webpack_public_path__ + \"static/life-2-c0b24fe37182e6f22c0fa76fe923e4cd.png\";","export default __webpack_public_path__ + \"static/life-3-e652f95b7d8ac6bfd79ddeaaae7d6a09.png\";","import React from \"react\";\n\nimport styled, { css } from \"src/theme/styled\";\nimport Link from \"src/components/link\";\nimport Text from \"src/components/text\";\nimport generator from \"src/components/gradients/generator\";\nimport Life1ImgSrc from \"src/assets/images/careers/life-1.png\";\nimport Life2ImgSrc from \"src/assets/images/careers/life-2.png\";\nimport Life3ImgSrc from \"src/assets/images/careers/life-3.png\";\nimport {\n  fontLineHeightHelper,\n  fontSizeHelper,\n  fontWeightHelper\n} from \"src/theme/theme-helper\";\n\nexport const JoinCard: React.FC = () => (\n  <JoinCardContainer>\n    <HalfWidthColumn>\n      <JoinTaglineText>\n        Why join our team\n      </JoinTaglineText>\n\n      <JoinTitleText>\n        Approachable, flexible, inspiring individuals.\n      </JoinTitleText>\n\n      <CareersLink href=\"/careers\">\n        <CareersLinkText>\n          Life at Gravitywell\n        </CareersLinkText>\n      </CareersLink>\n    </HalfWidthColumn>\n\n    <JoinImageColumn>\n      <Life1Img\n        src={Life1ImgSrc}\n        alt=\"Luke talking\"\n      />\n\n      <Life2Img\n        src={Life2ImgSrc}\n        alt=\"Hugo working\"\n      />\n    </JoinImageColumn>\n\n    <JoinImageColumn>\n      <Life3Img\n        src={Life3ImgSrc}\n        alt=\"Mobile testing\"\n      />\n    </JoinImageColumn>\n  </JoinCardContainer>\n);\n\nconst JoinCardContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  align-items: center;\n  background: ${generator({\n    gradient: \"lightPinkPurple\",\n    angle: -38\n  })};\n  box-shadow:\n    0 3.4px 2.7px rgba(0, 0, 0, 0.006),\n    0 8.7px 6.9px rgba(0, 0, 0, 0.009),\n    0 17.7px 14.2px rgba(0, 0, 0, 0.011),\n    0 36.5px 29.2px rgba(0, 0, 0, 0.014),\n    0 100px 80px rgba(0, 0, 0, 0.02)\n  ;\n  padding: 4rem 2rem;\n  margin: 3rem 0;\n\n  @media (min-width: 768px) {\n    padding: 5rem 6rem;\n    margin: 4rem 0;\n  }\n\n  @media (min-width: 960px) {\n    padding: 10rem 12rem;\n    margin: 6rem 0;\n  }\n`;\n\nconst JoinImageColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  width: 100%;\n  @media (min-width: 768px) {\n    width: auto;\n    margin-left: 0;\n    &:last-of-type {\n      margin-left: 1rem;\n      margin-right: auto;\n    }\n  }\n  @media (min-width: 1280px) {\n    margin-left: auto;\n    &:last-of-type {\n      margin-left: 2rem;\n      margin-right: 0;\n    }\n  }\n  \n`;\n\nconst HalfWidthColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 4rem;\n\n  @media (min-width: 1280px) {\n    flex-basis: 40%;\n    margin-bottom: 0;\n  }\n`;\n\nconst JoinTaglineText = styled(Text).attrs({\n  fontColor: \"secondary\",\n  letterSpacing: \"medium\",\n  fontWeight: \"bold\",\n  fontSize: \"small_3\"\n})`\n  text-transform: uppercase;\n\n@media (min-width: 768px) {\n  font-size: ${({ theme }) => fontSizeHelper({\n    theme,\n    variant: \"body_1\"\n  })};\n}\n`;\n\nconst JoinTitleText = styled(Text).attrs({\n  fontSize: \"display_1\",\n  fontWeight: \"heavy\",\n  fontColor: \"primary\"\n})`\n${({ theme }) => css`\n\n  margin-top: 2rem;\n  margin-bottom: 3rem;\n\n  font-size: ${fontSizeHelper({\n    theme,\n    variant: \"subhead_2\"\n  })};\n  font-weight: ${fontWeightHelper({\n    theme,\n    variant: \"heavy\"\n  })};\n  line-height: ${fontLineHeightHelper({\n    theme,\n    variant: \"default\"\n  })};\n\n@media (min-width: 768px) {\n  margin-top: 4rem;\n  margin-bottom: 6rem;\n\n  font-size: ${fontSizeHelper({\n    theme,\n    variant: \"display_2\"\n  })};\n  line-height: ${fontLineHeightHelper({\n    theme,\n    variant: \"small\"\n  })};\n}\n\n@media (min-width: 960px) {\n  font-size: ${fontSizeHelper({\n    theme,\n    variant: \"display_3\"\n  })};\n}\n\n@media (min-width: 1024px) {\n  font-size: ${fontSizeHelper({\n    theme,\n    variant: \"display_4\"\n  })};\n}\n`}`;\n\nconst CareersLink = styled(Link)`\n  align-self: flex-start;\n`;\n\nconst CareersLinkText = styled(Text).attrs({\n  fontWeight: \"heavy\",\n  fontSize: \"subhead_2\",\n  fontColor: \"secondary\"\n})``;\n\nconst Image = styled.img`\n  object-fit: cover;\n  border: 3px solid white;\n`;\n\nconst Life1Img = styled(Image)`\n  margin-bottom: 2rem;\n  width: 100%;\n  height: auto;\n  @media (min-width: 768px) {\n    margin-bottom: 1rem;\n    width: 28rem;\n    height: 15.75rem;\n  }\n  @media (min-width: 1280px) {\n    margin-bottom: 2rem;\n  }\n`;\n\nconst Life2Img = styled(Image)`\n  margin-bottom: 2rem;\n  width: 100%;\n  height: auto;\n  @media (min-width: 768px) {\n    margin-bottom: 0;\n    width: 19rem;\n    height: 14.25rem;\n  }\n`;\n\nconst Life3Img = styled(Image)`\n  margin-bottom: 2rem;\n  width: 100%;\n  height: auto;\n  @media (min-width: 768px) {\n    margin-bottom: 0;\n    width: 31rem;\n    height: 31rem;\n  }\n  @media (min-width: 1280px) {\n    width: 32rem;\n    height: 32rem;\n  }\n`;","import {\n  graphql,\n  PageProps\n} from \"gatsby\";\nimport React from \"react\";\n\nimport Text from \"src/components/text\";\nimport Layout from \"src/components/layout\";\nimport breadCrumbSchema, { IBreadCrumbSchema } from \"src/components/html-schema-snippets/breadcrumb-schema\";\nimport HelmetWrapper from \"src/components/helmet-wrapper\";\nimport Header from \"src/components/header\";\nimport Link from \"src/components/link\";\nimport Icon from \"src/components/icon\";\nimport PageTop from \"src/components/page-top\";\nimport {\n  FullWidthColumnWrapper,\n  SmallColumnWidthWrapper\n} from \"src/components/confines-wrappers\";\nimport styled, { css } from \"src/theme/styled\";\nimport {\n  fontLineHeightHelper,\n  fontSizeHelper,\n  fontWeightHelper\n} from \"src/theme/theme-helper\";\nimport Wysiwyg from \"src/components/wysiwyg\";\nimport { JoinCard } from \"src/components/careers/JoinCard\";\nimport {\n  IVacancy,\n  VacanciesList\n} from \"src/components/careers/VacanciesList\";\nimport Footer from \"src/components/footer\";\n\ninterface VacancyPageProps extends PageProps {\n  data: {\n    nodeCareersVacancy: IVacancy;\n    allNodeCareersVacancy: {\n      nodes: IVacancy[];\n    };\n  };\n}\n\nconst VacancyPage: React.FC<VacancyPageProps> = ({ data }) => {\n  const vacancy = React.useMemo(() => data.nodeCareersVacancy, [ data.nodeCareersVacancy ]);\n  const allVacancies = React.useMemo(() => data.allNodeCareersVacancy.nodes, [ data.allNodeCareersVacancy.nodes ]);\n\n  const breadcrumbsSchemaData = breadCrumbSchema([\n    {\n      name: vacancy.title,\n      path: vacancy.gatsbyPath\n    }\n  ]);\n\n  const schemaJson: IBreadCrumbSchema[] = [ breadcrumbsSchemaData ];\n\n  return (\n    <Layout>\n      <HelmetWrapper\n        title={vacancy.title}\n        updatedAt={vacancy.changed}\n        canonicalPath={vacancy.gatsbyPath}\n      >\n        <script type=\"application/ld+json\">\n          {JSON.stringify(schemaJson)}\n        </script>\n      </HelmetWrapper>\n\n      <header\n        role=\"banner\"\n        id=\"hero\"\n      >\n        <Header\n          initialLogo\n          initialTheme=\"light\"\n        />\n\n        <PageTop>\n          <HeaderWrapper>\n            <BackButton href=\"/careers\">\n              <Icon\n                icon=\"arrowLeft\"\n                color=\"grey\"\n              />\n\n              <BackButtonText>\n                Back\n              </BackButtonText>\n            </BackButton>\n\n            <SmallColumnWidthWrapper>\n              <RoleText>\n                Role\n              </RoleText>\n\n              <TitleText>\n                {vacancy.title}\n              </TitleText>\n            </SmallColumnWidthWrapper>\n          </HeaderWrapper>\n        </PageTop>\n      </header>\n\n      <main\n        id=\"main-content\"\n        role=\"main\"\n      >\n        {vacancy.field_job_advert_summary?.processed && (\n          <SmallColumnWidthWrapper>\n            <Wysiwyg\n              type=\"formatted\"\n              content={vacancy.field_job_advert_summary.processed}\n            />\n          </SmallColumnWidthWrapper>\n        )}\n\n        <FullWidthColumnWrapper>\n          <JoinCard />\n        </FullWidthColumnWrapper>\n\n        <SmallColumnWidthWrapper>\n          <Wysiwyg\n            type=\"formatted\"\n            content={vacancy.field_job_advert_copy.processed}\n          />\n        </SmallColumnWidthWrapper>\n\n        <FullWidthColumnWrapper>\n          <JoinCard />\n        </FullWidthColumnWrapper>\n\n        <VacanciesList vacancies={allVacancies} />\n      </main>\n\n      <footer role=\"contentinfo\">\n        <Footer />\n      </footer>\n\n    </Layout>\n  );\n};\n\nexport default VacancyPage;\n\nconst HeaderWrapper = styled(FullWidthColumnWrapper)`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n`;\n\nconst BackButton = styled(Link)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  i {\n    margin-right: 1.5rem;\n  }\n\n  margin-top: 3rem;\n  @media (min-width: 768px) {\n    margin-top: 0;\n  }\n`;\n\nconst BackButtonText = styled(Text).attrs({\n  fontWeight: \"bold\",\n  letterSpacing: \"medium\",\n  fontColor: \"grey\"\n})`\n  text-transform: uppercase;\n`;\n\nconst RoleText = styled(Text).attrs({\n  fontWeight: \"bold\",\n  letterSpacing: \"medium\",\n  fontColor: \"secondary\",\n  fontSize: \"subhead_2\"\n})`\n  margin-top: 3rem;\n  @media (min-width: 768px) {\n    margin-top: 6rem;\n  }\n  text-transform: uppercase;\n`;\n\nconst TitleText = styled.h1`\n${({ theme }) => css`\n  transition: 0.2s ease-in-out;\n  display: block;\n  padding-top: 0;\n  margin-top: 2rem;\n  margin-bottom: 3rem;\n  font-size: ${fontSizeHelper({\n    theme,\n    variant: \"subhead_2\"\n  })};\n  font-weight: ${fontWeightHelper({\n    theme,\n    variant: \"heavy\"\n  })};\n  line-height: ${fontLineHeightHelper({\n    theme,\n    variant: \"default\"\n  })};\n\n@media (min-width: 768px) {\n  max-width: 66rem;\n  font-size: ${fontSizeHelper({\n    theme,\n    variant: \"display_2\"\n  })};\n  line-height: ${fontLineHeightHelper({\n    theme,\n    variant: \"small\"\n  })};\n}\n\n@media (min-width: 960px) {\n  max-width: 76rem;\n  font-size: ${fontSizeHelper({\n    theme,\n    variant: \"display_3\"\n  })};\n}\n\n@media (min-width: 1024px) {\n  max-width: 84rem;\n  font-size: ${fontSizeHelper({\n    theme,\n    variant: \"display_4\"\n  })};\n}\n`}\n`;\n\nexport const query = graphql`\n  query vacancyQuery ($id: String) {\n    nodeCareersVacancy(id: { eq: $id }) {\n      id\n      created\n      changed\n      title\n      gatsbyPath(filePath: \"/careers/{NodeCareersVacancy.title}\")\n      field_job_advert_summary {\n        processed\n      }\n      field_job_advert_copy {\n        processed\n      }\n    }\n    allNodeCareersVacancy {\n      nodes {\n        id\n        created\n        title\n        gatsbyPath(filePath: \"/careers/{NodeCareersVacancy.title}\")\n      }\n    }\n  }\n`;"],"names":["VacanciesList","vacancies","innerRef","VacanciesWrapper","SectionTitle","map","id","title","gatsbyPath","VacancyWrapper","key","onClick","navigate","fontWeight","icon","fontSize","ContactText","href","styled","Text","attrs","theme","font","size","subhead_2","subhead_3","color","lightestGrey","brandColor","subhead_1","breadcrumbs","breadCrumbObj","i","breadcrumb","itemListElement","push","parseInt","name","forceTrailingSlash","path","PageTopContainer","props","aspectRatios","backgroundImage","borderTop","backgroundColor","gradient","generator","angle","maxHeight","ColorOverlayWrapper","overlayColor","ColorOverlay","height","className","style","children","isElementNode","domNode","nodeType","type","content","Parser","replace","isTextNode","data","test","dangerouslySetInnerHTML","__html","attribs","domToReact","JoinCard","JoinCardContainer","HalfWidthColumn","JoinTaglineText","JoinTitleText","CareersLink","CareersLinkText","JoinImageColumn","Life1Img","src","Life1ImgSrc","alt","Life2Img","Life2ImgSrc","Life3Img","Life3ImgSrc","fontColor","letterSpacing","fontSizeHelper","variant","css","fontWeightHelper","fontLineHeightHelper","Link","Image","vacancy","React","nodeCareersVacancy","allVacancies","allNodeCareersVacancy","nodes","schemaJson","breadCrumbSchema","updatedAt","changed","canonicalPath","JSON","stringify","role","initialLogo","initialTheme","HeaderWrapper","BackButton","BackButtonText","RoleText","TitleText","field_job_advert_summary","processed","field_job_advert_copy","FullWidthColumnWrapper"],"sourceRoot":""}