/* =====================================================================
TJARKO VAN DER POL — CSS (opgeschoonde versie)
Volledig bestand: vervangt je hele huidige CSS.
Opbouw:
01 Basis 02 Algemene elementen 03 Menu & taalkeuze
04 Lezingen 05 Boeken 06 Contact & nieuwsbrief
07 Homepage & updates 08 Cargo/overig 09 Responsive
Daarna: titels (vaste opmaak voor alle paginatitels).
Cargo-regels ([data-css-preset] en de !page_bgcolor-achtige commentaren) zijn niet aangeraakt.
===================================================================== */
/* =====================================================================
01 BASIS
===================================================================== */
body {
background-color: #fff;
color: #000;
}
bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
border-bottom: 0;
padding-bottom: 0;
}
body.mobile #site_menu_button {
margin: -6px;
font-size: 34px;
}
body.mobile #site_menu {
width: 100%;
}
body.mobile #site_menu .close {
display: block;
font-size: 50px;
line-height: 1em;
}
body.mobile #shop_button:not(.text) {
margin: -6px;
font-size: 40px;
}
body.mobile .quick-view {
width: 100%;
height: 100%;
margin: 0;
}
body.mobile .audio-player {
max-width: 100%;
}
/* =====================================================================
02 ALGEMENE ELEMENTEN
===================================================================== */
a:active {
opacity: 0.7;
}
.page a.active {
opacity: .4;
}
i,
em {
font-style: italic;
}
b,
strong {
font-weight: bolder;
}
sub,
sup {
position: relative;
vertical-align: baseline;
}
img {
border: 0;
padding: 0;
}
.content img {
float: none;
margin-bottom: -0.2em;
}
[data-predefined-style="true"] bodycopy a {
color: rgba(0, 0, 0, 0.85);
padding-bottom: 0.1em;
border-bottom: none;
text-decoration: none;
}
[data-predefined-style="true"] h1 a {
border: 0;
color: rgba(0, 0, 0, 0.9);
}
[data-predefined-style="true"] h2 a {
color: rgba(0, 0, 0, 0.85);
}
[data-predefined-style="true"] small a {
color: rgb(0, 0, 0);
border-bottom-width: 0em;
}
.thumbnails .tags a {
border-bottom: 0;
color: rgba(0, 0, 0, 0.4);
text-decoration: none;
}
#site_menu .page-link a {
color: rgba(255, 255, 255, 0.75);
}
#site_menu .set-link > a {
color: rgba(255, 255, 255, 0.75);
font-weight: bold;
}
#site_menu a:active {
opacity: .7;
}
#site_menu a.active {
opacity: .4;
}
.content img.image-zoom:active {
opacity: .7;
}
.videocontainer {
width: 100%;
max-width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
}
.vidcontainer iframe,
.vidcontainer video {
width: 100%;
max-width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.over-tjarko-pagina .book-intro p[style*="0.75rem"] {
font-size: 0.75rem !important; line-height: 1.2 !important;
}
/* =====================================================================
03 MENU & TAALKEUZE
Opbouw: eerst de basis (grote schermen), daarna per schermtype alleen
wat afwijkt, van klein naar groot. De volgorde is belangrijk: latere
blokken winnen van eerdere.
Schermtypes:
- tot 600px telefoon staand
- 601 t/m 700px kleine tablet / telefoon liggend
- 701 t/m 1100px tablet en klein venster
- 1101 t/m 1400px laptop
- vanaf 1401px groot scherm (basis)
- liggend + max 600px hoog (telefoon liggend, laag venster): eigen blok
===================================================================== */
/* Ruimte tussen logo en hoofdmenu */
#cwhohi > .tjarko-menu {
margin-top: 15px !important;
}
/* ---------------------------------------------------------------------
LOGO — oog (knippert) + naam + vier stippen
Alles schaalt mee met --oog (de doorsnede van het oog).
--------------------------------------------------------------------- */
.tjarko-logo {
--oog: clamp(34px, 4.4vw, 58px);
--oog-schaal: 0.85; /* alleen het oog: 1 = zoals eerst, 0.8 = nog kleiner */
display: inline-flex;
align-items: center;
gap: calc(var(--oog) * 0.23);
max-width: 100%;
margin: 0;
padding: 0 !important;
border: 0 !important;
color: #000 !important;
text-decoration: none !important;
line-height: 1;
white-space: nowrap;
}
.tjarko-logo-oog {
position: relative;
display: block;
flex: 0 0 auto;
width: calc(var(--oog) * var(--oog-schaal));
height: calc(var(--oog) * var(--oog-schaal));
min-width: calc(var(--oog) * var(--oog-schaal));
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
}
.tjarko-logo-oog span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* De twee ogen staan hier als achtergrondplaatje, zodat er in de header
geen plaatjes of inline-stijlen nodig zijn. */
.tjarko-logo-oog .oog-dicht {
background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/6xaJSlACEQAAAAEAABZ/anVtYgAAAB5qdW1kYzJwYQARABCAAACqADibcQNjMnBhAAAAFllqdW1iAAAAR2p1bWRjMm1hABEAEIAAAKoAOJtxA3VybjpjMnBhOjMzNzBkYTI3LWRkYzktNDhjYy1hYzY2LWM1YTM3ZjhmMzUyMwAAAAOUanVtYgAAAClqdW1kYzJhcwARABCAAACqADibcQNjMnBhLmFzc2VydGlvbnMAAAAAuWp1bWIAAABEanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5pbmdyZWRpZW50LnYzAAAAABhjMnNoipT+hQVf0t0ndGBTU+WzdAAAAG1jYm9yo2lkYzpmb3JtYXRqaW1hZ2UvanBlZ2ppbnN0YW5jZUlEeCx4bXA6aWlkOmVmYjJiOWI0LWUxNjMtNDM2MS1hMWU3LWEyMzYzYTEzMjhhNWxyZWxhdGlvbnNoaXBocGFyZW50T2YAAAHianVtYgAAAEFqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmFjdGlvbnMudjIAAAAAGGMyc2hLw57vBDGzccB7YRkTZ5ZoAAABmWNib3KiZ2FjdGlvbnOComZhY3Rpb25rYzJwYS5vcGVuZWRqcGFyYW1ldGVyc6FraW5ncmVkaWVudHOBomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCCzK6w1Ozmg8EOZPj5WmOxokUHnvgv4WZhhTEJt+OJ56qRmYWN0aW9ueB1jb20uYW50aHJvcGljLmNsYXVkZS5wcm92aWRlZGpwYXJhbWV0ZXJzoXgfY29tLmFudGhyb3BpYy5vcmlnaW4tY29uZmlkZW5jZWd1bmtub3dua2Rlc2NyaXB0aW9ueGZDbGF1ZGUgcHJvdmlkZWQgdGhpcyBmaWxlIGF0IHRoZSByZXF1ZXN0IG9mIGEgdXNlciBhbmQgbWF5IGhhdmUgY3JlYXRlZCBvciBtb2RpZmllZCB0aGUgZmlsZSBjb250ZW50cy5tc29mdHdhcmVBZ2VudKFkbmFtZWZDbGF1ZGVyYWxsQWN0aW9uc0luY2x1ZGVk9QAAAMhqdW1iAAAAQGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaGFzaC5kYXRhAAAAABhjMnNoXQAE7JBfJuRB64eTkP/oXgAAAIBjYm9ypWNhbGdmc2hhMjU2Y3BhZE4AAAAAAAAAAAAAAAAAAGRoYXNoWCC0HVPObF+uByZRhedgcKMTe6rzMLElxhqDq+6KRXqep2RuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBRmbGVuZ3RoGRaLAAACPmp1bWIAAAAnanVtZGMyY2wAEQAQgAAAqgA4m3EDYzJwYS5jbGFpbS52MgAAAAIPY2JvcqVjYWxnZnNoYTI1NmlzaWduYXR1cmV4TXNlbGYjanVtYmY9L2MycGEvdXJuOmMycGE6MzM3MGRhMjctZGRjOS00OGNjLWFjNjYtYzVhMzdmOGYzNTIzL2MycGEuc2lnbmF0dXJlamluc3RhbmNlSUR4LHhtcDppaWQ6YzY2ZDZjNTItZjM1Ny00YzQ0LWFiMjgtOTI0ZGMzNGIxZWUzcmNyZWF0ZWRfYXNzZXJ0aW9uc4OiY3VybHgtc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5pbmdyZWRpZW50LnYzZGhhc2hYILMrrDU7OaDwQ5k+PlaY7GiRQee+C/hZmGFMQm344nnqomN1cmx4KnNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuYWN0aW9ucy52MmRoYXNoWCA+qJUHUUdDYQOSgM3sojoFV0qvk1/9ZnvHNko66bIjvqJjdXJseClzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmhhc2guZGF0YWRoYXNoWCCwyP84B3XjUK3mkmPuUG/Hebw3hh/1bfE7eXKlZT2L+XRjbGFpbV9nZW5lcmF0b3JfaW5mb6NkbmFtZW9BbnRocm9waWMgRmlsZXNndmVyc2lvbmUxLjAuMGtzcGVjVmVyc2lvbmUyLjQuMAAAEDhqdW1iAAAAKGp1bWRjMmNzABEAEIAAAKoAOJtxA2MycGEuc2lnbmF0dXJlAAAAEAhjYm9y0oRZAhKiASYYIVkCCjCCAgYwggGNoAMCAQICFEDloAruwjnQvriD+gZCBT1nVRMAMAoGCCqGSM49BAMDMEkxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMS4wLAYDVQQDEyVBbnRocm9waWMgQ29udGVudCBDcmVkZW50aWFscyBSb290IENBMB4XDTI2MDgwNzE4NDM1NloXDTI4MDgwNjE5NDM1NlowRDEXMBUGA1UEChMOQW50aHJvcGljLCBQQkMxKTAnBgNVBAMTIEFudGhyb3BpYyBDbGF1ZGUgQ29udGVudCBTaWduaW5nMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEmHoKa8tQGAUU1TS9QqU5W0Tp2N3XsvlK7BfQt6YWKwEzd2R3/dzKPEUDdCjlLjp9fT+KFjRVnuZ9v0oXvTe3k6NYMFYwDgYDVR0PAQH/BAQDAgeAMBUGA1UdJQQOMAwGCisGAQQBg+heAgEwDAYDVR0TAQH/BAIwADAfBgNVHSMEGDAWgBTOUeIEgU5kWyP448TPmj6cwddcwjAKBggqhkjOPQQDAwNnADBkAjAxcx0UngF60stVjs5G4T2eiptsBk5mf9oCtfJPAUBl8qs/PEXa8+gk1/X5QJ2DVcYCMHBfXN31YapiSqYvlIWrDVDJKOvXMl+kkz37Wt0PBI8sw486Mq6JeOhT+lRR4b1HCaFjcGFkWQ2eAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA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");
}
.tjarko-logo-oog .oog-open {
background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/6xaJSlACEQAAAAEAABZ/anVtYgAAAB5qdW1kYzJwYQARABCAAACqADibcQNjMnBhAAAAFllqdW1iAAAAR2p1bWRjMm1hABEAEIAAAKoAOJtxA3VybjpjMnBhOjdhOTJkYzAzLWQ3MzQtNDY5My04NThmLTExNWI3YjY0ZjlhOQAAAAOUanVtYgAAAClqdW1kYzJhcwARABCAAACqADibcQNjMnBhLmFzc2VydGlvbnMAAAAAuWp1bWIAAABEanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5pbmdyZWRpZW50LnYzAAAAABhjMnNoxSZNVIuj5fZ6G+F/q2X4wwAAAG1jYm9yo2lkYzpmb3JtYXRqaW1hZ2UvanBlZ2ppbnN0YW5jZUlEeCx4bXA6aWlkOjQ1MDlkZjdiLTM5ZDAtNDI3OC05N2ViLTE2ZDY0YjlkYWIxNWxyZWxhdGlvbnNoaXBocGFyZW50T2YAAAHianVtYgAAAEFqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmFjdGlvbnMudjIAAAAAGGMyc2jf7qwPkWba65deo4WeXHJUAAABmWNib3KiZ2FjdGlvbnOComZhY3Rpb25rYzJwYS5vcGVuZWRqcGFyYW1ldGVyc6FraW5ncmVkaWVudHOBomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCBXMmLFSrVr3L/CI5Qx1QT1FrpKuNmQXq552hcsNOOh7aRmYWN0aW9ueB1jb20uYW50aHJvcGljLmNsYXVkZS5wcm92aWRlZGpwYXJhbWV0ZXJzoXgfY29tLmFudGhyb3BpYy5vcmlnaW4tY29uZmlkZW5jZWd1bmtub3dua2Rlc2NyaXB0aW9ueGZDbGF1ZGUgcHJvdmlkZWQgdGhpcyBmaWxlIGF0IHRoZSByZXF1ZXN0IG9mIGEgdXNlciBhbmQgbWF5IGhhdmUgY3JlYXRlZCBvciBtb2RpZmllZCB0aGUgZmlsZSBjb250ZW50cy5tc29mdHdhcmVBZ2VudKFkbmFtZWZDbGF1ZGVyYWxsQWN0aW9uc0luY2x1ZGVk9QAAAMhqdW1iAAAAQGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaGFzaC5kYXRhAAAAABhjMnNoK8T2yzlwFXjlPYVAD4w7IAAAAIBjYm9ypWNhbGdmc2hhMjU2Y3BhZE4AAAAAAAAAAAAAAAAAAGRoYXNoWCDV1oNMFb6nYEjdq1JDlvBXDsjT8gsFHFYUDUIa3R+dUGRuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBRmbGVuZ3RoGRaLAAACPmp1bWIAAAAnanVtZGMyY2wAEQAQgAAAqgA4m3EDYzJwYS5jbGFpbS52MgAAAAIPY2JvcqVjYWxnZnNoYTI1NmlzaWduYXR1cmV4TXNlbGYjanVtYmY9L2MycGEvdXJuOmMycGE6N2E5MmRjMDMtZDczNC00NjkzLTg1OGYtMTE1YjdiNjRmOWE5L2MycGEuc2lnbmF0dXJlamluc3RhbmNlSUR4LHhtcDppaWQ6ODg2NTdjNTktMzM2Ny00NDMxLWFhOWMtMzhjMDlmNDc5ZTY5cmNyZWF0ZWRfYXNzZXJ0aW9uc4OiY3VybHgtc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5pbmdyZWRpZW50LnYzZGhhc2hYIFcyYsVKtWvcv8IjlDHVBPUWukq42ZBernnaFyw046HtomN1cmx4KnNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuYWN0aW9ucy52MmRoYXNoWCBJPtS543mLfad3hKQx84/zJrFIZvHDiiDFv8llheKbR6JjdXJseClzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmhhc2guZGF0YWRoYXNoWCCH8i2ktgW2RS5OqB5FenvSL10vkZGjuYZs+/L0PtV4FHRjbGFpbV9nZW5lcmF0b3JfaW5mb6NkbmFtZW9BbnRocm9waWMgRmlsZXNndmVyc2lvbmUxLjAuMGtzcGVjVmVyc2lvbmUyLjQuMAAAEDhqdW1iAAAAKGp1bWRjMmNzABEAEIAAAKoAOJtxA2MycGEuc2lnbmF0dXJlAAAAEAhjYm9y0oRZAhKiASYYIVkCCjCCAgYwggGNoAMCAQICFEDloAruwjnQvriD+gZCBT1nVRMAMAoGCCqGSM49BAMDMEkxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMS4wLAYDVQQDEyVBbnRocm9waWMgQ29udGVudCBDcmVkZW50aWFscyBSb290IENBMB4XDTI2MDgwNzE4NDM1NloXDTI4MDgwNjE5NDM1NlowRDEXMBUGA1UEChMOQW50aHJvcGljLCBQQkMxKTAnBgNVBAMTIEFudGhyb3BpYyBDbGF1ZGUgQ29udGVudCBTaWduaW5nMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEmHoKa8tQGAUU1TS9QqU5W0Tp2N3XsvlK7BfQt6YWKwEzd2R3/dzKPEUDdCjlLjp9fT+KFjRVnuZ9v0oXvTe3k6NYMFYwDgYDVR0PAQH/BAQDAgeAMBUGA1UdJQQOMAwGCisGAQQBg+heAgEwDAYDVR0TAQH/BAIwADAfBgNVHSMEGDAWgBTOUeIEgU5kWyP448TPmj6cwddcwjAKBggqhkjOPQQDAwNnADBkAjAxcx0UngF60stVjs5G4T2eiptsBk5mf9oCtfJPAUBl8qs/PEXa8+gk1/X5QJ2DVcYCMHBfXN31YapiSqYvlIWrDVDJKOvXMl+kkz37Wt0PBI8sw486Mq6JeOhT+lRR4b1HCaFjcGFkWQ2eAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA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");
}
/* Het dichte oog ligt onderaan. Het open oog ligt bovenop en verdwijnt
elke 5,5 seconde een halve seconde: dan zie je het dichte oog.
Werkt de animatie niet, dan blijft het oog gewoon open. */
.tjarko-logo-oog .oog-open {
animation: tjarko-knipper 5.5s step-end infinite;
}
@keyframes tjarko-knipper {
0% { opacity: 1; }
90.9% { opacity: 0; }
100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.tjarko-logo-oog .oog-open {
animation: none;
}
}
.tjarko-logo-naam {
font-family: DINosaur, Icons, sans-serif;
font-size: calc(var(--oog) * 0.72);
font-weight: 400;
line-height: 1;
letter-spacing: -0.01em;
color: #000;
}
/* Vier stippen in het goudbruin van de site */
.tjarko-logo-stippen {
display: inline-flex;
align-items: center;
gap: calc(var(--oog) * 0.097);
margin-left: calc(var(--oog) * 0.03);
transform: translateY(calc(var(--oog) * 0.035));
}
.tjarko-logo-stippen span {
display: block;
width: calc(var(--oog) * 0.262);
height: calc(var(--oog) * 0.262);
border-radius: 50%;
background: #c47600;
}
/* ---------------------------------------------------------------------
BASIS
--------------------------------------------------------------------- */
.tjarko-menu {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
gap: 30px !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
.tjarko-menu > a {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
font-size: clamp(1.15rem, 1.45vw, 1.6rem) !important;
color: rgba(0, 0, 0, 0.85) !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.tjarko-menu > a:hover,
.tjarko-menu > a:focus {
color: rgb(217, 159, 0) !important;
}
.tjarko-menu > a:hover *,
.tjarko-menu > a:focus * {
color: rgb(217, 159, 0) !important;
}
/* Taalkeuze: houder */
.tjarko-menu .tjarko-language {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
.tjarko-language {
position: relative;
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
font-weight: 400 !important;
line-height: 1.3 !important;
}
/* Taalkeuze: knop */
.tjarko-language-button {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
line-height: 1 !important;
color: rgba(0, 0, 0, 0.85) !important;
cursor: pointer !important;
outline: none !important;
white-space: nowrap !important;
}
.tjarko-language-button:focus,
.tjarko-language-dropdown button:focus {
outline: none !important;
box-shadow: none !important;
}
/* Op een telefoon: geen vertraging of dubbeltik-zoom op de taalknoppen */
.tjarko-language-button,
.tjarko-language-dropdown button {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Het uitklapmenu op een eigen laag, zodat Safari op iPhone het altijd tekent */
.tjarko-language-dropdown {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
.tjarko-current-flag {
display: inline-block;
font-family:
"Apple Color Emoji",
"Segoe UI Emoji",
"Noto Color Emoji",
sans-serif;
font-size: 1.55rem;
line-height: 1;
transition: opacity 0.2s ease;
}
.tjarko-language-arrow {
display: inline-block;
margin-left: 5px;
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1;
color: rgba(0, 0, 0, 0.85);
transition:
color 0.2s ease,
transform 0.2s ease;
}
.tjarko-language-button:hover
.tjarko-current-flag {
opacity: 0.75;
}
.tjarko-language-button:hover
.tjarko-language-arrow {
color: rgb(217, 159, 0);
}
.tjarko-language.language-open
.tjarko-language-arrow {
transform: rotate(180deg);
color: rgb(217, 159, 0);
}
/* Taalkeuze: uitklapmenu */
.tjarko-language-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 99999;
display: none;
flex-direction: column;
align-items: center;
padding: 7px 8px;
background: #ffffff;
border: none;
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.12);
}
.tjarko-language.language-open
.tjarko-language-dropdown {
display: flex;
}
.tjarko-language-dropdown button {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 34px;
margin: 0;
padding: 0;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
cursor: pointer;
outline: none !important;
}
.tjarko-language-dropdown .tjarko-flag {
display: block;
font-family:
"Apple Color Emoji",
"Segoe UI Emoji",
"Noto Color Emoji",
sans-serif;
font-size: 1.55rem;
line-height: 1;
transition:
transform 0.15s ease,
opacity 0.15s ease;
}
.tjarko-language-dropdown button:hover
.tjarko-flag {
transform: scale(1.12);
opacity: 0.75;
}
/* GTranslate blijft op de achtergrond, onzichtbaar */
.tjarko-language
.gtranslate_wrapper {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.tjarko-language
select.gt_selector {
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* ---------------------------------------------------------------------
TOT 1200px — ruimte onder het menu
--------------------------------------------------------------------- */
@media (max-width: 1200px) {
.tjarko-menu {
padding-bottom: 4px !important;
}
}
/* ---------------------------------------------------------------------
TOT 700px — telefoon en kleine tablet
--------------------------------------------------------------------- */
@media (max-width: 700px) {
.tjarko-menu {
justify-content: space-between !important;
gap: 8px !important;
}
.tjarko-menu > a,
.tjarko-language-button {
font-size: 1.45rem !important;
}
}
/* ---------------------------------------------------------------------
TOT 600px — telefoon staand
--------------------------------------------------------------------- */
@media (max-width: 600px) {
.tjarko-menu {
padding-left: 8px !important;
padding-right: 8px !important;
}
/* Noodgreep (zie het script in de header): past het menu ook na het
verkleinen niet, dan mag het naar een tweede regel. */
.tjarko-menu.menu-breekt {
flex-wrap: wrap !important;
}
.tjarko-menu > a {
flex: 0 1 auto !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
/* wordt door het script iets kleiner gemaakt als de tekst niet past (bijv. Duits) */
font-size: calc(1.45rem * var(--menu-schaal, 1)) !important;
}
.tjarko-current-flag {
font-size: 1.3rem !important;
}
.tjarko-language-arrow {
font-size: 0.85rem !important;
margin-left: 3px !important;
}
.tjarko-language-dropdown {
top: calc(100% + 7px) !important;
padding: 6px 7px !important;
}
.tjarko-language-dropdown button {
width: 36px;
height: 33px;
}
.tjarko-language-dropdown .tjarko-flag {
font-size: 1.5rem;
}
}
/* ---------------------------------------------------------------------
601 t/m 700px — kleine tablet staand
--------------------------------------------------------------------- */
@media only screen and (min-width: 601px) and (max-width: 700px) {
.tjarko-menu {
gap: 10px !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.tjarko-menu > a {
letter-spacing: -0.025em !important;
}
}
/* ---------------------------------------------------------------------
601 t/m 700px LIGGEND — telefoon liggend
--------------------------------------------------------------------- */
@media only screen and (min-width: 601px) and (max-width: 700px) and (orientation: landscape) {
.tjarko-menu {
gap: 5px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
.tjarko-menu > a,
.tjarko-language-button {
font-size: 1.25rem !important;
}
}
/* ---------------------------------------------------------------------
601 t/m 1250px — pijltje en vlag naast de menu-items
--------------------------------------------------------------------- */
@media only screen and (min-width: 601px) and (max-width: 1250px) {
.tjarko-language-arrow {
font-size: 0.8rem !important;
margin-left: 3px !important;
}
.tjarko-current-flag {
font-size: 1.35rem !important;
}
}
@media only screen and (min-width: 601px) and (max-width: 950px) {
.tjarko-current-flag {
font-size: 1.2rem !important;
}
}
/* ---------------------------------------------------------------------
LIGGEND EN MAX 600px HOOG — laag venster, alle breedtes
Op schermen van 701 t/m 1400px worden de meeste waarden hieronder
weer overschreven door het blok "701 t/m 1400px".
--------------------------------------------------------------------- */
@media only screen and (orientation: landscape) and (max-height: 600px) {
.tjarko-menu {
padding-left: 8px !important;
padding-right: 8px !important;
justify-content: center !important;
gap: 4px !important;
overflow-x: auto !important;
overflow-y: visible !important;
scrollbar-width: none;
}
.tjarko-menu::-webkit-scrollbar {
display: none;
}
.tjarko-menu > a {
font-size: 2rem !important;
letter-spacing: -0.035em !important;
flex: 0 0 auto !important;
}
.tjarko-menu .tjarko-language {
margin-left: 2px !important;
}
.tjarko-language-button {
font-size: 2rem !important;
}
.tjarko-current-flag {
font-size: 2rem !important;
}
}
/* ---------------------------------------------------------------------
701 t/m 1400px — tablet en laptop
Het menu blijft binnen het venster en past zich aan.
--------------------------------------------------------------------- */
@media only screen and (min-width: 701px) and (max-width: 1400px) {
.tjarko-menu {
padding-left: 12px !important;
padding-right: 12px !important;
gap: clamp(8px, 1.5vw, 28px) !important;
/* Alleen zijwaarts afknippen; naar beneden mag het taalmenu uitklappen */
overflow-x: clip !important;
overflow-y: visible !important;
}
.tjarko-menu > a,
.tjarko-language-button {
font-size: clamp(1rem, 1.55vw, 1.45rem) !important;
letter-spacing: -0.015em !important;
flex: 0 1 auto !important;
min-width: 0 !important;
white-space: nowrap !important;
}
.tjarko-menu .tjarko-language {
flex: 0 1 auto !important;
min-width: 0 !important;
}
}
/* ---------------------------------------------------------------------
701 t/m 1100px — kleiner venster: nog compacter
--------------------------------------------------------------------- */
@media only screen and (min-width: 701px) and (max-width: 1100px) {
.tjarko-menu {
gap: 7px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
.tjarko-menu > a,
.tjarko-language-button {
font-size: clamp(0.88rem, 1.65vw, 1.2rem) !important;
letter-spacing: -0.025em !important;
}
}
/* =====================================================================
04 LEZINGEN & WORKSHOPS
===================================================================== */
.lezingen-pagina {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
/* margin-top: 20px verwijderd — werd onderaan het bestand
overschreven door margin: 0 0 35px 0 */
.lezingen-intro {
max-width: 760px;
}
.lezingen-intro p {
margin-top: 0;
margin-bottom: 1em;
}
.lezingen-pagina .lezingen-tekst,
.lezingen-pagina .lezingen-tekst p {
text-align: left !important;
}
/* =====================================================================
05 BOEKEN
===================================================================== */
.boeken-pagina {
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
/* color verwijderd — werd verderop overschreven door #c47600 */
.boeken-pagina h1 {
font-family: DINosaur, Icons !important;
font-size: 3.4rem !important;
font-weight: 400 !important;
line-height: 1.2 !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
}
.boeken-pagina .book-intro {
max-width: 760px;
margin: 12px auto 0 auto;
padding-top: 0;
text-align: left;
}
/* border-bottom en padding-bottom verwijderd — werden later met
!important op "none" / 0 gezet */
.boeken-pagina .book-intro p:first-child {
text-align: center;
margin-top: 0;
margin-bottom: 22px;
}
.boeken-pagina .book-intro p:nth-child(2) {
margin-top: 25px;
margin-bottom: 30px;
text-align: center;
}
.boeken-pagina .book-intro p img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
object-fit: contain !important;
margin-left: auto !important;
margin-right: auto !important;
}
.boeken-pagina .book-intro p {
margin-top: 0;
margin-bottom: 1em;
}
.boeken-pagina .book-order {
max-width: 760px;
margin: 30px auto 30px auto;
padding-top: 16px;
border-top: 2px solid #c47600;
text-align: left;
}
.boeken-pagina .book-order > strong {
display: block;
margin-bottom: 8px;
font-weight: bold;
text-transform: uppercase;
}
.boeken-pagina .book-order p {
margin-top: 0;
margin-bottom: 1em;
}
/* background-color en color verwijderd — staan verderop met
!important in de groepsregel voor .contact-button */
.boeken-pagina .book-order .contact-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
min-height: 40px;
width: auto;
max-width: 100%;
padding: 0 16px;
box-sizing: border-box;
border: none;
border-radius: 4px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-family: inherit;
font-size: inherit;
font-weight: normal;
line-height: normal;
white-space: nowrap;
}
.boeken-pagina .book-order .contact-button:hover {
opacity: 0.85;
}
.boeken-pagina .boeken-intro {
max-width: 760px;
margin: 0 auto 35px auto;
text-align: center;
}
.boeken-pagina .boeken-intro p {
margin: 0;
}
.boeken-pagina .image-gallery {
margin-top: 30px;
}
.boeken-pagina .image-gallery a.image-link {
transition: opacity 0.2s ease;
}
.boeken-pagina .image-gallery a.image-link:hover {
opacity: 0.72 !important;
}
.boeken-pagina .boeken-nieuwsbrief {
margin-top: 65px;
text-align: center;
}
/* border en border-top verwijderd — de hr-regel verderop zet
border: 0 !important en tekent de lijn met background-color */
.boeken-pagina .boeken-nieuwsbrief hr {
margin: 0 auto 30px auto;
width: 100%;
}
.boeken-pagina .boeken-nieuwsbrief-tekst {
margin: 0 0 18px 0;
}
/* Regel voor ".boeken-nieuwsbrief .contact-button { display: inline-flex }"
verwijderd — de latere regel met display: inline-block !important
won altijd. */
.boeken-pagina .image-gallery .gallery_card {
position: relative !important;
}
.boeken-pagina .image-gallery .gallery_card img {
transition: opacity 0.25s ease, transform 0.25s ease !important;
transform-origin: center center !important;
}
.boeken-pagina .image-gallery .gallery_card:hover img {
opacity: 0.72 !important;
transform: scale(1.025) !important;
}
.boeken-pagina .boeken-nieuw {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 32px !important;
align-items: start !important;
margin-top: 30px !important;
margin-bottom: 0 !important;
width: 100% !important;
}
.boeken-pagina .boeken-nieuw a.image-link {
display: block !important;
width: 100% !important;
}
.boeken-pagina .boeken-nieuw a.image-link img {
display: block !important;
width: 100% !important;
height: auto !important;
transition: opacity 0.25s ease, transform 0.25s ease !important;
transform-origin: center center !important;
}
.boeken-pagina .boeken-nieuw a.image-link:hover img {
opacity: 0.72 !important;
transform: scale(1.025) !important;
}
.boeken-pagina .boeken-nieuw + .image-gallery {
border-top: 2px solid #c47600 !important;
padding-top: 38px !important;
margin-top: 38px !important;
}
.boeken-pagina .boeken-nieuwsbrief hr {
height: 2px !important;
min-height: 2px !important;
max-height: 2px !important;
border: 0 !important;
padding: 0 !important;
background-color: #c47600 !important;
opacity: 1 !important;
}
.boeken-pagina h1 {
color: #c47600 !important;
}
.boeken-pagina .boeken-overzicht-titel {
color: #c47600 !important;
}
.boeken-pagina [style*="text-align: left"] h1 {
color: #df3f1f !important;
}
.boeken-pagina .book-order .contact-button,
.boeken-pagina .book-order .contact-button:hover,
.boeken-pagina .book-order .contact-button:focus,
.boeken-pagina .book-order .contact-button:active {
background-color: #df3f1f !important;
color: #ffffff !important;
}
.boeken-pagina .book-preview {
max-width: 900px;
margin: 45px auto 35px auto;
text-align: left;
}
.boeken-pagina .book-preview h2 {
font-family: DINosaur, Icons !important;
font-size: 2.3rem !important;
font-weight: 400 !important;
line-height: 1.2 !important;
color: rgba(0, 0, 0, 0.85) !important;
margin: 0 0 18px 0 !important;
padding: 0 !important;
}
.boeken-pagina .book-preview-pages {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 18px !important;
align-items: start !important;
width: 100% !important;
}
.boeken-pagina .book-preview-page {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.boeken-pagina .book-preview-page img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
}
.boeken-pagina .book-preview-page:hover {
opacity: 1 !important;
}
.boeken-pagina .book-preview-page:hover img {
opacity: 1 !important;
transform: none !important;
}
.boeken-pagina h1[style*="#08b3e2"] {
color: #08b3e2 !important;
}
.boeken-pagina .book-order .contact-button[style*="#08b3e2"] {
background-color: #08b3e2 !important;
color: #ffffff !important;
}
.boeken-pagina .book-order .contact-button[style*="#08b3e2"]:hover,
.boeken-pagina .book-order .contact-button[style*="#08b3e2"]:focus,
.boeken-pagina .book-order .contact-button[style*="#08b3e2"]:active {
background-color: #08b3e2 !important;
color: #ffffff !important;
opacity: 0.85 !important;
}
.boek-preview {
/* Even breed als de tekstkolom (zie .book-intro), zodat de
thumbnails eronder netjes binnen de tekst uitlijnen */
width: 100%;
max-width: 760px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
box-sizing: border-box;
}
.boek-preview-title {
margin: 0 0 16px 0;
}
.boek-preview-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
width: 100% !important;
align-items: start !important;
}
.boek-preview-grid > div {
min-width: 0 !important;
width: 100% !important;
overflow: hidden !important;
}
.boek-preview-grid img {
display: block !important;
position: static !important;
float: none !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
transform: none !important;
}
.boek-preview-grid a.image-link {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.boek-preview-grid a.image-link:hover {
opacity: 1 !important;
}
.boek-blauw h1 {
color: #08b3e2 !important;
}
.boek-blauw .book-order .contact-button,
.boek-blauw .book-order .contact-button:hover,
.boek-blauw .book-order .contact-button:focus,
.boek-blauw .book-order .contact-button:active {
background-color: #08b3e2 !important;
color: #ffffff !important;
}
.boeken-pagina.boek-oranje .book-order a.contact-button.bam-blauw,
.boeken-pagina.boek-oranje .book-order a.contact-button.bam-blauw:hover,
.boeken-pagina.boek-oranje .book-order a.contact-button.bam-blauw:focus,
.boeken-pagina.boek-oranje .book-order a.contact-button.bam-blauw:active,
.boeken-pagina.boek-oranje .book-order a.contact-button.bam-blauw:visited {
background-color: #29226b !important;
background: #29226b !important;
color: #ffffff !important;
}
.boek-naar-de-maan h1 {
color: #dd592c !important;
}
.boek-naar-de-maan h1 span {
color: #dd592c !important;
}
.boek-naar-de-maan .naar-de-maan-knop,
.boek-naar-de-maan .naar-de-maan-knop:hover,
.boek-naar-de-maan .naar-de-maan-knop:focus,
.boek-naar-de-maan .naar-de-maan-knop:active {
background-color: #dd592c !important;
color: #ffffff !important;
}
.boek-dwars-door-tijd h1 {
color: #d85878 !important;
}
.boek-dwars-door-tijd h1 span {
color: #d85878 !important;
}
.boek-dwars-door-tijd h1 span span {
color: #ebc51c !important;
}
.boek-dwars-door-tijd .book-order a.dwars-door-tijd-knop,
.boek-dwars-door-tijd .book-order a.dwars-door-tijd-knop:hover,
.boek-dwars-door-tijd .book-order a.dwars-door-tijd-knop:focus,
.boek-dwars-door-tijd .book-order a.dwars-door-tijd-knop:active,
.boek-dwars-door-tijd .book-order a.dwars-door-tijd-knop:visited,
body.mobile .boek-dwars-door-tijd .book-order a.dwars-door-tijd-knop,
body.mobile .boek-dwars-door-tijd .book-order a.dwars-door-tijd-knop:hover,
body.mobile .boek-dwars-door-tijd .book-order a.dwars-door-tijd-knop:focus,
body.mobile .boek-dwars-door-tijd .book-order a.dwars-door-tijd-knop:active,
body.mobile .boek-dwars-door-tijd .book-order a.dwars-door-tijd-knop:visited {
background-color: #d85878 !important;
background: #d85878 !important;
color: #ffffff !important;
opacity: 1 !important;
}
.boek-dwars-door-tijd .book-order a.dwars-door-tijd-knop {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1.2 !important;
vertical-align: middle !important;
box-sizing: border-box !important;
}
.boek-grieken-raketten h1 {
color: #f70 !important;
}
.boek-grieken-raketten .boek-grieken-intro {
color: #f70 !important;
}
.boek-grieken-raketten .grieken-raketten-knop,
.boek-grieken-raketten .grieken-raketten-knop:hover,
.boek-grieken-raketten .grieken-raketten-knop:focus,
.boek-grieken-raketten .grieken-raketten-knop:active {
background-color: #f70 !important;
color: #ffffff !important;
}
/* Twee eerdere blokken voor .kleurplaat-pretpark-poepfabriek
(.boek-preview en .boek-preview-grid) verwijderd — alles wat erin
stond, staat ook in de volledige blokken hieronder. */
.buitenlandse-vertalingen-pagina .boek-preview {
border-bottom: none !important;
padding-bottom: 0 !important;
}
.buitenlandse-vertalingen-pagina .boek-preview + .book-order {
border-top: none !important;
}
.kleurplaat-pretpark-poepfabriek .boek-preview {
width: 100% !important;
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
.kleurplaat-pretpark-poepfabriek .boek-preview-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 20px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.kleurplaat-pretpark-poepfabriek .boek-preview-grid > div {
width: 100% !important;
min-width: 0 !important;
}
.kleurplaat-pretpark-poepfabriek .boek-preview-grid img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
margin: 0 !important;
}
.boek-preview-voorproefje {
border-top: 2px solid #c47600;
padding-top: 16px;
margin-top: 30px;
margin-bottom: 16px;
text-align: center;
font-size: 1.1rem;
line-height: 1.2;
font-weight: 400;
}
.boeken-pagina.lezingen-pagina .lezingen-tekst {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
/* Twee regels voor .lezingen-tekst p en p:first-child (alleen
text-align) verwijderd — dezelfde selectors staan verderop met
dezelfde text-align !important plus lettertype en grootte. */
.boeken-pagina .boeken-nieuwsbrief {
margin-bottom: 30px !important;
}
.boeken-pagina .boeken-nieuwsbrief p {
white-space: nowrap !important;
text-align: center !important;
font-size: clamp(0.85rem, 2.2vw, 1.35rem) !important;
line-height: 1.2 !important;
}
.boeken-pagina > div[grid-row] {
margin-top: 0 !important;
padding-top: 0 !important;
}
.boeken-pagina > div[grid-row] > div[grid-col] {
margin-top: 0 !important;
padding-top: 0 !important;
}
.boeken-pagina > div[grid-row] > div[grid-col] > div {
margin-top: 0 !important;
padding-top: 0 !important;
}
.boeken-pagina > div[grid-row] > div[grid-col] > div > h1 {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
position: static !important;
top: auto !important;
}
.boeken-pagina.lezingen-pagina .lezingen-tekst p {
font-family: DINosaur, Icons !important; font-size: 1.6rem !important; line-height: 1.4 !important; text-align: left !important;
}
/* =====================================================================
06 CONTACT & NIEUWSBRIEF
===================================================================== */
.contact-block {
margin-top: 20px;
padding-top: 8px;
}
.contact-mail {
padding-top: 0;
margin-top: 12px;
}
.contact-block > strong {
display: block;
margin-bottom: 8px;
font-weight: bold;
text-transform: uppercase;
}
.contact-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
min-height: 40px;
width: auto;
max-width: 100%;
padding: 0 16px 2px 16px;
box-sizing: border-box;
background-color: #c47600;
color: #ffffff !important;
border: none;
border-radius: 4px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-family: inherit;
font-size: inherit;
font-weight: normal;
line-height: normal;
white-space: nowrap;
}
.contact-button:hover {
color: #ffffff !important;
opacity: 0.85;
}
.contact-photo-top {
text-align: center;
margin-top: 20px;
}
.contact-image {
margin-top: 15px;
}
.newsletter-block {
margin-top: 25px;
}
a.contact-button {
padding-top: 7px !important;
padding-bottom: 11px !important;
line-height: 1.2 !important;
}
.contact-block + .contact-block {
border-top: 1px solid rgba(196, 118, 0, 0.35) !important;
padding-top: 22px !important;
margin-top: 22px !important;
}
.contact-block:last-child {
border-bottom: none !important;
}
.contact-pagina .contact-info-block {
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 22px !important;
padding-bottom: 0 !important;
}
.contact-pagina .contact-info-block + .contact-info-block {
border-top: 1px solid rgba(196, 118, 0, 0.35) !important;
margin-top: 22px !important;
}
.contact-pagina .contact-photo-middle {
max-width: 760px !important;
margin: 30px auto 30px auto !important;
text-align: center !important;
}
.contact-pagina .contact-photo-middle img {
display: block !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Regels met font-weight: 400 (strong) en font-size: 1rem (p) verwijderd —
dezelfde selectors staan onderaan dit blok met 700 en 1.6rem. */
.contact-pagina .contact-button {
background-color: #c47600 !important;
color: #ffffff !important;
}
.contact-pagina .newsletter-block p {
white-space: nowrap !important;
text-align: left !important;
font-size: clamp(0.85rem, 2.2vw, 1rem) !important;
line-height: 1.35 !important;
}
.contact-pagina .newsletter-block {
padding-bottom: 30px !important;
}
/* ---- Nieuwsbriefformulier ----
Was verspreid over 12 blokken die steeds opnieuw font-family en
-grootte zetten. Het laatste blok (font-size 1.35rem) won altijd.
Hieronder staat alleen wat overblijft. */
.nieuwsbrief-pagina .nieuwsbrief-formulier {
margin-top: 10px !important;
width: 100% !important;
max-width: 760px !important;
margin-left: 0 !important;
margin-right: auto !important;
text-align: left !important;
}
.nieuwsbrief-pagina .nieuwsbrief-formulier button,
.nieuwsbrief-pagina .nieuwsbrief-formulier input[type="submit"] {
background-color: #c47600 !important;
color: #ffffff !important;
border: none !important;
}
.nieuwsbrief-pagina .nieuwsbrief-formulier form {
margin-left: 0 !important;
margin-right: auto !important;
text-align: left !important;
}
.nieuwsbrief-pagina .nieuwsbrief-formulier iframe {
display: block !important;
width: 100% !important;
max-width: 760px !important;
margin-left: 0 !important;
margin-right: auto !important;
border: 0 !important;
}
.nieuwsbrief-pagina .nieuwsbrief-intro > div > p,
.nieuwsbrief-pagina .nieuwsbrief-intro p {
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
line-height: 1.4 !important;
}
.nieuwsbrief-pagina .nieuwsbrief-formulier,
.nieuwsbrief-pagina .nieuwsbrief-formulier label,
.nieuwsbrief-pagina .nieuwsbrief-formulier p,
.nieuwsbrief-pagina .nieuwsbrief-formulier span,
.nieuwsbrief-pagina .nieuwsbrief-formulier div,
.nieuwsbrief-pagina .nieuwsbrief-formulier input,
.nieuwsbrief-pagina .nieuwsbrief-formulier textarea,
.nieuwsbrief-pagina .nieuwsbrief-formulier select,
.nieuwsbrief-pagina .nieuwsbrief-formulier button,
.nieuwsbrief-pagina .nieuwsbrief-formulier input[type="submit"] {
font-family: DINosaur, Icons !important;
font-size: 1.35rem !important;
line-height: 1.35 !important;
}
.contact-pagina .contact-info-block strong {
font-weight: 700 !important;
}
.contact-pagina .contact-info-block p {
font-family: DINosaur, Icons !important; font-size: 1.6rem !important; line-height: 1.4 !important;
}
/* =====================================================================
07 HOMEPAGE & UPDATES
===================================================================== */
.updates-pagina {
width: 100% !important;
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.update-detail {
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 16px !important;
}
.update-detail-afbeelding {
width: 100% !important;
margin-bottom: 28px !important;
}
/* CONTROLEER: alleen in gebruik als een updatepagina -tekst heeft.
De Atelier-update gebruikt losse tekst zonder
. */
.update-detail p {
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
line-height: 1.4 !important;
text-align: left !important;
}
.homepage-boeken {
width: 100%;}
.homepage-titel {
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
line-height: 1.2 !important;
font-weight: 400 !important;
color: #c47600 !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
text-align: left !important;
}
.homepage-boeken .boeken-nieuw {
margin-top: 0 !important;
}
.homepage-boeken .meer-boeken {
margin: 20px 0 0 0 !important;}
.homepage-boeken .meer-boeken a {
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
color: #c47600 !important;
text-decoration: none !important;
}
.homepage-boeken .meer-boeken a:hover {
color: #c47600 !important;
opacity: 0.7 !important;
}
.homepage-meer-updates {
margin: 20px 0 0 0 !important;
text-align: left !important;
}
.homepage-meer-updates a {
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
color: #c47600 !important;
text-decoration: none !important;
}
.homepage-meer-updates a:hover {
color: #c47600 !important;
opacity: 0.7 !important;
}
/* =========================================
NIEUWSBRIEF OP UPDATES-PAGINA
========================================= */
.updates-nieuwsbrief {
max-width: 760px;
margin: 20px auto 55px auto;
text-align: left;
padding-bottom: 30px;
border-bottom: 1px solid #c47600;
}
.updates-nieuwsbrief-knop {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 40px;
min-height: 40px;
margin: 0 auto;
padding: 0 16px; box-sizing: border-box;
background-color: #c47600;
color: #ffffff !important;
border: none;
border-radius: 4px;
font-family: DINosaur, Icons !important;
font-size: 1.6rem;
font-weight: 400;
line-height: normal;
text-decoration: none !important;
text-transform: uppercase;
text-align: left;}
.updates-nieuwsbrief-knop:hover,
.updates-nieuwsbrief-knop:focus,
.updates-nieuwsbrief-knop:active {
color: #ffffff !important;
background-color: #c47600;
opacity: 0.85;
}
@media only screen and (max-width: 600px) {
.updates-nieuwsbrief {
max-width: 100%;
margin: 20px auto 35px auto;
padding-bottom: 25px;
}
.updates-nieuwsbrief-knop {
height: auto;
min-height: 0;
padding: 7px 12px;
font-size: 1.6rem;
line-height: 1;
}
}
/* ---------------------------------------------------------------------
UPDATE OVERZICHT
--------------------------------------------------------------------- */
.updates-pagina {margin: 0 auto;
padding: 40px 30px 100px;
box-sizing: border-box;
}
.update-post {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
column-gap: 45px;
align-items: start;
width: 100%;
margin: 0;
padding: 0 0 42px 0;
box-sizing: border-box;
}
.update-post-afbeelding {
width: 100%;
margin: 0;
}
.update-post-afbeelding a {
display: block;
width: 100%;
}
.update-post-afbeelding img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
transition: opacity 0.25s ease !important;
}
.update-post-afbeelding a:hover img {
opacity: 0.75 !important;
}
.update-post-tekst {
padding-top: 1px;
}
.update-post-datum {
margin: 0 0 10px 0;
padding: 0;
font-family: DINosaur, Icons !important;
font-size: 1.15rem !important;
line-height: 1.2 !important;
font-weight: 400 !important;
color: #000 !important;
text-transform: uppercase;
}
.update-post-titel {
margin: 0 0 16px 0;
padding: 0;
font-family: DINosaur, Icons !important;
font-size: 1.8rem !important;
line-height: 1.15 !important;
font-weight: 400 !important;
color: #000 !important;
white-space: normal !important;
}
.update-post-titel a {
color: #000 !important;
text-decoration: none !important;
}
.update-post-titel a:hover {
color: #c47600 !important;
}
.update-post-intro {
max-width: 600px;
margin: 0 0 20px 0;
padding: 0;
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
line-height: 1.4 !important;
font-weight: 400 !important;
color: #000 !important;
text-align: left !important;
}
.update-post-link {
display: inline-block;
margin: 0;
padding: 0;
font-family: DINosaur, Icons !important;
font-size: 1.4rem !important;
line-height: 1.2 !important;
font-weight: 400 !important;
color: #000 !important;
text-decoration: none !important;
}
.update-post-link:hover {
color: #c47600 !important;
}
.update-scheiding {
display: block;
width: 100%;
height: 1px;
margin: 0 0 42px 0;
padding: 0;
border: 0;
border-top: 1px solid #c47600;
background: transparent;
}
/* ---------------------------------------------------------------------
UPDATE DETAILPAGINA
--------------------------------------------------------------------- */
.update-detail {
width: 100%; margin: 0 auto;
padding: 40px 30px 100px;
box-sizing: border-box;
}
.update-detail .update-detail-datum {color: #000;
}
.update-detail-titel {
margin: 0;
padding: 0 0 14px 0;
border-bottom: 2px solid #c47600;
font-family: DINosaur, Icons !important;
font-size: 3rem !important;
line-height: 1.1 !important;
font-weight: 400 !important;
color: #c47600 !important;
text-align: center !important;
}
/* CONTROLEER: komt niet voor in de Atelier-update; misschien wel in andere */
.update-detail-intro {
margin-top: 34px;
font-size: 1.8rem;
line-height: 1.35;
}
.update-detail-tekst {
max-width: 760px;
}
.update-detail-tekst p {
margin: 0 0 1.2em 0;
padding: 0;
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
line-height: 1.45 !important;
color: #000 !important;
text-align: left !important;
}
.update-detail-afbeeldingen {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 25px;
width: 100%;
margin-top: 45px;
}
.update-detail-afbeelding { margin: 0;
}
.update-detail-afbeelding img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
transition: opacity 0.25s ease !important;
}
.update-detail-afbeelding:hover img {
opacity: 0.75 !important;
}
/* =====================================================================
08 SPECIAL / CARGO
Cargo-eigen regels blijven ongewijzigd, inclusief de !page_bgcolor-achtige commentaren.
===================================================================== */
sub {
top: 0.3em;
}
sup {
top: -0.4em;
}
s {
text-decoration: line-through;
}
ul,
ol {
margin: 0;
padding: 0 0 0 2em;
}
blockquote {
margin: 0;
padding: 0 0 0 2em;
}
hr {
background: #d59e63;
border: 0;
height: 4px;
display: block;
}
.gallery_image_caption {
margin-top: 1.2rem;
margin-bottom: 0.5rem;
font-size: 1.1rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.35);
font-family: DINosaur, Icons;
font-style: normal;
line-height: 1.4;
text-align: center;
}
.loading[data-loading] {
position: fixed;
bottom: 8px;
left: 8px;
}
[data-predefined-style="true"] bodycopy {
font-size: 1.6rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
font-family: DINosaur, Icons;
font-style: normal;
line-height: 1.3;
}
[data-predefined-style="true"] h1 {
font-family: DINosaur, Icons;
font-style: normal;
font-weight: 400;
padding: 0;
margin: 0;
font-size: 3.4rem;
line-height: 1.2;
color: rgba(0, 0, 0, 0.9);
}
[data-predefined-style="true"] h2 {
font-family: DINosaur, Icons;
font-style: normal;
font-weight: 400;
padding: 0;
margin: 0;
color: rgba(0, 0, 0, 0.85);
font-size: 2.3rem;
line-height: 1.2;
}
[data-predefined-style="true"] small {
display: inline-block;
font-size: 1.2rem;
line-height: 1.3;
font-family: DINosaur, Icons;
font-style: normal;
font-weight: 400;
color: rgba(0, 0, 0, 0.7);
}
[data-css-preset] .page {
background-color: initial /*!page_bgcolor*/;
}
.mobile .page,
[data-css-preset].mobile .page {
position: relative;
min-height: 10px;
max-width: 100%;
width: 100%;
background-color: transparent /*!page_bgcolor*/;
}
[data-css-preset] .container {
margin-left: auto /*!content_center*/;
margin-right: auto /*!content_center*/;
text-align: left /*!text_left*/;
}
[data-css-preset] body {
background-color: rgb(255, 255, 255) /*!body_bgcolor*/;
}
[data-css-preset] .container_width {
width: 87% /*!content_center*/;
}
[data-css-preset] .content_padding {
padding-top: 4rem /*!main_margin*/;
padding-bottom: 4rem /*!main_margin*/;
padding-left: 4rem /*!main_margin*/;
padding-right: 4rem /*!main_margin*/;
}
[data-css-preset] text-limit {
display: inline-block /*!text_width*/;
max-width: 66rem /*!text_width*/;
}
div[thumbnails] {
justify-content: flex-start;
}
[data-css-preset] .thumbnails {
background-color: transparent /*!thumbnails_bgcolor*/;
}
[data-css-preset] .thumbnails_width {
width: 100% /*!thumbnails_width*/;
}
[data-css-preset] [thumbnails-pad] {
padding: 2.95rem /*!thumbnails_padding*/;
}
[data-css-preset] [thumbnails-gutter] {
margin: -5.9rem /*!thumbnails_padding*/;
}
[data-css-preset] [responsive-layout] [thumbnails-pad] {
padding: 2rem /*!responsive_thumbnails_padding*/;
}
[data-css-preset] [responsive-layout] [thumbnails-gutter] {
margin: -4rem /*!responsive_thumbnails_padding*/;
}
.thumbnails .thumb_image {
margin-top: 4rem;
outline: 0px solid rgba(0,0,0,.12);
outline-offset: -1px;
box-shadow: 0 0 30px rgba(0,0,0,0);
}
.thumbnails .title {
margin-top: 0.1rem;
margin-bottom: 0.3rem;
font-size: 0.8rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.4);
font-family: DINosaur, Icons;
font-style: normal;
line-height: 1.5;
text-align: center;
}
.thumbnails .tags {
margin-top: 0.3rem;
margin-bottom: 0.5rem;
font-size: 1.3rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.4);
font-family: "Din", Icons;
font-style: normal;
line-height: 1.2;
text-align: left;
}
.thumbnails .has_title .tags {
margin-top: 0rem;
}
[data-css-preset] #site_menu_button {
color: rgba(0, 0, 0, 0.75);
line-height: 1;
font-size: 28px /*!site_menu_button*/;
padding: 6px;
background: rgba(255, 255, 255, 0);
position: fixed;
top: 3rem /*!site_menu_button*/;
right: 3rem /*!site_menu_button*/;
}
#site_menu_button.custom_icon {
width: 40px;
height: auto;
}
#site_menu_button.active {
display: none;
}
#site_menu {
font-family: DINosaur, Icons;
background: rgba(20, 20, 20, 0.95);
font-size: 20px;
font-style: normal;
font-weight: 400;
padding: 20px 30px 90px 30px;
max-width: 400px;
min-width: 300px;
text-align: left;
display: flex;
justify-content: flex-start;
}
#site_menu .close {
display: none;
color: rgba(255, 255, 255, 0.4);
line-height: .85em;
font-size: 45px;
}
#site_menu .break {
height: 28px;
}
#site_menu .indent {
margin-left: 28px;
}
[data-css-preset] #shop_button {
color: rgba(0, 0, 0, 0.85);
background: transparent;
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: 1;
position: fixed;
padding: 6px;
bottom: 3rem /*!shop_button*/;
right: 3rem /*!shop_button*/;
}
#shop_button.text {
font-size: 2.7rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
font-family: "Neue Haas Grotesk", Icons;
font-style: normal;
padding: 0;
line-height: 1.2;
}
#shop_button.custom_icon {
width: 40px;
height: auto;
}
.shop_product {
width: 100%;
max-width: 22rem;
position: relative;
display: block;
}
.shop_product .price {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
font-size: 2rem;
line-height: 1;
color: rgba(0, 0, 0, 0.85);
display: block;
margin-bottom: 1rem;
}
.shop_product .dropdown {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
font-size: 1.4rem;
display: inline-block;
width: 100%;
border: 1px solid rgba(0,0,0,.2);
background: white url(https://static.cargo.site/assets/images/select-arrows.svg) no-repeat right;
margin-bottom: 1rem;
line-height: 1.2;
padding: .7rem 1rem;
}
.shop_product .button {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 1.4rem;
background: rgba(0, 0, 0, .75);
color: rgba(255,255,255,1);
flex: 0 0 50%;
text-align: left;
display: inline-block;
line-height: 1;
padding: .8rem 1rem .9rem;
}
[data-css-preset] .quick-view {
padding-top: 2.5rem /*!quick_view_padding*/;
padding-bottom: 2.5rem /*!quick_view_padding*/;
padding-left: 2.5rem /*!quick_view_padding*/;
padding-right: 2.5rem /*!quick_view_padding*/;
height: 100% /*!quick_view_height*/;
width: 100% /*!quick_view_width*/;
}
[data-css-preset] .quick-view-background {
background: rgba(255, 255, 255, 0.95) /*!quick_view_bgcolor*/;
}
.quick-view-caption {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Cantarell,"Open Sans",sans-serif;
transition: 100ms opacity ease-in-out;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 2rem 0;
text-align: center;
font-size: 1.8rem;
}
.quick-view-caption span {
padding: 0.5rem 1rem;
display: inline-block;
background: rgba(0,0,0,0.4);
color: white;
}
.quick-view-navigation .left-arrow {
left: 10px;
}
.quick-view-navigation .right-arrow {
right: 10px;
}
.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
height: 36px;
width: 36px;
}
.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
stroke: #fff;
stroke-width: 1.5px;
}
.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
stroke: #000;
stroke-width: 2.5px;
opacity: 0.6;
}
.quick-view-navigation .close-button {
top: 10px;
right: 10px;
width: 36px;
height: 36px;
}
.quick-view-navigation .close-button .inner-color {
stroke: #fff;
stroke-width: 1.5px;
}
.quick-view-navigation .close-button .outer-color {
stroke: #000;
stroke-width: 2.5px;
opacity: 0.6;
}
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
height: 36px;
width: 36px;
}
.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
stroke: #888;
stroke-width: 1.5px;
}
.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
stroke: #888;
stroke-width: 2.5px;
}
.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
width: 36px;
height: 36px;
}
.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
stroke: #888;
stroke-width: 1.5px;
}
.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
stroke: #888;
stroke-width: 2.5px;
opacity: 0.6;
}
.feed .content_container .page {
border-top: 1px dashed rgba(0, 0, 0, 0.2);
}
.feed .content_container .page_container:first-child .page {
border-top: 0;
}
.audio-player {
max-width: 36rem;
height: 3.3rem;
outline: 1px solid rgba(0,0,0,0.15);
color: rgba(0, 0, 0, 0.6);
background: #fff;
font-size: 1.2rem;
line-height: 1.3;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Open Sans", sans-serif, "Sans Serif", Icons;
font-style: normal;
font-weight: 400;
text-align: left;
margin: 1px 1px 1em 1px;
}
.audio-player .separator {
width: 1px;
background-color: rgba(0,0,0,0.15);
}
.audio-player .button {
background: transparent;
cursor: pointer;
fill: rgba(0, 0, 0, 0.85);
}
.audio-player .icon {
fill: rgba(0, 0, 0, 0.85);
padding: 30%;
width: 100%;
margin: auto;
}
.audio-player .buffer {
background: rgba(0,0,0,0.03);
}
.audio-player .progress {
background: rgba(0,0,0,0.1);
}
.audio-player .progress-indicator {
border: 1px solid rgba(0, 0, 0, 0.7);
width: 1px;
height: 100%;
right: 0;
position: absolute;
cursor: ew-resize;
}
.audio-player .note-icon {
height: 100%;
width: 3.8rem;
padding: 1rem;
fill: rgba(0, 0, 0, 0.5);
}
.audio-player .current-time {
padding-left: 1rem;
}
.audio-player .total-time {
padding-right: 3rem;
}
.vidwrapper {
width: 100%;
max-width: 800px;
margin: 3em auto;
}
@media only screen and (min-width: 601px) {
.boek-preview {
border-bottom: 2px solid #c47600;
padding-bottom: 30px;
}
.boek-preview + .book-order {
border-top: none !important;
margin-top: 0;
}
}
.buitenlandse-vertalingen-pagina .vertaling-caption {
text-align: center !important;
font-size: 1.2rem !important;
line-height: 1.2 !important;
margin: 8px 0 0 0 !important;
padding: 0 !important;
color: #000 !important;
}
.kleurplaat-pretpark-poepfabriek .book-intro {
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
.buitenlandse-vertalingen-pagina .vertaling-intro {
text-align: left !important;
width: 100% !important;
display: block !important;
}
.over-tjarko-pagina .book-intro p {
font-family: DINosaur, Icons !important; font-size: 1.6rem !important; line-height: 1.4 !important;
}
.opdracht-intro {
max-width: 760px !important; margin-left: auto !important; margin-right: auto !important;
}
.opdracht-intro p {
font-family: DINosaur, Icons !important; font-size: 1.6rem !important; line-height: 1.4 !important; text-align: left !important;
}
/* CONTROLEER: de NRC-pagina gebruikt .nrc-logo-titel in plaats van dit.
Alleen in gebruik als een andere opdrachtpagina nog .opdrachtgever-logo heeft. */
.opdrachtgever-logo {
width: 100% !important; max-width: 760px !important; margin: 10px auto 35px auto !important; text-align: left !important;
}
.opdrachtgever-logo img {
display: block !important; width: auto !important; max-width: 180px !important; height: auto !important; margin: 0 !important;
}
.nrc-media-pagina .image-gallery {
margin-top: 0 !important;
}
.nrc-media-pagina .image-gallery img {
max-width: 100% !important; height: auto !important;
}
.nrc-media-pagina .image-gallery a.image-link:hover {
opacity: 1 !important;
}
.trouw-pagina .image-gallery {
margin-top: 0 !important;
}
/* =====================================================================
09 RESPONSIVE
===================================================================== */
@media (max-width: 600px) {
/* Compactere contactknoppen */
.contact-button {
height: 46px !important;
min-height: 46px !important;
padding: 0 15px !important;
font-size: 1.6rem !important;
line-height: 1 !important;
border-radius: 4px;
font-weight: 400 !important;
}
/* Minder witruimte tussen de onderdelen */
.contact-block {
margin-top: 15px !important;
padding-top: 5px !important;
}
.contact-block > strong {
margin-bottom: 8px !important;
}
.contact-mail {
margin-top: 10px !important;
}
.newsletter-block {
margin-top: 20px !important;
}
}
@media only screen and (max-width: 600px) {
/* Alle drie de contactknoppen */
a.contact-button,
body.mobile a.contact-button,
.mobile a.contact-button,
[data-css-preset].mobile a.contact-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
/* Geen vaste hoge knop: hoogte volgt de tekst */
height: auto !important;
min-height: 0 !important;
/* Kleine ruimte boven/onder, grotere tekst */
padding: 6px 12px 8px 12px !important;
box-sizing: border-box !important;
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
font-weight: 400 !important;
line-height: 1 !important;
color: #fff !important;
background-color: #c47600 !important;
border: none !important;
border-radius: 4px !important;
text-decoration: none !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
/* Hover/focus/active */
a.contact-button:hover,
a.contact-button:focus,
a.contact-button:active,
body.mobile a.contact-button:hover,
body.mobile a.contact-button:focus,
body.mobile a.contact-button:active {
color: #fff !important;
background-color: #c47600 !important;
opacity: 0.85 !important;
}
/* Compactere verticale ruimte op mobiel */
body.mobile .contact-block,
.mobile .contact-block {
margin-top: 10px !important;
padding-top: 3px !important;
}
body.mobile .contact-block > strong,
.mobile .contact-block > strong {
margin-bottom: 5px !important;
}
body.mobile .contact-mail,
.mobile .contact-mail {
margin-top: 6px !important;
}
body.mobile .newsletter-block,
.mobile .newsletter-block {
margin-top: 14px !important;
}
}
/* Lezingen mobiel — dode regels (.lezingen-aanvraag, .lezingen-gallery,
.lezingen-pagina width) verwijderd; margin-top van .lezingen-intro werd
onderaan het bestand overschreven. */
@media only screen and (max-width: 600px) {
.lezingen-intro {
max-width: none;
}
.lezingen-intro p {
margin-bottom: 0.8em;
}
}
@media only screen and (max-width: 600px) {
.boeken-pagina h1 {
font-size: 2.8rem !important;
line-height: 1.2 !important;
}
.boeken-pagina {
width: 100%;
max-width: 100%;
}
.boeken-pagina h1 {
text-align: center;
}
.boeken-pagina .book-intro {
max-width: none;
margin-top: 10px;
}
.boeken-pagina .book-intro p {
margin-bottom: 0.8em;
}
.boeken-pagina .book-intro p:first-child {
margin-bottom: 18px;
}
.boeken-pagina .book-intro p:nth-child(2) {
margin-top: 20px;
margin-bottom: 25px;
}
.boeken-pagina .book-intro p:nth-child(2) img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
object-fit: contain !important;
margin-left: auto !important;
margin-right: auto !important;
}
.boeken-pagina .book-order {
max-width: none;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 12px;
border-top: 2px solid #c47600;
}
.boeken-pagina .book-order > strong {
margin-bottom: 5px;
}
.boeken-pagina .book-order .contact-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: auto !important;
min-height: 0 !important;
padding: 7px 12px !important;
box-sizing: border-box !important;
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
font-weight: 400 !important;
line-height: 1 !important;
color: #fff !important;
background-color: #df3f1f !important;
border: none !important;
border-radius: 4px !important;
text-decoration: none !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.boeken-pagina .book-order .contact-button:hover,
.boeken-pagina .book-order .contact-button:focus,
.boeken-pagina .book-order .contact-button:active {
color: #fff !important;
background-color: #c47600 !important;
opacity: 0.85 !important;
}
/* =========================================
OVERZICHT BOEKEN - MOBIEL
========================================= */
.boeken-pagina .image-gallery {
margin-top: 20px;
}
.boeken-pagina .image-gallery a.image-link:hover {
opacity: 1 !important;
}
.boeken-pagina .boeken-nieuw {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
margin-top: 20px !important;
margin-bottom: 0 !important;
}
.boeken-pagina .boeken-nieuw a.image-link:hover img {
opacity: 1 !important;
transform: none !important;
}
.boeken-pagina .boeken-nieuw + .image-gallery {
border-top: 2px solid #c47600 !important;
padding-top: 30px !important;
margin-top: 30px !important;
}
.boeken-pagina .boeken-nieuwsbrief {
margin-top: 45px;
}
.boeken-pagina .boeken-nieuwsbrief hr {
margin-bottom: 25px;
}
.boeken-pagina .boeken-nieuwsbrief-tekst {
margin-bottom: 15px;
}
.boeken-pagina .image-gallery .gallery_card:hover img {
opacity: 1 !important;
transform: none !important;
}
}
@media only screen and (max-width: 600px) {
.boeken-pagina .book-preview {
width: 100%;
max-width: none;
margin-top: 35px;
margin-bottom: 25px;
}
.boeken-pagina .book-preview h2 {
font-size: 2rem !important;
margin-bottom: 15px !important;
}
.boeken-pagina .book-preview-pages {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
@media only screen and (max-width: 600px) {
.boek-preview {
margin-top: 15px;
}
.boek-preview-title {
margin-bottom: 12px;
}
.boek-preview-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
}
@media only screen and (max-width: 600px) {
.boek-preview {
border-bottom: 2px solid #c47600;
padding-bottom: 20px;
}
.boek-preview + .book-order {
border-top: none !important;
margin-top: 0;
}
}
@media only screen and (max-width: 600px) {
a.contact-button,
body.mobile a.contact-button,
.mobile a.contact-button,
[data-css-preset].mobile a.contact-button {
padding-top: 6px !important;
padding-bottom: 10px !important;
line-height: 1.2 !important;
}
}
@media only screen and (max-width: 600px) {
.kleurplaat-pretpark-poepfabriek .boek-preview {
max-width: 100% !important;
}
.kleurplaat-pretpark-poepfabriek .boek-preview-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
}
@media only screen and (max-width: 600px) {
.contact-pagina .contact-info-block {
max-width: 100% !important;
}
.contact-pagina .contact-photo-middle {
max-width: 100% !important;
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.contact-pagina .newsletter-block p {
font-size: clamp(0.72rem, 3.2vw, 0.95rem) !important;
}
}
/* Eerste nieuwsbrief-blok (alleen margin-top: 8px) verwijderd:
het volgende blok zet hetzelfde met !important. */
@media only screen and (max-width: 600px) {
.nieuwsbrief-pagina .nieuwsbrief-formulier {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 8px !important;
}
.nieuwsbrief-pagina .nieuwsbrief-formulier iframe {
max-width: 100% !important;
}
}
@media only screen and (max-width: 600px) {
.nieuwsbrief-pagina .nieuwsbrief-intro p {
font-size: 1.35rem !important;
line-height: 1.4 !important;
}
.nieuwsbrief-pagina .nieuwsbrief-formulier,
.nieuwsbrief-pagina .nieuwsbrief-formulier label,
.nieuwsbrief-pagina .nieuwsbrief-formulier p,
.nieuwsbrief-pagina .nieuwsbrief-formulier span,
.nieuwsbrief-pagina .nieuwsbrief-formulier div,
.nieuwsbrief-pagina .nieuwsbrief-formulier input,
.nieuwsbrief-pagina .nieuwsbrief-formulier textarea,
.nieuwsbrief-pagina .nieuwsbrief-formulier select,
.nieuwsbrief-pagina .nieuwsbrief-formulier button,
.nieuwsbrief-pagina .nieuwsbrief-formulier input[type="submit"] {
font-size: 1.6rem !important;
}
}
/* Updates mobiel — de regels voor .updates-overzicht, .update-item,
.update-datum, .update-afbeelding, .update-intro, .update-leesmeer en
.update-terug staan niet meer in de HTML en zijn verwijderd. */
@media only screen and (max-width: 600px) {
.updates-pagina {
width: 100% !important;
max-width: 100% !important;
}
}
@media only screen and (max-width: 600px) {
.update-detail {
max-width: 100% !important;
}
.update-detail p {
font-size: 1.6rem !important;
line-height: 1.4 !important;
}
.update-detail-afbeelding {
margin-bottom: 22px !important;
}
}
@media only screen and (max-width: 600px) {
.boeken-pagina > div[grid-row] > div[grid-col] > div > h1 {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
/* Homepage mobiel — alleen .homepage-titel is nog in gebruik;
de regels voor .homepage-intro, .homepage-nieuw, .homepage-updates,
.updates-titel en .updates-overzicht zijn verwijderd. */
@media only screen and (max-width: 600px) {
.homepage-titel {
font-size: 1.6rem !important;
margin-bottom: 18px !important;
}
}
/* ---------------------------------------------------------------------
UPDATE PAGINA'S — RESPONSIVE
--------------------------------------------------------------------- */
@media (max-width: 700px) {
.updates-pagina {
max-width: 100%;
padding: 30px 20px 70px;
}
.update-post {
display: block;
padding-bottom: 35px;
}
.update-post-afbeelding {
margin-bottom: 22px;
}
.update-post-datum {
font-size: 1.1rem !important;
}
.update-post-titel {
font-size: 1.8rem !important;
margin-bottom: 14px;
}
.update-post-intro {
font-size: 1.5rem !important;
}
.update-post-link {
font-size: 1.35rem !important;
}
.update-scheiding {
margin-bottom: 35px;
}
.update-detail {
max-width: 100%;
padding: 30px 20px 70px;
}
.update-detail-titel {
font-size: 2.4rem !important;
margin-bottom: 26px;
}
.update-detail-intro {
font-size: 1.6rem !important;
margin-bottom: 26px;
}
.update-detail-tekst p {
font-size: 1.5rem !important;
line-height: 1.45 !important;
}
.update-detail-afbeeldingen {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 35px;
}
}
/* =====================================================================
HOMEPAGE — RUSTIGE EINDOPMAAK
(Het eerdere blok "FINETUNING" is verwijderd: elke regel erin werd
door dit blok opnieuw en anders gezet.)
===================================================================== */
.homepage-boeken { margin-left: auto;
margin-right: auto;
}
/* Sectiekoppen */
.homepage-boeken .homepage-titel {
margin: 0 0 24px;
font-size: 2rem;
line-height: 1.15;
font-weight: 400;
text-align: center;
color: #c47600;
}
/* Boeken */
.homepage-boeken .boeken-nieuw {
margin-bottom: 18px;
}
.homepage-boeken .meer-boeken {font-size: 1.35rem;
}
.homepage-boeken .homepage-meer-updates {font-size: 1.35rem;
}
/* Nieuwsbrief */
.homepage-boeken .boeken-nieuwsbrief {
margin-top: 0;}
.homepage-boeken .boeken-nieuwsbrief-tekst {
max-width: 600px;
margin: 0 auto 22px;
font-size: 1.35rem;
line-height: 1.4;
}
/* Mobiel */
@media (max-width: 700px) {
.homepage-boeken {
max-width: 100%;
}
.homepage-boeken .homepage-titel {
margin-bottom: 20px;
font-size: 1.65rem;
}
.homepage-boeken .meer-boeken {
margin-bottom: 46px;
font-size: 1.25rem;
}
.homepage-boeken .homepage-meer-updates {
font-size: 1.25rem;
}
.homepage-boeken .boeken-nieuwsbrief-tekst {
font-size: 1.25rem;
}
}
/* =====================================================================
HOMEPAGE — LINK ONDER DE UPDATES
===================================================================== */
/* =========================================================
UPDATE DETAIL — TERUG NAAR ALLE UPDATES
========================================================= */
.update-detail-terug {
margin-top: 55px;
padding-top: 20px;
border-top: 1px solid #c47600;
}
.update-detail-terug a {
color: #c47600 !important;
text-decoration: none;
font-size: 1.5rem;
line-height: 1.2;
font-weight: 400;
transition: color 0.2s ease, opacity 0.2s ease;
}
.update-detail-terug a:hover,
.update-detail-terug a:focus {
color: #c47600 !important;
opacity: 0.7;
}
/* ---------------------------------------------------------
MOBIEL
--------------------------------------------------------- */
@media (max-width: 700px) {
.update-detail-terug {
margin-top: 40px;
padding-top: 18px;
}
.update-detail-terug a {
font-size: 1.4rem;
}
}
/* =========================================================
UPDATES — LAATSTE UITLIJNING
========================================================= */
/* Titel hoger, gelijker aan de positie van de hoofdtitels op andere pagina's */
.updates-pagina {
padding-top: 0 !important;
}
/* =========================================================
HOMEPAGE — LIJN ONDER MEER BOEKEN
========================================================= */
.homepage-boeken .meer-boeken {
text-align: center !important;
margin-bottom: 35px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid #c47600 !important;
}
/* Titel LAATSTE NIEUWS: alleen display blijft over; margin en breedte
worden in het blok "3 LAATSTE UPDATES" verderop bepaald. */
.homepage-boeken .homepage-laatste-update-wrapper .homepage-titel {
display: block;
}
/* =========================================================
HOMEPAGE — LIJNEN OPSCHONEN
========================================================= */
.homepage-boeken .boeken-nieuwsbrief hr {
border: 0 !important;
border-top: 1px solid #c47600 !important;
height: 0 !important;
margin: 0 0 30px !important;
}
/* =========================================================
UPDATE DETAIL — VASTE OPMAAK DATUM
========================================================= */
.update-detail .update-detail-datum {
display: block !important;
width: 100% !important;
margin: 0 0 35px !important;
padding: 0 !important;
text-align: center !important;
font-size: 1.15rem !important;
line-height: 1.2 !important;
font-weight: 400 !important;
}
@media (max-width: 700px) {
.update-detail .update-detail-datum {
font-size: 1.1rem !important;
margin-bottom: 30px !important;
}
}
/* =========================================
HOMEPAGE - MOBIEL TEKSTGROOTTE NIEUWSBRIEF
========================================= */
@media (max-width: 700px) {
.homepage-boeken .boeken-nieuwsbrief p {
font-size: 1.8rem !important;
line-height: 1.4 !important;
}
}
/* =========================================
OVER TJARKO
Hier stonden negen opeenvolgende blokken die steeds lijn en
portretgrootte opnieuw instelden. Wat overblijft is het eindresultaat.
========================================= */
.over-tjarko-pagina .book-intro {
border: none !important;
}
.over-tjarko-pagina .book-intro > div,
.over-tjarko-pagina .book-intro > div p {
border-bottom: none !important;
}
.over-tjarko-pagina .book-intro p:first-child {
border-top: none !important;
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 28px !important;
}
/* Portret: uniek kenmerk (#tjarko-portret) op de
in de HTML,
zodat deze regel altijd wint, ook als een andere, algemenere regel
elders in dit bestand toevallig hetzelfde element raakt.
Vereist in de HTML:
*/
#tjarko-portret img {
display: block !important;
width: 360px !important;
max-width: 360px !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 700px) {
#tjarko-portret img {
/* Duidelijk kleiner dan de tekstkolom, zodat het portret er
bescheiden "binnen" valt in plaats van de volle breedte */
width: 42% !important;
max-width: 170px !important;
min-width: 110px !important;
height: auto !important;
}
}
/* =========================================
UPDATES — NIEUWSBRIEFBLOK
========================================= */
/* Geen extra scheidingslijnen vanuit het nieuwsbriefblok */
.updates-pagina .updates-nieuwsbrief,
.updates-pagina .updates-nieuwsbrief-intro,
.updates-pagina .updates-nieuwsbrief > div {
border-top: none !important;
border-bottom: none !important;
}
.updates-pagina .updates-nieuwsbrief {
padding-top: 0 !important;
}
/* Nieuwsbrieftekst: groot */
.updates-pagina .updates-nieuwsbrief-tekst,
.updates-pagina .updates-nieuwsbrief > div p {
font-size: 1.6rem !important;
line-height: 1.4 !important;
}
/* Mobiel: dezelfde tekstgrootte als de andere introductieteksten */
@media (max-width: 700px) {
.updates-pagina .updates-nieuwsbrief-tekst,
.updates-pagina .updates-nieuwsbrief > div p {
font-size: 1.8rem !important;
line-height: 1.4 !important;
}
}
/* =========================================
LEZINGEN & WORKSHOPS — INTROREGEL (NIET ACTIEF)
Bedoeld: de vetgedrukte regel "ALLE LEEFTIJDEN • BIBLIOTHEKEN • ..."
op één regel. In de HTML staat die regel nu in een
, terwijl deze
regels op een
mikken. Daarom werken ze nu niet. Wil je de regel
op één regel? Zet er dan een class op (bijv. lezingen-intro-regel)
en haal de commentaartekens hieronder weg.
.lezingen-pagina .lezingen-tekst .lezingen-intro-regel {
white-space: nowrap !important;
font-size: 0.85rem !important;
line-height: 1.2 !important;
text-align: center !important;
}
@media (max-width: 700px) {
.lezingen-pagina .lezingen-tekst .lezingen-intro-regel {
font-size: clamp(0.48rem, 2.15vw, 0.85rem) !important;
white-space: nowrap !important;
width: 100% !important;
}
}
========================================= */
/* =========================================
V45 — DESKTOP BINNEN HET BROWSER-VENSTER
Voorkomt dat onderdelen horizontaal buiten
het zichtbare venster vallen.
========================================= */
html,
body {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow-x: clip !important;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Hoofdcontainer van Cargo nooit breder dan het venster */
#cwhohi {
width: 100% !important;
max-width: 100vw !important;
min-width: 0 !important;
overflow-x: clip !important;
}
/* Afbeeldingen en embeds blijven binnen hun beschikbare breedte */
img,
video,
iframe,
svg {
max-width: 100% !important;
}
/* Tekstblokken en links mogen niet buiten hun container komen */
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button {
max-width: 100%;
}
/* Lange nieuwsbrief- en andere links mogen afbreken wanneer
de beschikbare ruimte kleiner wordt. */
.nieuwsbrief-pagina a,
.updates-pagina a,
.homepage-boeken a {
overflow-wrap: anywhere;
}
/* -----------------------------------------
KNOPPEN / NIEUWSBRIEF
Lange knopteksten blijven binnen de pagina.
----------------------------------------- */
.updates-nieuwsbrief-knop,
.boeken-nieuwsbrief a,
.meer-boeken a,
.homepage-meer-updates a {
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
/* =========================================
HOMEPAGE NIEUWSBRIEF — BINNEN VENSTER HOUDEN
Gerichte correctie voor het nieuwsbriefblok.
========================================= */
.boeken-nieuwsbrief {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: visible !important;
}
.boeken-nieuwsbrief .boeken-nieuwsbrief-tekst {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
}
.boeken-nieuwsbrief .contact-button {
display: inline-block !important;
max-width: 100% !important;
box-sizing: border-box !important;
white-space: normal !important;
}
.boeken-nieuwsbrief hr {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
@media (max-width: 1200px) {
.boeken-nieuwsbrief {
width: 100% !important;
max-width: 100% !important;
}
.boeken-nieuwsbrief .contact-button {
white-space: normal !important;
}
}
/* Voorkom horizontaal uitlopen van het homepage-contentblok,
zonder de inhoud van andere pagina's te beïnvloeden. */
.homepage-laatste-update-wrapper,
.homepage-boeken {
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
HOMEPAGE NIEUWSBRIEF — DEFINITIEVE BREEDTE EN KNOP
De nieuwsbrief blijft binnen dezelfde contentbreedte als
de homepage en de tekst in de knop wordt exact gecentreerd.
========================================================= */
.homepage-boeken .boeken-nieuwsbrief {
width: 100% !important;
max-width: 1050px !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
text-align: center !important;
}
.homepage-boeken .boeken-nieuwsbrief hr {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
.homepage-boeken .boeken-nieuwsbrief .contact-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
width: auto !important;
max-width: calc(100% - 24px) !important;
height: 40px !important;
min-height: 40px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 16px !important;
box-sizing: border-box !important;
text-align: center !important;
line-height: 1 !important;
white-space: nowrap !important;
}
@media (max-width: 700px) {
.homepage-boeken .boeken-nieuwsbrief {
width: 100% !important;
max-width: 100% !important;
}
.homepage-boeken .boeken-nieuwsbrief .contact-button {
height: auto !important;
min-height: 40px !important;
max-width: calc(100% - 20px) !important;
padding: 6px 12px !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
}
/* =========================================================
HOMEPAGE — DESKTOPVENSTER COMPACT BIJ BEPERKTE HOOGTE
Het eerdere blok met dezelfde media query (en alle regels voor
#homepage-laatste-update) is verwijderd: dit blok overschreef
elke regel ervan en de oude structuur staat niet meer in de HTML.
========================================================= */
@media (min-width: 701px) and (max-height: 950px) {
.homepage-boeken {
max-width: 1050px !important;
}
/* Titel NIEUWSTE BOEKEN */
.homepage-boeken .homepage-titel {
margin-bottom: 14px !important;
}
/* Boekenrij compacter */
.homepage-boeken .boeken-nieuw {
margin-top: 0 !important;
margin-bottom: 8px !important;
gap: 18px !important;
}
.homepage-boeken .boeken-nieuw a.image-link img {
max-height: 210px !important;
height: 210px !important;
width: auto !important;
object-fit: contain !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* MEER BOEKEN */
.homepage-boeken .meer-boeken {
margin-top: 0 !important;
margin-bottom: 28px !important;
padding-bottom: 8px !important;
}
/* Titel LAATSTE NIEUWS */
.homepage-boeken .homepage-laatste-update-wrapper {
margin-bottom: 12px !important;
}
.homepage-boeken .homepage-laatste-update-wrapper .homepage-titel {
margin-bottom: 12px !important;
}
/* Nieuwsbrief direct aansluitend en compact */
.homepage-boeken .boeken-nieuwsbrief {
margin-top: 0 !important;
padding-top: 0 !important;
}
.homepage-boeken .boeken-nieuwsbrief hr {
margin: 0 0 12px !important;
}
.homepage-boeken .boeken-nieuwsbrief .boeken-nieuwsbrief-tekst {
margin: 0 auto 10px !important;
font-size: 1.25rem !important;
line-height: 1.25 !important;
max-width: 800px !important;
}
.homepage-boeken .boeken-nieuwsbrief .contact-button {
min-height: 36px !important;
height: 36px !important;
padding: 0 16px !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
}
}
/* Bij zeer lage desktopvensters nog één stap compacter. */
@media (min-width: 701px) and (max-height: 820px) {
.homepage-boeken .boeken-nieuw a.image-link img {
max-height: 175px !important;
height: 175px !important;
}
.homepage-boeken .meer-boeken {
margin-bottom: 20px !important;
}
.homepage-boeken .homepage-laatste-update-wrapper .homepage-titel {
margin-bottom: 8px !important;
}
.homepage-boeken .boeken-nieuwsbrief .boeken-nieuwsbrief-tekst {
font-size: 1.15rem !important;
}
}
/* =========================================================
BOEKENPAGINA — COMPACT EN MEE SCHALEND OP DESKTOP
---------------------------------------------------------
Zelfde principe als de homepage:
- boekcovers schalen mee met de schermhoogte;
- tussenruimtes worden compacter;
- de BOEKEN-pagina blijft gewoon scrollbaar;
- mobiele opmaak blijft ongewijzigd.
========================================================= */
@media (min-width: 701px) {
/* -----------------------------------------
BOEKEN — NIEUWSTE BOEKEN
----------------------------------------- */
.boeken-pagina .boeken-nieuw {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: clamp(12px, 2vw, 28px) !important;
width: 100% !important;
margin-top: clamp(12px, 2vh, 22px) !important;
margin-bottom: 0 !important;
align-items: start !important;
}
.boeken-pagina .boeken-nieuw a.image-link {
display: block !important;
width: 100% !important;
text-align: center !important;
}
.boeken-pagina .boeken-nieuw a.image-link img {
display: block !important;
width: auto !important;
height: clamp(145px, 23vh, 215px) !important;
max-width: 100% !important;
max-height: 215px !important;
object-fit: contain !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* -----------------------------------------
LIJN ONDER DE NIEUWSTE BOEKEN
----------------------------------------- */
.boeken-pagina .boeken-nieuw + .image-gallery {
margin-top: clamp(18px, 3vh, 32px) !important;
padding-top: clamp(18px, 3vh, 32px) !important;
border-top: 1px solid #c47600 !important;
}
/* -----------------------------------------
OVERIGE BOEKEN
----------------------------------------- */
.boeken-pagina .image-gallery {
width: 100% !important;
margin-top: clamp(18px, 3vh, 32px) !important;
}
.boeken-pagina .image-gallery .gallery_card img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
object-fit: contain !important;
}
/* -----------------------------------------
NIEUWSBRIEF
----------------------------------------- */
.boeken-pagina .boeken-nieuwsbrief {
width: 100% !important;
margin-top: clamp(28px, 4vh, 45px) !important;
margin-bottom: 30px !important;
text-align: center !important;
}
.boeken-pagina .boeken-nieuwsbrief hr {
width: 100% !important;
margin: 0 0 clamp(10px, 1.5vh, 16px) !important;
border: 0 !important;
border-top: 1px solid #c47600 !important;
height: 0 !important;
min-height: 0 !important;
max-height: none !important;
background: none !important;
}
.boeken-pagina .boeken-nieuwsbrief-tekst {
max-width: 800px !important;
margin: 0 auto clamp(8px, 1.2vh, 12px) !important;
font-size: clamp(1rem, 2vh, 1.25rem) !important;
line-height: 1.2 !important;
}
.boeken-pagina .boeken-nieuwsbrief .contact-button {
height: clamp(32px, 4.5vh, 40px) !important;
min-height: clamp(32px, 4.5vh, 40px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 15px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: clamp(1rem, 2vh, 1.35rem) !important;
line-height: 1 !important;
}
}
/* =========================================================
EXTRA COMPACT — KLEINERE DESKTOPSCHERMEN
========================================================= */
@media (min-width: 701px) and (max-height: 800px) {
.boeken-pagina .boeken-nieuw {
gap: 14px !important;
margin-top: 10px !important;
}
.boeken-pagina .boeken-nieuw a.image-link img {
height: 145px !important;
max-height: 145px !important;
}
.boeken-pagina .boeken-nieuw + .image-gallery {
margin-top: 18px !important;
padding-top: 18px !important;
}
.boeken-pagina .boeken-nieuwsbrief {
margin-top: 25px !important;
}
.boeken-pagina .boeken-nieuwsbrief-tekst {
font-size: 1rem !important;
}
}
/* =========================================================
HOMEPAGE — 3 LAATSTE UPDATES
Compacte opmaak
========================================================= */
.homepage-boeken .homepage-laatste-update-wrapper {
width: 100% !important;
max-width: 1050px !important;
margin: 0 auto 35px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.homepage-boeken .homepage-laatste-update-wrapper .homepage-titel {
width: 100% !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
text-align: center !important;
}
/* ---------------------------------------------------------
ELKE UPDATE
--------------------------------------------------------- */
.homepage-boeken .homepage-update {
display: grid !important;
grid-template-columns: 115px minmax(0, 1fr) !important;
column-gap: 20px !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 12px 0 !important;
box-sizing: border-box !important;
}
.homepage-boeken .homepage-update:first-child {
padding-top: 0 !important;
}
/* ---------------------------------------------------------
AFBEELDING
--------------------------------------------------------- */
.homepage-boeken .homepage-update-afbeelding {
display: block !important;
width: 115px !important;
max-width: 115px !important;
margin: 0 !important;
padding: 0 !important;
}
.homepage-boeken .homepage-update-afbeelding img {
display: block !important;
width: 115px !important;
height: 82px !important;
max-width: 115px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
transition: opacity 0.2s ease !important;
}
.homepage-boeken .homepage-update-afbeelding:hover img {
opacity: 0.72 !important;
}
/* ---------------------------------------------------------
TEKST
--------------------------------------------------------- */
.homepage-boeken .homepage-update-tekst {
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.homepage-boeken .homepage-update-datum {
margin: 0 0 3px 0 !important;
padding: 0 !important;
font-family: DINosaur, Icons !important;
font-size: 1rem !important;
line-height: 1.15 !important;
font-weight: 400 !important;
color: #000 !important;
text-transform: uppercase !important;
}
.homepage-boeken .homepage-update-titel {
margin: 0 0 5px 0 !important;
padding: 0 !important;
font-family: DINosaur, Icons !important;
font-size: 1.5rem !important;
line-height: 1.1 !important;
font-weight: 400 !important;
color: #c47600 !important;
}
.homepage-boeken .homepage-update-titel a {
color: #c47600 !important;
text-decoration: none !important;
}
.homepage-boeken .homepage-update-titel a:hover {
color: #000 !important;
}
.homepage-boeken .homepage-update-intro {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
line-height: 1.3 !important;
font-weight: 400 !important;
color: #000 !important;
text-align: left !important;
}
.homepage-boeken .homepage-update-link {
display: inline-block !important;
white-space: nowrap !important;
margin-left: 8px !important;
font-family: DINosaur, Icons !important;
font-size: 1.2rem !important;
line-height: 1.15 !important;
font-weight: 400 !important;
color: #c47600 !important;
text-decoration: none !important;
}
.homepage-boeken .homepage-update-link:hover {
color: #000 !important;
}
/* ---------------------------------------------------------
SCHEIDINGSLIJNEN
--------------------------------------------------------- */
.homepage-boeken .homepage-update-scheiding {
display: block !important;
width: 100% !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-top: 1px solid #c47600 !important;
background: transparent !important;
}
/* ---------------------------------------------------------
MEER UPDATES
--------------------------------------------------------- */
.homepage-boeken .homepage-meer-updates {
margin: 14px 0 0 0 !important;
padding: 0 !important;
text-align: center !important;
}
.homepage-boeken .homepage-meer-updates a {
font-family: DINosaur, Icons !important;
font-size: 1.3rem !important;
line-height: 1.2 !important;
color: #c47600 !important;
text-decoration: none !important;
}
.homepage-boeken .homepage-meer-updates a:hover {
color: #000 !important;
}
/* ---------------------------------------------------------
MOBIEL
--------------------------------------------------------- */
@media (max-width: 700px) {
.homepage-boeken .homepage-laatste-update-wrapper {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 30px !important;
}
.homepage-boeken .homepage-laatste-update-wrapper .homepage-titel {
margin-bottom: 16px !important;
}
.homepage-boeken .homepage-update {
grid-template-columns: 85px minmax(0, 1fr) !important;
column-gap: 12px !important;
padding: 11px 0 !important;
}
.homepage-boeken .homepage-update-afbeelding {
width: 85px !important;
max-width: 85px !important;
}
.homepage-boeken .homepage-update-afbeelding img {
width: 85px !important;
height: 62px !important;
max-width: 85px !important;
object-fit: cover !important;
}
.homepage-boeken .homepage-update-datum {
font-size: 1rem !important;
line-height: 1.15 !important;
margin-bottom: 3px !important;
}
.homepage-boeken .homepage-update-titel {
font-size: 1.4rem !important;
line-height: 1.1 !important;
margin-bottom: 4px !important;
}
.homepage-boeken .homepage-update-intro {
font-size: 1.6rem !important;
line-height: 1.3 !important;
margin-bottom: 5px !important;
}
.homepage-boeken .homepage-update-link {
font-size: 1.2rem !important;
line-height: 1.1 !important;
}
.homepage-boeken .homepage-meer-updates {
margin-top: 13px !important;
}
}
/* =========================================================
PAGINATITELS — DEFINITIEVE GELIJKMAKING
=========================================================
Eén titel-lijn per hoofdpagina:
- 760px breed op desktop
- gecentreerd
- 2px goudbruin
- 14px ruimte tussen titel en lijn
- dezelfde line-height
Alle pagina's met een grid-row-wrapper (Over Tjarko, Boeken, Lezingen,
Contact, Nieuwsbrief, Boekpagina's, Animatie-detail) worden hier
afgedekt met één selector. De aparte selectors per pagina waren
overbodig en zijn verwijderd.
========================================================= */
.boeken-pagina:not(.homepage-boeken) > div[grid-row] > div[grid-col] > div > h1 {
display: block !important;
width: 760px !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 auto !important;
padding: 0 0 14px 0 !important;
border-top: none !important;
border-bottom: 2px solid #c47600 !important;
line-height: 1.2 !important;
}
/* Ruimte direct onder de hoofdtitel: geen tweede lijn */
.over-tjarko-pagina > div[grid-row] > div[grid-col] > div > h1 + *,
.lezingen-pagina > div[grid-row] > div[grid-col] > div > h1 + *,
.contact-pagina > div[grid-row] > div[grid-col] > div > h1 + *,
.nieuwsbrief-pagina > div[grid-row] > div[grid-col] > div > h1 + * {
border-top: none !important;
}
/* Boeken: oude lijn onder de eerste introparagraaf */
.boeken-pagina:not(.homepage-boeken) .book-intro p:first-child {
border-top: none !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
/* Opdrachtwerk: eventuele lijn aan de bovenkant van de intro verwijderen */
.opdracht-intro {
border-top: none !important;
}
/* ---------------------------------------------------------
MOBIEL
--------------------------------------------------------- */
@media (max-width: 700px) {
.boeken-pagina:not(.homepage-boeken) > div[grid-row] > div[grid-col] > div > h1 {
width: 100% !important;
max-width: 100% !important;
padding-bottom: 14px !important;
line-height: 1.2 !important;
}
}
/* =========================================================
PAGINATITELS — NIEUWE VASTE AANPAK
=========================================================
De HTML bepaalt welke tekst een paginatitel is:
TITEL
De homepage gebruikt bewust een andere class (.homepage-titel).
========================================================= */
.pagina-titel {
display: block !important;
width: 760px !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 auto !important;
padding: 0 0 14px 0 !important;
font-family: DINosaur, Icons !important;
font-size: 3.4rem !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1.2 !important;
text-align: center !important;
border-top: none !important;
border-right: none !important;
border-left: none !important;
border-bottom: 2px solid #c47600 !important;
}
/* Oude lijn onder de intro op de Boekenpagina */
.boeken-pagina .book-intro p:first-child {
border-bottom: none !important;
}
/* ---------------------------------------------------------
MOBIEL
--------------------------------------------------------- */
@media (max-width: 700px) {
.pagina-titel {
width: 100% !important;
max-width: 100% !important;
padding-bottom: 14px !important;
font-size: 2.5rem !important;
line-height: 1.2 !important;
}
}
/* =========================================================
ANIMATIE DETAILPAGINA — DE NACHTEGAAL
========================================================= */
/* ---------------------------------------------------------
BASIS — INHOUDSBREEDTE
--------------------------------------------------------- */
.animatie-detail-pagina .animatie-detail-inhoud {
width: 760px;
max-width: 100%;
margin: 0 auto;
}
/* ---------------------------------------------------------
PAGINATITEL
--------------------------------------------------------- */
.animatie-detail-pagina .pagina-titel {
width: 100% !important;
max-width: 100% !important;
}
/* ---------------------------------------------------------
ONDERTITEL
--------------------------------------------------------- */
.animatie-detail-meta {
margin: 14px 0 28px 0 !important;
padding: 0 !important;
font-family: DINosaur, Icons !important;
font-size: 1.3rem !important;
line-height: 1.3 !important;
font-weight: 400 !important;
text-align: center !important;
color: #000 !important;
}
.animatie-detail-meta span {
color: #c47600 !important;
}
/* ---------------------------------------------------------
VIDEO
--------------------------------------------------------- */
.animatie-detail-video {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto 32px auto !important;
}
.animatie-detail-video iframe {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
border: 0 !important;
}
/* ---------------------------------------------------------
TEKST
--------------------------------------------------------- */
.animatie-detail-tekst {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.animatie-detail-tekst p {
margin-top: 0 !important;
margin-bottom: 24px !important;
}
.animatie-detail-tekst p:first-child {
margin-bottom: 28px !important;
}
/* ---------------------------------------------------------
IMAGE 2 — APP-ICOON
CONTROLEER: in de HTML van De Nachtegaal staat alleen de class
"animatie-detail-afbeelding" zonder ".app-icoon" of ".grote-afbeelding".
Deze regels werken daar dus niet; ze blijven staan voor het geval
een andere animatiepagina de extra class wel gebruikt.
--------------------------------------------------------- */
.animatie-detail-afbeelding.app-icoon {
width: auto !important;
max-width: 180px !important;
margin: 30px auto !important;
text-align: center;
}
.animatie-detail-afbeelding.app-icoon img {
display: block !important;
width: auto !important;
max-width: 180px !important;
height: auto !important;
margin: 0 auto !important;
}
/* ---------------------------------------------------------
LINK NAAR KUNSTOPJEBORD
--------------------------------------------------------- */
.animatie-detail-link {
margin: 30px 0 !important;
text-align: left !important;
}
.animatie-detail-link a {
color: #c47600 !important;
text-decoration: none !important;
}
.animatie-detail-link a:hover {
color: #000 !important;
}
/* ---------------------------------------------------------
IMAGE 3 — GROTE AFBEELDING
--------------------------------------------------------- */
.animatie-detail-afbeelding.grote-afbeelding {
width: 100% !important;
max-width: 100% !important;
margin: 30px auto !important;
text-align: center;
}
.animatie-detail-afbeelding.grote-afbeelding img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
}
/* =========================================================
MOBIEL
========================================================= */
@media (max-width: 700px) {
.animatie-detail-pagina .animatie-detail-inhoud {
width: 100%;
max-width: 100%;
}
/* Ondertitel */
.animatie-detail-meta {
font-size: 1.2rem !important;
margin-top: 12px !important;
margin-bottom: 24px !important;
}
/* Video */
.animatie-detail-video {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 26px !important;
}
.animatie-detail-video iframe {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 9 !important;
}
/* Tekst */
.animatie-detail-tekst p {
margin-bottom: 22px !important;
}
/* App-icoon */
.animatie-detail-afbeelding.app-icoon {
max-width: 140px !important;
margin: 25px auto !important;
}
.animatie-detail-afbeelding.app-icoon img {
max-width: 140px !important;
}
/* Grote afbeelding */
.animatie-detail-afbeelding.grote-afbeelding {
width: 100% !important;
max-width: 100% !important;
margin: 25px auto !important;
}
.animatie-detail-afbeelding.grote-afbeelding img {
width: 100% !important;
max-width: 100% !important;
}
/* Link */
.animatie-detail-link {
margin: 25px 0 !important;
}
}
/* PAGINATITELS — GOUD BRUIN */
.boeken-pagina h1.pagina-titel,
.pagina-titel {
color: #c47600 !important;
}
/* =========================================================
UPDATES — PAGINATITEL
========================================================= */
.updates-pagina .pagina-titel {
display: block !important;
width: 760px !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 auto !important;
padding: 0 0 14px 0 !important;
font-family: DINosaur, Icons !important;
font-size: 3.4rem !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1.2 !important;
text-align: center !important;
color: #c47600 !important;
border-top: none !important;
border-right: none !important;
border-left: none !important;
border-bottom: 2px solid #c47600 !important;
}
@media (max-width: 700px) {
.updates-pagina .pagina-titel {
width: 100% !important;
max-width: 100% !important;
padding-bottom: 14px !important;
font-size: 2.5rem !important;
line-height: 1.2 !important;
}
}
/* =========================================================
UPDATES — INHOUD GELIJK AAN OVER TJARKO
========================================================= */
.updates-pagina .updates-inhoud {
width: 760px !important;
max-width: 100% !important;
margin: 0 auto !important;
text-align: left !important;
}
.updates-pagina .updates-inhoud * {
text-align: left;
}
/* Nieuwsbrief */
.updates-pagina .updates-nieuwsbrief {
width: 100% !important;
margin: 25px 0 35px 0 !important;
text-align: left !important;
}
.updates-pagina .updates-nieuwsbrief-intro {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
text-align: left !important;
}
.updates-pagina .updates-nieuwsbrief-tekst {
margin: 0 0 28px 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* Nieuwsbriefknop */
.updates-pagina .updates-nieuwsbrief-knop {
display: block !important;
width: fit-content !important;
font-family: DINosaur, Icons !important;
font-size: 1.3rem !important;
line-height: 1.2 !important;
font-weight: 400 !important;
color: #fff !important;
background: #c47600 !important;
padding: 10px 18px !important;
margin: 0 auto !important;
text-decoration: none !important;
text-align: center !important;
}
.updates-pagina .updates-nieuwsbrief-knop:hover {
color: #fff !important;
background: #000 !important;
}
/* Updateblokken */
.updates-pagina .update-post {
width: 100% !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 180px 1fr !important;
gap: 25px !important;
text-align: left !important;
}
.updates-pagina .update-post-tekst {
text-align: left !important;
}
.updates-pagina .update-post-datum {
margin: 0 0 4px 0 !important;
padding: 0 !important;
font-family: DINosaur, Icons !important;
font-size: 1rem !important;
line-height: 1.2 !important;
text-align: left !important;
}
.updates-pagina .update-post-titel {
margin: 0 0 8px 0 !important;
padding: 0 !important;
font-family: DINosaur, Icons !important;
font-size: 1.5rem !important;
line-height: 1.2 !important;
font-weight: 400 !important;
text-align: left !important;
}
.updates-pagina .update-post-titel a {
color: #000 !important;
text-decoration: none !important;
}
.updates-pagina .update-post-titel a:hover {
color: #c47600 !important;
}
.updates-pagina .update-post-intro {
margin: 0 0 8px 0 !important;
padding: 0 !important;
font-family: DINosaur, Icons !important;
font-size: 1.6rem !important;
line-height: 1.3 !important;
text-align: left !important;
}
.updates-pagina .update-post-link {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
font-family: DINosaur, Icons !important;
font-size: 1.2rem !important;
line-height: 1.2 !important;
color: #c47600 !important;
text-decoration: none !important;
text-align: left !important;
}
.updates-pagina .update-post-link:hover {
color: #000 !important;
}
/* Afbeeldingen */
.updates-pagina .update-post-afbeelding {
width: 180px !important;
max-width: 180px !important;
text-align: left !important;
}
.updates-pagina .update-post-afbeelding img {
display: block !important;
width: 100% !important;
max-width: 180px !important;
height: auto !important;
margin: 0 !important;
}
/* Scheidingslijnen tussen updates */
.updates-pagina .update-scheiding {
display: block !important;
width: 100% !important;
height: 0 !important;
margin: 28px 0 !important;
padding: 0 !important;
border: 0 !important;
border-top: 2px solid #c47600 !important;
}
/* ---------------------------------------------------------
MOBIEL
--------------------------------------------------------- */
@media (max-width: 700px) {
.updates-pagina .updates-inhoud {
width: 100% !important;
max-width: 100% !important;
}
.updates-pagina .updates-nieuwsbrief {
margin-top: 20px !important;
margin-bottom: 30px !important;
}
.updates-pagina .update-post {
grid-template-columns: 85px 1fr !important;
gap: 12px !important;
}
.updates-pagina .update-post-afbeelding {
width: 85px !important;
max-width: 85px !important;
}
.updates-pagina .update-post-afbeelding img {
width: 85px !important;
max-width: 85px !important;
}
.updates-pagina .update-post-datum {
font-size: 1rem !important;
}
.updates-pagina .update-post-titel {
font-size: 1.4rem !important;
}
.updates-pagina .update-post-intro {
font-size: 1.6rem !important;
line-height: 1.3 !important;
}
.updates-pagina .update-post-link {
font-size: 1.2rem !important;
}
.updates-pagina .update-scheiding {
margin: 22px 0 !important;
}
}
/* =========================================================
ANIMATIES — COMPACT OVERZICHT
========================================================= */
.animaties-pagina .animaties-overzicht {
width: 100% !important;
max-width: 760px !important;
margin: 25px auto 0 auto !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
.animaties-pagina .animaties-overzicht .image-link {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.animaties-pagina .animaties-overzicht .image-link img {
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
}
/* MOBIEL */
@media (max-width: 700px) {
.animaties-pagina .animaties-overzicht {
width: 100% !important;
max-width: 100% !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
margin-top: 20px !important;
}
}
/* =========================================================
OPDRACHTWERK — COMPACT OVERZICHT
========================================================= */
.in-opdracht-pagina .opdracht-overzicht {
width: 100% !important;
max-width: 760px !important;
margin: 25px auto 0 auto !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 14px !important;
}
.in-opdracht-pagina .opdracht-overzicht .image-link {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.boeken-pagina.in-opdracht-pagina .opdracht-overzicht a.image-link img {
display: block !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
}
/* MOBIEL */
@media (max-width: 700px) {
.in-opdracht-pagina .opdracht-overzicht {
width: 100% !important;
max-width: 100% !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
margin-top: 20px !important;
}
}
/* =========================================================
OPDRACHTPAGINA'S — VIERKANTE GALERIJ
=========================================================
Gebruik in de HTML:
- Alle afbeeldingen krijgen dezelfde vierkante verhouding.
- In het raster wordt bijgesneden (object-fit: cover);
bij het aanklikken is de hele tekening te zien.
- 3 kolommen op desktop, 2 op telefoon.
- Altijd 2 kolommen (bij 4 of 6 afbeeldingen): voeg de class
"kolommen-2" toe:
========================================================= */
.opdracht-galerij {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
width: 100%;
max-width: 760px;
margin: 30px auto 0 auto;
}
.opdracht-galerij.kolommen-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.opdracht-galerij > div {
min-width: 0;
overflow: hidden;
}
.opdracht-galerij a.image-link {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.opdracht-galerij img {
display: block !important;
position: static !important;
float: none !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
transform: none !important;
transition: opacity 0.25s ease !important;
}
.opdracht-galerij a.image-link:hover img {
opacity: 0.75 !important;
}
@media (max-width: 700px) {
.opdracht-galerij {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 20px;
}
}
/* =========================================================
ARTIKELPAGINA — Die Walküre
Bouwt voort op de animatie-detailpagina (De Nachtegaal):
- 760px breed, titel + ondertitel (.animatie-detail-meta)
- tekst, video en afbeeldingen als op de Nachtegaal-pagina
Hier alleen de extra onderdelen van het artikel.
========================================================= */
/* Tussenkoppen in het artikel */
.animatie-detail-pagina .animatie-detail-tekst h2 {
margin: 44px 0 16px 0 !important;
}
/* Kop van het artikel zelf: direct onder de bronregel */
.animatie-detail-pagina .animatie-detail-tekst h2.artikel-kop {
margin: 0 0 16px 0 !important;
}
/* Bronregel bovenaan en "Lees verder na de animatie" */
.animatie-detail-pagina .animatie-detail-tekst p.artikel-bron {
font-size: 1.2rem !important;
line-height: 1.3 !important;
color: rgba(0, 0, 0, 0.6) !important;
margin-bottom: 28px !important;
}
/* Inleidende alinea (lead) */
.animatie-detail-pagina .animatie-detail-tekst p.artikel-lead {
font-size: 1.9rem !important;
line-height: 1.35 !important;
margin-bottom: 28px !important;
}
.artikel-label {
color: #c47600;
}
/* Fotobron onder een afbeelding */
.animatie-detail-pagina .animatie-detail-tekst p.artikel-foto-bron {
font-size: 1.2rem !important;
line-height: 1.3 !important;
color: rgba(0, 0, 0, 0.6) !important;
text-align: right !important;
margin: 8px 0 0 0 !important;
}
/* Kader onderaan: achtergrondinformatie */
.animatie-detail-pagina .artikel-kader {
margin-top: 50px;
padding-top: 24px;
border-top: 2px solid #c47600;
}
.animatie-detail-pagina .artikel-kader h2 {
margin: 0 0 20px 0 !important;
}
@media (max-width: 700px) {
.animatie-detail-pagina .animatie-detail-tekst h2 {
margin: 34px 0 14px 0 !important;
}
.animatie-detail-pagina .animatie-detail-tekst p.artikel-lead {
font-size: 1.7rem !important;
}
.animatie-detail-pagina .artikel-kader {
margin-top: 40px;
}
}
/* =========================================================
HOMEPAGE — ALLES IN ÉÉN SCHERM, GEEN SCROLLEN
=========================================================
Geldt alleen op de homepage (Cargo zet daar automatisch de
class "homepage" op ). Alle maten hieronder zijn gekoppeld
aan de vensterhoogte (vh), zodat de hele pagina — inclusief het
menu — meekrimpt tot hij past, op elk scherm.
LET OP — twee dingen die geen enkele CSS kan garanderen:
1. Vertaalde tekst (via het taalmenu) kan langer zijn dan het
Nederlands. De introtekst van een update wordt daarom altijd
tot 2 regels afgekapt (met "…"), zodat die nooit de reden is
waarom de pagina niet meer past.
2. Op een heel ongebruikelijk schermformaat kan het net niet
passen. Dan scrollt de pagina gewoon een stukje door — er
wordt nooit iets afgesneden of onbereikbaar.
========================================================= */
/* Logo en menu iets compacter, alleen op de homepage */
body.homepage .tjarko-logo {
--oog-schaal: 0.8;
}
body.homepage #cwhohi > .tjarko-menu {
margin-top: 1vh !important;
margin-bottom: 0.5vh !important;
}
body.homepage .tjarko-menu > a,
body.homepage .tjarko-language-button {
font-size: clamp(0.85rem, 2.6vh, 1.45rem) !important;
}
/* De homepage-inhoud zelf */
body.homepage .homepage-boeken {
margin-top: 0 !important;
/* Vult de rest van het scherm. Boeken en updates houden hun
normale, korte afstand tot elkaar; alleen de nieuwsbrief (zie
hieronder) wordt naar de onderkant geduwd. "82vh" is een
inschatting van de ruimte die overblijft na het logo en menu;
klopt dit niet precies, dan is dit het getal om bij te stellen. */
display: flex !important;
flex-direction: column !important;
min-height: 82vh !important;
}
body.homepage .boeken-nieuwsbrief {
/* Enige "veer": duwt alleen de nieuwsbrief naar onderen, de rest
(boeken en updates) houdt zijn eigen, normale afstand */
margin-top: auto !important;
}
/* Boekenrij: altijd 4 naast elkaar, ook op een smalle telefoon,
zodat er geen extra rij (en dus extra hoogte) bij komt */
body.homepage .homepage-boeken .boeken-nieuw {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: clamp(4px, 1.5vh, 22px) !important;
margin-top: 0 !important;
margin-bottom: 1vh !important;
}
body.homepage .meer-boeken {
margin: 0.5vh 0 1.5vh 0 !important;
font-size: clamp(0.7rem, 1.9vh, 1.25rem) !important;
}
body.homepage .homepage-laatste-update-wrapper {
margin-bottom: 1vh !important;
}
/* Elke update: kleiner plaatje, kleinere tekst, minder ruimte */
body.homepage .homepage-update {
grid-template-columns: clamp(48px, 9vh, 115px) minmax(0, 1fr) !important;
column-gap: clamp(8px, 2vh, 20px) !important;
padding: clamp(3px, 1vh, 12px) 0 !important;
}
body.homepage .homepage-update-afbeelding {
width: clamp(48px, 9vh, 115px) !important;
max-width: clamp(48px, 9vh, 115px) !important;
}
body.homepage .homepage-update-afbeelding img {
width: clamp(48px, 9vh, 115px) !important;
height: clamp(34px, 6.4vh, 82px) !important;
}
body.homepage .homepage-update-datum {
font-size: clamp(0.6rem, 1.35vh, 1rem) !important;
margin-bottom: 0.2vh !important;
}
body.homepage .homepage-update-titel {
font-size: clamp(0.75rem, 1.9vh, 1.5rem) !important;
margin-bottom: 0.3vh !important;
}
body.homepage .homepage-update-intro {
font-size: clamp(0.68rem, 1.6vh, 1.6rem) !important;
line-height: 1.25 !important;
margin-bottom: 0.3vh !important;
}
/* Het afkappen naar 1 / 2 regels is alleen een vangnet voor een LAAG
scherm (telefoon, klein browservenster), waar elke regel telt. Op een
normaal of hoog scherm (de meeste desktops) is er ruimte genoeg en
knipt dit dus niets af wat er anders wel had gepast. */
@media (max-height: 900px) {
body.homepage .homepage-update-titel {
/* Altijd maar 1 regel, ook bij een langere vertaalde titel */
display: -webkit-box !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.homepage .homepage-update-intro {
/* Altijd maar 2 regels, ook bij een langere vertaalde tekst */
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
body.homepage .homepage-update-link {
font-size: clamp(0.6rem, 1.35vh, 1.2rem) !important;
}
body.homepage .homepage-update-scheiding {
margin: 0 !important;
}
body.homepage .homepage-meer-updates {
margin: 0.5vh 0 0 0 !important;
font-size: clamp(0.7rem, 1.7vh, 1.3rem) !important;
}
/* Nieuwsbriefblok compact */
body.homepage .boeken-nieuwsbrief {
margin-top: 1vh !important;
}
body.homepage .boeken-nieuwsbrief hr {
margin: 0 0 0.8vh !important;
}
body.homepage .boeken-nieuwsbrief-tekst {
font-size: clamp(0.65rem, 1.5vh, 1.25rem) !important;
margin: 0 auto 0.8vh !important;
}
body.homepage .boeken-nieuwsbrief .contact-button {
height: clamp(24px, 4.5vh, 40px) !important;
min-height: clamp(24px, 4.5vh, 40px) !important;
font-size: clamp(0.65rem, 1.5vh, 1.2rem) !important;
padding: 0 clamp(8px, 1.5vh, 16px) !important;
}
.tjarko-kaart-marker {
background: transparent !important;
border: none !important;
}
.tjarko-kaart-marker span {
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 1px 5px rgba(0,0,0,.4);
}
/* Kaartblok (Kinderboekenweek). Eerdere regels voor .tjarko-kaart
(margin 35px 0 50px, iframe 650px), .lezingen-pagina { width } en
.lezingen-kaart-blok .pagina-titel werden overschreven en zijn verwijderd. */
.lezingen-kaart-blok {
margin-top: 90px;
}
.lezingen-intro {
width: 100%;
margin: 0 0 35px 0;
text-align: left;
line-height: 1.4;
}
.tjarko-kaart {
width: 100%;
margin: 0;
}
.tjarko-kaart iframe {
display: block;
width: 100%;
height: 575px;
border: 0;
}
@media (max-width: 700px) {
.lezingen-kaart-blok {
margin-top: 60px;
}
.lezingen-intro {
margin-bottom: 25px;
}
.tjarko-kaart iframe {
height: 450px;
}
}
/* =========================================================
PAGINATITELS — ÉÉN VASTE OPMAAK (PLAKKEN ONDERAAN DE CSS)
=========================================================
Alle titels met class="pagina-titel" krijgen exact dezelfde
opmaak, ongeacht de wrapper of de pagina:
- 760px breed, gecentreerd
- 3.4rem op desktop, 2.5rem op scherm tot 700px
- 14px ruimte tussen titel en 2px goudbruine lijn
De titels van de boekpagina's (zonder class) krijgen dezelfde
grootte, maar houden hun eigen kleur (rood of boekkleur).
========================================================= */
h1.pagina-titel,
.boeken-pagina h1.pagina-titel,
.updates-pagina h1.pagina-titel {
display: block !important;
width: 760px !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 auto !important;
padding: 0 0 14px 0 !important;
font-family: DINosaur, Icons !important;
font-size: 3.4rem !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1.2 !important;
text-align: center !important;
color: #c47600 !important;
border-top: none !important;
border-right: none !important;
border-left: none !important;
border-bottom: 2px solid #c47600 !important;
}
/* Titels van boekpagina's: alleen de grootte gelijk trekken */
.boeken-pagina:not(.homepage-boeken) > div[grid-row] > div[grid-col] > div > h1 {
font-size: 3.4rem !important;
}
@media (max-width: 700px) {
h1.pagina-titel,
.boeken-pagina h1.pagina-titel,
.updates-pagina h1.pagina-titel {
width: 100% !important;
font-size: 2.5rem !important;
}
.boeken-pagina:not(.homepage-boeken) > div[grid-row] > div[grid-col] > div > h1 {
font-size: 2.5rem !important;
}
}