_index.scss

// how it works/not signed in index
.index {

  &.not-signedin {

    .wrapper-header {
      margin-bottom: 0;
    }

    .wrapper-footer {
      margin: 0;
      border-top: 2px solid $gray-l3;

      footer.primary {
        border: none;
        margin-top: 0;
        padding-top: 0;
      }
    }

    .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
      @include box-sizing(border-box);
      margin: 0;
      padding: 0 $baseline;
      position: relative;
      width: 100%;
    }

    .content {
      @include clearfix();
      @include font-size(16);
      max-width: $fg-max-width;
      min-width: $fg-min-width;
      width: flex-grid(12);
      margin: 0 auto;
      color: $gray-d2;
    
      header {
        border: none;
        padding-bottom: 0;
        margin-bottom: 0;
      }

      h1, h2, h3, h4, h5, h6 {
        color: $gray-d3;
      }

      h2 {

      }

      h3 {

      }

      h4 {

      }
    }

    // welcome content
    .wrapper-content-header {
      @include linear-gradient($blue-l1,$blue,$blue-d1);
      padding-bottom: ($baseline*4);
      padding-top: ($baseline*4);
    }

    .content-header {
      position: relative;
      text-align: center;
      color: $white;

      h1 {
        @include font-size(52);
        float: none;
        margin: 0 0 ($baseline/2) 0;
        border-bottom: 1px solid $blue-l1;
        padding: 0;
        font-weight: 500;
        color: $white;
      }

      .logo {
        @include text-hide();
        position: relative;
        top: 3px;
        display: inline-block;
        vertical-align: baseline;
        width: 282px;
        height: 57px;
        background: transparent url('../img/logo-edx-studio-white.png') 0 0 no-repeat;
      }

      .tagline {
        @include font-size(24);
        margin: 0;
        color: $blue-l3;
      }
    }

    .arrow_box {
      position: relative;
      background: #fff;
      border: 4px solid #000;
    }
    .arrow_box:after, .arrow_box:before {
      top: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    .arrow_box:after {
      border-color: rgba(255, 255, 255, 0);
      border-top-color: #fff;
      border-width: 30px;
      left: 50%;
      margin-left: -30px;
    }
    .arrow_box:before {
      border-color: rgba(0, 0, 0, 0);
      border-top-color: #000;
      border-width: 36px;
      left: 50%;
      margin-left: -36px;
    }

    // feature content
    .wrapper-content-features {
      @include box-shadow(0 -1px ($baseline/4) $shadow);
      padding-bottom: ($baseline*2);
      padding-top: ($baseline*3);
      background: $white;
    }

    .content-features {

      .list-features {

      }

      // indiv features
      .feature {
        @include clearfix();
        margin: 0 0 ($baseline*2) 0;
        border-bottom: 1px solid $gray-l4;
        padding: 0 0 ($baseline*2) 0;

        .img {
          @include box-sizing(border-box);
          float: left;
          width: flex-grid(3, 12);
          margin-right: flex-gutter();

          a {
            @include box-sizing(border-box);
            @include box-shadow(0 1px ($baseline/10) $shadow-l1);
            position: relative;
            top: 0;
            display: block;
            overflow: hidden;
            border: 1px solid $gray-l3;
            padding: ($baseline/4);
            background: $white;

            .action-zoom {
              @include transition(bottom .50s ease-in-out);
              position: absolute;
              bottom: -30px;
              right: ($baseline/2);
              opacity: 0;

              .ss-icon {
                @include font-size(18);
                @include border-top-radius(3px);
                display: inline-block;
                padding: ($baseline/4) ($baseline/2);
                background: $blue;
                color: $white;
                text-align: center;
              }
            }

            &:hover {
              border-color: $blue;

              .action-zoom {
                opacity: 1.0;
                bottom: -2px;
              }
            }
          }

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .copy {
          float: left;
          width: flex-grid(9, 12);
          margin-top: -($baseline/4);

          h3 {
            margin: 0 0 ($baseline/2) 0;
            @include font-size(24);
            font-weight: 600;
          }

          > p {
            @include font-size(18);
            color: $gray-d1;
          }

          strong {
            color: $gray-d2;
            font-weight: 500;
          }

          .list-proofpoints {
            @include clearfix();
            @include font-size(14);
            width: flex-grid(9, 9);
            margin: ($baseline*1.5) 0 0 0;

            .proofpoint {
              @include box-sizing(border-box);
              @include border-radius(($baseline/4));
              @include transition(color .50s ease-in-out);
              position: relative;
              top: 0;
              float: left;
              width: flex-grid(3, 9);
              min-height: ($baseline*8);
              margin-right: flex-gutter();
              padding: ($baseline*0.75) $baseline;
              color: $gray-l1;

              .title {
                @include font-size(16);
                margin: 0 0 ($baseline/4) 0;
                font-weight: 500;
                color: $gray-d3;
              }

              &:hover {
                @include box-shadow(0 1px ($baseline/10) $shadow-l1);
                background: $blue-l5;
                top: -($baseline/5);

                .title {
                  color: $blue;
                }
              }

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


        &:last-child {
          margin-bottom: 0;
          border: none;
          padding-bottom: 0;
        }

        &:nth-child(even) {

          .img {
            float: right;
            margin-right: 0;
            margin-left: flex-gutter();
          }

          .copy {
            float: right;
            text-align: right;
          }

          .list-proofpoints {

            .proofpoint {
              float: right;
              width: flex-grid(3, 9);
              margin-left: flex-gutter();
              margin-right: 0;

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

    // call to action content
    .wrapper-content-cta {
      padding-bottom: ($baseline*2);
      padding-top: ($baseline*2);
      background: $white;
    }

    .content-cta {
      border-top: 1px solid $gray-l4;

      header {
        border: none;
        margin: 0;
        padding: 0;
      }

      .list-actions {
        position: relative;
        margin-top: -($baseline*1.5);

        li {
          width: flex-grid(6, 12); 
          margin: 0 auto;
        }

        .action {
          display: block;
          width: 100%;
          text-align: center;
        }

        .action-primary {
          @include blue-button;
          @include transition(all .15s);
          @include font-size(18);
          padding: ($baseline*0.75) ($baseline/2);
          font-weight: 600;
          text-align: center;
          text-transform: uppercase;
        }

        .action-secondary {
          @include font-size(14);
          margin-top: ($baseline/2);
        }
      }
    }
  }
}