Updating the Studios Unit above footer

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 5fab10e931a9529309520b8bffb5b098a9854a13..c76ee33748ef5ef866ffd5137b485136422a7d3f 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -19,64 +19,76 @@
 .docs-newsletter { margin-top: 0 !important; }
 #subForm { margin-top: 1rem; }
 
-.studios-callout {
-  text-align: center !important;
-  padding: 45px 45px 25px 45px;
-  margin-top: 45px;
-  background-color: #fafafa !important;
-  border-top: 1px solid #f6f4f4;
+#studiosCallout {
+    border-top: 1px solid #f6f4f4;
+    padding: 45px 45px 20px 45px !important;
+    background-color: #fafafa !important;
 
-  .property-label {
-    font-family: "Proxima Nova Condensed Bold","Proxima Nova Condensed","proxima-nova-condensed","Helvetica Neue",Helvetica,Arial,sans-serif !important;
-    text-transform: uppercase !important;
-    font-weight: bold !important;
-    color: #2CADBE !important;
-    // text-align: center;
-  }
+    .property-label {
+      font-family: "Proxima Nova Condensed Bold","Proxima Nova Condensed","proxima-nova-condensed","Helvetica Neue",Helvetica,Arial,sans-serif;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
 
-  .studios {
-    background-color: #2CADBE !important;
-  }
+    h3 {
+      font-size: 26px;
+      margin-top: 20px;
+      color: #333;
+    }
 
-  h3 {
-    font-size: 26px !important;
-    margin-top: 20px !important;
-    margin-bottom: 10px !important;
-    font-weight: light !important;
-  }
+    .lead {
+      font-size: 18px;
+      color: #333;
+    }
 
-  img {
-    width: 100% !important;
-    height: 250px !important;
-    overflow: hidden !important;
-  }
+    img {
+      width: 100%;
+      height: 250px;
+      overflow: hidden;
+    }
 
-  .lead {
-    color: #777777;
-    font-size: 18px;
-    font-weight: thin;
-  }
 
-  .button {
-    width: 100% !important;
-    font-weight: bold;
-    &:hover {
-      background-color: darken(#2CADBE, 10%) !important;
-      transition: .25 ease all !important;
+    /* -= Button + Label Colors Based on Property =- */
+
+    &.university {
+      .button { background: #ff6908;
+        &:hover {
+          background-color: #de5700;
+          transition: .25 ease all;
+        }
+      }
+      .property-label { color: #ff6908; }
+    }
+    &.foundation {
+      .button { background: #2CADBE;
+        &:hover {
+          background-color: #228795;
+          transition: .25 ease all;
+        }
+      }
+      .property-label { color: #2CADBE; }
+    }
+    &.studios {
+      .button { background: #2CADBE;
+        &:hover {
+          background-color: #228795;
+          transition: .25 ease all;
+        }
+      }
+      .property-label { color: #2CADBE; }
     }
   }
-}
 
-.studios-callout {
-  @include breakpoint(medium) {
-    text-align: left !important;
+  #studiosCallout {
+    @media (max-width: 650px) {
+      text-align: left;
 
-    .button {
-      width: auto !important;
-    }
+      .button {
+        width: auto;
+      }
 
-    h1 {
-      margin-top: 0 !important;
+      h1 {
+        margin-top: 0;
+      }
     }
   }
-}

diff --git a/docs/partials/footer.html b/docs/partials/footer.html
index 001610d17c397bacbba17910d9378cce2b7eba03..dfb0fffe05e59d4de42f8dbe5cf57e682730e94f 100644 (file)
--- a/docs/partials/footer.html
+++ b/docs/partials/footer.html
@@ -1,15 +1,15 @@
-<!-- Small Business (Docs) -->
-<section>
-  <div class="row expanded studios-callout">
-    <div class="medium-5 columns">
+<!-- Small Business(Docs) -->
+<section id="studiosCallout" class="foundation">
+  <div class="row">
+    <div class="large-4 medium-4 columns">
       <img src="http://foundation.zurb.com/assets/img/smallbiz-footer.svg" alt="">
     </div>
-    <div class="medium-7 columns banner-info">
+    <div class="large-8 medium-8 columns banner-info">
       <div class="row column property-label">ZURB STUDIOS</div>
       <h3 class="light">Let's build something amazing.</h3>
       <p class="lead">Work with our scrappy design team to bring your concepts to life. We’ll equip you with our battle-tested Progressive Design process and the tools to get your product or website off the ground and in front of your users.</p>
       <div class="course-buttons">
-        <a href="http://zurb.com/studios" class="studios button" data-zcom-event="studios_docs_click" id="smallBizV1">Show Me How &rarr;</a>
+          <a href="http://zurb.com/studios" class="button" data-zcom-event="studios_foundation_click" id="foundationSmallV1">Show Me How &rarr;</a>
       </div>
     </div>
   </div>