[MTELERIXA-29] upgrade to liege-like banner

static/rixensart/_custom.scss

@@ -125,3 +125,7 @@ div#content div.wcsformsofcategorycell {
 		}
 	}
 }
+
+#nav-wrapper {
+	background-color: #276577;
+}

static/rixensart/_header.scss

@@ -0,0 +1,121 @@
+$header-full-width-background: true !default;
+$header-background-color: null !default;
+
+@mixin header-background {
+	body.has-header-background & {
+		background: url(/assets/header:background) top center no-repeat;
+		background-size: cover;
+	}
+	background-color: $header-background-color;
+}
+
+@if ($header-full-width-background) {
+	.site-header {
+		@include header-background();
+	}
+} @else {
+	#header {
+		@include header-background();
+	}
+}
+
+h1#logo.has-logo {
+	a {
+		background: transparent url(/assets/header:logo) center left no-repeat;
+		background-size: contain;
+		text-indent: -10000px;
+		min-width: 160px;
+		display: inline-block;
+	}
+}
+
+
+
+div#page {
+	max-width: 1920px;
+	margin: auto;
+}
+
+body.has-header-background header {
+	background-position: 50% 62px;
+	@media screen and ($max-mobile-viewport) {
+		background-position: 50% 42px;
+	}
+}
+
+div#header-wrapper {
+	border-top: 62px solid black;
+}
+
+div#header {
+	max-width: none;
+	width: 100%;
+	margin: 0 auto;
+	position: relative;
+	top: -62px;
+	z-index: 0;
+	padding: 0 1ex;
+	height: 274px;
+	@media screen and ($max-mobile-viewport) {
+		height: 150px;
+		h1 {
+			padding-left: 0;
+		}
+	}
+}
+
+h1#logo a {
+	background: url(images/logo.png) 10px 0px no-repeat;
+	background-size: 140px;
+	height: 140px;
+	padding-left: 170px;
+	color: #ffffff;
+	display: block;
+	font-size: 21px;
+	font-weight: normal;
+	@media screen and ($max-mobile-viewport) {
+		background-position: 0 0;
+		background-size: 80px;
+		padding-left: 90px;
+	}
+	span.site-title {
+		font-family: $title-font-family;
+		padding-top: 5px;
+		font-size: 18px;
+		display: block;
+		line-height: 50px;
+		text-transform: uppercase;
+	}
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+#toplinks {
+	background: transparent;
+	box-shadow: none;
+	border: none;
+	padding: 0;
+	a {
+		line-height: 52px;
+		color: white;
+		font-size: 16px;
+	}
+	.sep {
+		display: none;
+	}
+	.registration {
+		display: none;
+	}
+	@media screen and ($max-mobile-viewport) {
+		a {
+			display: inline-block;
+			padding-top: 5px;
+			padding-right: 5px;
+			line-height: 100%;
+		}
+		.connected-user {
+			display: none;
+		}
+	}
+}

static/rixensart/_vars.scss

@@ -10,8 +10,9 @@ $button-color: white;
 $cell-entry-hover-effect: left-to-right;
 $theme2019: true;
 $link-color: $primary-color;
-$font-family: "Din";
-$border-radius: 3px;
+$toplinks-color: #e6e6e6;
+$font-family: "Lato";
+$border-radius: 0;
 
 /*BASKET*/
 
@@ -42,10 +43,10 @@ $toplinks-shadow: none;
 /*LOGIN*/
 
 /*MENU*/
-$nav-background: #f2f2f2;
-$nav-color: #333;
+$nav-background: $primary-color;
+$nav-color: white;
 $nav-active-color: $primary-color;
-$nav-item-selected-color: #fff;
+$nav-item-selected-color: black;
 $nav-text-uppercase: uppercase;
 
 /*MENU RESPONSIVE*/
@@ -55,7 +56,7 @@ $nav-menu-color: $primary-color;
 /*PWA*/
 $nav-mobile-bottom-bar-height: 75px;
 $nav-mobile-bottom-bar-background: $primary-color;
-$nav-mobile-bottom-bar-color: #fff;
+$nav-mobile-bottom-bar-color: white;
 $nav-mobile-bottom-bar-item-hover-background: $primary-color;
 
 /*RESPONSIVE*/

static/rixensart/style.scss

@@ -5,7 +5,7 @@
 @import "../imio/steps-config";
 
 @import "../../publik-base-theme/static/includes/publik";
-@import "../../publik-base-theme/static/includes/fonts/din";
+@import "../../publik-base-theme/static/includes/fonts/lato";
 
 @import "../imio/form-buttons";
 @import "../imio/header";
@@ -19,3 +19,4 @@
 @import "../imio/responsive";
 
 @import "custom";
+@import "header";