112 lines
1.8 KiB
SCSS
112 lines
1.8 KiB
SCSS
.hero-banner-container {
|
|
padding-bottom: 4rem; /* Spacing to accommodate the overlapping card */
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hero-banner {
|
|
background-color: #e9ecef;
|
|
background-size: cover;
|
|
background-position: center;
|
|
min-height: 400px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.95) 100%);
|
|
border-radius: inherit;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.hero-text-box {
|
|
max-width: 500px;
|
|
padding: 1.5rem;
|
|
background: transparent;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
|
|
::ng-deep .hero-title, .hero-title {
|
|
color: #666666;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
strong {
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
|
|
::ng-deep .hero-description, .hero-description {
|
|
color: #666666;
|
|
font-size: 1.1rem;
|
|
line-height: 1.5;
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.event-card-container {
|
|
bottom: -40px; /* Negative margin to pull it down and overlap */
|
|
left: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.event-card {
|
|
width: 90%;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.event-title {
|
|
font-size: 1.4rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.event-details {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.event-icon {
|
|
font-size: 1.3rem;
|
|
color: #8a8a8a;
|
|
}
|
|
|
|
.event-info-text {
|
|
color: #8a8a8a;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-banner::before {
|
|
background: none;
|
|
}
|
|
|
|
.hero-content {
|
|
justify-content: center !important;
|
|
background: none;
|
|
}
|
|
|
|
.hero-text-box {
|
|
text-align: center;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.event-card-container {
|
|
bottom: -80px;
|
|
}
|
|
|
|
.hero-banner-container {
|
|
padding-bottom: 6rem;
|
|
}
|
|
}
|