/*
* Technicarro-CAP 4.0 — modern presentation layer
* Keeps the existing WordPress content model and can be disabled independently.
*/
:root {
--tco-red: #e30613;
--tco-red-dark: #b8040e;
--tco-ink: #171717;
--tco-muted: #686868;
--tco-line: #dedbd6;
--tco-sand: #f4f2ee;
--tco-paper: #f6f4f0;
--tco-white: #fff;
--tco-radius: 18px;
--tco-shadow: 0 18px 55px rgba(20, 20, 20, 0.1);
--tco-content: min(1240px, calc(100vw - 48px));
}
html {
display: block;
min-width: 320px;
scroll-behavior: smooth;
}
body {
background: var(--tco-white);
color: var(--tco-ink);
font-family: "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
body.admin-bar header { top: 32px; }
::selection { background: var(--tco-red); color: var(--tco-white); }
:focus-visible {
outline: 3px solid rgba(227, 6, 19, 0.35);
outline-offset: 4px;
}
img { max-width: 100%; }
#center,
header #top #center,
header #logo #center,
header #baseline #center,
footer > #center {
width: var(--tco-content);
max-width: 1240px;
}
header {
position: sticky;
top: 0;
z-index: 5000;
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid rgba(23, 23, 23, 0.08);
box-shadow: 0 8px 28px rgba(20, 20, 20, 0.04);
backdrop-filter: blur(16px);
}
header #top { display: none; }
header #logo #center {
height: 112px;
justify-content: space-between;
gap: 36px;
}
header #logo .middle {
flex: 0 0 190px;
width: 190px;
height: 92px;
}
header #logo .middle img.technicarro-CAP {
top: 9px;
left: 0;
right: auto;
height: 78px !important;
}
header #logo .right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
}
header #logo .language {
position: relative;
top: auto;
right: auto;
order: 2;
width: auto !important;
height: 38px !important;
min-width: 62px;
padding: 8px 12px;
border-radius: 999px;
background: var(--tco-paper);
color: var(--tco-ink);
font-weight: 700;
line-height: 22px;
}
header #logo .language-content {
top: 44px;
right: 0;
width: 70px;
padding: 6px;
border: 1px solid var(--tco-line);
border-radius: 12px;
background: var(--tco-white);
box-shadow: var(--tco-shadow);
}
header #logo .language-content a {
padding: 7px 10px;
border-radius: 7px;
color: var(--tco-ink);
font-weight: 700;
}
header #logo .language-content a:hover { background: var(--tco-paper); }
nav.desktop ul { align-items: center; gap: 28px; }
nav.desktop li {
flex: none;
margin: 0;
padding: 0;
border: 0;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
}
nav.desktop ul li a {
display: block;
padding: 14px 0 12px;
border-bottom: 2px solid transparent;
transition: color 180ms ease, border-color 180ms ease;
}
nav.desktop ul li a:hover,
nav.desktop ul li.current_page_item a,
nav.desktop ul li.current-page-ancestor a {
border-bottom-color: var(--tco-red);
color: var(--tco-red);
}
header #baseline { display: none; }
header > .line { display: none; }
main { overflow: clip; }
main > #center:first-of-type {
position: relative;
width: var(--tco-content);
max-width: 1440px;
margin-top: 28px;
}
#introphoto {
height: clamp(430px, 58vw, 720px);
border-radius: 26px;
background: var(--tco-paper);
box-shadow: var(--tco-shadow);
}
#introphoto .shadow {
left: 0;
width: 100%;
box-shadow: inset 0 -180px 140px -110px rgba(0, 0, 0, 0.58);
}
#introphoto img {
z-index: 0;
width: 100% !important;
height: 100%;
object-fit: cover;
transform: scale(1.002);
}
#summary {
left: clamp(22px, 5vw, 76px);
top: auto;
bottom: 38px;
width: min(520px, calc(100% - 44px));
padding: 32px 36px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--tco-radius);
background: rgba(19, 19, 19, 0.84);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
text-shadow: none;
backdrop-filter: blur(16px);
}
#summary h1 {
padding: 0 0 12px;
font-size: clamp(24px, 3vw, 38px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.025em;
text-transform: none;
}
#summary .line,
#summary img.triangle { display: none; }
#reference {
top: auto;
right: 26px;
bottom: 26px;
width: min(390px, calc(100% - 52px));
padding: 18px 22px;
border-radius: 13px;
background: rgba(19, 19, 19, 0.82);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
text-shadow: none;
backdrop-filter: blur(12px);
}
#reference img.triangle { display: none; }
#reference h1 { color: rgba(255, 255, 255, 0.68); letter-spacing: 0.08em; }
#reference h2 { font-size: 23px; line-height: 1.2; }
.mySlides-arrow {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: var(--tco-ink);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
line-height: 48px;
}
.mySlides-bullet { border-color: rgba(255, 255, 255, 0.9); }
.mySlides-bullet-change, .mySlides-bullet:hover { background: var(--tco-red); }
main .page_title {
padding: 54px 0 22px;
font-size: clamp(30px, 5vw, 58px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.035em;
text-align: left;
text-transform: none;
}
main > .line { display: none; }
section {
padding: 60px 0 78px;
font-size: 16px;
line-height: 1.75;
text-align: left;
}
section.top { padding-top: 82px; }
article h1 {
margin: 0 0 22px;
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
text-transform: none;
}
article h2 {
font-size: 20px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
text-transform: none;
}
article.left { width: 64%; padding-right: 70px; }
aside {
width: 36%;
padding: 0;
border-radius: var(--tco-radius);
box-shadow: var(--tco-shadow);
}
aside img,
aside iframe,
#googlemaps { border-radius: var(--tco-radius); }
section a { color: var(--tco-red-dark); text-underline-offset: 3px; }
.btn,
.contacteer_ons_vrijblijvend {
min-height: 46px;
padding: 13px 24px;
border: 1px solid var(--tco-ink);
border-radius: 999px;
background: var(--tco-ink);
color: var(--tco-white);
font-size: 12px;
font-weight: 750;
letter-spacing: 0.09em;
text-decoration: none;
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.btn:hover,
.btn:focus,
.contacteer_ons_vrijblijvend:hover {
transform: translateY(-2px);
border-color: var(--tco-red);
background: var(--tco-red);
box-shadow: 0 10px 24px rgba(227, 6, 19, 0.23);
color: var(--tco-white);
}
#summary .btn { border-color: var(--tco-white); background: var(--tco-white); color: var(--tco-ink); }
#summary .btn:hover { border-color: var(--tco-red); background: var(--tco-red); color: var(--tco-white); }
#case,
#case2 {
width: calc(33.333% - 22px);
margin: 11px;
overflow: hidden;
border: 1px solid rgba(23, 23, 23, 0.08);
border-radius: var(--tco-radius);
background: var(--tco-white);
box-shadow: 0 12px 38px rgba(20, 20, 20, 0.07);
transition: transform 220ms ease, box-shadow 220ms ease;
}
#case:hover,
#case2:hover {
transform: translateY(-6px);
border-bottom-color: transparent;
box-shadow: 0 22px 52px rgba(20, 20, 20, 0.14);
}
#case .image { height: 260px; }
#case .image img { transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
#case:hover .image img { transform: scale(1.045); }
#case .sector,
.wp-caption-text {
right: 14px;
bottom: 14px;
padding: 7px 11px;
border-radius: 999px;
background: rgba(19, 19, 19, 0.8);
font-size: 10px;
letter-spacing: 0.08em;
backdrop-filter: blur(8px);
}
#case .title { padding: 17px 18px 3px; font-size: 17px; text-transform: none; }
#case a .location { padding: 4px 18px 18px; color: var(--tco-muted); }
#case .overlay { display: none; }
section ul.list {
padding: 34px;
border: 0;
border-radius: var(--tco-radius);
background: var(--tco-paper);
}
section ul.data {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
column-count: unset;
background: transparent;
}
section ul.data li {
padding: 34px 18px;
border-radius: var(--tco-radius);
background: var(--tco-paper);
}
section ul.data li .data1 {
color: var(--tco-red);
font-size: clamp(52px, 7vw, 88px);
font-weight: 750;
letter-spacing: -0.07em;
}
blockquote {
padding: 40px 42px 62px;
border-radius: var(--tco-radius);
background: var(--tco-ink);
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
select,
textarea {
min-height: 48px;
padding: 12px 15px;
border: 1px solid var(--tco-line);
border-radius: 10px;
background-color: var(--tco-white);
font: inherit;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--tco-red);
box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.1);
outline: none;
}
select.large,
input.large,
textarea.small,
.control-group button { width: min(100%, 430px); }
textarea.small { min-height: 140px; resize: vertical; }
.control-group { margin-bottom: 14px; }
.tco-honeypot { position: absolute !important; left: -10000px !important; }
.form-notice { margin: 0 0 24px; padding: 16px 18px; border-radius: 10px; }
.form-notice--success { background: #e7f6ec; color: #176236; }
.form-notice--error { background: #fff0f0; color: #9d1018; }
#cookies-popup {
left: 24px;
right: auto;
bottom: 24px;
width: min(460px, calc(100vw - 48px));
padding: 18px 20px;
border-radius: 14px;
box-shadow: var(--tco-shadow);
}
footer {
padding: 68px 0 22px;
background: var(--tco-ink);
font-size: 13px;
line-height: 1.75;
}
footer h1 { font-size: 15px; letter-spacing: 0.08em; }
footer #address { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap: 54px; }
footer #address .left,
footer #address .middle,
footer #address .right { width: auto; padding: 0; }
footer #copyright { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
@media (max-width: 1000px) {
:root { --tco-content: min(100% - 36px, 820px); }
header #logo #center { height: 88px; }
header #logo .middle { flex-basis: 148px; height: 72px; }
header #logo .middle img.technicarro-CAP { height: 62px !important; top: 5px; }
header .left { display: block; width: 48px; text-align: left; }
header #logo .right { flex: 0 0 60px; }
header nav.desktop { display: none; }
nav.mobile {
top: 88px;
padding: 18px;
background: var(--tco-white);
box-shadow: 0 24px 40px rgba(20,20,20,.12);
}
nav.mobile ul { padding: 10px 0; }
nav.mobile li a { padding: 13px 18px; font-weight: 700; }
#introphoto { height: min(68vw, 580px); min-height: 420px; }
article.left,
aside { width: 100%; padding-right: 0; }
aside { margin-top: 34px; }
#case, #case2 { width: calc(50% - 22px); }
section ul.data { grid-template-columns: repeat(2, 1fr); }
footer #address { grid-template-columns: 1fr 1fr; }
footer #address .right { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
:root { --tco-content: calc(100vw - 28px); --tco-radius: 14px; }
header #logo .language { padding: 8px 9px; min-width: 54px; }
main > #center:first-of-type { margin-top: 14px; }
#introphoto { min-height: 510px; height: 72vh; max-height: 620px; border-radius: 18px; }
#summary {
left: 14px;
bottom: 14px;
width: calc(100% - 28px);
padding: 24px;
}
#summary .text { line-height: 1.55; }
#reference { right: 14px; bottom: 14px; width: calc(100% - 28px); }
.mySlides-arrow { display: none; }
main .page_title { padding-top: 36px; }
section, section.top { padding: 46px 0 58px; }
#case, #case2 { width: 100%; margin: 9px 0; }
#case .image { height: 235px; }
section ul.col2,
section ul.col3,
section ul.col4 { column-count: 1; }
section ul.data { grid-template-columns: 1fr; }
form label.label-mobile { width: 100%; margin: 0 0 5px; }
select.extrasmall,
input.extrasmall,
select.medium,
input.medium,
select.large,
input.large,
textarea.small { width: 100%; margin: 0 0 10px; }
footer #address { grid-template-columns: 1fr; gap: 34px; }
footer #address .right { grid-column: auto; }
footer #copyright .left,
footer #copyright .right { width: 100%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ---------------------------------------------------------------------------
* Referentielogo's — doorlopende band.
* Vervangt de bxSlider-ticker: geen jQuery-plugin, geen CDN-verzoek.
* De lijst staat twee keer in de DOM, zodat de lus bij -50% naadloos sluit.
* ------------------------------------------------------------------------- */
.logo-marquee {
overflow: hidden;
padding: 8px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent);
}
.logo-marquee__track {
display: flex;
align-items: center;
gap: 40px;
width: max-content;
animation: tco-marquee 46s linear infinite;
}
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track {
animation-play-state: paused;
}
/* Elk logo krijgt hetzelfde vak, met object-fit: contain erin.
*
* Met één vaste hoogte klopt de verhouding niet: Jan De Nul is drieënhalf keer
* breder dan hoog en BBC is vierkant, dus bij dezelfde hoogte wordt de ene een
* balk en de andere een postzegel. In een gelijk vak vult een breed logo de
* breedte en een vierkant logo de hoogte, en wegen ze optisch even zwaar. */
.logo-marquee img {
display: block;
width: 150px;
height: 56px;
max-width: none;
object-fit: contain;
object-position: center;
flex-shrink: 0;
}
@keyframes tco-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.logo-marquee { overflow-x: auto; }
.logo-marquee__track { animation: none; }
}
/* ---------------------------------------------------------------------------
* Realisaties: filterbalk, kaartjes en projectfiche
* ------------------------------------------------------------------------- */
.tco-filters {
border-top: 1px solid var(--tco-line);
border-bottom: 1px solid var(--tco-line);
background: #faf9f7;
padding: 26px 0 28px;
margin-bottom: 36px;
}
.tco-filters__row { display: flex; align-items: baseline; gap: 18px; margin-bottom: 16px; }
.tco-filters__row:last-of-type { margin-bottom: 0; }
.tco-filters__label {
width: 92px;
flex-shrink: 0;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tco-muted);
}
.tco-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tco-chip {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--tco-line);
border-radius: 999px;
padding: 7px 16px;
background: #fff;
font-size: 13.5px;
font-weight: 700;
color: var(--tco-ink);
text-decoration: none;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tco-chip:hover { border-color: var(--tco-ink); color: var(--tco-ink); }
.tco-chip.is-on { background: var(--tco-ink); border-color: var(--tco-ink); color: #fff; }
.tco-chip__count { font-size: 11px; font-weight: 700; opacity: 0.5; }
.tco-filters__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 22px;
}
.tco-filters__count { font-size: 14px; color: var(--tco-muted); }
.tco-filters__clear {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 700;
color: var(--tco-red);
text-decoration: none;
}
/* --- kaartjes --- */
.tco-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px 24px;
margin-bottom: 40px;
}
.tco-card a { text-decoration: none; color: inherit; display: block; }
.tco-card__image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #eceae5;
}
.tco-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tco-card__image .overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(23, 23, 23, 0.35);
color: #fff;
font-size: 26px;
opacity: 0;
transition: opacity 0.2s;
}
.tco-card:hover .tco-card__image .overlay { opacity: 1; }
.tco-card__sector {
margin-top: 12px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tco-red);
}
.tco-card__title {
margin-top: 5px;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
.tco-card__city { margin-top: 3px; font-size: 14px; color: var(--tco-muted); }
.tco-card__tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.tco-tag {
border: 1px solid var(--tco-line);
border-radius: 999px;
padding: 4px 12px;
font-size: 11.5px;
font-weight: 700;
color: var(--tco-ink);
text-decoration: none;
}
.tco-tag:hover { border-color: var(--tco-ink); color: var(--tco-ink); }
.tco-empty { padding: 40px 0 60px; color: var(--tco-muted); font-size: 17px; }
/* --- toegepaste disciplines op een projectpagina --- */
.tco-applied { border: 1px solid var(--tco-ink); padding: 22px 26px; margin: 0 0 30px; }
.tco-applied__label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tco-red);
}
.tco-applied__chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
/* --- projectfiche --- */
.tco-fiche-box { border-top: 2px solid var(--tco-ink); padding-top: 16px; margin-bottom: 28px; }
.tco-fiche-box__title {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.tco-fiche-box dl { margin: 10px 0 0; }
.tco-fiche-box dt {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tco-muted);
padding-top: 13px;
}
.tco-fiche-box dd {
margin: 3px 0 0;
padding-bottom: 13px;
border-bottom: 1px solid var(--tco-line);
font-size: 15px;
font-weight: 700;
}
@media (max-width: 760px) {
.tco-filters__row { flex-direction: column; gap: 8px; }
.tco-filters__label { width: auto; }
.tco-grid { grid-template-columns: 1fr; }
}
.tco-archive-intro {
max-width: 640px;
margin: 14px 0 0;
color: var(--tco-muted);
font-size: 16.5px;
line-height: 1.6;
}
/* ---------------------------------------------------------------------------
* Aanbodpagina's
* ------------------------------------------------------------------------- */
.tco-subnav {
border-bottom: 1px solid var(--tco-line);
background: #faf9f7;
}
.tco-subnav #center {
display: flex;
flex-wrap: wrap;
gap: 6px 26px;
padding: 16px 0;
}
.tco-subnav__item {
font-size: 14px;
font-weight: 700;
color: var(--tco-muted);
text-decoration: none;
padding: 4px 0;
}
.tco-subnav__item:hover { color: var(--tco-ink); }
.tco-subnav__item.is-on {
color: var(--tco-ink);
box-shadow: inset 0 -2px 0 var(--tco-red);
}
.tco-aside-text {
margin: 10px 0 16px;
font-size: 14.5px;
line-height: 1.6;
color: var(--tco-muted);
}
.tco-editor-hint {
margin: 30px 0 50px;
padding: 18px 22px;
border-left: 3px solid var(--tco-red);
background: var(--tco-paper);
font-size: 14.5px;
line-height: 1.6;
}
.tco-editor-hint code {
background: #fff;
padding: 1px 6px;
border-radius: 3px;
font-size: 13px;
}
/* ---------------------------------------------------------------------------
* Typografie: Archivo voor de titels, Mulish voor de tekst
* ------------------------------------------------------------------------- */
body {
font-family: "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;
}
h1, h2, h3,
.page_title,
.tco-card__title,
.tco-number__value,
.tco-discipline__name,
.tco-job__title {
font-family: "Archivo", "Mulish", "Segoe UI", system-ui, sans-serif;
font-weight: 800;
letter-spacing: -0.025em;
}
/* ---------------------------------------------------------------------------
* Homepage
* ------------------------------------------------------------------------- */
.tco-section { padding: 76px 0 0; }
.tco-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: 36px;
}
.tco-section__head h2 { margin: 12px 0 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; }
.tco-section__head p { margin: 14px 0 0; max-width: 60ch; color: var(--tco-muted); }
.tco-eyebrow {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tco-red);
}
.btn--ghost { background: transparent; color: var(--tco-ink); border: 1px solid #cfcbc4; }
.btn--ghost:hover { background: var(--tco-red); border-color: var(--tco-red); color: #fff; }
.btn--white { background: #fff; color: var(--tco-ink); border: 1px solid #fff; }
.btn--ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); }
/* --- hero --- */
.tco-hero {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
background: #201d1a center/cover no-repeat;
}
.tco-hero__veil {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(15, 15, 15, 0.86) 0%, rgba(15, 15, 15, 0.5) 55%, rgba(15, 15, 15, 0.15) 100%);
}
.tco-hero__inner { position: relative; padding: 70px 0; }
.tco-hero__text { max-width: 640px; color: #fff; }
.tco-hero__eyebrow {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #ff5560;
}
.tco-hero h1 {
margin: 16px 0 0;
font-size: clamp(32px, 4.6vw, 58px);
line-height: 1.04;
color: #fff;
text-wrap: balance;
}
.tco-hero p { margin: 20px 0 0; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.tco-hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.tco-hero__caption {
position: absolute;
right: 0;
bottom: 0;
max-width: 380px;
padding: 20px 32px 22px 28px;
background: rgba(15, 15, 15, 0.86);
color: #fff;
text-decoration: none;
}
.tco-hero__caption span {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.tco-hero__caption strong {
display: block;
margin-top: 6px;
font-family: "Archivo", sans-serif;
font-size: 21px;
letter-spacing: -0.02em;
}
.tco-hero__caption:hover { background: var(--tco-red); color: #fff; }
/* --- disciplines --- */
.tco-disciplines {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 20px;
}
.tco-discipline {
display: block;
border: 1px solid var(--tco-line);
text-decoration: none;
color: var(--tco-ink);
transition: border-color 0.15s, transform 0.15s;
}
.tco-discipline:hover { border-color: var(--tco-ink); transform: translateY(-2px); color: var(--tco-ink); }
.tco-discipline__image {
display: block;
aspect-ratio: 4 / 3;
background: repeating-linear-gradient(135deg, #eceae5 0 12px, #e5e2dc 12px 24px) center/cover no-repeat;
}
.tco-discipline__name { display: block; padding: 16px 20px 20px; font-size: 19px; }
/* --- cijfers --- */
.tco-numbers { margin-top: 76px; background: var(--tco-ink); color: #fff; }
.tco-numbers #center {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 36px;
padding: 54px 0;
}
.tco-number__value { font-size: 52px; line-height: 1; letter-spacing: -0.04em; color: var(--tco-red); }
.tco-number__label {
margin-top: 6px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.tco-number__note { margin-top: 4px; font-size: 13.5px; color: rgba(255, 255, 255, 0.55); }
/* --- vacatures --- */
.tco-jobs { display: flex; gap: 64px; align-items: flex-start; }
.tco-jobs__intro { width: 340px; flex-shrink: 0; }
.tco-jobs__intro h2 { margin: 12px 0 22px; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; }
.tco-jobs__list { flex-grow: 1; display: flex; flex-direction: column; gap: 12px; }
.tco-job {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 26px;
border: 1px solid var(--tco-line);
text-decoration: none;
color: var(--tco-ink);
}
.tco-job:hover { border-color: var(--tco-ink); color: var(--tco-ink); }
.tco-job__title { font-size: 20px; }
.tco-job i { color: var(--tco-red); }
/* --- logo's --- */
.tco-logos { margin-top: 76px; border-top: 1px solid var(--tco-line); border-bottom: 1px solid var(--tco-line); }
.tco-logos #center { display: flex; align-items: center; gap: 44px; padding: 38px 0; min-width: 0; }
.tco-logos .logo-marquee { flex: 1 1 auto; min-width: 0; }
.tco-logos__label {
width: 150px;
flex-shrink: 0;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tco-muted);
line-height: 1.5;
}
/* --- afsluitende oproep --- */
.tco-cta { background: var(--tco-red); color: #fff; }
.tco-cta #center {
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
padding: 58px 0;
}
.tco-cta h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; max-width: 660px; }
.tco-cta p { margin-top: 14px; font-size: 17px; color: rgba(255, 255, 255, 0.85); }
.tco-cta__actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
@media (max-width: 860px) {
.tco-section__head { flex-direction: column; align-items: flex-start; }
.tco-jobs { flex-direction: column; gap: 30px; }
.tco-jobs__intro { width: auto; }
.tco-cta #center { flex-direction: column; align-items: flex-start; }
.tco-hero__caption { position: static; max-width: none; }
.tco-logos #center { flex-direction: column; align-items: flex-start; gap: 16px; }
.tco-logos__label { width: auto; }
}
/* ---------------------------------------------------------------------------
* Formulieren (offerteaanvraag én vacature)
* ------------------------------------------------------------------------- */
.tco-form { max-width: 780px; }
.tco-form__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 4px 24px;
}
.tco-form__full { grid-column: 1 / -1; }
.tco-form label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
}
.tco-form input[type="text"],
.tco-form input[type="email"],
.tco-form input[type="tel"],
.tco-form input[type="file"],
.tco-form textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--tco-line);
background: #fff;
color: var(--tco-ink);
font: inherit;
}
.tco-form input:focus,
.tco-form textarea:focus {
outline: 2px solid var(--tco-red);
outline-offset: 1px;
border-color: var(--tco-red);
}
.tco-form textarea { resize: vertical; min-height: 150px; }
.tco-hint { margin: 6px 0 0; font-size: 13px; color: var(--tco-muted); }
.tco-consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 20px 0 24px;
font-size: 14px;
font-weight: 400 !important;
line-height: 1.5;
color: var(--tco-muted);
}
.tco-consent input { margin-top: 3px; flex-shrink: 0; }
/* Solliciteren of een vraag stellen: één formulier, twee bedoelingen. */
.tco-switch {
display: inline-flex;
margin-bottom: 28px;
border: 1px solid var(--tco-line);
}
.tco-switch__option { margin: 0 !important; }
.tco-switch__option input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.tco-switch__option span {
display: block;
padding: 12px 24px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.tco-switch__option + .tco-switch__option span { border-left: 1px solid var(--tco-line); }
.tco-switch__option.is-on span,
.tco-switch__option input:checked + span { background: var(--tco-ink); color: #fff; }
.tco-switch__option input:focus-visible + span { outline: 2px solid var(--tco-red); outline-offset: -2px; }
/* ---------------------------------------------------------------------------
* Vacatures
* ------------------------------------------------------------------------- */
.tco-vacancy { display: flex; gap: 64px; align-items: flex-start; }
.tco-vacancy__main { flex-grow: 1; min-width: 0; }
.tco-vacancy__aside { width: 300px; flex-shrink: 0; }
.tco-back {
display: inline-block;
margin-bottom: 18px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tco-muted);
text-decoration: none;
}
.tco-back:hover { color: var(--tco-red); }
.tco-vacancy__facts {
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
margin: 14px 0 30px;
font-size: 14.5px;
color: var(--tco-muted);
}
.tco-vacancy__facts i { color: var(--tco-red); margin-right: 6px; }
.tco-vacancy__body { max-width: 68ch; }
.tco-vacancy__body h2 { margin: 34px 0 10px; font-size: 24px; }
.tco-vacancy__body ul { padding-left: 20px; }
.tco-vacancy__body li { margin-bottom: 6px; }
.tco-contact {
padding: 26px 24px 28px;
border: 1px solid var(--tco-line);
position: sticky;
top: 24px;
}
.tco-contact__label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tco-red);
}
.tco-contact__photo {
display: block;
width: 110px;
height: 110px;
margin: 18px 0 14px;
object-fit: cover;
border-radius: 50%;
}
.tco-contact__name { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.tco-contact__role { margin-top: 2px; font-size: 14px; color: var(--tco-muted); }
.tco-contact__intro { margin: 14px 0 16px; font-size: 14.5px; color: var(--tco-muted); }
.tco-contact__line {
display: block;
margin-bottom: 8px;
font-size: 15px;
font-weight: 600;
color: var(--tco-ink);
text-decoration: none;
word-break: break-word;
}
.tco-contact__line i { color: var(--tco-red); margin-right: 8px; }
.tco-contact__line:hover { color: var(--tco-red); }
.tco-contact__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.tco-contact__actions .btn { width: 100%; text-align: center; }
.tco-vacancy-form { margin-top: 26px; background: var(--tco-sand, #f4f2ee); }
.tco-vacancy-form .tco-section { padding-bottom: 76px; }
.tco-vacancy-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.tco-vacancy-card {
display: block;
padding: 26px 26px 28px;
border: 1px solid var(--tco-line);
text-decoration: none;
color: var(--tco-ink);
transition: border-color 0.15s, transform 0.15s;
}
.tco-vacancy-card:hover { border-color: var(--tco-ink); transform: translateY(-2px); color: var(--tco-ink); }
.tco-vacancy-card__title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; }
.tco-vacancy-card__facts {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
margin-top: 10px;
font-size: 13.5px;
color: var(--tco-muted);
}
.tco-vacancy-card__facts i { color: var(--tco-red); margin-right: 5px; }
.tco-vacancy-card__intro { margin: 14px 0 18px; font-size: 15px; line-height: 1.55; color: var(--tco-muted); }
.tco-vacancy-card__more { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tco-red); }
@media (max-width: 860px) {
.tco-vacancy { flex-direction: column; gap: 34px; }
.tco-vacancy__aside { width: 100%; }
.tco-contact { position: static; }
.tco-switch { display: flex; width: 100%; }
.tco-switch__option { flex: 1; }
.tco-switch__option span { text-align: center; padding: 12px 10px; }
}
/* ---------------------------------------------------------------------------
* Zwevende blokken opvangen
*
* De oude opmaak zet section en article op float: left. Zonder iets dat die
* zweving opvangt, klapt de omhullende #center dicht tot nul hoogte en schuift
* het blok eronder er bovenop — dat was de zwarte cijferband die dwars door de
* homepagina liep. flow-root vangt de zweving op zonder de opmaak te wijzigen.
* ------------------------------------------------------------------------- */
/* Opgelet: dit mag geen display op #center zelf zetten. Een regel als
`main #center { display: flow-root }` heeft een hogere soortelijkheid dan een
klasse, en overrulede daardoor .tco-project, .tco-vacancy en .tco-jobs — die
display: flex nodig hebben en dus in één kolom terechtkwamen. Een clearfix op
het pseudo-element vangt de zweving op zonder aan display te raken. */
main #center::after {
content: "";
display: block;
clear: both;
}
/* Het penicoontje stond via wp_nav_menu voor elk menu-item. Font Awesome maakte
er een svg van, en die werd hier verborgen. Nu de iconen geen svg meer zijn,
sluiten we ook het i-element uit — voor het geval er ooit nog een menu-item
met een icoon opduikt. */
nav.desktop ul li i,
nav.mobile ul li i { display: none; }
/* De lopende tekst van een pagina: leesbare regellengte in plaats van de oude
kolom van 60% breed. */
.tco-prose { max-width: 68ch; }
.tco-prose > *:first-child { margin-top: 0; }
.tco-prose h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; margin: 0 0 18px; }
.tco-prose h2 { font-size: 26px; line-height: 1.15; margin: 34px 0 10px; }
.tco-prose h3 { font-size: 20px; margin: 26px 0 8px; }
.tco-prose p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; }
.tco-prose ul, .tco-prose ol { margin: 0 0 16px; padding-left: 20px; }
.tco-prose li { margin-bottom: 6px; line-height: 1.6; }
/* ---------------------------------------------------------------------------
* Gewone pagina's en het aanbodoverzicht
* ------------------------------------------------------------------------- */
.tco-discipline__count {
display: block;
padding: 0 20px 18px;
margin-top: -8px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tco-muted);
}
.tco-discipline:hover .tco-discipline__count { color: var(--tco-red); }
.tco-subpages {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.tco-subpage {
display: block;
padding: 24px 26px 26px;
border: 1px solid var(--tco-line);
text-decoration: none;
color: var(--tco-ink);
transition: border-color 0.15s, transform 0.15s;
}
.tco-subpage:hover { border-color: var(--tco-ink); transform: translateY(-2px); color: var(--tco-ink); }
.tco-subpage__title {
display: block;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 20px;
letter-spacing: -0.02em;
}
.tco-subpage__intro {
display: block;
margin-top: 10px;
font-size: 15px;
line-height: 1.55;
color: var(--tco-muted);
}
/* ---------------------------------------------------------------------------
* Voettekst
*
* Vervangt de zwevende kolommen en het absoluut geplaatste logo uit style2.css.
* Dat logo stond op het adres omdat de padding die er plaats voor maakte, met
* het raster was weggevallen.
* ------------------------------------------------------------------------- */
footer {
background: #111010;
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
line-height: 1.6;
}
footer > #center { padding: 68px 0 26px; }
footer #address {
display: grid;
grid-template-columns: 1.25fr 1.15fr 0.7fr 0.9fr;
gap: 48px;
float: none;
width: auto;
}
footer #address .left,
footer #address .middle,
footer #address .quick,
footer #address .right {
float: none;
width: auto;
padding: 0;
display: flex;
flex-direction: column;
gap: 28px;
}
footer .footer-logo {
display: block;
position: static;
margin-bottom: 4px;
}
footer #address .left .footer-logo img.technicarro-CAP {
height: 62px !important;
width: auto;
display: block;
}
footer .footer-title {
margin: 0 0 12px;
font-family: "Archivo", sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fff;
}
footer .footer-block p,
footer .footer-address {
margin: 0 0 12px;
font-style: normal;
}
footer .footer-block > *:last-child { margin-bottom: 0; }
footer .footer-line {
display: block;
margin-top: 6px;
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
transition: color 0.15s;
}
footer .footer-line i {
color: var(--tco-red);
margin-right: 9px;
width: 1em;
}
footer .footer-line:hover,
footer .footer-line:focus { color: #fff; }
footer .footer-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
footer .footer-nav li { margin-bottom: 7px; }
footer .footer-nav a {
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
transition: color 0.15s;
}
footer .footer-nav a:hover,
footer .footer-nav a:focus { color: #fff; }
/* Het penicoontje dat wp_nav_menu meegeeft, hoort hier evenmin thuis. */
footer .footer-nav i { display: none; }
footer #copyright {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
float: none;
width: auto;
margin: 54px 0 0;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
footer #copyright .left,
footer #copyright .right {
float: none;
width: auto;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
}
footer #copyright a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
footer #copyright a:hover { color: #fff; }
footer #copyright .sep { color: rgba(255, 255, 255, 0.25); }
footer #copyright .credit { display: flex; align-items: center; gap: 8px; }
/* Eén wit logo in plaats van de twee afbeeldingen die vroeger van plaats
wisselden bij hover. Op de donkere voettekst staat het wit; bij hover licht
het volledig op. */
footer #copyright .puregraphics { display: block; opacity: 0.82; transition: opacity 150ms ease; }
footer #copyright .puregraphics:hover,
footer #copyright .puregraphics:focus-visible { opacity: 1; }
footer #copyright .puregraphics img { display: block; height: 26px; width: auto; }
footer .puregraphics-print { display: none; }
@media (max-width: 1040px) {
footer #address { grid-template-columns: 1fr 1fr; gap: 40px; }
/* De oudere regel zette de kolom 'Volg ons' over de volle breedte. */
footer #address .right { grid-column: auto; }
}
@media (max-width: 680px) {
footer #address { grid-template-columns: 1fr; gap: 34px; }
footer > #center { padding: 48px 0 22px; }
footer #copyright { flex-direction: column; align-items: flex-start; gap: 18px; }
footer #copyright .left { flex-wrap: wrap; }
}
/* ---------------------------------------------------------------------------
* Schuivende hero op de homepagina
* ------------------------------------------------------------------------- */
.tco-hero__slides {
position: absolute;
inset: 0;
overflow: hidden;
}
.tco-hero__slide {
position: absolute;
inset: 0;
background: #201d1a center / cover no-repeat;
opacity: 0;
transform: scale(1.04);
transition: opacity 1100ms ease, transform 7000ms ease-out;
}
.tco-hero__slide.is-active {
opacity: 1;
transform: scale(1);
}
.tco-hero__veil { z-index: 1; }
.tco-hero__inner { z-index: 2; }
.tco-hero__dots {
display: flex;
gap: 10px;
margin-top: 38px;
}
.tco-hero__dot {
width: 34px;
height: 3px;
padding: 0;
border: 0;
border-radius: 0;
background: rgba(255, 255, 255, 0.32);
cursor: pointer;
transition: background 0.2s, width 0.2s;
}
.tco-hero__dot:hover { background: rgba(255, 255, 255, 0.6); }
.tco-hero__dot.is-active { background: var(--tco-red); width: 52px; }
.tco-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tco-hero__captions {
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
display: grid;
}
.tco-hero__captions .tco-hero__caption {
grid-area: 1 / 1;
position: static;
opacity: 0;
pointer-events: none;
transition: opacity 600ms ease;
}
.tco-hero__captions .tco-hero__caption.is-active {
opacity: 1;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.tco-hero__slide { transition: none; transform: none; }
.tco-hero__slide.is-active { transform: none; }
.tco-hero__captions .tco-hero__caption { transition: none; }
}
/* ---------------------------------------------------------------------------
* Projectdetail
* ------------------------------------------------------------------------- */
.tco-project { display: flex; gap: 64px; align-items: flex-start; }
.tco-project__main { flex-grow: 1; min-width: 0; }
/* De oude regel geeft elke aside een schaduw en afgeronde hoeken. Die hoort bij
de fotokaders van de vorige opmaak, niet bij een kolom met tekst erin. */
.tco-project__aside,
.tco-vacancy__aside {
box-shadow: none;
border-radius: 0;
}
.tco-project__aside { width: 320px; flex-shrink: 0; }
.tco-project__facts {
display: flex;
flex-wrap: wrap;
gap: 10px 26px;
margin: 14px 0 28px;
font-size: 14.5px;
color: var(--tco-muted);
}
.tco-project__facts i { color: var(--tco-red); margin-right: 7px; }
.tco-project__cta { display: block; text-align: center; margin-top: 24px; }
/* Het kader errond deed alsof dit een los blok was. Een streepje volstaat. */
.tco-applied {
border: 0;
border-top: 1px solid var(--tco-line);
padding: 20px 0 0;
margin: 0 0 30px;
}
@media (max-width: 900px) {
.tco-project { flex-direction: column; gap: 34px; }
.tco-project__aside { width: 100%; }
}
/* ---------------------------------------------------------------------------
* Hero op een projectpagina: dezelfde opbouw als de homepagina, maar lager en
* met de foto's van het project als dia's.
* ------------------------------------------------------------------------- */
.tco-hero--project { min-height: 400px; }
.tco-hero--project .tco-hero__inner { padding: 46px 0; }
.tco-hero--project h1 { font-size: clamp(28px, 3.8vw, 46px); }
.tco-hero--project .tco-hero__dots { margin-top: 26px; }
.tco-hero__place {
margin: 14px 0 0;
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
}
.tco-hero__place i { color: #ff5560; margin-right: 8px; }
/* De dia's liggen op elkaar. Alleen de zichtbare mag klikken opvangen, anders
opent de bovenste dia uit de opmaak en niet degene die je ziet. */
.tco-hero__slide { pointer-events: none; }
.tco-hero__slide.is-active { pointer-events: auto; }
a.tco-hero__slide { display: block; cursor: zoom-in; }
/* De tekstlaag ligt over de foto. Alleen de knopjes moeten klikbaar zijn, zodat
je overal op het beeld de fotoweergave kan openen. */
.tco-hero--project .tco-hero__veil,
.tco-hero--project .tco-hero__inner,
.tco-hero--project .tco-hero__text { pointer-events: none; }
.tco-hero--project .tco-hero__dots,
.tco-hero--project .tco-hero__dots * { pointer-events: auto; }
/* De oude regel maakte het eerste #center in main breder (1440px) en zette er
een marge boven — dat was voor het fotokader van de oude opmaak. De nieuwe
secties moeten gewoon even breed zijn als de rest van de pagina, anders staat
de bovenste sectie niet in lijn met die eronder. */
main > #center.tco-section:first-of-type {
max-width: 1240px;
margin-top: 0;
}
/* ---------------------------------------------------------------------------
* Hero zonder diareeks: vacatures en andere pagina's met één of geen beeld.
* ------------------------------------------------------------------------- */
.tco-hero--plain { min-height: 340px; background: var(--tco-ink); }
.tco-hero--plain .tco-hero__inner { padding: 52px 0; }
.tco-hero--plain h1 { font-size: clamp(30px, 4vw, 50px); }
.tco-hero--plain p { max-width: 56ch; }
.tco-hero__back {
display: inline-block;
margin-bottom: 18px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
.tco-hero__back:hover { color: #fff; }
.tco-hero__back i { margin-right: 8px; }
.tco-hero__facts {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
margin-top: 18px;
font-size: 15.5px;
color: rgba(255, 255, 255, 0.8);
}
.tco-hero__facts i { color: #ff5560; margin-right: 8px; }
/* De vacaturetekst komt uit de editor en bevat veel opsommingen. Wat ruimte
tussen de kopjes maakt dat leesbaar in plaats van één blok. */
.tco-vacancy__body h2 { margin: 36px 0 12px; font-size: 24px; }
.tco-vacancy__body h3 { margin: 26px 0 8px; font-size: 19px; }
.tco-vacancy__body ul { padding-left: 22px; }
.tco-vacancy__body li { margin-bottom: 8px; }
.tco-vacancy__body > *:first-child { margin-top: 0; }
.tco-section__head p { max-width: 62ch; }
/* ---------------------------------------------------------------------------
* Hoofdmenu
*
* Gewone schrijfwijze in plaats van drukletters, zoals in het ontwerp. De
* uppercase kwam uit style2.css op nav.desktop li.
* ------------------------------------------------------------------------- */
nav.desktop li {
text-transform: none;
font-family: "Archivo", "Mulish", sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.005em;
}
nav.desktop ul { gap: 34px; }
nav.desktop ul li a {
padding: 14px 0 12px;
border-bottom: 0;
color: var(--tco-ink);
transition: color 180ms ease;
}
nav.desktop ul li a:hover,
nav.desktop ul li.current-menu-item a,
nav.desktop ul li.current_page_item a,
nav.desktop ul li.current-page-ancestor a,
nav.desktop ul li.current-menu-ancestor a {
border-bottom-color: transparent;
color: var(--tco-red);
}
/* ---------------------------------------------------------------------------
* Uitklapmenu onder Aanbod
* ------------------------------------------------------------------------- */
nav.desktop li.tco-has-mega {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
position: static; /* het paneel meet zich aan de header, niet aan het item */
}
.tco-mega__chevron {
font-size: 13px;
color: var(--tco-muted);
transition: transform 180ms ease, color 180ms ease;
}
nav.desktop li.tco-has-mega:hover .tco-mega__chevron,
nav.desktop li.tco-has-mega:focus-within .tco-mega__chevron {
transform: rotate(180deg);
color: var(--tco-red);
}
nav.desktop li.tco-has-mega.current-menu-item .tco-mega__chevron,
nav.desktop li.tco-has-mega.current_page_item .tco-mega__chevron,
nav.desktop li.tco-has-mega.current-page-ancestor .tco-mega__chevron { color: var(--tco-red); }
nav.desktop .tco-mega {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 4000;
background: var(--tco-sand);
border-top: 1px solid rgba(23, 23, 23, 0.08);
box-shadow: 0 22px 40px rgba(20, 20, 20, 0.09);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
text-align: left;
}
nav.desktop li.tco-has-mega:hover .tco-mega,
nav.desktop li.tco-has-mega:focus-within .tco-mega {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.tco-mega__inner {
width: var(--tco-content);
max-width: 1240px;
height: auto;
margin: 0 auto;
display: grid;
grid-template-columns: 300px 1fr;
align-items: start;
gap: 56px;
padding: 38px 0 42px;
}
.tco-mega__intro p {
margin: 12px 0 18px;
font-family: "Mulish", sans-serif;
font-size: 15.5px;
font-weight: 400;
line-height: 1.55;
color: var(--tco-muted);
text-transform: none;
letter-spacing: 0;
}
.tco-mega__all {
font-family: "Mulish", sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tco-red);
text-decoration: none;
}
.tco-mega__all i { margin-left: 7px; }
.tco-mega__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px 34px;
align-content: start;
}
.tco-mega__list a {
display: block;
padding: 9px 0;
border-bottom: 1px solid rgba(23, 23, 23, 0.08);
font-family: "Archivo", sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
text-transform: none;
color: var(--tco-ink) !important;
text-decoration: none;
transition: color 150ms ease, padding-left 150ms ease;
}
.tco-mega__list a:hover,
.tco-mega__list a:focus {
color: var(--tco-red) !important;
padding-left: 6px;
}
/* In het mobiele menu is het geen paneel maar gewoon een ingesprongen lijst. */
nav.mobile .tco-mega__chevron { display: none; }
nav.mobile .tco-mega { display: block; }
nav.mobile .tco-mega__inner { display: block; padding: 4px 0 14px; width: auto; max-width: none; }
nav.mobile .tco-mega__intro { display: none; }
nav.mobile .tco-mega__list { display: block; }
nav.mobile .tco-mega__list a {
padding: 7px 0 7px 18px;
border: 0;
font-size: 15px;
font-weight: 600;
opacity: 0.82;
}
@media (max-width: 1180px) {
nav.desktop ul { gap: 22px; }
nav.desktop li { font-size: 15px; }
.tco-mega__inner { grid-template-columns: 240px 1fr; gap: 36px; }
.tco-mega__list { grid-template-columns: repeat(2, 1fr); }
}
/* Het paneel moet zich meten aan de header, zodat de zandkleurige band over de
volle breedte loopt. Daarvoor mag er tussen header en paneel geen enkel
element met position: relative meer staan. Het logo krijgt zijn eigen anker
terug, anders springt het naar de uiterste linkerrand. */
header #logo #center { position: static; }
header #logo .middle { position: relative; }
nav.desktop,
nav.desktop ul { position: static; }
/* ---------------------------------------------------------------------------
* Paginering onder het realisatieoverzicht
*
* the_posts_pagination() geeft kale links terug. Zonder opmaak zijn dat blauwe
* onderstreepte cijfers, wat op deze site nergens op lijkt.
* ------------------------------------------------------------------------- */
.navigation.pagination { margin: 48px 0 8px; }
.navigation.pagination .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.navigation.pagination .nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.navigation.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 12px;
border: 1px solid var(--tco-line);
font-family: "Archivo", sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--tco-ink);
text-decoration: none;
transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus {
border-color: var(--tco-ink);
color: var(--tco-ink);
}
.navigation.pagination .page-numbers.current {
border-color: var(--tco-ink);
background: var(--tco-ink);
color: #fff;
}
.navigation.pagination .page-numbers.dots {
border-color: transparent;
min-width: 22px;
padding: 0;
color: var(--tco-muted);
}
.navigation.pagination .prev,
.navigation.pagination .next { color: var(--tco-red); }
.navigation.pagination .prev:hover,
.navigation.pagination .next:hover {
border-color: var(--tco-red);
background: var(--tco-red);
color: #fff;
}
/* ---------------------------------------------------------------------------
* Kaart met alle werven
* ------------------------------------------------------------------------- */
.tco-map { margin-top: 40px; background: var(--tco-sand); padding-bottom: 0; }
.tco-map .tco-section { padding-top: 62px; }
.tco-map__canvas {
height: clamp(360px, 52vw, 560px);
width: 100%;
margin-top: 34px;
background: var(--tco-paper);
}
.tco-map__popup { padding: 2px 4px 4px; font-family: "Mulish", sans-serif; }
.tco-map__popup a {
display: block;
font-family: "Archivo", sans-serif;
font-size: 15px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--tco-ink);
text-decoration: none;
}
.tco-map__popup a:hover { color: var(--tco-red); }
.tco-map__popup span {
display: block;
margin-top: 3px;
font-size: 12.5px;
color: var(--tco-muted);
}
/* ---------------------------------------------------------------------------
* Aanbodpagina: de disciplines als lijst
*
* Bewust een andere vorm dan het tegelraster op de homepagina. Daar is het een
* teaser, hier een overzicht met tekst en het aantal realisaties erbij.
* ------------------------------------------------------------------------- */
.tco-aanbod-list { border-top: 1px solid var(--tco-line); }
.tco-aanbod-row {
display: grid;
grid-template-columns: 52px 128px 1fr auto;
align-items: center;
gap: 28px;
padding: 22px 0;
border-bottom: 1px solid var(--tco-line);
text-decoration: none;
color: var(--tco-ink);
transition: background 160ms ease, padding-left 160ms ease;
}
.tco-aanbod-row:hover,
.tco-aanbod-row:focus {
background: var(--tco-sand);
padding-left: 16px;
color: var(--tco-ink);
}
.tco-aanbod-row__number {
font-family: "Archivo", sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
color: var(--tco-line);
font-variant-numeric: tabular-nums;
}
.tco-aanbod-row:hover .tco-aanbod-row__number { color: var(--tco-red); }
.tco-aanbod-row__image {
display: block;
height: 84px;
background: repeating-linear-gradient(135deg, #eceae5 0 12px, #e5e2dc 12px 24px) center / cover no-repeat;
}
.tco-aanbod-row__name {
display: block;
font-family: "Archivo", sans-serif;
font-size: 22px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
}
.tco-aanbod-row__intro {
display: block;
margin-top: 6px;
max-width: 62ch;
font-size: 15px;
line-height: 1.55;
color: var(--tco-muted);
}
.tco-aanbod-row__meta {
display: flex;
align-items: center;
gap: 18px;
white-space: nowrap;
}
.tco-aanbod-row__count {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tco-muted);
font-variant-numeric: tabular-nums;
}
.tco-aanbod-row__meta i { color: var(--tco-red); }
/* Afsluiter met advies. Geen rode band: die staat al op de homepagina en op de
projectpagina's, en drie keer dezelfde band leest als een herhaling. */
.tco-advice { margin-top: 26px; background: var(--tco-sand); }
.tco-advice .tco-section { padding-bottom: 66px; }
.tco-advice__inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 60px;
}
.tco-advice__inner h2 { margin: 12px 0 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; }
.tco-advice__inner p { margin: 14px 0 0; max-width: 60ch; color: var(--tco-muted); }
.tco-advice__actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
@media (max-width: 860px) {
.tco-aanbod-row {
grid-template-columns: 40px 1fr;
gap: 8px 18px;
align-items: start;
}
.tco-aanbod-row__image { display: none; }
.tco-aanbod-row__meta { grid-column: 2; justify-content: flex-start; }
.tco-advice__inner { flex-direction: column; align-items: flex-start; }
}
/* ---------------------------------------------------------------------------
* Zijkolom bij de vacatures: contactkaart, andere vacatures, en een notitie.
* ------------------------------------------------------------------------- */
.tco-contact--dark {
background: var(--tco-ink);
border: 0;
color: rgba(255, 255, 255, 0.72);
padding: 26px 26px 28px;
}
.tco-contact--dark .tco-contact__label { color: rgba(255, 255, 255, 0.5); }
.tco-contact__person {
display: flex;
align-items: center;
gap: 16px;
margin-top: 18px;
}
.tco-contact--dark .tco-contact__photo {
width: 62px;
height: 62px;
margin: 0;
flex-shrink: 0;
object-fit: cover;
border-radius: 50%;
}
.tco-contact--dark .tco-contact__name { color: #fff; font-size: 19px; }
.tco-contact--dark .tco-contact__role { color: rgba(255, 255, 255, 0.6); }
.tco-contact__mail {
display: block;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
font-size: 15px;
color: rgba(255, 255, 255, 0.86);
text-decoration: none;
word-break: break-word;
transition: color 150ms ease;
}
.tco-contact__mail:hover,
.tco-contact__mail:focus { color: #fff; text-decoration: underline; }
.tco-sidecard {
margin-top: 20px;
padding: 24px 26px 10px;
border: 1px solid var(--tco-line);
}
.tco-sidecard__title {
margin: 0 0 6px;
font-family: "Archivo", sans-serif;
font-size: 19px;
font-weight: 800;
letter-spacing: -0.02em;
}
.tco-sidecard__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 15px 0;
border-bottom: 1px solid var(--tco-line);
font-size: 15.5px;
font-weight: 700;
color: var(--tco-ink);
text-decoration: none;
transition: color 150ms ease;
}
.tco-sidecard__link:last-child { border-bottom: 0; }
.tco-sidecard__link i { color: var(--tco-red); flex-shrink: 0; }
.tco-sidecard__link:hover,
.tco-sidecard__link:focus { color: var(--tco-red); }
.tco-sidenote {
margin-top: 20px;
padding: 22px 26px 24px;
background: var(--tco-sand);
}
.tco-sidenote__title {
margin: 0 0 8px;
font-family: "Archivo", sans-serif;
font-size: 17px;
font-weight: 800;
letter-spacing: -0.02em;
}
.tco-sidenote p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tco-muted); }
/* De gewone knop is donker (var(--tco-ink)). Op een donkere hero is dat een
zwarte knop op een zwarte achtergrond — je ziet alleen de tekst zweven. In
een hero wordt hij daarom wit, met de rode hover van de rest van de site. */
.tco-hero .btn:not(.btn--ghost-light):not(.btn--ghost) {
background: var(--tco-white);
border-color: var(--tco-white);
color: var(--tco-ink);
}
.tco-hero .btn:not(.btn--ghost-light):not(.btn--ghost):hover,
.tco-hero .btn:not(.btn--ghost-light):not(.btn--ghost):focus {
background: var(--tco-red);
border-color: var(--tco-red);
color: var(--tco-white);
}
/* Dezelfde reden in de rode afsluitband: daar is een donkere knop wel zichtbaar
maar leest een witte knop veel sterker als de eerste keuze. */
.tco-cta .btn--ghost-light:hover,
.tco-cta .btn--ghost-light:focus {
background: var(--tco-white);
border-color: var(--tco-white);
color: var(--tco-red);
}
/* ---------------------------------------------------------------------------
* Het cv-veld
*
* style2.css zet elk input[type=file] op position: absolute met opacity 0 en
* een breedte van 100%, zonder omhullende met position: relative. Zo'n veld
* strekt zich uit over de dichtstbijzijnde gepositioneerde voorouder — hier
* #center — en lag onzichtbaar over het halve formulier. Overal klikken opende
* dan de bestandskiezer. Die regel wordt hier onschadelijk gemaakt en enkel
* binnen .tco-upload opnieuw ingesteld.
* ------------------------------------------------------------------------- */
.tco-form input[type="file"] {
position: static;
opacity: 1;
width: auto;
}
.tco-upload__label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 700;
}
/* Eén regel hoog, net als de andere velden ernaast. Een kader van honderd pixels
hoog voor een optionele bijlage weegt zwaarder dan wat het vraagt. */
.tco-upload {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 10px 40px 10px 16px;
border: 1px dashed #b9b3a9;
background: #fff;
text-align: center;
cursor: pointer;
transition: border-color 150ms ease, background 150ms ease;
}
.tco-upload:hover { border-color: var(--tco-ink); }
.tco-upload.is-over {
border-color: var(--tco-red);
background: #fff6f6;
}
.tco-upload.has-file {
border-style: solid;
border-color: var(--tco-ink);
}
/* Het veld dekt alleen dit kader af, en niets meer. */
.tco-upload input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
opacity: 0;
cursor: pointer;
}
.tco-upload__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px 10px;
pointer-events: none;
}
.tco-upload__inner > i {
font-size: 16px;
color: var(--tco-muted);
}
.tco-upload.has-file .tco-upload__inner > i { color: var(--tco-red); }
.tco-upload__text { font-size: 15px; color: var(--tco-muted); }
.tco-upload__text strong { color: var(--tco-ink); text-decoration: underline; text-underline-offset: 3px; }
.tco-upload__file {
font-family: "Archivo", sans-serif;
font-size: 15px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--tco-ink);
word-break: break-all;
}
.tco-upload:not(.has-file) .tco-upload__file { display: none; }
.tco-upload.has-file .tco-upload__text { display: none; }
.tco-upload__hint { margin: 6px 0 0; font-size: 12.5px; color: #8d8880; }
/* Boven het onzichtbare veld, anders opent een klik hierop de kiezer opnieuw.
En met !important op [hidden], want de oude opmaak zet display op button en
overrulede daarmee het hidden-attribuut — het knopje stond er altijd. */
.tco-upload__remove {
position: absolute;
z-index: 2;
top: 50%;
right: 10px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--tco-paper);
font-size: 13px;
color: var(--tco-muted);
cursor: pointer;
}
.tco-upload__remove:hover { background: var(--tco-red); color: #fff; }
.tco-upload__remove[hidden] { display: none !important; }
.tco-upload__error {
margin: 6px 0 0;
font-size: 13.5px;
font-weight: 600;
color: #9d1018;
}
.tco-upload__error[hidden] { display: none !important; }
/* ---------------------------------------------------------------------------
* Mobiel: uitlijning
*
* De oude opmaak zet op smalle schermen eigen marges op de voettekstkolommen en
* op elke aside: 6% respectievelijk 8%, samen met een breedte van 88% of 84%.
* Die marges bleven staan naast de nieuwe indeling, waardoor de ene kolom
* inspringt en de andere niet — en waardoor de projectfiche met breedte 100%
* plús 8% marge rechts buiten beeld liep.
* ------------------------------------------------------------------------- */
@media (max-width: 900px) {
footer #address .left,
footer #address .middle,
footer #address .quick,
footer #address .right {
float: none;
width: auto;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
}
.tco-project__aside,
.tco-vacancy__aside {
float: none;
width: 100%;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
}
/* Iets meer lucht aan de zijkanten dan de 14px van voorheen. */
@media (max-width: 700px) {
:root { --tco-content: calc(100vw - 40px); }
}
/* ---------------------------------------------------------------------------
* Het mobiele menu als volledig scherm
* ------------------------------------------------------------------------- */
.mobile-nav {
position: fixed;
inset: 0;
z-index: 6000;
display: none;
flex-direction: column;
background: var(--tco-white);
overscroll-behavior: contain;
}
input[type="checkbox"]#navigation:checked ~ .mobile-nav { display: flex; }
/* De website eronder mag niet meescrollen zolang het menu openstaat. */
html.tco-menu-open,
html.tco-menu-open body { overflow: hidden; }
.mobile-nav__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px 20px;
border-bottom: 1px solid var(--tco-line);
flex-shrink: 0;
}
.mobile-nav__logo img { display: block; height: 54px; width: auto; }
.mobile-nav__close {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 50%;
background: var(--tco-paper);
font-size: 20px;
color: var(--tco-ink);
cursor: pointer;
}
.mobile-nav__close:hover { background: var(--tco-red); color: #fff; }
.mobile-nav__body {
flex-grow: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 20px 48px;
}
/* De oude regels toonden nav.mobile zelf; dat doet de laag nu. */
.mobile-nav nav.mobile {
display: block;
padding: 0;
font-size: inherit;
}
.mobile-nav nav.mobile li {
padding: 0;
border-bottom: 1px solid var(--tco-line);
text-align: left;
}
.mobile-nav nav.mobile li a {
display: block;
padding: 17px 2px;
font-family: "Archivo", sans-serif;
font-size: 19px;
font-weight: 800;
letter-spacing: -0.02em;
text-transform: none;
color: var(--tco-ink);
}
.mobile-nav nav.mobile li.current-menu-item > span > a,
.mobile-nav nav.mobile li.current_page_item > span > a,
.mobile-nav nav.mobile li.current-page-ancestor > span > a { color: var(--tco-red); }
/* De disciplines onder Aanbod, ingesprongen. */
.mobile-nav .tco-mega { border: 0; box-shadow: none; background: transparent; }
.mobile-nav .tco-mega__list a {
padding: 11px 2px 11px 18px;
border: 0;
font-size: 15.5px;
font-weight: 600;
letter-spacing: 0;
color: var(--tco-muted) !important;
text-transform: none;
}
.mobile-nav .tco-mega__list a:hover { color: var(--tco-red) !important; }
@media (min-width: 1025px) {
.mobile-nav { display: none !important; }
}
/* Verticaal scrollen blijft gewoon werken op de hero; het horizontale vegen
handelt modern.js af. */
.tco-hero__slides,
.tco-hero__slide { touch-action: pan-y; }
/* ---------------------------------------------------------------------------
* Het mobiele menu, tweede ronde
* ------------------------------------------------------------------------- */
.tco-mega__toggle { display: none; }
.mobile-nav__bar {
padding: 14px 20px;
background: var(--tco-white);
}
.mobile-nav__logo img { height: 48px; }
.mobile-nav__tools {
display: flex;
align-items: center;
gap: 14px;
}
.mobile-nav__lang {
display: flex;
align-items: center;
gap: 2px;
padding: 4px;
border-radius: 999px;
background: var(--tco-paper);
}
.mobile-nav__lang a {
display: block;
padding: 7px 13px;
border-radius: 999px;
font-family: "Archivo", sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
color: var(--tco-muted);
text-decoration: none;
}
.mobile-nav__lang a.is-on { background: var(--tco-ink); color: #fff; }
.mobile-nav__body { padding: 4px 20px 40px; }
/* Elke rij: titel links, knop rechts. Het item met disciplines krijgt een eigen
raster zodat de knop netjes rechts staat en de link zelf klikbaar blijft. */
.mobile-nav nav.mobile li {
border-bottom: 1px solid var(--tco-line);
position: relative;
}
.mobile-nav nav.mobile li a { padding: 18px 2px; }
.mobile-nav nav.mobile li.tco-has-mega > span { display: block; padding-right: 56px; }
.mobile-nav .tco-mega__chevron { display: none; }
.mobile-nav .tco-mega__toggle {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 8px;
right: 0;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--tco-line);
border-radius: 50%;
background: var(--tco-white);
font-size: 15px;
color: var(--tco-ink);
cursor: pointer;
transition: transform 200ms ease, background 160ms ease, color 160ms ease;
}
.mobile-nav nav.mobile li.is-open .tco-mega__toggle {
transform: rotate(180deg);
background: var(--tco-ink);
border-color: var(--tco-ink);
color: #fff;
}
/* Dicht bij het openen van de pagina; modern.js klapt hem open. */
.mobile-nav .tco-mega {
display: none;
position: static;
opacity: 1;
visibility: visible;
transform: none;
border: 0;
box-shadow: none;
background: transparent;
padding: 0 0 10px;
}
.mobile-nav .tco-mega__inner { display: block; width: auto; max-width: none; padding: 0; }
.mobile-nav .tco-mega__intro { display: none; }
.mobile-nav .tco-mega__list { display: block; }
.mobile-nav .tco-mega__list a {
display: block;
padding: 12px 2px 12px 18px;
border-left: 2px solid var(--tco-line);
border-bottom: 0;
font-family: "Mulish", sans-serif;
font-size: 15.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--tco-muted) !important;
}
.mobile-nav .tco-mega__list a:hover,
.mobile-nav .tco-mega__list a:focus {
border-left-color: var(--tco-red);
color: var(--tco-red) !important;
padding-left: 18px;
}
/* Onderaan: waar je een menu voor opent als je haast hebt. */
.mobile-nav__foot {
margin-top: 30px;
padding-top: 26px;
border-top: 1px solid var(--tco-line);
}
.mobile-nav__foot .btn {
display: block;
width: 100%;
text-align: center;
margin-bottom: 18px;
}
.mobile-nav__line {
display: block;
padding: 9px 0;
font-size: 15.5px;
font-weight: 600;
color: var(--tco-ink);
text-decoration: none;
word-break: break-word;
}
.mobile-nav__line i { color: var(--tco-red); margin-right: 10px; width: 1em; }
/* ---------------------------------------------------------------------------
* Twee kolommen bij vacatures en projecten
*
* De tekstkolom stond op flex-grow, maar de tekst erin was afgetopt op 68
* tekens. De kolom liep dus door tot aan de zijkolom terwijl de tekst al veel
* eerder stopte — vandaar dat gat van een paar honderd pixels tussen de tekst
* en het kaartje. In twee kolommen bepaalt de kolom zelf de regellengte.
* ------------------------------------------------------------------------- */
.tco-vacancy,
.tco-project {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 64px;
align-items: start;
}
.tco-vacancy__main,
.tco-project__main { min-width: 0; }
.tco-vacancy__aside,
.tco-project__aside { width: auto; }
.tco-vacancy__body.tco-prose,
.tco-project__main .tco-prose { max-width: none; }
/* Minder lucht tussen de hero en de eerste alinea eronder. */
.tco-hero + .tco-section,
.tco-hero + #center.tco-section { padding-top: 46px; }
@media (max-width: 900px) {
.tco-vacancy,
.tco-project {
grid-template-columns: minmax(0, 1fr);
gap: 34px;
}
}
/* ---------------------------------------------------------------------------
* Het aanvinkvakje voor de privacy
*
* Stond op align-items: flex-start met een marge van 3px erbovenop — dat valt
* bij een andere regelhoogte net naast de eerste tekstregel. Nu wordt het vakje
* uitgelijnd op de hoogte van die regel zelf.
* ------------------------------------------------------------------------- */
.tco-consent {
display: grid;
grid-template-columns: 18px 1fr;
align-items: start;
gap: 12px;
margin: 22px 0 26px;
font-size: 14.5px;
font-weight: 400 !important;
line-height: 1.55;
color: var(--tco-muted);
cursor: pointer;
}
.tco-consent input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
/* Halve regelhoogte min halve vakjeshoogte: zo staat het midden van het
vakje op het midden van de eerste tekstregel. */
margin-top: calc((1.55em - 18px) / 2);
accent-color: var(--tco-red);
cursor: pointer;
}
/* ---------------------------------------------------------------------------
* Het bedankscherm
* ------------------------------------------------------------------------- */
.tco-thanks {
max-width: 620px;
padding: 34px 36px 36px;
border: 1px solid var(--tco-line);
background: var(--tco-white);
}
.tco-thanks__mark {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 20px;
border-radius: 50%;
background: #e7f6ec;
font-size: 22px;
color: #176236;
}
.tco-thanks h3 {
margin: 0 0 10px;
font-family: "Archivo", sans-serif;
font-size: 26px;
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.1;
}
.tco-thanks p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--tco-muted); }
.tco-thanks__mail {
margin: 18px 0 0 !important;
padding-top: 18px;
border-top: 1px solid var(--tco-line);
font-size: 14.5px !important;
}
.tco-thanks__mail i { color: var(--tco-red); margin-right: 8px; }
.tco-thanks__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
/* ---------------------------------------------------------------------------
* Contact- en offertepagina
* ------------------------------------------------------------------------- */
/* De rode knop blijft rood, ook in een hero — daar worden gewone knoppen wit.
Dit is de knop die je wil dat mensen indrukken. */
.btn--red,
.tco-hero .btn.btn--red {
background: var(--tco-red);
border-color: var(--tco-red);
color: var(--tco-white);
}
.btn--red:hover,
.btn--red:focus,
.tco-hero .btn.btn--red:hover,
.tco-hero .btn.btn--red:focus {
background: var(--tco-red-dark);
border-color: var(--tco-red-dark);
color: var(--tco-white);
}
.tco-contactpage {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 64px;
align-items: start;
}
.tco-contactpage__main { min-width: 0; }
.tco-contactpage__main .tco-prose { max-width: none; }
.tco-contactpage__aside {
width: auto;
box-shadow: none;
border-radius: 0;
float: none;
margin: 0;
}
.tco-contactpage .tco-section__head { margin-top: 40px; }
/* De ondergrens van 250 m². Een gewone alinea zou verdwijnen tussen de rest;
een kader eromheen leest als een voorwaarde, wat het ook is. */
.tco-minimum {
display: flex;
align-items: flex-start;
gap: 14px;
max-width: 700px;
margin: 0 0 30px;
padding: 18px 22px;
border-left: 3px solid var(--tco-red);
background: var(--tco-sand);
font-size: 15px;
line-height: 1.6;
color: var(--tco-ink);
}
.tco-minimum i { color: var(--tco-red); margin-top: 3px; flex-shrink: 0; }
.tco-sidecard__address { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--tco-muted); }
.tco-sidecard__line {
display: block;
padding: 9px 0;
font-size: 15.5px;
font-weight: 600;
color: var(--tco-ink);
text-decoration: none;
word-break: break-word;
}
.tco-sidecard__line i { color: var(--tco-red); margin-right: 10px; width: 1em; }
.tco-sidecard__line:hover { color: var(--tco-red); }
.tco-sidenote__note { margin-top: 12px !important; font-size: 14.5px !important; }
.tco-sidenote__btn { display: block; text-align: center; margin-top: 16px; }
@media (max-width: 900px) {
.tco-contactpage {
grid-template-columns: minmax(0, 1fr);
gap: 34px;
}
}
/* ---------------------------------------------------------------------------
* De rode knop in de kop
*
* De volgorde binnen header #logo .right wordt met flex order gezet, want in de
* opmaak staat de taalkiezer vóór het menu. Van links naar rechts: menu,
* scheidingslijn, taal, knop.
* ------------------------------------------------------------------------- */
header #logo .right { gap: 22px; }
header #logo nav.desktop { order: 0; }
header #logo .header-divider { order: 1; }
header #logo .language { order: 2; }
header #logo .header-cta { order: 3; }
header #logo .header-divider {
width: 1px;
height: 28px;
flex-shrink: 0;
background: var(--tco-line);
}
header #logo .header-cta {
flex-shrink: 0;
min-height: 44px;
padding: 12px 22px;
font-size: 11.5px;
white-space: nowrap;
}
/* Onder 1000px verdwijnt het bureaubladmenu en is er geen plaats meer. De
offerteknop staat dan onderaan in het mobiele menu. */
@media (max-width: 1000px) {
header #logo .header-divider,
header #logo .header-cta { display: none; }
}
/* Een rood lijntje onder de pagina waar je staat. Bij hover een lichtere versie,
zodat je ziet wat aanklikbaar is zonder dat het de actieve pagina nabootst. */
nav.desktop ul li a {
border-bottom: 2px solid transparent;
padding-bottom: 10px;
}
nav.desktop ul li a:hover,
nav.desktop ul li a:focus { border-bottom-color: var(--tco-red); }
nav.desktop ul li.current-menu-item > span > a,
nav.desktop ul li.current_page_item > span > a,
nav.desktop ul li.current-page-ancestor > span > a,
nav.desktop ul li.current-menu-ancestor > span > a {
border-bottom-color: var(--tco-red);
color: var(--tco-red);
}
/* Tussen 1000 en 1240px moeten menu, taalkiezer en knop samen door een smallere
kop. Alles wat kleiner mag, wordt kleiner voor er iets afvalt. */
@media (max-width: 1240px) {
header #logo #center { gap: 20px; }
header #logo .right { gap: 14px; }
nav.desktop ul { gap: 20px; }
nav.desktop li { font-size: 14.5px; }
header #logo .header-cta { padding: 12px 16px; font-size: 11px; }
}
/* ---------------------------------------------------------------------------
* Contactpagina, tweede ronde: kaart in de hero en één zwart blok rechts.
* ------------------------------------------------------------------------- */
.tco-hero--contact { min-height: 420px; background: var(--tco-ink); }
.tco-hero__map {
position: absolute;
inset: 0;
z-index: 0;
}
.tco-hero__map > div {
width: 100%;
height: 100%;
background: var(--tco-paper);
}
/* De sluier loopt van links weg, zodat de tekst leesbaar blijft en de kaart aan
de rechterkant zichtbaar én bruikbaar is. */
.tco-hero--contact .tco-hero__veil {
background: linear-gradient(90deg, rgba(15, 15, 15, 0.94) 0%, rgba(15, 15, 15, 0.88) 34%, rgba(15, 15, 15, 0.35) 58%, rgba(15, 15, 15, 0) 74%);
pointer-events: none;
}
.tco-hero--contact .tco-hero__inner { pointer-events: none; }
.tco-hero--contact .tco-hero__text { pointer-events: auto; max-width: 500px; }
@media (max-width: 860px) {
/* Op een smal scherm zou de kaart volledig onder de tekst liggen. Dan liever
de tekst boven en de kaart als een strook eronder. */
.tco-hero--contact { display: block; min-height: 0; }
.tco-hero--contact .tco-hero__map { position: relative; inset: auto; height: 260px; }
.tco-hero--contact .tco-hero__veil { display: none; }
.tco-hero--contact .tco-hero__inner { position: relative; padding: 40px 0; }
.tco-hero--contact .tco-hero__text { max-width: none; }
}
/* --- het zwarte blok --- */
.tco-infocard {
padding: 34px 32px 36px;
background: var(--tco-ink);
color: rgba(255, 255, 255, 0.76);
}
.tco-infocard__name {
margin: 0 0 18px;
font-family: "Archivo", sans-serif;
font-size: 26px;
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.1;
color: #fff;
}
.tco-infocard__address {
margin: 0 0 18px;
font-style: normal;
font-size: 16px;
line-height: 1.6;
}
.tco-infocard__line {
display: block;
margin-bottom: 8px;
font-size: 16px;
color: rgba(255, 255, 255, 0.88);
text-decoration: none;
word-break: break-word;
}
.tco-infocard__line i { color: var(--tco-red); margin-right: 12px; width: 1em; }
.tco-infocard__line:hover,
.tco-infocard__line:focus { color: #fff; text-decoration: underline; }
.tco-infocard__block {
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.tco-infocard__block h3 {
margin: 0 0 10px;
font-family: "Archivo", sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.tco-infocard__block p { margin: 0; font-size: 16px; line-height: 1.6; }
.tco-infocard__btn { display: block; text-align: center; margin-top: 18px; }
/* --- het slanke uploadveld in het offerteformulier --- */
.tco-upload--slim {
min-height: 0;
padding: 14px 40px 14px 18px;
justify-content: flex-start;
text-align: left;
background: var(--tco-sand);
margin-top: 4px;
}
.tco-upload--slim .tco-upload__inner { justify-content: flex-start; }
.tco-upload--slim .tco-upload__text { font-size: 14.5px; }
.tco-upload--slim .tco-upload__text strong { text-decoration: none; color: var(--tco-ink); }
/* --- verzendknop met de geruststelling ernaast --- */
.tco-form__submit {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 26px;
margin-top: 4px;
}
.tco-form__note {
margin: 0;
max-width: 34ch;
font-size: 13.5px;
line-height: 1.5;
color: var(--tco-muted);
}
.tco-consent a { color: var(--tco-ink); font-weight: 700; }
.tco-consent a:hover { color: var(--tco-red); }
/* ---------------------------------------------------------------------------
* Cookievoorkeuren
* ------------------------------------------------------------------------- */
.tco-cookies {
position: fixed;
left: 24px;
bottom: 24px;
z-index: 7000;
width: min(440px, calc(100vw - 32px));
}
.tco-cookies[hidden] { display: none !important; }
.tco-cookies__box {
padding: 24px 26px 26px;
background: var(--tco-white);
border: 1px solid var(--tco-line);
box-shadow: 0 24px 60px rgba(20, 20, 20, 0.18);
}
.tco-cookies__text h2 {
margin: 0 0 10px;
font-family: "Archivo", sans-serif;
font-size: 18px;
font-weight: 800;
letter-spacing: -0.02em;
}
.tco-cookies__text h2 i { color: var(--tco-red); margin-right: 8px; }
.tco-cookies__text p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--tco-muted); }
.tco-cookies__text a { color: var(--tco-ink); font-weight: 700; }
.tco-cookies__text a:hover { color: var(--tco-red); }
.tco-cookies__small { font-size: 13px !important; color: #8d8880 !important; }
.tco-cookies__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.tco-cookies__actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
@media (max-width: 560px) {
.tco-cookies { left: 16px; right: 16px; bottom: 16px; width: auto; }
.tco-cookies__actions .btn { flex: 1 1 100%; }
}
/* Het oude meldingsvakje bestaat niet meer. */
#cookies-popup { display: none !important; }
/* De terugknop hoort alleen in het mobiele menu. */
.tco-mega__back { display: none; }
/* ---------------------------------------------------------------------------
* Mobiel menu: het aanbod schuift binnen als een tweede laag
*
* Vervangt het openklappen van hiervoor. Negen disciplines die openvouwen
* duwen de rest van het menu weg; een paneel dat over de lijst schuift houdt
* beide overzichtelijk, met een terugknop bovenaan.
* ------------------------------------------------------------------------- */
.mobile-nav__body {
position: relative;
overflow: hidden;
padding: 0;
}
.mobile-nav__level {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 4px 20px 40px;
transition: transform 260ms ease, opacity 200ms ease;
}
.mobile-nav.is-sub .mobile-nav__level {
transform: translateX(-22%);
opacity: 0;
pointer-events: none;
}
/* De regel met het aanbod: titel links, pijltje naar rechts. */
/* Het pijltje staat absoluut in zijn eigen regel, dus die regel moet
gepositioneerd zijn. Stond hier eerder op static, zodat het paneel zich aan
de laag kon meten — maar modern.js haalt dat paneel nu uit de , dus dat
is niet meer nodig. Met static hing het pijltje halverwege het hele menu in
plaats van naast Aanbod. */
.mobile-nav nav.mobile li { position: relative; }
.mobile-nav nav.mobile li.tco-has-mega > span { padding-right: 44px; }
.mobile-nav .tco-mega__toggle {
top: 50%;
right: 0;
transform: translateY(-50%) rotate(-90deg);
width: 38px;
height: 38px;
border: 0;
background: transparent;
font-size: 18px;
color: var(--tco-muted);
}
.mobile-nav nav.mobile li.is-open .tco-mega__toggle {
transform: translateY(-50%) rotate(-90deg);
background: transparent;
color: var(--tco-muted);
}
/* Het paneel zelf: even groot als de laag eronder, en schuift van rechts in. */
.mobile-nav .tco-mega {
position: absolute;
inset: 0;
display: block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 4px 20px 40px;
background: var(--tco-white);
transform: translateX(100%);
visibility: hidden;
transition: transform 260ms ease, visibility 260ms;
z-index: 2;
}
/* Het paneel is door modern.js uit de gehaald en hangt nu naast de
hoofdlijst. Het openen hangt dus aan de laag zelf, niet meer aan het item. */
.mobile-nav.is-sub .tco-mega {
transform: translateX(0);
visibility: visible;
}
.mobile-nav .tco-mega__back {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 16px 2px;
margin-bottom: 4px;
border: 0;
border-bottom: 1px solid var(--tco-line);
background: transparent;
font-family: "Archivo", sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tco-muted);
cursor: pointer;
}
.mobile-nav .tco-mega__back i { font-size: 16px; color: var(--tco-red); }
.mobile-nav .tco-mega__back:hover { color: var(--tco-ink); }
/* In het paneel: het rode kopje, de link naar de aanbodpagina, dan de negen. */
.mobile-nav .tco-mega__intro { display: block; padding: 18px 0 14px; }
.mobile-nav .tco-mega__intro p { display: none; }
.mobile-nav .tco-mega__all {
display: block;
margin-top: 10px;
font-size: 15.5px;
letter-spacing: 0.06em;
}
.mobile-nav .tco-mega__list a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 2px;
border: 0;
border-top: 1px solid var(--tco-line);
font-family: "Archivo", sans-serif;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--tco-ink) !important;
}
.mobile-nav .tco-mega__list a:hover,
.mobile-nav .tco-mega__list a:focus { color: var(--tco-red) !important; padding-left: 2px; }
/* Op een scherm zonder aanraking mag het paneel niet blijven hangen wanneer de
muis er per ongeluk overheen gaat: hier telt alleen de klik. */
.mobile-nav li.tco-has-mega:hover .tco-mega,
.mobile-nav li.tco-has-mega:focus-within .tco-mega {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.mobile-nav__level,
.mobile-nav .tco-mega { transition: none; }
}
/* ---------------------------------------------------------------------------
* Restanten van het oude uitklapmenu uitschakelen
*
* In de mediaquery voor 1000px staat nog de opmaak van de vroegere versie van
* nav.mobile: een zwevend wit paneel met een slagschaduw en een eigen top van
* 88px. Binnen de nieuwe laag levert dat een wit vlak met een schaduw op — de
* menu-items lijken dan losse kaartjes op een grijze ondergrond.
* ------------------------------------------------------------------------- */
.mobile-nav nav.mobile {
position: static;
top: auto;
margin: 0;
padding: 0;
background: transparent;
box-shadow: none;
border: 0;
border-radius: 0;
}
.mobile-nav nav.mobile ul {
padding: 0;
margin: 0;
background: transparent;
box-shadow: none;
}
.mobile-nav nav.mobile li {
background: transparent;
box-shadow: none;
border-top: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
margin: 0;
}
.mobile-nav nav.mobile li a {
padding: 18px 2px;
background: transparent;
border: 0;
border-radius: 0;
}
/* Het pijltje mag door niets verborgen worden. */
.mobile-nav .tco-mega__toggle { display: flex !important; }
/* ---------------------------------------------------------------------------
* De beheerdersbalk van WordPress
*
* Die staat op z-index 99999 en tekende dus over het menu heen. Het menu gaat
* er nu overheen zolang het openstaat; sluit je het, dan is de balk er weer.
* ------------------------------------------------------------------------- */
.mobile-nav { z-index: 100001; }
body.admin-bar .mobile-nav { top: 0; }
/* De hero van een disciplinepagina: iets lager dan de andere, want de subnav
met de negen materialen komt er meteen onder. */
.tco-hero--aanbod { min-height: 380px; }
.tco-hero--aanbod .tco-hero__facts { font-size: 15px; }
/* ---------------------------------------------------------------------------
* De beheerdersbalk van WordPress en de plakkende kop
*
* WordPress hanteert 782px als grens, niet 1000px:
* - breder dan 782px: de balk is 32px hoog en staat vast bovenaan;
* - smaller: de balk is 46px hoog maar staat absoluut in de pagina, dus hij
* scrollt gewoon mee weg.
*
* Hiervoor stond er onder 1000px een verschuiving van 46px. Tussen 783 en
* 1000px gaf dat een gat van veertien pixels, en op een telefoon bleef er een
* lege strook van 46px staan zodra je scrolde — terwijl de balk daar al lang
* weg was. Vandaar deze twee regels, op de grenzen van WordPress zelf.
* ------------------------------------------------------------------------- */
body.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) {
/*
* De witte strook boven de balk.
*
* WordPress zet de beheerdersbalk onder 782px op position: absolute, en
* zet tegelijk html op margin-top: 46px. Een absoluut geplaatst element
* hangt zich op aan zijn dichtstbijzijnde gepositioneerde voorouder — en
* style2.css zet body op position: relative. De balk hangt dus aan de body,
* en die staat door die marge al 46px lager. Resultaat: 46 pixels wit boven
* de balk.
*
* Body op static zetten is te riskant: er hangen in de oude opmaak meer
* elementen aan. De balk vast bovenaan zetten lost het op zonder aan de
* rest te raken, en houdt hem ook bereikbaar tijdens het scrollen.
*/
#wpadminbar {
position: fixed !important;
top: 0 !important;
}
body.admin-bar header { top: 46px; }
}
/* ---------------------------------------------------------------------------
* Het rode lijntje in het hoofdmenu
*
* Stond tien pixels onder de tekst; in het ontwerp sluit het er dicht tegenaan.
* En de actieve pagina houdt haar volle rood, ook wanneer de muis erover gaat —
* anders lijkt het alsof je van pagina verandert door er alleen naar te wijzen.
* ------------------------------------------------------------------------- */
nav.desktop ul li a {
padding: 14px 0 5px;
border-bottom: 2px solid transparent;
}
nav.desktop ul li a:hover,
nav.desktop ul li a:focus { border-bottom-color: var(--tco-red); }
nav.desktop ul li.current-menu-item > span > a,
nav.desktop ul li.current_page_item > span > a,
nav.desktop ul li.current-page-ancestor > span > a,
nav.desktop ul li.current-menu-ancestor > span > a,
nav.desktop ul li.current-menu-item > span > a:hover,
nav.desktop ul li.current_page_item > span > a:hover,
nav.desktop ul li.current-page-ancestor > span > a:hover,
nav.desktop ul li.current-menu-ancestor > span > a:hover,
nav.desktop ul li.current-menu-item > span > a:focus,
nav.desktop ul li.current_page_item > span > a:focus {
border-bottom-color: var(--tco-red);
color: var(--tco-red);
}
/* ---------------------------------------------------------------------------
* Hover in het uitklapmenu
*
* De vorige versie schoof de tekst zes pixels naar rechts. Dat verspringt onder
* je muis en leest onrustig. In de plaats komt er een rood lijntje van links
* ingelopen, in dezelfde taal als het streepje onder de actieve pagina. De
* tekst zelf beweegt niet.
* ------------------------------------------------------------------------- */
nav.desktop .tco-mega__list a {
position: relative;
padding: 10px 0;
padding-left: 0;
border-bottom: 1px solid rgba(23, 23, 23, 0.08);
transition: color 180ms ease;
}
nav.desktop .tco-mega__list a::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -1px;
height: 2px;
background: var(--tco-red);
transition: right 280ms cubic-bezier(0.22, 0.7, 0.3, 1);
}
nav.desktop .tco-mega__list a:hover,
nav.desktop .tco-mega__list a:focus-visible {
color: var(--tco-red) !important;
padding-left: 0;
}
nav.desktop .tco-mega__list a:hover::after,
nav.desktop .tco-mega__list a:focus-visible::after { right: 0; }
@media (prefers-reduced-motion: reduce) {
nav.desktop .tco-mega__list a::after { transition: none; }
}
/* Het pijltje in het mobiele menu.
*
* In 4.12.0 kwam er een regel om het penicoontje te verbergen dat wp_nav_menu
* voor elk item meegaf: `nav.mobile ul li i { display: none }`. Die verbergt
* elk i-element in een menuregel — dus ook het pijltje in de openknop. De knop
* was er wel, maar leeg. */
.mobile-nav .tco-mega__toggle i,
.mobile-nav .tco-mega__back i { display: block !important; }
/* ---------------------------------------------------------------------------
* 'Alle disciplines' in het mobiele paneel
*
* Was een rood kopje in drukletters met een pijl, met daarboven nog het label
* ONS AANBOD. Twee koppen boven een lijst van negen is er één te veel. Het is
* nu gewoon de eerste regel van die lijst, in dezelfde stijl als Keramiek.
* ------------------------------------------------------------------------- */
.mobile-nav .tco-mega__intro { display: block; padding: 0; }
.mobile-nav .tco-mega__intro p,
.mobile-nav .tco-mega__intro .tco-eyebrow { display: none; }
.mobile-nav .tco-mega__all {
display: block;
margin: 0;
padding: 16px 2px;
border: 0;
font-family: "Archivo", sans-serif;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
text-transform: none;
color: var(--tco-ink);
text-decoration: none;
}
.mobile-nav .tco-mega__all:hover,
.mobile-nav .tco-mega__all:focus { color: var(--tco-red); }
.mobile-nav .tco-mega__all i { display: none !important; }
/* ---------------------------------------------------------------------------
* Pagina Over ons
* ------------------------------------------------------------------------- */
.tco-about {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.tco-about h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.06; }
.tco-about .tco-prose { max-width: none; }
.tco-about__h { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.06; max-width: 24ch; }
.tco-about__lead { margin-top: 14px; max-width: 62ch; color: var(--tco-muted); }
.tco-about-sand { background: var(--tco-sand); margin-top: 76px; }
.tco-about-paper { background: var(--tco-paper); }
.tco-quote {
margin: 26px 0 0;
padding: 22px 26px;
border-left: 3px solid var(--tco-red);
background: var(--tco-white);
font-family: "Archivo", sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.35;
color: var(--tco-ink);
}
.tco-quote cite {
display: block;
margin-top: 10px;
font-family: "Mulish", sans-serif;
font-size: 12px;
font-weight: 700;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tco-muted);
}
/* --- troeven --- */
.tco-troeven { margin-top: 34px; border-top: 1px solid var(--tco-line); }
.tco-troef {
display: grid;
grid-template-columns: 44px 1fr;
gap: 20px;
padding: 20px 0;
border-bottom: 1px solid var(--tco-line);
}
.tco-troef b {
font-family: "Archivo", sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--tco-red);
font-variant-numeric: tabular-nums;
}
.tco-troef h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.02em; }
.tco-troef p { margin: 0; font-size: 15px; color: var(--tco-muted); }
/* --- historiek --- */
.tco-rail { margin-top: 44px; overflow-x: auto; padding-bottom: 8px; }
.tco-rail__inner { min-width: 940px; position: relative; padding: 96px 0 100px; }
.tco-rail__line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
background: linear-gradient(90deg, var(--tco-line) 0%, var(--tco-red) 12%, var(--tco-red) 88%, var(--tco-line) 100%);
}
.tco-rail__stops { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); }
.tco-stop { position: relative; text-align: center; }
.tco-stop::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 13px;
height: 13px;
margin: -6.5px 0 0 -6.5px;
border-radius: 50%;
background: var(--tco-red);
box-shadow: 0 0 0 5px var(--tco-white);
}
.tco-stop__jaar {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: "Archivo", sans-serif;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--tco-ink);
font-variant-numeric: tabular-nums;
}
.tco-stop__kaart {
position: absolute;
left: 50%;
width: 172px;
margin-left: -86px;
padding: 14px 16px;
background: var(--tco-white);
border: 1px solid var(--tco-line);
text-align: left;
}
.tco-stop__kaart h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: -0.02em; }
.tco-stop__kaart p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tco-muted); }
.tco-stop.is-up .tco-stop__jaar { top: -76px; }
.tco-stop.is-up .tco-stop__kaart { bottom: 50%; margin-bottom: 42px; }
.tco-stop.is-down .tco-stop__jaar { bottom: -76px; }
.tco-stop.is-down .tco-stop__kaart { top: 50%; margin-top: 42px; }
.tco-rail__hint { margin-top: 10px; font-size: 12.5px; color: var(--tco-muted); }
/* --- directie --- */
.tco-directie {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(28px, 4vw, 56px);
margin-top: 44px;
}
.tco-mens { padding-top: 20px; border-top: 2px solid var(--tco-ink); }
.tco-mens__rol {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tco-red);
}
.tco-mens h3 { margin: 10px 0 0; font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -0.025em; }
.tco-mens p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--tco-muted); }
@media (max-width: 860px) {
.tco-about { grid-template-columns: 1fr; }
/* De tijdlijn wordt een verticale lijn: op een telefoon is zijdelings
slepen door zeven mijlpalen geen doen. */
.tco-rail { overflow-x: visible; }
.tco-rail__inner { min-width: 0; padding: 0; }
.tco-rail__line {
left: 6px;
right: auto;
top: 0;
bottom: 0;
width: 2px;
height: auto;
background: var(--tco-red);
}
.tco-rail__stops { display: block; }
.tco-stop {
position: relative;
text-align: left;
padding: 0 0 26px 34px;
}
.tco-stop::before { left: 6px; top: 8px; margin: 0 0 0 -5.5px; width: 12px; height: 12px; }
.tco-stop__jaar,
.tco-stop__kaart {
position: static;
left: auto;
top: auto;
bottom: auto;
width: auto;
margin: 0;
transform: none;
}
.tco-stop__jaar { font-size: 19px; }
.tco-stop__kaart { margin-top: 8px; padding: 12px 14px; }
.tco-rail__hint { display: none; }
}
/* ---------------------------------------------------------------------------
* Sfeerbeelden op de pagina Over ons
*
* De foto's komen uit een galerijblok op de pagina zelf, dus je voegt er later
* gewoon een toe of haalt er een weg zonder aan de code te komen. Elk beeld
* krijgt hetzelfde vak met object-fit: cover, zodat staande en liggende foto's
* naast elkaar rustig blijven staan.
* ------------------------------------------------------------------------- */
.tco-sfeer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
margin-top: 40px;
}
.tco-sfeer__foto { margin: 0; }
.tco-sfeer__foto a { display: block; overflow: hidden; }
.tco-sfeer__foto img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 400ms ease;
}
.tco-sfeer__foto a:hover img { transform: scale(1.03); }
.tco-sfeer__foto figcaption {
margin-top: 10px;
font-size: 13.5px;
line-height: 1.5;
color: var(--tco-muted);
}
@media (prefers-reduced-motion: reduce) {
.tco-sfeer__foto img { transition: none; }
.tco-sfeer__foto a:hover img { transform: none; }
}
/* ---------------------------------------------------------------------------
* Tijdlijn: geen schuifbalken meer
*
* De rail stond op overflow-x: auto. Zodra één as niet op visible staat, zet de
* browser de andere as ook op auto — en de kaartjes boven en onder de lijn
* staken buiten de opvulling van 96px. Vandaar een verticale schuifbalk én
* afgesneden kaartjes.
*
* Nu: genoeg ruimte boven en onder, kaartjes die hun eigen kolom vullen, en de
* verticale versie zodra zeven kolommen niet meer passen. Geen overflow, dus
* geen schuifbalk.
* ------------------------------------------------------------------------- */
.tco-rail { overflow: visible; padding-bottom: 0; }
.tco-rail__inner { min-width: 0; padding: 152px 0 156px; }
.tco-stop__kaart {
left: 4px;
right: 4px;
width: auto;
margin-left: 0;
}
.tco-stop.is-up .tco-stop__kaart { margin-bottom: 46px; }
.tco-stop.is-down .tco-stop__kaart { margin-top: 46px; }
.tco-stop__jaar { font-size: 20px; }
.tco-stop.is-up .tco-stop__jaar { top: -66px; }
.tco-stop.is-down .tco-stop__jaar { bottom: -66px; }
.tco-stop__kaart h3 { font-size: 14.5px; }
.tco-stop__kaart p { font-size: 13px; }
/* Onder 1080px passen zeven kolommen niet meer naast elkaar. */
@media (max-width: 1080px) {
.tco-rail__inner { padding: 0; }
.tco-rail__line {
left: 6px;
right: auto;
top: 0;
bottom: 0;
width: 2px;
height: auto;
background: var(--tco-red);
}
.tco-rail__stops { display: block; }
.tco-stop {
position: relative;
text-align: left;
padding: 0 0 26px 34px;
}
.tco-stop::before { left: 6px; top: 8px; margin: 0 0 0 -5.5px; width: 12px; height: 12px; }
.tco-stop__jaar,
.tco-stop__kaart {
position: static;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: auto;
margin: 0;
transform: none;
}
.tco-stop__jaar { font-size: 19px; }
.tco-stop__kaart { margin-top: 8px; padding: 12px 14px; }
.tco-stop__kaart h3 { font-size: 15px; }
.tco-stop__kaart p { font-size: 13.5px; }
}
/* ---------------------------------------------------------------------------
* De kop van 'Wie we zijn' blijft meelopen
*
* De linkerkolom is drie regels, de rechterkolom is een halve pagina. Zonder
* dit staat er een kolom leegte naast de tekst.
* ------------------------------------------------------------------------- */
@media (min-width: 861px) {
.tco-about { grid-template-columns: 0.85fr 1.15fr; }
.tco-about > div:first-child {
position: sticky;
top: 132px;
}
}
/* ---------------------------------------------------------------------------
* Tijdlijn, definitieve opbouw
*
* Het jaartal en de kaart hingen allebei absoluut aan een blok zonder hoogte.
* De ene kreeg een offset naar boven, de andere naar beneden, en zodra een
* kaart één regel hoger werd, schoven ze over elkaar. Het jaartal staat nu ín
* de kaart, en er is nog maar één ding om te positioneren.
*
* De opvulling boven en onder is gelijk, zodat de lijn (op 50%) exact door de
* rij bolletjes loopt.
* ------------------------------------------------------------------------- */
.tco-rail__inner { padding: 170px 0; }
.tco-stop__jaar {
position: static;
display: block;
margin: 0 0 6px;
transform: none;
font-family: "Archivo", sans-serif;
font-size: 19px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
color: var(--tco-red);
font-variant-numeric: tabular-nums;
}
.tco-stop.is-up .tco-stop__kaart {
top: auto;
bottom: 50%;
margin-bottom: 34px;
margin-top: 0;
}
.tco-stop.is-down .tco-stop__kaart {
top: 50%;
bottom: auto;
margin-top: 34px;
margin-bottom: 0;
}
@media (max-width: 1080px) {
.tco-stop__jaar { font-size: 18px; margin-bottom: 4px; }
.tco-stop.is-up .tco-stop__kaart,
.tco-stop.is-down .tco-stop__kaart { margin: 0; }
}
/* ---------------------------------------------------------------------------
* Het citaat op Over ons
*
* Zelfde vorm als het kader met de ondergrens van 250 m² op de offertepagina:
* zandkleur, rode streep links, icoon ernaast. Het was een wit vlak met vette
* Archivo, en dat vroeg meer aandacht dan een citaat verdient.
* ------------------------------------------------------------------------- */
.tco-quote {
display: flex;
align-items: flex-start;
gap: 14px;
margin: 30px 0 0;
padding: 20px 24px 22px;
border-left: 3px solid var(--tco-red);
background: var(--tco-sand);
font-family: "Mulish", sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.6;
color: var(--tco-ink);
}
.tco-quote > i { color: var(--tco-red); margin-top: 3px; flex-shrink: 0; }
.tco-quote p { margin: 0; }
.tco-quote cite {
display: block;
margin-top: 10px;
font-size: 12px;
font-weight: 700;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tco-muted);
}
/* De zandkleurige band loopt rechtstreeks in de zwarte cijferband over. De
marge van 76px erboven komt van de homepagina, waar er wit tussen hoort. */
.tco-about-sand + .tco-numbers { margin-top: 0; }
/* ---------------------------------------------------------------------------
* Tijdlijn, sluitstuk: de haltes dragen zichzelf
*
* De kaartjes hingen absoluut aan een lijn en werden opgevangen door een vaste
* opvulling van 170px. Zodra een kaartje hoger werd dan die marge, liep het
* onderaan de sectie uit en schoof het onder de volgende band.
*
* Elke halte is nu een raster van drie rijen: vak boven, bolletje, vak onder.
* Beide 1fr-rijen zijn even hoog, dus het bolletje ligt exact in het midden van
* elke halte, en de lijn op 50% loopt er nog altijd precies door. Omdat alle
* haltes even hoog zijn (grid strekt ze), duwt het langste kaartje de sectie
* mee open in plaats van eruit te vallen.
* ------------------------------------------------------------------------- */
.tco-rail__inner { padding: 0; }
.tco-rail__line { transform: translateY(-1px); }
.tco-rail__stops { align-items: stretch; }
.tco-stop {
display: grid;
grid-template-rows: 1fr auto 1fr;
justify-items: center;
padding: 0 6px;
text-align: center;
}
.tco-stop::before { content: none; }
.tco-stop__slot { display: flex; width: 100%; }
.tco-stop__slot:first-child { align-items: flex-end; padding-bottom: 32px; }
.tco-stop__slot:last-child { align-items: flex-start; padding-top: 32px; }
.tco-stop__dot {
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--tco-red);
box-shadow: 0 0 0 5px var(--tco-white);
position: relative;
z-index: 1;
}
.tco-stop.is-up .tco-stop__kaart,
.tco-stop.is-down .tco-stop__kaart {
position: static;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 100%;
margin: 0;
}
@media (max-width: 1080px) {
/* Verticaal: het bolletje gaat naast de kaart staan, het lege vak verdwijnt. */
.tco-stop { display: block; position: relative; text-align: left; padding: 0 0 26px 34px; }
.tco-stop__slot { display: block; width: auto; padding: 0; }
.tco-stop__slot:empty { display: none; }
.tco-stop__dot { position: absolute; left: 0; top: 8px; }
}
/* ---------------------------------------------------------------------------
* Lucht onderaan de secties van Over ons
*
* .tco-section heeft bewust geen opvulling onderaan: op de meeste pagina's
* sluit er meteen een gekleurde band op aan. Hier eindigt de tekst tegen de
* rand van het volgende blok, en dat leest krap.
* ------------------------------------------------------------------------- */
.tco-about-sand > .tco-section,
.tco-about-paper > .tco-section,
#center.tco-about-hist,
#center.tco-about-sfeer { padding-bottom: 76px; }
/* ---------------------------------------------------------------------------
* De legende bij de teambuildingfoto's
*
* Drie uitvoeringen, te kiezen met een klasse op .tco-sfeer. Alle drie splitsen
* ze het wat van het wanneer, zodat de datum niet als losse tekst meeloopt.
* ------------------------------------------------------------------------- */
.tco-sfeer { gap: 24px; margin-top: 44px; }
.tco-sfeer__foto { position: relative; }
.tco-sfeer__foto a { position: relative; }
.tco-sfeer__wat,
.tco-sfeer__wanneer { display: block; }
/* 1. Band over de onderrand van de foto. */
.tco-sfeer.is-overlay .tco-sfeer__foto figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 46px 16px 14px;
background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.72) 62%, rgba(17, 17, 17, 0.86) 100%);
color: var(--tco-white);
pointer-events: none;
}
.tco-sfeer.is-overlay .tco-sfeer__wat {
font-family: "Archivo", sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.25;
}
.tco-sfeer.is-overlay .tco-sfeer__wanneer {
margin-top: 3px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
}
/* 2. Onder de foto, met een rood streepje erboven. */
.tco-sfeer.is-onderlijn .tco-sfeer__foto figcaption {
margin-top: 14px;
padding-top: 12px;
border-top: 2px solid var(--tco-red);
}
.tco-sfeer.is-onderlijn .tco-sfeer__wat {
font-family: "Archivo", sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--tco-ink);
}
.tco-sfeer.is-onderlijn .tco-sfeer__wanneer {
margin-top: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tco-muted);
}
/* 3. Jaartal als rood vaantje in de hoek. */
.tco-sfeer.is-hoek .tco-sfeer__foto figcaption {
margin-top: 12px;
font-family: "Archivo", sans-serif;
font-size: 14.5px;
font-weight: 700;
color: var(--tco-ink);
}
.tco-sfeer.is-hoek .tco-sfeer__wanneer {
position: absolute;
left: 0;
top: 0;
padding: 7px 12px;
background: var(--tco-red);
color: var(--tco-white);
font-family: "Archivo", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ---------------------------------------------------------------------------
* Verbindingsstreepje tussen bolletje en kaartje
*
* Zonder streepje zweeft elk kaartje los boven of onder de lijn en moet je
* zelf uitmaken bij welk bolletje het hoort. Het staat in de opvulling van
* het vak, precies boven het midden, dus altijd in lijn met de stip.
* Het lege vak blijft leeg en krijgt er dus geen.
* ------------------------------------------------------------------------- */
.tco-stop__slot { position: relative; }
.tco-stop__slot:not(:empty)::after {
content: "";
position: absolute;
left: 50%;
width: 2px;
height: 32px;
margin-left: -1px;
background: var(--tco-red);
}
.tco-stop__slot:first-child:not(:empty)::after { bottom: 0; }
.tco-stop__slot:last-child:not(:empty)::after { top: 0; }
@media (max-width: 1080px) {
/* Verticaal staat het kaartje al naast zijn stip. */
.tco-stop__slot:not(:empty)::after { content: none; }
}
/* ---------------------------------------------------------------------------
* Tijdlijn op smal scherm, sluitend opgeschreven
*
* Er stonden ondertussen vier generaties regels voor deze tijdlijn in dit
* bestand, en de smalle weergave erfde daar telkens een stuk van: de opvulling
* van 32px tussen stip en kaart bleef staan, en de kaarten hingen op wisselende
* hoogtes en breedtes. Dit blok schrijft de smalle weergave in haar geheel uit
* en staat achteraan, zodat er niets meer overheen komt.
* ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
.tco-rail { overflow: visible; }
.tco-rail__inner { min-width: 0; padding: 0; }
.tco-rail__line {
left: 5px;
right: auto;
top: 4px;
bottom: 4px;
width: 2px;
height: auto;
transform: none;
background: var(--tco-red);
}
.tco-rail__stops { display: block; }
.tco-rail .tco-stop {
display: block;
position: relative;
text-align: left;
padding: 0 0 22px 30px;
}
.tco-rail .tco-stop__slot {
display: block;
width: auto;
padding: 0;
}
.tco-rail .tco-stop__slot:empty { display: none; }
.tco-rail .tco-stop__slot::after { content: none; }
.tco-rail .tco-stop__dot {
position: absolute;
left: 0;
top: 6px;
width: 12px;
height: 12px;
box-shadow: 0 0 0 4px var(--tco-white);
}
.tco-rail .tco-stop .tco-stop__kaart {
position: static;
width: auto;
margin: 0;
padding: 13px 15px;
}
}
/* ---------------------------------------------------------------------------
* Het citaat: zonder icoon en met rechte hoeken
*
* De afgeronde hoek kwam van de algemene opmaak van blockquote in style2.css.
* Het kader hoort er hetzelfde uit te zien als het kadertje op de offertepagina,
* en dat heeft rechte hoeken.
* ------------------------------------------------------------------------- */
.tco-quote {
display: block;
border-radius: 0;
box-shadow: none;
}
/* style2.css tekent onderaan elke blockquote een lichte streep; die hoort bij
het zwarte kader van vroeger en heeft hier niets te zoeken. */
.tco-quote::after { content: none; }
/* ---------------------------------------------------------------------------
* De regel met de privacyverklaring
*
* Ze stond 22px onder het veld erboven en 26px boven de knop eronder, en hing
* dus iets te hoog tussen die twee. Nu even veel langs beide kanten. De
* onderlinge uitlijning van vakje en tekst blijft zoals ze was.
* ------------------------------------------------------------------------- */
.tco-consent { margin: 24px 0; }
/* ---------------------------------------------------------------------------
* Tijdlijn op smal scherm: de kaartjes weer over de volle breedte
*
* De halte is op breed scherm een raster met justify-items: center. Op smal
* scherm werd ze wel op display: block gezet, maar justify-items bleef staan —
* en dat centreerde elk vak op zijn eigen tekstbreedte. Vandaar de kaartjes die
* ergens in het midden zweefden, elk op een andere hoogte en breedte, met een
* gat tussen de lijn en de kaart.
*
* De lijn schuift meteen wat naar rechts, zodat ze niet meer tegen de rand van
* het scherm plakt.
* ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
.tco-rail .tco-stop {
display: block;
grid-template-rows: none;
justify-items: stretch;
position: relative;
text-align: left;
padding: 0 0 22px 46px;
}
.tco-rail .tco-stop__slot {
display: block;
width: 100%;
padding: 0;
}
.tco-rail .tco-stop__slot:empty { display: none; }
.tco-rail .tco-stop__dot {
position: absolute;
left: 10px;
top: 6px;
width: 12px;
height: 12px;
}
.tco-rail__line {
left: 15px;
right: auto;
top: 4px;
bottom: 4px;
width: 2px;
height: auto;
}
}