/* generated by scripts/css-min.php from ../content.css — edit the source, never this file */
.vonnik-page > .vonnik-page-hero, .vonnik-page > .vonnik-faq-band, .vonnik-page > .vonnik-cta-band, .vonnik-page > .vonnik-values-band { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: auto !important; max-width: none !important; padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); } .vonnik-page-hero--plain > *, .vonnik-page-hero--cover > *, .vonnik-values-band > *, .vonnik-cta-band > * { margin-left: 0 !important; margin-right: 0 !important; } body:has(.vonnik-page) .hero-section[data-type="type-1"] { margin-bottom: 0; } body:has(.vonnik-page) .hero-section[data-type="type-1"] .ct-breadcrumbs { margin-bottom: 0; border-bottom: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-section--keuzehulp > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .vonnik-page { padding-top: 0; } .vonnik-section { padding: var(--vonnik-space-7) 0; margin: 0; } .vonnik-section h2 { font-size: var(--vonnik-text-display); font-weight: var(--vonnik-weight-black); text-transform: uppercase; line-height: var(--vonnik-line-tight); letter-spacing: var(--vonnik-tracking-display); margin: 0 0 var(--vonnik-stack-m); } .vonnik-section__intro { font-size: var(--vonnik-text-l); line-height: var(--vonnik-line-prose); margin: 0 0 var(--vonnik-space-7); } .vonnik-section:has(> .vonnik-cards) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title cards" "intro cards" "rest cards"; grid-template-rows: auto auto 1fr; column-gap: var(--vonnik-space-6); } .vonnik-section:has(> .vonnik-cards) > .wp-block-heading { grid-area: title; } .vonnik-section:has(> .vonnik-cards) > .vonnik-section__intro { grid-area: intro; } .vonnik-section:has(> .vonnik-cards) > .vonnik-cards { grid-area: cards; } .vonnik-section:has(> .vonnik-cards) > .wp-block-buttons { grid-area: rest; align-self: start; } .vonnik-page-hero { padding-top: var(--vonnik-section); padding-bottom: var(--vonnik-section); margin-top: 0; margin-bottom: 0; gap: var(--vonnik-space-6); align-items: flex-start; } .vonnik-page-hero h1 { font-size: var(--vonnik-text-hero); font-weight: var(--vonnik-weight-black); text-transform: uppercase; line-height: var(--vonnik-line-tight); letter-spacing: var(--vonnik-tracking-display); margin: 0 0 var(--vonnik-space-6); } .vonnik-page-hero p { font-size: var(--vonnik-text-l); line-height: var(--vonnik-line-prose); margin: 0 0 var(--vonnik-space-5); } .vonnik-page-hero .wp-block-buttons { margin-top: var(--vonnik-space-7); } .vonnik-page-hero .wp-block-image { margin: 0; } .vonnik-page-hero .wp-block-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .vonnik-page-hero--plain { padding-top: var(--vonnik-space-9); padding-bottom: var(--vonnik-space-3); } .vonnik-page-hero--plain h1 { margin-bottom: var(--vonnik-space-4); } .vonnik-page-hero--plain p { max-width: 72ch; } .vonnik-page-hero--cover { position: relative; display: flex; flex-direction: column; justify-content: center; background-size: cover; background-position: center; color: var(--vonnik-on-action); min-height: 480px; } .vonnik-page-hero--cover::before { content: ""; position: absolute; inset: 0; background: var(--vonnik-overlay-strong); } .vonnik-page-hero--cover > * { position: relative; max-width: 564px; } .vonnik-page-hero--cover h1, .vonnik-page-hero--cover p { color: var(--vonnik-on-action); } .vonnik-section .wp-block-columns .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .vonnik-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vonnik-space-6); } .vonnik-card--icon, .vonnik-card--check { padding-top: calc(var(--vonnik-space-5) + var(--vonnik-space-8) + var(--vonnik-space-3)); } .vonnik-card--icon::before { content: ""; position: absolute; top: var(--vonnik-space-5); left: var(--vonnik-space-5); width: var(--vonnik-space-8); height: var(--vonnik-space-8); mask: var(--vonnik-icon-src) center / var(--vonnik-space-8) no-repeat; -webkit-mask: var(--vonnik-icon-src) center / var(--vonnik-space-8) no-repeat; background-color: var(--vonnik-blue); } .vonnik-card--check::before { content: ""; position: absolute; top: var(--vonnik-space-5); left: var(--vonnik-space-5); --vonnik-disc-size: var(--vonnik-space-8); width: var(--vonnik-disc-size); height: var(--vonnik-disc-size); border-radius: var(--vonnik-radius-round); background-color: var(--vonnik-blue); background-image: var(--vonnik-check); background-repeat: no-repeat; background-position: center; background-size: var(--vonnik-space-5); } .vonnik-card .wp-block-buttons { margin-top: var(--vonnik-space-4); } .vonnik-card--truck { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); } .vonnik-card--clock { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); } .vonnik-card--box { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E"); } .vonnik-card--phone { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E"); } .vonnik-card--mail { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); } .vonnik-card--pin { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } .vonnik-card--tool { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); } .vonnik-card--shield { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .vonnik-card--euro { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12'/%3E%3Cpath d='M4 14h9'/%3E%3Cpath d='M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2'/%3E%3C/svg%3E"); } .vonnik-card--ruler { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E"); } .vonnik-card--chat { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); } .vonnik-card--faq { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .vonnik-card--user { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } .vonnik-card--doc { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); } .vonnik-card--return { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); } .vonnik-card--sun { --vonnik-icon-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); } .vonnik-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vonnik-space-6); } .vonnik-tile { display: flex; flex-direction: column; color: inherit; text-decoration: none; } .vonnik-tile__title { font-size: var(--vonnik-text-xl); font-weight: var(--vonnik-weight-black); text-transform: uppercase; line-height: var(--vonnik-line-tight); margin: 0 0 var(--vonnik-stack-s); } .vonnik-tile__text { font-size: var(--vonnik-text-s); line-height: var(--vonnik-line-text); flex: 1 1 auto; margin: 0 0 var(--vonnik-space-5); } .vonnik-tile__cta { align-self: flex-start; } .vonnik-tile__cta::after { content: " →"; } .vonnik-tile:hover .vonnik-tile__cta { background: var(--vonnik-blue); color: var(--vonnik-on-action); } .vonnik-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vonnik-space-10); } .vonnik-step { text-align: center; position: relative; } .vonnik-step .vonnik-step__num { --vonnik-disc-size: var(--vonnik-space-10); margin: 0 auto var(--vonnik-space-3); background: var(--vonnik-grey-card); color: var(--vonnik-navy); font-size: 38px; font-weight: var(--vonnik-weight-black); line-height: var(--vonnik-line-tight); position: relative; z-index: var(--vonnik-layer-base); } .vonnik-step:not(:last-child)::after { content: ""; position: absolute; top: var(--vonnik-space-7); left: calc(50% + var(--vonnik-space-7)); width: 100%; height: 1px; background: var(--vonnik-border); } .vonnik-step h3 { font-size: var(--vonnik-text-xl); font-weight: var(--vonnik-weight-black); text-transform: uppercase; line-height: var(--vonnik-line-tight); margin: 0 0 var(--vonnik-stack-s); } .vonnik-step p { font-size: var(--vonnik-text-s); line-height: var(--vonnik-line-text); margin: 0; } .vonnik-faq-band { padding-top: var(--vonnik-section); padding-bottom: var(--vonnik-section); margin-top: var(--vonnik-space-7); margin-bottom: var(--vonnik-space-7); } .vonnik-faq-band .wp-block-columns { gap: var(--vonnik-space-6); } .vonnik-faq-band .wp-block-column:first-child { flex-basis: 30% !important; } .vonnik-faq-band .wp-block-column:last-child { flex-basis: 70% !important; } .vonnik-faq-band h2 { font-size: var(--vonnik-text-display); font-weight: var(--vonnik-weight-black); text-transform: uppercase; line-height: var(--vonnik-line-tight); letter-spacing: var(--vonnik-tracking-display); margin: 0 0 var(--vonnik-stack-m); } .vonnik-faq-band p { font-size: var(--vonnik-text-l); margin: 0 0 var(--vonnik-space-6); } .vonnik-faq details { background: var(--vonnik-surface); margin: 0 0 var(--vonnik-space-3); } .vonnik-faq details summary { list-style: none; cursor: pointer; padding: var(--vonnik-space-6) calc(var(--vonnik-space-6) * 2 + var(--vonnik-space-2)) var(--vonnik-space-6) var(--vonnik-space-6); font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-bold); text-transform: uppercase; letter-spacing: var(--vonnik-tracking-text); line-height: var(--vonnik-line-text); color: var(--vonnik-navy); position: relative; } .vonnik-faq details summary::-webkit-details-marker { display: none; } .vonnik-faq details summary::after { content: ""; position: absolute; right: var(--vonnik-space-5); top: 50%; width: var(--vonnik-space-5); height: var(--vonnik-space-5); margin-top: calc(var(--vonnik-space-5) / -2); mask: var(--lucide-chevron) center / var(--vonnik-space-5) no-repeat; -webkit-mask: var(--lucide-chevron) center / var(--vonnik-space-5) no-repeat; background-color: var(--vonnik-navy); transition: transform var(--vonnik-motion-fast); } .vonnik-faq details[open] summary::after { transform: rotate(180deg); } .vonnik-faq details > :not(summary) { padding: 0 var(--vonnik-space-6) var(--vonnik-space-6); font-size: var(--vonnik-text-l); line-height: var(--vonnik-line-prose); } .vonnik-faq details > p { margin: 0; } .vonnik-faq details > p + p { margin-top: var(--vonnik-space-3); } .vonnik-section.vonnik-faq { padding: var(--vonnik-space-6) var(--vonnik-space-4) var(--vonnik-space-4); } .vonnik-section.vonnik-faq details { background: var(--vonnik-surface); } .vonnik-media-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vonnik-space-6); } .vonnik-media-card .wp-block-buttons { margin-top: auto; } .vonnik-contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vonnik-space-6); } .vonnik-contact-cards .vonnik-card { padding: var(--vonnik-space-5) var(--vonnik-space-5) var(--vonnik-space-5) calc(var(--vonnik-space-7) + var(--vonnik-space-6) + var(--vonnik-space-7)); } .vonnik-contact-cards .vonnik-card--icon::before { top: var(--vonnik-space-7); left: var(--vonnik-space-7); width: var(--vonnik-space-6); height: var(--vonnik-space-6); mask-size: var(--vonnik-space-6); -webkit-mask-size: var(--vonnik-space-6); } .vonnik-contact-cards .vonnik-card p { font-size: var(--vonnik-text-s); } .vonnik-contact-cards .vonnik-card a { color: var(--vonnik-blue); font-weight: var(--vonnik-weight-bold); } .vonnik-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vonnik-space-6); padding: var(--vonnik-space-7) 0; } .vonnik-stat__value { display: block; font-size: var(--vonnik-text-title); font-weight: var(--vonnik-weight-black); line-height: var(--vonnik-line-tight); text-transform: uppercase; color: var(--vonnik-blue); margin: 0 0 var(--vonnik-space-2); } .vonnik-stat__label { display: block; font-size: var(--vonnik-text-s); } .vonnik-values-band { color: var(--vonnik-on-action); padding-top: var(--vonnik-section); padding-bottom: var(--vonnik-section); margin-top: var(--vonnik-space-7); margin-bottom: var(--vonnik-space-7); } .vonnik-values-band h2 { color: var(--vonnik-on-action); font-size: var(--vonnik-text-display); font-weight: var(--vonnik-weight-black); text-transform: uppercase; letter-spacing: var(--vonnik-tracking-display); margin: 0 0 var(--vonnik-gap-control); } .vonnik-values-band > p { color: var(--vonnik-on-action); font-size: var(--vonnik-text-l); margin: 0 0 var(--vonnik-space-7); } .vonnik-values-band .vonnik-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vonnik-values-band .vonnik-card { background: var(--vonnik-blue); box-shadow: none; color: var(--vonnik-on-action); } .vonnik-values-band .vonnik-card h3 { color: var(--vonnik-on-action); font-size: var(--vonnik-text-xl); } .vonnik-values-band .vonnik-card p { color: var(--vonnik-on-action); } .vonnik-values-band .vonnik-card--icon::before { background-color: var(--vonnik-on-action); } .vonnik-cta-band { padding-top: var(--vonnik-section); padding-bottom: var(--vonnik-section); margin-top: var(--vonnik-space-7); margin-bottom: var(--vonnik-space-7); color: var(--vonnik-on-action); } .vonnik-cta-band h2 { color: var(--vonnik-on-action); font-size: var(--vonnik-text-display); font-weight: var(--vonnik-weight-black); text-transform: uppercase; letter-spacing: var(--vonnik-tracking-display); margin: 0 0 var(--vonnik-stack-s); } .vonnik-cta-band p { color: var(--vonnik-on-action); margin: 0 0 var(--vonnik-space-6); max-width: 60ch; font-size: var(--vonnik-text-l); } .vonnik-legal > * { margin-left: 0 !important; } .vonnik-legal .vonnik-section { max-width: 78ch; padding: var(--vonnik-space-5) 0; } .vonnik-legal .vonnik-section > .wp-block-heading { font-size: var(--vonnik-text-xxl); margin: 0 0 var(--vonnik-stack-s); } .vonnik-legal p, .vonnik-legal li { font-size: var(--vonnik-text-l); line-height: var(--vonnik-line-prose); } .vonnik-toc { margin: 0 0 var(--vonnik-stack-m); max-width: 78ch; } .vonnik-toc li { margin: var(--vonnik-space-1) 0; } .vonnik-note { margin: 0 0 var(--vonnik-space-6); } .vonnik-downloads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vonnik-space-6); } .vonnik-downloads li { margin: 0; } .vonnik-downloads a { display: flex; flex-direction: column; gap: var(--vonnik-space-1); padding-left: calc(var(--vonnik-space-5) + var(--vonnik-icon) + var(--vonnik-space-5)); color: inherit; text-decoration: none; position: relative; } .vonnik-downloads a::before { content: ""; position: absolute; top: var(--vonnik-space-5); left: var(--vonnik-space-5); width: var(--vonnik-icon); height: var(--vonnik-icon); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E") center / var(--vonnik-icon) no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E") center / var(--vonnik-icon) no-repeat; background-color: var(--vonnik-blue); } .vonnik-downloads__title { font-size: var(--vonnik-text-xl); font-weight: var(--vonnik-weight-black); text-transform: uppercase; line-height: var(--vonnik-line-tight); } .vonnik-downloads__meta { font-size: var(--vonnik-text-s); } .vonnik-downloads a:hover .vonnik-downloads__title { color: var(--vonnik-blue); } @media (max-width: 999.98px) { .vonnik-section:has(> .vonnik-cards) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "intro" "cards" "rest"; grid-template-rows: auto; } .vonnik-tiles, .vonnik-steps, .vonnik-stats, .vonnik-values-band .vonnik-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vonnik-steps { gap: var(--vonnik-space-8); } .vonnik-step:nth-child(2)::after { display: none; } .vonnik-media-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vonnik-page-hero--cover { min-height: 400px; } } @media (max-width: 689.98px) { .vonnik-page-hero h1 { margin-bottom: var(--vonnik-gap-control); } .vonnik-section { padding: var(--vonnik-space-5) 0; } .vonnik-cards, .vonnik-tiles, .vonnik-contact-cards, .vonnik-media-cards, .vonnik-steps, .vonnik-downloads, .vonnik-values-band .vonnik-cards { grid-template-columns: minmax(0, 1fr); } .vonnik-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vonnik-steps { gap: var(--vonnik-space-6); } .vonnik-step::after { display: none !important; } .vonnik-step { display: grid; grid-template-columns: var(--vonnik-space-10) 1fr; gap: 0 var(--vonnik-space-5); text-align: left; } .vonnik-step__num { margin: 0; grid-row: 1 / 3; } .vonnik-faq details summary, .vonnik-section.vonnik-faq details summary { padding: var(--vonnik-space-6) var(--vonnik-space-10) var(--vonnik-space-6) var(--vonnik-space-6); } .vonnik-faq details summary::after { right: var(--vonnik-space-6); } .vonnik-page-hero--cover { min-height: 320px; } .vonnik-cta-band .wp-block-buttons .wp-block-button, .vonnik-cta-band .wp-block-buttons .wp-block-button__link, .vonnik-cta-band .button { width: 100%; } } .vonnik-404 { padding: calc(var(--vonnik-space-10) * 2) var(--vonnik-space-6) calc(var(--vonnik-space-10) * 2.5); } .vonnik-404__inner { margin: 0 auto; background: var(--vonnik-surface); padding: var(--vonnik-space-9); text-align: center; max-width: 640px; } .vonnik-404__inner h1 { font-size: var(--vonnik-text-display); font-weight: var(--vonnik-weight-black); text-transform: uppercase; letter-spacing: var(--vonnik-tracking-display); margin: 0 0 var(--vonnik-gap-control); } .vonnik-404__inner > p { margin: 0 0 var(--vonnik-space-7); } .vonnik-404__search { display: flex; gap: 0; margin: 0 0 var(--vonnik-space-6); } .vonnik-404__search input[type="search"] { flex: 1 1 auto; } .vonnik-404__actions { display: flex; flex-wrap: wrap; gap: var(--vonnik-space-4); justify-content: center; margin: 0 0 var(--vonnik-space-7); } .vonnik-404__catlabel { margin: 0 0 var(--vonnik-stack-s); } .vonnik-404__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--vonnik-space-2) var(--vonnik-space-5); justify-content: center; font-size: var(--vonnik-text-m); } @media (max-width: 689.98px) { .vonnik-404 { padding: var(--vonnik-space-9) var(--vonnik-space-5) var(--vonnik-space-10); } .vonnik-404__inner { padding: var(--vonnik-space-7) var(--vonnik-space-5); } } .vonnik-gids .vonnik-gids-kort { background: var(--vonnik-grey-card); border-radius: var(--vonnik-radius); padding: var(--vonnik-card-pad); box-shadow: var(--vonnik-card-shadow); } .vonnik-gids h2 { margin-top: var(--vonnik-space-9); } .vonnik-maatform { margin: var(--vonnik-space-6) 0; } .vonnik-maatform__kop { font-weight: var(--vonnik-weight-bold); margin: 0 0 var(--vonnik-space-5); } .vonnik-maatform__velden { display: flex; flex-wrap: wrap; gap: var(--vonnik-space-4); align-items: flex-end; } .vonnik-maatform__velden label { display: flex; flex-direction: column; gap: var(--vonnik-space-2); font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-bold); flex: 1; min-width: 130px; } .vonnik-maatform__velden label:first-child { flex: 0 0 160px; } .vonnik-maatform__velden input, .vonnik-maatform__velden select { width: 100%; } .vonnik-maatform__velden button { flex: 0 0 auto; padding-top: var(--vonnik-space-4); padding-bottom: var(--vonnik-space-4); } .vonnik-maatform__gerust { font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); margin: var(--vonnik-space-4) 0 0; } .vonnik-gids-snel { font-size: var(--vonnik-text-s); } .vonnik-gids-snel a { margin-right: var(--vonnik-space-5); } .vonnik-gids-sectie { padding: var(--vonnik-space-3) 0; } .vonnik-gids-sectie--alt { background: var(--vonnik-grey-card); border-radius: var(--vonnik-radius); padding: var(--vonnik-card-pad); box-shadow: var(--vonnik-card-shadow); } .vonnik-gids-sectie a { font-weight: var(--vonnik-weight-bold); } .vonnik-gids-faq { margin-top: var(--vonnik-space-9); } .vonnik-gids-rail { margin-top: var(--vonnik-space-9); } .vonnik-gids-feedback { margin-top: var(--vonnik-space-10); font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); display: flex; flex-wrap: wrap; gap: var(--vonnik-space-4); align-items: center; } .vonnik-gids-feedback button { font-size: var(--vonnik-text-s); padding: var(--vonnik-space-1) var(--vonnik-space-5); border: var(--vonnik-border-hairline) solid var(--vonnik-border); border-radius: var(--vonnik-radius); background: transparent; cursor: pointer; } .vonnik-gids-feedback__vorm { display: flex; gap: var(--vonnik-space-3); width: 100%; } .vonnik-gids-feedback__vorm textarea { flex: 1; max-width: 420px; } .vonnik-vakman { display: flex; gap: var(--vonnik-stack-m); align-items: center; margin-top: var(--vonnik-space-8); } .vonnik-vakman__foto { width: var(--vonnik-control-thumb); height: var(--vonnik-control-thumb); border-radius: var(--vonnik-radius-round); object-fit: cover; } .vonnik-vakman__naam { font-weight: var(--vonnik-weight-bold); margin: 0; } .vonnik-vakman p { margin: 0; font-size: var(--vonnik-text-s); } @media (max-width: 689.98px) { .vonnik-maatform__velden { flex-direction: column; align-items: stretch; } .vonnik-maatform__velden input, .vonnik-maatform__velden select { width: 100%; } } .vonnik-maatform [hidden], .vonnik-gids-feedback [hidden] { display: none !important; } .vonnik-gids-hero { align-items: center; margin-bottom: var(--vonnik-space-3); } .vonnik-gids-hero img { border-radius: 10px; } .vonnik-gids .vonnik-gids-kort { margin-top: var(--vonnik-space-1); } .vonnik-maatform__velden select { appearance: none; background-image: var(--lucide-chevron-navy); background-repeat: no-repeat; background-position: right var(--vonnik-space-4) center; background-size: var(--vonnik-space-5); padding-right: var(--vonnik-space-9); }