{"version":3,"file":"9.CP8rWsrh.js","sources":["../../../../../../src/routes/case-studies/+page.ts","../../../../../../src/components/CaseStudiesLanding/CaseStudiesFeature.svelte","../../../../../../src/components/CaseStudiesLanding/CaseStudiesLandingHero.svelte","../../../../../../src/routes/case-studies/+page.svelte"],"sourcesContent":["import { extractMetadata, patchMetaProps } from '$lib/utils/metaProps'\nimport type { PageLoad } from './$types'\n\nexport const load: PageLoad = async ({ fetch, parent, url }) => {\n  const { caseStudiesData } = await parent()\n\n  const caseStudiesLandingTemplateData = await fetch(\n    '/data/caseStudiesLandingTemplate.json',\n  )\n    .then((r) => r.json())\n    .then((items) => items[0].fields)\n\n  return {\n    metaProps: patchMetaProps(\n      extractMetadata(\n        caseStudiesLandingTemplateData.metadata.fields,\n        url.pathname,\n      ),\n    ),\n    caseStudiesData: caseStudiesData ?? null,\n    caseStudiesLandingTemplateData,\n  }\n}\n","<script lang=\"ts\">\nimport Network from '$components/Typography/Network.svelte'\nimport Tag from '$components/Typography/Tag.svelte'\nimport type { CASE_STUDY_TYPE } from '$types/index'\n\nexport let caseStudiesFeatureData: CASE_STUDY_TYPE[]\nlet count = 8\nconst INCREMENT = 4\n\nfunction handleMoreClick() {\n  count += INCREMENT\n}\n</script>\n\n<section class=\"case-studies-feature\">\n  <div class=\"case-studies-container\">\n    {#each caseStudiesFeatureData\n      .reverse()\n      .slice(0, count) as item (item.fields.id)}\n      <div class=\"case-study-card\">\n        <a\n          href=\"/case-studies/{item.fields.id}\"\n          style=\"background-image: url('{item.fields.imageSrcHalf.fields.file\n            .url}')\">\n          <div class=\"content-container\">\n            <div class=\"top-container\">\n              <Tag tag={item.fields.tag} />\n            </div>\n            <div class=\"bottom-container\">\n              <h4 class=\"headline\">{item.fields.headline}</h4>\n              <Network network={item.fields.network} />\n            </div>\n          </div>\n        </a>\n      </div>\n    {/each}\n  </div>\n  {#if count < caseStudiesFeatureData.length}\n    <div class=\"gradient-box\">\n      <button class=\"gradient global-button\" on:click={handleMoreClick}>\n        Show More\n      </button>\n    </div>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n.case-studies-feature {\n  height: auto;\n  padding: 40px 25px;\n  border-bottom: 1px solid rgba(90, 88, 107, 0.6);\n\n  .case-studies-container {\n    display: grid;\n    grid-template-columns: repeat(1, 1fr);\n    grid-gap: 20px;\n\n    @media only screen and (min-width: 768px) {\n      height: auto;\n      grid-template-columns: repeat(2, 1fr);\n      grid-gap: 20px;\n    }\n  }\n\n  .case-study-card {\n    height: 375px;\n    width: 100%;\n    a {\n      width: 100%;\n      height: 100%;\n      display: block;\n      background-size: cover;\n      background-repeat: no-repeat;\n      border-radius: 16px;\n      position: relative;\n\n      &:hover {\n        color: var(--white);\n        .headline {\n          color: var(--hoverOrange);\n          transition: all 0.2s ease;\n        }\n      }\n\n      &:before {\n        position: absolute;\n        content: '';\n        height: 100%;\n        width: 100%;\n        top: 0;\n        left: 0;\n        background: linear-gradient(\n          to bottom,\n          rgba(0, 0, 0, 0) 70%,\n          rgba(0, 0, 0, 0.65) 100%\n        );\n      }\n    }\n\n    @media only screen and (min-width: 1400px) {\n      height: 780px;\n    }\n  }\n\n  .content-container {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n\n    .top-container {\n      display: flex;\n      margin: 15px 0 0 15px;\n\n      @media only screen and (min-width: 1400px) {\n        margin: 35px 0 0 35px;\n      }\n    }\n\n    .bottom-container {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      margin: 0 15px;\n\n      :global(.network) {\n        margin: 18px 0;\n      }\n\n      .headline {\n        font-size: 23px;\n        font-weight: 400;\n        line-height: 26px;\n        letter-spacing: 0.32px;\n        margin: 0;\n\n        @media only screen and (min-width: 1400px) {\n          font-size: 52px;\n          line-height: 61px;\n        }\n      }\n\n      @media only screen and (min-width: 1400px) {\n        margin: 0 35px 10px 35px;\n      }\n    }\n  }\n  button {\n    border: 2px solid #5a586b;\n    border-radius: 30px;\n    background: none;\n    min-width: 115px;\n    padding: 7px 25px 9px;\n    margin: 0;\n  }\n\n  .gradient {\n    background: var(--black);\n    background-clip: padding-box;\n    border-color: transparent;\n  }\n\n  .gradient-box {\n    width: fit-content;\n    border-radius: 30px;\n    background: linear-gradient(\n      90deg,\n      #ff560e -15.86%,\n      #ff001f 37.83%,\n      #8802c8 121.66%,\n      #6202fe 152.75%\n    );\n    margin: 0 auto;\n    margin-top: 50px;\n\n    @media only screen and (min-width: 1024px) {\n      margin-top: 100px;\n    }\n  }\n\n  @media only screen and (min-width: 1024px) {\n    padding: 40px 100px;\n  }\n}\n</style>\n","<script lang=\"ts\">\nimport HeroTitle from '$components/Typography/HeroTitle.svelte'\nimport Network from '$components/Typography/Network.svelte'\nimport Paragraph from '$components/Typography/Paragraph.svelte'\nimport Tag from '$components/Typography/Tag.svelte'\nimport type { CASE_STUDIES_LANDING_HERO_TYPE } from '$types/index'\n\nexport let caseStudiesLandingHeroData: CASE_STUDIES_LANDING_HERO_TYPE\nconst { sectionTitle, featuredCaseStudy } = caseStudiesLandingHeroData.fields\n</script>\n\n<section class=\"csl-hero\">\n  <HeroTitle text={sectionTitle} />\n  <a href=\"/case-studies/{featuredCaseStudy.fields.id}\">\n    <img\n      src={featuredCaseStudy.fields.imageSrcFull.fields.file.url}\n      alt={featuredCaseStudy.fields.headline} />\n    <div class=\"content-wrapper\">\n      <Tag tag={featuredCaseStudy.fields.tag} />\n      <h3 class=\"headline\">{featuredCaseStudy.fields.headline}</h3>\n      <Network network={featuredCaseStudy.fields.network} />\n      <Paragraph text={featuredCaseStudy.fields.subheadline} />\n      <img src=\"/icons/link-arrow.svg\" alt=\"arrow-icon\" />\n    </div>\n  </a>\n</section>\n\n<style lang=\"scss\">\n.csl-hero {\n  height: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 40px 25px;\n\n  :global(h5) {\n    margin-bottom: 35px;\n  }\n\n  h3 {\n    width: 100%;\n    filter: drop-shadow(0px 0px 8px black);\n    -webkit-filter: drop-shadow(0px 0px 8px black);\n  }\n\n  a {\n    width: 100%;\n    height: 100%;\n\n    &:hover {\n      color: inherit;\n\n      .content-wrapper img {\n        transition: all 0.5s ease-in;\n        filter: drop-shadow(0px 0px 16px white);\n        -webkit-filter: drop-shadow(0px 0px 16px white);\n      }\n\n      .headline {\n        color: var(--hoverOrange);\n        transition: all 0.2s ease;\n      }\n    }\n  }\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 16px;\n  }\n\n  .content-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    :global(.tag) {\n      margin: 25px 0;\n    }\n\n    :global(.network) {\n      margin: 18px 0;\n    }\n\n    .headline {\n      font-size: 40px;\n      font-weight: 400;\n      line-height: 43px;\n      margin: 0;\n    }\n\n    img {\n      width: 35px;\n      height: 35px;\n      padding: 20px 0;\n    }\n  }\n\n  @media only screen and (min-width: 1024px) {\n    padding: 40px 100px;\n  }\n}\n</style>\n","<script lang=\"ts\">\nimport CaseStudiesFeature from '$components/CaseStudiesLanding/CaseStudiesFeature.svelte'\nimport CaseStudiesLandingHero from '$components/CaseStudiesLanding/CaseStudiesLandingHero.svelte'\nimport ContactUs from '$components/Global/ContactUs.svelte'\nimport type { PageData } from './$types'\n\nexport let data: PageData\nconst { caseStudiesLandingTemplateData, caseStudiesData } = data\nconst { caseStudiesLandingHero, contactUs } = caseStudiesLandingTemplateData\n</script>\n\n<CaseStudiesLandingHero caseStudiesLandingHeroData={caseStudiesLandingHero} />\n\n<CaseStudiesFeature caseStudiesFeatureData={caseStudiesData} />\n\n<ContactUs data={contactUs} />\n\n<slot />\n"],"names":["load","fetch","parent","url","caseStudiesData","caseStudiesLandingTemplateData","r","items","patchMetaProps","extractMetadata","caseStudiesFeatureData","$.prop","$$props","count","INCREMENT","handleMoreClick","$.get","$.each","div","item","$$render","consequent","caseStudiesLandingHeroData","sectionTitle","featuredCaseStudy","data","caseStudiesLandingHero","contactUs"],"mappings":"qqCAGO,MAAMA,EAAiB,MAAO,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,KAAU,CAC9D,KAAM,CAAE,gBAAAC,GAAoB,MAAMF,EAAO,EAEnCG,EAAiC,MAAMJ,EAC3C,uCAEC,EAAA,KAAMK,GAAMA,EAAE,KAAM,CAAA,EACpB,KAAMC,GAAUA,EAAM,CAAC,EAAE,MAAM,EAE3B,MAAA,CACL,UAAWC,EACTC,EACEJ,EAA+B,SAAS,OACxCF,EAAI,QAAA,CAER,EACA,gBAAiBC,GAAmB,KACpC,+BAAAC,CACF,CACF,iqBCjBWK,EAAyCC,EAAAC,EAAA,yBAAA,CAAA,EAChDC,IAAQ,CAAC,EACP,MAAAC,EAAY,WAETC,GAAe,GACtBF,EAAKG,EAALH,CAAK,EAAIC,CAAS,CACpB,sBAKWG,EAAAC,EAAA,EAAA,IAAAR,EAAA,EACJ,QACA,EAAA,MAAM,IAAGG,CAAK,CAAA,EAAKM,GAAMA,EAAK,OAAO,MAAlBA,IAAI,+DAQNA,CAAI,EAAC,OAAO,wFAIJA,CAAI,EAAC,OAAO,oEATbA,CAAI,EAAC,OAAO,IAAE,EAAA,EAAA,0CACJA,CAAI,EAAC,OAAO,aAAa,OAAO,KAC5D,KAAG,EAAA,IAAA,QAMoBA,CAAI,EAAC,OAAO,QAAQ,4EAUDJ,CAAe,oBAF/DF,CAAK,EAAGH,EAAsB,EAAC,QAAMU,EAAAC,CAAA,kWC9BjCC,EAA0DX,EAAAC,EAAA,6BAAA,CAAA,EAC7D,KAAA,CAAA,aAAAW,EAAc,kBAAAC,GAAsBF,IAA2B,uCAIpDC,CAAY,CAAA,4DAMfC,EAAkB,OAAO,0EAEjBA,EAAkB,OAAO,+CAC1BA,EAAkB,OAAO,sEARtBA,EAAkB,OAAO,IAAE,EAAA,EAAA,YAE1CA,EAAkB,OAAO,aAAa,OAAO,KAAK,GAAG,YACrDA,EAAkB,OAAO,QAAQ,MAGhBA,EAAkB,OAAO,QAAQ,kECblDC,EAAcd,EAAAC,EAAA,OAAA,CAAA,QACjB,+BAAAP,EAAgC,gBAAAD,GAAoBqB,EAAI,GACxD,uBAAAC,EAAwB,UAAAC,CAAS,EAAKtB,qDAGMqB,6CAERtB,CAAe,CAAA,yBAE1CuB,CAAS,CAAA"}