publik-base-theme/static/eurelien-cd28-2022/_content.scss

div#main-content {
	margin-top: $space-xlarge;
}

.cd28-page-header {
	width: 100%;
	background: url("img/page-banner.jpeg");
	background-size: 100% 100%;

	&--content > div {
		max-width: $width;
		margin: $space-xlarge;
		@media ($min-desktop-viewport) {
			margin-left: 140px;
		}
	}

	h1 {
		@extend %big-title-1;
		color: $black;

		&::before {
			background-image: url("img/title-img-white.svg");
		}

		.cd28-title-header {
			color: $gray-9;
		}
	}

	h2:not(:first-child) {
		@extend %big-title-2;
		color: $black;

		&::before {
			background-image: url("img/title-img-white.svg");
		}

		.cd28-title-header {
			color: $gray-9;
		}
	}
}

.gru-content div.cell {
	h1 {
		@extend %big-title-1;
	}

	h2:not(:first-child) {
		@extend %big-title-2;
	}

	> div > h2:first-child {
		margin: 0;
	}
}

.gru-content div.link-list-cell.has-asset-picture,
.gru-content div.wcsformsofcategorycell.has-asset-picture {
	position: relative;
	> div {
		> h2:first-child {
			padding-left: 4rem;
			padding-top: 1.2rem;
			padding-bottom: 1.2rem;
		}

		picture {
				padding: 1rem;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1000;
				img {
					padding: 0;
					height: 2.5rem;
					width: 2.5rem;
				}
		}
	}
}

.gru-content div.cell.foldable {
	border: $border-width-0 solid $gray-5;
	border-radius: $border-radius;

	div > h2:first-child {
		outline: none;
		border: $border-width-3 solid transparent;
		border-radius: $border-radius !important;

		&::after {
			font-family: "RemixIcon";
			content: "\ea4e"; // arrow-down-s-line
		}
	}

	&.folded {
		div > h2:first-child {
			&::after {
				content: "\ea78"; // arrow-up-s-line
			}
		}

		&:hover {
			border-color: transparent;
			div > h2:first-child {
				border-color: $gray-3;
				background: $gray-2;
			}
		}

		&:focus, &:focus-within {
			border-color: transparent;
			div > h2:first-child {
				outline: none;
				border-color: $gray-2;
				background: $gray-3;
			}
		}
	}
}

div.textcell, .cd28-page-header {
	h1, h2, h3, h4, h5, p, table {
		margin: 0 $space-medium 0.7em $space-medium;
	}
}

%cell-links-list {
	> li {
		margin: 0 $space-medium;

		&:not(:last-child) {
			border-bottom: $border-width-0 solid $gray-5;
		}

		> a {
			border: $border-width-3 solid transparent;
			flex-wrap: nowrap;

			&::before {
				margin-right: $space-small;
				content: "\ea6e"; // arrow-right-s-line
				font-family: "RemixIcon";
			}

			&:focus {
				background: none;
				border-color: $yellow-4;
			}
		}
	}
}

.cell-items-pagination {
	button {
		padding: $space-large;
		width: 4rem;
		height: 4rem;
		border-radius: 100%;
		font-family: RemixIcon;

		&:hover {
			text-decoration: none;
		}
	}
}

div.cell.cd28-shadow {
	box-shadow: $shadow-1;
}

.cd28-info-block {
	padding: $space-large;

	&.border {
		padding-left: 0;
		display: flex;

		&::before {
			display: block;
			content: " ";
			width: $space-large;
			margin-right: $space-large;
			margin-top: -$space-large;
			margin-bottom: -$space-large;
		}
	}

	&.yellow {
		&.border::before { background: $yellow-4; }
		&.background { background: $yellow-1; }
	}

	&.blue {
		&.border::before { background: $blue-4; }
		&.background { background: $blue-1; }
	}

	&.green {
		&.border::before { background: $green-4; }
		&.background { background: $green-1; }
	}

	&.pink {
		&.border::before { background: $pink-4; }
		&.background { background: $pink-1; }
	}
}