/* ============================================
MOTOR MARKETEER - HOMEPAGE STYLING
Plakken in Odoo: Website > Configuration > Settings
> Custom Code > (binnen tags)
OF in Theme Customizer > Advanced > Custom CSS
============================================ */
/* ---------- 1. VARIABELEN ---------- */
:root {
--canvas: #FFFFFF;
--ink: #1A1A1A;
--ink-soft: #2A2A2A;
--text-muted: #6B6B6B;
--text-soft: #9B9B9B;
--signal: #FF5500;
--signal-dark: #E04A00;
--bg-soft: #F5F2EB;
--bg-soft-2: #FAF7F2;
--line: #E5E5E5;
--line-soft: #F0F0F0;
--line-dark: #2A2A2A;
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
}
/* ---------- 2. ALGEMENE TYPOGRAPHY ---------- */
body {
font-family: var(--font-body) !important;
color: var(--ink);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display) !important;
font-weight: 600;
letter-spacing: -0.02em;
}
/* ---------- 3. SECTIE LABELS (kleine ALL CAPS boven elke H2) ---------- */
.mm-label {
display: inline-block;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--signal);
margin-bottom: 18px;
}
.mm-label-light { color: var(--signal); }
.mm-label-dark { color: var(--signal); }
/* ---------- 4. KNOPPEN ---------- */
.mm-btn, a.btn.mm-btn-primary, .btn.mm-btn-primary {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 16px 28px !important;
border-radius: 6px !important;
font-weight: 500;
font-size: 16px;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
border: none;
}
.btn.mm-btn-primary, a.btn.mm-btn-primary {
background: var(--signal) !important;
color: white !important;
}
.btn.mm-btn-primary:hover, a.btn.mm-btn-primary:hover {
background: var(--signal-dark) !important;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255,85,0,0.25);
}
.btn.mm-btn-ghost, a.btn.mm-btn-ghost {
background: transparent !important;
color: white !important;
border: 1px solid rgba(255,255,255,0.25) !important;
}
.btn.mm-btn-ghost:hover, a.btn.mm-btn-ghost:hover {
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.4) !important;
}
/* ---------- 5. HERO SECTIE (donker met grid + oranje glow) ---------- */
.mm-hero { text-align: left !important; }
.mm-hero .hero-content { max-width: 820px; }
.mm-hero {
background: var(--ink) !important;
color: white;
padding: 130px 0 150px !important;
position: relative;
overflow: hidden;
}
.mm-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
z-index: 0;
}
.mm-hero::after {
content: '';
position: absolute;
left: 62%;
top: 50%;
transform: translate(-50%, -50%);
width: 720px;
height: 720px;
background: radial-gradient(circle, rgba(255,85,0,0.34) 0%, rgba(255,85,0,0.12) 45%, transparent 72%);
pointer-events: none;
z-index: 0;
animation: mm-heartbeat 2.4s ease-in-out infinite;
}
@keyframes mm-heartbeat {
0%, 100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.12; }
50% { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
}
@keyframes mm-heartbeat-cta {
0%, 100% { transform: scale(0.94); opacity: 0.12; }
50% { transform: scale(1.16); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.mm-hero::after { animation: none; }
}
.mm-hero > .container { position: relative; z-index: 1; }
.mm-hero h1 {
font-size: clamp(42px, 6.5vw, 80px) !important;
font-weight: 600 !important;
line-height: 1.05;
letter-spacing: -0.035em;
margin-bottom: 30px;
max-width: 820px;
color: white !important;
}
.mm-hero .lead, .mm-hero .h4, .mm-hero p:nth-of-type(1) {
font-size: clamp(18px, 2.2vw, 24px) !important;
font-weight: 400;
color: rgba(255,255,255,0.88) !important;
margin-bottom: 24px;
max-width: 700px;
}
.mm-hero p {
font-size: 17px;
color: rgba(255,255,255,0.65);
line-height: 1.7;
margin-bottom: 24px;
max-width: 600px;
}
/* ---------- 6. STANDAARD SECTIES (witte en grijze achtergrond) ---------- */
.mm-section {
padding: 120px 0 !important;
}
.mm-section-light { background: var(--canvas) !important; }
.mm-section-soft { background: var(--bg-soft) !important; }
.mm-section-dark { background: var(--ink) !important; color: white !important; }
.mm-section h2 {
font-size: clamp(36px, 4.5vw, 56px) !important;
font-weight: 600 !important;
line-height: 1.1;
letter-spacing: -0.025em;
margin-bottom: 22px;
max-width: 820px;
}
.mm-section-dark h2 { color: white !important; }
.mm-section .section-intro,
.mm-section .lead {
font-size: 19px !important;
line-height: 1.6;
color: var(--text-muted);
max-width: 760px;
margin-bottom: 70px;
}
.mm-section-dark .section-intro,
.mm-section-dark .lead {
color: rgba(255,255,255,0.7) !important;
}
/* ---------- 7. PROBLEEM SECTIE (3 cards met grote nummers) ---------- */
.mm-problem-section .row > div {
background: var(--canvas);
padding: 40px 32px !important;
border: 1px solid var(--line);
border-radius: 8px;
position: relative;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.mm-problem-section .row > div:hover {
border-color: var(--signal);
transform: translateY(-3px);
}
.mm-problem-section .row > div h3,
.mm-problem-section .row > div h4 {
font-size: 21px !important;
font-weight: 600;
margin: 18px 0 12px !important;
letter-spacing: -0.01em;
}
.mm-problem-section .row > div p {
font-size: 15.5px;
color: var(--text-muted);
line-height: 1.6;
}
/* Grote nummer-styling: voeg in elke card een 01 toe */
.mm-num {
display: block;
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
color: var(--signal);
line-height: 1;
margin-bottom: 4px;
letter-spacing: -0.04em;
}
.mm-problem-conclusion {
text-align: center;
margin-top: 60px;
font-size: 18px;
color: var(--ink);
font-weight: 500;
}
.mm-problem-conclusion strong { color: var(--signal); font-weight: 600; }
/* ---------- 8. PIJLERS SECTIE (4 met icoon + titel + tekst) ---------- */
.mm-pillars-section .row > div {
background: var(--canvas);
padding: 36px 28px !important;
border-radius: 10px;
border: 1px solid var(--line);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mm-pillars-section .row > div:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.06);
border-color: var(--signal);
}
.mm-pillars-section .row > div .fa,
.mm-pillars-section .row > div i.fa,
.mm-pillars-section .row > div .s_image,
.mm-pillars-section .row > div .ti {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 10px;
background: rgba(255,85,0,0.1);
color: var(--signal) !important;
font-size: 24px;
margin-bottom: 24px;
}
.mm-pillars-section .row > div h3,
.mm-pillars-section .row > div h4 {
font-size: 21px !important;
font-weight: 600;
margin-bottom: 12px !important;
letter-spacing: -0.01em;
}
.mm-pillars-section .row > div p {
font-size: 15.5px;
color: var(--text-muted);
line-height: 1.6;
}
/* ---------- 9. PLATFORM CARDS (4 cards met lijsten + upcoming) ---------- */
.mm-platform-section .row > div {
background: var(--canvas);
padding: 36px 30px !important;
border-radius: 10px;
border: 1px solid var(--line);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mm-platform-section .row > div:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.06);
border-color: var(--signal);
}
.mm-platform-section .row > div h3 {
font-size: 22px !important;
font-weight: 700;
margin-bottom: 6px !important;
letter-spacing: -0.015em;
}
.mm-platform-tag {
font-size: 12px;
font-weight: 500;
color: var(--signal);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 22px !important;
display: block;
}
.mm-platform-section ul {
list-style: none !important;
padding: 0 !important;
margin: 0;
}
.mm-platform-section ul li {
padding: 10px 0;
font-size: 15px;
color: var(--ink-soft);
border-bottom: 1px dashed var(--line);
position: relative;
padding-left: 18px;
}
.mm-platform-section ul li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--signal);
}
.mm-platform-section ul li:last-child { border-bottom: none; }
.mm-platform-section ul li.mm-upcoming {
color: var(--text-soft);
font-style: italic;
}
.mm-platform-section ul li.mm-upcoming::before {
background: var(--text-soft);
}
/* ---------- 10. HOE WERKT HET (3 stappen met grote nummers) ---------- */
.mm-how-section .row > div {
padding: 0 16px !important;
position: relative;
}
.mm-how-num {
font-family: var(--font-display);
font-size: 80px;
font-weight: 700;
line-height: 1;
color: var(--signal);
margin-bottom: 18px;
letter-spacing: -0.04em;
}
.mm-how-section .row > div h3 {
font-size: 22px !important;
font-weight: 600;
margin-bottom: 14px !important;
letter-spacing: -0.015em;
}
.mm-how-section .row > div p {
font-size: 15.5px;
color: var(--text-muted);
line-height: 1.65;
}
/* ---------- 11. CASES (logos in tekst, horizontaal) ---------- */
.mm-cases-section .row {
align-items: center;
justify-content: center;
}
.mm-cases-section .row > div {
text-align: center;
}
.mm-case-logo, .mm-cases-section .row > div h3 {
font-family: var(--font-display) !important;
font-size: 26px !important;
font-weight: 600 !important;
color: var(--text-soft) !important;
letter-spacing: -0.01em;
transition: color 0.2s ease;
text-align: center;
padding: 24px 8px;
}
.mm-case-logo:hover, .mm-cases-section .row > div:hover h3 {
color: var(--ink) !important;
}
/* ---------- 12. OVER ONS SECTIE ---------- */
.mm-about-section h2 {
margin-bottom: 22px !important;
}
.mm-about-section p {
font-size: 17px;
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 18px;
}
.mm-about-image {
aspect-ratio: 4/5;
background: var(--ink);
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.3);
font-size: 120px;
position: relative;
}
.mm-about-image::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(255,85,0,0.08) 0%, transparent 70%);
pointer-events: none;
}
/* ---------- 13. FINAL CTA (donker, gecentreerd) ---------- */
.mm-final-cta {
background: var(--ink) !important;
color: white !important;
text-align: center;
padding: 110px 0 !important;
position: relative;
overflow: hidden;
}
.mm-final-cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(255,85,0,0.20) 0%, transparent 55%);
transform-origin: 50% 0%;
animation: mm-heartbeat-cta 2.4s ease-in-out infinite;
}
.mm-final-cta > .container { position: relative; z-index: 1; }
.mm-final-cta h2 {
color: white !important;
font-size: clamp(36px, 5vw, 56px) !important;
margin-bottom: 22px !important;
max-width: 760px;
margin-left: auto !important;
margin-right: auto !important;
}
.mm-final-cta p {
font-size: 18px;
color: rgba(255,255,255,0.7);
max-width: 600px;
margin: 0 auto 36px !important;
}
/* ---------- 14. INLINE LINKS (Bekijk het platform > etc) ---------- */
.mm-inline-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
color: var(--signal) !important;
font-size: 16px;
margin-top: 40px;
text-decoration: none !important;
transition: gap 0.2s ease;
}
.mm-inline-link:hover { gap: 10px; }
/* ---------- 15. REVEAL ANIMATIES ---------- */
@media (prefers-reduced-motion: no-preference) {
.mm-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.mm-reveal.mm-visible {
opacity: 1;
transform: translateY(0);
}
}
/* ---------- 16. MOBILE RESPONSIVE ---------- */
@media (max-width: 900px) {
.mm-section { padding: 80px 0 !important; }
.mm-hero { padding: 90px 0 110px !important; }
.mm-how-num { font-size: 60px; }
}
@media (max-width: 600px) {
.mm-hero h1 { font-size: 36px !important; }
.mm-section h2 { font-size: 30px !important; }
.mm-num { font-size: 36px; }
.mm-how-num { font-size: 48px; }
}
/* ---------- 17. FULL-WIDTH FIX (witte randen wegwerken) ---------- */
.mm-hero,
.mm-section,
.mm-final-cta {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
box-sizing: border-box;
}
/* De binnen-container houdt wel nette marges */
.mm-hero > .container,
.mm-section > .container,
.mm-final-cta > .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
/* ---------- 18. PLATFORM PAGINA: CATEGORIE-RIJEN ---------- */
.mm-cat-row { padding: 110px 0; }
.mm-cat-row.bg-light { background: var(--canvas); }
.mm-cat-row.bg-soft { background: var(--bg-soft); }
.mm-cat-row .cat-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
.mm-cat-row.reverse .cat-visual { order: 2; }
.mm-cat-row .cat-visual {
aspect-ratio: 4/3;
background: var(--ink);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: rgba(255,255,255,0.35);
position: relative;
overflow: hidden;
}
.mm-cat-row .cat-visual::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 32px 32px;
}
.mm-cat-row .cat-visual::after {
content: '';
position: absolute;
left: 60%;
top: 45%;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(255,85,0,0.18) 0%, transparent 70%);
}
.mm-cat-row .cat-visual i { font-size: 64px; position: relative; z-index: 1; }
.mm-cat-row .cat-visual span { font-size: 13px; letter-spacing: 0.05em; position: relative; z-index: 1; }
.mm-cat-row .cat-text h2 {
font-size: clamp(30px, 3.4vw, 42px);
line-height: 1.15;
letter-spacing: -0.025em;
margin-bottom: 22px;
}
.mm-cat-row .cat-problem {
font-size: 16.5px;
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 16px;
}
.mm-cat-row .cat-does {
font-size: 16.5px;
color: var(--ink-soft);
line-height: 1.7;
margin-bottom: 22px;
}
.mm-cat-row .cat-benefit {
border-left: 3px solid var(--signal);
padding-left: 20px;
margin-bottom: 24px;
font-size: 16.5px;
color: var(--ink);
font-weight: 500;
line-height: 1.6;
}
.mm-cat-row .cat-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 30px;
}
.mm-cat-row .cat-chip {
font-size: 13px;
padding: 7px 15px;
border-radius: 100px;
background: rgba(255,85,0,0.09);
color: var(--signal);
font-weight: 500;
}
.mm-cat-row .cat-chip.upcoming {
background: rgba(0,0,0,0.05);
color: var(--text-soft);
}
.mm-cat-row .cat-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--ink);
font-size: 16px;
text-decoration: none;
padding: 13px 24px;
border: 1.5px solid var(--ink);
border-radius: 6px;
transition: all 0.2s ease;
}
.mm-cat-row .cat-link:hover {
background: var(--ink);
color: white;
gap: 12px;
}
/* ---------- 19. PLATFORM PAGINA: FLOW-STAPPEN ---------- */
.mm-flow-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.mm-flow-step {
background: var(--bg-soft);
border-radius: 12px;
padding: 36px 30px;
}
.mm-flow-step .mm-flow-num {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
color: var(--signal);
margin-bottom: 14px;
}
.mm-flow-step h3 { font-size: 20px; margin-bottom: 12px; }
.mm-flow-step p { font-size: 15px; color: var(--text-muted); line-height: 1.65; }
@media (max-width: 900px) {
.mm-cat-row { padding: 70px 0; }
.mm-cat-row .cat-inner { grid-template-columns: 1fr; gap: 40px; }
.mm-cat-row.reverse .cat-visual { order: 0; }
.mm-flow-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ---------- 20. PLATFORM PAGINA: CATEGORIE-RIJEN FULL-WIDTH ---------- */
.mm-cat-row {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/* ---------- 21. PLATFORM PAGINA: FLOW-SECTIE ---------- */
.mm-flow-section {
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
background: var(--canvas);
padding: 110px 0;
}
.mm-flow-section > .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* ---------- 22. SUBPAGINA: MODULES ---------- */
.mm-modules {
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
background: var(--bg-soft);
padding: 110px 0;
}
.mm-modules > .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.mm-modules-intro { max-width: 760px; margin-bottom: 60px; }
.mm-modules-intro h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 18px; }
.mm-modules-intro p { font-size: 18px; color: var(--text-muted); line-height: 1.6; }
.mm-module {
background: var(--canvas);
border: 1px solid var(--line);
border-radius: 16px;
padding: 44px;
margin-bottom: 24px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-module:last-child { margin-bottom: 0; }
.mm-module-left { padding-right: 52px; }
.mm-module-right { padding-left: 52px; border-left: 1px solid var(--line); }
.mm-module-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.mm-module-icon { width: 58px; height: 58px; border-radius: 13px; background: rgba(255,85,0,0.09); color: var(--signal); display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.mm-module-titles h3 { font-size: 25px; margin-bottom: 3px; }
.mm-module-tag { font-size: 14.5px; color: var(--text-muted); }
.mm-module-uitleg { font-size: 16px; color: var(--ink-soft); line-height: 1.72; }
.mm-does-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--signal); font-weight: 600; margin-bottom: 12px; display: block; }
.mm-does-list { list-style: none; }
.mm-does-list li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; font-size: 15px; color: var(--ink-soft); line-height: 1.55; border-bottom: 1px dashed var(--line); }
.mm-does-list li:last-child { border-bottom: none; }
.mm-does-list li i { color: var(--signal); font-size: 17px; margin-top: 1px; flex-shrink: 0; }
/* ---------- 23. SUBPAGINA: HERO BACK-LINK ---------- */
.mm-hero-back { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; font-weight: 500; margin-bottom: 26px; transition: color 0.2s ease; }
.mm-hero-back:hover { color: var(--signal); }
@media (max-width: 860px) {
.mm-modules { padding: 70px 0; }
.mm-module { padding: 32px 26px; grid-template-columns: 1fr; }
.mm-module-left { padding-right: 0; margin-bottom: 28px; }
.mm-module-right { padding-left: 0; border-left: none; border-top: 1px solid var(--line); padding-top: 28px; }
}
/* ---------- 24. SUBPAGINA: TEAM-NAAM RIJ + BINNENKORT-BADGE ---------- */
.mm-module-name-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.mm-module-name-row h3 { font-size: 25px; margin-bottom: 0; }
.mm-badge { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 11px; border-radius: 100px; background: rgba(0,0,0,0.06); color: var(--text-soft); }
/* Binnenkort-variant: ingetogen */
.mm-module.upcoming .mm-module-icon { background: rgba(0,0,0,0.05); color: var(--text-soft); }
.mm-module.upcoming .mm-does-label { color: var(--text-soft); }
.mm-module.upcoming .mm-does-list li i { color: var(--text-soft); }
/* ---------- 25. SUBPAGINA: PAYOFF-BLOK ---------- */
.mm-payoff-section {
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
background: var(--canvas);
padding: 110px 0;
}
.mm-payoff-section > .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.mm-payoff { background: var(--bg-soft); border-radius: 18px; padding: 56px; }
.mm-payoff h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 16px; max-width: 620px; }
.mm-payoff > p { font-size: 17px; color: var(--text-muted); line-height: 1.65; max-width: 660px; margin-bottom: 40px; }
.mm-payoff-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.mm-payoff-point { display: flex; flex-direction: column; gap: 12px; }
.mm-payoff-point-icon { width: 48px; height: 48px; border-radius: 11px; background: rgba(255,85,0,0.09); color: var(--signal); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.mm-payoff-point h3 { font-size: 17px; }
.mm-payoff-point p { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 860px) {
.mm-payoff-section { padding: 70px 0; }
.mm-payoff { padding: 36px 26px; }
.mm-payoff-points { grid-template-columns: 1fr; gap: 28px; }
}/* ---------- 26. SUBPAGINA: ACCENT-BADGE + FEATURED-BLOK ---------- */
.mm-badge.accent { background: rgba(255,85,0,0.15); color: var(--signal); }
.mm-module.featured { background: var(--ink); border-color: var(--ink); }
.mm-module.featured .mm-module-right { border-left-color: rgba(255,255,255,0.12); }
.mm-module.featured .mm-module-icon { background: var(--signal); color: #fff; }
.mm-module.featured .mm-module-name-row h3 { color: #fff; }
.mm-module.featured .mm-module-tag { color: rgba(255,255,255,0.6); }
.mm-module.featured .mm-module-uitleg { color: rgba(255,255,255,0.78); }
.mm-module.featured .mm-does-list li { color: rgba(255,255,255,0.8); border-bottom-color: rgba(255,255,255,0.12); }
@media (max-width: 860px) {
.mm-module.featured .mm-module-right { border-top-color: rgba(255,255,255,0.12); }
}
/* ---------- 27. FOOTER ---------- */
.mm-footer {
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
background: #000000;
color: rgba(255,255,255,0.7);
border-top: none !important;
text-align: left;
}
.mm-footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 70px 24px 44px;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
gap: 48px;
}
.mm-footer-logo {
height: 140px !important;
width: auto !important;
display: block;
margin-bottom: 8px;
margin-left: -10px;
}
.mm-footer-tagline {
font-size: 15px !important;
line-height: 1.6;
color: rgba(255,255,255,0.5);
max-width: 260px;
}
.mm-footer-col h4 {
font-family: var(--font-display);
font-size: 15px !important;
font-weight: 600;
color: #fff !important;
margin-bottom: 18px;
}
.mm-footer-col ul { list-style: none; margin: 0; padding: 0; }
.mm-footer-col ul li { margin-bottom: 11px; }
.mm-footer-col ul li a {
color: rgba(255,255,255,0.6) !important;
text-decoration: none;
font-size: 15px !important;
transition: color 0.2s ease;
}
.mm-footer-col ul li a:hover { color: var(--signal) !important; }
.mm-footer-contact a {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,0.6) !important;
text-decoration: none;
font-size: 15px !important;
margin-bottom: 13px;
transition: color 0.2s ease;
}
.mm-footer-contact a:hover { color: var(--signal) !important; }
.mm-footer-contact a i { color: var(--signal); font-size: 18px; flex-shrink: 0; }
.mm-footer-bar { border-top: 1px solid rgba(255,255,255,0.08); }
.mm-footer-bar-inner {
max-width: 1200px;
margin: 0 auto;
padding: 22px 24px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: rgba(255,255,255,0.4);
}
.mm-footer-bar-inner a {
color: rgba(255,255,255,0.4) !important;
text-decoration: none;
transition: color 0.2s ease;
}
.mm-footer-bar-inner a:hover { color: var(--signal) !important; }
/* Odoo footer-wrapper opschonen */
.mm-footer, .mm-footer * { box-sizing: border-box; }
#footer, footer#bottom, .o_footer, .o_footer .oe_structure {
border: none !important;
}
@media (max-width: 860px) {
.mm-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; padding: 50px 24px 32px; }
.mm-footer-bar-inner { flex-direction: column; gap: 8px; text-align: center; }
}
/* ---------- 28. CONTACT: FORMULIER-SECTIE ---------- */
.mm-form-section {
width: 100vw; position: relative; left: 50%; margin-left: -50vw;
background: var(--bg-soft);
padding: 90px 0 30px;
}
.mm-form-section > .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mm-form-head { max-width: 720px; margin: 0 auto 24px; text-align: center; }
.mm-form-head h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 14px; }
.mm-form-head p { font-size: 18px; color: var(--text-muted); }
/* Odoo formulier-blok bijkleuren */
.s_website_form {
background: var(--bg-soft) !important;
padding-top: 20px !important;
padding-bottom: 110px !important;
}
.s_website_form .container,
.s_website_form .container-fluid { max-width: 720px; margin: 0 auto; }
.s_website_form form {
background: var(--canvas);
border: 1px solid var(--line);
border-radius: 18px;
padding: 48px;
}
.s_website_form .s_website_form_label,
.s_website_form label {
font-size: 14px !important; font-weight: 600 !important;
color: var(--ink) !important; margin-bottom: 8px !important;
font-family: var(--font-body) !important;
}
.s_website_form input.form-control,
.s_website_form select.form-control,
.s_website_form textarea.form-control,
.s_website_form .form-select {
border: 1.5px solid var(--line) !important;
border-radius: 8px !important;
padding: 13px 15px !important;
font-size: 15px !important;
font-family: var(--font-body) !important;
color: var(--ink) !important;
box-shadow: none !important;
}
.s_website_form input.form-control:focus,
.s_website_form select.form-control:focus,
.s_website_form textarea.form-control:focus,
.s_website_form .form-select:focus {
border-color: var(--signal) !important;
box-shadow: none !important;
}
.s_website_form textarea.form-control { min-height: 140px !important; }
.s_website_form .s_website_form_send,
.s_website_form button[type="submit"] {
background: var(--signal) !important;
border: none !important;
color: #fff !important;
font-family: var(--font-body) !important;
font-weight: 500 !important;
font-size: 16px !important;
padding: 15px 32px !important;
border-radius: 6px !important;
width: 100% !important;
transition: background 0.2s ease !important;
}
.s_website_form .s_website_form_send:hover,
.s_website_form button[type="submit"]:hover {
background: var(--signal-dark) !important;
}
/* ---------- 29. CONTACT: WAT GEBEURT DAARNA ---------- */
.mm-after {
width: 100vw; position: relative; left: 50%; margin-left: -50vw;
background: var(--canvas); padding: 110px 0;
}
.mm-after > .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mm-after-head { max-width: 720px; margin-bottom: 56px; }
.mm-after-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.13; letter-spacing: -0.025em; margin-bottom: 14px; }
.mm-after-head p { font-size: 18px; color: var(--text-muted); }
.mm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 64px; }
.mm-step { background: var(--bg-soft); border-radius: 14px; padding: 34px 30px; }
.mm-step-num { font-family: var(--font-display); font-size: 38px; font-weight: 700; color: var(--signal); line-height: 1; margin-bottom: 16px; }
.mm-step h3 { font-size: 19px; margin-bottom: 10px; }
.mm-step p { font-size: 15px; color: var(--text-muted); line-height: 1.6; }
.mm-direct { border-top: 1px solid var(--line); padding-top: 40px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.mm-direct-label { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.mm-direct-links { display: flex; gap: 26px; flex-wrap: wrap; }
.mm-direct-links a { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.2s ease; }
.mm-direct-links a:hover { color: var(--signal); }
.mm-direct-links a i { color: var(--signal); font-size: 19px; }
@media (max-width: 860px) {
.mm-form-section, .mm-after { padding: 70px 0; }
.mm-form-wrap .s_website_form_rows, .mm-form-wrap form { padding: 32px 26px; }
.mm-steps { grid-template-columns: 1fr; gap: 18px; }
}
/* ---------- 30. CONTACT: CONTACT-KOLOM NAAST FORMULIER ---------- */
.mm-contact-side {
max-width: 720px;
margin: 70px auto 0;
padding: 44px 48px;
background: var(--canvas);
border: 1px solid var(--line);
border-radius: 18px;
}
.mm-contact-side-links {
flex-direction: column !important;
gap: 18px;
}
.mm-contact-side h3 { font-size: 24px; font-family: var(--font-display); font-weight: 600; margin-bottom: 12px; }
.mm-contact-side > p { font-size: 15.5px; color: var(--text-muted); line-height: 1.65; margin-bottom: 28px; }
.mm-contact-side-links { display: flex; flex-direction: column; gap: 16px; }
.mm-contact-side-links a { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.mm-cs-icon {
width: 46px; height: 46px; border-radius: 11px;
background: rgba(255,85,0,0.09); color: var(--signal);
display: flex; align-items: center; justify-content: center;
font-size: 22px; flex-shrink: 0;
}
.mm-cs-text { display: flex; flex-direction: column; }
.mm-cs-text strong { font-size: 12.5px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.mm-cs-text span { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.mm-contact-side-links a:hover .mm-cs-text span { color: var(--signal); }
@media (max-width: 860px) {
.mm-contact-side {
margin: 40px 16px 0;
padding: 32px 24px;
}
.mm-contact-side h3 { font-size: 21px; }
.mm-cs-text span { color: var(--ink) !important; }
}
.mm-contact-side { text-align: left; }
.mm-contact-side h3,
.mm-contact-side > p { text-align: left; }
.mm-cs-text { text-align: left; align-items: flex-start; }
.mm-cs-text strong, .mm-cs-text span { display: block; text-align: left; }
.mm-contact-side-links a { justify-content: flex-start; }
/* ---------- 31. OVER ONS: FOTO ---------- */
.mm-about-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
/* ---------- 32. OVER MIJ: HERO MET FOTO ---------- */
.mm-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; }
.mm-hero-photo { aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; }
.mm-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------- 33. OVER MIJ: VERHAAL ---------- */
.mm-verhaal {
width: 100vw; position: relative; left: 50%; margin-left: -50vw;
background: var(--canvas); padding: 110px 0;
}
.mm-verhaal > .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mm-verhaal-inner { max-width: 760px; }
.mm-verhaal h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 28px; }
.mm-verhaal p { font-size: 17.5px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 20px; }
.mm-verhaal p:last-child { margin-bottom: 0; }
/* ---------- 34. OVER MIJ: WERKWIJZE ---------- */
.mm-werkwijze {
width: 100vw; position: relative; left: 50%; margin-left: -50vw;
background: var(--bg-soft); padding: 110px 0;
}
.mm-werkwijze > .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mm-werkwijze-head { max-width: 720px; margin-bottom: 56px; }
.mm-werkwijze-head h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 16px; }
.mm-werkwijze-head p { font-size: 18px; color: var(--text-muted); line-height: 1.6; }
.mm-werkwijze-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.mm-ww-card { background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; padding: 36px; }
.mm-ww-icon { width: 54px; height: 54px; border-radius: 12px; background: rgba(255,85,0,0.09); color: var(--signal); display: flex; align-items: center; justify-content: center; font-size: 27px; margin-bottom: 20px; }
.mm-ww-card h3 { font-size: 21px; margin-bottom: 10px; }
.mm-ww-card p { font-size: 15.5px; color: var(--text-muted); line-height: 1.65; }
@media (max-width: 860px) {
.mm-hero-grid { grid-template-columns: 1fr; gap: 40px; }
.mm-hero-photo { max-width: 360px; }
.mm-verhaal, .mm-werkwijze { padding: 70px 0; }
.mm-werkwijze-grid { grid-template-columns: 1fr; gap: 18px; }
.mm-ww-card { padding: 30px 26px; }
}