vuefilemanager/resources/sass/oasis/_homepage.scss

@import '@assets/vuefilemanager/_mixins';
@import '@assets/oasis/_variables';

.container {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.oasis-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.oasis-header {
  padding-top: 100px;
  background: linear-gradient(180deg, rgba(149, 189, 230, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
}

.oasis-features {
  background: $theme-bg-dark;

  .title-wrapper {
    margin-bottom: 90px;
  }

  .main-title {
    color: white;
  }

  .sub-title-sm {
    color: $text-dark-subtitle;
  }

  .features-box {
    margin-bottom: -175px;
  }

  .cta {
    top: 240px;
    position: relative;
  }
}

.oasis-pricing {
  margin-top: 290px;

  .title-wrapper {
    margin-bottom: 60px;
  }

  .theme-button {
    @include font-size(18);
  }
}

.oasis-about-us {

}

.navigation {
  padding: 10px 0;

  .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .log-in, .logo {
    width: 235px;
  }

  .links {
    display: block;

    li {
      display: inline-block;

      a {
        @include font-size(17);
        padding: 9px 30px;
        color: $text-primary;
        font-weight: 800;
        @include transition;
        border-radius: 25px;

        &:hover {
          background: white;
          box-shadow: 0 6px 20px -10px rgba($theme, 0.35);
        }
      }
    }
  }

  .logo img {
    width: 100%;
  }

  .log-in {
    text-align: right;
  }
}

.header {
  display: block;
  text-align: center;

  .log-in {
    display: block;

    a {
      @include transition(150ms);
      font-weight: 700;
      text-decoration: underline;

      &:hover {
        color: $theme;
      }
    }
  }
}

.features-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;

  .box {
    background: $theme-bg-light;
    box-shadow: 0 22px 34px -20px #232142;
    border-radius: 12px;
    text-align: center;
    padding: 45px 25px;
    display: block;

    .box-title {
      color: white;
      margin-top: 30px;
      margin-bottom: 25px;
      @include font-size(32);
    }

    .box-description {
      color: $text-dark-secondary;
      @include font-size(19);
      line-height: 1.6;
      margin-bottom: 25px;
    }

    .box-more-info {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .icon {
        margin-left: 5px;

        polyline {
          color: $theme;
          @include transition(150ms);
        }
      }

      span {
        @include font-size(17);
        color: $theme;
        font-weight: 700;
        @include transition(150ms);
      }

      &:hover {
        span, polyline {
          color: lighten($theme, 10%);
        }
      }
    }

    &:nth-child(1) {

      .box-icon {
        rect, path {
          color: $theme;
        }
      }
    }

    &:nth-child(2) {

      .box-icon {
        line, polyline, path {
          color: $cyan;
        }
      }
    }

    &:nth-child(3) {

      .box-icon {
        path {
          color: $pink;
        }
      }
    }
  }
}

.pricing-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 1325px;

  .box {
    background: white;
    box-shadow: 0 5px 333px -22px #1B253935;
    border-radius: 12px;
    display: block;
    padding: 45px 40px 20px;
    z-index: 1;

    &:nth-child(2) {
      z-index: 2;
      padding: 55px 40px 20px;
      background: $theme-bg-light;
      margin-top: -40px;
      margin-bottom: -40px;

      .pricing-name, .pricing-data {
        color: white;
      }

      .pricing-description {
        color: $text-dark-secondary;
      }

      .pricing-data {
        margin-top: 30px;
      }

      .pricing-vat {
        color: $text-dark-subtitle;
      }
    }

    .pricing-icon {
      margin-bottom: 40px;

      path {
        color: $theme;
      }
    }

    .pricing-data {
      @include font-size(50);
      font-weight: 900;
    }

    .pricing-name {
      @include font-size(24);
      font-weight: 800;
      margin-bottom: 30px;
      display: block;
    }

    .pricing-description {
      @include font-size(19);
      margin-bottom: 35px;
    }

    .pricing-vat {
      @include font-size(12);
      color: $text-secondary;
      display: block;
      font-weight: 300;
      opacity: 0.45;
      margin-top: 15px;
    }
  }
}

.info-list {
  margin: 70px 0;

  .info-list-item {
    display: flex;
    align-items: start;
    margin-bottom: 35px;

    &:last-child {
      margin-bottom: 0;
    }

    .icon {
      margin-top: 5px;
      margin-right: 15px;

      polyline {
        color: $pink;
      }
    }

    .description {
      max-width: 620px;
      @include font-size(24);
      color: $text-primary;
      font-weight: 800;
    }
  }
}