publik-base-theme/static/saint-laurent-du-var/_custom.scss

%title {
	@extend %title;
	text-align: center;
}

%big-title {
	@extend %title;
	background-color: transparent;
	color: $font-color;
	padding: 0;
	font-size: 2em;
	text-align: left;
}

%title-secondary {
	@extend %title;
	display: flex;
	background-color: transparent;
	color: $font-color;
	text-align: left;
	border-bottom: 4px solid $orange;
	padding: 0;
	margin-bottom: 1rem;

	&::after {
		content: "";
		display: block;
		height: 4px;
		background-color: #2d2d2d;
		flex-grow: 1;
		align-self: flex-end;
		position: relative;
		top: 4px;
	}
}

%title-secondary-white {
	@extend %title-secondary;
	color: white;
	border-color: $primary-color;
	&::after {
		background-color: $font-color;
	}
}

%cancel-button {
	@extend %cancel-button;
	border: 1px solid currentColor;
	color: $primary-color;
	background-color: hsla(0, 0%, 100%, 0.6);

	&:hover {
		color: $dark-desaturated-blue;
		background-color: white;
	}
}

// typo
a:hover {
	color: black;
	background-color: $sldv-links-background-color;
}


#main-content {
	background-color: $sldv-main-color;
	@media (min-width: $mobile-limit + 1) {
		padding: 20px;
	}
}

// Page shadow
#page {
	position: relative;
	z-index: 1;
	&::after {
		content: "";
		display: block;
		height: 100vh;
		width: $width;
		max-width: 100%;
		position: fixed;
		box-shadow: 0 0 10px hsla(0, 0%, 46.7%, 0.3);
		z-index: -1;

		@media (min-width: $width + 1) {
			left: calc( 50% - #{$width / 2});
		}
	}
}


div#header {
	font-family: $title-font-family;
	background-image: url(img/bg-header.jpg);
	background-position: center center;
	background-size: cover;
	padding: 0.7em;
	// keep free for top-links
	padding-top: 2rem;

	#logo {
		width: 420px;
		max-width: 100%;

		a {
			display: block;
			font-weight: 400;
			color: #222;
			font-size: 0.8em;
			text-align: right;
			padding: .3em;
			padding-top: 20%;
			// logo on top, white block on bottom
			background-image: url(img/logo-sldv420x80.png), linear-gradient(to top, hsla(0,100%,100%,.6) 80%, transparent);
			background-position: top center, center bottom;
			background-repeat: no-repeat;
			background-size: 100%, 100% 1.5em
		}
	}
}

div.gru-nav {
	font-family: $title-font-family;
	font-weight: 300;

	@media (max-width: $mobile-limit) {
		&-wrapper {
			margin-top: -50px;
		}
	}
	ul {
		margin: 0;
		li a {
			font-weight: normal;
		}
	}
}

body.has-picture .site-nav::after {
	position: static;
	width: $width;
	max-width: 100%;
	margin: auto;
	background-clip: content-box;
	border: 0.7em solid $sldv-main-color;
	@media (min-width: $mobile-limit + 1 ) {
		border-width: 20px;
	}
}

// pwa nav
.pwa-navigation {
	box-shadow: 0 0 10px $primary-color;
	font-family: $title-font-family;
	text-transform: uppercase;

	div > ul li a {
		background-color: $primary-color;
		background-clip: padding-box;
		border: 1px solid transparent;
		border-width: 0 1px;

		span {
			font-size: 0.75rem;
		}
	}
}

// cells
div#services > ul > li,
.gru-content div.cell {
	border: 1px solid #ccc;
}

// Cells in sidebars & authentic pages
#sidebar, .form-content--sidebox, .authentic-page .gru-content {
	// Cells titles
	div#tracking-code h3,
	div.links-list h2,
	div.textcell h2:first-child,
	div.cell h2:first-child,
	div.block h2,
	div.a2-block h2 {
		@extend %title-secondary;
	}
	// Cells background {
	div.cell,
	div.block,
	.a2-block {
		background-color: $sldv-main-color;
		border: none;
		margin-bottom: 1.5rem;
		margin-top: 1.5rem;

		h2:first-child ~ *:not(link) {
			background-color: $cell-background;
			border: $cell-border;
			border-radius: $cell-border-radius;
			margin: 0;
			padding: .7rem;
			display: block;

			& + * {
				border-top: 0;
				margin-top: -1px;
			}
		}
	}
}

// login / connect "OU"
@if $cell-border == none {
	#registration-blocks .a2-block:not(:first-child),
	#login-page .block:not(:first-child) {
		&::after {
			background-color: inherit;
		}
	}
}

// Don't overlaid link text & key icon
li.required-authentication a {
    padding-right: 1.7em !important
}

// Patch bg-color issue
div#rub_service,
ul#evolutions .evolution-metadata,
ul#evolutions li div.msg {
	background: $sldv-main-color;
}
ul#evolutions li span.item {
	box-shadow: 0 0 0px 5px $sldv-main-color;
}

.form-content--title,
div#rub_service h2 {
	@extend %big-title;
}

div#tracking-code a {
	padding: 0 !important;
}
.wcs-steps {
	font-family: $title-font-family;
}


#footer-wrapper {
	background-color: transparent;
	padding: 0;
	margin: 0;
}
#footer {
	background-color: $footer-background;
	padding: 0.7em;
	// add simple clearfix
	overflow: hidden;

	@media (min-width: $mobile-limit + 1) {
		padding: 20px;
	}

}

// Cells in footer
#footer {

	a {
		color: #aaa;
		&:hover {
			color: white;
			background-color: black;
		}
	}
	// Cells titles
	div.links-list h2,
	div.textcell h2:first-child,
	div.cell h2:first-child {
		@extend %title-secondary-white;
	}
	// Footer Links-list
	div.links-list ul {
		& > li {
			border-bottom: 1px solid black;
		}
		& > li > a {
			padding: .5em 0;
			transition: color 0.4s;
		}
	}
}