fix(style): update to scoped colors & set footer background image to pointer-events:none (#14265)

* first pass

* second pass

* third pass

* fourth pass, not a lot of progress

* fifth pass, slowly gettin there

* breakpoint nonsense

* flexbox and breakpoint nonsense

* svg updates, css updates

* whitespace

* chore: merge upstream/develop

* style(breakpoints): added responsive breakpoints, social column alignment tweaks

* style(breakpoints): add xs-specific selectors and classes

* style: mobile footer

* style: mobile footer

* style: static landing page footer

* style: small tweaks to social layout

* fix(translations): update website/common/locales/de/gear.json to develop

* update(style): small updates

* update(style): cleaning up code

* update(style): cleaning up code

* update(style): mobile footer updates

* update(style): complete mobile footer & clean up code

* update(style): add tablet breakpoint and remove rogue terms link

* fix(style): update to scoped colors & set footer background image to pointer-events:none

* fix(style): removed redundant logo class definition

website/client/src/components/static/home.vue

@@ -363,7 +363,7 @@
 
   #front {
     .form-text a {
-      color: #fff !important;
+      color: $white !important;
     }
 
     .container-fluid {
@@ -375,30 +375,24 @@
       padding-bottom: 5em;
     }
 
-    .logo {
-      width: 128px;
-      height: 28px;
-      color: purple;
-    }
-
     .purple-1, .purple-2, .purple-3, .purple-4, h1, h2, h3, h4, h5 {
-      color: #fff;
+      color: $white;
     }
 
     .purple-1 {
-      background-color: #6133b4;
+      background-color: $purple-300;
     }
 
     .purple-2 {
-      background-color: #432874;
+      background-color: $purple-100;
     }
 
     .purple-3 {
-      background-color: #36205d;
+      background-color: $purple-50;
     }
 
     .purple-4 {
-      background-color: #271b3d;
+      background-color: $header-dark-background;
     }
 
     p.section-main {
@@ -419,15 +413,15 @@
     }
 
     .pixel-horizontal {
-      color: #6133b4;
+      color: $purple-300;
     }
 
     .pixel-horizontal-2 {
-      color: #432874;
+      color: $purple-100;
     }
 
     .pixel-horizontal-3 {
-      color: #271b3d;
+      color: $header-dark-background;
     }
 
     h1, h2, h3, h4, h5, h6, button, .strike > span, input {
@@ -455,13 +449,13 @@
 
     .social-button {
       border-radius: 2px;
-      border: solid 2px #bda8ff;
+      border: solid 2px $purple-500;
       width: 100%;
       min-height: 40px;
       padding: .5em;
       background: transparent;
       margin-bottom: .5em;
-      color: #bda8ff;
+      color: $purple-500;
       transition: .5s;
 
       span {
@@ -471,8 +465,8 @@
 
     .social-button:hover {
       cursor: pointer;
-      border-color: #fff;
+      border-color: $white;
-      color: #fff;
+      color: $white;
     }
 
     .social-icon {
@@ -531,8 +525,8 @@
     input {
       margin-bottom: 1em;
       border-radius: 2px;
-      background-color: #432874;
+      background-color: $purple-100;
-      border-color: #432874;
+      border-color: $purple-100;
       color: $purple-400;
       border: solid 2px transparent;
       transition-timing-function: ease;
@@ -544,17 +538,17 @@
     }
 
     .input-valid {
-      color: #fff;
+      color: $white;
     }
 
     input:focus {
-      border: solid 2px #9a62ff;
+      border: solid 2px $purple-400;
       color: #fff;
-      background-color: #36205d;
+      background-color: $purple-50;
     }
 
     input:hover {
-      background-color: #36205d;
+      background-color: $purple-50;
     }
 
     .sign-up {
@@ -657,7 +651,7 @@
       width: 411px;
       height: 48px;
       border-radius: 2px;
-      background-color: #9a62ff;
+      background-color: $purple-400;
       box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.24), 0 1px 4px 0 rgba(26, 24, 29, 0.16);
       margin-bottom: 5em;
     }
@@ -674,7 +668,7 @@
       cursor: pointer;
 
       &:hover {
-        background-color: #5d3b9c;
+        background-color: $purple-50;
         box-shadow: 0 4px 4px 0 rgba(26, 24, 29, 0.16), 0 1px 8px 0 rgba(26, 24, 29, 0.12);
       }
     }
@@ -693,7 +687,7 @@
 
       .svg-icon {
         vertical-align: bottom;
-        color: #d5c8ff;
+        color: $purple-600;
         display: inline-block;
         margin-right: 1em;
       }
@@ -760,6 +754,7 @@
       height: 500px;
       width: 100%;
       opacity: .5;
+      pointer-events: none;
     }
   }
 
@@ -776,7 +771,7 @@
   }
 
   .input-error {
-    color: #fff;
+    color: $white;
     font-size: 90%;
     width: 100%;
     margin-bottom: 1em;