publik-base-theme/static/la-hague-2022/_custom.scss

//
//	TYPO
//

h1 {
	font-size: $fz-1;
	font-weight: 900;
	@media ($max-mobile-viewport) {
		font-size: $fz-2;
	}
}
h2 {
	font-size: $fz-2;
	font-weight: 800;
}
h3 {
	font-size: $fz-3;
	font-weight: 800;
}
h4 {
	font-size: $fz-4;
	font-weight: 800;
}


//
//	HEADER
//

div#header {
	padding: 10px;;
	@media ($min-desktop-viewport) {
		padding: 15px;
		max-width: 100em;		
	}
}

#top {
	display: flex;
	align-items: center;
}

#logo {
	font-size: 1em;
	flex: 1 1 auto;
	&.has-logo a {
		color: $cyan-xdark;
		@media ($min-desktop-viewport) {
			font-size: $fz-3;
			font-weight: 700;
			align-items: flex-end;
			&::before {
				margin-bottom: -15px;
			}
		}
		@media ($max-mobile-viewport) {
			align-items: flex-start;
			flex-direction: column;
			font-size: $fz-xsmall;
			font-weight: normal;
			&::before {
					width: 76px;
					height: 50px;
			}
		}
	}
}

#toplinks {
	position: static;
	word-spacing: 1rem;

	a {
		font-weight: bold;
		@media ($min-desktop-viewport) {
			padding: 0.75em 1em;
			border: 1px solid;
			border-radius: 2em;
			&::before {
				content: none;
				width: 1em;
				height: 1em;
				display: inline-block;
				font-size: $fz-3;
				vertical-align: text-bottom;
				margin-right: 0.33em;
			}
			&.login-link {
				white-space: nowrap;
				&::before {
					content: url(img/arrow-right-to-bracket-solid.svg);
				}
			}
			&.registration {
				&::before {
					content: url(img/pen-to-square-solid.svg);
				}
			}
		}
		@media ($max-mobile-viewport) {
			font-size: $fz-small;
			padding: 0.25em;
		}
	}
}


//
//	NAV
//
body {
	border: none;
}
div.gru-nav {
	@media ($max-mobile-viewport) {
		.gru-nav-button {
			$button-height: calc(#{$nav-menu-side} + 20px + 2em);
			border: 8px solid $nav-button-background;
			border-width: 32px 8px;
			height: $button-height;
			top: 0;
			left: 0;

			&.toggled {
				.icon-bar {
					background-color: white;
				}
				+ ul::before {
					height: $button-height;
				}
			}
		}
	}
	@media ($min-desktop-viewport) {
		> ul {
			margin: 0;
			text-align: center;
			> li {
				padding: 0.5rem 0;
				> a {
					padding: .33em 1em;
					border-radius: 1em;
				}
			}
		}
	}
}

// Page picture
body.has-picture {
	.site-nav::after {
		top: 0;
	}
	div#main-content-wrapper {
		@media ($min-desktop-viewport) {
			margin-top: -30px;
		}
	}
}

//
//	PWA NAV
//

.pwa-navigation div > ul li a {
	background-size: 20px 20px;
	padding-top: 35px;
}

//
//	MAIN
//
main {
	background-color: $cyan-xlight;
}
#main-content {
	padding: $columns-gutter/2;
	background-color: white;
	@media ($min-desktop-viewport) {
		padding: $columns-gutter;
	}

}

//
//	CELLS
//

%cell {
	margin-bottom: $columns-gutter !important;
}

// Image position (left of cell title)
.gru-content .cell.has-asset-picture {
	$image-size: 4rem;
	> div {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		> * {
			flex: 0 0 100%;
		}
		> h2:first-child {
			flex: 1 0 50%;
			margin-left: -1 * ($image-size + 1);
			padding-left: $image-size + 2;
		}
		> picture {
			display: block;
			order: -1;
			flex: 0 0 $image-size;
			height: $image-size;
			align-self: center;
			margin-left: 1rem;
			position: relative;
			z-index: 1;
			border: 1.2rem solid transparent;
			background-color: white;
			border-radius: 50%;
			img {
				padding: 0;
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}
}

// foldable option
div.cell.foldable {
	> div > h2:first-child {
		padding-right: 3em;
		&::after {
			box-sizing: content-box;
			text-align: center;
			padding: 0.3em;
			border-radius: 50%;
			background-color: transparent;
			transition: background-color 400ms;
		}
		&:hover::after {
			background-color: white;
		}
	}
}

// light blue cell
.lightblue-cell {
	.gru-content &.cell {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		background-color: $cyan-xlight;
	}
}

// dark blue cell
.darkblue-cell {
	.gru-content &.cell {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		background-color: $cyan-xdark;
		color: white;

		h2:first-child {
			color: inherit;
			font-size: $fz-3;
		}

		a {
			color: $cyan-xlight;
		}

		%cell-links-list {
			& > li:not(:last-child) {
				border-bottom-color: $cyan-dark;
			}
			& > li {
				> a {
					color: inherit
				}
			}
		}

	}
}

.wcs-forms-of-category-cell {
	@extend .lightblue-cell;
}

.tracking-code-input-cell {
	@extend .darkblue-cell;
}




// search-cell
div.searchcell {
	form {
		padding-bottom: 0;
		input {
			border-radius: 3em;
		}
	}
	#sidebar & {
		button {
			margin-top: .33em;
		}
	}
}

// links-list
// Add arrow before link label
.gru-content %cell-links-list {
	& > li:not(.add-more-items) {
		> a,
		> div.description {
			padding-left: 2.4em;
		}
		> a {
			position: relative;
			&::before {
				content: "";
				display: inline-block;
				position: absolute;
				left: 1em;
				width: 0;
				height: 0;
				border: 0.5em solid transparent;
				border-width: 0.37em 0.5em;
				border-left-color: $cyan;
				margin-top: 0.3em;
			}
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

//
//	FORMS & WCS
//

%button {
	font-weight: 600;
}

.form-content--title {
	@extend h1;
	padding-left: 0;
}

div#rub_service {
	h2 {
		font-size: $fz-2;
		padding-left: 0;
	}
	h3 {
		font-size: $fz-3;
	}
	h4 {
		font-size: $fz-4;
	}
}

div#tracking-code {
	@extend %cell;
	background-color: $cyan-xdark;
	color: white;
	h3 {
		color: inherit;
	}
	a {
		color: $cyan-xlight;
	}
	form {
		margin-left: 1rem;
	}
}

.wcs-step {
	font-weight: 800 !important;
}

label {
	font-size: $fz-small;
	font-weight: 600;
}

//
//	FOOTER
//

#footer-wrapper {
	margin-top: 0;
	padding-top: 2rem;
	font-size: $fz-small;
	line-height: 1.7;

	%cell-links-list {
		margin-top: 0.7em;
		& > li {
			border: none;
		}
		& > li > a {
			padding-top: 0;
			padding-bottom: 0;
			color: inherit;
			font-weight: 600;

			&:hover {
				text-decoration: underline;
			}
		}
	}
	.text-cell {
		p, ul, ol {
			line-height: inherit;
		}
	}
}