/ Basic nuxt setup (some areas still broken)

full-skies-nuxt/assets/scss/_global.scss

@@ -0,0 +1,167 @@
+@import 'libs/normalize';
+
+@import 'fonts';
+@import 'animations';
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100%;
+  font-family: $body-font-family;
+  font-size: $font-size-base;
+  line-height: 1.2;
+  color: $white;
+  background: $black;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  font-family: $heading-font-family;
+  font-weight: $fw-regular;
+}
+h1 { font-size: 50px; }
+h2 { font-size: 25px; }
+h3 { font-size: 22px; }
+h4 { font-size: 18px; }
+
+.heading {
+  &-1 {
+    margin-bottom: 20px;
+    font-size: 50px;
+    font-weight: $fw-semibold;
+  }
+  &-2 {
+    margin-bottom: 20px;
+    font-size: 25px;
+    font-weight: $fw-semibold;
+  }
+  &-3 {
+    margin-bottom: 0;
+    font-size: 20px;
+    font-weight: $fw-semibold;
+  }
+}
+
+.txt {
+  &-capitalize {
+    text-transform: capitalize;
+  }
+}
+
+ul {
+  &.no-style {
+    margin: 0;
+    padding-left: 0;
+    list-style-type: none;
+  }
+}
+
+a {
+  &.no-style {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+button {
+  &.no-style {
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+hr {
+  border-color: rgba($white, .2);
+}
+
+.fs-icon {
+  width: 50px;
+  height: 50px;
+  &.icon-sm {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.btn {
+  display: inline-block;
+  padding: 13px 33px;
+  vertical-align: middle;
+  font-size: 13px;
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  background: none;
+  border: none;
+  border-radius: 30px;
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+
+  & ~ & {
+    margin-left: 10px;
+  }
+
+  &-primary {
+    color: $white;
+    background-color: $primary;
+    transition: background-color .3s ease-out;
+    &:hover {
+      background-color: $primary-light;
+    }
+    &:focus, &.active {
+      background-color: $primary-light;
+      transition: box-shadow .2s ease-in-out;
+      box-shadow: 0 0 10px rgba($white, 50%);
+    }
+  }
+
+  &-icon {
+    position: relative;
+    padding-right: 53px;
+    .fs-icon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 20px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+.bg-image {
+  position: relative;
+  &:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-size: cover;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    z-index: -1;
+    opacity: 33%;
+    pointer-events: none;
+  }
+  &.bg-fade-in {
+    &:after {
+      background-size: 120vw;
+      opacity: 0;
+      animation: fadeInBg 2s ease-out 0s 1 forwards,
+      paneBgAround 35s ease-in-out 0s infinite forwards;
+    }
+  }
+}