App.vue

<template>
  <div id="app" class="min-vh-100 d-flex flex-column position-relative">
    <NavBar />
    <div class="h-100 flex-grow-1 main-content-container">
      <router-view id="main-content" />
    </div>
    <div class="wisps">
      <div class="mask"></div>
    </div>
    <Footer />
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import Footer from "@/components/Footer.vue";

export default {
  components: { NavBar, Footer }
};
</script>

<style lang="scss">
@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap-vue/src/index.scss";

html {
  // rubber-band overscroll color and determines the scrollbar color on chrome for mac
  background-color: $primary-bg-color;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: $text-color;
  background-color: #000000;
}

#app {
  background-color: $primary-bg-color;
  margin-left: auto;
  margin-right: auto;
  font-family: "Open Sans";
  font-style: normal;
  font-variant: normal;

  a {
    text-decoration: none;
  }

  button.btn {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Open Sans", sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    color: #000000;
    margin-left: 2rem;
    margin-right: 2rem;
  }

  h1 {
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: 0.2rem;
  }
  h2 {
    letter-spacing: 0.13rem;
  }
  h6 {
    letter-spacing: 0.07rem;
  }

  .main-content-container {
    z-index: 2;
  }

  .shadow {
    box-shadow: 0 2px 10px #000000 !important;
  }

  .text-light {
    color: $secondary-text-color !important;
  }

  .wisps {
    background-image: url(~@/assets/images/Background_WH_Texture.png);
    background-size: cover;
    background-size: 100% 770px;
    background-color: $primary-bg-color;
    background-repeat: no-repeat;
    background-position-y: 60px;

    position: absolute;
    width: 100%;
    top: 590px;
    height: 790px;
    left: 0;
    opacity: 0.3;
    z-index: 1;

    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: $gradient-alpha;
      background-image: linear-gradient(
        to bottom,
        $primary-bg-color 0%,
        $gradient-alpha 25%,
        $gradient-alpha 90%,
        $primary-bg-color 110%
      );
    }
  }

  @include media-breakpoint-only(lg) {
    .wisps {
      background-size: 100% 830px;
      height: 1000px;
    }
  }

  @include media-breakpoint-only(xs) {
    h1 {
      font-size: 3rem;
    }
    h6 {
      font-size: 0.75rem;
    }
  }
}
</style>