landing.sass in slow-steps-0.3.3

- old
+ new

@@ -7,15 +7,27 @@
  */
 
 // Fallback for browsers that do not support Custom Properties
 $landing-height: 100vh
 
+body
+  animation: fadeInAnimation ease 1s
+  animation-iteration-count: 1
+  animation-fill-mode: forwards
+
+@keyframes fadeInAnimation
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1
+
 .landing__page
   display: flex
   flex-direction: column
   height: $landing-height
-  height: calc(var(--vh, 1vh) * 100)
+  height: calc(var(--vh, 1vh) * #{strip-unit($landing-height)})
 
 .page__half
   align-items: flex-end
   display: flex
   height: 50vh
@@ -74,22 +86,25 @@
 
     &:hover > .landing__strap
       @include reveal-landing-strap
 
   .landing__strap
+    @include default-trans
     display: flex
     flex-direction: column
-    height: 0
+    max-height: 0
     justify-content: space-around
     max-width: 400px
     overflow: hidden
-    transition: .2s ease-in-out
     width: 40vw
+    padding: 0 3rem
 
   .landing__cta
+    font-size: $sm-font-size
     display: flex
     flex-direction: row
     justify-content: space-between
+    padding: $font-size 0
 
     > a
       align-self: center
       border-radius: 6px
       box-shadow: 0 20px 30px -15px rgba($pure-black, .6)