ecosystem.scss

.ecosystem .jumbotron {
  height: 170px;
  @include desktop {
    height: 239px;
  }

  h1 {
    padding-top: rem(35px);
  }

  p.lead {
    margin-bottom: rem(25px);
  }

  svg {
    margin-bottom: rem(20px);
  }
}

.ecosystem .main-background {
  height: 275px;

  @include desktop {
    height: 349px;
  }
}

.ecosystem .main-content {
  @include desktop {
    padding-top: 3.25rem;
  }
}

.ecosystem .main-content-wrapper {
  background-color: $light_grey;

  @include desktop {
    margin-top: 260px + $desktop_header_height;
  }
  margin-top: 275px;
}

.ecosystem.ecosystem-detail .main-content-wrapper {
  background-color: $white;
}

.ecosystem-cards-wrapper {
  margin-bottom: rem(18px);
  padding-top: rem(20px);
}

.ecosystem .main-content-menu {
  .navbar-nav .nav-link {
    font-size: rem(18px);
    color: $very_dark_grey;
    padding-right: 0;
    margin-right: rem(30px);

    &.selected {
      color: $orange;
      border-bottom: 1px solid $orange;
    }
  }

  .nav-item:last-of-type {
    @include desktop {
      position: absolute;
      right: 0;
      a {
        margin-right: 0;
      }
    }
  }
}

.ecosystem.ecosystem-detail .main-content {
  padding-bottom: 0;
}

.ecosystem article.pytorch-article {
  counter-reset: article-list;

  > ol {
    padding-left: 0;
    list-style-type: none;
  }

  > ol > li {
    @include max-width-desktop {
      position: relative;

      &:before {
        counter-increment: article-list;
        content: counter(article-list, decimal-leading-zero);
        color: #B932CC;
        line-height: rem(40px);
        letter-spacing: -0.34px;
        font-size: rem(32px);
        font-weight: 300;
        position: absolute;
        left: -60px;
        top: -16px;
        padding: rem(10px) 0;
        background-color: $white;
        z-index: 10;
      }

      &:after {
        content: "";
        width: 2px;
        position: absolute;
        left: -42px;
        top: 0;
        height: 100%;
        background-color: #f3f3f3;
        z-index: 9;
      }
    }

    > h4 {
      color: $slate;
    }

    ul li {
      list-style-type: disc;
    }
  }
}

.ecosystem .quick-starts {
  background: #ecedf1;

  .title-block,
  #command,
  .option,
  .cloud-option {
    border-color: #ecedf1;
  }
}

.ecosystem  {
  .join-link {
    color: inherit;
    text-decoration: underline;
  }

  .join-notice {
    text-align: center;
    padding-top: rem(20px);
    padding-bottom: rem(40px);

    p {
      color: $dark_grey;
      margin-bottom: 0;
      line-height: rem(30px);
    }
  }

  .join-jumbotron {
    @include desktop {
      height: 262px;
    }
    border-bottom: 1px solid #C3C3C3;
    width: 90%;

    .container {
      max-width: 920px;
    }

    h1 {
      padding-top: rem(5px);
      color: $black;
      span {
        font-weight: 300;
        color: #812CE5;
      }
    }
  }

  .join-wrapper {
    background-color: $white;

    .main-content {
      @include desktop {
        padding-top: 4.4rem;
      }
    }

    .container {
      max-width: 920px;
    }

    #success-response {
      color: $dark_grey;
    }
  }

  .join-intro {
    color: $dark_grey;
    line-height: 28px;
  }

  .requirements {

    span {
      color: $black;
      font-weight: bold;
    }

    .join-number {
      color: $purple;
      display: flex;
      align-items: center;
      @include desktop {
        padding-left: rem(10px);
      }
    }

    p {
      margin-bottom: 0;
      margin-top: rem(-7px);
      @include desktop {
        padding-left: rem(24px);
      }
    }

    .col-md-11 {
      @include desktop {
        border-left: 2px solid $light_grey;
      }
    }
  }

  .row.requirements {
    padding-bottom: rem(40px);
  }

  .ecosystem-form {
    padding-bottom: rem(48px);

    .mc-field-group {
      padding-bottom: rem(25px);

      .error-message {
        color: $orange;
      }
    }

    h3 {
      text-transform: uppercase;
      padding-top: rem(25px);
      padding-bottom: rem(30px);
    }

    label {
      color: $dark_grey;
    }

    input, textarea {
      width: 100%;
      background-color: #F1F2F6;
      border: none;
      border-bottom: 2px solid $purple;
      height: rem(44px);
      outline: none;
      padding-left: rem(15px);
    }

    ::placeholder {
      color: $dark_grey;
      opacity: 0.5;
      ;
    }

    .submit-project {
      @include desktop {
        padding-left: rem(18px);
        background-origin: content-box;
        background-size: 30px 15px;
      }
      padding-left: rem(12px);
      margin-top: rem(40px);
      background-color: $orange;
      color: $white;
      cursor: pointer;
      border: none;
      width: 30%;
      height: rem(45px);
      text-align: left;
      background-repeat: no-repeat;
      background-image: url(/assets/images/arrow-right-with-tail-white.svg);
      background-size: 30px 12px;
      background-position: right;
    }

    .submit-field {
      margin-top: -6px;
      text-align: center;
    }

    .large-input {
      height: rem(90px);
      padding-top: rem(10px);
    }

    #submitting-project {
      background-color: $dark_grey;
    }

    button {
      outline: none;
    }

    #mce-error-response {
      color: $orange;
      a {
        text-decoration: underline;
      }
    }
  }
}

.ecosystem .experimental {
  .ecosystem-card-title-container {
    display: inline-flex;
      .experimental-badge {
        text-transform: uppercase;
        margin-left: 15px;
        background-color: #e4e4e4;
        color: $not_quite_black;
        opacity: 0.75;
        font-size: rem(10px);
        letter-spacing: 1px;
        line-height: rem(22px);
        height: rem(20px);
        width: rem(96px);
        text-align: center;
        margin-top: rem(4px);
    }
  }
}