studio - soft landing: further styling and modal set-up - WIP

cms/static/sass/_index.scss

@@ -148,37 +148,35 @@
             position: relative;
             top: 0;
             display: block;
+            overflow: hidden;
             border: 1px solid $gray-l3;
             padding: ($baseline/4);
             background: $white;
 
             .action-zoom {
-              @include transition(opacity .15s ease-in-out);
-              opacity: 0;
+              @include transition(bottom .50s ease-in-out);
               position: absolute;
-              left: 110px;
-              top: 110px;
-              min-height: 300px;
-              min-width: 300px;
+              bottom: -30px;
+              right: ($baseline/2);
+              opacity: 0;
 
               .ss-icon {
-                @include font-size(32);
-                @include border-radius(($baseline));
+                @include font-size(18);
+                @include border-radius(2px);
                 display: inline-block;
-                padding: ($baseline*1.5) $baseline $baseline $baseline;
+                padding: ($baseline/4) ($baseline/2);
                 background: $blue;
                 color: $white;
                 text-align: center;
-                line-height: 2.75rem;
               }
             }
 
             &:hover {
               border-color: $blue;
-              top: -($baseline/5);
 
               .action-zoom {
-                opacity: 0.8;
+                opacity: 1.0;
+                bottom: -2px;
               }
             }
           }
@@ -207,7 +205,8 @@
           }
 
           strong {
-            font-weight: 700;
+            color: $pink-l1;
+            font-weight: 500;
           }
 
           .list-proofpoints {
@@ -219,7 +218,7 @@
             .proofpoint {
               @include box-sizing(border-box);
               @include border-radius(($baseline/4));
-              @include transition(color .15s ease-in-out);
+              @include transition(color .50s ease-in-out);
               position: relative;
               top: 0;
               float: left;
@@ -238,12 +237,13 @@
               }
 
               &:hover {
-                background: $blue-l5;
-                color: $blue-l2;
+                @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+                background: $blue;
+                color: $blue-l3;
                 top: -($baseline/5);
 
-                .title {
-                  color: $blue-d1;
+                .title, strong {
+                  color: $white;
                 }
               }
 

cms/templates/howitworks.html

@@ -24,7 +24,7 @@
     <ol class="list-features">
       <li class="feature">
         <figure class="img zoom">
-          <a href="/static/img/howitworks-feature1.png">
+          <a rel="modal" href="#hiw-feature1">
             <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Helps You Keep Your Courses Organized" />
             <figcaption class="sr">Studio Helps You Keep Your Courses Organized</figcaption>
             <span class="action-zoom">
@@ -58,7 +58,7 @@
 
       <li class="feature">
         <figure class="img zoom">
-        <a href="/static/img/howitworks-feature2.png">
+        <a rel="modal" href="#hiw-feature2">
           <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
           <figcaption class="sr">Studio Keeps Your Learning Sequences and Lectures, Together</figcaption>
           <span class="action-zoom">
@@ -92,7 +92,7 @@
 
       <li class="feature">
         <figure class="img zoom">
-          <a href="/static/img/thumb-hiw-feature3.png">
+          <a rel="modal" href="#hiw-feature3">
             <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
             <figcaption class="sr">Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.</figcaption>
             <span class="action-zoom">
@@ -143,12 +143,29 @@
     </ul>
   </section>
 </div>
+
+<!-- <div class="content-modal" id="hiw-feature1">
+  <h3>Feature #1</h3>
+  <img src="/static/img/hiw-feature1.png" alt="" />
+</div>
+
+<div class="content-modal" id="hiw-feature2">
+  <h3>Feature #2</h3>
+  <img src="/static/img/hiw-feature1.png" alt="" />
+</div>
+
+<div class="content-modal" id="hiw-feature3">
+  <h3>Feature #3</h3>
+  <img src="/static/img/hiw-feature1.png" alt="" />
+</div> -->
 </%block>
 
 <%block name="jsextra">
   <script type="text/javascript">
     (function() {
 
+      $("a[rel*=modal]").leanModal({closeButton: ".modal_close"});
+
     })(this)
   </script>
 </%block>
\ No newline at end of file