Tesitng a new backgroud design

public/styles/components/_footer.scss

@@ -9,12 +9,16 @@
  *    1.0.0 - 2018/05/16
  */
 .c-footer {
+  padding-top: 2em;
+  padding-bottom: 3em;
+  position: relative;
+  overflow: hidden;
   background: white;
-  padding: 0.75em 0;
 
   &__inner {
-    @extend %t-flexbox;
-    @include t-justify-content(space-between);
+    text-align: center;
+    position: relative;
+    z-index: 10;
   }
 
   &__copyright {
@@ -22,16 +26,13 @@
   }
 
   &__links {
-
+    padding-bottom: 1em;
   }
 
   &__link {
+   + #{&} {
     display: inline-block;
-
-    + #{&}::before {
-      display: inline-block;
-      padding: 0 0.25em;
-      content: " | ";
-    }
+    padding-left: 1em;
+   }
   }
 }

public/styles/index.scss

@@ -77,6 +77,7 @@
 @import './components/_image-section.scss';
 @import './components/_page.scss';
 @import './components/_section.scss';
+@import './components/_split-section.scss';
 @import './components/_video-section.scss';
 
 //Pages

public/styles/objects/_app.scss

@@ -13,6 +13,6 @@
   min-height: 100vh;
   width: 100%;
 
-  @include t-flexbox();
+  @extend %t-flexbox;
   @include t-flex-direction(column);
 }

public/styles/objects/_background.scss

@@ -16,6 +16,7 @@
   width: 100%;
   height: 100%;
   z-index: $s-z--background;
+  overflow: hidden;
 
   //Civil Twilight
   &--style-twilight {
@@ -37,9 +38,14 @@
   //Elements that fill
   &__grain {
     @include t-absolute-fill();
-  }
-
-  &__grain {
     background-image: url('./../images/grain.png');
   }
+
+  &__palm {
+    position: absolute;
+    width: 150%;
+    bottom: -10%;
+    left: -40%;
+    @include t-drop-shadow(2.5vw, 2.5vw, 0, rgba(0, 0, 0, 0.5));
+  }
 }

public/styles/objects/_navbar.scss

@@ -60,7 +60,7 @@ $o-navbar--link-thickness: 5px;
       height: 0px;
       left: 0;
       bottom: 0px;
-      @include t-translate-y(90%)
+      @include t-translate-y(100%)
       transition: height 0.2s $s-animation--ease-out;
 
       content: " ";

public/styles/tools/_box-shadow.scss

@@ -15,3 +15,11 @@
     @include t-prefix-property(box-shadow, #{$horizontal} #{$vertical} #{$blur} #{$spread} #{$color}, spec webkit moz);
   }
 }
+
+@mixin t-drop-shadow($horizontal, $vertical, $blur, $color, $inset:false) {
+  @if $inset == true {
+    @include t-prefix-property(filter, drop-shadow( #{$horizontal} #{$vertical} #{$blur} #{$color} ), spec webkit moz);
+  } @else {
+    @include t-prefix-property(filter, drop-shadow( #{$horizontal} #{$vertical} #{$blur} #{$color} ), spec webkit moz);
+  }
+}