more color shuffling

_src/_assets/styles/_page-services.scss

@@ -38,8 +38,12 @@
         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) {
@@ -59,15 +63,25 @@
 
 .section--servicesdetail {
     .feature__icon {
-        stroke: $brand-main-gray;
-        color: $brand-main-violet;
+        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-blue-light, 10%);
+        padding-top: $spacer * 3;
+        border-top: 2px solid rgba($brand-main-gray, .1);
     }
 }
 

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

@@ -35,15 +35,6 @@
     h3 {
         color: $brand-main-blue;
     }
-
-    .feature__title {
-        color: $brand-main-blue;
-
-        // the bottom line
-        &:after {
-            background: darken($brand-main-blue-light, 10%);
-        }
-    }
 }
 
 .background--gray {

_src/_includes/form-services.html

@@ -79,7 +79,7 @@
         Fields marked with <span class="required">*</span> are required.
     </p>
     <p class="form-group">
-        <input class="btn btn-violet" 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

@@ -10,7 +10,7 @@
             <h1 class="section-title">Hands-on consulting and production support by blockchain experts.</h1>
         </header>
 
-        <a class="btn btn-violet" href="{% link services.html %}">
+        <a class="btn btn-blue" href="{% link services.html %}">
             Explore Services
         </a>
     </div>

_src/services.html

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