Moved label-div and button styling to global stylesheet. New primary color in variables.

src/styles/global.scss

@@ -1,4 +1,5 @@
 @import "./media-queries.scss";
+@import "./variables.scss";
 
 @font-face {
   font-family: "knowit";
@@ -41,3 +42,102 @@ body {
     font-size: 1.15rem;
   }
 }
+
+.label-div {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  label {
+    margin-bottom: 0.25rem;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  input {
+    margin: 0;
+    margin-bottom: auto;
+    height: 2rem;
+    padding: 0.5rem;
+    min-width: 0;
+    width: 98%;
+    padding: 1%;
+  }
+}
+
+.button-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+
+  > *:not(:last-child) {
+    margin-right: 2rem;
+  }
+
+  @include mobile &:not(.row) {
+    flex-direction: column;
+    align-items: center;
+
+    > *:not(:last-child) {
+      margin-right: unset;
+      margin-bottom: .75rem;
+    }
+  }
+}
+
+input, textarea {
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+  font-size: 1.1rem;
+  border: 1px solid rgba(#333333, 0.3);
+}
+
+.vin-button {
+  font-family: Arial;
+  $color: #b7debd;
+  position: relative;
+  display: inline-block;
+  background: $color;
+  color: #333;
+  padding: 10px 30px;
+  margin: 0;
+  border: 0;
+  width: fit-content;
+  font-size: 1.3rem;
+  height: 4rem;
+  max-height: 4rem;
+  cursor: pointer;
+  font-weight: 500;
+  transition: transform 0.5s ease;
+  -webkit-font-smoothing: antialiased;
+
+  // disable-dbl-tap-zoom
+  touch-action: manipulation;
+
+  &::after {
+    content: '';
+    position: absolute;
+    transition: opacity 0.3s ease-in-out;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.07),
+                0 2px 4px rgba(0,0,0,0.07),
+                0 4px 8px rgba(0,0,0,0.07),
+                0 8px 16px rgba(0,0,0,0.07),
+                0 16px 32px rgba(0,0,0,0.07),
+                0 32px 64px rgba(0,0,0,0.07);
+  }
+
+  &:hover {
+    transform: scale(1.02) translateZ(0);
+
+    &::after {
+      opacity: 1;
+    }
+  }
+}

src/styles/variables.scss

@@ -1,3 +1,5 @@
+$primary: #dbeede;
+
 $light-green: #c8f9df;
 $green: #0be881;
 $dark-green: #0ed277;

src/ui/Banner.vue

@@ -101,6 +101,7 @@ export default {
 
 <style lang="scss" scoped>
 @import "../styles/media-queries.scss";
+@import "../styles/variables.scss";
 
 .link {
   text-decoration: none;
@@ -115,7 +116,7 @@ export default {
   width: calc(100% - 80px);
   margin-top: 0px;
   padding: 0px 40px;
-  background-color: #dbeede;
+  background-color: $primary;
   -webkit-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
   -moz-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
   box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);