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

%button {
	font-weight: 500;
}

//
// HEADER
//

$logo-height: 50px;
$header-height: $logo-height + 20px;

#header-wrapper {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #dfdfdf;
}

#top {
	display: flex;
	align-items: center;
}
#logo {
	flex-grow: 1;
	font-size: $fz-h4;
	@media (max-width: $very-small-limit) {
		font-size: 1rem;
	}
	@media ($min-desktop-viewport) {
		font-size: $fz-h2;
	}
	&.has-logo a {
		text-indent: 0;
		color: $primary-color;
		display: flex;
		align-items: center;
		padding-left: calc(75px + 1em);
		height: $logo-height;
		background-size: auto $logo-height;
		background-position: left center;
	}
}

// toplinks
#toplinks {
	// reset
	border: none;
	padding: 0;
	border-radius: none;
	box-shadow: none;
	position: static;

	line-height: 1.7;
	@media ($max-mobile-viewport) {
		font-size: $fz-small;
	}
}

// nav
body {
	border-left: 0 none;
}
div.gru-nav {
	font-size: $fz-small;

	.gru-nav-button {
		height: $header-height;
		border: 10px solid $primary-color;
		border-width: #{$header-height / 3} 10px;
		top: 0;
		left: 0;

		&.toggled {
			border-color: transparent;

			+ ul {
				@media ($max-mobile-viewport) {
					border-right: 2px solid $primary-color;
					&::before {
						height: $header-height;
					}
				}
			}
		}
	}
	> ul {
		overflow: visible;
		li a {
			font-weight: 500;
		}

		@media ($min-desktop-viewport) {
			> li {
				position: relative;
				padding-left: 0.625em;
				padding-right: 0.625em;
				> a {
					padding: 0.33em 0.66em;
					border-radius: 3em;
				}
				ul {
					left: -1px;
					padding-top: 1em;
				}
			}
		}

		// sep line
		li {
			@media ($max-mobile-viewport) {
				border-top: 1px solid $sep-color;
			}
			@media ($min-desktop-viewport) {
				border-left: 1px solid $sep-color;
			}
		}


	}
}

// Page Image
body.has-picture {
	.site-nav::after {
		top: 0;
		height: 0;
		padding-top: 20%;
		@media (max-width: $very-small-limit) {
			padding-top: 50%;
		}
	}
	@media ($min-desktop-viewport) {
		div#main-content-wrapper {
			margin-top: -1.875rem;
		}
	}
}

//
//	MAIN
//

div#main-content-wrapper {
	background-color: white;
	padding: $columns-gutter;
	@media (max-width: $very-small-limit) {
		padding-left: #{$columns-gutter / 2};
		padding-left: 0;
		padding-right: #{$columns-gutter / 2};
		padding-right: 0;
	}
}

// cells vertical gutters
%cell {
	margin-bottom: $columns-gutter;
}

// Links-list
%cell-links-list {
	& > li {
		> a, > ul > li {
			padding-left: 2rem;
		}
		a::before {
			content: "\f04b";
			color: $link-color;
			font-family: fontawesome;
			font-size: 0.7em;
			position: absolute;
			left: 1rem;
			line-height: 1.7;
		}
	}
}

/* keep submenus items font size */
div.menucell li li a {
	font-size: 100%;
}

.search-cell {
	@extend .pk-transparent;
	input[type=search] {
		background-color: white;
		border-color: $font-color;
		border-radius: 2em;
	}
}


//
//	WCS / FORMS
//

input[readonly], select[readonly], textarea[readonly] {
	background-color: transparent;
}

.form-content--title {
	background-color: white;
	font-size: $fz-h1;
	padding-left: 0.5rem;
}

div#rub_service {
	background-color: white;
}

div.gru-content div#rub_service,
div#rub_service {
	h3 {
		font-size: $fz-h2;
		color: $title-color;
	}
	h4 {
		color: $title-color;
		font-size: $fz-h3;
	}
}

div#summary h2,
div#evolution-log h2 {
	border-bottom: 1px solid currentColor;
}

ul#evolutions .evolution-metadata,
ul#evolutions li div.msg {
	background-color: white;
}


//
//	FOOTER
//

#footer {
	font-size: $fz-small;
	padding-left: 0.7rem;
	padding-right: 0.7rem;

	// Blason
	position: relative;
	z-index: 0;
	&::before {
		content: "";
		background: url(img/Armoiries_de_Marseille.png) no-repeat center $footer-background;
		background-size: contain;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: block;
		opacity: 0.2;
		z-index: -1;
	}

	h2, h3 {
		font-weight: 500;
	}

	.menucell {
		li a {
			&::before {
				content: none;
			}
		}
	}

	div.links-list ul {
		& > li {
			border: none;
			> a {
				padding: 0;
				margin-bottom: 1em;
				&::before {
					content: none;
				}
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
}

//
//	PWA nav
//
.pwa-navigation div > ul li a {
	background-size: auto 20px;
}