minor fixes

src/css/main.css

@@ -206,7 +206,12 @@ a {
   width: 100%;
   z-index: 900;
   top: 40px;
-  left: 0; }
+  left: 0;
+  opacity: .6;
+  transition: opacity .2s ease; }
+
+.header:hover {
+  opacity: 1; }
 
 .header__inner {
   width: 1080px;
@@ -257,13 +262,13 @@ a.logo {
   opacity: .5; }
 
 .nav a {
-  font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   font-size: 15px;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
-  padding: 10px 15px 15px; }
+  padding: 10px 15px 15px;
+  color: #70808D; }
 
 .header .nav a {
   color: #49555F; }
@@ -361,6 +366,10 @@ li.social-link a {
   .nav:first-child {
     display: none; } }
 
+@media (max-width: 767px) {
+  .header {
+    display: none; } }
+
 .the-iphone {
   position: relative;
   width: 292px;
@@ -969,6 +978,10 @@ li.social-link a {
   transition-delay: 1.6s;
   transform: translate3d(-70px, 140px, 0); }
 
+.token-wrap:nth-child(3) .token::after {
+  -ms-transform: scale(0.7);
+  transform: scale(0.7); }
+
 .token-wrap:nth-child(4) {
   width: 46px;
   height: 46px;
@@ -977,6 +990,10 @@ li.social-link a {
   transition-delay: 1.45s;
   transform: translate3d(-90px, 150px, 0); }
 
+.token-wrap:nth-child(4) .token::after {
+  -ms-transform: scale(0.7);
+  transform: scale(0.7); }
+
 .token-wrap:nth-child(5) {
   width: 46px;
   height: 46px;
@@ -985,6 +1002,10 @@ li.social-link a {
   transition-delay: 1.5s;
   transform: translate3d(-40px, 180px, 0); }
 
+.token-wrap:nth-child(5) .token::after {
+  -ms-transform: scale(0.8);
+  transform: scale(0.8); }
+
 .token-wrap:nth-child(6) {
   width: 54px;
   height: 54px;
@@ -1001,6 +1022,10 @@ li.social-link a {
   transition-delay: 1.7s;
   transform: translate3d(-30px, 190px, 0); }
 
+.token-wrap:nth-child(7) .token::after {
+  -ms-transform: scale(0.9);
+  transform: scale(0.9); }
+
 .token-wrap:nth-child(8) {
   width: 62px;
   height: 62px;
@@ -1025,6 +1050,10 @@ li.social-link a {
   transition-delay: 1.3s;
   transform: translate3d(20px, 190px, 0); }
 
+.token-wrap:nth-child(10) .token::after {
+  -ms-transform: scale(0.7);
+  transform: scale(0.7); }
+
 .token-wrap:nth-child(11) {
   width: 58px;
   height: 58px;
@@ -1041,6 +1070,10 @@ li.social-link a {
   transition-delay: 1.5s;
   transform: translate3d(20px, 130px, 0); }
 
+.token-wrap:nth-child(12) .token::after {
+  -ms-transform: scale(0.9);
+  transform: scale(0.9); }
+
 .token-wrap:nth-child(13) {
   width: 48px;
   height: 48px;
@@ -1049,6 +1082,10 @@ li.social-link a {
   transition-delay: 1.6s;
   transform: translate3d(20px, 140px, 0); }
 
+.token-wrap:nth-child(13) .token::after {
+  -ms-transform: scale(0.9);
+  transform: scale(0.9); }
+
 .token-wrap:nth-child(14) {
   width: 48px;
   height: 48px;
@@ -1057,6 +1094,10 @@ li.social-link a {
   transition-delay: 1.7s;
   transform: translate3d(40px, 120px, 0); }
 
+.token-wrap:nth-child(14) .token::after {
+  -ms-transform: scale(0.8);
+  transform: scale(0.8); }
+
 .token-wrap:nth-child(15) {
   width: 48px;
   height: 48px;
@@ -1230,6 +1271,8 @@ li.social-link a {
     margin: 0 0 0 -540px; } }
 
 @media (max-width: 767px) {
+  .tokens {
+    top: 20px; }
   .token-wrap.token-wrap--status {
     margin: -36px 0 0 -36px;
     width: 72px;
@@ -1298,10 +1341,10 @@ li.social-link a {
     top: 111px;
     right: 384px; }
   .token-wrap:nth-child(14) {
-    width: 46px;
+    width: 40px;
-    height: 46px;
+    height: 40px;
-    top: 267px;
+    top: 250px;
-    right: 374px; }
+    right: 370px; }
   .token-wrap:nth-child(15) {
     display: none; }
   .token::after {
@@ -1329,12 +1372,12 @@ li.social-link a {
 
 .crowdsale {
   background-color: white;
-  box-shadow: 0 5px 8px 0 rgba(72, 89, 102, 0.1);
+  box-shadow: 0 5px 8px 0 rgba(72, 89, 102, 0.06);
-  padding: 0 0 60px 0;
+  padding: 0 0 24px 0;
-  background-image: linear-gradient(0deg, #FFFFFF 0%, #F2F5F8 93%); }
+  background-image: linear-gradient(-180deg, #F2F5F8 0%, #FAFBFC 99%); }
 
 .crowdsale .tagline {
-  margin: 130px 0 30px 0; }
+  margin: 130px 0 60px 0; }
 
 .tagline .tagline__title {
   width: 440px;
@@ -1405,6 +1448,22 @@ li.social-link a {
 .button.button--color-purple {
   color: #6673CE; }
 
+.learn-more {
+  text-align: center; }
+
+.learn-more a {
+  font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 1px;
+  opacity: .4;
+  transition: opacity .2s ease, color .2s ease; }
+
+.learn-more a:hover {
+  opacity: 1;
+  color: #6673CE; }
+
 .about {
   padding: 50px 0 0 0; }
 
@@ -1803,8 +1862,11 @@ input.email-form__input--email:disabled {
     flex-direction: column; }
   .tagline__buttons .button {
     margin: 8px 0; }
+  .button.button--bg-white {
+    background-color: white;
+    box-shadow: 0 3px 6px 0 rgba(175, 192, 202, 0.3); }
   .crowdsale .tagline {
-    margin: 390px 0 0 0; } }
+    margin: 320px 0 14px 0; } }
 
 @keyframes shakeIt {
   0%, 100% {

src/index.html

@@ -80,13 +80,16 @@
                 <div class="tagline">
                   <h2 class="tagline__title">Introducing the Status Network</h2>
                   <div class="tagline__body">The Status Contribution Period will begin at 2pm GMT (UTC+0) on June 17th 2017</div>
-            
+
                   <div class="tagline__buttons">
                     <a class="button button--bg-white button--color-blue" target="_blank" href="https://status.im/whitepaper.pdf">Read the Whitepaper</a>
                     <a class="button button--bg-white button--color-purple button--more" target="_blank" href="http://slack.status.im">Join our Slack</a>
                   </div>
                 </div>
 
+                <div class="learn-more">
+                  <a href="#">Learn more about Status</a>
+                </div>
               </div>
 
 

src/js/app.js

@@ -9987,6 +9987,11 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
       event.preventDefault();
     });
 
+    document.querySelectorAll(".learn-more a")[0].addEventListener('click', function (event) {
+      animateScroll(slideAbout, 600, "easeInOutCubic", 0);
+      event.preventDefault();
+    });
+
     document.querySelectorAll(".app-button--ios")[0].addEventListener('click', function (event) {
       animateScroll(slideFour, 600, "easeInOutCubic", 0);
       setTimeout(function () {

src/js/main.js

@@ -20,7 +20,6 @@ if (statusCookiePolicyAccepted == "accepted") {
 }
 
 
-
 document.querySelectorAll(".nav__item--features")[0].addEventListener('click', function(event){
     animateScroll(slideTwo, 600, "easeInOutCubic", 0)
     event.preventDefault()
@@ -37,6 +36,11 @@ cookieButton.addEventListener('click', function(event){
     event.preventDefault()
 })
 
+document.querySelectorAll(".learn-more a")[0].addEventListener('click', function(event){
+    animateScroll(slideAbout, 600, "easeInOutCubic", 0)
+    event.preventDefault()
+})
+
 document.querySelectorAll(".app-button--ios")[0].addEventListener('click', function(event){
     animateScroll(slideFour, 600, "easeInOutCubic", 0)
     setTimeout(function(){

src/scss/header.scss

@@ -6,6 +6,12 @@
   z-index: 900;
   top: 40px;
   left: 0;
+  opacity: .6;
+  transition: opacity .2s ease;
+}
+
+.header:hover {
+  opacity: 1;
 }
 
 .header__inner {
@@ -56,11 +62,12 @@ a.logo {
 }
 
 .nav a {
-  font-family:$PostGroteskMedium;
+  //font-family:$PostGroteskMedium;
   font-size: 15px;
   display: flex;
   align-items: center;
   padding: 10px 15px 15px;
+  color: #70808D;
 }
 
 .header .nav a {
@@ -185,5 +192,7 @@ li.social-link a {
 
 @media (max-width: 767px) {
 
-
+  .header {
+    display: none;
+  }
 }

src/scss/slide--one.scss

@@ -17,13 +17,13 @@
 
 .crowdsale {
   background-color: $colorWhite;
-  box-shadow: 0 5px 8px 0 rgba(72,89,102,0.10);
+  box-shadow: 0 5px 8px 0 rgba(72,89,102,0.06);
-  padding: 0 0 60px 0;
+  padding: 0 0 24px 0;
-  background-image: linear-gradient(0deg, #FFFFFF 0%, #F2F5F8 93%);
+  background-image: linear-gradient(-180deg, #F2F5F8 0%, #FAFBFC 99%);
 }
 
 .crowdsale .tagline {
-  margin: 130px 0 30px 0;
+  margin: 130px 0 60px 0;
 }
 
 .tagline .tagline__title {
@@ -109,6 +109,25 @@
   color: #6673CE;
 }
 
+.learn-more {
+  text-align: center;
+}
+
+.learn-more a {
+  font-family: $PostGroteskMedium;
+  font-size: 13px;
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 1px;
+  opacity: .4;
+  transition: opacity .2s ease, color .2s ease;
+}
+
+.learn-more a:hover {
+  opacity: 1;
+  color: #6673CE;
+}
+
 .about {
   padding: 50px 0 0 0
 }
@@ -659,10 +678,16 @@ input.email-form__input--email:disabled {
     margin: 8px 0;
   }
 
-  .crowdsale .tagline {
+  .button.button--bg-white {
-    margin: 390px 0 0 0
+    background-color: $colorWhite;
+    box-shadow: 0 3px 6px 0 rgba(175,192,202,0.3);
   }
 
+  .crowdsale .tagline {
+    margin: 320px 0 14px 0;
+  }
+
+
 }
 
 @keyframes shakeIt {

src/scss/tokens.scss

@@ -38,6 +38,10 @@
   transform: translate3d(-70px, 140px, 0);
 }
 
+.token-wrap:nth-child(3) .token::after {
+  transform: scale(.7);
+}
+
 .token-wrap:nth-child(4) {
     width: 46px;
     height: 46px;
@@ -47,6 +51,10 @@
     transform: translate3d(-90px, 150px, 0);
 }
 
+.token-wrap:nth-child(4) .token::after {
+  transform: scale(.7);
+}
+
 .token-wrap:nth-child(5) {
     width: 46px;
     height: 46px;
@@ -56,6 +64,10 @@
     transform: translate3d(-40px, 180px, 0);
 }
 
+.token-wrap:nth-child(5) .token::after {
+  transform: scale(.8);
+}
+
 .token-wrap:nth-child(6) {
     width: 54px;
     height: 54px;
@@ -74,6 +86,10 @@
     transform: translate3d(-30px, 190px, 0);
 }
 
+.token-wrap:nth-child(7) .token::after {
+  transform: scale(.9);
+}
+
 .token-wrap:nth-child(8) {
     width: 62px;
     height: 62px;
@@ -101,6 +117,10 @@
     transform: translate3d(20px, 190px, 0);
 }
 
+.token-wrap:nth-child(10) .token::after {
+  transform: scale(.7);
+}
+
 .token-wrap:nth-child(11) {
     width: 58px;
     height: 58px;
@@ -119,6 +139,10 @@
     transform: translate3d(20px, 130px, 0);
 }
 
+.token-wrap:nth-child(12) .token::after {
+  transform: scale(.9);
+}
+
 .token-wrap:nth-child(13) {
     width: 48px;
     height: 48px;
@@ -128,6 +152,10 @@
     transform: translate3d(20px, 140px, 0);
 }
 
+.token-wrap:nth-child(13) .token::after {
+  transform: scale(.9);
+}
+
 .token-wrap:nth-child(14) {
     width: 48px;
     height: 48px;
@@ -137,6 +165,10 @@
     transform: translate3d(40px, 120px, 0);
 }
 
+.token-wrap:nth-child(14) .token::after {
+  transform: scale(.8);
+}
+
 .token-wrap:nth-child(15) {
     width: 48px;
     height: 48px;
@@ -288,6 +320,10 @@
 
 @media (max-width: 767px) {
 
+  .tokens {
+    top: 20px;
+  }
+
   .token-wrap.token-wrap--status {
     margin: -36px 0 0 -36px;
     width: 72px;
@@ -319,7 +355,7 @@
   .token-wrap:nth-child(11) { width: 44px; height: 44px; top: 210px; right: 445px;}
   .token-wrap:nth-child(12) { width: 50px; height: 50px; top: 0px; right: 371px;}
   .token-wrap:nth-child(13) { top: 111px; right: 384px;}
-  .token-wrap:nth-child(14) { width: 46px; height: 46px; top: 267px; right: 374px;}
+  .token-wrap:nth-child(14) { width: 40px; height: 40px; top: 250px; right: 370px;}
   .token-wrap:nth-child(15) { display: none}