{"version":3,"sources":["../src/membership-hero.pcss"],"names":[],"mappings":"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","file":"membership-hero.css","sourcesContent":["/* Membership hero */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n:root {\n  /* Connector curved line (small) */\n  --membership-hero-background-small-width: 800px;\n  --membership-hero-background-small-height: 265px;\n  --membership-hero-background-small-origin-x: 50%;\n  --membership-hero-background-small-offset-x: calc(\n    (var(--membership-hero-background-small-width) / -2) - 100px\n  );\n  --membership-hero-background-small-offset-y: 60px;\n\n  /* Connector curved line (medium) */\n  --membership-hero-background-medium-width: 1440px;\n  --membership-hero-background-medium-height: 476px;\n  --membership-hero-background-medium-origin-x: 50%;\n  --membership-hero-background-medium-offset-x: calc(\n    (var(--membership-hero-background-medium-width) / -2) - 120px\n  );\n  --membership-hero-background-medium-offset-y: 62px;\n\n  /* Connector curved line (large) */\n  --membership-hero-background-large-width: 1732px;\n  --membership-hero-background-large-height: 573px;\n  --membership-hero-background-large-origin-x: 50%;\n  --membership-hero-background-large-offset-x: calc(\n    (var(--membership-hero-background-large-width) / -2) + 50px\n  );\n  --membership-hero-background-large-offset-y: -174px;\n\n  /* Connector curved line (xlarge) */\n  --membership-hero-background-xlarge-offset-x: calc(\n    (var(--membership-hero-background-medium-width) / -2) - 340px\n  );\n  --membership-hero-background-xlarge-offset-y: 46px;\n\n  /* Connector full-width repeater (left) */\n  --membership-hero-connector-left-offset-x: 0;\n  --membership-hero-connector-left-offset-y: calc(var(--spacing-32) - 12px);\n  --membership-hero-connector-left-origin-x: 0;\n\n  /* Connector full-width repeater (left, large) */\n  --membership-hero-connector-left-large-offset-x: 0;\n  --membership-hero-connector-left-large-offset-y: calc(var(--spacing-48) - 8px);\n  --membership-hero-connector-left-large-origin-x: 0;\n\n  /* Connector full-width repeater (left, xlarge) */\n  --membership-hero-connector-left-xlarge-offset-x: -100px;\n  --membership-hero-connector-left-xlarge-offset-y: calc(var(--spacing-64) - 8px);\n  --membership-hero-connector-left-xlarge-origin-x: 0;\n\n  /* Connector full-width repeater (right) */\n  --membership-hero-connector-right-offset-x: 0;\n  --membership-hero-connector-right-offset-y: 264px;\n  --membership-hero-connector-right-origin-x: 50%;\n\n  /* Connector full-width repeater (right, xlarge) */\n  --membership-hero-connector-right-xlarge-offset-x: 100px;\n  --membership-hero-connector-right-xlarge-offset-y: 329px;\n  --membership-hero-connector-right-xlarge-origin-x: 50%;\n\n  /* Hero image (small) */\n  --membership-hero-image-small-width: 400px;\n  --membership-hero-image-small-height: 300px;\n  --membership-hero-photo-small-width: 338px;\n  --membership-hero-photo-small-height: 190px;\n\n  /* Hero image (medium) */\n  --membership-hero-image-medium-width: 512px;\n  --membership-hero-image-medium-height: 384px;\n  --membership-hero-photo-medium-width: 440px;\n  --membership-hero-photo-medium-height: 247px;\n\n  /* Hero image (large) */\n  --membership-hero-image-large-width: 640px;\n  --membership-hero-image-large-height: 480px;\n  --membership-hero-photo-large-width: 555px;\n  --membership-hero-photo-large-height: 312px;\n}\n\n.coop-c-membership-hero {\n  position: relative;\n  overflow: hidden;\n  margin: 0 auto;\n\n  /* required to overwrite foundation CSS */\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n.coop-c-membership-hero__inner {\n  position: relative;\n  z-index: 1;\n\n  max-width: 81rem;\n  min-height: 410px;\n  margin: 0 auto;\n  padding: var(--spacing-24) var(--spacing-16) 0;\n\n  @media (--mq-medium) {\n    min-height: 440px;\n    padding: var(--spacing-32) var(--spacing-16) var(--spacing-48);\n  }\n\n  @media (--mq-large) {\n    min-height: 500px;\n    padding: var(--spacing-32) var(--spacing-24) var(--spacing-64);\n  }\n\n  @media (--mq-xlarge) {\n    padding: var(--spacing-48) var(--spacing-16) var(--spacing-64);\n  }\n}\n\n.coop-c-membership-hero__content {\n  position: relative;\n  z-index: 1;\n  max-width: 33rem; /* 528px */\n\n  @media (--mq-small) {\n    padding-bottom: var(--spacing-64);\n  }\n\n  @media (--mq-medium) {\n    padding-bottom: var(--spacing-32);\n  }\n}\n\n.coop-c-membership-hero__content--full-width {\n  max-width: none;\n}\n\n.coop-c-membership-hero__body {\n  @media (--mq-small) {\n    max-width: 80%;\n  }\n\n  @media (--mq-medium) {\n    max-width: 90%;\n  }\n}\n\n.coop-c-membership-hero__content--full-width {\n  & .coop-c-membership-hero__body {\n    @media (--mq-small) {\n      max-width: 90%;\n    }\n  }\n}\n\n.coop-c-membership-hero__title {\n  margin-bottom: var(--spacing-24);\n\n  @media (--mq-medium) {\n    margin-bottom: var(--spacing-16);\n  }\n}\n\nh2.coop-c-membership-hero__title {\n  margin-bottom: var(--spacing-24);\n}\n\n.coop-c-membership-hero__cta {\n  margin-top: var(--spacing-24);\n  font-size: var(--type-body-s);\n\n  & .coop-t-link {\n    color: var(--color-text);\n  }\n}\n\n.coop-c-membership-hero__btns {\n  margin-bottom: var(--spacing-24);\n  /* removes whitespace caused by inline-block */\n  font-size: 0;\n}\n\n.coop-c-membership-hero__btns .coop-btn--app {\n  margin: 0 var(--spacing-16) var(--spacing-16) 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n}\n\n.coop-c-membership-hero__caption {\n  margin-bottom: 0;\n}\n\n.coop-c-membership-hero__media {\n  position: relative;\n  z-index: 0;\n  margin: 0;\n}\n\n.coop-c-membership-hero__picture,\n.coop-c-membership-hero__image {\n  display: block;\n}\n\n/* Digital card promo picture */\n.coop-c-membership-hero__picture {\n  position: relative;\n  z-index: 1;\n}\n\n.coop-c-membership-hero__image {\n  display: block;\n  width: 100%;\n}\n\n/* Connector curved line */\n.coop-c-membership-hero__connector {\n  position: absolute;\n  z-index: 0;\n  top: 0;\n\n  /* Small connector */\n  left: var(--membership-hero-background-small-origin-x);\n  width: var(--membership-hero-background-small-width);\n  height: var(--membership-hero-background-small-height);\n  margin-left: var(--membership-hero-background-small-offset-x);\n  margin-top: var(--membership-hero-background-small-offset-y);\n\n  /* Large connector (at small viewport) */\n  @media (--mq-small) {\n    left: var(--membership-hero-background-large-origin-x);\n    width: var(--membership-hero-background-large-width);\n    height: var(--membership-hero-background-large-height);\n    margin-left: var(--membership-hero-background-large-offset-x);\n    margin-top: var(--membership-hero-background-large-offset-y);\n  }\n}\n\n/* Connector full-width repeater */\n.coop-c-membership-hero:before,\n.coop-c-membership-hero:after {\n  position: absolute;\n  z-index: 0;\n  width: 50%;\n  height: 0;\n  border-top: 8px solid;\n  border-color: inherit;\n  content: \"\";\n}\n\n/* Connector full-width repeater (left) */\n.coop-c-membership-hero:before {\n  bottom: var(--membership-hero-connector-left-offset-y);\n  left: var(--membership-hero-connector-left-origin-x);\n  margin-left: var(--membership-hero-connector-left-offset-x);\n  display: none;\n\n  @media (--mq-small) {\n    display: block;\n  }\n\n  @media (--mq-large) {\n    left: var(--membership-hero-connector-left-large-origin-x);\n\n    /* Offset connector from origin */\n    bottom: var(--membership-hero-connector-left-large-offset-y);\n    margin-left: var(--membership-hero-connector-left-large-offset-x);\n  }\n\n  @media (--mq-xlarge) {\n    left: var(--membership-hero-connector-left-xlarge-origin-x);\n\n    /* Offset connector from origin */\n    bottom: var(--membership-hero-connector-left-xlarge-offset-y);\n    margin-left: var(--membership-hero-connector-left-xlarge-offset-x);\n  }\n}\n\n/* Connector full-width repeater (right) */\n.coop-c-membership-hero:after {\n  bottom: var(--membership-hero-connector-right-offset-y);\n  left: var(--membership-hero-connector-right-origin-x);\n  display: block;\n\n  @media (--mq-small) {\n    display: none;\n  }\n\n  @media (--mq-xlarge) {\n    left: var(--membership-hero-connector-right-xlarge-origin-x);\n    display: block;\n\n    /* Offset connector from origin */\n    bottom: var(--membership-hero-connector-right-xlarge-offset-y);\n    margin-left: var(--membership-hero-connector-right-xlarge-offset-x);\n  }\n}\n\n.coop-c-membership-hero__path {\n  fill: none;\n  stroke: inherit;\n}\n\n/* Adjust for hero with handset image (4:3) */\n.coop-c-membership-hero--handset {\n  & .coop-c-membership-hero__content {\n    max-width: 21.875rem; /* 350px */\n\n    @media (--mq-medium) {\n      max-width: 33rem; /* 528px */\n    }\n  }\n\n  & .coop-c-membership-hero__content--full-width {\n    max-width: none;\n\n    @media (--mq-small) {\n      max-width: 60%;\n    }\n\n    @media (--mq-medium) {\n      max-width: 33rem; /* 528px */\n    }\n  }\n\n  & .coop-c-membership-hero__media {\n    height: var(--membership-hero-image-medium-height);\n\n    @media (--mq-small) {\n      position: absolute;\n      z-index: 0;\n      right: 0;\n      right: -5%;\n      bottom: 0;\n      height: auto;\n      margin-top: 0;\n    }\n\n    @media (--mq-medium) {\n      right: 0;\n    }\n  }\n\n  & .coop-c-membership-hero__picture {\n    position: absolute;\n    top: 0;\n    left: 50%;\n\n    width: var(--membership-hero-image-medium-width);\n    height: var(--membership-hero-image-medium-height);\n    margin-left: calc(var(--membership-hero-image-medium-width) / -2);\n\n    @media (--mq-small) {\n      position: relative;\n      top: auto;\n      left: auto;\n      width: var(--membership-hero-image-small-width);\n      height: var(--membership-hero-image-small-height);\n      margin-left: 0;\n    }\n\n    @media (--mq-large) {\n      width: var(--membership-hero-image-large-width);\n      height: var(--membership-hero-image-large-height);\n    }\n  }\n\n  & .coop-c-membership-hero__connector {\n    /* Medium connector (at large viewport) */\n    @media (--mq-large) {\n      left: var(--membership-hero-background-medium-origin-x);\n      width: var(--membership-hero-background-medium-width);\n      height: var(--membership-hero-background-medium-height);\n      margin-left: var(--membership-hero-background-medium-offset-x);\n      margin-top: var(--membership-hero-background-medium-offset-y);\n    }\n\n    /* Medium connector (at xlarge viewport) */\n    @media (--mq-xlarge) {\n      margin-left: var(--membership-hero-background-xlarge-offset-x);\n      margin-top: var(--membership-hero-background-xlarge-offset-y);\n    }\n  }\n}\n\n/* Adjust for hero with photo (16:9) */\n.coop-c-membership-hero--photo {\n  & .coop-c-membership-hero__inner {\n    @media (--mq-xlarge) {\n      min-height: 580px;\n      padding-bottom: var(--spacing-32);\n    }\n  }\n\n  & .coop-c-membership-hero__content {\n    @media (--mq-medium) {\n      max-width: 50%;\n    }\n  }\n\n  & .coop-c-membership-hero__media {\n    margin: var(--spacing-32) calc(var(--spacing-16) * -1) 0;\n\n    @media (--mq-medium) {\n      position: absolute;\n      right: var(--spacing-32);\n      bottom: 110px;\n\n      width: var(--membership-hero-photo-small-width);\n      margin: 0;\n    }\n\n    @media (--mq-large) {\n      right: var(--spacing-32);\n      bottom: 205px;\n      width: var(--membership-hero-photo-medium-width);\n    }\n\n    @media (--mq-xlarge) {\n      right: var(--spacing-16);\n      bottom: 205px;\n      width: var(--membership-hero-photo-large-width);\n    }\n  }\n\n  & .coop-c-membership-hero__picture {\n    @media (--mq-medium) {\n      height: var(--membership-hero-photo-small-height);\n    }\n\n    @media (--mq-large) {\n      height: var(--membership-hero-photo-medium-height);\n    }\n\n    @media (--mq-xlarge) {\n      height: var(--membership-hero-photo-large-height);\n    }\n  }\n\n  & .coop-c-membership-hero__connector {\n    @media (--mq-large) {\n      top: 132px;\n    }\n\n    @media (--mq-xlarge) {\n      top: 181px;\n    }\n  }\n\n  &:before,\n  &:after {\n    display: none;\n  }\n\n  &:before {\n    @media (--mq-medium) {\n      display: block;\n    }\n\n    @media (--mq-xlarge) {\n      bottom: 56px;\n    }\n  }\n}\n\n/* Adjust for hero with photo (16:9) on home page */\n.coop-c-membership-hero--photo.coop-c-membership-hero--home {\n  & .coop-c-membership-hero__title {\n    @media (--mq-medium) {\n      margin-bottom: var(--spacing-32);\n      font-size: 2.625rem; /* 42px */\n    }\n\n    @media (--mq-large) {\n      font-size: 2.875rem; /* 46px */\n    }\n\n    @media (--mq-xlarge) {\n      font-size: 4.25rem; /* 68px */\n    }\n  }\n\n  & .coop-c-membership-hero__body {\n    @media (--mq-large) {\n      font-size: 1.375rem; /* 22px */\n    }\n\n    @media (--mq-xlarge) {\n      font-size: 1.625rem; /* 26px */\n    }\n  }\n\n  & .coop-c-membership-hero__cta {\n    @media (--mq-xlarge) {\n      margin-top: var(--spacing-48);\n    }\n  }\n\n  & .coop-c-membership-hero__connector {\n    @media (--mq-large) {\n      top: 132px;\n    }\n\n    @media (--mq-xlarge) {\n      top: 101px;\n    }\n  }\n\n  &:before {\n    @media (--mq-xlarge) {\n      bottom: 136px;\n    }\n  }\n}\n\n.coop-c-membership-hero__list {\n  list-style: none;\n  padding-left: calc(var(--spacing-32) + var(--spacing-4));\n  margin: var(--spacing-24) 0;\n}\n\n.coop-c-membership-hero__item {\n  position: relative;\n  margin-bottom: var(--spacing-16);\n}\n\n.coop-c-membership-hero__tick {\n  position: absolute;\n  left: calc((var(--spacing-32) + var(--spacing-4)) * -1);\n  top: 0.1875rem; /* 3px */\n}\n"]}