.page-heading--custom {
position: relative;
overflow: hidden;
padding: 100px 0;
}
.page-heading--custom span {
max-width: 50%;
}
.page-heading--custom .page-heading__image {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-heading--custom::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
background: rgba(234, 232, 233, 0.85);
}
@media (min-width: 992px) {
.page-heading--custom::after {
background: linear-gradient(
to right,
rgba(234, 232, 233, 0.95) 0%,
rgba(234, 232, 233, 0.95) 32%,
rgba(255, 255, 255, 0.92) 42%,
rgba(255, 255, 255, 0.65) 55%,
rgba(255, 255, 255, 0.25) 68%,
rgba(255, 255, 255, 0) 82%
);
}
}
.page-heading--custom > .container > span {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
row-gap: 30px;
}
.page-heading--custom .page-heading__title {
font-size: clamp(3rem, 5vw, 6rem);
font-weight: 600;
line-height: 1.2;
color: #222;
margin: 0;
padding: 0;
}
.page-heading--custom .page-heading__description {
font-size: clamp(1rem, 3vw, 1.5rem);
font-weight: 400;
line-height: 1.5;
margin: 0;
padding: 0;
color: #727272;
}
.page-heading--custom .breadcrumbs-wrapper {
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 10px;
}
.page-heading--custom .breadcrumbs-wrapper::before {
content: '';
display: block;
width: 50px;
height: 10px;
background: #ff9900;
border-radius: 2px;
}
.page-heading--custom .breadcrumbs-wrapper #breadcrumbs * {
font-size: clamp(1rem, 2vw, 1.2rem);
font-weight: 400;
line-height: 1.5;
color: #ff9900;
margin: 0;
padding: 0;
}
.page-heading--custom .breadcrumbs-wrapper #breadcrumbs li {
display: inline-block;
margin: 0;
padding: 0;
}
.page-heading--custom .page-heading__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.page-heading--custom .page-heading__button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: 1px solid transparent;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
font-weight: 600;
}
.page-heading--custom .page-heading__button--primary {
background: #ff9900;
color: #fff;
}
.page-heading--custom .page-heading__button--primary:hover,
.page-heading--custom .page-heading__button--primary:focus-visible {
background: #222;
color: #fff;
}
.page-heading--custom .page-heading__button--secondary {
background: #222;
color: #fff;
}
.page-heading--custom .page-heading__button--secondary:hover,
.page-heading--custom .page-heading__button--secondary:focus-visible {
background: #ff9900;
color: #fff;
}
.page-heading--custom .page-heading__button--ghost {
background: transparent;
border-color: #222;
color: #222;
}
.page-heading--custom .page-heading__button--ghost:hover,
.page-heading--custom .page-heading__button--ghost:focus-visible {
background: #222;
border-color: #222;
color: #fff;
}
.page-heading--custom .page-heading__button:focus-visible {
outline: 1px solid #222;
outline-offset: 1px;
}
.page-heading--custom .page-heading__button-icon {
flex-shrink: 0;
}
@media (max-width: 991px) {
.page-heading--custom {
background-color: #eae8e9;
text-align: center;
}
.page-heading--custom > .container > span {
align-items: center;
max-width: 100%;
}
.page-heading--custom .breadcrumbs-wrapper {
justify-content: center;
}
.page-heading--custom .page-heading__actions {
justify-content: center;
}
.page-heading--custom .page-heading__image {
mix-blend-mode: darken;
filter: grayscale(1) brightness(0.92) contrast(1.05);
}
}
@media (max-width: 768px) {
.page-heading--custom {
padding: 50px 0;
}
.page-heading--custom span {
max-width: 100%;
}
}
@media (max-width: 576px) {
.page-heading--custom {
padding: 30px 0;
}
}