Merge pull request #221 from bigchaindb/feature/services-color

Services color changes

_src/_assets/styles/_page-services.scss

@@ -35,10 +35,15 @@
     .logo--services {
         display: inline-block;
         opacity: .75;
+        fill: $brand-main-blue-light;
+    }
+
+    .hero__title {
+        margin-top: $spacer;
     }
 
     .hero__subtitle {
-        margin-bottom: $spacer * 2;
+        margin-bottom: $spacer * 3;
         font-size: $font-size-h5;
 
         @media ($screen-sm) {
@@ -58,15 +63,25 @@
 
 .section--servicesdetail {
     .feature__icon {
-        stroke: darken($brand-main-violet, 30%);
-        color: $brand-main-green;
+        stroke: rgba($brand-main-gray, .65);
+        color: rgba($brand-main-violet, .65);
+    }
+
+    .feature__title {
+        // the bottom line
+        &:after {
+            background: rgba($brand-main-gray, .2);
+        }
+    }
+
+    .feature__text {
+        color: rgba($brand-main-blue, .65);
     }
 
     .actions {
         text-align: center;
-        margin-top: $spacer * 2;
-        padding-top: $spacer * 2;
-        border-top: 1px solid darken($brand-main-violet, 5%);
+        padding-top: $spacer * 3;
+        border-top: 2px solid rgba($brand-main-gray, .1);
     }
 }
 

_src/_assets/styles/_sections/_section-cta-services.scss

@@ -9,8 +9,8 @@
         margin-bottom: $spacer;
         transform: scale(.8);
         transform-origin: left;
-        color: darken($brand-main-violet, 25%);
-        fill: darken($brand-main-violet, 25%);
+        color: $brand-main-violet;
+        fill: rgba($brand-main-blue, .5);
     }
 
     .section-header {

_src/_assets/styles/bigchain/_buttons.scss

@@ -70,6 +70,10 @@ fieldset[disabled] a.btn {
     @include button-variant($btn-blue-color, $btn-blue-bg);
 }
 
+.btn-blue-light {
+    @include button-variant($btn-blue-light-color, $btn-blue-light-bg);
+}
+
 .btn-violet {
     @include button-variant($btn-violet-color, $btn-violet-bg);
 }

_src/_assets/styles/bigchain/_mixins/_backgrounds.scss

@@ -25,6 +25,18 @@
     }
 }
 
+.background--blue--light {
+    background: $brand-main-blue-light;
+
+    .section-title,
+    p,
+    h1,
+    h2,
+    h3 {
+        color: $brand-main-blue;
+    }
+}
+
 .background--gray {
     background: $brand-main-gray;
 }

_src/_assets/styles/bigchain/_variables.scss

@@ -154,7 +154,10 @@ $btn-secondary-bg:               $gray-light !default;
 $btn-blue-color:                 $brand-main-blue-light !default;
 $btn-blue-bg:                    $brand-main-blue !default;
 
-$btn-violet-color:               $brand-main-blue !default;
+$btn-blue-light-color:           $brand-main-blue !default;
+$btn-blue-light-bg:              $brand-main-blue-light !default;
+
+$btn-violet-color:               darken($brand-main-violet, 45%) !default;
 $btn-violet-bg:                  $brand-main-violet !default;
 
 $btn-info-color:                 #fff !default;

_src/_includes/form-services.html

@@ -76,10 +76,10 @@
         <label class="form-label" for="comment">Comments</label>
     </p>
     <p class="form-group text-dimmed mini">
-        Fields marked with an <span class="required">*</span> are required.
+        Fields marked with <span class="required">*</span> are required.
     </p>
     <p class="form-group">
-        <input class="btn btn-primary" type="submit" value="Send">
+        <input class="btn btn-blue-light" type="submit" value="Send">
     </p>
 
     <div class="alert alert-success animation-slide-in-from-bottom hide">

_src/_includes/sections/section-cta-services.html

@@ -1,4 +1,4 @@
-<section class="section section-cta section-cta--services background--violet">
+<section class="section section-cta section-cta--services background--blue--light">
     <div class="row">
         <header class="section-header">
 

_src/services.html

@@ -91,14 +91,14 @@ contact:
             <h2 class="hero__subtitle">{{ page.hero.description }}</h2>
 
             {% for cta in page.hero.cta %}
-                <a class="btn btn-violet hero__action" href="{{ cta.link }}" {% if cta.scroll %}data-scroll{% endif %}>{{ cta.name }}</a>
+                <a class="btn btn-blue-light hero__action" href="{{ cta.link }}" {% if cta.scroll %}data-scroll{% endif %}>{{ cta.name }}</a>
             {% endfor %}
         </hgroup>
     </div>
 
 </header>
 
-<section class="section section--servicesdetail background--violet">
+<section class="section section--servicesdetail background--blue--light">
     <div class="row row--wide">
 
         <div class="grid grid--full grid-small--third grid--gutters">