,
niet background-image. object-fit vervangt background-size, object-position
vervangt background-position.
De wrapper doet het clippen (wat overflow bij een background gratis deed) en
houdt de ![]()
onder de inhoud. Belangrijk voor .header-top: overflow:hidden
rechtstreeks op die balk zou de uitklappende dropdowns afkappen, vandaar de
aparte wrapper.
--------------------------------------------------------------------------- */
.bg-wrap {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.bg-wrap .bg-image {
display: block;
width: 100%;
height: 100%;
max-width: none; /* wint van de globale img{max-width:100%} */
margin: 0;
object-fit: cover; /* was: background-size: cover */
object-position: 50% 50%; /* was: background-position: 50% */
}
/* Het beeldkader is het element zélf, niet de viewport.
Dit was eerder 100vh, een erfenis van background-attachment:fixed: dat schaalde
op de viewport, waardoor balk en header naadloos in elkaar overliepen. Nadeel
was dat het beeld dan alleen horizontaal overloopt — bij object-fit:cover heeft
altijd precies één as speling, en met een kader van 1425x900 tegen een foto van
2,75:1 was dat nooit de verticale. uitlijning_verticaal deed daardoor niets.
Met het element als kader bepaalt de verhouding welke as speling heeft, en
werkt object-position zoals een redacteur verwacht. Bijkomend: de header toont
nu vrijwel de hele foto in plaats van een uitsnede van ~32%. */
.header-top .bg-image,
.header .bg-image,
.header .bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Vimeo-achtergrondvideo (ACF type_beeld = video).
Een iframe kent geen object-fit, dus het cover-effect komt van een iframe dat
groter is dan het kader: minstens zo breed als het kader én minstens zo hoog,
met 16:9 behouden. De verschuiving (left/top + translate) staat inline en
volgt positionering_media, net als object-position bij de afbeelding. */
.header .bg-video { overflow: hidden; }
.header .bg-video iframe {
position: absolute;
width: 100vw;
height: 56.25vw; /* 16:9 van de breedte */
min-width: 177.7778vh; /* 16:9 van de hoogte */
min-height: 100vh;
border: 0;
pointer-events: none; /* decoratief: niet klikbaar, geen tabstop */
}
/* De poster-afbeelding blijft eronder liggen. Wie beweging heeft uitgezet krijgt
alleen die afbeelding te zien. */
@media (prefers-reduced-motion: reduce) {
.header .bg-video { display: none; }
}
/* Inhoud boven de achtergrond houden. */
.header-top > .container,
.header > .container,
.footer > .container { position: relative; z-index: 1; }
.header, .header-top {color:#FFF;}
.header {position:relative;background-color:#333;}
/* Dekkend is de standaard, doorzichtig de uitzondering: custom.js zet is-top
zolang de pagina bovenaan staat. Zo om geformuleerd omdat zonder JavaScript
dekkend het veilige gedrag is — een permanent doorzichtige balk laat de titel
en knop van de header er dwars doorheen scrollen. Bovenaan mág hij doorzichtig
zijn: daar loopt het headerbeeld eronder door. */
.header-top {
background-color: #2c3942;
box-shadow: 0 2px 12px rgba(0,0,0,0.25);
transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.header-top.is-top { background-color: #2c394290; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
.header-top {transition: none;}
}
/* width:100% i.p.v. 100vw: 100vw rekent de scrollbar mee, waardoor de balk 15px
breder was dan het venster en er horizontaal overliep. */
.header-top {position:fixed; /* height: 70px; */width: 100%;z-index: 100;}
.header {padding: 100px 0 20px;}
.header .header-content {min-height: 400px;display: flex;flex-wrap: wrap;flex-direction: column;justify-content: center;}
/* Vloeiende koptekst: op 375px paste "MACHINEBOUW" niet op één regel bij 3rem en
liep de H1 20px buiten het scherm. Eén lang woord kan niet afbreken, dus moet
de tekengrootte meebewegen. overflow-wrap is de vangnetregel voor nóg langere
woorden. Schaalt nu vloeiend mee tot en met 1400px (zie de fluid-formule
hierboven), dus geen vaste 768px-sprong meer nodig. */
.header h1 {font-weight: bold;margin-top: 0;position:relative;margin-bottom: 2rem;font-size: clamp(2rem, calc(2rem + (1vw - 3.2px) * 2.2222), 3.5rem);overflow-wrap: break-word;color: #FFF;}
.header h1 em {font-style:normal;font-weight:600;display: block;}
.header h1 strong { font-weight:700; text-transform:uppercase; color:#f5800e; }
.header h1::after {/* content:''; */position:absolute;width:100px;/* border-bottom:2px solid #FFF; */left:0;bottom: -10px;}
.header .header-content .btn {align-self: flex-start;}
.footer {width: 100%;clear: both;background-color: #333;/* margin-top: 5rem; */}
section {padding: 2rem 0;position:relative;/* overflow: hidden; */}
section.no-padding-top{padding-top:0;}
section.no-padding-bottom{padding-bottom:0;}
section.low-padding-top{padding-top:1rem;}
section.low-padding-bottom{padding-bottom:1rem;}
section.mid-padding-top{padding-top:2rem;}
section.mid-padding-bottom{padding-bottom:2rem;}
section.large-padding-top{padding-top:3rem;}
section.large-padding-bottom{padding-bottom:3rem;}
.section-wit{
background-color: #fff;
}
.section-lichtgrijs{
background-color: #eee;
}
#contactform { width:100%; height:100%; padding:30px;position:relative; box-shadow:5px 5px 5px rgba(0,0,0,0.25); background:#00b4cc; color:#FFF; min-height:300px; }
#contactform h3 { color:#FFF; }
#contactform input { font-size:90%; color:#FFF; background:transparent; border:none; border-bottom:1px solid #FFF; }
#contactform .wpcf7-form-control-wrap { position:relative; }
#contactform .wpcf7-form-control-wrap::after { position:absolute; right:4px; float:right; content:'>'; color:#FFF; }
#contactform input.wpcf7-submit {font-weight:bold;padding: 0 15px;margin-top:15px;border: 2px solid #FFF;}
#introvid iframe { width:100%; height:100%; position:absolute; }
#introvid #play {position:absolute;content:'';background:rgba(245, 128, 14, 0.8);top:0;left:0;right:0;bottom:0;font-size:40px;font-family:var(--tf-font);text-align:center;line-height:1.5em;cursor: pointer;opacity: 1;transition: opacity 0.5s ease;}
#introvid #play.playing {opacity: 0;}
#introvid #play .inner {top: 50%;transform: translateY(-50%);position: absolute;width: 100%;line-height: 100%;}
#introvid #play i {font-size:100px;display:block; }
.picture-right{
box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
}
.page-overview .row { margin-top:-12rem;}
.page-overview h2 { color:#FFF; margin:1rem 0; }
.page-overview .content {background:#FFF;padding: 15px;text-align:center;box-shadow: 2px 2px 0 rgba(0,0,0,0.3);}
.page-overview .content .icon {font-size:50px;border:2px solid;display:inline-block;line-height:60px;width:80px;border-radius:50%;margin: 15px 0;overflow: hidden;}
.page-overview .content .icon img{width: 100%;height: auto;/* padding: 8px; */margin:0;}
.page-overview .content h3 {height: 3em;overflow:hidden;margin: 0 0 0.5em;padding-bottom: 1em;display: block;border-bottom: 1px solid;}
/* "Lees meer"-link in de kaarten van paginaoverzicht en diensten. Die stond op
Bootstrap's standaard linkblauw (#0d6efd) en viel daarmee buiten de huisstijl.
Nu de cyaan accentkleur, met dezelfde chevron als de slick-pijlen
(FontAwesome \f105) zodat het aansluit op de bestaande iconografie.
De chevron staat op inline-block: text-decoration slaat niet over op
inline-block-kinderen, dus de underline-on-hover van het thema loopt netjes
onder de tekst door en niet onder het pijltje. */
.more {
display: inline-block;
color: #00b4cc;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.02em;
line-height: 1.4;
}
.more::after {
display: inline-block;
font-family: FontAwesome;
font-weight: normal;
content: '\f105';
margin-left: 8px;
transition: transform 0.2s ease;
}
.more:hover,
.more:focus { color: #2d4759; }
.more:hover::after,
.more:focus::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.more::after { transition: none; }
}
/* .home section.referenties verwijderd: dat blok werd nergens meer gerenderd
(de hardcoded homepage-sectie is bij ronde 2 weggehaald) en was de laatste
plek met een background-image in CSS. */
.home section.referenties h2 { color:#FFF; margin:1rem 0 }
.home section.referenties .content {background: #00b4cd;padding: 50px 30px 10px 30px;box-shadow: 2px 2px 0 rgba(0,0,0,0.3);position:relative;color: #FFF;}
.home section.referenties .content::before {background: transparent;content:'\201C';position:absolute;top: 30px;left: 30px; font-size:60px}
.home section.referenties .content::after {background: transparent;content:'';position:absolute;bottom: -16px;left: 15px;border: 8px solid transparent;border-top: 8px solid #00b4cd;border-left: 8px solid #00b4cd;}
.home section.referenties .referral {padding: 20px 0 0 30px;}
.home section.referenties .referral img {float:left;width: 50px;height: 50px;border-radius:50%;margin: -5px 15px 0 0;}
.home section.referenties .referral h3,
.home section.referenties .referral h4 {color:#FFF;font-size: 0.9rem;padding:0;margin: 0 0 5px;font-family:var(--tf-font);}
.home section.referenties .referral h4 { font-weight:normal; }
.projecten .row {border:3px solid #aaa;padding: 1px;/* margin: 0 -38px; */}
.projecten .row .col-md-4 {margin: 8px 0;}
.projecten .row .col-md-4 h3 { margin:0; }
.projecten .row .col-md-4 h3 a {background: #00b4cd;padding: 15px;color:#FFF;display:block;}
.diensten .content { background:#FFF; padding:45px 15px; height:100%; position:relative;}
.diensten .content h3 { border-bottom:solid 1px; padding-bottom:0.5em; white-space:nowrap; overflow:hidden; text-align:center; }
.diensten .content>a { position:absolute; bottom:15px; }
.home section.klanten img, div.klanten img {width:auto;max-height: 80px;height: auto;max-width: 300px;transform: translateY(calc(40px - 50%));padding: 0 30px;}
.single-post h2 { margin-top:0; }
.single-post .img {box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);display: block;border: 1px solid rgba(0,0,0,0.1); margin:20px;}
.single-post section { padding-top:2rem; }
.single-post #newsslider { padding-top:4rem;}
.footer {position:relative;background: #2c3942;border-top: 6px solid #00b4cd;min-height: 400px;}
/* De footerfoto verscheen pas vanaf 768px; onder die breedte alleen de kleur. */
.footer .bg-wrap { display: none; }
.footer {color:#FFF;padding:1rem 0;/* text-align:center; */}
.footer h2 { margin-top:30px; }
.footer h2, .footer a, .footer a:hover { color:#FFF; }
.footer label { display:none; }
.footer input {padding: 2px 12px;max-width:100%;background:transparent;border:1px solid #eee;font-family: var(--tf-font);}
.footer input[type=submit] { background:#00b4cd; border:none; }
.slick-next,
.slick-prev {border-radius:50%;/* border:2px solFid #00b4cd; */color: #00b4cd;transform:scale(2);}
.slick-next::before, .slick-prev::before { color:#00b4cd; }
.slick-prev::before { font-family:FontAwesome; content:'\f104'; }
.slick-next::before { font-family:FontAwesome; content:'\f105'; }
/* Slick zet de pijlen standaard 25px búiten de slider (left/right: -25px) en de
scale(2) hierboven doet er nog eens ~10px per kant bij. Zodra de container
weinig speling tot de schermrand heeft, rekt dat het document op: bij een
viewport van 480px werd de documentbreedte 515px, bij 1200px werd het 1213px.
Dat is niet alleen een horizontale scrollbalk — de layout-viewport groeit mee,
waardoor .header-top (position:fixed, width:100%) net zo breed werd en de
hamburger buiten beeld viel.
Daarom binnen de slider houden, op álle breedtes: de slider zit altijd binnen
.container, dus zo kan de pijl per definitie niet buiten het scherm vallen. */
.slick-prev { left: 10px; }
.slick-next { right: 10px; }
.slick-slider::after {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height: 80px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+2,0+12,0+88,1+98 */
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 2%, rgba(255,255,255,0) 12%, rgba(255,255,255,0) 88%, rgba(255,255,255,1) 98%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 2%,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 88%,rgba(255,255,255,1) 98%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 2%,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 88%,rgba(255,255,255,1) 98%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
/* Mobiel: gelijke ruimte boven en onder, zodat logo en hamburger verticaal
gecentreerd in de balk staan. De 25px zijpadding is meteen de lijn waarop de
menu-items uitlijnen. Vanaf 768px wordt dit hieronder overschreven. */
.header-top .container {position:relative;padding: 16px 25px;}
/* Mobiel: kleiner dan voorheen (was 200x70) en niet meer tegen de bovenrand
geplakt. left gelijk aan de zijpadding van de container, zodat het logo op
dezelfde lijn staat als de menu-items eronder. top 10px centreert het blokje
van 52px in de balk van 72px, net als de hamburger. */
.header-top .container .logo {z-index:10;display:block;width: 160px;height: 52px;position:absolute;top: 10px;left: 25px;}
/* Was background-size:contain met de standaard background-position 0% 0%. */
.header-top .container .logo img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: contain;
object-position: 0 0;
}
/* ---------------------------------------------------------------------------
Navbar (Bootstrap 5)
Kleuren gaan via de BS5 CSS-variabelen; die cascaden vanaf .navbar door naar
.navbar-nav en .nav-link. De losse .caret uit Bootstrap 3 is vervangen door
.dropdown-toggle::after, dat Bootstrap zelf tekent.
--------------------------------------------------------------------------- */
.navbar {
--bs-navbar-color: #FFF;
--bs-navbar-hover-color: #00b4cd;
--bs-navbar-active-color: #00b4cd;
--bs-navbar-padding-x: 0;
--bs-navbar-padding-y: 0;
/* Uitgeklapte navbar: Bootstrap 5 zet de horizontale padding van .nav-link
via `.navbar-expand-md .navbar-nav .nav-link` op deze variabele (default
0.5rem), níet op --bs-nav-link-padding-x. Beide zijn dus nodig — zie het
blok op .navbar-nav hieronder voor de ingeklapte variant. */
--bs-navbar-nav-link-padding-x: 20px;
--bs-navbar-toggler-border-color: rgba(255,255,255,0.5);
--bs-navbar-toggler-focus-width: 0;
/* Bootstrap's hamburger-SVG met witte streepjes (was .icon-bar). */
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
background-color: transparent;
border: none;
/* De negatieve marge (om de navbar buiten de container-padding te laten
bleeden) staat alleen in de >=768px query: op mobiel heeft .header-top
.container 25px zijpadding, waardoor -30px de hamburger buiten het
scherm duwde. */
}
/* Deze variabelen MOETEN op .navbar-nav staan, niet op .navbar: Bootstrap 5
declareert --bs-nav-link-padding-x/y zelf op .navbar-nav, en die declaratie
overschrijft een geërfde waarde van .navbar. Stonden ze daar, dan vielen de
links terug op Bootstrap's 0.5rem/0 in plaats van de 15px/20px van het
oorspronkelijke ontwerp.
Dit regelt de verticale padding (beide toestanden) en de horizontale padding
in de ingeklapte navbar; voor de uitgeklapte navbar geldt
--bs-navbar-nav-link-padding-x op .navbar hierboven. */
.navbar-nav {
--bs-nav-link-font-size: 16px;
--bs-nav-link-padding-y: 15px;
--bs-nav-link-padding-x: 20px;
}
/* Titel-link en caret-link staan naast elkaar in dezelfde . Zonder nowrap
wrappen die twee inline-blocks onderling zodra de navbar te smal wordt, en
valt de caret onder zijn eigen label (zichtbaar rond 800px). Een heel
menu-item mag wél naar de volgende regel, net als in Bootstrap 3. */
.navbar-nav .nav-item { white-space: nowrap; }
.navbar-nav .nav-link.main-link {
display: inline-block;
padding-right: 10px;
}
.navbar-nav .nav-link.dropdown-toggle {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
/* WP zet current_page_ancestor / current-menu-ancestor op de , daar heeft
Bootstrap geen variabele voor. */
.navbar-nav .current_page_ancestor > .nav-link,
.navbar-nav .current-menu-ancestor > .nav-link,
.navbar-nav .show > .nav-link {
background: transparent;
color: #00b4cd;
}
.navbar-toggler { margin-left: auto; }
.navbar-toggler:hover,
.navbar-toggler:focus { background: rgba(0,0,0,0.4); }
.dropdown-menu {
font-size: 18px;
text-align: left;
list-style: none;
}
#refvid { display:none; }
::-webkit-input-placeholder { color: inherit; }
:-moz-placeholder { color: inherit; opacity: 1; }
::-moz-placeholder { color: inherit; opacity: 1; }
:-ms-input-placeholder { color: inherit; }
::-ms-input-placeholder { color: inherit; }
/* ---------------------------------------------------------------------------
Uitgeklapt menu (onder 768px)
Bootstrap 5 laat de navbar groeien en verwacht dat het uitgeklapte menu de
achtergrond van de navbar zelf gebruikt. Dat ging hier mis: bovenaan de pagina
is de balk doorzichtig (class is-top), waardoor het menu over de hero zweefde.
custom.js zet daarom menu-open zodra het menu opengaat; die wint van is-top.
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
.header-top.is-top.menu-open {
background-color: #2c3942;
box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
/* Past het menu niet, dan scrolt het binnen de balk in plaats van van het
scherm af te lopen. 70px is de hoogte van de balk zelf. */
.navbar-collapse {
max-height: calc(100vh - 70px);
overflow-y: auto;
overscroll-behavior: contain;
margin-top: 8px;
padding-top: 4px;
padding-bottom: 8px;
border-top: 1px solid rgba(255,255,255,0.12);
}
/* De regelhoogte van 200% uit de body maakte elk item ~62px hoog en het menu
ruim 700px. Hier een rustiger ritme met scheidingslijnen. */
/* padding-left op 0: de tekst begint dan precies op de zijpadding van de
container (25px), dezelfde lijn als het logo erboven. */
.navbar-nav .nav-link {
line-height: 1.4;
padding: 12px 0;
}
.navbar-nav > .nav-item + .nav-item {
border-top: 1px solid rgba(255,255,255,0.12);
}
/* Submenu: geen wit paneel meer, maar een ingesprongen lijst op dezelfde
donkere achtergrond, met een cyaan streep als niveau-aanduiding. */
.navbar-nav .dropdown-menu {
background-color: transparent;
border: none;
border-left: 2px solid #00b4cd;
border-radius: 0;
box-shadow: none;
margin: 0 0 8px 4px;
padding: 0;
}
.navbar-nav .dropdown-menu .dropdown-item {
color: #FFF;
padding: 10px 16px;
line-height: 1.4;
white-space: normal;
}
/* Bootstrap kleurt het actieve item standaard met een blauw blok (#0d6efd).
Hier alleen de tekst in de accentkleur, zoals de rest van het menu. */
.navbar-nav .dropdown-menu .dropdown-item.active,
.navbar-nav .dropdown-menu .dropdown-item:active,
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus {
background-color: transparent;
color: #00b4cd;
}
/* De caret zit op een eigen link naast de titel; hier krijgt hij wat meer
aanraakoppervlak. */
.navbar-nav .nav-link.dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
}
@media ( min-width:768px ) {
html {display:flex;flex-direction:column;}
body {display:flex;flex: 1 1 auto;flex-direction:column;font-size: 1.1rem;}
body>div#maincontent {flex:1 1 auto;}
body>.header,
body>.footer {flex:0 1 auto; }
.header-top { height:100px; }
.header-top .container {padding: 30px 0 10px;}
.header-top .container::after {top: 25px;}
.header-top .container .logo {width: 260px;height: 56px;top: 28px;left: -20px;}
.header {padding: 30px 0 90px;margin-top: 100px;}
/* Het beeldkader begint 100px hoger dan de header en loopt dus door achter de
vaste balk. Balk en header tonen daardoor één en hetzelfde beeld, precies
wat background-attachment:fixed voorheen deed — maar nu geschaald op dit
gebied in plaats van op de hele viewport, dus zonder de zware inzoom. */
.header .bg-wrap { top: -100px; }
.home .header {padding: 30px 0 130px; }
.header h1 {/* margin-bottom: 2rem; */color: #FFF;line-height: 130%;margin-right: 10%;position: relative;}
.header h1::after {bottom: -10px;}
.header .row { display:flex; }
.header .col-md-6 { flex: 1 0 auto; }
section {padding: 2rem 0;overflow: visible;}
section.no-padding-top{padding-top:0;}
section.no-padding-bottom{padding-bottom:0;}
section.low-padding-top{padding-top:1rem;}
section.low-padding-bottom{padding-bottom:1rem;}
section.mid-padding-top{padding-top:2rem;}
section.mid-padding-bottom{padding-bottom:2rem;}
section.large-padding-top{padding-top:3rem;}
section.large-padding-bottom{padding-bottom:3rem;}
.home ul.links {float: left;width: 20%;min-width: 150px;margin: 0 15px 0 0;}
.home section:nth-child(2n) ul.links { margin: 0 0 0 15px; }
.home section:nth-child(2n) ul.links,
.home section:nth-child(2n) .col-md-6 {float:right;}
.home .focus {border:none;padding: 0; flex:1 1 auto }
.home .focus .content { padding: 0 15px; }
.home section.kanalen .container .row {border:3px solid #aaa;padding: 30px;margin: 0 -38px;}
.diensten .row { display:flex; }
.diensten .row .col-md-3 { flex:1 1 auto; }
/* De navbar is vanaf hier uitgeklapt en .navbar-collapse is een flexbox.
Rechts uitlijnen gaat dus met justify-content in plaats van float, en de
padding-left houdt ruimte vrij voor het absoluut gepositioneerde logo. */
/* Alleen naar links bleeden. Met -30px aan béide kanten liep de navbar 30px
buiten de container en de nav daarbovenop nog 20px; samen 50px. Rond
1200px viewport is de container op zijn max van 1170px en is er maar ~15px
ruimte over, dus werd die 50px afgekapt — en omdat .header-top
position:fixed is komt er geen scrollbar: de talenswitcher viel er stilletjes
half af. Productie (Bootstrap 3) heeft dat euvel ook, daar 35px. */
.navbar { margin-left: -30px; margin-right: 0; }
.navbar-collapse { justify-content: flex-end; padding-left: 230px; }
/* flex-wrap is essentieel: de Bootstrap 3 navigatie bestond uit floats en
liet menu-items naar een tweede regel lopen zodra de ruimte opraakte.
Bootstrap 5 zet .navbar-nav als flexrij met de default flex-wrap:nowrap,
waardoor het menu in plaats daarvan buiten de container liep. Doordat
.header-top position:fixed is komt er dan geen scrollbar en valt het
rechterdeel — inclusief de talenswitcher — simpelweg buiten beeld.
Merkbaar tussen 768px en ~1250px. */
/* justify-content ook op de nav zelf: op .navbar-collapse lijnt het alleen de
.navbar-nav als geheel uit, niet de items binnen een regel. Zonder dit
begint een gewrapte tweede regel links en staat de talenswitcher los
linksonder. Alleen binnen deze query — ingeklapt is .navbar-nav een kolom
en zou flex-end de items naar de onderkant duwen. */
.navbar-nav {
margin-left: -20px;
margin-right: 0;
flex-wrap: wrap;
justify-content: flex-end;
}
#newsslider li { width:33.333%; }
.home section.referenties {overflow:hidden; }
/*
#refvid { display:block; position:absolute;top: 50%;height:0;padding-bottom: 56.25%;left:0;right:0;overflow:hidden;transform: translateY(-50%);}
#refvid iframe {position:absolute;width: 100%;height: 100%;}
*/
#refvid { display:none; }
/* Was een absolute www.technofood.nl-URL naar een upload; brak op local/staging.
Zelfde afbeelding staat nu als theme-asset in images/. */
/* Was: background: #2c3942 url(...) 50% 50% / cover — nu een ![]()
in .bg-wrap. */
.footer .bg-wrap { display: block; }
}
@media ( min-width:1400px ) {
.header {padding: 70px 0 130px;margin-top: 100px;}
section {padding: 4rem 0;overflow: visible;}
section.no-padding-top{padding-top:0;}
section.no-padding-bottom{padding-bottom:0;}
section.low-padding-top{padding-top:2rem;}
section.low-padding-bottom{padding-bottom:2rem;}
section.mid-padding-top{padding-top:4rem;}
section.mid-padding-bottom{padding-bottom:4rem;}
section.large-padding-top{padding-top:6rem;}
section.large-padding-bottom{padding-bottom:6rem;}
}
.btn {
display: inline-block;
font-family: var(--tf-font);
padding: 10px 15px;
margin-bottom: 0;
font-size: 14px;
font-weight: 700;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius:0px;
}
.btn-primary {
color: #fff;
background-color: #00b4cc;
border-color:#00b4cc;
}
.btn-primary:hover{
background-color: #2d4759;
border-color:#2d4759;
}
.gallery-image{
aspect-ratio: 1/1;
display: block;
margin-bottom: 30px;
}
.gallery-image img{
object-fit: cover;
object-position: 50%;
height: 100%;
width: 100%;
}
.content-image{
margin-bottom: 30px;
max-width: 100%;
height: auto;
}