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

// typo
h1, h2, h3, h4, h5 {
	color: $blue-2;
	text-transform: uppercase;
}

// Header / nav
.site-header {
	margin-top: 10px;
}

#top {
	display: flex;
	flex-direction: row;

	@media($max-mobile-viewport) {
		flex-direction: column;
	}
}

.has-logo {
	display: flex;
	align-items: center;
	flex-grow: 1;
}

@media($min-desktop-viewport) {
	#logo.has-logo a {
		text-indent: 0;
		text-decoration: none;
		font-weight: normal;

		.site-title {
			position: static !important;
			width: auto !important;
			height: auto !important;
			display: flex;
			align-items: center;
			margin: 1rem 0 !important;
			border-left: 1px solid $blue-2 !important;
			padding-left: 1rem !important;
			font-size: $font-size-4;
		}
	}
}

@media($max-mobile-viewport) {
	#logo.has-logo {
		padding-left: 0;
		a::before {
			width: 104px;
			height: 43px;
		}
	}
}

#toplinks {
	position: static;
	align-self: center;
	flex-grow: 0;

	.login, .logged-in {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	a {
		@extend %button;
		margin: 0 5px;

		@media ($max-mobile-viewport) {
			margin-top: 10px;
		}
	}
}

.gru-nav-wrapper {
	margin-top: 0;
}

div.gru-nav .gru-nav-button {
	position: absolute;
	right: 20px;
	top: 13px;

	.icon-bar {
		height: 5px;
		border-radius: 4px;
	}

	&:not(.toggled) .icon-bar-3 {
		width: 50%;
	}
}

div.gru-nav {
	@media($min-desktop-viewport) {
		.menu {
			margin-top: 0;
			display: flex;
			justify-content: center;

			&--link {
				padding-top: 0;
			}

			&--label {
				text-transform: uppercase;

				display: flex;
				flex-direction: column;
				align-items: end;
				font-weight: 600;

				&::after {
					background: $blue-2;
					height: 3px;
					width: 0;

					content: "";
					transition: all 0.2s;
				}

				&:hover::after {
					width: 40px;
				}
			}
		}

		.submenu {
			&--item {
				margin: 1rem 2rem;
			}

			&--link {
				display: list-item;
				margin-left: 1rem;
				padding: 0;
				list-style: disc outside;
				font-weight: normal;

				&:hover {
					font-weight: bold;
				}
			}
		}
	}

	@media($max-mobile-viewport) {
		.gru-nav-button + ul,
		.gru-nav-button + ul li:last-child {
			border: none;
		}
	}
}

// content
#sidebar,
.form-content--sidebox {
	background: $gray-2;
}

.gru-content div.cell.foldable {
	h2:first-child {
		border-bottom: 1px solid $blue-1;
		background: $gray-1;
		color: $blue-1;
		font-size: 1.25rem;
		text-transform: uppercase;
		text-shadow: none;

		&::after {
			width: auto;
			height: auto;
			transition: all 0.2s;
		}

		links-list {
			transition: all 0.2s;
		}
	}

	&.folded > div > h2:first-child::after {
		content: $cell-close-foldable-icon;
		transform: rotate(180deg);
	}
}

%cell-links-list {
	> li > a {
		margin: 10px 0px;
		padding: 8px 24px;
		background: $gray-2;
		border-radius: $border-radius-1;
		transition: all ease 0.3s;

		&:hover {
			transform: scale(1.05);
		}
	}
}

div#footer {
	hr {
		border: 1px solid white;
	}

	div.links-list ul li a,
	div.menucell li a {
		background: none;
	}

	%button {
		border: 2px solid white;
	}
}

.text-cell {
	h1, h2:not(:first-child) {
		margin: 1.5em 1rem -20px 0;
		padding-bottom: 30px;
		position: relative;
		color: $blue-2;
		font-weight: normal;
		text-shadow: $text-shadow-1;

		&::before {
			width: 100%;
			height: 4.2em;
			position: absolute;
			top: -1.7em;
			z-index: -1;
			background: top left / contain no-repeat url("img/title-image.svg");
			content: "";
		}
	}

	h3 {
		@extend %title;
		padding: 0;
	}
}

// widgets
.form-content--title {
	background: $blue-1;
	text-shadow: none;
	font-size: $font-size-2;
	color: white;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;

	@media($min-desktop-viewport) {
		width: fit-content;
		margin-left: -50vw;
		padding: 20px 60px 20px 50vw;
	}
}

%button {
	box-shadow: none;
	font-weight: 600;
	text-transform: uppercase;
	transition: all 0.2s;

	&:hover {
		box-shadow: none;
		transform: scale(1.05);
	}
}

.pk-dark-button {
	@extend %button;
	background: $blue-1;

	&:hover {
		background: $blue-1;
	}
}

.field--label {
	font-weight: 700;

	.required {
		color:	$red-1;
	}
}