update tokens + desktop version

src/App.vue

@@ -159,7 +159,7 @@ onMounted(async () => {
 	</div>
 	<div class="footer">
 		<div class="footer-inner">
-			<div class="footer-headline">Follow Bloodline</div>
+			<div class="footer-headline">Join Bloodline</div>
 			<div class="footer-social-links">
 				<div class="social-bloodline-badge">
 					<div class="social-bloodline-badge-icon">
@@ -193,12 +193,20 @@ onMounted(async () => {
 </template>
 
 <style lang="sass">
+header
+    margin-bottom: 100px
+    @media (min-width: 992px)
+        margin-bottom: 200px
+
 .footer
     height: auto
     background-color: var(--midnight-black)
     @media (min-width: 992px)
-        height: 450px
-        min-height: 450px
+        height: 150px
+        min-height: 150px
+        display: flex
+        flex-direction: column
+        justify-content: center
     .footer-inner
         padding: 16px 0 24px 0
         font-size: 24px
@@ -206,6 +214,8 @@ onMounted(async () => {
         flex-direction: column
         gap: 8px
         align-items: center
+        @media (min-width: 992px)
+            justify-content: center
         .footer-headline
             font-size: 16px
         .footer-social-links
@@ -219,9 +229,13 @@ onMounted(async () => {
                 align-items: center
                 flex: 0 1 0
                 color: black
+                &:hover,&:active,&:focus
+                    background-color: lighten( #858585, 10%)
+                    cursor: pointer
                 .social-bloodline-badge-icon
                     font-size: 16px
 .main
+    padding-top: 24px
     &.mobile
         &.no-scroll
             overflow: hidden