.jobpageheader {
overflow: hidden;
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.25rem;
margin: 0.5rem 0;
background-color: var(--jobheader-transparent);
border: var(--border-classic);
border-color: var(--jobheader-secondary);
border-radius: var(--border-radius-medium);
box-shadow: 0 0 0.5rem -0.1rem var(--jobheader-secondary);
}
.jobpageheader-title {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
height: 1.75rem;
line-height: 1.3em;
padding: 0 0.5rem;
background-color: var(--jobheader-primary);
color: var(--color-white);
border-radius: var(--border-radius-small);
}
.jobpageheader-content {
display: flex;
align-items: center;
gap: 0.25rem;
line-height: 1.3em;
}
.jobpageheader-preview {
display: flex;
flex-direction: column;
align-items: center;
}
.jobpageheader-info {
flex: 1;
overflow: hidden;
line-clamp: 5;
height: 6.5em; /* ~5lh */
transition-duration: var(--transition-time);
transition-property: height;
}
.jobpageheader-info:hover {
height: auto;
line-clamp: none;
}
.jobpageheader-more,
.jobpageheader-tabs {
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;
background-color: var(--jobheader-transparent);
border: var(--border-classic);
border-color: var(--jobheader-secondary);
border-radius: var(--border-radius-small);
transition-property: background-color, color, margin, height;
}
.jobpageheader-more:hover {
background-color: var(--jobheader-secondary);
color: var(--color-white);
transition-delay: 0s;
}
.jobpageheader-more:focus {
height: 0;
margin: 0;
}
.jobpageheader-more:focus ~ .jobpageheader-tabs {
height: auto;
}
.jobpageheader-tabs {
height: 0;
transition-property: height;
}