publik-base-theme/static/cci/_combo.scss

/// Page header
.cci-page-header {
	display: flex;
	flex-direction: column;
	padding: 4rem 2rem 2rem 2rem;

	background-color: $blue-2;
	border-bottom-left-radius: $border-radius;
	border-bottom-right-radius: $border-radius;

	&--title {
		margin: 0;

		color: white;
		font-size: $fz-1;
	}

	&--description {
		margin-top: 2rem;

		color: white;
		font-size: $fz-4;
		font-weight: bold;
	}
}

// header with page banner
.has-picture .cci-page-header  {
	padding: 0;

	background-color: transparent;

	&--title-background {
		padding-top: 210px;

		background-image: var(--page-picture);
		background-position: center 69%;
		background-size: cover;
		border-bottom-left-radius: $border-radius;
		border-bottom-right-radius: $border-radius;
	}

	&--title {
		padding: 3rem 1rem 2rem 5rem;

		background: $blue-gradient-2;
		border-bottom-left-radius: $border-radius;
		border-bottom-right-radius: $border-radius;
	}

	&--description {
		margin-top: 0;
		padding: 2rem 2rem 2rem 5rem;
		display: inline-block;

		background: white;
		border-radius: $border-radius;

		color: $font-color;
		font-weight: normal;

		&:first-letter {
			color: $blue-2;
			font-size: $fz-1;
			font-weight: bold;
			line-height: normal;
		}
	}
}

// Content
.gru-content {
	margin-top: 4rem;
}

.column div.a2-block,
.gru-content div.cell,
.block {
	margin-bottom: 1.8rem;
}

%cell {
	&:not(.text-cell) {
		@extend %cci-card;
	}

	&.text-cell {
		border: none;
		background: transparent;
	}
}

// Cell folding
div.cell.foldable {
	position: relative;

	> div h2:first-child {
		position: static;

		&::after {
			right: 0.5rem;
			top: 0.25rem;
			width: 3rem;
			height: 3rem;
			transform: rotate(180deg);

			background: center / contain no-repeat url('img/caret-blue.svg');
			transition: 0.5s all $transition-mode;

			content: "";
		}
	}

	&.folded {
		> div picture {
			display: none;
		}

		div h2:first-child {
			border-bottom: none;
			margin-bottom: 0;

			&::after {
				transform: none;
			}
		}
	}
}

.gru-content div.cell.has-asset-picture {
	> div picture {
		max-width: 90px;
		margin: 1rem auto 0 auto;
	}

	h2:first-child {
		margin-bottom: 1rem;

		border-bottom: 1px solid $gray-2;
		border-radius: 0;

		text-align: center;
	}
}

.gru-content {
	.text-cell a:not(.pk-button):not(.pk-big-button),
	.description a {
		@extend %cci-link;
	}
}

// Link lists
div#rub_service div.category ul > li > a,
div#account-management,
.cell:not(.link-cell) div.links-list,
div.wcsformsofcategorycell,
div.wcscurrentdraftscell,
div.wcscurrentformscell {
	ul {
		& > li:not(.add-more-items) {
			padding: 0;
			margin: 0 1rem 0 1rem;

			> a {
				position: relative;
				padding: 0.25rem 1rem 0.25rem 1rem;
				margin: 0rem 0.5rem 0.5rem 0.5rem;

				// background animation on link-lists
				&::before {
					position: absolute;
					left: 0;
					top: 0;
					height: 100%;
					width: 2px;
					z-index: -1;

					content: "";

					background: $blue-2;
					border-radius: 3px;
					transition: 0.25s all $transition-mode;
				}

				&:hover{
					color: white;

					&::before {
						width: 100%;
					}
				}
			}
		}

		& > li.add-more-items {
			margin-top: 2rem;

			a {
				position: absolute;
				left: calc(50% - 1.2rem);
				bottom: -3.2rem;
				width: 2.4rem;
				height: 2.4rem;
				transform: rotate(90deg);

				background: $blue-1 60% 50% / 37% no-repeat url('img/more-items-btn.svg');
				border-radius: 100%;
				border: 1px solid $blue-2;

				color: transparent;

				&:hover {
					background-color: $blue-2;
				}
			}
		}
	}
}

// add padding to h1 and h2 in text cells
div.text-cell {
	h1, h2 {
		margin: 1rem 1rem;
	}
}

.tracking-code-input-cell {
	input.tracking-code--input {
		width: 100%;
		margin-bottom: 1em;
	}

	button {
		width: 100%;
	}
}