homepage design changes, illustration position changes

9 files changed, 117 insertions, 109 deletions

diff --git a/assets/scss/_bootstrap-variables.scss b/assets/scss/_bootstrap-variables.scss
index 848f3c6..8282159 100755
--- a/assets/scss/_bootstrap-variables.scss
+++ b/assets/scss/_bootstrap-variables.scss
@@ -3,7 +3,7 @@ $grid-breakpoints: (
   sm: 576px,
   md: 768px,
   lg: 992px,
-  xl: 1200px,
+  xl: 1300px,
 );
 
 $container-max-widths: (
diff --git a/assets/scss/components/_call.scss b/assets/scss/components/_call.scss
new file mode 100644
index 0000000..b74fc37
--- /dev/null
+++ b/assets/scss/components/_call.scss
@@ -0,0 +1,53 @@
+.call {
+  position: relative;
+  overflow: hidden;
+  background-color: #ffffff;
+  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: flex-start;
+  flex-direction: column;
+  @include media-breakpoint-up(sm) {
+    align-items: center;
+    flex-direction: row;
+    width: 90%;
+  }
+  @include media-breakpoint-up(md) {
+    width: 70%;
+  }
+  @include media-breakpoint-up(lg) {
+    width: 50%;
+  }
+  .call-box-top {
+    flex: 1 0 auto;
+    padding: 20px;
+    @include media-breakpoint-up(md) {
+      padding: 20px;
+    }
+  }
+  .call-box-bottom {
+    flex: 0 0 auto;
+    padding: 0 20px 20px 20px;
+    @include media-breakpoint-up(sm) {
+      padding: 20px;
+    }
+  }
+  .call-name {
+    font-size: 1.1rem;
+    font-weight: bold;
+  }
+  svg {
+    fill: lighten($secondary, 40%);
+    position: absolute;
+    bottom: -9px;
+    right: 0;
+    width: 100px;
+    height: 100px;
+    @include media-breakpoint-up(sm) {
+      width: 120px;
+      height: 120px;
+    }
+  }
+}
diff --git a/assets/scss/components/_feature.scss b/assets/scss/components/_feature.scss
index 7f58f52..3a1a6a6 100644
--- a/assets/scss/components/_feature.scss
+++ b/assets/scss/components/_feature.scss
@@ -21,7 +21,6 @@
   }
   .feature-title {
     font-size: 1.5rem;
-    font-weight: 300;
     line-height: 1.2;
   }
   .feature-content {
diff --git a/assets/scss/components/_intro.scss b/assets/scss/components/_intro.scss
index 43ade4f..845b19e 100644
--- a/assets/scss/components/_intro.scss
+++ b/assets/scss/components/_intro.scss
@@ -49,6 +49,9 @@
     @include media-breakpoint-up(lg) {
       width: 55%;
     }
+    @include media-breakpoint-up(xl) {
+      width: 45%;
+    }
   }
 }
 .intro-small {
diff --git a/assets/scss/components/_strip.scss b/assets/scss/components/_strip.scss
index 9fa30f2..2616cae 100644
--- a/assets/scss/components/_strip.scss
+++ b/assets/scss/components/_strip.scss
@@ -1,9 +1,12 @@
 .strip {
-  margin-top: 200px;
   background: white;
+  background-repeat: no-repeat;
 }
 .strip-white {
-  background: white;
+  background-color: white;
+}
+.strip-grey {
+  background-color: #f4f5fb;
 }
 .strip-diagonal {
   transform: skewY(5deg);
@@ -13,3 +16,41 @@
     transform: skewY(-5deg);
   }
 }
+.strip-primary-gradient {
+  background-image: linear-gradient(to right, $primary, $secondary);
+}
+.strip-primary-gradient-top-bottom {
+  background-image: linear-gradient(to bottom, $primary, $secondary);
+}
+.strip-primary {
+  background-color: $primary;
+}
+.strip-secondary {
+  background-color: $secondary;
+}
+
+.strip-diagonal-right {
+  margin-top: -100px;
+  transform: skewY(-5deg);
+  padding-bottom: 100px;
+  > div {
+    transform: skewY(5deg);
+  }
+}
+
+.strip-diagonal-left {
+  margin-top: -100px;
+  transform: skewY(5deg);
+  padding-bottom: 100px;
+  > div {
+    transform: skewY(-5deg);
+  }
+}
+
+.strip-bg-contain {
+  background-size: contain;
+}
+
+.strip-bg-cover {
+  background-size: cover;
+}
diff --git a/assets/scss/pages/_home.scss b/assets/scss/pages/_home.scss
index c01e87e..2f8e3d0 100644
--- a/assets/scss/pages/_home.scss
+++ b/assets/scss/pages/_home.scss
@@ -12,109 +12,11 @@
     background-position: 100% -50px;
   }
   @include media-breakpoint-up(lg) {
-    background-size: 60%;
-    background-position: 100% -70px;
-  }
-  .call {
-    position: relative;
-    overflow: hidden;
-    background-color: #ffffff;
-    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: flex-start;
-    flex-direction: column;
-    @include media-breakpoint-up(sm) {
-      align-items: center;
-      flex-direction: row;
-      width: 90%;
-    }
-    @include media-breakpoint-up(md) {
-      width: 70%;
-    }
-    @include media-breakpoint-up(lg) {
-      width: 50%;
-    }
-    .call-box-top {
-      flex: 1 0 auto;
-      padding: 20px;
-      @include media-breakpoint-up(md) {
-        padding: 20px;
-      }
-    }
-    .call-box-bottom {
-      flex: 0 0 auto;
-      padding: 0 20px 20px 20px;
-      @include media-breakpoint-up(sm) {
-        padding: 20px;
-      }
-    }
-    .call-name {
-      font-size: 1.1rem;
-      font-weight: bold;
-    }
-    svg {
-      //       fill: lighten($primary, 30%);
-      fill: lighten($secondary, 40%);
-      position: absolute;
-      bottom: -9px;
-      right: 0;
-      width: 100px;
-      height: 100px;
-      @include media-breakpoint-up(sm) {
-        width: 120px;
-        height: 120px;
-      }
-    } // .call-box-bottom {
-    //   padding: 10px 20px;
-    //   border-bottom: 1px solid #CCC;
-    // }
+    background-size: 67%;
+    background-position: 100% -50px;
   }
-  .certified {
-    background-image: url('/images/undraw_experts3_3njd.svg');
-    background-repeat: no-repeat;
-    background-size: 120%;
-    background-position: -100px 0;
-    overflow: visible;
-    position: relative;
-    display: inherit;
-    padding-top: 220px;
-    @include media-breakpoint-up(sm) {
-      background-size: 90%;
-      padding-top: 250px;
-      background-position: -110px 30px;
-    }
-    @include media-breakpoint-up(md) {
-    }
-    @include media-breakpoint-up(lg) {
-      padding-top: 280px;
-      background-size: 85%;
-      background-position: -170px 0;
-    }
-    h1 {
-      text-align: right;
-      float: right;
-      color: $primary;
-      margin-top: -30%;
-      color: $primary;
-      font-size: 2.4rem;
-      line-height: 1.2;
-      font-family: $font-family-heading;
-      margin-bottom: 30px;
-      @include media-breakpoint-up(sm) {
-        width: 70%;
-      }
-      @include media-breakpoint-up(md) {
-        font-size: 3rem;
-      }
-      @include media-breakpoint-up(lg) {
-        margin-top: -20%;
-        width: 70%;
-      }
-    }
+  @include media-breakpoint-up(xl) {
+    background-size: 58%;
+    background-position: 100% -90px;
   }
 }
diff --git a/assets/scss/pages/services/_page-services-list.scss b/assets/scss/pages/services/_page-services-list.scss
index 1a9a129..a4bba4a 100644
--- a/assets/scss/pages/services/_page-services-list.scss
+++ b/assets/scss/pages/services/_page-services-list.scss
@@ -15,4 +15,8 @@
     background-size: 57%;
     background-position: 90% -110px;
   }
+  @include media-breakpoint-up(xl) {
+    background-size: 54%;
+    background-position: 80% -120px;
+  }
 }
diff --git a/assets/scss/pages/team/_page-team-list.scss b/assets/scss/pages/team/_page-team-list.scss
index 41897ff..d988bb7 100644
--- a/assets/scss/pages/team/_page-team-list.scss
+++ b/assets/scss/pages/team/_page-team-list.scss
@@ -12,7 +12,11 @@
     background-position: 199px -80px;
   }
   @include media-breakpoint-up(lg) {
-    background-size: 60%;
+    background-size: 70%;
     background-position: 100% -110px;
   }
+  @include media-breakpoint-up(xl) {
+    background-size: 55%;
+    background-position: 90% -120px;
+  }
 }
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index d5c756f..f2e326c 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -53,6 +53,7 @@
 @import 'components/main-menu-mobile';
 @import 'components/hamburger';
 @import 'components/buttons';
+@import 'components/call';
 @import 'components/title';
 @import 'components/content';
 @import 'components/intro';
@@ -69,6 +70,7 @@
 @import 'pages/services/page-services-list';
 @import 'pages/services/page-services-single';
 @import 'pages/services/service-summary';
+
 body {
   font-size: 1rem;
   font-family: $font-family-base;
@@ -94,7 +96,7 @@ body {
 //   border: solid 1px #000000;
 //   @each $name, $value in $grid-breakpoints {
 //     @include media-breakpoint-up($name) {
-//       content: "#{$name} - min-width: #{$value}";
+//       content: '#{$name} - min-width: #{$value}';
 //     }
 //   }
 // }