menu icons, animations and color variable updates

web/src/css/animations.scss

@@ -0,0 +1,38 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeUp {
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  50% {
+    opacity: .5;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}

web/src/css/base.scss

@@ -7,6 +7,7 @@
 html {
   min-height: 100%;
   font-size: calc(1rem + 8 * (100vw - 320px) / 1920);
+  background-color: var(--color-chateauBlue);
 }
 
 html,
@@ -45,33 +46,6 @@ body {
   }
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeUp {
-  0% {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-
-  50% {
-    opacity: .5;
-    transform: translateY(0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 a {
   color: inherit;
   text-underline-offset: .16em;

web/src/css/main.scss

@@ -1,3 +1,4 @@
 @import 'fonts.scss';
 @import 'variables.scss';
+@import 'animations.scss';
 @import 'base.scss';

web/src/css/variables.scss

@@ -32,6 +32,8 @@
   --color-cta-background: var(--color-goldenOrange);
   --color-cta-text: var(--color-black);
   --color-placeholder: var(--color-neufPink);
+  --color-menu-text: var(--color-deepBrick);
+  --color-menu-background: var(--color-goldenBeige);
 
   // spacing
   --spacing-sitepadding: 2rem;