revise blue theme, better image config, logo config, mobile menu

18 files changed, 116 insertions, 171 deletions

diff --git a/assets/scss/_bootstrap-variables.scss b/assets/scss/_bootstrap-variables.scss
index ea15bb9..0344046 100755
--- a/assets/scss/_bootstrap-variables.scss
+++ b/assets/scss/_bootstrap-variables.scss
@@ -13,7 +13,7 @@ $container-max-widths: (
   xl: 1140px,
 );
 
-$grid-gutter-width: 20px;
+$grid-gutter-width: 30px;
 
 $spacer: 1rem;
 $spacers: ();
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 61aecd1..996fa1a 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -1,7 +1,8 @@
-$primary: #f88379;
-$secondary: #575766;
+$primary: #2e86f8;
+// $primary: #f88379;
+$secondary: #f88379;
 $white: #ffffff;
-$black: #141414;
+$black: #2f2f41;
 $steel: rgb(92, 90, 90);
 $ghost: #f4f5fb;
 
diff --git a/assets/scss/components/_call.scss b/assets/scss/components/_call.scss
index bb347d5..f6447dd 100644
--- a/assets/scss/components/_call.scss
+++ b/assets/scss/components/_call.scss
@@ -5,7 +5,6 @@
   border-radius: 4px;
   // box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
   width: 100%;
-  color: $secondary;
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -32,6 +31,9 @@
     font-size: 1.1rem;
     font-weight: bold;
   }
+  .call-phone {
+    margin-bottom: 5px;
+  }
   strong {
     font-weight: bold;
   }
diff --git a/assets/scss/components/_footer.scss b/assets/scss/components/_footer.scss
index 7ea17b2..55cb580 100644
--- a/assets/scss/components/_footer.scss
+++ b/assets/scss/components/_footer.scss
@@ -1,5 +1,5 @@
 .footer {
-  background: $secondary;
+  background: $black;
   padding-top: 20px;
   padding-bottom: 20px;
   .footer-inner {
@@ -30,14 +30,14 @@
     li {
       display: block;
       margin-right: 10px;
-      color: lighten($secondary, 50%);
+      color: lighten($black, 50%);
       font-size: 0.9rem;
       line-height: 1.8;
       &:last-of-type {
         margin-right: 0;
       }
       a {
-        color: lighten($secondary, 50%);
+        color: lighten($black, 50%);
         text-decoration: none;
         &:hover {
           text-decoration: underline;
@@ -45,7 +45,7 @@
       }
       &.copyright {
         font-weight: bold;
-        color: lighten($secondary, 50%);
+        color: lighten($black, 50%);
         display: none;
         @include media-breakpoint-up(md) {
           display: inline-block;
diff --git a/assets/scss/components/_hamburger.scss b/assets/scss/components/_hamburger.scss
index adad898..2400ddc 100644
--- a/assets/scss/components/_hamburger.scss
+++ b/assets/scss/components/_hamburger.scss
@@ -1,7 +1,7 @@
 .hamburger {
   padding: 10px 0 10px 10px;
   outline: none;
-  z-index: 10;
+  z-index: 30;
   cursor: pointer;
   @include media-breakpoint-up(md) {
     display: none;
diff --git a/assets/scss/components/_header.scss b/assets/scss/components/_header.scss
index 92610f2..e5fc410 100644
--- a/assets/scss/components/_header.scss
+++ b/assets/scss/components/_header.scss
@@ -4,14 +4,23 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  // box-shadow: 0 1px 15px rgba(128, 128, 129, 0.2);
-  z-index: 10;
-  position: relative;
-  height: 60px;
-  border-bottom: 1px solid $ghost;
+  padding: 10px 0 10px 0;
+  // box-shadow: 0 1px 15px rgba(50, 50, 93, 0.2);
   .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
+  &.header-absolute {
+    position: absolute;
+    z-index: 10;
+    width: 100%;
+  }
+}
+.lock-scroll {
+  .header {
+    &.header-absolute {
+      position: static;
+    }
+  }
 }
diff --git a/assets/scss/components/_intro-image.scss b/assets/scss/components/_intro-image.scss
new file mode 100644
index 0000000..01a763b
--- /dev/null
+++ b/assets/scss/components/_intro-image.scss
@@ -0,0 +1,35 @@
+.intro-image {
+  width: 100%;
+  height: auto;
+  margin-top: -40px;
+}
+.intro-image-absolute {
+  max-width: none;
+  width: 60%;
+  padding: 0;
+  margin-bottom: 30px;
+  @include media-breakpoint-up(sm) {
+  }
+  @include media-breakpoint-up(md) {
+    position: absolute;
+    bottom: -50px;
+    left: -50px;
+    width: 700px;
+  }
+  @include media-breakpoint-up(lg) {
+    bottom: -60px;
+    left: -60px;
+    width: 800px;
+  }
+  @include media-breakpoint-up(xl) {
+    bottom: -100px;
+    left: -70px;
+    width: 850px;
+  }
+}
+.intro-image-hide-mobile {
+  display: none;
+  @include media-breakpoint-up(md) {
+    display: block;
+  }
+}
diff --git a/assets/scss/components/_intro.scss b/assets/scss/components/_intro.scss
index 0b6a690..f60578f 100644
--- a/assets/scss/components/_intro.scss
+++ b/assets/scss/components/_intro.scss
@@ -6,17 +6,17 @@
   padding-bottom: 60px;
   overflow: hidden;
   @include media-breakpoint-up(md) {
-    padding-top: 160px;
-    padding-bottom: 100px;
-  }
-  @include media-breakpoint-up(lg) {
-    padding-top: 160px;
-    padding-bottom: 160px;
+    padding-top: 140px;
+    padding-bottom: 140px;
   }
   h1 {
-    color: $primary;
-    font-size: 48px;
+    color: $black;
+    font-size: 42px;
     line-height: 1.2;
+    @include media-breakpoint-up(md) {
+      width: 80%;
+      font-size: 48px;
+    }
     @include media-breakpoint-up(lg) {
       font-size: 50px;
     }
@@ -34,34 +34,10 @@
     font-size: 1.2rem;
     font-weight: light;
     line-height: 1.5;
-    color: $secondary;
-  }
-}
-.intro-image-flying {
-  max-width: none;
-  width: 40%;
-  margin-bottom: 20px;
-  // @include media-breakpoint-up(sm) {
-  //   width: 60%;
-  // }
-  @include media-breakpoint-up(md) {
-    margin-bottom: 0;
-    position: absolute;
-    bottom: 40px;
-    right: -140px;
-    width: 160%;
-  }
-  @include media-breakpoint-up(lg) {
-    bottom: -80px;
-    right: -120px;
-    width: 130%;
-  }
-  @include media-breakpoint-up(xl) {
-    bottom: -160px;
-    right: -100px;
-    width: 120%;
+    color: $black;
   }
 }
+
 .intro-small {
   padding-top: 100px;
   padding-bottom: 30px;
diff --git a/assets/scss/components/_logo.scss b/assets/scss/components/_logo.scss
index cef6d81..078f2b5 100644
--- a/assets/scss/components/_logo.scss
+++ b/assets/scss/components/_logo.scss
@@ -31,3 +31,14 @@
     height: 100%;
   }
 }
+
+.logo {
+  path {
+    #Hugo {
+      fill: '#141414';
+    }
+    #Serif {
+      fill: red;
+    }
+  }
+}
diff --git a/assets/scss/components/_main-menu-mobile.scss b/assets/scss/components/_main-menu-mobile.scss
index 4b9c593..9c654ab 100644
--- a/assets/scss/components/_main-menu-mobile.scss
+++ b/assets/scss/components/_main-menu-mobile.scss
@@ -1,56 +1,6 @@
-$color-main: $primary;
-$color-active: #ffffff;
-$color-link: #ffffff;
-
-$button-height: 27px;
-$button-width: 35px;
-.button_container {
-  position: fixed;
-  top: 5%;
-  right: 2%;
-  height: $button-height;
-  width: $button-width;
-  cursor: pointer;
-  z-index: 100;
-  transition: opacity 0.25s ease;
-  &:hover {
-    opacity: 0.7;
-  }
-  &.active {
-    .top {
-      transform: translateY(11px) translateX(0) rotate(45deg);
-      background: $color-active;
-    }
-    .middle {
-      opacity: 0;
-      background: $color-active;
-    }
-    .bottom {
-      transform: translateY(-11px) translateX(0) rotate(-45deg);
-      background: $color-active;
-    }
-  }
-  span {
-    background: $color-main;
-    border: none;
-    height: 5px;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    transition: all 0.35s ease;
-    cursor: pointer;
-    &:nth-of-type(2) {
-      top: 11px;
-    }
-    &:nth-of-type(3) {
-      top: 22px;
-    }
-  }
-}
 .main-menu-mobile {
   position: fixed;
-  background: $color-main;
+  background: $primary;
   top: 0;
   left: 0;
   width: 100%;
@@ -67,7 +17,7 @@ $button-width: 35px;
     opacity: 0.9;
     visibility: visible;
     height: 100%;
-    z-index: 10;
+    z-index: 20;
     li {
       animation: fadeInRight 0.5s ease forwards;
       animation-delay: 0.35s;
@@ -89,7 +39,7 @@ $button-width: 35px;
     }
   }
   ul {
-    font-size: 2rem;
+    font-size: 30px;
     font-family: $font-family-heading;
     text-align: center;
     list-style: none;
@@ -100,27 +50,15 @@ $button-width: 35px;
       display: block;
       position: relative;
       opacity: 0;
+      padding: 10px;
       a {
         display: block;
         position: relative;
-        color: $color-link;
+        color: #ffffff;
         text-decoration: none;
         overflow: hidden;
-        &:hover::after,
-        &:focus::after,
-        &:active::after {
-          width: 100%;
-        }
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 50%;
-          width: 0%;
-          transform: translateX(-50%);
-          height: 3px;
-          background: $color-link;
-          transition: 0.35s;
+        &:hover {
+          opacity: 0.8;
         }
       }
     }
diff --git a/assets/scss/components/_main-menu.scss b/assets/scss/components/_main-menu.scss
index ef2900f..0bbddd6 100644
--- a/assets/scss/components/_main-menu.scss
+++ b/assets/scss/components/_main-menu.scss
@@ -9,7 +9,7 @@
     justify-content: flex-start;
     > li {
       list-style: none;
-      font-size: 0.9rem;
+      font-size: 1rem;
       > a {
         padding: 10px 14px 10px 14px;
         display: inline-block;
diff --git a/assets/scss/components/_sub-footer.scss b/assets/scss/components/_sub-footer.scss
index a0a5398..0c118c6 100644
--- a/assets/scss/components/_sub-footer.scss
+++ b/assets/scss/components/_sub-footer.scss
@@ -1,5 +1,5 @@
 .sub-footer {
-  background: darken($secondary, 10%);
+  background: darken($black, 10%);
   padding-top: 20px;
   padding-bottom: 20px;
   @include media-breakpoint-up(md) {
@@ -20,7 +20,7 @@
       li {
         list-style: none;
         display: block;
-        color: lighten($secondary, 40%);
+        color: lighten($black, 40%);
         font-size: 0.9rem;
         line-height: 1.8;
         strong {
@@ -28,7 +28,7 @@
           color: #ffffff;
         }
         a {
-          color: lighten($secondary, 40%);
+          color: lighten($black, 40%);
           text-decoration: none;
           &:hover {
             text-decoration: underline;
diff --git a/assets/scss/components/_title.scss b/assets/scss/components/_title.scss
index e5e8193..94ae42a 100644
--- a/assets/scss/components/_title.scss
+++ b/assets/scss/components/_title.scss
@@ -1,5 +1,5 @@
 .title {
-  color: $primary;
+  color: $black;
   font-size: 48px;
   line-height: 1.2;
   @include media-breakpoint-up(lg) {
diff --git a/assets/scss/components/_type.scss b/assets/scss/components/_type.scss
index 5caeae9..e1bc9c9 100644
--- a/assets/scss/components/_type.scss
+++ b/assets/scss/components/_type.scss
@@ -5,15 +5,6 @@ img {
   max-width: 100%;
   height: auto;
 }
-ul,
-ol {
-  margin: 0;
-  padding: 0;
-  li {
-    padding: 0;
-    margin: 0;
-  }
-}
 p {
   line-height: 26px;
   color: $steel;
@@ -24,29 +15,23 @@ h1 {
   font-size: 20px;
   font-family: $font-family-heading;
   line-height: 1.2;
-  font-weight: 400;
-  color: $black;
   margin-bottom: 20px;
   @include media-breakpoint-up(md) {
-    font-size: 30px;
+    font-size: 32px;
     line-height: 1.2;
-    font-weight: 400;
   }
 }
 h2 {
-  font-size: 20px;
+  font-size: 22px;
   font-family: $font-family-heading;
   line-height: 1.4;
-  font-weight: 400;
-  color: $black;
   margin-bottom: 10px;
   @include media-breakpoint-up(md) {
-    font-size: 24px;
+    font-size: 26px;
     line-height: 1.4;
   }
 }
 h3 {
-  color: $primary;
   font-size: 16px;
   line-height: 1.4;
   @include media-breakpoint-up(md) {
@@ -54,12 +39,12 @@ h3 {
     line-height: 1.4;
   }
 }
-.display-1 {
-  font-size: 50px;
-  letter-spacing: 4.5px;
-  font-weight: $font-weight-light;
-  @include media-breakpoint-down(sm) {
-    font-size: 20px;
-    letter-spacing: 1.7px;
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+  li {
+    padding: 0;
+    margin: 0;
   }
 }
diff --git a/assets/scss/pages/services/_page-services-list.scss b/assets/scss/pages/services/_page-services-list.scss
index e69de29..33ca386 100644
--- a/assets/scss/pages/services/_page-services-list.scss
+++ b/assets/scss/pages/services/_page-services-list.scss
@@ -0,0 +1,2 @@
+.page-services-list {
+}
diff --git a/assets/scss/pages/services/_page-services-single.scss b/assets/scss/pages/services/_page-services-single.scss
index 55d117f..88b9449 100644
--- a/assets/scss/pages/services/_page-services-single.scss
+++ b/assets/scss/pages/services/_page-services-single.scss
@@ -1,9 +1,4 @@
 .page-services-single {
-  h1.title {
-    font-size: 3rem;
-    font-family: $font-family-heading;
-    color: $primary;
-  }
   .content {
     > p {
       &:first-of-type {
diff --git a/assets/scss/pages/services/_service-summary.scss b/assets/scss/pages/services/_service-summary.scss
index a04c16d..5540caa 100644
--- a/assets/scss/pages/services/_service-summary.scss
+++ b/assets/scss/pages/services/_service-summary.scss
@@ -1,18 +1,2 @@
 .service-summary {
-  display: flex;
-  align-items: flex-start;
-  .service-image {
-    flex: 0 0 100px;
-    margin-right: 10px;
-    img {
-      max-width: 100%;
-      height: auto;
-    }
-  }
-  .service-content {
-    flex: 1;
-    .service-title {
-      font-size: 26px;
-    }
-  }
 }
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 6ff2c80..65b7f0e 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -27,6 +27,7 @@
 @import 'components/title';
 @import 'components/content';
 @import 'components/intro';
+@import 'components/intro-image';
 @import 'components/strip';
 @import 'components/whitebox';
 @import 'components/feature';
@@ -40,12 +41,17 @@
 @import 'pages/services/service-summary';
 
 body {
-  font-size: 17px;
-  line-height: 1.2;
+  font-size: 16px;
+  line-height: 1.1;
   font-family: $font-family-base;
+  @include media-breakpoint-up(md) {
+    font-size: 17px;
+    line-height: 1.2;
+  }
 }
 
 // Display breakpoints for DEV
+{{ if .Site.IsServer }}
 body:after {
   color: #000000;
   font-size: 12px;
@@ -65,3 +71,4 @@ body:after {
     }
   }
 }
+{{ end }}
\ No newline at end of file