base_styles.scss

* {
  font-family: FreightSans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 400; /* normal - https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping */
}

h1, h2, h3, h4, h5, h6 {
  font-family: FreightSans;
}

p {
  margin-bottom: 1.25rem;
}

a, em, i, b, strong, u, span {
  font-size: inherit;
}

a:link,
a:visited,
a:hover {
  text-decoration: none;
  color: $orange;
}

p {
  @include default_link_styles;
}

.btn,
a.btn {
  border-radius: 0;
  border: none;
  background-color: $light_grey;
  color: $quick_start_grey;
  font-weight: 400;
  position: relative;
  letter-spacing: 0.25px;

  &.btn-lg {
    font-size: 1.125rem;
    padding-top: rem(8px);
  }

  &.btn-white {
    background-color: $white;
  }

  &.btn-orange {
    background-color: $orange;
  }

  &.btn-demo {
    color: $white;
  }

  @include animated_border_hover_state;
}

.navbar {
  padding-left: 0;
  padding-right: 0;
}

html {
  position: relative;
  min-height: 100%;
  font-size: 12px;

  @include desktop {
    font-size: 16px;
  }
}

body {
  @include desktop {
    margin: 0 0 $desktop_footer_height;
  }

  &.no-scroll {
    height: 100%;
    overflow: hidden;
  }
}

a, .btn {
  &.with-right-arrow {
    padding-right: rem(32px);
    position: relative;
    background-image: url($baseurl + "/assets/images/chevron-right-orange.svg");
    background-size: 6px 13px;
    background-position: top 10px right 11px;
    background-repeat: no-repeat;
    @include desktop {
      background-size: 8px 14px;
      background-position: top 15px right 12px;
      padding-right: rem(32px);
    }
  }
  &.with-left-arrow {
    padding-left: rem(32px);
    position: relative;
    background-image: url($baseurl + "/assets/images/chevron-left-grey.svg");
    background-size: 6px 13px;
    background-position: top 10px left 11px;
    background-repeat: no-repeat;
    @include desktop {
      background-size: 8px 14px;
      background-position: top 16px left 12px;
      padding-left: rem(32px);
    }
  }
}

.main-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  @include desktop {
    height: 640px;
  }

  &.home-page-background {
    background-image: url($baseurl + "/assets/images/home-background.jpg");
  }

   &.ecosystem-background {
    background-image: url($baseurl + "/assets/images/ecosystem-background.jpg");
  }

   &.ecosystem-detail-background {
    background-image: url($baseurl + "/assets/images/ecosystem-detail-background.jpg");
  }

  &.get-started-background {
    background-image: url($baseurl + "/assets/images/get-started-background.jpg");
  }

  &.style-guide {
    background-image: url("http://via.placeholder.com/2560x1280/262626/3a3a3a");
  }

  &.features-background {
    background-image: url($baseurl + "/assets/images/features-background.jpg");
  }

  &.blog-background {
    background-image: url($baseurl + "/assets/images/blog-background.jpg");
  }
}

.bg-light-grey {
  background-color: $light_grey;
}

.text-dark-grey {
  color: $dark_grey;
}

.sidebar-links .top-section {
  color: $black;
}

.sidebar-links ul {
  list-style-type: none;
  padding-left: 0;
  li {
    color: $dark_grey;
    margin-left: 20px;
    a {
      color: inherit;
    }
  }
}

.sidebar-links .with-sub-sections  {
  &.top-section:before {
    content: "+ ";
    font-family: "Courier New", Courier, monospace;
    width: 50px;
  }

  &.top-section.open:before {
    content: "- ";
    font-family: "Courier New", Courier, monospace;
    width: 50px;
  }
}

.bg-very-light-grey {
  background-color: $very_light_grey;
}

.email-subscribe-form {
  input.email {
    color: $orange;
    border: none;
    border-bottom: 1px solid #939393;
    width: 100%;
    background-color: transparent;
    outline: none;
    font-size: 1.125rem;
    letter-spacing: 0.25px;
    line-height: 2.25rem;
  }

  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: $orange;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: $orange;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: $orange;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: $orange;
  }

  input[type="submit"] {
    position: absolute;
    right: 0;
    top: 10px;
    height: 15px;
    width: 15px;
    background-image: url($baseurl + "/assets/images/arrow-right-with-tail.svg");
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: center center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
  }
}

.email-subscribe-form-fields-wrapper {
  position: relative;
}

.bg-slate {
  background-color: $slate;
}

.tweets-wrapper {
  width: 100%;

  p {
    font-size: rem(16px);
    line-height: rem(24px);
    letter-spacing: 0.22px;
  }

  ol {
    padding-left: 0;
  }

  a {
    color: $orange;
  }

  img,
  .timeline-Tweet-actions,
  .timeline-Tweet-media,
  .MediaCard {
    display: none !important;
  }
}

.tweet {
  margin-bottom: 2.2rem;
  word-wrap: break-word;

  a {
    color: $orange;
    display: inline;
    span {
      color: inherit;
    }
  }

  p, span {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0.22px;
    color: #A0A0A1;
  }

  p {
    @include max-width-desktop {
      padding-right: 40px;
    }
  }

  span.retweeted,
  span.in-reply-to {
    font-size: rem(13px);
  }

  p.tweet-header {
    margin-bottom: rem(5px);
    line-height: rem(12px);
  }

  .tweet-bird {
    &:before {
      content: "";
      position: relative;
      left: 0;
      background-image: url($baseurl + "/assets/images/logo-twitter-grey.svg");
      background-size: 20px 16px;
      display: inline-block;
      width: 20px;
      height: 16px;

      @include desktop {
        margin-bottom: rem(10px);
      }
    }
  }
}

.anchorjs-link {
  color: $quick_start_grey !important;
  @include desktop {
    &:hover {
      color: inherit;
      text-decoration: none !important;
    }
  }
}

.article-page-module {
  background-color: $light_grey;
  padding-top: rem(30px);
  padding-bottom: rem(30px);

  @include desktop {
    padding-top: rem(60px);
    padding-bottom: rem(60px);
  }

  @include max-width-desktop {
    .col-md-3 {
      padding-left: 20px;
      padding-right: 20px;
    }
  }

  .module-link-col {
    .btn {
      padding-left: 0;
    }
    @include desktop {
      text-align: right;
      .btn {
        padding-left: inherit;
      }
    }
  }

  .module-content-wrapper {
    margin-top: rem(20px);
    margin-bottom: rem(20px);
    @include desktop {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  img {
    margin-bottom: rem(30px);
    width: 100%;
  }

  h3 {
    font-size: rem(24px);
    letter-spacing: 1.33px;
    line-height: rem(32px);
    text-transform: uppercase;
    margin-bottom: rem(20px);
    @include desktop {
      margin-bottom: rem(60px);
    }
  }

  h5, p {
    font-size: rem(16px);
    line-height: rem(24px);
  }

  h5 {
    color: $not_quite_black;
  }

  p {
    color: $very_dark_grey;
    letter-spacing: 0.25px;
  }
}

.article-page-module .module-header {
  position: relative;
}

.article-page-module .module-button {
  padding-left: 0;
  @include desktop {
    position: absolute;
    right: 15px;
    top: 0;
    padding-top: 0;
    padding-bottom: rem(2px);
    background-position: center right;
    padding-right: 16px;
  }
}

.ecosystem-card,
.resource-card {
  border-radius: 0;
  border: none;
  height: 110px;
  margin-bottom: rem(20px);
  margin-bottom: rem(30px);

  @include max-width-desktop {
    height: 150px;
  }

  @include small-desktop {
    height: 170px;
  }

  p.card-summary {
    font-size: rem(18px);
    line-height: rem(24px);
    margin-bottom: 0;
    color: $dark_grey;
  }

  h4 {
    color: $slate;
    margin-bottom: rem(18px);
  }

  a {
    height: 100%;

    @include desktop {
      min-height: 190px;
    }

    @include small-desktop {
      min-height: 234px;
    }
  }

  @include animated_border_hover_state;
  &:hover {
    p.card-summary {
      color: $not_quite_black;
    }
  }
}

.ecosystem-card .card-body {
  background-position: top rem(20px) right rem(20px);
  background-repeat: no-repeat;
  padding: rem(25px) rem(30px);

  &.reasoning {
    background-image: url($baseurl + "/assets/images/logo-elf.svg");
    background-size: 29px 25px;
  }

  &.tool {
    background-image: url($baseurl + "/assets/images/logo-wav2letter.svg");
    background-size: 29px 25px;
  }

  &.language {
    background-image: url($baseurl + "/assets/images/logo-parlai.svg");
    background-size: 29px 25px;
  }

  &.vision {
    background-image: url($baseurl + "/assets/images/logo-detectron.svg");
    background-size: 29px 25px;
  }

}

.resource-card {
  border: 1px solid #d6d7d8;
  background-color: transparent;
  margin-bottom: rem(20px);

  @include desktop {
    margin-bottom: 0;
  }

  @include small-desktop {
    height: 225px;
  }

  .pytorch-image {
    position: relative;
    height: rem(20px);
    width: rem(20px);
    top: rem(50px);
  }

  a {
    letter-spacing: 0.25px;
    color: $not_quite_black;
  }

  .card-body {
    display: block;
    padding: 0 15px 0 0;
    position: relative;
    top: 20px;
    margin-left: 60px;

    @include small-desktop {
      top: 18px;
    }

    @include max-width-desktop {
      top: 30px;
      margin-left: 80px;
      padding-right: 30px;
    }
  }

  &.slack,
  &.github,
  &.pytorch-resource {
    &:before {
      content: "";
      background-size: 32px 32px;
      background-repeat: no-repeat;
      display: block;
      position: absolute;
      height: 32px;
      width: 32px;
      top: 15px;
      left: 15px;

      @include max-width-desktop {
        left: 30px;
        top: 30px;
      }
    }
  }

  &.slack {
    &:before {
      background-image: url($baseurl + "/assets/images/logo-slack.svg");
    }
  }

  &.github {
    &:before {
      background-image: url($baseurl + "/assets/images/logo-github.svg");
    }
  }

  &.pytorch-resource {
    &:before {
      background-image: url($baseurl + "/assets/images/logo-icon.svg");
    }
  }

  .pytorch-discuss {
    .discuss {
      color: $orange;
      font-weight: 400;
    }
  }

  @include animated_border_hover_state;
}

.article-page-module.similar-projects {
  .ecosystem-card p.card-summary {
    font-size: rem(16px);
    height: 36px;
    @include desktop {
      height: 50px;
    }
  }
}

#twitter-widget iframe {
  display: none !important;
}

body.general .main-content-wrapper {
  margin-top: 80px;

  @include desktop {
    margin-top: 100px;
  }
}