File: /var/www/quadcode-jobs/resources/sass/components/_category-page.scss
@import "../variables";
.category-page {
--category-header-height: 39rem;
--category-content-offset: 5rem;
@include breakpoint-up('lg') {
--category-header-height: 65rem;
--category-content-offset: 24rem;
}
// For 'Search jobs' page
&.for-search-jobs {
--category-header-height: 34rem;
@include breakpoint-up('lg') {
--category-header-height: 37.6rem;
--category-content-offset: 4rem;
}
}
&__header {
height: var(--category-header-height);
padding-top: calc(var(--category-content-offset) / 2);
background-color: var(--color-placeholder);
background-image: linear-gradient(rgba(#0F161D, 30%), rgba(#0F161D, 30%)), var(--category-page-bg, linear-gradient(rgb(19, 44, 63) 0, rgb(255, 255, 255, 0) 15rem));
background-size: cover;
color: var(--color-text-light);
font-size: var(--typo-headline);
border-radius: 0 0 2rem 2rem;
.container {
height: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
padding-bottom: var(--category-content-offset);
}
h1 {
text-align: center;
}
}
&__subtitle {
margin-top: 1rem;
color: var(--color-text-light);
font-size: var(--typo-subtitle);
font-weight: 600;
text-align: center;
}
&__nav {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: start;
justify-items: center;
width: 100%;
margin-top: 4rem;
@include breakpoint-down('lg') {
grid-template-columns: 1fr 2fr;
justify-content: space-between;
}
@include breakpoint-up('lg') {
& > :first-child {
justify-self: start;
}
}
@include breakpoint-down('lg') {
grid-template-columns: auto;
justify-content: center;
.go-back {
display: none;
}
}
}
&__content {
margin-top: calc(var(--category-content-offset) * -1);
.go-back {
@include breakpoint-down('lg') {
display: none;
}
}
}
&__container {
position: relative;
z-index: 4;
@include breakpoint-down('lg') {
max-width: 100%;
--container-padding: 0;
}
}
}
.location-page {
@include breakpoint-up('lg') {
--category-content-offset: 0;
--content-offset: 8.6rem;
}
@include breakpoint-down('lg') {
--content-offset: 8.6rem;
}
@include breakpoint-down('smp') {
--content-offset: 3.6rem;
}
.category-page {
&__content {
padding: 0 18px;
margin-top: calc(var(--content-offset) * -1);
.go-back {
margin-bottom: 0;
@include breakpoint-down('lg') {
display: none;
}
}
}
&__nav {
margin-top: 3rem;
margin-bottom: 0;
}
&__header {
position: relative;
z-index: 3;
height: 666px;
padding-left: 40px;
padding-right: 40px;
@include breakpoint-down('smp') {
height: 356px;
padding-top: 40px;
padding-left: 25px;
padding-right: 25px;
}
@include breakpoint-down('sml') {
height: 332px;
padding-top: 40px;
padding-right: 17px;
padding-left: 17px;
}
.container {
@include breakpoint-down('smp') {
padding-bottom: 0;
}
}
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(19,44,63,0.6);
border-radius: 0 0 2rem 2rem;
}
}
}
.container {
position: relative;
z-index: 4;
max-width: 1024px;
@include breakpoint-down('lg') {
max-width: 944px;
}
.location-page__address {
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 16px;
line-height: 19px;
margin-bottom: 11px;
@include breakpoint-down('sm') {
flex-direction: column-reverse;
margin-bottom: 8px;
font-size: 14px;
line-height: 17px;
}
@include breakpoint-down('sml') {
max-width: 225px;
}
> p {
margin-right: 8px;
@include breakpoint-down('sm') {
text-align: center;
margin: 0;
}
}
.location-page__addressLink {
position: relative;
display: flex;
align-items: center;
color: #5DBFE0;
@include breakpoint-down('smp') {
margin-bottom: 4px;
}
svg {
margin-right: 4px;
}
> a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
.location-page__slider {
margin-top: 32px;
position: relative;
width: 100%;
max-width: 885px;
height: 185px;
padding: 20px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(5px);
border-radius: 12px;
@include breakpoint-down('smp') {
height: 108px;
max-width: 397px;
margin-top: 18px;
padding: 14px;
}
@include breakpoint-down('sml') {
height: 78px;
margin-top: 11px;
padding: 4px 15px;
}
}
.slider-location {
.slider-location-js {
.slick-slide {
margin: 0 6px;
@include breakpoint-down('smp') {
margin: 0 2px;
}
}
}
.slider-location__item {
height: 145px;
width: 145px !important;
border-radius: 8px;
overflow: hidden;
position: relative;
@include breakpoint-down('smp') {
height: 80px;
width: 80px !important;
}
@include breakpoint-down('sml') {
height: 70px;
width: 68px !important;
}
&.video {
box-shadow: inset 0 0 0 1px #F1162F;
width: 217px !important;
@include breakpoint-down('smp') {
width: 118px !important;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
position: relative;
}
iframe {
z-index: -2;
position: relative;
}
.slider-location__play {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
svg {
@include breakpoint-down('smp') {
width: 16px;
height: 16px;
}
}
}
}
.slider-location-prev {
display: flex;
position: absolute;
left: -34px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
@include breakpoint-down('smp') {
left: -24px;
}
@include breakpoint-down('sml') {
left: 4px;
}
svg {
@include breakpoint-down('sml') {
width: 8px;
height: 12px;
}
}
&.slick-disabled {
pointer-events: none;
opacity: .6;
}
&.slick-hidden {
display: none;
}
}
.slider-location-next {
display: flex;
position: absolute;
right: -34px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
@include breakpoint-down('smp') {
right: -24px;
}
@include breakpoint-down('sml') {
right: 4px;
}
svg {
@include breakpoint-down('sml') {
width: 8px;
height: 12px;
}
}
&.slick-disabled {
pointer-events: none;
opacity: .6;
}
&.slick-hidden {
display: none;
}
}
}
h1 {
font-weight: 600;
font-size: 67px;
line-height: 82px;
@include breakpoint-down('smp') {
font-size: 40px;
line-height: 49px;
}
@include breakpoint-down('sml') {
font-size: 32px;
line-height: 39px;
}
}
}
}