App styles

Styles.scss

#pelcro-app {
  font-size: 15px;

  #hockey-news {
    font-family: "Saira", sans-serif;

    .pelcro-prefix-site-logo {
      height: 35px;
    }

    .pelcro-prefix-site-name {
      font-size: 15px;
    }

    h4 {
      font-family: "Khand", sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 30px;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    p {
      font-family: "Saira", sans-serif;
      font-weight: 400;
      font-size: 14px;
      color: black;
    }

    label {
      font-family: "Saira", sans-serif;
      line-height: 22px;
      font-weight: 500;
      font-size: 16px;
    }

    .pelcro-long-label > span {
      display: flex;
    }

    .pelcro-prefix-select {
      font-size: 15px;
    }

    .pelcro-prefix-btn {
      font-family: "Saira", sans-serif;
      text-transform: uppercase;
      font-size: 18px;
      border-radius: 0;
      font-weight: 700;
      padding: 12px 25px;
      width: auto;
      height: auto;
    }

    .pelcro-prefix-btn,
    button,
    input[type="button"],
    input[type="submit"] {
      transition: all 0.2s ease-in-out;
    }

    .submit {
      text-align: center;
    }

    .pelcro-prefix-btn:hover {
      -webkit-transform: none;
      transform: none;
    }

    .product-container {
      width: -webkit-fill-available;
      height: -webkit-fit-content;
      min-width: 303px;
    }

    .product-container.silver {
      border-radius: 8px;
      box-shadow: 2px 12px 15px -12px;
      margin-right: 18px;
      transition: 0.4s;
    }

    .product-container.silver:hover {
      border-radius: 8px;
      box-shadow: 2px 15px 22px -12px;
      transition: 0.4s;
    }

    .product-container.gold {
      border-right: 1px solid #272727;
      border-left: 1px solid #272727;
    }

    .product-container.bronze {
      border-radius: 8px;
      margin-right: 18px;
      box-shadow: 2px 12px 15px -12px;
      transition: 0.4s;
    }

    .product-container.bronze:hover {
      border-radius: 8px;
      box-shadow: 2px 15px 22px -12px;
      transition: 0.4s;
    }

    .product-container.bronze .price {
      padding-top: 20px;
    }

    .price {
      font-weight: 800;
    }

    .product-field {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .product-img {
      max-width: 90%;
      margin-top: 5px;
    }

    .product-title {
      min-height: 213px;
      font-weight: 800;
      font-family: "Saira", sans-serif;
      text-transform: uppercase;
      font-size: 17px;
      text-align: center;
    }

    .product-name {
      border-bottom: 1px solid #424242;
    }

    .product-name.gold {
      background: #ffd700;
      box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.5);
    }

    .product-name.silver {
      background: #c0c0c0;
      box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.5);
    }

    .product-name.bronze {
      background: #ce965f;
      box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.5);
    }

    .product-name p {
      margin: 0;
      font-weight: 800;
      font-family: "Saira", sans-serif;
      text-transform: uppercase;
      text-align: center;
      font-size: 21px;
    }

    .product-name p:first-of-type {
      font-size: 45px;
      margin-bottom: 3px;
    }

    .product-description {
      font-family: "Khand", sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 25px;
      letter-spacing: 0px;
      text-align: center;
      background: black;
      color: white;
      padding: 3px 0px 0px 0;
    }

    .description-block {
      padding: 10px;
      font-family: "Saira", sans-serif;
      font-weight: 600;
      font-size: 14px;
    }

    .description-title {
      font-size: 14px;
      padding: 0 0 5px 10px;
      border-bottom: 1px solid gray;
      margin-bottom: 12px;
    }

    .description-subtitle {
      font-size: 11px;
      padding: 10px 0 0px 10px;
    }

    .description-item {
      display: flex;
    }

    .price {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .price span {
      font-size: 30px;
    }

    .price .on-date {
      font-size: 15px;
      font-weight: 500;
    }

    .billed-at-start {
      color: #5d5d5d;
      font-style: italic;
      font-size: 14px;
      margin: 0 !important;
      font-weight: 500;
    }

    .savings {
      color: #5d5d5d;
      font-style: italic;
      font-size: 14px;
      margin: 0 !important;
      display: flex;
      justify-content: center;
      font-weight: 500;
    }

    .description-item div {
      font-family: "Saira", sans-serif;
      font-weight: 500;
      font-size: 14px;
      line-height: 1.5;
    }

    .description-item.includes div {
      margin: 0;
    }

    .description-item.includes img {
      margin: 3px 7px auto 10px;
    }

    .description-block .line {
      border-bottom: 1px solid #d0d0d0;
      margin: 5px 0 5px 0;
    }

    .check-svg {
      margin-right: 2px !important;

      svg {
        width: 20px;
        height: 20px;
      }

      polyline {
        stroke: #00bd39;
        stroke-width: 1;
        stroke-linejoin: round;
        stroke-linecap: round;
        fill: none;
      }
    }

    .pelcro-prefix-btn.select-view {
      font-size: 20px;
      height: auto;
      padding: 12px 23px;
      margin-top: 5px;
      width: 100%;
    }

    .footer-title {
      text-align: center;
      color: #7d7d7d;
      margin: 10px 0px 15px 0;
    }

    .exclusive-span {
      font-style: italic;
    }

    .product-title span {
      font-size: 25px;
      color: #ffffff;
      line-height: 1;
      display: flex;
      justify-content: center;
      background-color: #cf202e;
      border-radius: 8px 8px 0px 0px;
      height: 42px;
      align-items: center;
    }

    .product-title .empty-span {
      background-color: white;
    }

    .product-title span:first-child {
      font-size: 20px;
      position: relative;
      letter-spacing: -1px;
    }

    .pelcro-prefix-btn.back:hover {
      float: left;
      background: black;
      border-color: black;
    }

    .pelcro-prefix-btn.back {
      float: left;
      background: #353535;
      border-color: #353535;
    }

    .pelcro-prefix-btn.next {
      float: right;
    }

    .pelcro-plan-inner {
      padding: 10px 10px 15px 5px;
      // border: 2px solid #9c9c9c;
    }

    .pelcro-plan-inner:hover {
      background: #e8e8e8;
      // margin-left: 3px;
    }

    .separator {
      background-image: linear-gradient(
        45deg,
        #e6e7e8 41.67%,
        #f3f3f3 0,
        #f3f3f3 50%,
        #e6e7e8 0,
        #e6e7e8 91.67%,
        #f3f3f3 0,
        #f3f3f3
      );
      background-size: 20px 20px;
      clear: both;
      height: 19px;

      margin: 3px 0;
      width: 100%;
    }

    .plan-block {
      margin: 0;
      padding: 0;
    }

    .checkbox-block {
      flex: 0 0 10.33333%;
      max-width: 10.33333%;
    }

    .pelcro-plan label {
      position: relative;
    }

    .gift-checkbox {
      margin-top: 30px;
    }

    input[type="checkbox"],
    input[type="radio"] {
      position: absolute;
      clip: rect(0, 0, 0, 0);
    }

    input[type="checkbox"] + label::before,
    input[type="radio"] + label::before {
      content: "\A0";
      margin: 0.2em 0.5em;
      width: 1em;
      height: 1em;
      line-height: 0.75em;
      transition: all 0.5s;
      border: 1px solid #9c9c9c;
      background: white;
      float: left;
    }

    input[type="radio"] + label::before {
      border-radius: 50%;
    }

    input[type="checkbox"]:checked + label::before,
    input[type="radio"]:checked + label::before {
      content: "\A0";
      background: #e60000;
      border: 1px solid #9c9c9c;
      box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 0px #e4e4e485;
      float: left;
    }

    .pelcro-plan-price {
      font-size: 17px;
      color: #cf202e;
      line-height: 1;
      font-weight: 800;
      font-family: "Saira", sans-serif;
      text-transform: uppercase;
      float: right;
      padding: 0 10px 0px 0px;
    }

    .pelcro-plan-title {
      font-size: 18px;
    }

    .card {
      overflow: hidden;
      position: relative;
      text-align: center;
    }

    .shine {
      width: 1000px;
      height: 100px;
      margin-left: -100px;
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      background: -webkit-linear-gradient(
        top,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      position: absolute;
      -webkit-animation: shine 6s ease-in-out 1;
      animation: shine 6s ease-in-out 1;
    }

    @keyframes shine {
      0%,
      100% {
        margin-top: -100px;
      }

      50% {
        margin-top: 800px;
      }
    }

    .pelcro-prefix-title-block p {
      padding-bottom: 20px;
      border-bottom: 5px solid #cf202e;
      margin-bottom: 20px;
      font-family: Saira, sans serif;
      font-weight: 500;
      color: #58595b;
      font-size: 15px;
    }

    .pelcro-prefix-border-bottom {
      padding-bottom: 20px;
      border-bottom: 1px solid black;
      margin-bottom: 20px;
    }

    .pelcro-prefix-title-block-no-border p {
      border-bottom: none;
      padding-bottom: 0px;
      font-family: Saira, sans serif;
      font-weight: 500;
      color: #58595b;
      font-size: 15px;
    }

    .pelcro-prefix-title-block-no-border h4 {
      margin-top: 30px;
    }

    #pelcro-view-address {
      label {
        font-size: 15px;
      }
    }

    #pelcro-view-payment .pelcro-prefix-btn {
      width: 100%;
    }

    #pelcro-view-password-forgot .pelcro-prefix-btn {
      width: 100%;
    }

    #pelcro-view-redeem .pelcro-prefix-btn {
      width: 100%;
    }

    #pelcro-view-meter {
      p {
        font-family: Saira, sans serif;
        font-weight: 500;
        color: #58595b;
      }
    }

    #pelcro-view-success p {
      font-family: Saira, sans serif;
      font-weight: 500;
      color: #58595b;
      line-height: 20px;
      margin-bottom: 10px;
      font-size: 15px;
    }

    #pelcro-view-success {
      .collapsible {
        background-color: #505050;
        color: white;
        cursor: pointer;
        padding: 5px 12px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        font-weight: 500;

        .fa-angle-right-collapse {
          width: 7px;
          margin: 3px 3px auto 0px;
          float: right;
          transition: all 0.3s;
        }
      }

      .active,
      .collapsible:hover {
        background-color: #212121;
      }

      .content {
        box-shadow: inset 0px 38px 17px -38px rgba(0, 0, 0, 0.4);
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #f3f3f3;
        margin-bottom: 10px;
      }

      .pelcro-prefix-form {
        padding: 10px 15px 15px 15px;
      }

      .pelcro-prefix-title-block {
        margin-bottom: 5px;
      }

      .collapse-title {
        font-family: "Khand", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 25px;
        margin-top: 0px;
        margin-bottom: 0px;
        text-align: center;
        line-height: 25px;
        color: #252525;
      }

      .collapse-subtitle {
        text-align: center;
        margin: 5px 0 15px 0;
        font-size: 16px;
      }

      .rotate {
        transform: rotate(90deg);
        transform-origin: 50% 50%;
        transition: all 0.3s;
      }
    }

    #pelcro-view-dashboard span {
      font-family: Saira, sans serif;
      font-weight: 500;
      color: #58595b;
      line-height: 15px;
    }

    #pelcro-view-dashboard .pelcro-prefix-link {
      font-family: Saira, sans serif;
      font-weight: 500;
      line-height: 15px;
    }

    .pelcro-plan.row {
      margin-left: 0;
      margin-right: 0;
    }

    .fa-angle-right {
      width: 7px;
      margin: 0 0 2px 10px;
    }

    .select-view.pelcro-prefix-btn span {
      font-size: 25px;
    }

    @media (max-width: 970px) {
      .product-field {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .product-container {
        margin-bottom: 10px;
      }
    }

    @media (max-width: 385px) {
      .product-container {
        min-width: 240px;
      }

      .pelcro-prefix-btn.select-view {
        font-size: 17px;
      }

      .pelcro-plan-title {
        font-size: 16px;
        margin-bottom: 5px;
      }

      #pelcro-view-success button {
        font-size: 15px;
        padding: 15px 15px;
      }
    }
  }
}

.pelcro-prefix-dashboard-label {
  font-weight: bold !important;
}

#pelcro-app #hockey-news .submit {
  .separator {
    margin: 20px 0 !important;
  }
}

.entry-content {
  position: relative;
}

.hide-container:before {
  background-image: linear-gradient(
    180deg,
    hsla(0, 0%, 100%, 0.001),
    #fff
  );
  bottom: 360px;
  content: "";
  height: 50%;
  position: absolute;
  width: 100%;
}