sticky header - lazyload - navbar - floatingpoints

app/assets/scss/modules/_arrow.scss

@@ -35,14 +35,14 @@
 
 		@include atMedium{
 			position: relative;
-			bottom: -30px;
+			bottom: 0px;
 			left: 50%;
 			transform: translateX(-50%);
 		}
 
 		@include atLarge{
 			position: relative;
-			bottom: -30px;
+			bottom: 0px;
 			left: 70%;
 			transform: translateX(-50%);
 		}

app/assets/scss/modules/_headline.scss

@@ -24,7 +24,7 @@
 
 	&__title {
 		font-weight: 400;
-		font-size: 1.6rem;
+		font-size: 1.5rem;
 
 		@include atMedium(){
 			font-size: 2.1rem;

app/assets/scss/modules/_how-it-works.scss

@@ -54,7 +54,7 @@
 
 	p{
 		font-weight: 300;
-		line-height: 1.25;
+		line-height: 1.125;
 		margin: 0;
 		font-size: 1.2rem;
 

app/assets/scss/modules/_primary-nav.scss

@@ -3,6 +3,11 @@
 	
 	@include atMedium(){
 		padding: 22px 0px;
+		transition: padding .3s ease-out;
+
+		&--small{
+			padding: 2px 0px;
+		}
 	}
 
 	&--pull-right{

app/assets/scss/modules/_reveal-item.scss

@@ -0,0 +1,10 @@
+.reveal-item {
+	opacity: 0;
+	transition: all 1.5s ease-out;
+	transform: scale(1.15);
+
+	&--is-visible {
+		opacity: 1;
+		transform: scale(1);
+	}
+}

app/assets/scss/modules/_site-header.scss

@@ -12,13 +12,22 @@
 	@include atMedium(){
 		position: absolute;
 		position: fixed;
-		background-color: rgba(#000, 0.4);
+		background-color: rgba(#000, .4);
+
+		&--dark {
+			background-color: rgba(#000, .7);
+		}
 	}
 
 	&__btn-container{
 		@include atMedium(){
 			padding: 32px 0px 32px 0px;
 			float: right;
+			transition: padding .3s ease-out;
+
+			&--small{
+				padding: 13px 0px 13px 0px;
+			}
 		}
 	}
 
@@ -35,6 +44,11 @@
 			position: unset;
 			margin: 40px 20px 0px 0px;
 			float: right;
+			transition: margin .3s ease-out;
+
+			&--small{
+				margin: 22px 20px 0px 0px;
+			}
 		}
 	}
 
@@ -135,15 +149,22 @@
 		left: 50%;
 		transform-origin: 50% 0%;
 		transform: translateX(-50%) scale(.8);
-		transition: transform .3s ease-out;
+		transition: all .3s ease-out;
 		background-color: rgba(black, 0.5);
 
+		&--small {
+			transform: translateX(-50%) scale(.5);
+			background-color: rgba(black, 0.7);
+		}
+
 		&--orange-bg {
-			transition: background-color .3s ease-out;
-			background-color: orange;
+			transition: all .3s ease-out;
+			background-color: $myOrange;
+			transform: translateX(-50%) scale(.8);
 		}
 
 		@include atMedium(){
+			width: 170px;
 			padding: 0;
 			top: 3px;
 			position: relative;
@@ -151,6 +172,11 @@
 			left: auto;
 			transform: translateX(0);
 			background-color: rgba(black, 0);
+			transition: width .3s ease-out;
+
+			&--small {
+				width: 100px;
+			}
 		}
 	}
 

app/assets/scss/style.scss

@@ -17,6 +17,4 @@
 @import './modules/arrow';
 @import './modules/footer';
 @import './modules/sprite';
-
-
-
+@import './modules/reveal-item';