input feedback

src/styles/style.styl

@@ -1,3 +1,5 @@
+linkColor = #3090de
+textColor = #444
 
 body, html
   margin 0
@@ -5,23 +7,39 @@ body, html
   height 100%
   width 100%
   font-weight 400
-  color #444
+  color textColor
   font-smoothing antialiased
 
 h1, h2, h3
   margin 0
   margin-bottom 0.5em
+  text-shadow 1px 1px 0 rgba(255, 255, 255, 0.2)
 
 .container
   width 100%
   height 100%
   box-sizing border-box
 
-.jumbo
+@keyframes blur
+  0%
+    filter blur(0px)
+  100%
+    filter blur(3px)
+
+.jumbo-container
   width 100%
   height 100%
+  position relative
+.jumbo
+  position absolute
+  top -10px
+  bottom -10px
+  left -10px
+  right -10px
   background url('../images/jumbo.jpg')
   background-size cover
+  animation blur 10s
+  filter blur(3px)
 
 .input
   width 100%
@@ -54,7 +72,7 @@ h1, h2, h3
 
 .input.has-error
   border-color rgba(226, 33, 112, 0.6)
-  color rgba(226, 33, 112, 0.6)
+  color rgb(226, 33, 112)
 
 .btn
   border-radius 3px
@@ -75,17 +93,44 @@ h1, h2, h3
   .btn
     width 40px
     height 32px
-    background #3090de
+    background linkColor
     padding 0
     position absolute
     right 8px
-    top 50%
-    margin-top -15px
+    top 7px
+
     border-bottom 2px solid #117280
     color rgba(255, 255, 255, 0.5)
     &:active
       border-bottom 0
 
+@keyframes drop
+  0%
+    transform rotateX(90deg)
+  30%
+    transform rotateX(45deg)
+  45%
+    transform rotateX(0deg)
+  60%
+    transform rotateX(45deg)
+  100%
+    transform rotateX(0deg)
+
+.invite-form--message
+  background linkColor
+  color #fff
+  height 40px
+  line-height 40px
+  padding 0 0.5em
+  margin-top 4px
+  transform rotateX(0deg)
+  transform-origin 100% 0
+  animation drop 0.6s linear
+
+.invite-form.has-error
+  .invite-form--message
+    background rgb(226, 33, 112)
+
 .form-container
   width 100%
   padding 0 2em
@@ -100,7 +145,7 @@ h1, h2, h3
     margin-bottom 2em
     line-height 1.7em
 a
-  color #2080CF
+  color linkColor
   text-decoration none
   &:hover
     text-decoration underline
@@ -111,6 +156,9 @@ a
   position absolute
   bottom 0
   i
-    margin 0 7px
+    margin 0 5px
     font-size 1.5em
-    color #3090de
+    color textColor
+    &:hover
+      color #fff
+