strong-arc/client/less/landing/landing.less

A visual suite for the StrongLoop API Platform

.sl-landing-page {
  padding: 0;
  font-weight: 200;
  color: @white;
  //background: #dedede url(/images/arc_white.svg) no-repeat 0 15rem;
  min-height: 100rem;
  text-align: center;

  > header {
    text-align: center;
    background: #010001;
    border-radius: 0;
    height: 24rem;
    position: relative;
    z-index: 0;

    //masking for arc
//    .mask(url(/images/curvature-up.svg) no-repeat bottom center / 4219px 398px);

    .banner-text {
      width: 100%;
      position: absolute;
      bottom: 7rem;
      z-index: 2;

      h1 {
        font-weight: 300;
        font-size: 5.2rem;
        letter-spacing: .3rem;
        margin: 0 0 1rem 0;
        padding-top: 6rem;
        text-shadow: 0 0 10px #000;
      }

      p {
        font-weight: 200;
        font-size: 2rem;
        margin: 0;
        font-style: italic;
        letter-spacing: .15rem;
        text-shadow: 0 0 10px #000;
      }
    }

    video {
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: 50%;
      margin-left: -327px;
      outline: none;
    }
  }

  > footer{
    //.mask(url(/images/curvature-down.svg) top center / cover);

    .footer-spacer {
      min-height: 40rem;
      background: #eee;
    }
  }

  .sl-apps {
    text-align: left;
    margin: 0 auto 1rem;
    display: inline-block;
  }

  .sl-app {
    .box-sizing(border-box);
    text-align: center;
    width: 13rem;
    height: 13rem;
    display: inline-block;
    margin: 0 auto;
    position: relative;

    &.app-placeholder {
      display: none;
      cursor: default;

      .app-name {
        visibility: hidden;
      }

      .app-container {
        cursor: default;
      }
    }

    .app-container {
      width: 100%;
      padding: 0;
      text-align: center;
      cursor: pointer;
    }

    .app-image-unsupported {
      display: none;
    }

    //only show unsupported icons
    .app-unsupported {
      //opacity: 0.5;
      cursor: default;

      .sl-app-icon {
        display: none;
      }

      .app-image-unsupported {
        display: block;
      }
    }

    &:hover {
      .app-container {
        //background-color: @gray-lighter;
      }

      .app-image {
        display: none;
      }

      .app-image-hover {
        display: block;
      }

      //no hover state for unsupported
      .app-unsupported {
        .app-image, .app-image-hover {
          display: none;
        }

        a {
          cursor: default;
        }
      }

      a {
        text-decoration: none;
      }
    }

    .app-name {
      .box-sizing(border-box);
      display: block;
      width: 100%;
    }

    .app-image-hover {
      display: none;
    }

    .app-image::before {
      margin-right: 0;
      font-size: 6rem;
      color: @link-color;
    }

    .app-description {
      font-size: 1.5rem;
      margin: .8rem;
    }

    .app-name {
      position:relative;
      font-size: 1.5rem;
      color: @gray;
      margin-top: .8rem;
    }

    a.app-launch {
      font-size: 1.5rem;
      color: @link-color2;
    }

    .app-popover {
      position: absolute;
      top: 0;
      left: 1rem;

      .sl-icon {
        color: #a7a9ac;
        cursor: pointer;
      }

      header {
        background: #aaa;
        color: #fff;
        padding: 1rem;
        border-radius: .8rem .8rem 0 0;

        h4 {
          margin: 0;
        }
      }

      section {
        padding: 1rem;
      }
    }
  }
}

.sl-app-selector {
  display: inline-block;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 480px) {
  .sl-landing-page {
  }
}

@media screen and (min-width: 1310px) {
  .sl-landing-page {
    .sl-app {
      display: inline-block;

      &.app-placeholder {
        display: inline-block;
      }
    }
  }
}