/* VANTROQ mobile fix
Upload naar: /public_html/assets/vantroq-mobile-fix.css
Voeg toe in van iedere HTML-pagina:
*/
/* Desktop: mobiele verdiepingssecties niet tonen */
.mobile-depth-section,
.mobile-expertise-section {
display: none;
}
@media (max-width: 960px) {
html,
body {
width: 100%;
overflow-x: hidden;
}
body {
font-size: 16px;
line-height: 1.55;
}
.container {
width: min(100% - 28px, 1160px);
}
/* Mobiele navigatie: de bestaande desktoplinks worden swipebaar zichtbaar. */
.site-header {
position: sticky;
top: 0;
z-index: 999;
}
.header-inner {
height: auto;
min-height: 0;
padding: 10px 0 8px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.logo {
align-self: flex-start;
padding: 7px 10px;
}
.logo img {
height: 28px;
}
.nav {
display: flex !important;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
gap: 8px;
justify-content: flex-start;
padding: 2px 0 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.nav a {
flex: 0 0 auto;
font-size: 13px;
line-height: 1;
padding: 9px 11px;
border: 1px solid rgba(198,169,107,.28);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.92);
}
.nav a.active {
background: rgba(198,169,107,.16);
border-color: rgba(198,169,107,.65);
color: #fff;
}
.nav .nav-cta {
background: #F57C00;
border-color: #F57C00;
color: #fff !important;
padding: 9px 13px !important;
}
/* Hero: de banner bevat al tekst; voorkom herhaling er direct onder. */
.visual-hero {
padding: 12px 0 0;
}
.visual-hero > .container {
width: 100%;
}
.visual-hero .hero-image {
width: 100%;
border-left: 0;
border-right: 0;
border-top: 1px solid rgba(198,169,107,.35);
border-bottom: 1px solid rgba(198,169,107,.35);
box-shadow: none;
}
.visual-intro {
display: none !important;
}
/* Nieuwe mobiele diepgang onder de banner. */
.mobile-depth-section,
.mobile-expertise-section {
display: block;
background: #0E1A2B;
color: #fff;
padding: 36px 0;
}
.mobile-depth-section .eyebrow,
.mobile-expertise-section .eyebrow {
color: #C6A96B;
}
.mobile-depth-section h2,
.mobile-expertise-section h2 {
font-size: 30px;
line-height: 1.08;
margin-bottom: 14px;
}
.mobile-depth-section .mobile-lead,
.mobile-expertise-section .mobile-lead {
color: rgba(255,255,255,.82);
font-size: 17px;
margin-bottom: 22px;
}
.mobile-action-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.mobile-action-card {
display: block;
background: rgba(255,255,255,.075);
border: 1px solid rgba(198,169,107,.28);
padding: 20px;
}
.mobile-action-card span {
display: inline-flex;
color: #F57C00;
font-size: 12px;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 8px;
}
.mobile-action-card h3 {
font-size: 21px;
margin-bottom: 8px;
color: #fff;
}
.mobile-action-card p {
color: rgba(255,255,255,.8);
margin-bottom: 12px;
}
.mobile-action-card ul {
margin: 0;
padding-left: 19px;
color: rgba(255,255,255,.78);
}
.mobile-action-card li {
margin-bottom: 6px;
}
.mobile-action-card .mobile-link {
display: inline-flex;
margin-top: 10px;
color: #C6A96B;
font-weight: 800;
}
/* De ervaringsoverzicht-afbeelding is tekstueel heel breed. Op mobiel tonen we hem als swipebaar beeld. */
.ervaringen-overzicht-section {
padding: 0 0 30px !important;
background: #F4F6F8 !important;
}
.ervaringen-overzicht-section .container {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ervaringen-overzicht-section img {
display: block;
width: 920px !important;
max-width: none !important;
height: auto !important;
box-shadow: none !important;
}
.ervaringen-overzicht-section::after {
content: "Swipe horizontaal om het volledige ervaringsoverzicht te bekijken.";
display: block;
width: calc(100% - 28px);
margin: 10px auto 0;
color: #5c6878;
font-size: 13px;
}
/* Tekstafbeeldingen uit het document worden op mobiel verborgen; de echte tekstblokken blijven leesbaar. */
.doc-visual.compact {
display: none;
}
.section {
padding: 50px 0;
}
h2 {
font-size: 30px;
line-height: 1.08;
letter-spacing: -.03em;
}
h3 {
font-size: 21px;
}
.lead,
.rich-text p,
.rich-text li {
font-size: 17px;
}
.grid.three,
.grid.four,
.comparison,
.footer-grid,
.split,
.two-col {
grid-template-columns: 1fr !important;
}
.cards .card,
.card,
.problem,
.panel,
.contact-panel,
details {
padding: 21px;
}
.problem {
min-height: auto;
}
.problem p {
font-size: 18px;
}
.comparison > div {
padding: 24px;
}
.comparison .v {
border-left: 0;
border-top: 1px solid rgba(255,255,255,.18);
}
.statement {
padding: 54px 0;
}
.statement h2 {
font-size: 29px;
}
.page-hero.with-visual,
.page-hero {
padding: 42px 0;
}
.page-hero-grid {
grid-template-columns: 1fr !important;
}
.page-hero-text h1,
.hero h1,
.page-hero h1 {
font-size: 36px;
line-height: 1.02;
}
.timeline > div,
.timeline.large > div {
grid-template-columns: 1fr;
padding: 22px;
}
.timeline span {
grid-row: auto;
}
.footer-bottom {
flex-direction: column;
}
}