From 5c294785e34d63ad3e3a191191deb6a7b4267610 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 8 Mar 2017 15:53:46 +0000
Subject: [PATCH] Add styling for feature page header.

---
 .../stylesheets/app/review-features-page.less | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/services/web/public/stylesheets/app/review-features-page.less b/services/web/public/stylesheets/app/review-features-page.less
index c86a3bd012..3650fc4098 100644
--- a/services/web/public/stylesheets/app/review-features-page.less
+++ b/services/web/public/stylesheets/app/review-features-page.less
@@ -14,12 +14,16 @@
 @rfp-card-shadow: 0 0 30px 5px rgba(0, 0, 0, .3);
 @rfp-border-radius: 5px;
 
+@rfp-header-height: 80px;
+@rfp-header-height-collapsed: 50px;
+
 .rfp-main {
 	background-color: @rfp-rp-blue-dark;
 	color: #FFF;
 	font-size: 18px;
 	min-width: @screen-xs-min;
 }
+
 	// Typographical scale and basics.
 	.rfp-h1 {
 		font-size: @rfp-h1-size;
@@ -80,6 +84,35 @@
 		font-weight: 700;
 	}
 	// Sections
+	.rfp-header {
+		position: fixed;
+		top: 0;
+		width: 100%;
+		z-index: 2;
+		height: @rfp-header-height;
+		transition: height .2s;
+		background-color: fade(@rfp-rp-blue-darkest, 90%);
+		padding: 10px 30px;
+		min-width: @screen-xs-min;
+		@media (min-width: @screen-sm-min) {
+			padding-left: 60px;
+			padding-right: 60px;
+		}
+		.rfp-main-header-collapsed & {
+			height: @rfp-header-height-collapsed;
+		}
+	}
+		.rfp-header-wrapper {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			max-width: @container-large-desktop;
+			height: 100%;
+			margin: auto;
+		}
+			.rfp-header-logo {
+				height: 21px;
+			}
 	.rfp-section {
 		padding: 30px;
 		text-align: center;
@@ -94,6 +127,7 @@
 		background-position: center;
 		background-color: @rfp-rp-blue-darker;
 		min-height: 100vh;
+		padding-top: @rfp-header-height;
 		.rfp-lead {
 			opacity: 0;
 			transition: opacity 0.8s ease;
@@ -162,7 +196,7 @@
 	}
 		.rfp-section-wrapper {
 			max-width: @container-large-desktop;
-			margin: auto;
+			margin: 0 auto;
 		}
 	// Elements
 	.rfp-h1-masthead-portion {
@@ -404,6 +438,11 @@
 					}
 				}
 			}
+
+			.rfp-cta-header {
+				font-size: 1em;
+				padding: .2em 1em;
+			}
 				.rfp-cta-main {
 					display: block;
 					transition: transform 0.25s;