Arne Moerman
f343738db5
Build and Push Docker Image / build-and-push (push) Successful in 19s
Major UI overhaul: new expertise, team, footer, and testimonials sections with enhanced styling and layout. Added Docker Compose for app and SQL Server, updated .env.example, improved navigation anchors, and modernized CSS for responsiveness and accessibility.
154 lines
2.6 KiB
CSS
154 lines
2.6 KiB
CSS
.frc-team {
|
|
padding: 6rem 2rem;
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
.frc-team h4 {
|
|
margin: 0 0 2.5rem;
|
|
font-size: 0.625rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4em;
|
|
color: #c5a368;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.frc-team-layout {
|
|
display: grid;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.frc-team-intro-panel {
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
.frc-team-intro-panel h2 {
|
|
margin: 0;
|
|
font-weight: 300;
|
|
font-size: clamp(1.25rem, 2.4vw, 1.7rem);
|
|
line-height: 1.12;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.02em;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.frc-team-divider {
|
|
width: 3rem;
|
|
height: 1px;
|
|
background: #c5a368;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.frc-team-intro-panel p {
|
|
margin: 0 0 2rem;
|
|
color: #9ca3af;
|
|
font-size: 0.95rem;
|
|
font-weight: 300;
|
|
line-height: 1.75;
|
|
max-width: 30rem;
|
|
}
|
|
|
|
.frc-team-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: rgba(24, 24, 27, 0.4);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
transition: border-color 0.5s ease;
|
|
}
|
|
|
|
.frc-team-card:hover {
|
|
border-color: rgba(197, 163, 104, 0.3);
|
|
}
|
|
|
|
.frc-team-photo-wrap {
|
|
width: 100%;
|
|
height: 16rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.frc-team-photo {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: grayscale(100%);
|
|
transition: filter 0.7s ease;
|
|
}
|
|
|
|
.frc-team-card:hover .frc-team-photo {
|
|
filter: grayscale(0);
|
|
}
|
|
|
|
.frc-team-card-content {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.frc-team-card h3 {
|
|
margin: 0 0 0.25rem;
|
|
font-size: 1.25rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.03em;
|
|
color: #c5a368;
|
|
}
|
|
|
|
.frc-team-role {
|
|
margin: 0 0 1.5rem;
|
|
color: #ffffff;
|
|
font-size: 0.625rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.2em;
|
|
}
|
|
|
|
.frc-team-contact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.frc-team-contact a {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.6875rem;
|
|
color: #6b7280;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.frc-team-contact a:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.frc-team-contact a i {
|
|
margin-right: 0.75rem;
|
|
color: #c5a368;
|
|
opacity: 0.85;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.frc-nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.frc-team-card {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.frc-team-photo-wrap {
|
|
width: 12rem;
|
|
min-width: 12rem;
|
|
height: 16rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.frc-team {
|
|
padding: 6rem max(6rem, calc((100% - 64rem) / 2));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1100px) {
|
|
.frc-team-layout {
|
|
grid-template-columns: 1.55fr 1fr 1fr;
|
|
gap: 2rem;
|
|
align-items: start;
|
|
}
|
|
}
|