.bee-page-hero {
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
min-height: 320px;
padding:
calc(var(--bee-space-2xl) * 2) 0 calc(var(--bee-space-2xl) * 1.4);
background:
linear-gradient(180deg,
var(--bee-dark-soft) 0%,
var(--bee-dark) 100%);
isolation: isolate;
} .bee-page-hero__background {
position: absolute;
inset: 0;
z-index: 1;
}
.bee-page-hero__background img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.38;
transform: scale(1.05);
filter:
saturate(1) contrast(1.05) brightness(0.7);
} .bee-page-hero__overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(180deg, rgba(2, 16, 31, 0.18) 0%, rgba(2, 16, 31, 0.42) 35%, rgba(2, 16, 31, 0.72) 75%, rgba(2, 16, 31, 0.92) 100%), radial-gradient(circle at top right, rgba(255, 219, 27, 0.10), transparent 35%), radial-gradient(circle at left center, rgba(127, 212, 255, 0.10), transparent 40%);
} .bee-page-hero__glow {
position: absolute;
top: -20%;
right: -10%;
width: 700px;
height: 700px;
border-radius: 50%;
background:
radial-gradient(circle,
rgba(255, 219, 27, 0.10) 0%,
transparent 70%);
z-index: 1;
pointer-events: none;
} .bee-page-hero .bee-container {
position: relative;
z-index: 5;
width: 100%;
} .bee-breadcrumb {
display: inline-flex;
align-items: center;
gap: var(--bee-space-xs);
padding:
12px 18px;
margin-bottom: var(--bee-space-xl);
border:
1px solid rgba(255, 255, 255, 0.08);
border-radius:
var(--bee-radius-pill);
background:
rgba(255, 255, 255, 0.04);
backdrop-filter:
blur(12px);
color: var(--bee-text-muted);
font-size: var(--bee-text-sm);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.bee-breadcrumb a {
color: var(--bee-text-muted);
transition:
color var(--bee-duration-base) var(--bee-ease);
}
.bee-breadcrumb a:hover {
color: var(--bee-gold);
}
.bee-breadcrumb__separator {
opacity: 0.3;
}
.bee-breadcrumb__current {
color: var(--bee-gold);
} .bee-page-hero__content {
position: relative;
max-width: 920px;
z-index: 5;
} .bee-page-hero__eyebrow {
display: inline-block;
margin-bottom: var(--bee-space-md);
color: var(--bee-gold);
font-size: var(--bee-text-sm);
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
} .bee-page-hero__title {
margin: 0;
color: #fff;
font-size:
clamp(4rem, 8vw, 4rem);
font-weight: 600;
line-height: 0.92;
letter-spacing: -0.06em;
text-wrap: balance;
text-shadow:
0 10px 30px rgba(0, 0, 0, 0.45);
} .bee-page-hero__description {
margin-top: var(--bee-space-xl);
max-width: 720px;
color: var(--bee-text-muted);
font-size: var(--bee-text-lg);
line-height: 1.8;
} @media (max-width: 991px) {
.bee-page-hero {
min-height: 420px;
padding:
calc(var(--bee-space-3xl) * 1.5) 0 var(--bee-space-3xl);
}
.bee-page-hero__title {
font-size:
clamp(3rem, 10vw, 5rem);
}
}
@media (max-width: 767px) {
.bee-page-hero {
padding-top: 6rem;
padding-bottom: 3rem;
min-height: 315px;
}
.bee-page-hero__title {
line-height: 1;
}
.bee-breadcrumb {
padding: 6px 12px;
margin-bottom:
var(--bee-space-lg);
}
}