improve mobile design, clean up scss

18 files changed, 109 insertions, 111 deletions

diff --git a/assets/scss/_bootstrap-variables.scss b/assets/scss/_bootstrap-variables.scss
index d6d5b87..848f3c6 100755
--- a/assets/scss/_bootstrap-variables.scss
+++ b/assets/scss/_bootstrap-variables.scss
@@ -27,10 +27,8 @@ $link-hover-color: lighten($primary, 20%);
 $link-hover-decoration: underline;
 
 // Fonts
-$font-family-base: 'Open Sans', 'Helvetica Neue', Arial, sans-serif,
-  -apple-system;
-$font-family-heading: 'Lora', 'Helvetica Neue', Arial, sans-serif, -apple-system;
-$font-size-base: 1rem; // Assumes the browser default, typically `16px`
+$font-family-base: 'Open Sans', Arial, sans-serif, -apple-system;
+$font-family-heading: 'Lora', Arial, sans-serif, -apple-system;
 $font-weight-thin: 200;
 $font-weight-light: 300;
 $font-weight-normal: 400;
diff --git a/assets/scss/components/_content.scss b/assets/scss/components/_content.scss
index 9fa439e..f5207b1 100644
--- a/assets/scss/components/_content.scss
+++ b/assets/scss/components/_content.scss
@@ -1,4 +1,3 @@
-// Type Styling for body content
 .content {
   ul,
   ol {
diff --git a/assets/scss/components/_footer.scss b/assets/scss/components/_footer.scss
index 8da99cc..0f7c041 100644
--- a/assets/scss/components/_footer.scss
+++ b/assets/scss/components/_footer.scss
@@ -32,12 +32,14 @@
     li {
       display: block;
       margin-right: 10px;
-      color: lighten($secondary, 60%);
+      color: lighten($secondary, 50%);
+      font-size: 0.9rem;
+      line-height: 1.8;
       &:last-of-type {
         margin-right: 0;
       }
       a {
-        color: lighten($secondary, 60%);
+        color: lighten($secondary, 50%);
         text-decoration: none;
         &:hover {
           text-decoration: underline;
@@ -45,7 +47,11 @@
       }
       &.copyright {
         font-weight: bold;
-        color: #ffffff;
+        color: lighten($secondary, 50%);
+        display: none;
+        @include media-breakpoint-up(md) {
+          display: inline-block;
+        }
       }
     }
     @include media-breakpoint-up(sm) {
diff --git a/assets/scss/components/_hamburger.scss b/assets/scss/components/_hamburger.scss
index b34aee4..adad898 100644
--- a/assets/scss/components/_hamburger.scss
+++ b/assets/scss/components/_hamburger.scss
@@ -1,10 +1,8 @@
 .hamburger {
-  padding: 0;
-  padding-top: 10px;
+  padding: 10px 0 10px 10px;
   outline: none;
   z-index: 10;
   cursor: pointer;
-  height: 40px;
   @include media-breakpoint-up(md) {
     display: none;
   }
diff --git a/assets/scss/components/_header.scss b/assets/scss/components/_header.scss
index 362732e..c504215 100644
--- a/assets/scss/components/_header.scss
+++ b/assets/scss/components/_header.scss
@@ -1,5 +1,4 @@
 .header {
-  height: 50px;
   color: $primary;
   background-color: #ffffff;
   display: flex;
@@ -11,11 +10,4 @@
     justify-content: space-between;
     align-items: center;
   }
-  .header-social {
-    height: inherit;
-    display: none;
-    @include media-breakpoint-up(lg) {
-      display: block;
-    }
-  }
 }
diff --git a/assets/scss/components/_intro.scss b/assets/scss/components/_intro.scss
index ba47778..43ade4f 100644
--- a/assets/scss/components/_intro.scss
+++ b/assets/scss/components/_intro.scss
@@ -36,9 +36,9 @@
   }
   p {
     width: 80%;
-    font-size: 1.1rem;
-    font-weight: lighter;
-    line-height: 1.4;
+    font-size: 1.2rem;
+    font-weight: light;
+    line-height: 1.5;
     color: $secondary;
     @include media-breakpoint-up(sm) {
       width: 70%;
diff --git a/assets/scss/components/_logo.scss b/assets/scss/components/_logo.scss
index 5dc282a..cef6d81 100644
--- a/assets/scss/components/_logo.scss
+++ b/assets/scss/components/_logo.scss
@@ -16,7 +16,8 @@
 }
 .logo-mobile {
   display: block;
-  width: 30px;
+  width: 40px;
+  padding: 10px 0 10px 0;
   @include media-breakpoint-up(sm) {
     display: none;
   }
diff --git a/assets/scss/components/_main-menu-mobile.scss b/assets/scss/components/_main-menu-mobile.scss
index 6e2f955..4b9c593 100644
--- a/assets/scss/components/_main-menu-mobile.scss
+++ b/assets/scss/components/_main-menu-mobile.scss
@@ -1,10 +1,9 @@
 $color-main: $primary;
-$color-active: #fff;
-$color-link: #fff;
+$color-active: #ffffff;
+$color-link: #ffffff;
 
 $button-height: 27px;
 $button-width: 35px;
-
 .button_container {
   position: fixed;
   top: 5%;
@@ -14,11 +13,9 @@ $button-width: 35px;
   cursor: pointer;
   z-index: 100;
   transition: opacity 0.25s ease;
-
   &:hover {
     opacity: 0.7;
   }
-
   &.active {
     .top {
       transform: translateY(11px) translateX(0) rotate(45deg);
@@ -28,13 +25,11 @@ $button-width: 35px;
       opacity: 0;
       background: $color-active;
     }
-
     .bottom {
       transform: translateY(-11px) translateX(0) rotate(-45deg);
       background: $color-active;
     }
   }
-
   span {
     background: $color-main;
     border: none;
@@ -45,17 +40,14 @@ $button-width: 35px;
     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;
@@ -114,13 +106,12 @@ $button-width: 35px;
         color: $color-link;
         text-decoration: none;
         overflow: hidden;
-        &:hover:after,
-        &:focus:after,
-        &:active:after {
+        &:hover::after,
+        &:focus::after,
+        &:active::after {
           width: 100%;
         }
-
-        &:after {
+        &::after {
           content: '';
           position: absolute;
           bottom: 0;
@@ -135,7 +126,6 @@ $button-width: 35px;
     }
   }
 }
-
 @keyframes fadeInRight {
   0% {
     opacity: 0;
@@ -146,7 +136,6 @@ $button-width: 35px;
     left: 0;
   }
 }
-
 .lock-scroll {
   overflow: hidden;
 }
diff --git a/assets/scss/components/_main-menu.scss b/assets/scss/components/_main-menu.scss
index 6a7d81f..85fd626 100644
--- a/assets/scss/components/_main-menu.scss
+++ b/assets/scss/components/_main-menu.scss
@@ -1,68 +1,41 @@
 .main-menu {
-  height: inherit;
   display: none;
   @include media-breakpoint-up(md) {
     display: block;
   }
   > ul {
-    height: inherit;
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    list-style: none;
-    margin: 0;
-    padding: 0;
     > li {
-      height: inherit;
-      margin: 0;
-      padding: 0;
       list-style: none;
-      &:last-of-type {
-        margin: 0;
-      }
+      font-size: 0.9rem;
       > a {
-        height: inherit;
+        padding: 10px 14px 10px 14px;
         display: inline-block;
-        padding: 0;
-        font-size: 0.9rem;
-        font-weight: 400;
+        font-weight: regular;
         text-transform: uppercase;
-        color: inherit;
-        padding: 10px 14px 10px 14px;
         text-decoration: none;
+        color: $primary;
         &:hover {
           background: $primary;
-          color: #fff;
+          color: #ffffff;
           text-decoration: none;
         }
       }
-    }
-    > li.active {
-      > a {
-        background: $primary;
-        text-decoration: none;
-        color: #fff;
-        &:hover {
-          text-decoration: none;
+      &.active {
+        > a {
           background: $primary;
-          transition: all 225ms ease-in 0s;
-          color: #fff;
-        }
-        span {
-          display: block;
+          text-decoration: none;
+          color: #ffffff;
+          &:hover {
+            text-decoration: none;
+            background: $primary;
+            transition: all 225ms ease-in 0s;
+            color: #ffffff;
+          }
         }
       }
-      ul.sub-menu.hidden {
-        display: flex;
-        opacity: 0;
-        transition: all 225ms ease-in 0s;
-        z-index: 1;
-      }
-      ul.sub-menu {
-        display: flex;
-        opacity: 0.8;
-        transition: all 225ms ease-in 0s;
-      }
     }
   }
 }
diff --git a/assets/scss/components/_page.scss b/assets/scss/components/_page.scss
index c0f21f3..9007af2 100644
--- a/assets/scss/components/_page.scss
+++ b/assets/scss/components/_page.scss
@@ -2,7 +2,6 @@
   display: flex;
   min-height: 100vh;
   flex-direction: column;
-
   .wrapper {
     flex: 1;
   }
diff --git a/assets/scss/components/_reset.scss b/assets/scss/components/_reset.scss
new file mode 100644
index 0000000..e0e95b4
--- /dev/null
+++ b/assets/scss/components/_reset.scss
@@ -0,0 +1,5 @@
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+}
diff --git a/assets/scss/components/_sub-footer.scss b/assets/scss/components/_sub-footer.scss
index db94ab7..a0a5398 100644
--- a/assets/scss/components/_sub-footer.scss
+++ b/assets/scss/components/_sub-footer.scss
@@ -1,7 +1,11 @@
 .sub-footer {
   background: darken($secondary, 10%);
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  @include media-breakpoint-up(md) {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
   .sub-footer-inner {
     display: flex;
     flex-direction: column;
@@ -16,9 +20,15 @@
       li {
         list-style: none;
         display: block;
-        color: #ffffff;
-        a {
+        color: lighten($secondary, 40%);
+        font-size: 0.9rem;
+        line-height: 1.8;
+        strong {
+          font-weight: bold;
           color: #ffffff;
+        }
+        a {
+          color: lighten($secondary, 40%);
           text-decoration: none;
           &:hover {
             text-decoration: underline;
@@ -27,10 +37,15 @@
         span {
           display: inline-block;
           height: 40px;
-          padding: 10px 0px 10px 8px;
+          padding: 10px 0 10px 8px;
           font-weight: bold;
           color: #ffffff;
         }
+        &.zerostatic {
+          a {
+            color: #ffffff;
+          }
+        }
       }
       @include media-breakpoint-up(sm) {
         li {
diff --git a/assets/scss/components/_type.scss b/assets/scss/components/_type.scss
index b068fa7..4b07509 100644
--- a/assets/scss/components/_type.scss
+++ b/assets/scss/components/_type.scss
@@ -1,6 +1,5 @@
 ul,
 ol {
-  color: rgb(78, 78, 78);
   margin: 0;
   padding: 0;
   li {
diff --git a/assets/scss/libraries/hamburgers/hamburgers.scss b/assets/scss/libraries/hamburgers/hamburgers.scss
index 977f0a3..cdbfdac 100755
--- a/assets/scss/libraries/hamburgers/hamburgers.scss
+++ b/assets/scss/libraries/hamburgers/hamburgers.scss
@@ -9,22 +9,22 @@
 
 // Settings
 // ==================================================
-$hamburger-padding-x           : 15px !default;
-$hamburger-padding-y           : 15px !default;
-$hamburger-layer-width         : 32px !default;
-$hamburger-layer-height        : 3px !default;
-$hamburger-layer-spacing       : 5px !default;
-$hamburger-layer-color         : $primary !default;
-$hamburger-layer-border-radius : 3px !default;
-$hamburger-hover-opacity       : 0.7 !default;
-$hamburger-active-layer-color  : #FFF !default;
+$hamburger-padding-x: 15px !default;
+$hamburger-padding-y: 15px !default;
+$hamburger-layer-width: 36px;
+$hamburger-layer-height: 3px !default;
+$hamburger-layer-spacing: 7px;
+$hamburger-layer-color: $primary !default;
+$hamburger-layer-border-radius: 3px !default;
+$hamburger-hover-opacity: 0.7 !default;
+$hamburger-active-layer-color: #fff !default;
 $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
 
 // To use CSS filters as the hover effect instead of opacity,
 // set $hamburger-hover-use-filter as true and
 // change the value of $hamburger-hover-filter accordingly.
-$hamburger-hover-use-filter   : false !default;
-$hamburger-hover-filter       : opacity(50%) !default;
+$hamburger-hover-use-filter: false !default;
+$hamburger-hover-filter: opacity(50%) !default;
 $hamburger-active-hover-filter: $hamburger-hover-filter !default;
 
 // Types (Remove or comment out what you don’t need)
@@ -65,7 +65,7 @@ $hamburger-types: (
 
 // Base Hamburger (We need this)
 // ==================================================
-@import "base";
+@import 'base';
 
 // Hamburger types
 // ==================================================
@@ -89,7 +89,7 @@ $hamburger-types: (
 // @import "types/emphatic";
 // @import "types/emphatic-r";
 // @import "types/minus";
-@import "types/slider";
+@import 'types/slider';
 // @import "types/slider-r";
 // @import "types/spin";
 // @import "types/spin-r";
diff --git a/assets/scss/pages/_home.scss b/assets/scss/pages/_home.scss
index eebd8be..c01e87e 100644
--- a/assets/scss/pages/_home.scss
+++ b/assets/scss/pages/_home.scss
@@ -20,7 +20,8 @@
     overflow: hidden;
     background-color: #ffffff;
     border-radius: 4px;
-    box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1),
+    box-shadow:
+      0 15px 35px rgba(50, 50, 93, 0.1),
       0 5px 15px rgba(0, 0, 0, 0.07);
     width: 100%;
     color: $secondary;
@@ -92,7 +93,7 @@
     @include media-breakpoint-up(lg) {
       padding-top: 280px;
       background-size: 85%;
-      background-position: -170px 0px;
+      background-position: -170px 0;
     }
     h1 {
       text-align: right;
diff --git a/assets/scss/pages/services/_page-services-single.scss b/assets/scss/pages/services/_page-services-single.scss
index 5e47e4a..55d117f 100644
--- a/assets/scss/pages/services/_page-services-single.scss
+++ b/assets/scss/pages/services/_page-services-single.scss
@@ -1,2 +1,18 @@
 .page-services-single {
+  h1.title {
+    font-size: 3rem;
+    font-family: $font-family-heading;
+    color: $primary;
+  }
+  .content {
+    > p {
+      &:first-of-type {
+        font-size: 1.6rem;
+        line-height: 1.4;
+        margin-bottom: 40px;
+        font-weight: regular;
+        color: rgb(104, 104, 104);
+      }
+    }
+  }
 }
diff --git a/assets/scss/pages/testimonials/_testimonials-summary.scss b/assets/scss/pages/testimonials/_testimonials-summary.scss
index d6b7cc1..25f7b8a 100644
--- a/assets/scss/pages/testimonials/_testimonials-summary.scss
+++ b/assets/scss/pages/testimonials/_testimonials-summary.scss
@@ -34,18 +34,18 @@
       display: block;
       border-width: 2px 0 0 0;
       border-style: solid;
-      border-color: #eee;
+      border-color: #eeeeee;
       padding: 1.5em 0 0.5em;
       margin: 1.5em 0;
       position: relative;
     }
-    blockquote:before {
+    blockquote::before {
       content: '\201C';
       position: absolute;
-      top: 0em;
+      top: 0;
       left: 50%;
       transform: translate(-50%, -50%);
-      background: #fff;
+      background: #ffffff;
       width: 3rem;
       height: 2rem;
       font: 6em/1.08em 'PT Sans', sans-serif;
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 60c3de1..d5c756f 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -1,5 +1,5 @@
 // Font
-@import url('https://fonts.googleapis.com/css?family=Lora:400|Open+Sans:400');
+@import url('https://fonts.googleapis.com/css?family=Lora:400,700|Open+Sans:300,400,700');
 
 // Bootstrap
 @import 'bootstrap/functions';
@@ -43,6 +43,7 @@
 @import 'libraries/hamburgers/hamburgers';
 
 // Components
+@import 'components/reset';
 @import 'components/page';
 @import 'components/header';
 @import 'components/footer';
@@ -50,7 +51,6 @@
 @import 'components/logo';
 @import 'components/main-menu';
 @import 'components/main-menu-mobile';
-@import 'components/social';
 @import 'components/hamburger';
 @import 'components/buttons';
 @import 'components/title';
@@ -68,8 +68,15 @@
 @import 'pages/testimonials/testimonials-summary';
 @import 'pages/services/page-services-list';
 @import 'pages/services/page-services-single';
-@import 'pages/services/service-single';
 @import 'pages/services/service-summary';
+body {
+  font-size: 1rem;
+  font-family: $font-family-base;
+  // -webkit-font-smoothing: antialiased;
+  // -moz-osx-font-smoothing: grayscale;
+  // -webkit-text-size-adjust: 100%;
+  // -ms-text-size-adjust: 100%;
+}
 
 // Display breakpoints for DEV
 // body:after {