edx-platform/cms/static/sass/views/_index.scss

// studio - views - how it works
// ====================

.view-howitworks {

  &.not-signedin {

    .wrapper-header {
      margin-bottom: 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 {
      @extend %t-copy-base;
      @include clearfix();
      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 {
        @extend %t-title2;
        @extend %t-strong;
        float: none;
        margin: 0 0 ($baseline/2) 0;
        border-bottom: 1px solid $blue-l1;
        padding: 0;
        color: $white;
      }

      .wrapper-text-welcome, .logo {
        display: inline-block;
      }

      .logo {
        @extend %t-strong;
        margin-left: ($baseline/2);
      }

      .tagline {
        @extend %t-title4;
        margin: 0;
        color: $blue-l3;
      }
    }

    .arrow_box {
      position: relative;
      background: $white;
      border: 4px solid $black;
    }
    .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: $white;
      border-width: 30px;
      left: 50%;
      margin-left: -($baseline*1.5);
    }
    .arrow_box:before {
      border-color: $transparent;
      border-top-color: $black;
      border-width: 36px;
      left: 50%;
      margin-left: -36px;
    }

    // feature content
    .wrapper-content-features {
      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);
            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 $tmg-f2 ease-in-out 0s);
              position: absolute;
              bottom: -30px;
              right: ($baseline/2);
              opacity: 0.0;

              .icon {
                @include border-top-radius(3px);
                @extend %t-icon4;
                display: inline-block;
                padding: ($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: auto;
          }
        }

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

          h3 {
            @extend %t-title4;
            @extend %t-strong;
            margin: 0 0 ($baseline/2) 0;
          }

          > p {
            @extend %t-copy-lead1;
            color: $gray-d1;
          }

          strong {
            @extend %t-strong;
            color: $gray-d2;
          }

          .list-proofpoints {
            @extend %t-copy-sub1;
            @include clearfix();
            width: flex-grid(9, 9);
            margin: ($baseline*1.5) 0 0 0;

            .proofpoint {
              @include box-sizing(border-box);
              @include transition(all $tmg-f2 ease-in-out 0s);
              border-radius: ($baseline/4);
              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-d1;

              .title {
                @extend %t-copy-base;
                @extend %t-strong;
                margin: 0 0 ($baseline/4) 0;
                color: $gray-d3;
              }

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

                .title {
                  color: $blue-d2;
                }
              }

              &: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 {
      position: relative;
      padding: ($baseline*2) 0;
      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;
            @extend %t-action1;
            @extend %t-strong;
            padding: ($baseline*0.75) ($baseline/2);
            text-align: center;
            text-transform: uppercase;
          }

          &.action-secondary {
            @extend %t-action3;
            margin-top: ($baseline/2);
          }
        }
      }
    }
  }
}