publik-base-theme/static/la-reunion-region/_custom.scss

%cancel-button {
	@extend %button;
	background-color: white;
	border-color: $cyan;
	color: $cyan;
	&:hover {
		background-color: white;
		border-color: $primary-color;
		color: $primary-color;
	}
}

// HEADER
#header-wrapper {
	background: url(img/menu_top_fond.png) no-repeat top right;
	background-size: auto 100%;
	border-bottom: 3px solid $primary-color;
}

#logo {
	padding: 15px;
	padding-top: 30px;
	a {
		color: $cyan;
		$logo-height: 100px;
		$logo-width: $logo-height * 1.9;
		display: block;
		font-weight: bold;
		font-size: 1.125rem;
		padding-top: $logo-height + 5;
		background: url(img/region-reunion-2.png) no-repeat;
		background-size: auto $logo-height;

		@media ($min-desktop-viewport) {
			padding-left: $logo-width + 20;
			padding-top: $logo-height - 20px;
			font-size: 1.5rem;
			line-height: 20px;
			background-size: contain;
		}

		&::before {
			content: "#";
			color: $primary-color;
			font-weight: bold;
		}
	}
}
#toplinks {
	border: none;
	box-shadow: none;
}
// NAV
.gru-nav-wrapper {
	@media ($max-mobile-viewport) {
		margin-top: -$nav-menu-side - 15px;
	}
}
div.gru-nav > ul  {
	font-size: .85em;
	margin: 0;
	> li a {
		font-weight: normal;
	}
	// submenu
	ul a {
		&:hover {
			background-color: white;
			color: $font-color;
		}
	}
}
// burger btn
div.gru-nav .gru-nav-button {
	border: 1px solid $primary-color;
	&.toggled {
		background-color: $primary-color;
		.icon-bar {
			background-color: white;
		}
	}
}
body.has-picture .site-nav::after {
	position: static;
}

// PWA nav
.pwa-navigation {
	background-color: transparent;
	text-transform: uppercase;
	div > ul li {
		border: 1px solid transparent;
		background-color: $nav-mobile-bottom-bar-background;
		background-clip: padding-box;
		a {
			background-position: 50% 5px;
			background-size: auto 25px;
			span {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}

// MAIN
main {
	background-image:
		linear-gradient(178deg, transparent 700px, white 701px),
		linear-gradient(173deg, $xlight-gray 350px, $light-gray 351px)
	;
}

// White bloc with shadow
div#main-content-wrapper {
	background-color: white;
	margin-top: 40px;
	padding-top: 1rem;
	padding-bottom: 1rem;
	box-shadow: 0 0px 30px 10px #ccc;
	z-index: 0;

	@media ($min-desktop-viewport) {
		margin-top: 120px;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

body.has-picture #main-content {
	&:before {
		content: '';
		display: block;
		padding-top: 16.5%;
		background-image: var(--page-picture);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		margin-bottom: 1rem;
	}
}

main {
	&::after {
		content: "";
		display: block;
		background-color: white;
		height: 50px;
		position: relative;
		box-shadow: 0 0px 30px 20px white;
	}
}

// CELLS
// more link
div.wcsformsofcategorycell ul li.add-more-items {
	width: 1.5em;
	height: 1.5em;
	margin: auto;
	font-size: 1.2em;
	background-color: $orange;
	display: flex;
	transform: rotate(45deg);
	a {
		color: white;
		font-weight: bold;
		padding: 0;
		display: block;
		border: none;
		margin: auto;
		transform: rotate(-45deg);
	}

	&:hover {
		background-color: $primary-color;
		a {
			background-color: transparent;
		}
	}
}

div.wcs-form-cell a {
	@extend .pk-button;
	display: block;
}

// WCS
.form-content--title,
div#rub_service h2 {
	font-size: 2rem;
	color: $primary-color;
}

// FOOTER
div#footer {
	font-size: .9em;
	img {
		max-width: 100%;
		height: auto;
	}
	// inclined top footer
	@media (min-width: $width) {
		position: relative;
		margin-top: 60px;
		&::before {
			position: absolute;
			bottom: 100%;
			left: 0;
			content: "";
			display: block;
			border-top: 60px solid transparent;
			border-right: $width solid $footer-background;
		}
	}
}