From 6a8911b36e8443126472f5acba17d5b4d9791560 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Thu, 29 Oct 2015 16:58:04 +0100
Subject: [PATCH] second iteration pricing styles

---
 app/styles/app/layouts/home-pro.sass | 102 ++++++++++++++++++++++-----
 app/templates/pricing.hbs            |  58 +++++++--------
 2 files changed, 115 insertions(+), 45 deletions(-)

diff --git a/app/styles/app/layouts/home-pro.sass b/app/styles/app/layouts/home-pro.sass
index 8ac7ad11..8df5a5c8 100644
--- a/app/styles/app/layouts/home-pro.sass
+++ b/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: #408692
+    color: $teal
 
   %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
-      padding: 1em 2em 3em
-      border: 1px solid
+    
+  [class^="plan--"]
+    flex: 0 0 230px
+    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
 
 
diff --git a/app/templates/pricing.hbs b/app/templates/pricing.hbs
index 9eac07fd..d10c70d8 100644
--- a/app/templates/pricing.hbs
+++ b/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>
-          <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>
+          <h4 class="h3--teal">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>