typographic tweaks, learn more secondary cta, whitepaper section

_src/_assets/images/icon-caret.svg

@@ -0,0 +1,14 @@
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="42.3px" height="22.2px" viewBox="0 0 42.3 22.2" style="enable-background:new 0 0 42.3 22.2;"
+	 xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<defs>
+</defs>
+<g>
+	<polyline class="st0" points="41.3,1 21.2,21.2 1,1 	"/>
+</g>
+</svg>

_src/_assets/images/icon-documents.svg

@@ -0,0 +1,21 @@
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="44px" height="60px" viewBox="0 0 44 60" style="enable-background:new 0 0 44 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#231F20;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<defs>
+</defs>
+<g>
+	<polygon class="st0" points="43,59 1,59 1,1 29,1 43,15 	"/>
+	<polyline class="st1" points="29,1 29,15 43,15 	"/>
+	<line class="st2" x1="11.2" y1="19" x2="22.6" y2="19"/>
+	<line class="st2" x1="11.2" y1="27" x2="33.9" y2="27"/>
+	<line class="st2" x1="11.2" y1="35" x2="33.9" y2="35"/>
+	<line class="st2" x1="11.2" y1="43" x2="33.9" y2="43"/>
+	<line class="st2" x1="11.2" y1="51" x2="33.9" y2="51"/>
+</g>
+</svg>

_src/_assets/styles/bigchain/_buttons.scss

@@ -14,7 +14,7 @@
     vertical-align: middle;
     cursor: pointer;
     user-select: none;
-    border: none;
+    border: 1px solid transparent;
     @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
     transition: all .2s ease-in-out;
 

_src/_assets/styles/bigchain/_mixins/_buttons.scss

@@ -6,6 +6,7 @@
     $active-border: darken($border, 12%);
     color: $color !important;
     background: $background;
+    border-color: $border;
 
     &:hover,
     &:focus {

_src/_assets/styles/bigchain/_variables.scss

@@ -33,16 +33,16 @@ $brand-danger:            #d9534f !default;
 // Typography
 //
 $font-family-fira:        'Fira Sans', sans-serif !default;
-$font-family-avenir:      'Avenir', 'Helvetica Neue', 'Arial', sans-serif !default;
+$font-family-avenir:      'Avenir Next', 'Helvetica Neue', 'Arial', sans-serif !default;
 $font-family-monospace:    Menlo, Monaco, Consolas, "Courier New", monospace !default;
 $font-family-base:         $font-family-avenir !default;
 
 $font-weight-light:         300 !default;
 $font-weight-normal:        400 !default;
 $font-weight-bold:          600 !default;
-$font-weight-base:          $font-weight-light !default;
+$font-weight-base:          $font-weight-normal !default;
 
-$font-size-root:            16px !default;
+$font-size-root:            18px !default;
 
 $font-size-base:            1rem !default;
 $font-size-lg:              1.25rem !default;
@@ -112,7 +112,7 @@ $component-active-bg:    $brand-primary !default;
 //
 $btn-padding-x:                  1.5rem !default;
 $btn-padding-y:                  .375rem !default;
-$btn-font-weight:                $font-weight-light !default;
+$btn-font-weight:                $font-weight-normal !default;
 
 $btn-primary-color:              #fff !default;
 $btn-primary-bg:                 $brand-primary !default;
@@ -169,4 +169,4 @@ $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 $input-color-placeholder:        #999 !default;
 
 $input-font:                     $font-family-avenir !default;
-$input-font-weight:              $font-weight-light !default;
+$input-font-weight:              $font-weight-normal !default;

_src/_assets/styles/page-front.scss

@@ -8,7 +8,7 @@
     text-align: center;
     overflow: hidden;
     position: relative;
-    text-shadow: 0 1px 0 rgba(0,0,0,.3);
+    text-shadow: 0 1px 0 rgba(0,0,0,.1);
 
     // background
     background: url('../img/photo1.jpg') no-repeat center bottom;
@@ -55,6 +55,24 @@
         &:after { display: none }
     }
 
+    .btn-link {
+        color: #fff;
+        margin-top: ($spacer * 3);
+        opacity: .7;
+
+        &:hover,
+        &:focus { opacity: 1; }
+
+        // the caret
+        .icon {
+            width: 12px;
+            height: 12px;
+            stroke: #fff;
+            display: block;
+            margin: auto;
+        }
+    }
+
     .btn {
         &:hover,
         &:focus,
@@ -64,16 +82,21 @@
     }
 
     // intro animation
-    .logo {
+    .logo,
+    .section-title,
+    .btn {
         @extend .animation-slide-in-from-bottom;
         animation-duration: 1s;
+        animation-fill-mode: backwards;
+    }
+
+    .logo {
         animation-timing-function: $timing-default;
     }
 
     .section-title,
     .btn {
         @extend .animation-slide-in-from-bottom;
-        animation-fill-mode: backwards;
         animation-play-state: paused;
     }
 
@@ -102,6 +125,19 @@
     }
 }
 
+
+.section-whitepaper {
+    .icon {
+        stroke: $brand-main-gray;
+        stroke-dasharray: 4,4;
+        opacity: .3;
+        display: block;
+        margin: auto;
+        margin-bottom: $spacer;
+    }
+}
+
+
 .section-earlyaccess {
 
     form {

_src/index.html

@@ -12,12 +12,17 @@ front_page: true
                 <use xlink:href="/assets/img/sprite.svg#logo"></use>
             </svg>
             <h1 class="section-title">Bigchain is coming.</h1>
-            <a href="#earlyaccess" class="btn btn-secondary-outline">Get Early Access</a>
+            <p>
+                <a href="#earlyaccess" class="btn btn-secondary-outline">Get Early Access</a>
+            </p>
+            <a href="#benchmarks" class="btn btn-link btn-sm">Learn More <svg class="icon">
+                <use xlink:href="/assets/img/sprite.svg#icon-caret"></use>
+            </svg></a>
         </div>
     </div>
 </header>
 
-<section class="section section-benchmarks">
+<section id="benchmarks" class="section section-benchmarks">
     <div class="row">
         <header class="section-header">
             <h1 class="section-title">Key Features</h1>
@@ -52,7 +57,12 @@ front_page: true
         <header class="section-header">
             <h1 class="section-title">Whitepaper</h1>
         </header>
-        <p class="section-description">Coming soon</p>
+        <p class="section-description">
+            <svg class="icon">
+                <use xlink:href="/assets/img/sprite.svg#icon-documents"></use>
+            </svg>
+            Coming soon
+        </p>
     </div>
 </section>