second iteration pricing styles

app/styles/app/layouts/home-pro.sass

@@ -1,5 +1,10 @@
 .landing-pro
 
+  $teal: #40A3AD
+  $green: #39A85B
+  $red: #DB4242
+  $yellow: #E5C025
+
   @mixin linkStyle
     a
       text-decoration: none
@@ -45,22 +50,21 @@
 
   %h2
     margin: 0 0 .5em
-    font-size: 32px
+    font-size: 36px
     font-weight: 300
     line-height: 1.3
 
   .h2--green
     @extend %h2
-    color: #39A85B
+    color: $green
 
   .h2--teal
     @extend %h2
-    margin-bottom: 1em
+    color: $teal
-    color: #408692
 
   %h3
     margin: .5em 0
-    font-size: 20px
+    font-size: 22px
     font-weight: 300
 
   .h3
@@ -68,9 +72,25 @@
 
   .h3--plans
     @extend %h3
-    font-size: 26px
+    font-size: 28px
     text-align: center
 
+  .h3--teal
+    @extend %h3
+    color: $teal
+
+  .h3--red
+    @extend %h3
+    color: $red
+
+  .h3--green
+    @extend %h3
+    color: $green
+
+  .h3--yellow
+    @extend %h3
+    color: $yellow
+
   .text-big
     @include linkStyle
     font-size: 20px
@@ -80,6 +100,7 @@
   .text-small
     @include linkStyle
     margin: 0 0 2.5em
+    font-size: 16px
 
   .landing-button
     display: inline-block
@@ -89,7 +110,7 @@
     border-radius: 2px
     font-size: 27px
     text-decoration: none
-    background-color: #39A85B
+    background-color: $green
     &:hover
       color: white
       background-color: #73c78d
@@ -203,7 +224,7 @@
         margin-right: .3em
         vertical-align: middle
         background:
-          image: inline-image('line-icons/icon-passed.svg')
+          image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMzlBODVCIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
 
   .list--features
     @extend %list
@@ -235,15 +256,64 @@
     display: flex
     justify-content: space-between
     margin: 5em 0
-    > li
+    
-      flex: 0 0 230px
+  [class^="plan--"]
-      padding: 1em 2em 3em
+    flex: 0 0 230px
-      border: 1px solid
+    padding: .5em 1.5em 3em
+    border:
+      width: 2px
+      color: #E8E8E8
+      style: solid
 
     .list--check
       margin: 3em 0
+      font-size: 16px
       li
-        line-height: 1.45
+        line-height: 2
+        &[data-jobs]:before
+          content: attr(data-jobs)
+          width: 1em
+          background-image: none
+          line-height: 1
+          font-weight: 600
+          text-align: center
+          font-size: 18px
+
+
+  =colorPlans($color, $hover-color, $bg: true)
+    border-top-color: $color
+    .plan-title
+      color: $color
+    .plan-cta-btn
+      border: $color solid 1px
+      @if $bg
+        background-color: $color
+        color: white
+      @else
+        color: $color
+        background-color: white
+      &:hover
+        background-color: $hover-color
+    .list--check li:before
+      color: $color
+
+
+  .plan--red
+    +colorPlans($red, #FCF0F0, false)
+    .list--check li:before
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjREI0MjQyIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
+  .plan--green
+    +colorPlans($green, #73c78d)
+    .list--check li:before
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMzlBODVCIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
+  .plan--teal
+    +colorPlans($teal, #8CC8CE)
+    .list--check li:before
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjNDBBM0FEIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
+  .plan--yellow
+    +colorPlans($yellow, #EFD97C)
+    .list--check li:before
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjRTVDMDI1IiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
 
 
   .plan-title
@@ -263,11 +333,11 @@
 
   .plan-cta-btn
     display: inline-block
-    padding: 0.7em
+    padding: 0.4em 0.9em
     border-radius: 2px
     font-size: 22px
     text-decoration: none
-    border: solid 1px black
+    transition: border-color 200ms ease
 
 
   .section--enterprise
@@ -295,6 +365,6 @@
       flex: 0 0 48%
       padding: 1em 1.5em 0
       margin-bottom: 2em
-      border: solid 1px lightgrey
+      border: solid 1px #E8E8E8
 
 

app/templates/pricing.hbs

@@ -8,11 +8,11 @@
         </p>
       </header>
       <ul class="list--plans">
-        <li>
+        <li class="plan--red">
           <h2 class="plan-title">Open Source</h2>
           <div class="plan-pricing">
             <div class="price">Free</div>
-            <div class="timefrane">always</div>
+            <div class="timemrane">always</div>
           </div>
           <ul class="list--check">
             <li>Fair use</li>
@@ -24,14 +24,14 @@
             <a href="https://travis-ci.org" class="plan-cta-btn">Get Started</a>
           </div>
         </li>
-        <li>
+        <li class="plan--green">
           <h2 class="plan-title">Startup</h2>
           <div class="plan-pricing">
             <div class="price">$129</div>
-            <div class="timefrane">per month</div>
+            <div class="timeframe">per month</div>
           </div>
           <ul class="list--check">
-            <li data-jobs="2"><span aria-hidden="false" class="is-hidden">2</span>Concurrent jobs</li>
+            <li data-jobs="2"><span aria-hidden="false" class="hidden">2</span>Concurrent jobs</li>
             <li>Ulimited build minutes</li>
             <li>Unlimited repositories</li>
             <li>Unlimited collaborators</li>
@@ -40,14 +40,14 @@
             <a href="https://travis-ci.com/signin" class="plan-cta-btn">Start Trial</a>
           </div>
         </li>
-        <li>
+        <li class="plan--teal">
           <h2 class="plan-title">Small Business</h2>
           <div class="plan-pricing">
             <div class="price">$249</div>
-            <div class="timefrane">per month</div>
+            <div class="timeframe">per month</div>
           </div>
           <ul class="list--check">
-            <li data-jobs="5"><span aria-hidden="false" class="is-hidden">5</span>Concurrent jobs</li>
+            <li data-jobs="5"><span aria-hidden="false" class="hidden">5</span>Concurrent jobs</li>
             <li>Ulimited build minutes</li>
             <li>Unlimited repositories</li>
             <li>Unlimited collaborators</li>
@@ -56,14 +56,14 @@
             <a href="https://travis-ci.com/signin" class="plan-cta-btn">Start Trial</a>
           </div>
         </li>
-        <li>
+        <li class="plan--yellow">
           <h2 class="plan-title">Premium</h2>
           <div class="plan-pricing">
             <div class="price">$489</div>
-            <div class="timefrane">per month</div>
+            <div class="timeframe">per month</div>
           </div>
           <ul class="list--check">
-            <li data-jobs="10"><span aria-hidden="false" class="is-hidden">10</span>Concurrent jobs</li>
+            <li data-jobs="10"><span aria-hidden="false" class="hidden">10</span>Concurrent jobs</li>
             <li>Ulimited build minutes</li>
             <li>Unlimited repositories</li>
             <li>Unlimited collaborators</li>
@@ -94,39 +94,39 @@
       <h3 class="h3--plans">Frequently asked questions about Travis CI plans</h3>
       <ul class="list--faq">
         <li>
-          <h4 class="h3">What is a concurrent job?</h4>
+          <h4 class="h3--green">What is a concurrent job?</h4>
           <p class="text-small">Every commit triggers a single job by default. If two commits have been pushed on the Startup plan, they'll be run right away. Subsequent commits have to wait until the builds finished.</p>
         </li>
         <li>
-          <h4 class="h3">Are there any restrictions on build time?</h4>
+          <h4 class="h3--teal">What hardware are my tests running on?</h4>
-          <p class="text-small">A build has 120 minutes to run. Should your build take longer, you can split it up using a build matrix.</p>
-        </li>
-        <li>
-          <h4 class="h3">Can I cancel anytime?</h4>
-          <p class="text-small">Absolutely! Contact us and we'll make sure your subscription gets cancelled as you want.</p>
-        </li>
-        <li>
-          <h4 class="h3">Do the listed prices include VAT?</h4>
-          <p class="text-small">Prices listed are excluding VAT, which will be added depending on origin (Germany and Europe). Make sure to have your company's VAT ID ready when entering billing details to remove VAT!</p>
-        </li>
-        <li>
-          <h4 class="h3">What hardware are my tests running on?</h4>
           <p class="text-small">We use dedicated hardware to ensure full speed for your tests. You have 3GB of memory and up to 2 cores available. Your tests are running directly off SSDs with the most common databases optimized to run off RAM disks.</p>
         </li>
         <li>
-          <h4 class="h3">Can I pay anually?</h4>
+          <h4 class="h3--yellow">Are there any restrictions on build time?</h4>
+          <p class="text-small">A build has 120 minutes to run. Should your build take longer, you can split it up using a build matrix.</p>
+        </li>
+        <li>
+          <h4 class="h3--red">Can I pay anually?</h4>
           <p class="text-small">You most certainly can! When signing up for a subscription, simply select the annual option. You get 1 month for free &mdash; 12 months for the price of 11!</p>
         </li>
         <li>
-          <h4 class="h3">Am I able to upgrade my plan?</h4>
+          <h4 class="h3--teal">Can I cancel anytime?</h4>
+          <p class="text-small">Absolutely! Contact us and we'll make sure your subscription gets cancelled as you want.</p>
+        </li>
+        <li>
+          <h4 class="h3--green">Am I able to upgrade my plan?</h4>
           <p class="text-small">Yes, you can change your plan subscription at any time.</p>
         </li>
         <li>
-          <h4 class="h3">How does the trial work?</h4>
+          <h4 class="h3--red">Do the listed prices include VAT?</h4>
+          <p class="text-small">Prices listed are excluding VAT, which will be added depending on origin (Germany and Europe). Make sure to have your company's VAT ID ready when entering billing details to remove VAT!</p>
+        </li>
+        <li>
+          <h4 class="h3--yellow">How does the trial work?</h4>
           <p class="text-small">Your free trial includes 100 builds and starts as soon as you set up your first project and push a commit. The trial is limitedj to one concurrent build.</p>
         </li>
         <li>
-          <h4 class="h3">Do you have plans for student?</h4>
+          <h4 class="h3--teal">Do you have plans for student?</h4>
           <p class="text-small">We most certainly do! You can find all details on <a href="https://education.travis-ci.com">education.travis-ci.com</a></p>
         </li>
       </ul>