fix video hero loading state/overlay, closes #24

_config.yml

@@ -11,6 +11,7 @@ email:
     cla:                troy@ascribe.io
 
 twitter:                BigchainDB
+facebook:               BigchainDB
 disqus:                 bigchain
 
 address:

_src/_assets/styles/bigchain/_hero.scss

@@ -8,6 +8,7 @@ $menu-height-md: 73px;
 
 .hero {
     @extend .background--photo;
+    background-image: url('/assets/img/northern-lights-poster.jpg');
     text-align: center;
     overflow: hidden;
     position: relative;
@@ -96,13 +97,12 @@ $menu-height-md: 73px;
 // Video hero
 //
 .hero-video {
-    // poster image
-    background: $brand-main-blue-dark url('../img/hero-video-poster.jpg') no-repeat center center;
-    background-size: cover;
+
 }
 
 .hero-video .menu,
-.hero-video__content {
+.hero-video__content,
+.hero-video__video {
     @media ($screen-md) {
         position: absolute;
         left: 0;
@@ -112,8 +112,9 @@ $menu-height-md: 73px;
 }
 
 .hero-video__content {
+
     @media ($screen-md) {
-        z-index: 1;
+        z-index: 3 !important;
         bottom: 0;
         display: flex;
         flex-wrap: wrap;
@@ -123,14 +124,36 @@ $menu-height-md: 73px;
 
 // video container
 .hero-video__background {
-    z-index: 0;
+    @extend .color-overlay;
+    display: none;
 
     @media ($screen-md) {
+        display: block;
+        margin-bottom: -9px;
         max-height: 100vh;
+
+        &:before { z-index: 2; }
     }
 }
 
 // the video itself
-.hero-video__video {
+.hero-video__video,
+.hero-video__poster {
     @extend .img--responsive;
 }
+
+.hero-video__video {
+    @extend .transition;
+    opacity: 0;
+    margin: auto;
+    width: 100%;
+
+    &.enabled {
+        opacity: 1
+    }
+}
+
+.hero-video__poster {
+    display: block;
+    opacity: 0;
+}

_src/_assets/styles/bigchain/_sections.scss

@@ -55,6 +55,7 @@
 
 .section-description {
     font-size: $font-size-lg;
+    line-height: $line-height-lg;
     margin-bottom: 0;
 
     + .section-description {

_src/_data/menus.yml

@@ -13,6 +13,6 @@ footer:
     - title: Contact
       url: /contact/
     - title: Terms
-      url: /tos/
+      url: /terms/
     - title: Privacy
       url: /privacy/

_src/_includes/hero-video.html

@@ -3,7 +3,6 @@
     {% include menu-main.html %}
 
     <div class="hero__content hero-video__content row">
-
         <hgroup>
             <svg class="logo logo--full logo--white--green" aria-labelledby="title">
                 <title>Logo</title>
@@ -13,7 +12,6 @@
             <h1 class="section-title">{{ page.tagline }}</h1>
         </hgroup>
 
-
         <a href="#features" class="scroll btn btn-link btn-sm">Learn More <svg class="icon">
             <use xlink:href="/assets/img/sprite.svg#icon-caret"></use>
         </svg></a>
@@ -24,6 +22,7 @@
             <source src="/assets/videos/{{ page.hero_video_name }}.mp4" type="video/mp4">
             <source src="/assets/videos/{{ page.hero_video_name }}.webm" type="video/webm">
         </video>
+        <img class="hero-video__poster" width="1920" height="1080" src="/assets/img/northern-lights-poster.jpg" />
     </div>
 
 </header>

_src/index.html

@@ -14,6 +14,7 @@ hero_video_name: northern-light
     <div class="row">
         <header class="section-header">
             <h1 class="section-title">This is BigchainDB. 100K writes/s, sustained.</h1>
+            <p class="section-description">BigchainDB allows enterprises to deploy blockchains at scale, formerly a limiting factor in getting sandbox proof-of-concepts into production systems.</p>
         </header>
 
         <figure>
@@ -40,6 +41,10 @@ hero_video_name: northern-light
                 Use as a Public or Private Blockchain
             </p>
         </div>
+
+        <div class="text-center">
+            <a href="/features" class="btn btn-primary">How it works</a>
+        </div>
     </div>
 </section>
 
@@ -47,7 +52,7 @@ hero_video_name: northern-light
     <div class="row row--wide">
         <header class="section-header">
             <h1 class="section-title">Get started</h1>
-            <h1 class="section-description">Just clone and run</h1>
+            <p class="section-description">Just clone and run</p>
         </header>
 
         <div class="grid grid--gutters grid--full grid-medium--columns grid--center">