Refactor Home to modular components, add section styles
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.
This commit is contained in:
Arne Moerman
@@ -8,6 +8,7 @@
|
||||
<ResourcePreloader />
|
||||
<link rel="stylesheet" href="@Assets["app.css"]" />
|
||||
<link rel="stylesheet" href="@Assets["For_Real_Consulting.styles.css"]" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
|
||||
<ImportMap />
|
||||
<HeadOutlet />
|
||||
</head>
|
||||
|
||||
@@ -1,196 +1,16 @@
|
||||
@page "/"
|
||||
@using For_Real_Consulting.Components.Sections
|
||||
|
||||
<PageTitle>FRC - Finance Experts & Business Partners</PageTitle>
|
||||
|
||||
<div class="frc-site">
|
||||
<nav class="frc-nav" id="top">
|
||||
<a href="#top" class="frc-logo">
|
||||
<img src="images/logo.svg" alt="FRC" class="frc-logo-img" />
|
||||
</a>
|
||||
<div class="frc-nav-links" aria-label="Main">
|
||||
<a href="#top">Home</a>
|
||||
<a href="#aanpak">Aanpak</a>
|
||||
<a href="#expertise">Expertise</a>
|
||||
<a href="#over-ons">Over Ons</a>
|
||||
<a href="#insights">Insights</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
<a href="#contact" class="frc-outline-btn">Plan een kennismaking</a>
|
||||
</nav>
|
||||
|
||||
<header class="frc-hero">
|
||||
<div class="frc-hero-content">
|
||||
<h1>
|
||||
Finance Experts.<br />
|
||||
Business Partners.<br />
|
||||
<span>Meet FRC.</span>
|
||||
</h1>
|
||||
<p>
|
||||
Wij brengen helderheid in cijfers, inzicht in cash en vertrouwen in beslissingen.
|
||||
Zodat jij vandaag de juiste keuzes maakt voor duurzame groei morgen.
|
||||
</p>
|
||||
<a href="#contact" class="frc-outline-btn">Plan een kennismaking</a>
|
||||
</div>
|
||||
<div class="frc-hero-image-col">
|
||||
<img src="images/landscape.png" alt="For Real Consulting" class="frc-hero-img" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="frc-values" id="aanpak">
|
||||
<article>
|
||||
<div class="frc-value-icon">○</div>
|
||||
<h3>Clarity <span>in numbers</span></h3>
|
||||
<p>Heldere financiële inzichten die complexiteit omzetten in richting en focus.</p>
|
||||
</article>
|
||||
<article>
|
||||
<div class="frc-value-icon">👁</div>
|
||||
<h3>Visibility <span>in cash</span></h3>
|
||||
<p>Volledig zicht op cashflow en financiële gezondheid, vandaag en morgen.</p>
|
||||
</article>
|
||||
<article>
|
||||
<div class="frc-value-icon">→</div>
|
||||
<h3>Confidence <span>in decisions</span></h3>
|
||||
<p>Onderbouwde beslissingen met vertrouwen, gedreven door feiten.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="frc-impact" id="expertise">
|
||||
<div>
|
||||
<h4>Waarom partneren met FRC?</h4>
|
||||
<h2>MEER DAN CIJFERS.<br /><span>ÉCHT IMPACT.</span></h2>
|
||||
<p>Wij zijn jouw financiële sparringpartner en brengen meer dan rapporten.</p>
|
||||
<ul>
|
||||
<li><span>✓</span> Strategisch partner op C-level</li>
|
||||
<li><span>✓</span> Proactief en ondememend</li>
|
||||
<li><span>✓</span> Diepgaande financiële expertise</li>
|
||||
<li><span>✓</span> Praktisch. hands-on en resultaatgericht</li>
|
||||
<li><span>✓</span> Onafhankelijk. transparant en betrouwbaar</li>
|
||||
<li><span>✓</span> Gepassioneerd om jouw groei te versnellen</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="frc-impact-image-wrap">
|
||||
<img src="images/concept-1.jpeg" alt="For Real Consulting" class="frc-impact-image" />
|
||||
<div class="frc-quote">
|
||||
<p>"Wij helpen ambitieuze ondernemers grip te krijgen op hun cijfers, met strategisch inzicht en een duidelijke focus op waardecreatie."</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="frc-process" id="process">
|
||||
<h2>Een bewezen aanpak die waarde creëert</h2>
|
||||
<div class="frc-process-grid">
|
||||
<article>
|
||||
<div class="frc-step-number">01</div>
|
||||
<h4>Analyse</h4>
|
||||
<p>Diepgaande analyse van jouw financiële situatie en uitdagingen.</p>
|
||||
</article>
|
||||
<article>
|
||||
<div class="frc-step-number">02</div>
|
||||
<h4>Strategie</h4>
|
||||
<p>Samen ontwikkelen we een heldere strategie op maat van jouw ambities.</p>
|
||||
</article>
|
||||
<article>
|
||||
<div class="frc-step-number">03</div>
|
||||
<h4>Implementatie</h4>
|
||||
<p>We ondersteunen bij de uitvoering en zorgen voor draagvlak.</p>
|
||||
</article>
|
||||
<article>
|
||||
<div class="frc-step-number">04</div>
|
||||
<h4>Resultaat</h4>
|
||||
<p>Duurzame waarde en groei, meetbaar in cijfers en voelbaar in de organisatie.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="frc-expertise-grid" id="expertise-grid">
|
||||
<h4>Onze Expertise</h4>
|
||||
<div class="frc-expertise-items">
|
||||
<div><h5>Financial Strategy</h5></div>
|
||||
<div><h5>Cash & Liquidity</h5></div>
|
||||
<div><h5>Performance</h5></div>
|
||||
<div><h5>Mergers & Acq.</h5></div>
|
||||
<div><h5>Interim Finance</h5></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="frc-testimonials" id="insights">
|
||||
<div class="frc-testimonial-quote">
|
||||
<span>“</span>
|
||||
<p>"For Real Consulting brengt helderheid waar we die het meest nodig hadden. Dankzij hun inzicht en betrokkenheid maken we vandaag betere beslissingen met vertrouwen."</p>
|
||||
<p class="frc-testimonial-source">CEO, Industrieel bedrijf</p>
|
||||
</div>
|
||||
<div class="frc-logo-strip">
|
||||
<span>AVEC</span>
|
||||
<span>COFANO</span>
|
||||
<span>ZUIDERKEMPEN</span>
|
||||
<span>DE PAEP</span>
|
||||
<span>TRILEC</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="frc-team" id="over-ons">
|
||||
<h4>Over Ons</h4>
|
||||
<div class="frc-team-intro">
|
||||
<h2>KLAAR OM SAMEN HET VERSCHIL TE MAKEN?</h2>
|
||||
<div>
|
||||
<p>Laten we kennismaken en ontdekken hoe wij jouw organisatie vooruithelpen.</p>
|
||||
<a href="#contact" class="frc-outline-btn">Plan een kennismaking</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="frc-team-grid">
|
||||
<article class="frc-team-card">
|
||||
<div class="frc-team-photo"></div>
|
||||
<div>
|
||||
<h3>PETER SNIJKERS</h3>
|
||||
<p class="frc-team-role">Bestuurder & Finance Expert</p>
|
||||
<p>0476 17 12 49</p>
|
||||
<p>Peter.Snijkers@forrealconsulting.be</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="frc-team-card">
|
||||
<div class="frc-team-photo"></div>
|
||||
<div>
|
||||
<h3>DYLAN TIJSBAERT</h3>
|
||||
<p class="frc-team-role">Bestuurder & Finance Expert</p>
|
||||
<p>0498 16 94 49</p>
|
||||
<p>Dylan.Tijsbaert@forrealconsulting.be</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="frc-footer" id="contact">
|
||||
<div class="frc-footer-grid">
|
||||
<div>
|
||||
<div class="frc-logo">
|
||||
<img src="images/logo.svg" alt="FRC" class="frc-logo-img" />
|
||||
</div>
|
||||
<p class="frc-foot-title">For Real Consulting</p>
|
||||
<p class="frc-foot-subtitle">CLARITY TODAY, COMFORT TOMORROW</p>
|
||||
</div>
|
||||
<div class="frc-footer-links">
|
||||
<a href="#top">Home</a>
|
||||
<a href="#aanpak">Aanpak</a>
|
||||
<a href="#expertise">Expertise</a>
|
||||
<a href="#over-ons">Over Ons</a>
|
||||
</div>
|
||||
<div class="frc-footer-contact">
|
||||
<p>✉ info@forrealconsulting.be</p>
|
||||
<p>📞 0476 17 12 49</p>
|
||||
<p>📍 Gent, België</p>
|
||||
</div>
|
||||
<div class="frc-footer-cta-wrap">
|
||||
<a href="#contact" class="frc-outline-btn">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frc-footer-bottom">
|
||||
<p>© 2026 For Real Consulting. Alle rechten voorbehouden.</p>
|
||||
<div>
|
||||
<a href="#">Privacybeleid</a>
|
||||
<span>|</span>
|
||||
<a href="#">Cookies</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<FrcNav />
|
||||
<FrcHero />
|
||||
<FrcValues />
|
||||
<FrcImpact />
|
||||
<FrcProcess />
|
||||
<FrcExpertise />
|
||||
<FrcTestimonials />
|
||||
<FrcTeam />
|
||||
<FrcFooter />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<section class="frc-expertise-grid" id="expertise-grid">
|
||||
<h4>Onze Expertise</h4>
|
||||
<div class="frc-expertise-items">
|
||||
<div><h5>Financial Strategy</h5></div>
|
||||
<div><h5>Cash & Liquidity</h5></div>
|
||||
<div><h5>Performance</h5></div>
|
||||
<div><h5>Mergers & Acq.</h5></div>
|
||||
<div><h5>Interim Finance</h5></div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,38 @@
|
||||
.frc-expertise-grid {
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
||||
.frc-expertise-grid h4 {
|
||||
margin: 0 0 3rem;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #c5a368;
|
||||
}
|
||||
|
||||
.frc-expertise-items {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-top: 3rem;
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.frc-expertise-items h5 {
|
||||
margin: 0;
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-expertise-grid {
|
||||
padding: 5rem 6rem;
|
||||
}
|
||||
|
||||
.frc-expertise-items {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<footer class="frc-footer" id="contact">
|
||||
<div class="frc-footer-grid">
|
||||
<div>
|
||||
<div class="frc-logo">
|
||||
<img src="images/logo.svg" alt="FRC" class="frc-logo-img" />
|
||||
</div>
|
||||
<p class="frc-foot-title">For Real Consulting</p>
|
||||
<p class="frc-foot-subtitle">CLARITY TODAY, COMFORT TOMORROW</p>
|
||||
</div>
|
||||
<div class="frc-footer-links">
|
||||
<a href="#top">Home</a>
|
||||
<a href="#aanpak">Aanpak</a>
|
||||
<a href="#expertise">Expertise</a>
|
||||
<a href="#over-ons">Over Ons</a>
|
||||
</div>
|
||||
<div class="frc-footer-contact">
|
||||
<p>✉ info@forrealconsulting.be</p>
|
||||
<p>📞 0476 17 12 49</p>
|
||||
<p>📍 Gent, België</p>
|
||||
</div>
|
||||
<div class="frc-footer-cta-wrap">
|
||||
<a href="#contact" class="frc-outline-btn">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frc-footer-bottom">
|
||||
<p>© 2026 For Real Consulting. Alle rechten voorbehouden.</p>
|
||||
<div>
|
||||
<a href="#">Privacybeleid</a>
|
||||
<span>|</span>
|
||||
<a href="#">Cookies</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,104 @@
|
||||
.frc-footer {
|
||||
background: #09090b;
|
||||
padding: 5rem 2rem 2.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.frc-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.frc-logo-img {
|
||||
height: 2rem;
|
||||
width: auto;
|
||||
filter: invert(68%) sepia(38%) saturate(502%) hue-rotate(3deg) brightness(92%) contrast(87%);
|
||||
}
|
||||
|
||||
.frc-footer-grid {
|
||||
display: grid;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.frc-foot-title {
|
||||
margin: 0.8rem 0 0;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.frc-foot-subtitle {
|
||||
margin: 0.5rem 0 0;
|
||||
font-size: 0.72rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.frc-footer-links {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.frc-footer-links a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.frc-footer-contact {
|
||||
color: #9ca3af;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.frc-footer-contact p {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.frc-footer-bottom {
|
||||
margin-top: 4rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.07);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.frc-footer-bottom a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.frc-footer-bottom div {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.frc-footer-bottom span {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.frc-footer-cta-wrap {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-footer {
|
||||
padding: 5rem 6rem 2.5rem;
|
||||
}
|
||||
|
||||
.frc-footer-grid {
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.frc-footer-bottom {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<header class="frc-hero">
|
||||
<div class="frc-hero-content">
|
||||
<h1>
|
||||
Finance Experts.<br />
|
||||
Business Partners.<br />
|
||||
Meet <span>FRC.</span>
|
||||
</h1>
|
||||
<p>
|
||||
Wij brengen helderheid in cijfers, inzicht in cash en vertrouwen in beslissingen.
|
||||
Zodat jij vandaag de juiste keuzes maakt voor duurzame groei morgen.
|
||||
</p>
|
||||
<a href="#contact" class="frc-outline-btn">Plan een kennismaking</a>
|
||||
</div>
|
||||
<div class="frc-hero-image-col">
|
||||
<img src="images/landscape.png" alt="For Real Consulting" class="frc-hero-img" />
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,102 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
<section class="frc-impact" id="expertise">
|
||||
<div class="frc-impact-content">
|
||||
<h4>Waarom partneren met FRC?</h4>
|
||||
<h2>Meer dan cijfers.<br /><span>Écht impact.</span></h2>
|
||||
<p>Wij zijn jouw financiële sparringpartner en brengen meer dan rapporten alleen.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="frc-check">
|
||||
<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Strategisch partner op C-level</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="frc-check">
|
||||
<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Proactief en ondernemend</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="frc-check">
|
||||
<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Diepgaande financiële expertise</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="frc-check">
|
||||
<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Praktisch, hands-on en resultaatgericht</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="frc-check">
|
||||
<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Onafhankelijk, transparant en betrouwbaar</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="frc-impact-image-wrap">
|
||||
<div class="frc-impact-image-frame">
|
||||
<img src="images/office-inside.png" alt="For Real Consulting" class="frc-impact-image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="frc-quote">
|
||||
<div class="frc-quote-mark">"</div>
|
||||
<p>Wij helpen ambitieuze ondernemers grip te krijgen op hun cijfers, met strategisch inzicht en een duidelijke focus op waardecreatie.<br/> Dat is waar wij voor staan.</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,160 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<nav class="frc-nav" id="top">
|
||||
<a href="#top" class="frc-logo">
|
||||
<img src="images/logo.svg" alt="FRC" class="frc-logo-img" />
|
||||
</a>
|
||||
|
||||
<div class="frc-nav-links" aria-label="Main">
|
||||
<a href="#top">Home</a>
|
||||
<a href="#aanpak">Aanpak</a>
|
||||
<a href="#expertise">Expertise</a>
|
||||
<a href="#over-ons">Over Ons</a>
|
||||
<a href="#insights">Insights</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
|
||||
<a href="#contact" class="frc-outline-btn frc-nav-cta">Plan een kennismaking</a>
|
||||
|
||||
<button class="frc-hamburger" aria-label="Menu" aria-expanded="@_menuOpen" @onclick="ToggleMenu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
@if (_menuOpen)
|
||||
{
|
||||
<div class="frc-mobile-menu">
|
||||
<a href="#top" @onclick="CloseMenu">Home</a>
|
||||
<a href="#aanpak" @onclick="CloseMenu">Aanpak</a>
|
||||
<a href="#expertise" @onclick="CloseMenu">Expertise</a>
|
||||
<a href="#over-ons" @onclick="CloseMenu">Over Ons</a>
|
||||
<a href="#insights" @onclick="CloseMenu">Insights</a>
|
||||
<a href="#contact" @onclick="CloseMenu">Contact</a>
|
||||
<a href="#contact" class="frc-outline-btn" @onclick="CloseMenu">Plan een kennismaking</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
private bool _menuOpen;
|
||||
|
||||
private void ToggleMenu() => _menuOpen = !_menuOpen;
|
||||
private void CloseMenu() => _menuOpen = false;
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
.frc-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 2rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.frc-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.frc-logo-img {
|
||||
height: 2rem;
|
||||
width: auto;
|
||||
filter: invert(68%) sepia(38%) saturate(502%) hue-rotate(3deg) brightness(92%) contrast(87%);
|
||||
}
|
||||
|
||||
/* Desktop nav links — hidden on mobile */
|
||||
.frc-nav-links {
|
||||
display: none;
|
||||
gap: 2rem;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.frc-nav-links a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* CTA button — hidden on mobile, shown on desktop */
|
||||
.frc-nav-cta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hamburger button — visible on mobile only */
|
||||
.frc-hamburger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.frc-hamburger span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: #c5a368;
|
||||
border-radius: 2px;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.frc-hamburger:hover span {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Mobile dropdown */
|
||||
.frc-mobile-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 49;
|
||||
background: rgba(10, 10, 10, 0.97);
|
||||
backdrop-filter: blur(12px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.frc-mobile-menu a {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.25em;
|
||||
color: #9ca3af;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.frc-mobile-menu a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.frc-mobile-menu .frc-outline-btn {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Desktop overrides */
|
||||
@media (min-width: 768px) {
|
||||
.frc-nav-links {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.frc-nav-cta {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.frc-hamburger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.frc-mobile-menu {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
<section class="frc-process" id="process">
|
||||
<h2>Een bewezen aanpak die waarde creëert</h2>
|
||||
<div class="frc-process-grid">
|
||||
<article class="frc-process-step">
|
||||
<div class="frc-step-header">
|
||||
<span class="frc-step-number">01</span>
|
||||
<div class="frc-step-icon">
|
||||
<svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="10" cy="10" r="6"></circle>
|
||||
<line x1="5.8" y1="15.8" x2="2" y2="22"></line>
|
||||
<path d="M7.5 7 Q8.5 6 10 6.5" stroke-width="0.9" stroke-opacity="0.6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frc-step-line"><div class="frc-step-line-fill"></div></div>
|
||||
<h4>Analyse</h4>
|
||||
<p>Diepgaande analyse van jouw financiële situatie en uitdagingen.</p>
|
||||
</article>
|
||||
|
||||
<article class="frc-process-step">
|
||||
<div class="frc-step-header">
|
||||
<span class="frc-step-number">02</span>
|
||||
<div class="frc-step-icon">
|
||||
<svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 4l3 3m0-3l-3 3M17 4l3 3m0-3l-3 3M4 17l3 3m0-3l-3 3"></path>
|
||||
<circle cx="18.5" cy="18.5" r="2.5"></circle>
|
||||
<path d="M7 12h10" stroke-dasharray="2 2"></path>
|
||||
<path d="M12 7v10" stroke-dasharray="2 2"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frc-step-line"><div class="frc-step-line-fill"></div></div>
|
||||
<h4>Strategie</h4>
|
||||
<p>Samen ontwikkelen we een heldere strategie op maat van jouw ambities.</p>
|
||||
</article>
|
||||
|
||||
<article class="frc-process-step">
|
||||
<div class="frc-step-header">
|
||||
<span class="frc-step-number">03</span>
|
||||
<div class="frc-step-icon">
|
||||
<i class="bi bi-gear-wide-connected"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frc-step-line"><div class="frc-step-line-fill"></div></div>
|
||||
<h4>Implementatie</h4>
|
||||
<p>We ondersteunen bij de uitvoering en zorgen voor draagvlak en efficiënte processen.</p>
|
||||
</article>
|
||||
|
||||
<article class="frc-process-step">
|
||||
<div class="frc-step-header">
|
||||
<span class="frc-step-number">04</span>
|
||||
<div class="frc-step-icon">
|
||||
<svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 20h18" stroke-opacity="0.25"></path>
|
||||
<polyline points="3 16 7 11 11 13 17 6 21 8" stroke-width="1.2"></polyline>
|
||||
<polyline points="3 18 7 14 11 16 17 10 21 12" stroke-width="1.2" stroke-opacity="0.45"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frc-step-line"><div class="frc-step-line-fill"></div></div>
|
||||
<h4>Resultaat</h4>
|
||||
<p>Duurzame waarde en groei, meetbaar in cijfers en voelbaar in jouw organisatie.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,100 @@
|
||||
.frc-process {
|
||||
padding: 5rem 2rem;
|
||||
background: #0a0a0a;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.frc-process h2 {
|
||||
margin: 0 0 5rem;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3em;
|
||||
color: #ffffff;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.frc-process-grid {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
/* Step header: number left, icon right */
|
||||
.frc-step-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.frc-step-number {
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 0.08);
|
||||
line-height: 1;
|
||||
transition: color 0.5s ease;
|
||||
}
|
||||
|
||||
.frc-step-icon {
|
||||
color: #c5a368;
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Animated connector line */
|
||||
.frc-step-line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frc-step-line-fill {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #c5a368;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.7s ease;
|
||||
}
|
||||
|
||||
.frc-process-step:hover .frc-step-line-fill {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.frc-process-step:hover .frc-step-number {
|
||||
color: rgba(197, 163, 104, 0.2);
|
||||
}
|
||||
|
||||
.frc-process-grid h4 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #ffffff;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.frc-process-grid p {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-process {
|
||||
padding: 5rem max(6rem, calc((100% - 64rem) / 2));
|
||||
}
|
||||
|
||||
.frc-process-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 3rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<section class="frc-team" id="over-ons">
|
||||
<h4>Over Ons</h4>
|
||||
<div class="frc-team-intro">
|
||||
<h2>KLAAR OM SAMEN HET VERSCHIL TE MAKEN?</h2>
|
||||
<div>
|
||||
<p>Laten we kennismaken en ontdekken hoe wij jouw organisatie vooruithelpen.</p>
|
||||
<a href="#contact" class="frc-outline-btn">Plan een kennismaking</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="frc-team-grid">
|
||||
<article class="frc-team-card">
|
||||
<div class="frc-team-photo"></div>
|
||||
<div>
|
||||
<h3>PETER SNIJKERS</h3>
|
||||
<p class="frc-team-role">Bestuurder & Finance Expert</p>
|
||||
<p>0476 17 12 49</p>
|
||||
<p>Peter.Snijkers@forrealconsulting.be</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="frc-team-card">
|
||||
<div class="frc-team-photo"></div>
|
||||
<div>
|
||||
<h3>DYLAN TIJSBAERT</h3>
|
||||
<p class="frc-team-role">Bestuurder & Finance Expert</p>
|
||||
<p>0498 16 94 49</p>
|
||||
<p>Dylan.Tijsbaert@forrealconsulting.be</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,86 @@
|
||||
.frc-team {
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
||||
.frc-team h4 {
|
||||
margin: 0 0 3rem;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.frc-team-intro {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.frc-team-intro h2 {
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
font-size: clamp(2rem, 4vw, 2.6rem);
|
||||
}
|
||||
|
||||
.frc-team-intro p {
|
||||
margin: 0 0 2rem;
|
||||
color: #9ca3af;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.frc-team-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.frc-team-card {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
background: rgba(39, 39, 42, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.frc-team-photo {
|
||||
width: 8rem;
|
||||
height: 10rem;
|
||||
background: #27272a;
|
||||
flex-shrink: 0;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.frc-team-card h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.frc-team-role {
|
||||
margin: 0.75rem 0 1rem;
|
||||
color: #c5a368;
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.frc-team-card p {
|
||||
margin: 0.25rem 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-team {
|
||||
padding: 5rem 6rem;
|
||||
}
|
||||
|
||||
.frc-team-intro {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.frc-team-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<section class="frc-testimonials" id="insights">
|
||||
<div class="frc-testimonial-quote">
|
||||
<span>"</span>
|
||||
<p>"For Real Consulting brengt helderheid waar we die het meest nodig hadden. Dankzij hun inzicht en betrokkenheid maken we vandaag betere beslissingen met vertrouwen."</p>
|
||||
<p class="frc-testimonial-source">CEO, Industrieel bedrijf</p>
|
||||
</div>
|
||||
<div class="frc-logo-strip">
|
||||
<span>AVEC</span>
|
||||
<span>COFANO</span>
|
||||
<span>ZUIDERKEMPEN</span>
|
||||
<span>DE PAEP</span>
|
||||
<span>TRILEC</span>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,54 @@
|
||||
.frc-testimonials {
|
||||
padding: 5rem 2rem;
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.frc-testimonial-quote {
|
||||
max-width: 48rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.frc-testimonial-quote > span {
|
||||
font-size: 2.5rem;
|
||||
color: #c5a368;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.frc-testimonial-quote p {
|
||||
margin: 0.75rem 0 0;
|
||||
color: #d1d5db;
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.frc-testimonial-source {
|
||||
margin-top: 1.5rem !important;
|
||||
color: #c5a368 !important;
|
||||
font-size: 0.75rem !important;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
.frc-logo-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
opacity: 0.35;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.frc-logo-strip span {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-testimonials {
|
||||
padding: 5rem 6rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<section class="frc-values" id="aanpak">
|
||||
<article>
|
||||
<div class="frc-value-icon">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<!-- Outer circle ticks (straddle r=10) -->
|
||||
<line x1="12" y1="0.5" x2="12" y2="3.5"></line>
|
||||
<line x1="12" y1="20.5" x2="12" y2="23.5"></line>
|
||||
<line x1="0.5" y1="12" x2="3.5" y2="12"></line>
|
||||
<line x1="20.5" y1="12" x2="23.5" y2="12"></line>
|
||||
<!-- Inner circle ticks (straddle r=3) -->
|
||||
<line x1="12" y1="7.5" x2="12" y2="10.5"></line>
|
||||
<line x1="12" y1="13.5" x2="12" y2="16.5"></line>
|
||||
<line x1="7.5" y1="12" x2="10.5" y2="12"></line>
|
||||
<line x1="13.5" y1="12" x2="16.5" y2="12"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Clarity<span>in numbers</span></h3>
|
||||
<p>Heldere financiële inzichten die complexiteit omzetten in richting en focus.</p>
|
||||
</article>
|
||||
<article>
|
||||
<div class="frc-value-icon">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Visibility<span>in cash</span></h3>
|
||||
<p>Volledig zicht op cashflow en financiële gezondheid, vandaag en morgen.</p>
|
||||
</article>
|
||||
<article>
|
||||
<div class="frc-value-icon">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="6" y1="12" x2="18" y2="12"></line>
|
||||
<polyline points="13 7 18 12 13 17"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Confidence<span>in decisions</span></h3>
|
||||
<p>Onderbouwde beslissingen met vertrouwen, gedreven door feiten.</p>
|
||||
</article>
|
||||
</section>
|
||||
@@ -0,0 +1,84 @@
|
||||
.frc-values {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
padding: 5rem 2rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(24, 24, 27, 0.5);
|
||||
}
|
||||
|
||||
.frc-values article {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 0rem;
|
||||
row-gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.frc-value-icon {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
color: #c5a368;
|
||||
padding-top: 2px;
|
||||
/* width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.frc-value-icon svg {
|
||||
width: 40px;
|
||||
height: 40px;*/
|
||||
}
|
||||
|
||||
.frc-values h3 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3em;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.frc-values h3 span {
|
||||
display: block;
|
||||
color: #6b7280;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
|
||||
.frc-values p {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
margin: 0;
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-values {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
padding: 5rem max(8rem, calc((100% - 64rem) / 2));
|
||||
}
|
||||
|
||||
.frc-values article {
|
||||
padding: 0 3rem;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.frc-values article:first-child {
|
||||
padding-left: 0;
|
||||
border-right: 1px solid #c5a368;
|
||||
}
|
||||
|
||||
.frc-values article:nth-child(2) {
|
||||
border-right: 1px solid #c5a368;
|
||||
}
|
||||
|
||||
.frc-values article:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -15,7 +15,7 @@ h1:focus {
|
||||
}
|
||||
|
||||
.blazor-error-boundary {
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI26My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA6IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI6MDMyIDIwMDAgQzsgLjA2MzcgMTEwMDAgRC4yNzY4QzIuNTM0MSBaIiBzdHlsZT0iZmlsbDojQzQ4RjU4OyIgZmlsbC1ydWxlPSJldmVub2tkIi8+PHBsYW5lIHg9IjIzNSIgeT0iMjY0LjUgMjAxNiIgY2xhc3M9InBsdGgtdG93ZXIifD48L3BsYW5lPjxpbWFnZSB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIgc3R5bGU9ImZpbGw6IzAwQjY4MTsiLz48cGF0aCBkPSJNNjIuOTg4NCAyMDBMNTQuNjg4IDY1LjgzMjUgMjY0LjIgNC43OTc1LTQzNi43OTEgNy4wMDcgMTAwIDUwLjYyNzggMTY4LjU2OSAzOS4wMDYgMjU1LjY1NCAwIDAgIjIwMDAiLgogICAgICAgICBJcyB0aGlzIGdvb2QgaW4gdGhlIHNoYXJlIG9mIDMuNTYgYXMgdGhlIHNoYXJlIDMxLjUwZmFsbHN0YWdlJi0lMjAxMDAwMDsiIHN0eWxlPSJmaWxsOiMxQjFCMTsiLz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiIGh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
|
||||
padding: 1rem 1rem 1rem 3.7rem;
|
||||
color: white;
|
||||
}
|
||||
@@ -28,17 +28,6 @@ h1:focus {
|
||||
border-color: #929292;
|
||||
}
|
||||
|
||||
.form-floating > .form-control-plaintext::placeholder,
|
||||
.form-floating > .form-control::placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.form-floating > .form-control-plaintext:focus::placeholder,
|
||||
.form-floating > .form-control:focus::placeholder {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@@ -52,7 +41,7 @@ body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Inter, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #0a0a0a;
|
||||
background-color: #0d1111;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@@ -65,47 +54,7 @@ a {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.frc-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 2rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.frc-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.frc-logo-img {
|
||||
height: 2rem;
|
||||
width: auto;
|
||||
/* Recolor black SVG to gold #c5a368 */
|
||||
filter: invert(68%) sepia(38%) saturate(502%) hue-rotate(3deg) brightness(92%) contrast(87%);
|
||||
}
|
||||
|
||||
.frc-nav-links {
|
||||
display: none;
|
||||
gap: 2rem;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.frc-nav-links a:hover,
|
||||
.frc-footer-links a:hover,
|
||||
.frc-footer-bottom a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Shared button used across multiple components */
|
||||
.frc-outline-btn {
|
||||
border: 1px solid #c5a368;
|
||||
color: #c5a368;
|
||||
@@ -120,532 +69,4 @@ a {
|
||||
.frc-outline-btn:hover {
|
||||
background-color: #c5a368;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.frc-hero {
|
||||
position: relative;
|
||||
min-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.frc-hero-bg,
|
||||
.frc-hero-img.fullbleed,
|
||||
.frc-hero-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.frc-hero-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 5rem 2rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.frc-hero-image-col {
|
||||
width: 100%;
|
||||
max-height: 45vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frc-hero-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.frc-hero h1 {
|
||||
font-weight: 300;
|
||||
font-size: clamp(2.2rem, 5vw, 4.3rem);
|
||||
line-height: 1.08;
|
||||
margin: 0 0 2rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.frc-hero h1 span {
|
||||
color: #c5a368;
|
||||
}
|
||||
|
||||
.frc-hero p {
|
||||
max-width: 36rem;
|
||||
color: #d1d5db;
|
||||
font-size: clamp(1rem, 1.5vw, 1.2rem);
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
margin: 0 0 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-hero {
|
||||
flex-direction: row;
|
||||
min-height: 90vh;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.frc-hero-content {
|
||||
flex: 0 0 48%;
|
||||
padding: 5rem 3rem 5rem 6rem;
|
||||
max-width: 48%;
|
||||
}
|
||||
|
||||
.frc-hero-image-col {
|
||||
flex: 1;
|
||||
max-height: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.frc-hero-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left center;
|
||||
}
|
||||
}
|
||||
|
||||
.frc-values {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
padding: 5rem 2rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.frc-value-icon {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
.frc-values h3 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.frc-values h3 span {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.frc-values p {
|
||||
margin: 0;
|
||||
color: #9ca3af;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.frc-impact {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
padding: 5rem 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.frc-impact h4 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.frc-impact h2 {
|
||||
margin: 0 0 1.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: italic;
|
||||
}
|
||||
|
||||
.frc-impact p {
|
||||
color: #9ca3af;
|
||||
line-height: 1.7;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.frc-impact ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #d1d5db;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.frc-impact ul li {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.frc-impact-image-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.frc-impact-image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
filter: grayscale(100%);
|
||||
transition: filter 0.7s ease;
|
||||
}
|
||||
|
||||
.frc-impact-image-wrap:hover .frc-impact-image {
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
.frc-quote {
|
||||
margin-top: 1rem;
|
||||
border-left: 1px solid #c5a368;
|
||||
border-top: 1px solid #c5a368;
|
||||
padding: 1.5rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.frc-quote p {
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
font-size: 1.1rem;
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.frc-footer {
|
||||
background: #09090b;
|
||||
padding: 5rem 2rem 2.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.frc-footer-grid {
|
||||
display: grid;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.frc-foot-title {
|
||||
margin: 0.8rem 0 0;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.frc-foot-subtitle {
|
||||
margin: 0.5rem 0 0;
|
||||
font-size: 0.72rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.frc-footer-links {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.frc-footer-contact {
|
||||
color: #9ca3af;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.frc-footer-contact p {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.frc-footer-bottom {
|
||||
margin-top: 4rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.07);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.frc-footer-bottom div {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.frc-impact,
|
||||
.frc-process,
|
||||
.frc-expertise-grid,
|
||||
.frc-testimonials,
|
||||
.frc-team {
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
||||
.frc-process {
|
||||
background: rgba(24, 24, 27, 0.5);
|
||||
}
|
||||
|
||||
.frc-process h2 {
|
||||
margin: 0 0 4rem;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.frc-process-grid {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.frc-process-grid article {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.frc-step-number {
|
||||
font-size: 3rem;
|
||||
opacity: 0.3;
|
||||
font-weight: 300;
|
||||
color: #c5a368;
|
||||
line-height: 1;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.frc-process-grid h4 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.frc-process-grid p {
|
||||
margin: 0;
|
||||
font-size: 0.78rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.frc-expertise-grid h4 {
|
||||
margin: 0 0 3rem;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #c5a368;
|
||||
}
|
||||
|
||||
.frc-expertise-items {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-top: 3rem;
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.frc-expertise-items h5 {
|
||||
margin: 0;
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.frc-testimonials {
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.frc-testimonial-quote {
|
||||
max-width: 48rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.frc-testimonial-quote span {
|
||||
font-size: 2.5rem;
|
||||
color: #c5a368;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.frc-testimonial-quote p {
|
||||
margin: 0.75rem 0 0;
|
||||
color: #d1d5db;
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.frc-testimonial-source {
|
||||
margin-top: 1.5rem;
|
||||
color: #c5a368;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.frc-logo-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
opacity: 0.35;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.frc-logo-strip span {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.frc-team h4 {
|
||||
margin: 0 0 3rem;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.frc-team-intro {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.frc-team-intro h2 {
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
font-size: clamp(2rem, 4vw, 2.6rem);
|
||||
}
|
||||
|
||||
.frc-team-intro p {
|
||||
margin: 0 0 2rem;
|
||||
color: #9ca3af;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.frc-team-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.frc-team-card {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
background: rgba(39, 39, 42, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.frc-team-photo {
|
||||
width: 8rem;
|
||||
height: 10rem;
|
||||
background: #27272a;
|
||||
flex-shrink: 0;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.frc-team-card h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.frc-team-role {
|
||||
margin: 0.75rem 0 1rem;
|
||||
color: #c5a368;
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.frc-team-card p {
|
||||
margin: 0.25rem 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.frc-footer-cta-wrap {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.frc-footer-bottom span {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-nav,
|
||||
.frc-hero,
|
||||
.frc-values,
|
||||
.frc-impact,
|
||||
.frc-footer,
|
||||
.frc-process,
|
||||
.frc-expertise-grid,
|
||||
.frc-testimonials,
|
||||
.frc-team {
|
||||
padding-left: 6rem;
|
||||
padding-right: 6rem;
|
||||
}
|
||||
|
||||
.frc-nav-links {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.frc-values {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.frc-impact {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.frc-quote {
|
||||
position: static;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
margin-top: 1rem;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.frc-footer-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.frc-footer-bottom {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.frc-process-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.frc-expertise-items {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.frc-team-intro,
|
||||
.frc-team-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.frc-footer-cta-wrap {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Reference in New Issue
Block a user