tweak Services color scheme

_src/_assets/styles/_page-services.scss

@@ -35,6 +35,7 @@
     .logo--services {
         display: inline-block;
         opacity: .75;
+        fill: $brand-main-blue-light;
     }
 
     .hero__subtitle {
@@ -58,15 +59,15 @@
 
 .section--servicesdetail {
     .feature__icon {
-        stroke: darken($brand-main-violet, 30%);
-        color: $brand-main-green;
+        stroke: $brand-main-gray;
+        color: $brand-main-violet;
     }
 
     .actions {
         text-align: center;
         margin-top: $spacer * 2;
         padding-top: $spacer * 2;
-        border-top: 1px solid darken($brand-main-violet, 5%);
+        border-top: 1px solid darken($brand-main-blue-light, 10%);
     }
 }
 

_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,27 @@
     }
 }
 
+.background--blue--light {
+    background: $brand-main-blue-light;
+
+    .section-title,
+    p,
+    h1,
+    h2,
+    h3 {
+        color: $brand-main-blue;
+    }
+
+    .feature__title {
+        color: $brand-main-blue;
+
+        // the bottom line
+        &:after {
+            background: darken($brand-main-blue-light, 10%);
+        }
+    }
+}
+
 .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-violet" 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">
 
@@ -10,7 +10,7 @@
             <h1 class="section-title">Hands-on consulting and production support by blockchain experts.</h1>
         </header>
 
-        <a class="btn btn-blue" href="{% link services.html %}">
+        <a class="btn btn-violet" href="{% link services.html %}">
             Explore Services
         </a>
     </div>

_src/services.html

@@ -98,7 +98,7 @@ contact:
 
 </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">
@@ -118,7 +118,7 @@ contact:
         </div>
 
         <div class="actions">
-            <a class="btn btn-blue" data-scroll href="#contact">Get in touch</a>
+            <a class="btn btn-violet" data-scroll href="#contact">Get in touch</a>
         </div>
 
     </div>