publik-base-theme/static/amiens-metropole/_custom.scss

// Hide things the client asked

a#publik-portal-agent,
.site-nav {
	display: none;
}

// Custom and homepage styles excluding layout

#main-content-wrapper {
	background-color: $content-background-color;

	div#rub_service div.category h3, #content div.a2-block h2, #content div.block h2,
	div.links-list h2, div#services > ul > li > strong > a,
	#content div.textcell h2:first-child,
	#content div.cell h2:first-child,
	div#tracking-code h3, div#rub_service h2 {
		@extend %title-style;
	}
}

.topbanner-wrapper {
	background-color: white;
	height: $top-banner-height;

	.inside-content {
		height: $top-banner-height;
	}

	#tracking-code {
		width: 60%;
	}
}

#content .inside-content .a-la-une {
	background-color: transparent;
	border: none;
	position: relative;

	div {
		box-sizing: content-box;
		background: white;
		color: black;
		line-height: 1em;
		overflow: hidden;
		padding: 0.5em;
		position: absolute;
		right: 1em;
		bottom: 1em;
		width: 400px;

		h1 {
			@extend %title-style;
			font-size: 1.2em;
			margin: $a-la-une-text-margin;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		p {
			margin: $a-la-une-text-margin;
			overflow: hidden;
		}
	}
}


#main-content-wrapper #content .wide-container .inside-content {
	background-color: transparent;

	.cell {
		border: none;
		margin: $content-cell-margin;
	}

	&.three-columns .column .cell.wcsformsofcategorycell {
		background-color: transparent;
		padding: 10px 0;
		// Declare the right class name within the following list
		// and get little icons for your div>h2
		@each $category in (enfance, etatcivil, deces, association, signalement, emploi, paiement, economie, solidarite, habitation, nouveau) {
			&.#{$category} h2 {
				background: none;
				&::before {
					content: ' ';
					background: no-repeat url("img/#{$category}.png");
					background-position: center;
					background-size: 100%;
					height: 100%;
					position: absolute;
					left: 0px;
					top: 0px;
					padding: 10px 10px 20px 60px;
				}
			}
			&.#{$category} picture {
				display: none;
			}
		}
		div {
			background-color: $content-background-color;
			padding: 0;
			position: relative;

			h2 {
				background: none;
				text-align: left;
				border: 2px solid white;
				color: black;

				&:first-child {
					color: black;
					font-family: $font-family;
					height: auto;
					padding: 10px 10px 10px 70px;
				}

				&::after {
					content: $arrow-down-icon;
					font-family: FontAwesome;
					font-size: 0.667rem;
					position: absolute;
					right: 20px;
					vertical-align: middle;
				}

				&.on {
					background-color: white;

					&::after {
						content: $arrow-up-icon;
					}
				}
			}
			picture {
				position: absolute;
				top: 0;
				left: 2px;
				background: transparent;
				width: 68px;
				height: 100%;
				overflow: hidden;
				img {
					max-width: 100%;
					padding: 0;
				}
			}

			ul {
				&.on {
					background-color: white;
					display: block;
				}

				li a {
					color: black;
					font-weight: bold;
					padding-left: 30px;

					&::before {
						color: $title-color;
						content: $arrow-right-icon;
						font-family: FontAwesome;
						font-size: 0.4rem;
						font-weight: bold;
						left: 2em;
						position: absolute;
						top: 2.5em;
					}
				}
			}
		}
	}
}
@media screen and ($max-mobile-viewport) {
	#main-content-wrapper #main-content #content .wide-container {
		&.topbanner-wrapper {
			height: 350px;

			.inside-content {
				height: 350px;
				.cell {
					h2 {
						padding-top: 40px;
					}
				}
			}
		}
	}
	@media screen and (max-width: $very-small-limit) {
		#site-title {
			display: none;
		}
		#content .cell.trackingcodeinputcell .wcs-tracking-code-input form p {
			display: none;
		}
		#content div.block h2 + div, #content div.block ul, #content div.a2-block ul {
			margin: 1em;
			margin-bottom: 2em;
		}
	}
}