pricing.scss

@use 'sass:math';

// ///////////////////////////////////////////////////// General [Page Sections]
// -----------------------------------------------------------------------------
.page-pricing {
  position: relative;
  .heading {
    @include fontSize_Large;
    line-height: leading(50, 35);
    margin-bottom: 2.25rem;
    @include mini {
      @include fontSize_Large;
      line-height: leading(45, 35);
    }
  }
}

.sectional {
  padding: 6rem 0;
}

#tiered_pricing_section_1,
#tiered_pricing_section_3 {
  position: relative;
  @include selection_Light;
}

#tiered_pricing_section_1 {
  z-index: 1;
  padding-bottom: 5rem;

  .gradient-background-component.light {
    width: calc(100% + 2rem);
    height: calc(100% + 17rem + 12rem);
    top: -19.5rem;
    left: -1rem;
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 12rem;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: 119%;
    background-position: left 0 bottom 0;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1636.34' height='122.322' viewBox='0 0 1636.34 122.322'%3e%3cdefs%3e%3cclipPath id='clip-path'%3e%3crect width='1636.34' height='122.322' fill='none'/%3e%3c/clipPath%3e%3c/defs%3e%3cg id='Scroll_Group_1' data-name='Scroll Group 1' clip-path='url(%23clip-path)' style='isolation: isolate'%3e%3cg id='Group_1914' data-name='Group 1914'%3e%3cpath id='Path_18835' data-name='Path 18835' d='M-16101,11198.438v1055.932s338.735-28.635,512.177,140.625,36.063,416.637,329.8,625.462,792.163,107.167,792.163,107.167l2.2-1929.186s-388.361-117.4-797.447-117.4S-16101,11198.438-16101,11198.438Z' transform='translate(16101 -11081.04)' fill='%2303040a'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  }
}

#intro_1-hero-corkscrew {
  position: absolute;
  right: -1rem;
  top: 1rem;
  transform: rotate(-60deg);
  display: block;
  width: 441px;
  height: 441px;
  z-index: -1;
}

#intro_1-coil {
  @include small {
    display: none;
  }
  position: absolute;
  right: 21rem;
  top: 2rem;
  left: auto;
  z-index: -1;
  transform: rotate(322deg);
}

#intro_1-cross {
  display: block;
  position: relative;
  right: 8rem;
  top: -2rem;
  left: auto;
  bottom: auto;
  width: 47px;
  height: 47px;
}

#section_trusted_by_logos .column-content {
  position: relative;
}

#intro_1-triangle_left {
  display: block;
  position: absolute;
  right: auto;
  top: 5rem;
  left: -8rem;
  bottom: auto;
  width: 50px;
  height: 50px;
  transform: rotate(320deg);
}

#intro_1-triangle_right {
  display: block;
  position: absolute;
  right: -22rem;
  top: -5rem;
  left: auto;
  bottom: auto;
  width: 40px;
  height: 40px;
  transform: rotate(295deg);
}

#intro_1-cross_right {
  display: block;
  position: absolute;
  right: -28rem;
  top: 1rem;
  left: auto;
  bottom: auto;
  width: 77px;
  height: 77px;
  transform: scaleX(-1);
}

#section_plan_cards .column-content {
  display: flex;
  gap: 24px;
}

@media only screen and (max-width: 1000px) {
  #section_plan_cards .column-content {
    flex-flow: column nowrap;
  }

  #section_plan_cards .pricing-card-body {
    margin: 0 0 1rem 0;
    width: unset;

    &.adorned {
      margin: 41px 0 1rem 0;
    }
  }
}

.pricing-card {
  position: relative;
  box-sizing: border-box;

  .pricing-card-body {
    display: flex;
    flex-flow: column nowrap;
    width: 304px;
    height: 571px;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.0562744);
    border-radius: 10px;
    padding: 1rem;
    margin: 41px 0 0 0;

    &.adorned {
      border-radius: 0 0 10px 10px;
    }
  }

  .best-value-adornment {
    border-radius: 0 0 10px 10px;
    height: 41px;
    width: 100%;
    background-color: red;
    position: absolute;
    background: linear-gradient(269.1deg, #0ab2aa 0%, #4622fc 53.4%, #ff00c4 108.59%);
    opacity: 1;
    border-radius: 10px 10px 0px 0px;

    font-family: $font_Primary;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    padding: 0.75rem 1rem;
    vertical-align: middle;

    letter-spacing: 0.48px;
    color: #ffffff;
  }
}

.pricing-title-row {
  display: flex;
  margin: 1rem 0.5rem;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: baseline;
}
.pricing-title {
  font-family: $font_Primary;
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  line-height: 138%;
  color: #03040a;
}
.pricing-price {
  display: inline-block;

  font-family: $font_Primary;
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 70%;
  letter-spacing: 0.48px;
  color: #03040a;

  .pricing-price-term {
    display: inline-block;
    color: #404040;
    font-weight: 300;
  }
}

.plan-details {
  flex: 1 1 auto;
  padding: 0 0 0 calc(20px + 15px);

  li {
    list-style: none;
    line-height: 28px;
    position: relative;
    margin: 0 0 20px 0;
  }
  li::before {
    content: url('/images/pricing/circle-check.svg');
    display: inline-block;
    line-height: 28px;
    position: absolute;
    left: calc(-20px - 15px);
    top: 4px;
  }
}

.plan-summary {
  justify-self: end;
  padding: 0 1.8rem 1.8rem 1.8rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  .plan-storage-allocation {
    font-family: $font_Primary;
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 95%;
    letter-spacing: 0.48px;
    color: #03040a;
    padding-bottom: 0.5rem;
  }
  .plan-overage-rate {
    font-family: $font_Primary;
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.48px;
    color: #03040a;
    height: 2rem;
    padding-bottom: 0.5rem;
  }
  .plan-call-to-action {
    padding: 10px 20px;
    background: #03040a;
    border-radius: 20px;

    font-family: $font_Primary;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: 0.39px;
    color: #fbfbfc;

    height: unset !important;
  }
}

li.pricing-bullet-1 {
  height: 3.25rem;
}
li.pricing-bullet-2 {
  height: 4.75rem;
}
li.pricing-bullet-3 {
  height: 3rem;
}

.pricing-enterprise-users {
  display: flex;
  flex-flow: row nowrap;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.0562744);
  border-radius: 10px;
  padding: 2.5rem;
  margin: 1rem 0 3rem 0;

  .enterprise-blob {
    position: relative;
    flex: 0 0 auto;
    width: 260px;
    height: 260px;
    pointer-events: none;

    & > span {
      top: -8rem;
      left: -9rem;
    }

    $blobSize: 460px;

    & > span,
    & > span > img {
      position: absolute;
      max-width: $blobSize !important;
      max-height: $blobSize !important;
      min-width: $blobSize !important;
      min-height: $blobSize !important;
      width: $blobSize !important;
      height: $blobSize !important;
    }
  }

  @media only screen and (max-width: 1000px) {
    .enterprise-blob {
      display: none;
    }
  }

  .enterprise-content {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
  }

  .enterprise-title {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 131%;
    letter-spacing: 0.48px;
    color: #03040a;
  }

  .enterprise-heading {
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 138%;
    color: #03040a;
  }

  .enterprise-description {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 175%;
    color: #000000;
  }

  .enterprise-above-call-to-action {
    flex: 1 1 auto;
    min-height: 1rem;
  }

  .enterprise-call-to-action.button.Button {
    &::after {
      border-color: #03040a;
    }
    &:hover {
      &::after {
        border-color: $white;
      }
    }
    .button-contents {
      color: #03040a;
      padding: 10px 20px;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 0.39px;
    }
  }
}

#section_FAQ_ctas.sectional {
  padding: 2rem 0 14rem 0;
}

#tiered_pricing_section_2 {
  position: relative;
  z-index: 2;
  @include background_Dark;
}

#tiered_pricing_section_3 {
  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 20rem;
    transform: translateY(-100%);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left 0 bottom 0;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1365' height='172.072' viewBox='0 0 1365 172.072'%3e%3cpath id='Subtraction_1' data-name='Subtraction 1' d='M1365.5,1490.379H.5V1318.307c2.18,1.03,14.117,6.583,35.282,14.638,11.943,4.545,24.781,9.111,38.157,13.571,16.412,5.472,33.757,10.822,51.551,15.9,44.637,12.743,92.561,23.944,142.44,33.292,29.392,5.508,59.829,10.432,90.465,14.635,33.579,4.607,68.238,8.462,103.013,11.458,23.225,2,46.631,3.5,69.567,4.453,21.313.886,43.042,1.336,64.586,1.336,34.14,0,69.483-1.111,108.051-3.4,35.709-2.115,71.444-5.084,100.157-7.47l4.085-.339.018,0c31.282-2.6,63.629-5.288,95.834-7.255,17.318-1.057,33.294-1.833,48.84-2.372,17.419-.6,33.881-.9,50.327-.9,32.485,0,63.635,1.157,95.23,3.537,16.949,1.277,34.216,2.934,51.319,4.926,17.863,2.08,36.168,4.6,54.408,7.478,29.029,4.588,57.861,10.31,85.7,17.008,25.788,6.206,51.349,13.4,75.973,21.383v30.184h0Z' transform='translate(-0.5 -1318.307)' fill='%23f1f1f1'/%3e%3c/svg%3e");
    z-index: 2;
  }
  #section_explore-docs.sectional {
    padding: 0 0 6rem 0;
  }
}

// /////////////////////////////////////////////////////////////// [Subsections]
// -----------------------------------------------------------------------------

// -------------------------------------------------------------- Section [Hero]
#pricing_hero_header {
  padding-top: 7rem;
  padding-bottom: 9rem;

  .text-block {
    color: white;
    .heading {
      margin-bottom: 1rem;
    }
    .subheading {
      @include fontSize_Medium;
      @include fontWeight_Regular;
      line-height: leading(34, 20);
    }

    @include small {
      padding-top: 10rem;
    }
  }

  &:after {
    content: '';
    display: none;
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 20rem;
    transform: translateY(100%);
    z-index: -1;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: right 0 top 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1845.701' height='242.942' viewBox='0 0 1845.701 242.942'%3e%3cdefs%3e%3cclipPath id='clip-path'%3e%3crect y='659' width='1845.701' height='242.942' fill='none'/%3e%3c/clipPath%3e%3c/defs%3e%3cg id='Scroll_Group_1' data-name='Scroll Group 1' transform='translate(0 -659)' clip-path='url(%23clip-path)' style='isolation: isolate'%3e%3cpath id='Path_19292' data-name='Path 19292' d='M-21173,9737.463s429.527-45.37,890.953,1,781.068,131.782,954.748,184.479V9050H-21173Z' transform='translate(21173 -9050)' fill='%2303040a'/%3e%3c/g%3e%3c/svg%3e");
  }
  @include ultraLarge {
    &:after {
      display: block;
    }
  }
  @include small {
    padding-bottom: 5rem;
  }
  @include mini {
    &:after {
      background-size: 150%;
    }
  }
}

#pricing_hero-coil {
  position: absolute;
  width: 7.25rem;
  left: calc(50% - #{math.div($containerWidth, 2)} + 12rem);
  top: calc(-3.25rem - $navigationHeight);
  transform: rotate(17deg);
  @include small {
    display: none;
  }
}

#pricing_hero-corkscrew {
  position: absolute;
  width: 39rem;
  left: calc(50% - #{math.div($containerWidth, 2)} - 17rem);
  top: -5rem;
  @include xlarge {
    left: -3rem;
  }
  @include large {
    width: 32rem;
    left: 0rem;
    top: 0;
  }
  @include medium {
    left: calc(50% - #{math.div($containerWidth, 2)} - 3rem);
  }
  @include small {
    width: 24rem;
    top: -4rem;
    left: calc(50% - #{math.div($containerWidth, 2)} + 14rem);
  }
  @include tiny {
    left: -4.125rem;
  }
}

#pricing_hero-cross {
  position: absolute;
  z-index: 1;
  width: 3rem;
  bottom: -3rem;
  left: calc(50% - #{math.div($containerWidth, 2)});
  @include small {
    left: 3rem;
  }
}

// ------------------------------------------------------------- Section [Tiers]
#section_pricing_header {
  padding: 4.25rem 0 0 0;
  .text-block {
    .heading {
      @include fontSize_Large;
      padding-right: 5rem;
      line-height: leading(50, 35);
      margin-bottom: 2rem;
    }
  }
}

#section_pricing_header .text-block.format__header h1 {
  font-weight: 600;
  font-size: 55px;
  line-height: 68px;
}

#section_pricing_header .text-block.format__header .description {
  padding-right: 9rem;
}

#section_trusted_by_header {
  padding: 0;
}

#section_trusted_by_logos {
  position: relative;
  z-index: 1;
  padding: 1rem 0;
}

#section_trusted_by_logos .wrapping-logos {
  display: flex;
  flex-flow: row wrap;
  gap: 0 5rem;
}

#section_trusted_by_logos .wrapping-logos.carousel {
  display: flex;
  flex-flow: row wrap;
  max-width: 100%;
}

#section_trusted_by_logos .wrapping-logos-inner {
  overflow: hidden;
  position: relative;
  --no-of-slides: 17;
  --slides-in-view: 6;
  --slide-width: 250px;
  --iteration-time: 30s;
  width: calc(2 * var(--no-of-slides));
}

#section_trusted_by_logos .wrapping-logos-images {
  display: flex;
  align-items: center;
  width: calc(var(--slides-in-view) * var(--slide-width));
}

#section_trusted_by_logos .wrapping-logos-inner .image-block {
  will-change: transform;
  animation: translatestf var(--iteration-time) linear infinite forwards;
  min-width: var(--slide-width);
  max-width: var(--slide-width);
  width: var(--slide-width);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 50px;
  box-sizing: border-box;
}

#section_trusted_by_logos .wrapping-logos-inner .image-block img {
  border-radius: 5px;
}

@keyframes translatestf {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(var(--slide-width) * var(--no-of-slides) * -1));
  }
}

#section_trusted_by_logos .image-block img {
  width: auto !important;
  height: auto !important;
}
#section_trusted_by_logos .image-block img[src$='.svg'] {
  min-width: var(--slide-width);
  max-width: var(--slide-width);
  padding: 0 50px;
  box-sizing: border-box;
}

// --------------------------------------------------------------- Section [FAQ]
#tiered_pricing_section_FAQ_info {
  position: relative;
  padding-bottom: 3rem;
  color: white;
  .text-block {
    position: relative;
    z-index: 1;
  }
  .heading {
    @include fontSize_Large;
    line-height: leading(50, 35);
    margin-bottom: 2.5rem;
  }
  .image-block {
    margin-top: 2.5rem;
  }
  .text-block {
    position: relative;
    z-index: 1;
  }

  .column-1 {
    margin-right: 5rem;
    padding-right: 2rem;
  }
  .column-2 {
    align-self: flex-start;
  }

  &:before {
    content: '';
    position: absolute;
    width: calc(100% + 40rem);
    height: 200%;
    top: 0;
    left: -5rem;
    background-repeat: no-repeat;
    background-size: 2112px;
    background-position: center;
    z-index: 1;
    opacity: 0.25;
    filter: blur(40px);
    transform: rotate(-165deg);
    pointer-events: none;
  }
}