publik-base-theme/static/guerande/_custom.scss

@import '../includes/fonts/montserrat';

@mixin form-icon($content) {
	content: $content;
	font-family: FontAwesome;
}

html {
	background: white;
}

#header {
	padding-top: 10px;
	padding-left: 0;
	position: relative;
	h1 {
		position: absolute;
		top: 20px;
		left: 20px;
		@media screen and (max-width: $nav-mobile-limit) {
			padding-left: 0px;
			top: 50px;
		}
	}
}

#logo {
	@media screen and (max-width: $nav-mobile-limit) {
		margin-left: calc(55% - 160px);
	}
	a {
		background-position: top left;
		padding-left: 400px;
		@media screen and (max-width: $nav-mobile-limit) {
			background-size: 80%;
			margin-top: 30px;
			padding-left: 300px;
		}
		display: block;
		min-height: 130px;
		line-height: 120px;
	}
}

nav.site-nav {
	margin-bottom: 50px;
	@media screen and (max-width: $nav-mobile-limit) {
		margin-top: 75px;
	}
	@media (min-width: $nav-mobile-limit + 1) {
		padding-bottom: 10px;
		border-bottom: 1px solid #8080802b;
	}
}

div#nav {
	background-color: white;
	> ul {
		margin-top: 120px;
		@media (min-width: $nav-mobile-limit + 1) {
			margin-left: 440px;
			margin-top: 65px;
		}
		a {
			font-size: 1.3em;
			color:black;
			&:hover {
				color: $primary-color;
				background-color: white;
			}
			&::before {
				@include form-icon("\f105");
				color: $primary-color;
				padding-right: 8px;
				font-size: 1.2rem;
			}
		}
		li a {
			padding: 0.5em 20px;
		}
		li:last-child {
			a {
				border: 1px solid $primary-color;
				color: white;
				background-color: $primary-color;
				&::before {
				content: none;}
				&:hover {
					color: black;
					background-color: white;
				}
			}
		}
	}
	@media screen and (max-width: $nav-mobile-limit) {
		margin-left: 0;
	}
}

.page-header div.portal-title {
	font-size: 150%;
}

.page-header div.search-cell {
	padding-top: 50px;
	padding-bottom: 50px;
	min-width: 400px;
}

.page-header div.wcs-tracking-code-input {
	padding-bottom: 10px;
}

.page-header button {
  @extend %button;
}

div#toplinks {
	a { color: black; }
	@media (min-width: $mobile-limit) {
		right: 9em;
	}
}

div.a2-block,
div.block {
	box-shadow: 0 0 36px rgba(0,0,0,0.2);
}

.three-cols-column {
	flex: 1 1 0;
}

.page-header {
	margin-left: 7%;
	margin-right: 7%;
	text-align: center;
	h1, h2 {
		font-weight: 300;
	}
}

#content div.cell {
	@media ($max-mobile-viewport) {
		max-width: 600px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

#content div.wcsformsofcategorycell,
#content div.link-list-cell {
	padding-bottom: 50px;
	padding-top: 50px;
	h2 {
		background: white;
		text-align: left;
		color: black;
		font-weight: normal;
	}
	&.foldable h2::after {
		width: 25px;
		height: 25px;
	}
	li a {
		padding-left: 40px;
	}
	picture {
		height: 220px;
		overflow: hidden;
		margin: 0;
	}
	img {
		padding: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

div#footer-wrapper {
	padding: 0;
}

div#footer {
	@media screen and (max-width: $nav-mobile-limit) {
		div[class^="grid-"],
		div[class*=" grid-"] {
			// discard grid properties in mobile mode
			width: 100%;
			padding-right: 0;
		}
	}
	.text-cell {
		padding-top: 66px;
		padding-bottom: 36px;
	}
	.contact {
		div {
			display: flex;
			justify-content: space-around;
		}
	}
	.site-infos__main {
		display: flex;
		padding-left: 50px;
		@media (min-width: $nav-mobile-limit + 1) {
			padding-left: 20%;
		}
		.site-infos__address {
			width: 100%;
		}
		.site-infos__image {
			background: url(/assets/footer:logo) top left no-repeat;
			background-size: contain;
			display: block;
			min-width: 165px;
			min-height: 124px;
		}
	}
	.menu-cross {
		@media (min-width: $nav-mobile-limit + 1) {
			background: $primary-color;
			padding-bottom: 120px;
			div {
				margin: 0 20% auto 15%;
			}
			* a {
				color: black;
			}
		}
		nav.menu-cross__nav {
			padding-left: 20px;
			ul {
				margin: 0;
				padding: 0;
				li {
					a {
						font-size: 0.7rem;
						text-transform: uppercase;
					}
				}
			}
		}
		.menu-cross__item::before, .menu-cross__link::before {
			@include form-icon("\f105");
			@media (min-width: $nav-mobile-limit + 1) {
				color: black;
			}
			padding-right: 5px;
			font-size: 0.8rem;
			font-weight: 800;
		}
	}
	* {
		box-sizing: content-box;
	}
	img {
		width: 165px;
		height: 124px;
		@media (min-width: $nav-mobile-limit + 1) {
			margin: 0 20px 60px 20px;
		}
	}
	border-color: #fff;
	width: 100%;
	max-width: unset;
	li {
		list-style: none;
	}
	a {
		color: #fff;
	}
	.ghost {
		display: none;
	}
	.btn:focus, .btn:hover {
		background-color: #0f183b;
		border-color: transparent !important;
		text-decoration: none;
	}
	address.site-infos__listitems {
		font-size: 0.75rem;
		font-weight: 400;
		font-style: normal;
		@media screen and (max-width: $nav-mobile-limit) {
			text-align: end;
		}
	}
	a.contact-social__link, a.contact-cityhall__link {
		display: flex;
		font-size: 1rem;
		font-weight: 700;
		text-transform: uppercase;
		padding: 25px 25px 25px 25px;
		@media (min-width: $nav-mobile-limit + 1) {
			margin-top: 80px;}
		&:hover {
			color: $primary-color;
			background-color: black;
		}
	}
	* a.menu-cross__link {
		display: block;
		font-size: 1rem;
		font-weight: 700;
		border: solid 1px;
		border-radius: 0;
		padding: 10px 0px 10px 10px;
		&:hover {
			color: white;
			background-color: black;
		}
	}
	.social-networks {
		display: flex;
		justify-content: start;
		margin-left: 120px;
		@media screen and (max-width: $nav-mobile-limit) {
			margin-left: 30px;}
	}
	.social-networks li a::after {
		padding-left: 6px;
	}
	.social-networks {
		li:nth-child(1) a::after {
			@include form-icon("\f09a");
		}
		li:nth-child(2) a::after {
			@include form-icon("\f16a");
		}
		li:nth-child(3) a::after {
			@include form-icon("\f16d");
		}
	}
	.social-networks__item a {
		height: 27px;
		width: 24px;
		border: 1px solid #fff;
		border-radius: 50%;
		display: grid;
		text-decoration: none;
		padding-top: 4px;
		padding-right: 7px;
	}
}