Arne Moerman
294c197d62
Refactored Home.razor to use modular Blazor components for each site section (navigation, hero, values, impact, process, expertise, testimonials, team, footer). Added corresponding CSS files for each component. Implemented responsive navigation with hamburger menu and interactive logic. Updated process section with animated connectors and Bootstrap Icons. Switched to inline SVGs for values and impact icons. Cleaned up app.css and updated background color. Added new image for impact section. Improved maintainability and responsive design.
103 lines
1.9 KiB
CSS
103 lines
1.9 KiB
CSS
.frc-hero {
|
|
position: relative;
|
|
min-height: 50vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
overflow: hidden;
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
.frc-hero-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 3rem 2rem;
|
|
}
|
|
|
|
.frc-hero-content .frc-outline-btn {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.frc-hero h1 {
|
|
font-weight: 300;
|
|
font-size: clamp(1.8rem, 4vw, 3.6rem);
|
|
line-height: 1.08;
|
|
margin: 0 0 1.25rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.frc-hero h1 span {
|
|
color: #c5a368;
|
|
}
|
|
|
|
.frc-hero p {
|
|
max-width: 36rem;
|
|
color: #d1d5db;
|
|
font-size: clamp(0.9rem, 1.3vw, 1.05rem);
|
|
font-weight: 300;
|
|
line-height: 1.7;
|
|
margin: 0 0 2rem;
|
|
}
|
|
|
|
/* Mobile: image below text */
|
|
.frc-hero-image-col {
|
|
width: 100%;
|
|
min-height: 30vh;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.frc-hero-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 30vh;
|
|
object-fit: cover;
|
|
object-position: left center;
|
|
display: block;
|
|
}
|
|
|
|
/* Desktop: side-by-side 40/60 split */
|
|
@media (min-width: 768px) {
|
|
.frc-hero {
|
|
flex-direction: row;
|
|
min-height: 60vh;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.frc-hero-content {
|
|
flex: 0 0 40%;
|
|
max-width: 40%;
|
|
padding: 3rem 3rem 3rem 6rem;
|
|
}
|
|
|
|
.frc-hero-image-col {
|
|
flex: 1;
|
|
position: relative;
|
|
min-height: unset;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.frc-hero-image-col::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
width: 8rem;
|
|
background: linear-gradient(to right, #0a0a0a, transparent);
|
|
z-index: 1;
|
|
}
|
|
|
|
.frc-hero-img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: unset;
|
|
object-fit: cover;
|
|
object-position: left center;
|
|
}
|
|
}
|