Редактирование: Шаблон:JobPageHeader/styles.css

.jobpageheader {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.25rem;
	margin: 0.5rem 0;
	line-height: 1.3em;
	background-color: var(--tmp-10);
	border-radius: var(--border-radius-medium);
	box-shadow: 0 0 0.5rem -0.1rem var(--tmp-50);
}

.jobpageheader,
.jobpageheader-info,
.jobpageheader-more,
.jobpageheader-preview,
.jobpageheader-info:after {
	background-color: var(--tmp-10);
	border: 1px solid;
	border-color: var(--tmp-25);
}

.jobpageheader-more,
.jobpageheader-info, 
.jobpageheader-title,
.jobpageheader-preview,
.jobpageheader-info:after {
	border-radius: var(--border-radius-small);
}

.jobpageheader-title {
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1;
	height: 1.75rem;
	padding: 0 0.5rem;
	background-color: var(--tmp-75);
	color: var(--color-white);
}

.jobpageheader-content {
	display: flex;
	gap: 0.25rem;
}

.jobpageheader-preview {
	overflow: hidden;
	display: flex;
	text-align: center;
	flex-direction: column;
	width: 7.5rem;
	line-height: 1.1em;
	background-color: transparent;
}

.jobpageheader-preview-title {
    user-select: none;
    font-weight: 500;
    line-height: 1em;
    padding: 0.2em 0.33em;
    background-color: var(--tmp-75);
    color: var(--color-white);
    border-bottom: 2px solid;
    border-color: var(--tmp-75);
}

.jobpageheader-preview-image {
	flex-grow: 1;
	align-content: center;
	padding: 0.25rem 0.5rem;
	background-color: var(--tmp-10);
}

.jobpageheader-info {
	flex: 1;
	hyphens: auto;
	overflow: hidden;
	position: relative;
	align-content: center;
	padding: 0.25rem 0.5rem;
}

.jobpageheader-info hr {
	background-color: var(--tmp-50);
	mask-image: radial-gradient(black 72.5%, transparent 77.5%);
}

.jobpageheader-info tr td {
	padding-left: 0.25rem;
}

.jobpageheader-info tr td:first-child {
	padding: 0;
	hyphens: none;
	vertical-align: top;
}

@media (max-width: 719px) {
	.jobpageheader-info:after {
		content: 'Развернуть';
		position: absolute;
		bottom: 0.25rem;
		right: 0.25rem;
		padding: 0.1rem 0.33rem;
		color: var(--color-text-translucent);
		box-shadow: 0 0 0.1rem 0.1rem var(--tmp-10);
		backdrop-filter: var(--blur-default);
	}
	
	.jobpageheader-info-wrapper {
		overflow: hidden;
		height: 7.25em;
		min-height: 7.25em;
		mask-image: linear-gradient(black 50%, transparent 100%);
		transition-duration: var(--transition-time);
		transition-property: height;
	}
	
	.jobpageheader-info-wrapper:after {
		content: '';
		position: absolute;
		inset: 0;
		background-color: hsla(0, 0%, 0%, 0);
		transition-property: visibility;
		z-index: 2;
	}

	.jobpageheader-info:hover > .jobpageheader-info-wrapper {
		height: max-content;
		mask-image: linear-gradient(black 100%, transparent 100%);
	}
	
	.jobpageheader-info:hover:after,
	.jobpageheader-info:hover > .jobpageheader-info-wrapper:after {
		visibility: hidden;
	}
}

.jobpageheader-tabs,
.jobpageheader-more,
.jobpageheader-info-wrapper:after {
	transition-delay: var(--transition-delay);
	transition-duration: var(--transition-time);
}

.jobpageheader-more {
	cursor: pointer;
	user-select: none;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	height: 1.75em;
	margin-bottom: -0.25rem;
	transition-property: margin, height, opacity;
}

.jobpageheader-more i {
	margin-right: 0.25rem;
}

.jobpageheader-more:hover {
	background-color: var(--tmp-50);
	color: var(--color-white);
	transition-delay: 0s;
}

.jobpageheader-more:focus {
	opacity: 0.66;
	height: 0;
	margin: 0 -0.25rem;
}

.jobpageheader-more:focus ~ .jobpageheader-tabs {
	height: max-content;
	transition-delay: 0s;
}

.jobpageheader-tabs {
	overflow: hidden;
	height: 0;
	transition-property: height;
}

/* Rainbow */
.jobpageheader.rgb {
	gap: 1px;
	padding: 1px;
	border: 1px solid transparent;
}

.jobpageheader.rgb .jobpageheader-content {
	gap: 1px;
}

.jobpageheader.rgb .rainbow {
	filter: blur(1px);
}

.jobpageheader.rgb .jobpageheader-title,
.jobpageheader.rgb .jobpageheader-info, 
.jobpageheader.rgb .jobpageheader-preview,
.jobpageheader.rgb .jobpageheader-more {
	background-color: hsl(from var(--color-primal-immutable) h s l / 0.85);
}

.jobpageheader.rgb .department-tabs {
	padding: 0.33em;
	background-color: hsl(from var(--color-primal-immutable) h s l / 0.85);
	border-radius: var(--border-radius-small);
}

.jobpageheader.rgb,
.jobpageheader.rgb .jobpageheader-info,
.jobpageheader.rgb .jobpageheader-more,
.jobpageheader.rgb .jobpageheader-preview,
.jobpageheader.rgb .jobpageheader-preview-title,
.jobpageheader.rgb .jobpageheader-info:after {
	border-color: var(--color-border);
}

.jobpageheader.rgb .jobpageheader-title,
.jobpageheader.rgb .jobpageheader-preview-title{
	color: var(--color-text);
}

.jobpageheader.rgb .jobpageheader-more {
	margin-bottom: -1px;
	color: var(--color-text-darker);
	transition-property: height, margin, border;
}

.jobpageheader.rgb .jobpageheader-more:focus {
	margin: 0 0 -1px;
	border: none;
}

.jobpageheader.rgb .jobpageheader-more:hover {
	background-color: var(--color-primal-immutable);
	color: var(--color-text);
}