From 20d4ff375b8ecb4e3c2245997379178168fd5c35 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 6 May 2017 18:12:55 +0200
Subject: [PATCH] nicer intro animation

---
 _src/_assets/styles/bigchain/_footer.scss |  5 +-
 _src/_assets/styles/bigchain/_hero.scss   | 57 +++++++++++++----------
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/_src/_assets/styles/bigchain/_footer.scss b/_src/_assets/styles/bigchain/_footer.scss
index a0995a9..58e3e23 100644
--- a/_src/_assets/styles/bigchain/_footer.scss
+++ b/_src/_assets/styles/bigchain/_footer.scss
@@ -3,5 +3,8 @@
     @extend .background--darker;
     color: $gray-light;
     padding-top: $spacer * 3;
-    padding-bottom: 0;
+
+    &.section {
+        padding-bottom: 0;
+    }
 }
diff --git a/_src/_assets/styles/bigchain/_hero.scss b/_src/_assets/styles/bigchain/_hero.scss
index 2fd7c45..c642cc8 100644
--- a/_src/_assets/styles/bigchain/_hero.scss
+++ b/_src/_assets/styles/bigchain/_hero.scss
@@ -35,34 +35,40 @@ $menu-height-md: 66px;
             font-size: $font-size-h1;
         }
 
-        &:after { display: none }
+        &::after { display: none; }
     }
+}
 
-    // intro animation
-    .section-title,
-    .hero__action {
-        .wf-active &,
-        .wf-inactive & {
-            @extend .animation-slide-in-from-bottom;
-            animation-fill-mode: backwards;
-        }
+
+//
+// intro animation
+//
+.hero .section-title,
+.hero__action {
+    .wf-active &,
+    .wf-inactive & {
+        @include animation-slide-in-from-bottom;
+        animation-fill-mode: backwards;
     }
+}
 
-    .hero__action {
-        .wf-active &,
-        .wf-inactive & {
-            animation-delay: .5s;
-        }
+.hero__action {
+    .wf-active &,
+    .wf-inactive & {
+        animation-delay: .5s;
     }
+}
 
-    .hero__community,
-    .hero__more {
-        .wf-active &,
-        .wf-inactive & {
-            @extend .animation-fade-in;
-            animation-fill-mode: backwards;
-            animation-delay: .8s;
-        }
+.page-front .menu--main,
+.hero__community,
+.hero__more {
+    @include transition;
+    opacity: 0;
+    transition-delay: .8s;
+
+    .wf-active &,
+    .wf-inactive & {
+        opacity: 1;
     }
 }
 
@@ -122,8 +128,9 @@ $menu-height-md: 66px;
 
 
 .hero__more {
-    color: #fff;
-    opacity: .8;
+    position: relative;
+    z-index: 2;
+    color: rgba(#fff, .6);
     align-self: flex-end;
     margin-bottom: $spacer;
     width: 100%;
@@ -134,7 +141,7 @@ $menu-height-md: 66px;
     }
 
     &:hover,
-    &:focus { opacity: 1; }
+    &:focus { color: #fff; }
 
     // the caret
     .icon {