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.
161 lines
2.9 KiB
CSS
161 lines
2.9 KiB
CSS
.frc-impact {
|
|
display: grid;
|
|
gap: 4rem;
|
|
padding: 6rem;
|
|
align-items: center;
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
/* Left column */
|
|
.frc-impact-content {
|
|
max-width: 36rem;
|
|
}
|
|
|
|
.frc-impact h4 {
|
|
margin: 0 0 1.5rem;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4em;
|
|
color: #c5a368;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.frc-impact h2 {
|
|
margin: 0 0 2.5rem;
|
|
font-weight: 300;
|
|
font-size: clamp(2rem, 4vw, 3rem);
|
|
line-height: 1.1;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.frc-impact h2 span {
|
|
color: #c5a368;
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
display: block;
|
|
width: fit-content;
|
|
}
|
|
|
|
.frc-impact h2 span::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
width: 40%;
|
|
height: 1px;
|
|
background: rgba(197, 163, 104, 0.5);
|
|
}
|
|
|
|
.frc-impact-content > p {
|
|
color: #9ca3af;
|
|
line-height: 1.7;
|
|
margin: 0 0 2.5rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.frc-impact ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.frc-impact ul li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.frc-check {
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
color: #c5a368;
|
|
border: 1px solid rgba(197, 163, 104, 0.3);
|
|
border-radius: 50%;
|
|
padding: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.frc-impact ul li:hover .frc-check {
|
|
background-color: rgba(197, 163, 104, 0.1);
|
|
}
|
|
|
|
.frc-impact ul li > span:last-child {
|
|
color: #d1d5db;
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Center column: image */
|
|
.frc-impact-image-wrap {
|
|
width: 100%;
|
|
}
|
|
|
|
.frc-impact-image-frame {
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
aspect-ratio: 3/4;
|
|
filter: grayscale(100%) brightness(0.75);
|
|
transition: filter 0.7s ease;
|
|
}
|
|
|
|
.frc-impact-image-wrap:hover .frc-impact-image-frame {
|
|
filter: grayscale(0) brightness(1);
|
|
}
|
|
|
|
.frc-impact-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
/* Right column: quote */
|
|
.frc-quote {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.frc-quote-mark {
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
font-size: 7rem;
|
|
font-weight: 400;
|
|
color: #c5a368;
|
|
line-height: 0.8;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.frc-quote p {
|
|
margin: 0;
|
|
font-style: italic;
|
|
font-size: 1.05rem;
|
|
color: #e5e7eb;
|
|
line-height: 1.8;
|
|
font-weight: 300;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.frc-impact {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
gap: 4rem;
|
|
padding: 6rem;
|
|
align-items: center;
|
|
max-width: 80rem;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.frc-impact-image-frame {
|
|
aspect-ratio: 3/4;
|
|
}
|
|
}
|