studio - soft landing UI: how it works styling - wip

cms/static/sass/_header.scss

@@ -40,7 +40,7 @@
 
 .branding {
   position: relative;
-  padding-right: 15px;
+  padding-right: ($baseline*0.75);
 
   a {
     @include text-hide();
@@ -54,7 +54,8 @@
 .info-course {
   position: relative;
   max-width: 200px;
-  padding-right: 15px;
+  margin-top: -3px;
+  padding-right: $baseline;
   @include font-size(14);
 
   &:before {
@@ -94,7 +95,6 @@
     text-overflow: ellipsis;
     @include font-size(16);
     font-weight: 600;
-
   }
 }
 
@@ -119,6 +119,7 @@
       padding: 5px;
       text-transform: uppercase;
       font-weight: 600;
+      color: $gray-d3;
 
       &:hover, &:active {
         color: $blue;

cms/static/sass/_index.scss

@@ -39,6 +39,10 @@
 
       }
 
+      h1, h2, h3, h4, h5, h6 {
+        color: $gray-d3;
+      }
+
       h2 {
 
       }
@@ -60,6 +64,7 @@
     }
 
     .content-header {
+      position: relative;
       text-align: center;
       color: $white;
 
@@ -70,6 +75,7 @@
         border-bottom: 1px solid $blue-l1;
         padding: 0;
         font-weight: 600;
+        color: $white;
       }
 
       .tagline {
@@ -79,11 +85,41 @@
       }
     }
 
+    .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*2);
+      padding-top: ($baseline*3);
       background: $white;
     }
 
@@ -101,10 +137,15 @@
         padding: 0 0 ($baseline*2) 0;
 
         .img {
+          @include box-sizing(border-box);
           float: left;
           width: flex-grid(3, 12);
           margin-right: flex-gutter();
 
+          a {
+            display: block;
+          }
+
           img {
             display: block;
             width: 100%;
@@ -126,6 +167,11 @@
 
           > p {
             @include font-size(18);
+            color: $gray-d1;
+          }
+
+          strong {
+            font-weight: 700;
           }
 
           .list-proofpoints {
@@ -135,23 +181,38 @@
             margin: ($baseline*1.5) 0 0 0;
 
             .proofpoint {
+              @include transition(color .15s ease-in-out);
               float: left;
               width: flex-grid(3, 9);
               margin-right: flex-gutter();
-
-              &:last-child {
-                margin-right: 0;
-              }
+              color: $gray-l1;
+              cursor: pointer;
 
               .title {
                 @include font-size(16);
                 margin: 0 0 ($baseline/4) 0;
                 font-weight: 600;
+                color: $gray-d3;
+              }
+
+              &:hover {
+                color: $gray-d3;
+              }
+
+              &:last-child {
+                margin-right: 0;
               }
             }
           }
         }
 
+
+        &:last-child {
+          margin-bottom: 0;
+          border: none;
+          padding-bottom: 0;
+        }
+
         &:nth-child(even) {
 
           .img {
@@ -164,12 +225,20 @@
             float: right;
             text-align: right;
           }
-        }
 
-        &:last-child {
-          margin-bottom: 0;
-          border: none;
-          padding-bottom: 0;
+          .list-proofpoints {
+
+            .proofpoint {
+              float: right;
+              width: flex-grid(3, 9);
+              margin-left: flex-gutter();
+              margin-right: 0;
+
+              &:last-child {
+                margin-left: 0;
+              }
+            }
+          }
         }
       }
     }