armentieres: fix register block layout (#70745)

README

@@ -147,6 +147,14 @@ copyright notices:
   #
   # https://www.fontsquirrel.com/license/khand
 
+* Archivo Black
+  # Copyright (c) 2012-2015, Omnibus-Type (www.omnibus-type.com|omnibus.type@gmail.com)
+  # with Reserved Font Name "Archivo Black";
+  #
+  # This Font Software is licensed under the SIL Open Font License, Version 1.1.
+  #
+  # https://www.fontsquirrel.com/license/archivo-black
+
 * Archivo Narrow
   # Copyright (c) 2012, Omnibus-Type (omnibus.type@gmail.com),
   # with Reserved Font Name "Archivo";
@@ -394,6 +402,13 @@ copyright notices:
   #
   # https://www.fontsquirrel.com/license/rubik
 
+* Viga
+  # Copyright (c) 2011 Fontstage (info@fontstage.com), with Reserved Font Name “Viga”
+  #
+  # This Font Software is licensed under the SIL Open Font License, Version 1.1.
+  #
+  # https://www.fontsquirrel.com/license/viga
+
 * Manrope
   # Copyright 2018 The Manrope Project Authors. All rights reserved
   #

static/armentieres/_authentic.scss

@@ -0,0 +1,23 @@
+.block-password {
+	input {
+		height: 45px;
+		border:none;
+		box-shadow: none;
+		background: $gray-xlight;
+
+		&:focus {
+			border: 1px solid $gray-dark;
+			box-shadow: none;
+		}
+	}
+
+	.submit-button {
+		height: 45px;
+		background: white;
+		border: solid 1px $gray-dark;
+
+		&:hover {
+			border: 1px solid transparent;
+		}
+	}
+}

static/armentieres/_combo.scss

@@ -0,0 +1,545 @@
+// Combo page header
+.arm-page-header {
+	background: url('/assets/page-header:background');
+	background-size: cover;
+	background-position: center;
+	color: white;
+
+	&--default {
+		display: none;
+	}
+
+	&--content {
+		.cell {
+			padding: 0 5rem 2rem 5rem;
+		}
+	}
+
+	@media ($max-mobile-viewport) {
+		display: none;
+	}
+}
+
+// Carrousel
+.carrousel {
+	&.cell {
+		padding: 0
+	}
+
+	&-item {
+		padding: 0.5rem 4rem !important;
+	}
+
+	&-nav label {
+		background-color: white;
+	}
+
+	&-item-title {
+		line-height: 1 !important;
+		font-size: $fz-1;
+	}
+
+	&-item-description {
+		max-width: 100% !important; // too complex selector in core
+	}
+}
+
+
+// Sidebar
+div#sidebar {
+	div.cell h2:first-child {
+		display: flex;
+		align-items: center;
+		color: $red;
+		font-size: $fz-3;
+		&::after {
+			content: '';
+			background: $gray-light;
+			flex-grow: 1;
+			height: 1px;
+			margin-left: 8px;
+		}
+	}
+
+	@media($max-mobile-viewport) {
+		display: none;
+	}
+}
+
+// Cells 
+%title {
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+}
+
+.gru-content div.cell {
+	h2:first-child:not(:only-child) {
+		border-bottom-left-radius: $border-radius;
+		border-bottom-right-radius: $border-radius;
+	}
+
+	&.foldable > div > h2:first-child {
+		height: 70px;
+		margin: 0;
+		padding-left: 30px;
+
+		display: flex;
+		align-items: center;
+
+		background: $yellow;
+		border: $yellow solid $gray;
+		color: black;
+		text-transform: none;
+
+		&:hover {
+			box-shadow: $widget-focus-box-shadow;
+		}
+
+		&::after {
+			right: 30px;
+			@media($max-mobile-viewport) {
+				right: 20px;
+			}
+		}
+	}
+
+	&.folded > div > h2:first-child {
+		border: 1px solid $gray-light;
+		background: transparent;
+
+		&::after {
+			color: $gray;
+		}
+	}
+
+	&.has-asset-picture {
+		position: relative;
+
+		> div > h2:first-child {
+			padding-left: 100px;
+
+			@media($max-mobile-viewport) {
+				padding-left: 60px;
+			}
+		}
+
+		picture img {
+			position: absolute;
+			top: 15px;
+			left: 30px;
+			height: 40px;
+			padding: 0;
+
+			@media($max-mobile-viewport) {
+				left: 20px;
+				height: 30px;
+				top: 18px;
+			}
+		}
+	}
+}
+
+//Link lists
+%cell-links-list {
+	> li > a {
+		padding: 0.8rem 1rem;
+		color: $gray-dark;
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
+
+div#rub_service div.category,
+div#services,
+div#account-management,
+#columns div.cell:not(.pk-button,.pk-big-button),
+#columns div.menucell,
+div.wcsformcell,
+div.wcsformsofcategorycell,
+div.wcscurrentdraftscell,
+div.wcscurrentformscell {
+	 .links-list {
+		 display: flex;
+		 justify-content: center;
+
+		 > ul {
+			 flex-basis: 764px;
+			 margin-top: 5px;
+			 display: flex;
+			 flex-direction: column;
+			 align-items: stretch;
+
+			 > li {
+				margin: 5px 0;
+				padding: 0;
+
+				display: flex;
+				align-items: center;
+
+				border: 1px solid $gray-light;
+				border-radius: $border-radius;
+				height: 50px;
+
+				@media($max-mobile-viewport) {
+					height: 70px;
+				}
+
+				a {
+					flex-grow: 1;
+					text-decoration: none;
+				}
+
+				&:hover {
+					box-shadow: $widget-focus-box-shadow;
+				}
+
+				&.required-authentication, &.external-link {
+					a{
+						padding-right: 2rem;
+
+						&::after {
+							position: absolute;
+							top: calc(50% - 16px / 2);
+							right: 25px;
+							height: 16px;
+							width: 16px;
+
+							content: '';
+
+							@media($max-mobile-viewport) {
+								right: 20px;
+							}
+						}
+					}
+				}
+
+				&.required-authentication a::after {
+					background: center / contain no-repeat url('/assets/authentication-required:icon');
+				}
+
+				&.external-link a::after {
+					background: center / contain no-repeat url('/assets/external-link:icon');
+				}
+
+				.description {
+					display: none;
+				}
+
+				&:not(:last-child) {
+					border-bottom: 1px solid $gray-light;
+				}
+			}
+		}
+	}
+
+	&.folded .links-list {
+		display: none;
+	}
+}
+
+// Search cell
+.gru-content div.searchcell {
+	.combo-search {
+		&--hint {
+			padding: 0;
+			margin-bottom: 1rem;
+		}
+
+		&--button {
+			display: none;
+		}
+	}
+
+	form {
+		padding: 0;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+
+		input[type="search"] {
+			position: relative;
+			padding-left: 2rem;
+			margin-right: 0;
+
+			&:focus {
+				background: $gray-xlight;
+				border: none;
+			}
+		}
+
+		&::before {
+			position: absolute;
+			top: 0.4rem;
+			left: 0.5rem;
+			z-index: 1;
+
+			background: transparent;
+			font-family: FontAwesome;
+			font-size: 1.2rem;
+			color: $gray;
+			content: "\f002";
+		}
+	}
+
+	.links-list ul li {
+		border-bottom: 1px solid $gray;
+	}
+}
+
+// Tracking code input cell
+.gru-content div.tracking-code-input-cell {
+	background: right / cover url('/assets/tracking-code-input:background');
+	div.wcs-tracking-code-input {
+		padding: 1rem 2rem;
+
+		h2:first-child {
+			color: black;
+			background: transparent;
+			font-size: $fz-4;
+			margin: 0;
+			padding: 0;
+
+			@media($max-mobile-viewport) {
+				text-align: center;
+			}
+		}
+
+		div {
+			padding: 0;
+
+			form {
+				display: flex;
+				flex-wrap: wrap;
+
+				p {
+					padding: 0;
+					margin: 0.5rem 0 1rem 0;
+				}
+
+				input {
+					width: 4rem;
+					margin: 0;
+					flex-grow: 99999;
+
+					border: transparent;
+					box-shadow: none;
+
+					@media ($min-desktop-viewport) {
+						border-top-right-radius: 0;
+						border-bottom-right-radius: 0;
+					}
+
+					@media ($max-mobile-viewport) {
+						width: 11rem;
+						margin-bottom: 0.5rem;
+					}
+				}
+
+				button {
+					@extend %black-button;
+
+					min-width: 10rem;
+					flex-grow: 1;
+					margin-right: 0;
+					@media ($min-desktop-viewport) {
+						border-top-left-radius: 0;
+						border-bottom-left-radius: 0;
+					}
+
+					&, &:hover {
+						color: white;
+					}
+				}
+			}
+		}
+	}
+}
+
+// Custom elements
+.arm-red {
+	color: $red;
+}
+
+@mixin custom-background-cell($background, $button-color) {
+	border: 1px solid transparent;
+	background: right / cover no-repeat url($background);
+	.pk-button, .pk-big-button {
+		@extend %black-button;
+		&, &:hover {
+			color: $button-color;
+		}
+	}
+}
+
+.gru-content .cell {
+	&.arm-report {
+		@include custom-background-cell('/assets/report:background', $secondary-color);
+		padding: 1rem 1rem;
+	}
+
+	&.arm-suggest {
+		@include custom-background-cell('/assets/suggest:background', $primary-color)
+	}
+
+	&.arm-register {
+		@include custom-background-cell('/assets/register:background', $primary-color)
+	}
+}
+
+.arm-report {
+	> div, &--content {
+		width: 100%;
+		height: 100%;
+	}
+
+	&--content {
+		display: grid;
+		grid-template-rows: 1fr auto;
+		grid-auto-columns: auto;
+		justify-items: stretch;
+		align-items: center;
+	}
+
+	&--picture {
+		grid-area: 1 / 1 / 3 / 2;
+
+		@media ($max-mobile-viewport) {
+			grid-area: 1 / 1 / 2 / 2;
+		}
+
+		width: 60px;
+		height: 60px;
+	}
+
+	&--hint {
+		grid-area: 1 / 2 / 2 / 3;
+		margin: 0 0 0 1rem !important;
+		font-weight: bold;
+	}
+
+	&--button {
+		@extend %inverted-button;
+
+		grid-area: 2 / 2 / 3 / 3;
+		@media ($max-mobile-viewport) {
+			grid-area: 2 / 1 / 3 / 3;
+		}
+
+		margin: 0.5rem 0;
+	}
+}
+
+.arm-suggest {
+	&--content {
+		height: 80px;
+		padding: 0.5rem 0 0.5rem 1rem;
+
+		display: grid;
+		grid-template-columns: 1fr auto;
+		grid-auto-rows: auto;
+		align-items: center;
+
+		@media($max-mobile-viewport) {
+			justify-items: stretch;
+			align-items: center;
+		}
+	}
+
+	&--title {
+		margin: 0 !important;
+		grid-area: 1 / 1 / 2 / 2;
+
+		@media($max-mobile-viewport) {
+			grid-area: 1 / 1 / 3 / 3;
+		}
+	}
+
+	&--text {
+		margin: 0 !important;
+		grid-area: 2 / 1 / 3 / 2;
+
+		@media($max-mobile-viewport) {
+			display: none;
+		}
+	}
+
+	&--button {
+		@extend %black-button;
+		height: 40px;
+		margin: 0;
+
+		grid-area: 1 / 2 / 3 / 3;
+
+		@media($max-mobile-viewport) {
+			height: 100%;
+			display: flex;
+			justify-content: end;
+
+			grid-area: 1 / 1 / 3 / 3;
+
+			background: transparent !important;
+			color: transparent !important;
+		}
+
+		&::after {
+			margin-left: 1rem;
+			font-family: FontAwesome;
+			font-size: $fz-small;
+			color: white;
+			content: "\f054";
+
+			@media($max-mobile-viewport) {
+				font-size: $fz-3;
+			}
+		}
+	}
+}
+
+.gru-content .arm-register {
+	margin-top: 1rem !important;
+
+	&--content {
+		height: 200px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.pk-button {
+		height: 45px !important;
+		padding: 10px 1rem !important;
+		background: white !important;
+		color: $gray-dark !important;
+
+		&:hover {
+			background: $yellow !important;
+		}
+
+		&::after {
+			content: "\f054";
+			font-family: FontAwesome;
+			font-size: $fz-small;
+			margin-left: 1rem;
+		}
+	}
+}
+
+@mixin arm-link-icon($name) {
+	& > li.arm-icon-#{$name} {
+		display: flex;
+		align-items: center;
+
+		&::before {
+			width: 28px;
+			height: 28px;
+			background: center / cover no-repeat url(img/icon-#{$name}.png);
+			content: '';
+		}
+	}
+}
+
+%cell-links-list {
+	@include arm-link-icon('user');
+}

static/armentieres/_common.scss

@@ -0,0 +1,85 @@
+// Typos
+* {
+	transition: $transition;
+}
+
+h1 {
+	font-size: $fz-1;
+	font-family: 'Archivo Black', 'Rubik', sans-serif;
+	margin-top: 0;
+}
+
+h2 {
+	font-size: $fz-2;
+	font-family: 'Viga', 'Rubik', sans-serif;
+	margin-top: 0;
+}
+
+h3 {
+	font-size: $fz-3;
+	font-family: 'Viga', 'Rubik', sans-serif;
+	margin-top: 0;
+}
+
+h4 {
+	font-size: $fz-4;
+	font-family: 'Viga', 'Rubik', sans-serif;
+	margin-top: 0;
+}
+
+li {
+	line-height: 1.2;
+}
+
+// Layout
+div#main-content-wrapper {
+	max-width: none;
+
+	@media ($max-mobile-viewport) {
+		margin-top: $header-height;
+	}
+}
+
+.central-content {
+	max-width: $width;
+	clear: both;
+	margin: 0 auto;
+}
+
+@media ($min-desktop-viewport) {
+	.gru-content {
+		padding: 3rem 0.5rem 0 0.5rem;
+	}
+}
+
+// Notices
+.errornotice, .warningnotice, .successnotice, .infonotice {
+	border-radius: $border-radius;
+	padding: 25px 60px;
+	color: $gray-dark;
+
+	a {
+		color: $red;
+	}
+
+	&::before {
+		top: 15px;
+		left: 20px;
+		right: auto;
+		font-size: 30px;
+	}
+}
+
+.errornotice, .warningnotice {
+	&::before {
+		color: $red;
+	}
+}
+
+.infonotice::before {
+	color: $yellow;
+}
+
+.successnotice::before {
+	color: $green-dark;
+}

static/armentieres/_custom.scss

@@ -1,673 +0,0 @@
-//
-// Typo
-//
-h1 {
-	font-size: $fz-1;
-}
-
-h2 {
-	font-size: $fz-2;
-}
-
-h3 {
-	font-size: $fz-3;
-}
-
-//
-// Header
-//
-div#top {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	padding-top: 0.5rem;
-}
-
-#logo{
-	@media($max-mobile-viewport) {
-		padding-left: 0;
-	}
-}
-
-nav.site-nav {
-	flex-grow: 1;
-	@media($max-mobile-viewport) {
-		position: absolute;
-		top: 75px;
-		right: 10px;
-	}
-}
-
-div.gru-nav > ul {
-	margin: 0;
-	@media($max-mobile-viewport) {
-		position: fixed;
-		top: 0;
-		right: 0;
-		z-index: 10;
-	}
-
-	li a {
-		font-weight: normal;
-		padding: 30px 20px;
-	}
-}
-
-div#header {
-	max-width: calc(#{$width} + 100px);
-}
-
-div#toplinks {
-	position: static;
-	padding-top: 1rem;
-	padding-bottom: 1rem;
-	padding-right: 2rem;
-	@media($max-mobile-viewport) {
-		flex-grow: 1;
-		padding-right: 50px;
-	}
-
-	.logged-in, .login {
-		display: flex;
-		flex-wrap: wrap;
-
-		@media($max-mobile-viewport) {
-			span {
-				display: flex;
-				a:first-child {
-					flex-grow: 1;
-				}
-			}
-		}
-
-		> * {
-			margin: 0 .3rem;
-		}
-
-		a {
-			color: black;
-			font-weight: bold;
-			display: flex;
-			align-items: center;
-		}
-
-		&::before {
-			font-family: FontAwesome;
-			content: '';
-			width: 1.5rem;
-			height: 1.5rem;
-			background: url('/assets/profile:icon');
-			margin-right: 0.5rem;
-		}
-	}
-}
-
-.arm-page-header {
-	background: url('/assets/page-header:background');
-	background-size: cover;
-	background-position: center;
-	color: white;
-
-	h1 {
-		font-size: 48em / $base-font;
-	}
-
-	&--default {
-		display: none;
-	}
-
-	&--content {
-		max-width: $width;
-		clear: both;
-		margin: 0 auto;
-		.cell {
-			padding: 3rem 0rem;
-		}
-	}
-
-	@media ($max-mobile-viewport) {
-		display: none;
-	}
-}
-
-//
-// Content
-//
-div#main-content-wrapper {
-	max-width: none;
-}
-
-.central-content {
-	max-width: $width;
-	clear: both;
-	margin: 0 auto;
-}
-
-@media ($min-desktop-viewport) {
-	.gru-content {
-		padding: 3rem 0.5rem 0 0.5rem;
-	}
-}
-
-div#sidebar {
-	div.cell h2:first-child {
-		display: flex;
-		align-items: center;
-		&::after {
-			content: '';
-			background: $gray-light;
-			flex-grow: 1;
-			height: 1px;
-			margin-left: 8px;
-		}
-	}
-
-	@media($max-mobile-viewport) {
-		display: none;
-	}
-}
-
-.errornotice, .warningnotice, .successnotice, .infonotice {
-	border-radius: $border-radius;
-	padding-top: 2rem;
-	padding-bottom: 2rem;
-	padding-right: 2rem;
-
-	a {
-		color: $red;
-	}
-
-	&::before {
-		top: calc(50% - 1rem);
-	}
-}
-
-.errornotice, .warningnotice {
-	&::before {
-		color: $red;
-	}
-}
-
-.infonotice::before {
-	color: $yellow;
-}
-
-.successnotice::before {
-	color: $green-dark;
-}
-
-//
-// Footer
-//
-#footer-wrapper {
-	padding: 3rem 1.5rem 0;
-	#footer {
-		position: relative;
-	}
-
-	.back-top {
-		position: absolute;
-		top: -4.5rem;
-		right: 0rem;
-		background: $primary-color;
-		border-radius: $border-radius;
-		padding: 0.5rem;
-
-		&--link {
-			color: black;
-
-			&:hover {
-				text-decoration: none;
-			}
-
-			&::before {
-				font-size: 1.8rem;
-			}
-		}
-
-		&--link-label {
-			display: none;
-		}
-
-
-	}
-
-}
-
-.arm-footer-bottom {
-	padding: 1rem;
-	background: $gray;
-	color: white;
-	.menu-cell {
-		text-align: center;
-		li {
-			display: inline-block;
-			border: none;
-			a {
-				border-radius: 0;
-				border: none;
-				color: white;
-				padding: 0.5rem 2rem;
-				&:hover {
-					color: white;
-				}
-			}
-		}
-	}
-}
-
-//
-// Cells
-//
-%title {
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-}
-
-%cell-links-list {
-	> li > a {
-		padding-left: 0;
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-}
-
-div#rub_service div.category,
-div#services,
-div#account-management,
-#columns div.cell:not(.pk-button,.pk-big-button) div.links-list,
-#columns div.menucell,
-div.wcsformcell,
-div.wcsformsofcategorycell,
-div.wcscurrentdraftscell,
-div.wcscurrentformscell {
-	 .links-list > ul > li {
-		margin: 0.5rem;
-		border: 1px solid $gray-light;
-		border-radius: $border-radius;
-		padding: 0rem 0.8rem;
-		a {
-			text-decoration: none;
-		}
-
-		&:hover {
-			box-shadow: $widget-focus-box-shadow;
-		}
-
-		&.required-authentication, &.external-link {
-			a{
-				padding-right: 2rem;
-
-				&::after {
-					content: '';
-					height: 1.3rem;
-					width: 1.3rem;
-					position: absolute;
-					right: 0.7rem;
-				}
-			}
-		}
-
-		&.required-authentication a::after {
-			background: center / contain no-repeat url('/assets/authentication-required:icon');
-		}
-
-		&.external-link a::after {
-			background: center / contain no-repeat url('/assets/external-link:icon');
-		}
-
-		&:not(:last-child) {
-			border-bottom: 1px solid $gray-light;
-		}
-	}
-}
-
-.gru-content div.cell {
-	h2:first-child:not(:only-child) {
-		border-bottom-left-radius: $border-radius;
-		border-bottom-right-radius: $border-radius;
-	}
-
-	&.foldable > div > h2:first-child {
-		background: $yellow;
-		border: $yellow solid $gray;
-		color: black;
-		display: flex;
-		font-size: $fz-3;
-		align-items: center;
-		height: 4rem;
-		margin: 0;
-		padding-left: 1rem;
-		text-transform: none;
-
-		&:hover {
-			box-shadow: $widget-focus-box-shadow;
-		}
-	}
-
-	&.folded > div > h2:first-child {
-		border: 1px solid $gray;
-		background: transparent;
-
-		&::after {
-			color: $gray;
-		}
-	}
-
-	&.has-asset-picture {
-		position: relative;
-
-		> div > h2:first-child {
-			padding-left: 6rem;
-		}
-
-		picture {
-			height: 3rem;
-			left: 1.5rem;
-			position: absolute;
-			top: 0rem;
-			width: 3rem;
-		}
-	}
-}
-
-.gru-content div.searchcell form {
-	padding: 0;
-	input[type="search"] {
-		background: $gray-xlight;
-		border: none;
-
-		&:focus {
-			background: $gray-xlight;
-			border: none;
-		}
-	}
-
-	.combo-search--button {
-		display: none;
-	}
-}
-
-.gru-content div.tracking-code-input-cell {
-	background: right / cover url('/assets/tracking-code-input:background');
-	div.wcs-tracking-code-input {
-		padding: 1rem;
-		div {
-			padding: 0;
-
-			form {
-				display: flex;
-				flex-wrap: wrap;
-				input {
-					flex-grow: 99999;
-					width: 11rem;
-				}
-				button {
-					flex-grow: 1;
-					@extend %black-button;
-					margin-right: 0;
-					min-width: 10rem;
-
-					&, &:hover {
-						color: $primary-color;
-					}
-				}
-			}
-		}
-	}
-
-	h2:first-child {
-		color: black;
-		background: transparent;
-		font-size: $fz-3;
-		margin-bottom: 0.5rem;
-	}
-
-}
-
-/// WCS
-.arm-form-header {
-	background: $gray-xlight;
-
-	&--content {
-		max-width: $width;
-		margin: 0 auto;
-		padding: 1.5rem 0 2.5rem 0;
-	}
-
-	&--title {
-		margin: 0;
-		font-weight: 900;
-		max-width: 35rem;
-		text-transform: uppercase;
-		font-size: 48em / $base-font;
-	}
-
-	&--description {
-		@media($max-mobile-viewport) {
-			display: none;
-		}
-		margin-top: 4rem;
-	}
-
-	@media($max-mobile-viewport) {
-		&--content {
-			padding: 1rem 0 1rem 0;
-		}
-
-		&--title {
-			font-size: $fz-1;
-			text-align: center;
-		}
-	}
-}
-
-div#tracking-code {
-	padding: 1rem;
-	background: right / cover url('/assets/tracking-code:background');
-	border-radius: $border-radius;
-	.tracking-code-part {
-		display: flex;
-		flex-direction: column;
-		h3 {
-			background: transparent;
-			color: black;
-			text-transform: none;
-			text-align: center;
-			margin-bottom: 0.7rem;
-		}
-		a {
-			text-align:center;
-			background: white;
-			padding: 0.5rem;
-			border-radius: $border-radius;
-			font-weight: bold;
-		}
-	}
-
-	form[action="removedraft"] {
-		display: flex;
-		justify-content: center;
-		.form-discard-draft {
-			@extend %black-button;
-			margin-right: 0;
-			&, &:hover {
-				color: $primary-color;
-			}
-		}
-	}
-}
-
-%button {
-	box-shadow: none;
-	padding: 0.5rem 1.5rem;
-}
-
-%black-button {
-	@extend %button;
-	background: black;
-	&:hover {
-		background: black;
-	}
-}
-
-%gray-button {
-	background: $gray-xlight;
-	color: black;
-	&:hover {
-		background: $gray-xlight;
-	}
-}
-
-.wcs-step {
-	border-radius: 0;
-	align-items: center;
-	&.current {
-		font-weight: normal;
-	}
-
-	&--marker-nb {
-		font-weight: bold;
-	}
-
-	@media($min-desktop-viewport) {
-		&.step-before::after {
-			content: '\f00c';
-			font-family: FontAwesome;
-			margin: 0rem 1rem;
-			color: $green;
-		}
-	}
-}
-
-.field {
-	&--label .required {
-		margin: 0;
-		color: $primary-color;
-	}
-}
-
-input[type=radio], input[type=checkbox] {
-	&:focus {
-		box-shadow: none;
-	}
-}
-
-input[readonly], select[readonly], textarea[readonly] {
-	border-radius: $widget-border-radius;
-	background: transparent;
-	border: $widget-border;
-}
-
-input::placeholder {
-	font-style: italic;
-}
-
-@mixin form-button-left($symbol) {
-	&::before {
-		content: $symbol;
-		font-family: FontAwesome;
-		font-size: 0.7rem;
-		margin-right: 1rem;
-	}
-}
-
-@mixin form-button-right($symbol) {
-	&::after {
-		content: $symbol;
-		font-family: FontAwesome;
-		font-size: 0.7rem;
-		margin-left: 1rem;
-	}
-}
-
-.form-content {
-	&--body .buttons.submit {
-		.form-next{
-			@include form-button-right('\f054');
-		}
-
-		.form-previous {
-			@include form-button-left('\f053');
-		}
-
-		.form-submit {
-			@include form-button-left('\f00c');
-		}
-
-		.form-discard, .cancel {
-			@include form-button-left('\f00d');
-		}
-	}
-}
-
-div.form-validation div.page {
-	border-radius: $border-radius;
-}
-
-.back-home-button {
-	display: flex;
-	justify-content: center;
-	a {
-		@extend %button;
-		&::after {
-			content: '\f0e2';
-			font-family: FontAwesome;
-			margin-left: 1rem;
-		}
-	}
-}
-
-///
-/// Custom classes
-///
-.arm-salmon {
-	color: $salmon;
-}
-
-@mixin custom-background-cell($background, $button-color) {
-	border: 1px solid transparent;
-	background: right / cover no-repeat url($background);
-	.pk-button, .pk-big-button {
-		@extend %black-button;
-		&, &:hover {
-			color: $button-color;
-		}
-	}
-}
-
-.gru-content .cell {
-	&.arm-report {
-		@include custom-background-cell('/assets/report:background', $secondary-color);
-		font-size: 120%;
-		padding: 2rem;
-	}
-
-	&.arm-suggest {
-		@include custom-background-cell('/assets/suggest:background', $primary-color)
-	}
-
-	&.arm-register {
-		@include custom-background-cell('/assets/register:background', $primary-color)
-	}
-}
-
-@mixin arm-link-icon($name) {
-	& > li.arm-icon-#{$name} {
-		display: flex;
-		align-items: center;
-
-		&::before {
-			content: '';
-			width: 32px;
-			height: 32px;
-			background: center / cover no-repeat url(img/icon-#{$name}.png);
-			margin-right: 0.8rem;
-		}
-	}
-}
-
-%cell-links-list {
-	@include arm-link-icon('user');
-}

static/armentieres/_footer.scss

@@ -0,0 +1,90 @@
+#footer-wrapper {
+	padding: 3rem 1.5rem;
+	#footer {
+		position: relative;
+	}
+
+	.back-top {
+		position: absolute;
+		top: -4.5rem;
+		right: 0rem;
+		width: 50px;
+		height: 50px;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		background: $primary-color;
+		border-radius: 13px;
+
+		&--link {
+			color: black;
+
+			&:hover {
+				text-decoration: none;
+			}
+
+			&::before {
+				font-size: 1.8rem;
+			}
+		}
+
+		&--link-label {
+			display: none;
+		}
+
+
+	}
+
+}
+
+.arm-footer-bottom {
+
+	background: $gray;
+	color: white;
+
+
+	.link-list-cell {
+		ul {
+			height: 40px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			@media($max-mobile-viewport) {
+				height: 155px;
+				flex-direction: column;
+			}
+
+			text-align: center;
+			li {
+				display: inline-block;
+				border: none;
+				a {
+					padding: 0.5rem 2rem;
+					border-radius: 0;
+					border: none;
+					color: white;
+					font-size: $fz-small;
+					&:hover {
+						color: white;
+					}
+				}
+			}
+		}
+	}
+}
+
+// Custom classes
+.arm-footer-logos {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 20px;
+
+	@media($max-mobile-viewport) {
+		flex-direction: row-reverse;
+		flex-wrap: wrap;
+	}
+}

static/armentieres/_header.scss

@@ -0,0 +1,190 @@
+div#top {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	padding: 0 15px;
+
+	@media($max-mobile-viewport) {
+		flex-direction: column;
+	}
+}
+
+div#header {
+	padding: 0;
+	max-width: calc(#{$width} + 100px);
+}
+
+#logo{
+	&.has-logo a::before {
+		background-position: center;
+		margin-top: 15px;
+		margin-right: 80px;
+	}
+
+	@media($max-mobile-viewport) {
+		width: 100%;
+		padding-left: 0;
+	}
+}
+
+nav.site-nav {
+	flex-grow: 1;
+}
+
+div.gru-nav {
+	display: flex;
+	align-items: center;
+
+	.gru-nav-button {
+		top: 15px;
+		right: 15px;
+		left: auto;
+
+		&.toggled .icon-bar {
+			background: $nav-button-color;
+		}
+
+		& + ul {
+			position: static;
+			width: 100%;
+
+			&:before {
+				height: 0;
+			}
+		}
+	}
+
+	.menu {
+		position: static;
+		margin: 0;
+		flex-grow: 1;
+
+		&--link {
+			padding: 0;
+
+			display: flex;
+			align-items: center;
+
+			font-weight: normal;
+
+			@media ($min-desktop-viewport) {
+				height: $header-height;
+				margin-right: 35px;
+			}
+		}
+	}
+
+	.submenu {
+		&--link {
+			padding: 20px 25px;
+			font-weight: normal;
+		}
+	}
+}
+
+@media($max-mobile-viewport) {
+	// Header always visible on scroll
+	div#top {
+		position: fixed;
+		z-index: 1001;
+		width: 100%;
+		height: $header-height;
+
+		background: white;
+	}
+
+	nav.site-nav {
+		position: absolute;
+		top: $header-height;
+		left: 0;
+		width: 100%;
+	}
+
+	div.gru-nav {
+		height: 0;
+
+		&.toggled {
+			height: calc(100vh - #{$header-height});
+		}
+
+		// right-to-left slide menu
+		> .gru-nav-button + ul {
+			top: $header-height;
+			transform: translateX(100vw);
+		}
+
+		.menu, .submenu {
+			&--item {
+				padding: 0;
+				border-top: 1px solid $gray;
+
+				&, &:hover, &:focus-within, &.selected {
+					> a {
+						border-bottom: none;
+						color: $gray-dark;
+					}
+				}
+			}
+
+			&--link {
+				padding: 1rem 1.5rem;
+				font-size: $font-size;
+
+				&:after {
+					position: absolute;
+					right: 3.5rem;
+
+					content: '\f054';
+					font-family: FontAwesome;
+					font-size: 0.6rem;
+				}
+			}
+		}
+
+		.submenu {
+			&--link {
+				padding-left: 3rem;
+			}
+		}
+	}
+}
+
+div#toplinks {
+	position: static;
+
+	max-width: 100%;
+	padding: 1rem 2rem;
+
+	@media($max-mobile-viewport) {
+		padding: 0;
+
+		display: flex;
+		flex-grow: 1;
+		justify-content: center;
+	}
+
+	.logged-in, .login {
+		display: flex;
+		flex-wrap: wrap;
+
+		> * {
+			margin: 0 .3rem;
+		}
+
+		a {
+			color: black;
+			font-weight: 500;
+			display: flex;
+			align-items: center;
+		}
+
+		&::before {
+			font-family: FontAwesome;
+			content: '';
+			width: 1.5rem;
+			height: 1.5rem;
+			background: url('/assets/profile:icon');
+			margin-right: 0.5rem;
+		}
+	}
+}

static/armentieres/_vars.scss

@@ -1,75 +1,92 @@
-$gray-xlight: #f2f2f2;
-$gray-light: #cccccc;
-$gray: #919191;
 $gray-dark: #333333;
-$salmon: #ec8771;
-$yellow: #ecbe54;
-$yellow-light: #fdf4da;
-$red: #e95f5c;
-$red-light: #fae1db;
+$gray-light: #b3b3b3;
+$gray-xlight: #e6e6e6;
+$gray: #919191;
 $green-dark: #557c40;
-$green: #9ecf87;
 $green-light: #e6efdf;
+$green: #9ecf87;
+$red-light: #fae1db;
+$red: #eb8772;
+$yellow-light: #fdf4da;
+$yellow: #ebbe55;
 
-$primary-color: $salmon;
+$primary-color: $red;
 $secondary-color: $yellow;
 
 
 /// Typo
-$font-family: Lato, sans-serif;
+$font-family: Rubik, sans-serif;
 $link-color: $primary-color;
 $link-decoration: none;
 $link-hover-decoration: underline;
 
 $base-font: 16;
-$fz-1: 30em / $base-font;
-$fz-2: 20em / $base-font;
-$fz-3: 18em / $base-font;
-$fz-4: 14em / $base-font;
+$fz-1: 1rem * 60 / 16;
+$fz-2: 1rem * 37 / 16;
+$fz-3: 1rem * 26 / 16;
+$fz-4: 1rem * 22 / 16;
 $fz-small: 14em / $base-font;
 $fz-xsmall: 11em / $base-font;
-
-$font-size: 100% / ( 15 / $base-font );
+$font-size: 1rem;
 
 // General
+$width: 1280px;
+$mobile-limit: 800px;
 $border-radius: 5px;
 $notification_error_color: $red-light;
 $notification_warning_color: #e5e5e5;
 $notification_success_color: $green-light;
 $notification_info_color: $yellow-light;
+$notification-icon-size: 2rem;
 $sidebar-columns-gutter: 50px;
 $back-top-display: block;
 $back-top-icon-character: "\f062";
+$transition: 0.2s;
 
 // Header
-$header-logo-size: 250px 60px;
+$header-logo-size: 187px 47px;
+$header-height: 100px;
 $toplinks-style: none;
 $sidebar-width: 26%;
 $nav-after-image: false;
 
-$nav-color: $gray;
-$nav-submenu-color: $gray;
-$nav-item-hover-background: transparent;
-$nav-item-selected-mode: bottom-border;
-$nav-item-selected-border: $primary-color 3px solid;
-$nav-item-hover-border: $primary-color 3px solid;
-$nav-button-background: transparent;
-$nav-button-color: $primary-color;
 $nav-border-color: transparent;
-$nav-mobile-menu-item-hover-color: black;
-$nav-button-bar-height: 3px;
+$nav-button-background: transparent;
+$nav-button-bar-height: 4px;
+$nav-button-color: $primary-color;
+$nav-color: $gray;
+$nav-item-hover-background: transparent;
+$nav-item-hover-border: $primary-color 4px solid;
+$nav-item-hover-color: #333333;
+$nav-item-selected-border: $primary-color 4px solid;
+$nav-item-selected-color: #333333;
+$nav-item-selected-mode: bottom-border;
 $nav-mobile-bottom-bar-item-hover-color: black;
 $nav-mobile-bottom-bar-item-selected-background: $primary-color;
 $nav-mobile-bottom-bar-item-selected-color: black;
+$nav-mobile-menu-background: white;
+$nav-mobile-menu-item-color: $gray;
+$nav-mobile-menu-item-hover-color: $gray-dark;
+$nav-submenu-color: $gray;
+$responsive-menu: left-to-right;
 
 // Title
 $title-padding: 0;
-$title-color: $primary-color;
-$title-font-size: $fz-2;
+$title-color: black;
+$title-font-size: $fz-4;
+$title-font-family: 'Viga', sans-serif;
 $title-transform: uppercase;
 $title-weight: 700;
 $title-background: transparent;
 
+// Carrousel
+$carrousel-height: 290px;
+$carrousel-item-mask-color: transparent;
+$carrousel-text-position: middle middle;
+$carrousel-navigation-color: $red;
+$carrousel-navigation-bullet-size: 10px;
+$carrousel-arrows: none;
+
 // Cells
 $cell-border: none;
 $cell-entry-color: black;
@@ -80,6 +97,7 @@ $cell-entry-border: none;
 
 $widget-focus-outline: none;
 $widget-focus-box-shadow: 0 0 5px 2px $gray-light;
+$widget-padding: 0.45rem 1rem;
 
 // Footer
 $footer-background: $gray-dark;

static/armentieres/_wcs.scss

@@ -0,0 +1,244 @@
+// WCS page header
+.arm-form-header {
+	background: $gray-xlight;
+
+	&--content {
+		max-width: $width;
+		margin: 0 auto;
+		padding: 1.5rem 0 2.5rem 0;
+	}
+
+	&--title {
+		margin: 0;
+		max-width: 35rem;
+		text-transform: uppercase;
+		font-size: $fz-1;
+	}
+
+	&--description {
+		@media($max-mobile-viewport) {
+			display: none;
+		}
+		margin-top: 4rem;
+	}
+
+	@media($max-mobile-viewport) {
+		&--content {
+			padding: 1rem 0 1rem 0;
+		}
+
+		&--title {
+			text-align: center;
+		}
+	}
+}
+
+// Tracking code
+div#tracking-code {
+	padding: 1rem;
+	background: right / cover url('/assets/tracking-code:background');
+	border-radius: $border-radius;
+	.tracking-code-part {
+		display: flex;
+		flex-direction: column;
+		h3 {
+			background: transparent;
+			color: black;
+			text-transform: none;
+			text-align: center;
+			margin-bottom: 0.7rem;
+		}
+		a {
+			text-align:center;
+			background: white;
+			padding: 0.5rem;
+			border-radius: $border-radius;
+			font-weight: bold;
+		}
+	}
+
+	form[action="removedraft"] {
+		display: flex;
+		justify-content: center;
+		.form-discard-draft {
+			@extend %black-button;
+			margin-right: 0;
+			&, &:hover {
+				color: $primary-color;
+			}
+		}
+	}
+}
+
+// Widgets
+%button {
+	box-shadow: none;
+	height: 35px;
+	vertical-align: center;
+	@media($max-mobile-viewport) {
+		height: 45px;
+	}
+
+	&:hover {
+		box-shadow: none;
+		text-decoration: none;
+	}
+}
+
+%black-button {
+	@extend %button;
+	background: black;
+	color: white;
+	&:hover {
+		background: black;
+		color: white;
+	}
+}
+
+%gray-button {
+	background: $gray-xlight;
+	color: black;
+	&:hover {
+		background: $gray-xlight;
+	}
+}
+
+.field {
+	&--label .required {
+		margin: 0;
+		color: $primary-color;
+	}
+}
+
+input, input[type="search"], textarea, select {
+	transition: $transition;
+}
+
+input[type=radio], input[type=checkbox] {
+	&:focus {
+		box-shadow: none;
+	}
+}
+
+input[readonly], select[readonly], textarea[readonly] {
+	border-radius: $widget-border-radius;
+	background: transparent;
+	border: $widget-border;
+}
+
+input::placeholder {
+	font-style: italic;
+}
+
+@mixin form-button-left($symbol) {
+	&::before {
+		content: $symbol;
+		font-family: FontAwesome;
+		margin-right: 1rem;
+	}
+}
+
+@mixin form-button-right($symbol) {
+	&::after {
+		content: $symbol;
+		font-family: FontAwesome;
+		margin-left: 1rem;
+	}
+}
+
+.form-content {
+	&--body .buttons.submit {
+		@media($max-mobile-viewport) {
+			display: flex;
+			flex-direction: column;
+			align-items: stretch;
+
+			.content {
+				width: 100%;
+
+				button { width: 100%; }
+			}
+		}
+
+		.form-next{
+			@include form-button-right('\f054');
+		}
+
+		.form-previous {
+			@include form-button-left('\f053');
+		}
+
+		.form-submit {
+			@include form-button-left('\f00c');
+		}
+
+		.form-discard, .cancel {
+			@include form-button-left('\f00d');
+		}
+	}
+}
+
+.back-home-button {
+	display: flex;
+	justify-content: stretch;
+
+	a {
+		@extend %button;
+
+		width: 100%;
+		margin: 0 0.5rem;
+
+		&::after {
+			content: '\f0e2';
+			font-family: FontAwesome;
+			margin-left: 1rem;
+		}
+	}
+}
+
+// Steps
+.wcs-step {
+	border-radius: 0;
+	align-items: center;
+	&.current {
+		font-weight: normal;
+	}
+
+	&--marker-nb {
+		font-weight: bold;
+	}
+
+	@media($min-desktop-viewport) {
+		&.step-before::after {
+			content: '\f00c';
+			font-family: FontAwesome;
+			margin: 0rem 1rem;
+			color: $green;
+		}
+	}
+}
+
+div.form-validation, div#summary{
+	div.page {
+		border-radius: $border-radius;
+		background: $gray-xlight;
+		padding: 1rem 1rem;
+		margin: 1rem 0;
+	}
+}
+
+div#summary {
+	&::after {
+		width: 100%;
+		height: 1px;
+		display: inline-block;
+		background: $gray-dark;
+		content: '';
+	}
+}
+
+.timetable-widget {
+	.head {
+		font-size: $fz-small;
+	}
+}

static/armentieres/style.scss

@@ -1,5 +1,14 @@
 @charset "UTF-8";
 
+@import '../includes/fonts/archivo-black';
+@import '../includes/fonts/rubik';
+@import '../includes/fonts/viga';
+
 @import 'vars';
 @import '../includes/publik';
-@import 'custom';
+@import 'authentic';
+@import 'combo';
+@import 'common';
+@import 'footer';
+@import 'header';
+@import 'wcs';

static/includes/fonts/_archivo-black.scss

@@ -0,0 +1,11 @@
+@mixin archivoblack-font($style) {
+	@font-face {
+		font-family: 'Archivo Black';
+		src: url('/static/fonts/ArchivoBlack/archivoblack-#{$style}-webfont.woff2') format('woff2');
+		font-weight: 400;
+		font-style: $style;
+	}
+}
+
+@include archivoblack-font(normal);
+@include archivoblack-font(italic);

static/includes/fonts/_viga.scss

@@ -0,0 +1,6 @@
+@font-face {
+	font-family: 'Viga';
+	src: url('/static/fonts/Viga/viga-regular-webfont.woff2') format('woff2');
+	font-weight: 400;
+	font-style: regular;
+}

templates/variants/armentieres/combo/page_template.html

@@ -2,7 +2,7 @@
 
 {% block content-pre %}
   <header class="arm-page-header">
-    <div class="arm-page-header--content">{% placeholder "page-header" name="En-tête de la page"%}</div>
+    <div class="arm-page-header--content">{% placeholder "page-header" name="En-tête de la page" acquired=True optional=True %}</div>
   </header>
   {%skeleton_extra_placeholder after-header %}
 {% end_skeleton_extra_placeholder %}

templates/variants/armentieres/combo/search-cell.html

@@ -0,0 +1,8 @@
+{% extends "combo/search-cell.html" %}
+
+{% block search-form-pre %}
+  <div class="combo-search--hint">
+    Lorem ipsum dolor sit amet. Cum labore minima ad earum ducimus et ipsum sapiente et rerum vero est sequi similique. Hic quis sint ut nostrum dignissimos est exercitationem voluptate eum accusantium nemo non esse animi quo assumenda voluptatem aut nostrum quos.
+  </div>
+{% endblock %}
+

templates/variants/armentieres/combo/wcs/tracking_code_input.html

@@ -0,0 +1,13 @@
+{% extends "combo/wcs/tracking_code_input.html" %}
+
+{% block title %}
+  <h2>Votre code de suivi :</h2>
+{% endblock %}
+
+{% block intro-text %}
+	<p>
+    Un code de suivi est associé à chaque demande afin de faciliter vos
+    échanges avec les services de la Mairie. Pour retrouver votre demande via le code de suivi, indiquez-le
+    ci-dessous : 
+	</p>
+{% endblock %}