/*
* Kistlabel stylesheet.
*
* Rewritten for the 2026 codebase: responsive, no absolutely positioned
* fixed-height layout, no external font requests (the old page pulled Archivo
* Black from fonts.googleapis.com, which sent every visitor's IP to Google).
* The flightcase-label look of the original is kept - heavy black rules, orange
* accent, uppercase stencil-style labels.
*/
:root {
/* Vaste kleuren. --wit en --zwart zijn ook de "chrome": de header, footer en
tabelkop zijn in beide thema's donker met witte tekst. */
--oranje: #ff6100;
--oranje-donker: #cc4e00;
--zwart: #101010;
--grijs-900: #1d1d1d;
--grijs-600: #5a5a5a;
--grijs-300: #d5d5d5;
--grijs-100: #f4f4f4;
--wit: #ffffff;
--rood: #b3261e;
--groen: #1b5e20;
/* Semantische kleuren: dit zijn de enige die per thema wisselen. De
lichtwaarden hieronder houden het lichte thema exact zoals het was. */
--paginakleur: var(--grijs-100);
--vlak: var(--wit);
--vlak-rand: var(--grijs-300);
--inkt: var(--zwart);
--inkt-zwak: var(--grijs-600);
--sterke-rand: var(--zwart);
--zebra: var(--grijs-100);
--readonly-bg: var(--grijs-100);
--link: var(--oranje-donker);
--rand: 2px solid var(--sterke-rand);
--radius: 2px;
/* Iets ruimere hoek voor de marketingvlakken. Het label zelf blijft hoekig -
dat is de vorm van een echt kistlabel - maar kaarten en panelen mogen wat
vriendelijker staan. */
--radius-groot: 10px;
--schaduw: 0 1px 2px rgba(16, 16, 16, 0.06), 0 8px 24px rgba(16, 16, 16, 0.07);
--schaduw-op: 0 2px 4px rgba(16, 16, 16, 0.08), 0 14px 32px rgba(16, 16, 16, 0.12);
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Laat de browser zijn eigen widgets (checkbox, keuzelijst, scrollbar) mee
laten kleuren; wordt in het donkere thema op dark gezet. */
color-scheme: light;
}
/*
* Donker thema. Volgt standaard de systeeminstelling; de schakelaar in de
* menubalk zet data-theme op en overschrijft dat. De :not() zorgt dat
* een expliciete keuze voor "licht" het systeem-donker wint.
*/
@media (prefers-color-scheme: dark) {
:root:not([data-theme="licht"]) {
--paginakleur: #14171a;
--vlak: #1f2428;
--vlak-rand: #3a4148;
--inkt: #e8eaed;
--inkt-zwak: #a3abb2;
--sterke-rand: #6b7681;
--zebra: #262c31;
--readonly-bg: #2a3035;
--link: #ff8a3d;
--rood: #ff6b60;
--groen: #6cd07a;
/* Op een donkere achtergrond doet een zachte grijze schaduw niets; deze
is dieper zodat een kaart nog los van de pagina komt. */
--schaduw: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
--schaduw-op: 0 2px 4px rgba(0, 0, 0, 0.45), 0 14px 32px rgba(0, 0, 0, 0.5);
color-scheme: dark;
}
}
:root[data-theme="donker"] {
--paginakleur: #14171a;
--vlak: #1f2428;
--vlak-rand: #3a4148;
--inkt: #e8eaed;
--inkt-zwak: #a3abb2;
--sterke-rand: #6b7681;
--zebra: #262c31;
--readonly-bg: #2a3035;
--link: #ff8a3d;
--rood: #ff6b60;
--groen: #6cd07a;
--schaduw: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
--schaduw-op: 0 2px 4px rgba(0, 0, 0, 0.45), 0 14px 32px rgba(0, 0, 0, 0.5);
color-scheme: dark;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: var(--font);
font-size: 16px;
line-height: 1.5;
color: var(--inkt);
background: var(--paginakleur);
}
h1, h2, h3 {
line-height: 1.2;
margin: 0 0 0.5em;
}
h1 {
font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}
a {
color: var(--link);
}
a:hover,
a:focus-visible {
color: var(--inkt);
}
:focus-visible {
outline: 3px solid var(--oranje);
outline-offset: 2px;
}
img {
max-width: 100%;
height: auto;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--zwart);
color: var(--wit);
padding: 0.75rem 1rem;
z-index: 100;
}
.skip-link:focus {
left: 0;
}
.visueel-verborgen {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* ---------- Header ---------- */
/* Blijft in beeld tijdens het scrollen: op een lange artikelpagina is de weg
terug anders een halve pagina omhoog. */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--zwart);
border-bottom: 3px solid var(--oranje);
box-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}
.site-header__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.6rem 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.site-header__brand {
display: inline-flex;
align-items: center;
}
/* De maten staan als attribuut op de ![]()
: een SVG met alleen een viewBox
heeft wel een verhouding maar geen eigen formaat, en `width: auto` laat hem
dan in een flexcontainer inklappen. Hier alleen nog meeschalen. */
.site-header__brand img {
max-width: 100%;
height: auto;
}
.site-nav {
margin-left: auto;
}
.site-nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 1.25rem;
margin: 0;
padding: 0;
}
.site-nav a,
.site-nav .linkbutton {
display: inline-block;
padding: 0.35rem 0;
color: var(--wit);
text-decoration: none;
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
/* De streep is er altijd, maar doorzichtig: hoveren verschuift de tekst dan
niet en de regelhoogte blijft over de hele balk gelijk. */
border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav .linkbutton:hover {
color: var(--oranje);
border-bottom-color: var(--oranje);
}
.site-nav a.is-actief {
color: var(--oranje);
border-bottom-color: var(--oranje);
}
/* De inlogknop in de balk is een knop en geen menu-item: hij houdt zijn eigen
kleur en krijgt dus geen onderstreping mee. */
.site-nav a.knop,
.site-nav a.knop:hover {
/* .site-nav a is specifieker dan .knop, dus de padding moet hier terug. */
padding: 0.4rem 0.9rem;
color: var(--wit);
border-bottom-color: transparent;
text-transform: none;
letter-spacing: 0.02em;
}
/* De taalknop is uitgelogd een link naar het andere domein en ingelogd een
knop in een formulier. Als link vangt .site-nav a hem af - dat is specifieker
- dus zijn eigen maatvoering moet hier terug; het oranje randje hoort om de
vlag en niet onder de link. */
.site-nav a.taal-schakelaar,
.site-nav a.taal-schakelaar:hover,
.site-nav a.taal-schakelaar:focus-visible {
display: inline-flex;
padding: 0.3rem;
border-bottom-color: transparent;
}
.site-nav form {
margin: 0;
}
/* Uitklapmenu met de beheerpagina's. Een zodat het ook zonder
JavaScript open en dicht gaat; hoveren opent hem alvast op de muisbalk. */
.site-nav__submenu {
position: relative;
}
.site-nav__submenu summary {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0;
color: var(--wit);
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
/* Het standaard driehoekje weg; hieronder komt een eigen pijltje. */
list-style: none;
border-bottom: 2px solid transparent;
}
.site-nav__submenu summary::-webkit-details-marker {
display: none;
}
.site-nav__submenu summary::after {
content: "";
width: 0.4rem;
height: 0.4rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-0.12rem) rotate(45deg);
}
.site-nav__submenu[open] summary::after {
transform: translateY(0.1rem) rotate(-135deg);
}
.site-nav__submenu summary:hover,
.site-nav__submenu summary:focus-visible,
.site-nav__submenu summary.is-actief {
color: var(--oranje);
border-bottom-color: var(--oranje);
}
.site-nav__submenu ul {
position: absolute;
top: 100%;
right: 0;
z-index: 60;
flex-direction: column;
align-items: stretch;
gap: 0;
min-width: 13rem;
padding: 0.3rem 0;
background: var(--zwart);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-groot);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.site-nav__submenu ul a {
display: block;
padding: 0.5rem 1rem;
border-bottom: 0;
}
.site-nav__submenu ul a:hover,
.site-nav__submenu ul a:focus-visible,
.site-nav__submenu ul a.is-actief {
background: rgba(255, 255, 255, 0.1);
border-bottom-color: transparent;
}
/* Thema-schakelaar in de menubalk. Zonder JavaScript verborgen: dan volgt de
site de systeeminstelling en heeft een knop die niets doet geen zin. */
.thema-schakelaar {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.3rem;
background: none;
border: 0;
color: var(--wit);
cursor: pointer;
line-height: 0;
}
.thema-schakelaar:hover,
.thema-schakelaar:focus-visible {
color: var(--oranje);
}
.thema-schakelaar svg {
width: 22px;
height: 22px;
fill: currentColor;
}
/* Taalknop in de menubalk: alleen de vlag van de taal waar je naartoe schakelt.
Een dun randje houdt de witte baan van beide vlaggen zichtbaar op de donkere
balk. */
.taal-schakelaar {
display: inline-flex;
align-items: center;
padding: 0.3rem;
background: none;
border: 0;
cursor: pointer;
line-height: 0;
}
.taal-schakelaar .vlag {
width: 26px;
height: auto;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 2px;
}
.taal-schakelaar:hover .vlag,
.taal-schakelaar:focus-visible .vlag {
border-color: var(--oranje);
}
/* Toon het pictogram dat past bij het actieve thema: maan in licht (klik = naar
donker), zon in donker. Spiegelt exact de kleurlogica hierboven. */
.thema-schakelaar__zon {
display: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="licht"]) .thema-schakelaar__zon {
display: inline;
}
:root:not([data-theme="licht"]) .thema-schakelaar__maan {
display: none;
}
}
:root[data-theme="donker"] .thema-schakelaar__zon {
display: inline;
}
:root[data-theme="donker"] .thema-schakelaar__maan {
display: none;
}
:root[data-theme="licht"] .thema-schakelaar__zon {
display: none;
}
:root[data-theme="licht"] .thema-schakelaar__maan {
display: inline;
}
/* Menu toggle: pure CSS, no JavaScript required. */
.menu-toggle__button {
display: none;
margin-left: auto;
padding: 0.5rem;
cursor: pointer;
}
.menu-toggle__button span {
display: block;
width: 26px;
height: 3px;
margin: 5px 0;
background: var(--wit);
}
@media (max-width: 760px) {
.menu-toggle__button {
display: block;
}
.site-nav {
flex-basis: 100%;
display: none;
}
.menu-toggle:checked ~ .site-nav {
display: block;
}
.site-nav ul {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
padding-bottom: 0.75rem;
}
/* In het uitgeklapte mobiele menu is een zwevend paneel onhandig: de
beheerpagina's schuiven gewoon ingesprongen onder Instellingen. */
.site-nav__submenu,
.site-nav__submenu details {
width: 100%;
}
.site-nav__submenu ul {
position: static;
min-width: 0;
padding: 0.25rem 0 0 0.9rem;
gap: 0.5rem;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
.site-nav__submenu ul a {
padding: 0.35rem 0;
}
.site-nav__submenu ul a:hover,
.site-nav__submenu ul a:focus-visible,
.site-nav__submenu ul a.is-actief {
background: none;
}
}
/* ---------- Main ---------- */
.site-main {
flex: 1 0 auto;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
}
.site-footer {
background: var(--zwart);
color: var(--wit);
border-top: 3px solid var(--oranje);
}
.site-footer__inner {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem 1.5rem;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 2rem;
}
.site-footer__merk p,
.site-footer__kolom p {
margin: 0.75rem 0 0;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.72);
max-width: 34ch;
}
.site-footer__kolom h2 {
margin: 0 0 0.5rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.55);
}
.site-footer__kolom ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.4rem;
font-size: 0.9rem;
}
.site-footer__balk {
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer__balk p {
max-width: 1200px;
margin: 0 auto;
padding: 0.9rem 1rem;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
}
.site-footer a {
color: var(--wit);
text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
color: var(--oranje);
text-decoration: underline;
}
@media (max-width: 760px) {
.site-footer__inner {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* ---------- Meldingen ---------- */
.meldingen {
margin-bottom: 1.5rem;
}
.melding {
margin: 0 0 0.75rem;
padding: 0.75rem 1rem;
border-left: 6px solid;
background: var(--vlak);
color: var(--inkt);
border-radius: var(--radius);
}
.melding--error {
border-color: var(--rood);
color: var(--rood);
}
.melding--success {
border-color: var(--groen);
color: var(--groen);
}
.melding--info {
border-color: var(--oranje);
color: inherit;
}
/* ---------- Panelen ---------- */
.paneel {
background: var(--vlak);
border: var(--rand);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--schaduw);
}
.paneel--smal {
max-width: 640px;
}
.paneel__kop {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.paneel__kop h1 {
margin: 0;
}
/* ---------- Knoppen ---------- */
.knop {
display: inline-block;
padding: 0.6rem 1.1rem;
background: var(--oranje);
color: var(--wit);
border: 2px solid var(--oranje);
border-radius: var(--radius);
font: inherit;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
.knop:hover,
.knop:focus-visible {
background: var(--oranje-donker);
border-color: var(--oranje-donker);
color: var(--wit);
}
.knop--secundair {
background: transparent;
color: var(--inkt);
border-color: var(--inkt);
}
.knop--secundair:hover,
.knop--secundair:focus-visible {
background: var(--inkt);
color: var(--vlak);
border-color: var(--inkt);
}
/* A button that has to look like a link, because the action must be a POST. */
.linkbutton {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--link);
text-decoration: underline;
cursor: pointer;
}
.linkbutton--gevaar {
color: var(--rood);
}
/* ---------- Formulieren ---------- */
.formulier {
max-width: 680px;
}
.veld {
margin-bottom: 1.1rem;
}
.veld-rij {
display: flex;
flex-wrap: wrap;
gap: 0 1.25rem;
}
.veld-rij .veld {
flex: 1 1 220px;
}
.veld label,
.veldlabel {
display: block;
font-weight: 700;
margin-bottom: 0.3rem;
}
.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld input[type="password"],
.veld input[type="file"],
.veld select,
.veld textarea {
width: 100%;
padding: 0.55rem 0.7rem;
font: inherit;
color: inherit;
background: var(--vlak);
border: 2px solid var(--vlak-rand);
border-radius: var(--radius);
}
.veld input:focus,
.veld select:focus,
.veld textarea:focus {
border-color: var(--inkt);
}
.veld input[readonly] {
background: var(--readonly-bg);
color: var(--inkt-zwak);
}
.veld textarea {
resize: vertical;
min-height: 8rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.veldhulp {
margin: 0.3rem 0 0;
font-size: 0.85rem;
color: var(--inkt-zwak);
}
.veldfout {
margin: 0.3rem 0 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--rood);
}
.veldgroep {
border: 2px solid var(--vlak-rand);
border-radius: var(--radius);
padding: 1rem 1rem 0.25rem;
margin: 0 0 1.25rem;
}
.veldgroep legend {
font-weight: 700;
padding: 0 0.4rem;
}
.veld--acties {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.logo-voorbeeld {
max-width: 220px;
/* Het bestand heeft altijd de verhouding van het label-doek; de
width/height-attributen voorkomen dat de pagina verspringt tijdens het
laden, height:auto laat het schalen. */
height: auto;
border: 2px solid var(--grijs-300);
background: var(--wit);
padding: 0.5rem;
}
/* Radiokeuze op één regel; .veld label is verder een vet blok. */
.veld .keuze {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.35rem;
font-weight: 400;
}
.logo-doek {
display: block;
width: 100%;
max-width: 288px;
height: auto;
border: 2px dashed var(--grijs-300);
background: var(--wit);
}
/* ---------- Zammad-contactformulier ---------- */
/* De ZammadForm-plugin draait met noCSS: true, dus wij geven het formulier het
uiterlijk van de rest van de site. De plugin bouwt zijn eigen markup, vandaar
dat we hier op elementen binnen de container mikken in plaats van op klassen. */
#zammad-feedback-form {
max-width: 680px;
}
#zammad-feedback-form label {
display: block;
font-weight: 700;
margin-bottom: 0.3rem;
}
#zammad-feedback-form input,
#zammad-feedback-form textarea,
#zammad-feedback-form select {
width: 100%;
padding: 0.55rem 0.7rem;
margin-bottom: 1.1rem;
font: inherit;
color: inherit;
background: var(--vlak);
border: 2px solid var(--vlak-rand);
border-radius: var(--radius);
}
#zammad-feedback-form input:focus,
#zammad-feedback-form textarea:focus,
#zammad-feedback-form select:focus {
border-color: var(--inkt);
}
#zammad-feedback-form textarea {
min-height: 8rem;
resize: vertical;
}
#zammad-feedback-form [type="submit"],
#zammad-feedback-form button {
display: inline-block;
padding: 0.6rem 1.1rem;
background: var(--oranje);
color: var(--wit);
border: 2px solid var(--oranje);
border-radius: var(--radius);
font: inherit;
font-weight: 700;
cursor: pointer;
}
#zammad-feedback-form [type="submit"]:hover,
#zammad-feedback-form button:hover,
#zammad-feedback-form [type="submit"]:focus-visible,
#zammad-feedback-form button:focus-visible {
background: var(--oranje-donker);
border-color: var(--oranje-donker);
}
/* Zammad markeert foutvelden en toont een bedankboodschap. */
#zammad-feedback-form .has-error input,
#zammad-feedback-form .has-error textarea {
border-color: var(--rood);
}
#zammad-feedback-form .zammad-form-group .help-block,
#zammad-feedback-form .has-error .help-inline {
color: var(--rood);
font-size: 0.875rem;
font-weight: 600;
}
#zammad-feedback-form .zammad-form-thankyou {
font-weight: 600;
}
/* ---------- Tabellen ---------- */
.tabel-scroll {
overflow-x: auto;
}
.overzicht {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.overzicht th,
.overzicht td {
text-align: left;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--vlak-rand);
vertical-align: top;
}
.overzicht thead th {
background: var(--zwart);
color: var(--wit);
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.05em;
border-bottom: 0;
}
.overzicht tbody tr:nth-child(even) {
background: var(--zebra);
}
.overzicht .acties {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1rem;
align-items: center;
}
.overzicht .acties form {
margin: 0;
}
/* De tarieven op /abonnementen: één regel met een bedrag per plan. */
.prijzen {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 1rem;
margin-bottom: 1.5rem;
}
.prijzen .veld {
margin-bottom: 0;
}
.prijzen__bedrag {
display: flex;
align-items: center;
gap: 0.35rem;
}
.prijzen .veld input[type="text"] {
width: 7rem;
}
/* Formuliervelden in een overzichtstabel (abonnementen) krijgen dezelfde
opmaak als die in .veld, maar op tekstbreedte in plaats van vol. */
.overzicht select,
.overzicht input[type="number"] {
padding: 0.35rem 0.5rem;
font: inherit;
color: inherit;
background: var(--vlak);
border: 2px solid var(--vlak-rand);
border-radius: var(--radius);
}
.overzicht input[type="number"] {
width: 5rem;
}
.nowrap {
white-space: nowrap;
}
.nowrap a + a {
margin-left: 0.75rem;
}
.badge {
display: inline-block;
margin-left: 0.5rem;
padding: 0.1rem 0.45rem;
background: var(--grijs-900);
color: var(--wit);
border-radius: var(--radius);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ---------- Het kistlabel op de homepage ---------- */
.label-card {
background: var(--vlak);
border: var(--rand);
border-radius: var(--radius);
padding: 1.25rem;
max-width: 900px;
margin: 0 auto;
}
.label-card__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding-bottom: 1rem;
}
.label-card__intro h1 {
margin: 0;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.label-card__intro p {
margin: 0.25rem 0 0;
color: var(--inkt-zwak);
}
.label-card__logo {
max-width: 200px;
height: auto;
}
.label-card__grid {
border: var(--rand);
}
.label-cell {
border-bottom: 2px solid var(--sterke-rand);
padding: 0.5rem 0.9rem 1rem;
}
.label-cell:last-child {
border-bottom: 0;
}
.label-cell__title {
margin: 0 0 0.35rem;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.label-cell__heading {
margin: 0 0 0.4rem;
font-size: 1.25rem;
}
.label-cell p {
margin: 0 0 0.75rem;
}
.label-minicells {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-bottom: 2px solid var(--sterke-rand);
}
.label-cell--mini {
border-bottom: 0;
border-right: 2px solid var(--sterke-rand);
min-height: 3.25rem;
}
.label-cell--mini:nth-child(2n) {
border-right: 0;
}
.label-cell--mini:nth-child(-n + 2) {
border-bottom: 2px solid var(--sterke-rand);
}
@media (min-width: 640px) {
.label-minicells {
grid-template-columns: repeat(4, 1fr);
}
.label-cell--mini:nth-child(2n) {
border-right: 2px solid var(--sterke-rand);
}
.label-cell--mini:nth-child(-n + 2) {
border-bottom: 0;
}
.label-cell--mini:last-child {
border-right: 0;
}
}
@media print {
.site-header,
.site-footer,
.knop,
.acties {
display: none;
}
body {
background: var(--wit);
}
}
/* --- Labelopmaak-editor ------------------------------------------------- */
.opmaak-balk {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.opmaak-balk__status {
margin: 0;
color: var(--inkt-zwak);
}
.opmaak {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr);
gap: 1rem;
align-items: start;
}
/* Het doek heeft exact de verhouding van het papier; de hoogte zet het script. */
.opmaak__doek {
position: relative;
background: var(--wit);
border: var(--rand);
overflow: hidden;
touch-action: none;
cursor: default;
}
.opmaak__zonder-js {
padding: 1rem;
color: var(--zwart);
}
.opmaak__zijkant h2 {
margin-top: 0;
}
.opmaak__acties {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.opmaak__eigenschappen .veld {
display: grid;
grid-template-columns: 7rem minmax(0, 1fr);
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.opmaak__opslaan {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.opmaak__formulier {
margin: 0;
}
/* De blokjes op het doek staan altijd op wit papier, dus vaste kleuren: die
mogen niet met het donkere thema meebewegen. */
.opmaak-blok {
position: absolute;
box-sizing: border-box;
border: 1px dashed #9aa4ad;
color: #101010;
font-family: Carlito, Calibri, sans-serif;
line-height: 1;
white-space: nowrap;
overflow: hidden;
cursor: move;
}
.opmaak-blok--box {
border-style: solid;
border-color: #101010;
}
.opmaak-blok--logo,
.opmaak-blok--qr,
.opmaak-blok--contents {
background: rgba(255, 97, 0, 0.12);
font-size: 0.7rem;
color: #6b3300;
}
.veld--kolommen {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.veld--kolommen > span:first-child {
flex: 1 0 100%;
font-weight: 700;
margin-bottom: 0.1rem;
}
.veld--kolommen input {
width: 4.5rem;
padding: 0.4rem 0.5rem;
font: inherit;
color: inherit;
background: var(--vlak);
border: 2px solid var(--vlak-rand);
border-radius: var(--radius);
}
.veld--kolommen .knop {
padding: 0.35rem 0.7rem;
}
.veld--randen > span:first-child {
display: block;
font-weight: 700;
margin-bottom: 0.3rem;
}
.veld--randen__zijden {
display: flex;
flex-wrap: wrap;
gap: 0.2rem 0.9rem;
}
.veld--randen label {
display: flex;
align-items: center;
gap: 0.3rem;
margin: 0;
font-weight: 400;
}
.opmaak-blok.is-geselecteerd {
outline: 2px solid var(--oranje);
outline-offset: 1px;
}
.opmaak-blok:focus-visible {
outline: 2px solid var(--oranje);
}
.opmaak-blok__greep {
position: absolute;
right: -4px;
bottom: -4px;
width: 9px;
height: 9px;
background: var(--oranje);
cursor: nwse-resize;
}
@media (max-width: 60rem) {
.opmaak {
grid-template-columns: minmax(0, 1fr);
}
}
/* --- Kistformulier met labelvoorbeeld ------------------------------------ */
.kistvorm {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
}
.kistvorm--met-voorbeeld {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.kistvorm .formulier {
max-width: none;
}
/* Het label blijft in beeld terwijl er in het formulier gescrold wordt. */
.labelvoorbeeld {
position: sticky;
top: 1rem;
}
.labelvoorbeeld__kop {
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
/* Het doek heeft de verhouding van het papier; de hoogte zet het script. */
.labelvoorbeeld__doek {
position: relative;
background: var(--wit);
border: var(--rand);
overflow: hidden;
}
.labelvoorbeeld__zonder-js {
padding: 1rem;
color: var(--zwart);
}
/* Alles op het doek staat op wit papier, dus vaste kleuren: die mogen niet met
het donkere thema meebewegen. */
.labelvoorbeeld-blok {
position: absolute;
box-sizing: border-box;
color: #101010;
font-family: Carlito, Calibri, sans-serif;
line-height: 1;
white-space: nowrap;
overflow: hidden;
}
/* Breedte en kleur staan hier, welke zijden er zijn zet het script. */
.labelvoorbeeld-blok--kader {
border: 1px none #101010;
}
.labelvoorbeeld-blok--afbeelding {
object-fit: fill;
}
@media (max-width: 60rem) {
.kistvorm--met-voorbeeld {
grid-template-columns: minmax(0, 1fr);
}
.labelvoorbeeld {
position: static;
}
}
/* ---------- Marketingpagina's ------------------------------------------- */
/*
* De onderdelen hieronder zijn nieuw voor de publieke kant: startpagina,
* functiepagina en artikelen. Ze gebruiken dezelfde kleuren en dezelfde
* schreefloze letter als de rest van de applicatie, alleen met meer lucht en
* zachtere vlakken. Het kistlabel op de startpagina houdt zijn harde zwarte
* kaders - dat is het handelsmerk en dat blijft.
*/
.eyebrow {
margin: 0 0 0.6rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--oranje-donker);
}
:root[data-theme="donker"] .eyebrow,
.site-footer .eyebrow {
color: var(--oranje);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="licht"]) .eyebrow {
color: var(--oranje);
}
}
/* ---- Hero ---- */
.hero {
display: grid;
grid-template-columns: 1.05fr 1fr;
align-items: center;
gap: 3rem;
padding: 1rem 0 3rem;
}
.hero h1 {
/* Iets groter en strakker gezet dan de standaard h1: dit is de enige regel
op de pagina die de bezoeker echt moet lezen. */
font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.hero__intro {
margin: 0 0 1.5rem;
font-size: 1.1rem;
color: var(--inkt-zwak);
max-width: 46ch;
}
.hero__acties {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 0 0 1.5rem;
}
/* Opsomming met een oranje vinkje in plaats van een bolletje. */
.punten {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
font-size: 0.95rem;
}
.punten li {
position: relative;
padding-left: 1.75rem;
}
.punten li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 0.7rem;
height: 0.4rem;
border-left: 2px solid var(--oranje);
border-bottom: 2px solid var(--oranje);
transform: rotate(-45deg);
}
.hero .label-card {
margin: 0;
box-shadow: var(--schaduw-op);
/* Heel licht gekanteld, zoals een label dat op tafel ligt. */
transform: rotate(-1.2deg);
}
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
gap: 2rem;
padding-bottom: 2rem;
}
.hero .label-card {
transform: none;
}
}
/* ---- Paginakop (functies, artikelen) ---- */
.pagina-kop {
max-width: 62ch;
padding: 1rem 0 2rem;
}
.pagina-kop h1 {
font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
letter-spacing: -0.02em;
}
.pagina-kop__intro {
margin: 0;
font-size: 1.05rem;
color: var(--inkt-zwak);
}
/* ---- Secties en kaarten ---- */
.sectie {
padding: 2.5rem 0;
border-top: 1px solid var(--vlak-rand);
}
.sectie__kop {
max-width: 62ch;
margin-bottom: 2rem;
}
.sectie__kop h2 {
font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
letter-spacing: -0.01em;
}
.sectie__kop p {
margin: 0;
color: var(--inkt-zwak);
}
.sectie__meer {
margin: 2rem 0 0;
font-weight: 600;
}
.kaarten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
}
.kaart {
background: var(--vlak);
border: 1px solid var(--vlak-rand);
border-radius: var(--radius-groot);
padding: 1.5rem;
box-shadow: var(--schaduw);
transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.kaart:hover {
box-shadow: var(--schaduw-op);
border-color: var(--oranje);
transform: translateY(-2px);
}
/* Respecteer een systeeminstelling die beweging afwijst. */
@media (prefers-reduced-motion: reduce) {
.kaart,
.artikel-kaart {
transition: none;
}
.kaart:hover,
.artikel-kaart:hover {
transform: none;
}
}
.kaart h2,
.kaart h3 {
font-size: 1.05rem;
margin-bottom: 0.4rem;
}
.kaart p {
margin: 0;
color: var(--inkt-zwak);
font-size: 0.95rem;
}
.kaart__icoon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
margin-bottom: 1rem;
border-radius: var(--radius-groot);
background: rgba(255, 97, 0, 0.12);
color: var(--oranje-donker);
}
:root[data-theme="donker"] .kaart__icoon {
color: var(--oranje);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="licht"]) .kaart__icoon {
color: var(--oranje);
}
}
.kaart__icoon svg {
width: 1.4rem;
height: 1.4rem;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---- Stappen ---- */
.stappen {
list-style: none;
counter-reset: stap;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
.stappen li {
padding-top: 1rem;
border-top: 3px solid var(--oranje);
}
.stappen__nummer {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--oranje-donker);
}
:root[data-theme="donker"] .stappen__nummer {
color: var(--oranje);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="licht"]) .stappen__nummer {
color: var(--oranje);
}
}
.stappen h3 {
margin: 0.25rem 0 0.4rem;
font-size: 1.05rem;
}
.stappen p {
margin: 0;
color: var(--inkt-zwak);
font-size: 0.95rem;
}
/* ---- Afsluitend blok met oproep ---- */
.cta-blok {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin: 3rem 0 1rem;
padding: 2rem;
background: var(--zwart);
color: var(--wit);
border-radius: var(--radius-groot);
border-left: 6px solid var(--oranje);
}
.cta-blok h2 {
margin: 0 0 0.4rem;
font-size: 1.3rem;
}
.cta-blok p {
margin: 0;
color: rgba(255, 255, 255, 0.75);
max-width: 60ch;
}
.cta-blok p:has(.knop) {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.cta-blok .knop--secundair {
color: var(--wit);
border-color: rgba(255, 255, 255, 0.5);
}
.cta-blok .knop--secundair:hover,
.cta-blok .knop--secundair:focus-visible {
background: var(--wit);
color: var(--zwart);
border-color: var(--wit);
}
/* ---- Artikelen ---- */
.artikel-lijst {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
}
.artikel-kaart {
display: flex;
flex-direction: column;
background: var(--vlak);
border: 1px solid var(--vlak-rand);
border-left: 4px solid var(--oranje);
border-radius: var(--radius-groot);
padding: 1.5rem;
box-shadow: var(--schaduw);
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.artikel-kaart:hover {
box-shadow: var(--schaduw-op);
transform: translateY(-2px);
}
.artikel-kaart h2,
.artikel-kaart h3 {
font-size: 1.15rem;
margin: 0 0 0.5rem;
}
.artikel-kaart h2 a,
.artikel-kaart h3 a {
color: var(--inkt);
text-decoration: none;
}
.artikel-kaart h2 a:hover,
.artikel-kaart h3 a:hover,
.artikel-kaart h2 a:focus-visible {
color: var(--oranje-donker);
text-decoration: underline;
}
.artikel-kaart p {
margin: 0;
color: var(--inkt-zwak);
font-size: 0.95rem;
}
.artikel-kaart__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.6rem !important;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.artikel-kaart__meer {
margin-top: auto !important;
padding-top: 1rem;
font-weight: 600;
}
/* ---- Artikeltekst ---- */
.prose {
max-width: 68ch;
margin: 0 auto;
padding: 1rem 0 2rem;
}
.prose h1 {
font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
}
.prose h2 {
margin-top: 2.5rem;
font-size: 1.4rem;
letter-spacing: -0.01em;
}
.prose h3 {
margin-top: 2rem;
font-size: 1.15rem;
}
.prose p,
.prose li {
/* Iets ruimer dan de rest van de applicatie: dit is lopende tekst en geen
formulier. */
line-height: 1.7;
}
.prose ul,
.prose ol {
padding-left: 1.25rem;
}
.prose li {
margin-bottom: 0.5rem;
}
.prose__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--inkt-zwak);
}
.prose__intro {
font-size: 1.1rem;
color: var(--inkt-zwak);
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--vlak-rand);
}
.prose blockquote {
margin: 1.5rem 0;
padding: 0.25rem 0 0.25rem 1.25rem;
border-left: 4px solid var(--oranje);
color: var(--inkt-zwak);
font-style: italic;
}
.prose code {
padding: 0.1rem 0.35rem;
background: var(--zebra);
border-radius: var(--radius);
font-size: 0.9em;
}
.kruimels {
margin-bottom: 1rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
/* ---- Kleine knop, voor in de menubalk ---- */
.knop--klein {
padding: 0.4rem 0.9rem;
font-size: 0.85rem;
}