/* Chemtrade. Eén stylesheet, geen buildstap. Vormtaal: scherpe hoeken, het schuine rode parallellogram uit het logo als enige accentvorm. */ @font-face { font-family: "General Sans"; src: url("../fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/general-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Alumni Sans"; src: url("../fonts/alumni-sans-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Alumni Sans"; src: url("../fonts/alumni-sans-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Alumni Sans"; src: url("../fonts/alumni-sans-700-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Alumni Sans"; src: url("../fonts/alumni-sans-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --blauw: #004a9a; --blauw-diep: #003670; --blauw-nacht: #0b1f3a; --blauw-licht: #e8eef6; --rood: #e63329; --inkt: #111b29; --kop: #002957; /* koppen: logoblauw, heel donker */ --tekst: #2a3444; /* 22-10: donkerder voor leesbaarheid op de lichte vlakken (was #3d4757, contrast 8,6:1 -> 11,6:1) */ --zacht: #4d5868; /* was #5f6a7a, contrast 5,0:1 -> 7,0:1 op --vlak */ --lijn: #d6dce4; --vlak: #f3f5f8; --wit: #fff; --font-display: "Alumni Sans", "Arial Narrow", sans-serif; /* grote koppen, zoals cryox.be */ --font-mono: "DM Mono", ui-monospace, monospace; --font: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --container: 1240px; --goot: clamp(16px, 4vw, 40px); --sectie: clamp(64px, 9vw, 128px); --schuin: 18%; /* hoek van de logostrepen */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --header-h: 76px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--wit); color: var(--tekst); font: 400 1.0625rem/1.65 var(--font); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--blauw); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { color: var(--blauw-diep); } :focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; } button { font: inherit; } address { font-style: normal; } .ct-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ct-skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--inkt); color: var(--wit); padding: 10px 16px; } .ct-skip:focus { top: 16px; } .ct-container { width: 100%; max-width: calc(var(--container) + 2 * var(--goot)); margin-inline: auto; padding-inline: var(--goot); } /* Typografie: General Sans, vette koppen in zinsvorm; factor 7 tussen hero en label. */ .ct-hero__titel, .ct-h1, .ct-h2, .ct-h3, .ct-rich h2, .ct-rich h3 { color: var(--kop); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 0.5em; text-wrap: balance; } .ct-h1 { font-size: clamp(2rem, 3.2vw, 3rem); } .ct-h2 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); } /* Eén koppensysteem (23-10): h1 en h2 overal in Alumni Sans, hoofdletters, zoals de hero, sector- en productpagina's. h3 en kleiner blijven General Sans in zinsletters. Eerder hadden kennispagina's, Over ons en de 404 brede vette koppen. */ .ct-h1, .ct-h2, .ct-rich h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .ct-h1 { font-size: clamp(2.75rem, 5vw, 4.75rem); line-height: .92; } .ct-h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: .95; } /* Nederlandse samenstellingen zijn lang: afbreken in plaats van over de kolom heen lopen. */ .ct-h2, .ct-h3, .ct-tegel__titel, .ct-index__titel, .ct-kaart__titel, .ct-bericht__titel { hyphens: auto; overflow-wrap: break-word; } /* De paginatitel breekt niet af (feedback 21-10); op een smal scherm wordt hij iets kleiner. */ .ct-hero__titel, .ct-h1 { hyphens: manual; overflow-wrap: normal; } @media (max-width: 480px) { .ct-h1 { font-size: clamp(2.25rem, 10vw, 3rem); } } .ct-h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } .ct-lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--tekst); max-width: 60ch; margin: 0 0 1.5em; } /* Knoppen: scherp, met pijl die meeschuift. */ .ct-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .ct-knop { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px; font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; border: 2px solid transparent; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease); } .ct-knop .ct-icon { width: 20px; height: 20px; transition: transform .3s var(--ease); } .ct-knop:hover .ct-icon { transform: translateX(4px); } .ct-knop:active { transform: translateY(1px); } .ct-knop--primair { background: var(--blauw); color: var(--wit); } .ct-knop--primair:hover { background: var(--blauw-diep); color: var(--wit); } .ct-knop--wit { background: var(--wit); color: var(--blauw); } .ct-knop--wit:hover { background: var(--blauw-licht); color: var(--blauw-diep); } /* Lijnknop op licht (bijv. productkeuze op Afvalwaterchemie): blauwe rand en tekst, bij hover blauw vlak met witte tekst. */ .ct-knop--lijn { border-color: var(--blauw); color: var(--blauw); } .ct-knop--lijn-wit { border-color: rgb(255 255 255 / .7); color: var(--wit); } .ct-knop--lijn-wit:hover { border-color: var(--wit); background: rgb(255 255 255 / .1); color: var(--wit); } .ct-knop--klein { min-height: 42px; padding: 0 16px; font-size: .9375rem; } .ct-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; } .ct-link .ct-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); } .ct-link:hover .ct-icon { transform: translateX(4px); } .ct-icon { width: 1.25em; height: 1.25em; flex: none; } /* Header */ .ct-header { position: sticky; top: 0; z-index: 50; background: var(--wit); border-bottom: 1px solid var(--lijn); } .ct-header__in { display: flex; align-items: center; gap: 32px; height: var(--header-h); } .ct-logo { flex: none; position: relative; display: block; margin-left: 13px; transition: opacity .35s; } /* 27-10: de plek van de vroegere transparante rand links */ .ct-logo img { width: 128px; /* 27-10: PNG zonder transparante rand, zichtbaar even groot als 150px met rand */ height: auto; transition: opacity .35s; } /* Witte variant (wit met rood merk) ligt over de blauwe en komt in beeld zodra de header over een donkere foto staat. */ .ct-logo__wit { position: absolute; inset: 0; opacity: 0; } /* Homepage: het logo staat groot in de hero; in de header verschijnt het pas bij scrollen (feedback 21-10). */ .ct-header--home:not(.is-gescrold) .ct-logo { opacity: 0; pointer-events: none; } /* Met JS vliegt het herologo naar deze plek (home.js) en neemt het headerlogo direct over, zonder vervagen. */ .ct-header--home.is-logo-vlucht .ct-logo { transition: none; } .ct-header--home.is-logo-vlucht:not(.is-logo-thuis) .ct-logo { opacity: 0; pointer-events: none; } .ct-header--home.is-logo-thuis .ct-logo { opacity: 1; pointer-events: auto; } body.ct-menu-open .ct-header--home .ct-logo { opacity: 1; pointer-events: auto; } .ct-nav { flex: 1; display: flex; justify-content: flex-end; min-width: 0; } .ct-nav__lijst { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; } .ct-nav__lijst > li { position: relative; } .ct-nav__lijst > li > a { display: flex; align-items: center; height: var(--header-h); padding: 0 8px 0 10px; color: var(--inkt); font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color .2s; } .ct-nav__lijst > li > a:hover, .ct-nav__lijst > .current-menu-item > a, .ct-nav__lijst > .current-menu-ancestor > a, .ct-nav__lijst > .current_page_item > a, .ct-nav__lijst > .current_page_ancestor > a { color: var(--blauw); } .ct-nav__extra { display: none; } .ct-header__acties { flex: none; margin-left: auto; display: flex; align-items: center; gap: 16px; } .ct-talen { list-style: none; margin: 0; padding: 0; display: flex; } .ct-talen a { display: block; padding: 6px 8px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: .04em; color: var(--zacht); text-decoration: none; } .ct-talen abbr { text-decoration: none; } .ct-talen a:hover { color: var(--blauw); } .ct-talen a[aria-current] { color: var(--inkt); box-shadow: inset 0 -2px 0 var(--rood); } .ct-header__contact { display: inline-flex; } /* Topbalk met telefoon en e-mail (22-10, CRO): alleen op desktop (>= 1200 px), donker, boven de (sticky) header. */ .ct-topbalk { display: none; background: var(--nacht); color: var(--wit); } .ct-topbalk__in { display: flex; justify-content: flex-end; align-items: center; gap: 8px; height: 36px; } .ct-topbalk a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--wit); font-size: .875rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; white-space: nowrap; transition: color .2s; } .ct-topbalk .ct-icon { width: 16px; height: 16px; color: rgb(255 255 255 / .7); flex: none; } @media (hover: hover) and (pointer: fine) { .ct-topbalk a:hover { color: rgb(255 255 255 / .8); } } @media (min-width: 1200px) { .ct-topbalk { display: block; } } html.ct-compact .ct-topbalk { display: none; } .ct-menuknop { display: none; background: none; border: 0; padding: 8px; color: var(--inkt); cursor: pointer; } .ct-menuknop .ct-icon { width: 28px; height: 28px; } .ct-menuknop__dicht { display: none; } /* Compact menu: het script in de header zet .ct-compact zodra het menu niet op één regel past of het scherm smal is. */ html.ct-compact { .ct-menuknop { display: block; } .ct-talen--kop { display: none; } .ct-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 49; display: none; height: calc(100dvh - var(--header-h)); border-top: 1px solid var(--lijn); background: var(--wit); padding: 16px var(--goot) 40px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); /* Dicht = display none: het paneel wordt dan nooit getekend (geen flits bij scrollen op een telefoon). De overgang blijft in browsers met allow-discrete. */ transition: opacity .2s, transform .3s var(--ease), visibility .2s, display .2s allow-discrete; } .ct-nav.is-open { display: block; opacity: 1; visibility: visible; transform: none; } @starting-style { .ct-nav.is-open { opacity: 0; transform: translateY(-8px); } } .ct-nav__lijst { flex-direction: column; gap: 0; } .ct-nav__lijst > li > a { height: auto; padding: 14px 0; font-size: 1.75rem; white-space: normal; border-bottom: 1px solid var(--lijn); box-shadow: none; } .ct-nav__extra { display: grid; justify-items: start; gap: 20px; margin-top: 28px; } .ct-nav__contact { width: 100%; justify-content: space-between; } .ct-nav__extra .ct-talen a { padding: 10px 14px 10px 0; font-size: 1rem; } body.ct-menu-open { overflow: hidden; } body.ct-menu-open .ct-menuknop__open { display: none; } body.ct-menu-open .ct-menuknop__dicht { display: block; } } @media (max-width: 560px) { html.ct-compact .ct-header__contact { display: none; } .ct-logo { margin-left: 11px; } .ct-logo img { width: 109px; } } /* Paginakop */ .ct-paginakop { background: var(--vlak); border-bottom: 1px solid var(--lijn); } .ct-paginakop__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; padding-block: clamp(36px, 5vw, 64px); } .ct-paginakop--beeld .ct-paginakop__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-bottom: 0; align-items: end; } .ct-paginakop .ct-h1 { max-width: 22ch; } .ct-paginakop--beeld .ct-h1 { font-size: clamp(2.5rem, 4vw, 4rem); } .ct-paginakop .ct-lead { margin-bottom: 0; } .ct-paginakop--beeld .ct-paginakop__tekst { padding-bottom: clamp(36px, 5vw, 64px); } .ct-paginakop__beeld { aspect-ratio: 4 / 3; overflow: hidden; --snede-bg: var(--vlak); } .ct-paginakop__beeld img { width: 100%; height: 100%; object-fit: cover; } .ct-paginakop__datum { color: var(--zacht); font-weight: 600; } /* De schuine streep staat achter elk item (22-10): een regel die afbreekt begint dan met tekst, netjes links uitgelijnd. */ .ct-kruimelpad ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .875rem; color: var(--zacht); } .ct-kruimelpad li:not(:last-child)::after { content: "/"; margin-left: 10px; color: var(--lijn); } .ct-kruimelpad a { color: var(--zacht); text-decoration: none; } .ct-kruimelpad a:hover { color: var(--blauw); text-decoration: underline; } @media (max-width: 800px) { .ct-paginakop--beeld .ct-paginakop__in { grid-template-columns: 1fr; gap: 0; } .ct-paginakop__beeld { margin-inline: calc(-1 * var(--goot)); clip-path: none; aspect-ratio: 16 / 9; } } /* Pagina-inhoud met zijnavigatie */ .ct-pagina { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 300px); justify-content: space-between; gap: 64px; padding-block: clamp(40px, 6vw, 80px); } .ct-pagina--zonder-zij { grid-template-columns: minmax(0, 760px); justify-content: start; } .ct-zij { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; border-top: 3px solid var(--blauw); padding-top: 16px; } .ct-zij__kop { margin: 0 0 8px; font-weight: 700; } .ct-zij__kop a { color: var(--kop); text-decoration: none; } .ct-zij ul { list-style: none; margin: 0; padding: 0; } .ct-zij li a { display: block; padding: 8px 0 8px 14px; color: var(--tekst); text-decoration: none; border-left: 2px solid var(--lijn); font-size: .9688rem; } .ct-zij li a:hover { color: var(--blauw); border-color: var(--blauw); } .ct-zij li a[aria-current] { color: var(--inkt); font-weight: 700; border-color: var(--rood); } @media (max-width: 960px) { .ct-pagina { grid-template-columns: minmax(0, 1fr); gap: 40px; } .ct-zij { position: static; } .ct-zij--toc { display: none; } /* onder de tekst heeft een inhoudsopgave geen nut */ } /* Lopende tekst */ .ct-rich > *:first-child { margin-top: 0; } .ct-rich h2 { font-size: clamp(1.875rem, 2.8vw, 2.5rem); line-height: 1; margin-top: 1.6em; } .ct-rich h3 { font-size: clamp(1.1875rem, 1.8vw, 1.375rem); margin-top: 1.6em; } .ct-rich h4 { color: var(--kop); font-size: 1.0625rem; margin: 1.4em 0 .4em; } .ct-rich p, .ct-rich ul, .ct-rich ol { margin: 0 0 1.1em; } .ct-rich ul, .ct-rich ol { padding-left: 1.25em; } .ct-rich li { margin-bottom: .35em; } .ct-rich ul li::marker { color: var(--blauw); } .ct-rich strong { color: var(--inkt); } /* Eén linkstijl in lopende tekst: halfvet, blauw, onderstreept, ongeacht of de klant de link vet maakte (de klanttekst heeft zowel als ). */ .ct-rich a { font-weight: 600; } /* Lange URL's als linktekst (privacyverklaring) breken af; anders werd de pagina op mobiel 427 px breed (23-10). */ .ct-main p a, .ct-main li a { overflow-wrap: anywhere; } .ct-rich a strong, .ct-rich a b { color: inherit; font-weight: inherit; } .ct-rich img { margin: 1.5em 0; } .ct-rich figure { margin: 1.5em 0; } .ct-rich figcaption { font-size: .875rem; color: var(--zacht); margin-top: 8px; } .ct-rich blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 3px solid var(--blauw); color: var(--inkt); font-size: 1.125rem; } /* Producttabellen als specificatieblad: kop blauw, alleen lijnen tussen productgroepen, horizontaal scrollen op mobiel. */ .ct-rich .ct-tabel, .ct-rich figure.wp-block-table { overflow-x: auto; margin: 1.5em 0; -webkit-overflow-scrolling: touch; } .ct-rich table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; min-width: 560px; } .ct-rich thead th, .ct-rich tr:first-child th { background: var(--blauw); color: var(--wit); font-weight: 700; text-align: left; padding: 12px 14px; white-space: nowrap; } .ct-rich td { padding: 11px 14px; vertical-align: top; border-bottom: 1px solid var(--lijn); } .ct-rich tbody tr:nth-child(even) td { background: var(--vlak); } .ct-rich td:first-child { color: var(--inkt); font-weight: 700; } /* Vrijstaande productfoto's op wit (klasse uit ct_beeld()): nooit bijsnijden, passend in het vak met wat lucht eromheen. */ img.is-vrijstaand { object-fit: contain !important; background: #fff; } /* Staande foto's in liggende vakken (tegels, kaarten, megamenu): passend, op een rustige lichte achtergrond, nooit half afgesneden. */ .ct-mega__beeld img.is-staand, .cs-inzet__beeld img.is-staand, .ct-tegels__beeld img.is-staand, .ch-bericht__beeld img.is-staand, .cp-kaart__beeld img.is-staand, .ch-links__thumb img.is-staand, .ch-rijen__thumb img.is-staand, .ct-deel__beeld img.is-staand { object-fit: contain; background: var(--vlak); } .ct-mega__beeld img.is-staand { background: transparent; } /* 22-10: geen grijs/blauw vlak achter staande foto's; staande foto's zijn liggend gemaakt (outpaint), wat rest staat vrij. */ .cs-inzet__beeld img.is-staand, .ct-tegels__beeld img.is-staand, .ch-bericht__beeld img.is-staand, .cp-kaart__beeld img.is-staand, .ct-deel__beeld img.is-staand, .ct-galerij img, .ct-deel__beeld .ct-galerij--deel img { background: transparent; } /* Korte opsommingen als labels naast elkaar (22-10). */ ul.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; padding: 0; list-style: none; border: 0; columns: auto; } ul.ct-chips li { margin: 0; padding: 7px 14px; border: 0; border-radius: 3px; background: var(--vlak); color: var(--kop); font-size: .9375rem; font-weight: 500; line-height: 1.4; break-inside: avoid; } /* stille labels, geen knoppen (Jeroen 22-10: leek klikbaar, contrast) */ ul.ct-chips li::before { content: none; } /* Documentlijst (pdf's) als rij knoppen (22-10). */ ul.ct-docs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; padding: 0; list-style: none; border: 0; columns: auto; } ul.ct-docs li { margin: 0; padding: 0; border: 0; break-inside: avoid; } ul.ct-docs li::before { content: none; } .ct-rich p.ct-doc__rij { margin-top: 4px; } /* Ankermenu + rijen voor een productreeks zonder beelden (22-10). */ .ct-ankers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 clamp(32px, 4vw, 56px); padding: 16px 0; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); } .ct-ankers__label { margin-right: 8px; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); } .ct-ankers a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--lijn); background: var(--wit); color: var(--kop); font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; transition: border-color .2s, background .2s, color .2s; } @media (hover: hover) and (pointer: fine) { .ct-ankers a:hover { border-color: var(--blauw); background: var(--blauw); color: var(--wit); } } .ct-delen--rijen .ct-rij { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 80px); padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--lijn); scroll-margin-top: calc(var(--header-h) + 16px); } .ct-delen--rijen .ct-rij:last-child { border-bottom: 1px solid var(--lijn); } .ct-rij__kop h2 { margin: 0; } .ct-rij__docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .ct-rij__docs a.ct-doc { margin: 0; } .ct-rij__tekst > :first-child { margin-top: 0; } .ct-rij__tekst > :last-child { margin-bottom: 0; } @media (max-width: 900px) { .ct-delen--rijen .ct-rij { grid-template-columns: minmax(0, 1fr); gap: 16px; } .ct-ankers a { min-height: 40px; font-size: .9375rem; } } .ct-rich a.ct-doc em, .ct-rich ul.ct-docs em { font-style: normal; } .ct-rich ul.ct-docs li > a { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 16px; border: 2px solid var(--blauw); color: var(--blauw); font-weight: 700; font-size: .9375rem; text-decoration: none; background-image: none; } @media (hover: hover) and (pointer: fine) { .ct-rich ul.ct-docs li > a:hover { background: var(--blauw); color: var(--wit); } } .ch-split__beeld img.is-vrijstaand { padding: clamp(16px, 4%, 48px); } .cp-kaart__beeld img.is-vrijstaand, .ct-deel__beeld img.is-vrijstaand, .ch-bericht__beeld img.is-vrijstaand, .cs-inzet__beeld img.is-vrijstaand, .ct-tegels__beeld img.is-vrijstaand { padding: 6%; } .ch-links__thumb img.is-vrijstaand, .ch-rijen__thumb img.is-vrijstaand { padding: 3px; } /* Productbladen: links naar een pdf in de tekst als lijnknop met documentpictogram. */ /* Pdf-knop alleen als de link op zichzelf staat; een pdf-link midden in een zin blijft een gewone link (22-10). */ .ct-rich a.ct-doc { display: inline-flex; align-items: center; gap: 10px; margin: 6px 10px 6px 0; padding: 9px 16px; border: 2px solid var(--blauw); color: var(--blauw); font-weight: 700; font-size: .9375rem; text-decoration: none; background-image: none; } .ct-rich a.ct-doc::before, .ct-rich ul.ct-docs li > a::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } @media (hover: hover) and (pointer: fine) { .ct-rich a.ct-doc:hover { background: var(--blauw); color: var(--wit); } } /* Productblok op kennispagina's: h3 met code, vette regel eronder als ondertitel. */ .ct-rich h3 { margin-top: 2em; } .ct-rich h3 + p > strong:only-child { color: var(--kop); } /* Lange lijst van korte punten in twee kolommen (eerste helft links, tweede helft rechts). */ .ct-rich ul.ct-kolommen { columns: 2; column-gap: clamp(24px, 4vw, 48px); } .ct-rich ul.ct-kolommen li { break-inside: avoid; } @media (max-width: 600px) { .ct-rich ul.ct-kolommen { columns: 1; } } /* Foto's die in de tekst direct na elkaar staan, als rij naast elkaar (bijv. Over ons). */ .ct-galerij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 1.5em 0; } .ct-galerij p, .ct-galerij figure { margin: 0; } /* Foto's in een rij altijd volledig in beeld (22-10): passend in een 4:3-vak op lichtgrijs, nooit bijgesneden. */ .ct-galerij img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: transparent; margin: 0; } /* 22-10: liggend, beeldvullend, geen grijs vlak */ .ct-galerij img.is-vrijstaand, .ct-galerij img.is-staand { object-fit: contain; } .ct-galerij--video { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 2.5em 0; } .ct-galerij--video .ct-video { margin: 0; } /* Brede pagina (Over ons): tekst op leesbreedte, foto's en video's over de volle breedte. */ .ct-pagina--breed { grid-template-columns: minmax(0, 1fr); } .ct-pagina--breed .ct-pagina__tekst { max-width: none; } .ct-pagina--breed .ct-pagina__tekst > :not(.ct-galerij):not(.ct-delen) { max-width: 72ch; } /* Tekstdelen met beeld ernaast (Over ons): tekst links op leesbreedte, video of foto rechts; delen zonder beeld op leesbreedte. */ .ct-delen { display: grid; gap: clamp(40px, 5vw, 64px); } .ct-deel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--lijn); } .ct-deel--intro, .ct-deel:first-child { padding-top: 0; border-top: 0; } .ct-deel--beeld { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .ct-deel__tekst { max-width: 72ch; } .ct-deel__tekst > :first-child { margin-top: 0; } .ct-deel__tekst > :last-child { margin-bottom: 0; } .ct-deel__beeld { min-width: 0; } .ct-deel__beeld p, .ct-deel__beeld figure { margin: 0; } .ct-deel__beeld img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; } .ct-deel__beeld .ct-video { margin: 0; } /* Groep foto's naast een tekstdeel: klein raster van twee kolommen, elk beeld volledig in beeld. */ .ct-deel__beeld .ct-galerij--deel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; } .ct-deel__beeld .ct-galerij--deel img { aspect-ratio: 3 / 2; object-fit: cover; background: transparent; } .ct-deel__beeld .ct-galerij--deel img.is-vrijstaand, .ct-deel__beeld .ct-galerij--deel img.is-staand { object-fit: contain; } /* Slider voor fotoparen (22-10): één foto groot, horizontaal scrollen met snap, pijlen en stippen via main.js. */ .ct-slider__wrap { position: relative; } .ct-deel__beeld .ct-galerij--deel.ct-slider { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ct-deel__beeld .ct-galerij--deel.ct-slider::-webkit-scrollbar { display: none; } .ct-deel__beeld .ct-galerij--deel.ct-slider > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; margin: 0; } .ct-slider__pijl { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--kop); box-shadow: 0 6px 18px rgb(6 23 45 / .18); cursor: pointer; transform: translateY(-50%); transition: background .2s, color .2s; } .ct-slider__pijl svg { width: 22px; height: 22px; } .ct-slider__pijl--vorige { left: 12px; } .ct-slider__pijl--vorige svg { transform: rotate(180deg); } .ct-slider__pijl--volgende { right: 12px; } @media (hover: hover) and (pointer: fine) { .ct-slider__pijl:hover { background: var(--blauw); color: var(--wit); } } .ct-slider__stippen { display: flex; justify-content: center; gap: 8px; margin-top: 12px; } .ct-slider__stippen button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--lijn); cursor: pointer; transition: background .2s, transform .2s; } .ct-slider__stippen button.is-actief { background: var(--blauw); transform: scale(1.2); } /* Afwisselend tekst links/beeld rechts en beeld links/tekst rechts (Jeroen, 22-10). */ .ct-delen .ct-deel--beeld:nth-child(even of .ct-deel--beeld) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .ct-delen .ct-deel--beeld:nth-child(even of .ct-deel--beeld) .ct-deel__beeld { order: -1; } @media (max-width: 900px) { .ct-deel--beeld, .ct-delen .ct-deel--beeld:nth-child(even of .ct-deel--beeld) { grid-template-columns: minmax(0, 1fr); } .ct-delen .ct-deel--beeld:nth-child(even of .ct-deel--beeld) .ct-deel__beeld { order: 0; } } .ct-pagina--breed .ct-pagina__tekst > .ct-galerij { margin-block: clamp(40px, 5vw, 64px); } .ct-pagina--breed .ct-pagina__tekst > h2 { margin-top: 1.6em; } .ct-pagina--breed .ct-pagina__tekst > h2:first-child, .ct-pagina--breed .ct-pagina__tekst > .ct-lead + h2 { margin-top: 0; } /* Productkeuze op de pagina Afvalwaterchemie: drie knoppen en de vraag of het gezochte product erbij staat. */ .ct-keuze { margin: 2em 0; padding: clamp(20px, 3vw, 32px); background: var(--vlak); border-top: 3px solid var(--blauw); } .ct-keuze .ct-knoppen { margin-top: 0; } .ct-keuze p { margin: 20px 0 0; } .ct-keuze p strong { color: var(--kop); } /* Kaarten met onderliggende pagina's */ .ct-kinderen { padding-bottom: clamp(56px, 7vw, 96px); } .ct-kinderen .ct-h3 { margin-bottom: 24px; } .ct-kaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .ct-kaart a { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; height: 100%; padding: 24px; background: var(--vlak); color: var(--inkt); text-decoration: none; border-top: 3px solid transparent; transition: border-color .2s, background-color .2s; } .ct-kaart a:hover { border-color: var(--blauw); background: var(--blauw-licht); } .ct-kaart__titel { font-weight: 700; font-size: 1.125rem; line-height: 1.25; } .ct-kaart__sub { color: var(--tekst); font-size: .9375rem; } .ct-kaart .ct-icon { color: var(--blauw); transition: transform .3s var(--ease); } .ct-kaart a:hover .ct-icon { transform: translateX(4px); } /* Footer */ .ct-footer { background: var(--blauw-nacht); color: rgb(255 255 255 / .78); font-size: .9688rem; } .ct-footer a { color: var(--wit); text-decoration: none; } .ct-footer a:hover { text-decoration: underline; } .ct-footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr); /* contactkolom breder: de bedrijfsnaam brak af (23-10) */ gap: 40px 32px; padding-block: 64px 48px; } .ct-footer__kop { margin: 0 0 12px; color: rgb(255 255 255 / .6); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; } .ct-footer__kop a { color: inherit; } .ct-footer__links ul { list-style: none; margin: 0; padding: 0; } .ct-footer__links li { padding: 3px 0; } .ct-footer__bedrijf img { margin-bottom: 16px; width: 150px; } .ct-footer__bedrijf p { margin: 0; max-width: 32ch; } .ct-footer__contact strong { color: var(--wit); } .ct-footer__lijst { list-style: none; margin: 0; padding: 0; } .ct-footer__lijst li { break-inside: avoid; padding: 3px 0; } .ct-footer__lijst ul { display: none; } .ct-footer__onder { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding-block: 20px; border-top: 1px solid rgb(255 255 255 / .14); font-size: .875rem; } /* Onderste regel: © … | Sitemap | Website ontwikkeld door … | Privacyverklaring, gescheiden door verticale streepjes. */ .ct-footer__regel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; } .ct-footer__regel li + li::before { content: "|"; margin: 0 12px; color: rgb(255 255 255 / .35); } /* Taalkeuze: eerste letter op dezelfde lijn als de tekst erboven (compenseert de klikruimte). */ .ct-talen--voet { margin-left: -6px; } .ct-talen--voet a { color: rgb(255 255 255 / .7); padding: 4px 6px; } .ct-talen--voet a[aria-current] { color: var(--wit); } @media (max-width: 1100px) { .ct-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .ct-footer__bedrijf { grid-column: span 3; } } @media (max-width: 760px) { .ct-footer__grid { grid-template-columns: 1fr 1fr; } .ct-footer__bedrijf { grid-column: span 2; } } @media (max-width: 480px) { .ct-footer__grid { grid-template-columns: 1fr; } .ct-footer__bedrijf { grid-column: auto; } .ct-footer__regel { flex-direction: column; align-items: flex-start; gap: 6px; } .ct-footer__regel li + li::before { content: none; } .ct-footer__onder { flex-direction: column; align-items: flex-start; } } /* Lege staat in de editor */ .ct-leeg { padding: 24px; border: 2px dashed var(--lijn); color: var(--zacht); font-size: .9375rem; text-align: center; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } } /* Video en sitemap in de lopende tekst */ .ct-video { margin: 1.75em 0; aspect-ratio: 16 / 9; background: var(--vlak); } .ct-video iframe, .ct-video video { width: 100%; height: 100%; border: 0; display: block; } .ct-video--eigen { aspect-ratio: auto; } .ct-sitemap ul { margin-top: .35em; } /* Twee kolommen in plaats van één lange lijst (23-10). */ @media (min-width: 760px) { .ct-rich ul.ct-sitemap { columns: 2; column-gap: clamp(32px, 5vw, 72px); } .ct-sitemap > li { break-inside: avoid; } } .ct-pagina:has(.ct-sitemap) { grid-template-columns: minmax(0, 1fr); } /* Knoppen geven mee bij indrukken. */ .ct-knop:active { transform: scale(0.97); } /* ========================================================================== Micro-interacties. Alles op transform en opacity, hovers alleen met een muis. ========================================================================== */ :root { --uit: cubic-bezier(0.23, 1, 0.32, 1); } /* Knoppen: vlak vult schuin in de hoek van het logomerk, 30 graden (bevestigt dat je op iets klikbaars staat). */ .ct-knop { position: relative; overflow: hidden; isolation: isolate; --vul: var(--blauw-nacht); } .ct-knop::before { content: ""; position: absolute; z-index: -1; inset: 0 -40%; background: var(--vul); transform: translateX(-102%) skewX(-30deg); transition: transform .55s var(--uit); } .ct-knop--wit { --vul: var(--blauw-licht); } .ct-knop--lijn-wit { --vul: var(--wit); } .ct-knop--lijn { --vul: var(--blauw); } /* Alleen met een echte muis: op een telefoon blijft :hover na een tik hangen en dan stond "Bekijk oplossingen" in het blauw op de donkere foto, zonder het witte vlak (Jeroen, 22-10). Daar geen hoverkleuren. */ @media (hover: hover) and (pointer: fine) { .ct-knop:hover::before { transform: translateX(0) skewX(-30deg); } .ct-knop--primair:hover { background: var(--blauw); } .ct-knop--wit:hover { background: var(--wit); } .ct-knop--lijn-wit:hover { background: transparent; color: var(--blauw); } .ct-knop--lijn:hover { color: var(--wit); border-color: var(--blauw); } } .ct-knop { transition: color .3s var(--uit), border-color .3s, transform .16s var(--uit); } /* Tekstlinks: onderstreping tekent zich van links naar rechts. */ .ct-link, .ct-footer a, .ct-kruimelpad a, .ct-zij li a, .ch-slot__direct a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--uit), color .2s; } .ct-link:hover, .ct-footer a:hover, .ct-kruimelpad a:hover, .ct-zij li a:hover, .ch-slot__direct a:hover { background-size: 100% 1px; text-decoration: none; } .ct-zij li a { background-position: 14px 85%; } /* Glijder: één streep die meeschuift onder menu en taalwisselaar. */ .ct-nav { position: relative; } .ct-nav__lijst { position: relative; } .ct-glijder { position: absolute; left: 0; bottom: 0; height: 3px; width: 100px; background: var(--blauw); transform-origin: 0 0; opacity: 0; pointer-events: none; transition: transform .45s var(--uit), opacity .25s; } .ct-talen { position: relative; } .ct-talen a[aria-current] { box-shadow: none; } .ct-talen .ct-glijder { height: 2px; background: var(--rood); bottom: -2px; } html.ct-compact .ct-nav .ct-glijder { display: none; } /* Header: schaduw zodra er gescrold is. */ .ct-header { transition: box-shadow .3s; } .ct-header.is-gescrold { box-shadow: 0 8px 28px rgb(11 31 58 / .07); border-bottom-color: transparent; } /* Terug naar boven, met een ring die de voortgang laat zien. */ .ct-omhoog { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--blauw); color: var(--wit); box-shadow: 0 10px 24px rgb(6 23 45 / .18); cursor: pointer; opacity: 1; transform: none; transition: opacity .3s, transform .3s, background .2s; } /* 22-10: rustige ronde knop i.p.v. vierkant met voortgangsring */ .ct-omhoog[hidden] { display: grid; opacity: 0; transform: translateY(16px); pointer-events: none; } .ct-omhoog > svg:first-child { display: none; } .ct-omhoog rect { fill: none; stroke-width: 2; } .ct-omhoog__spoor { stroke: var(--lijn); } .ct-omhoog__ring { stroke: var(--blauw); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--voortgang, 0) * 100); } .ct-omhoog__pijl { width: 20px; height: 20px; transform: rotate(-90deg); transition: transform .4s var(--uit); } @media (hover: hover) and (pointer: fine) { .ct-omhoog:hover { background: var(--nacht); } .ct-omhoog:hover .ct-omhoog__pijl { transform: rotate(-90deg) translateX(3px); } } .ct-omhoog:active { transform: scale(.94); } @media (max-width: 760px) { .ct-omhoog { right: 16px; bottom: 16px; width: 40px; height: 40px; } .ct-omhoog__pijl { width: 18px; height: 18px; } } /* Kaarten op subpagina's en nieuws: pijl schuift, rand kleurt. */ .ct-kaart a { transition: border-color .3s, background-color .3s, transform .4s var(--uit); } @media (hover: hover) and (pointer: fine) { .ct-kaart a:hover { transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .ct-knop::before { transition: none; } } /* ========================================================================== Megamenu. Paneel onder de header: links het onderdeel, rechts de subpagina's. Opent met de muis (korte wachttijd), met de knop naast het item en met het toetsenbord. ========================================================================== */ .ct-nav__item { display: flex; align-items: center; } .ct-nav__open { display: grid; place-items: center; width: 20px; height: 24px; margin-left: -4px; margin-right: 4px; padding: 0; border: 0; background: none; color: var(--zacht); cursor: pointer; } .ct-nav__open .ct-icon { width: 14px; height: 14px; transition: transform .3s var(--uit); } .ct-nav__item.is-open > .ct-nav__open .ct-icon { transform: rotate(180deg); } .ct-nav__item.is-open > a { color: var(--blauw); } .ct-mega { position: fixed; left: 0; right: 0; top: var(--mega-top, 76px); z-index: 48; max-height: calc(100dvh - var(--mega-top, 76px)); overflow-y: auto; background: var(--wit); border-top: 1px solid var(--lijn); box-shadow: 0 24px 48px rgb(6 23 45 / .12); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s var(--uit), transform .3s var(--uit), visibility 0s .3s; } .ct-nav__item.is-open > .ct-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--uit), transform .3s var(--uit), visibility 0s; } .ct-mega__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 4vw, 72px); padding-block: 40px 48px; } /* Links: het onderdeel. Kop in hoofdletters zoals de hero, korte intro, link naar alles. */ .ct-mega__intro { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; padding-right: clamp(16px, 2vw, 32px); border-right: 1px solid var(--lijn); } .ct-mega__kop { color: var(--kop); font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 2.6vw, 2.75rem); line-height: .95; text-transform: uppercase; text-decoration: none; overflow-wrap: anywhere; } .ct-mega__kop:hover { color: var(--blauw); } .ct-mega__intro p { margin: 0; color: var(--zacht); font-size: .9375rem; line-height: 1.55; } .ct-mega__alles { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 6px; color: var(--blauw); font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; } .ct-mega__alles .ct-icon { width: 18px; height: 18px; transition: transform .3s var(--uit); } .ct-mega__alles:hover .ct-icon { transform: translateX(4px); } /* Rechts: altijd drie kolommen, zodat elk paneel dezelfde maat en hetzelfde ritme heeft. */ .ct-mega__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; align-content: start; } .ct-mega__link { display: grid; align-content: start; gap: 6px; color: var(--inkt); text-decoration: none; } /* Megamenu-foto's altijd volledig in beeld (Jeroen, 22-10): vak van 3:2, foto passend erin op een licht vlak; geen uitsnede, geen zoom. */ .ct-mega__beeld { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 6px; background: transparent; } /* geen grijs vlak (22-10) */ .ct-mega__beeld img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; } /* beeldvullend; alle menufoto's zijn liggend (22-10) */ .ct-mega__beeld img.is-vrijstaand { object-fit: contain; object-position: left bottom; } /* staande/kleinere foto's links-onder, zodat de titel eronder uitlijnt met de foto (22-10) */ .ct-mega__link:hover .ct-mega__beeld img { opacity: .92; } .ct-mega__meta { color: var(--zacht); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; } .ct-mega__titel { color: var(--kop); font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.02; text-transform: uppercase; transition: color .2s; } .ct-mega__link:hover .ct-mega__titel { color: var(--blauw); } .ct-mega__sub { color: var(--zacht); font-size: .875rem; line-height: 1.5; } /* Tekstitems: dunne lijn erboven, zodat het raster ook zonder foto's staat. */ .ct-mega__lijst--tekst .ct-mega__link { padding-top: 16px; border-top: 1px solid var(--lijn); transition: border-color .25s; } .ct-mega__lijst--tekst .ct-mega__link:hover { border-top-color: var(--blauw); } /* Items komen kort na elkaar binnen, zodat het oog van links naar rechts wordt meegenomen. */ .ct-nav__item.is-open .ct-mega__lijst > li { animation: ct-mega-in .35s var(--uit) both; animation-delay: calc(var(--i, 0) * 30ms + 60ms); } @keyframes ct-mega-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ct-scherm { position: fixed; inset: 0; z-index: 30; background: rgb(6 23 45 / .28); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; } .ct-scherm.is-aan { opacity: 1; visibility: visible; transition: opacity .25s; } /* Compact (mobiel): panelen klappen uit onder hun item. */ html.ct-compact .ct-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--lijn); } html.ct-compact .ct-nav__lijst > li > a { flex: 1; border-bottom: 0; } html.ct-compact .ct-nav__open { width: 48px; height: 48px; margin: 0; } html.ct-compact .ct-nav__open .ct-icon { width: 18px; height: 18px; } html.ct-compact .ct-mega { position: static; flex-basis: 100%; max-height: none; overflow: visible; box-shadow: none; border-top: 0; display: none; opacity: 1; visibility: visible; transform: none; } html.ct-compact .ct-nav__item.is-open > .ct-mega { display: block; } html.ct-compact .ct-mega__in { display: block; padding: 0 0 16px; } html.ct-compact .ct-mega__intro { display: none; } html.ct-compact .ct-mega__lijst { grid-template-columns: 1fr; gap: 0; } html.ct-compact .ct-mega__sub, html.ct-compact .ct-mega__beeld, html.ct-compact .ct-mega__meta { display: none; } html.ct-compact .ct-mega__link, html.ct-compact .ct-mega__lijst--tekst .ct-mega__link { padding: 10px 0; border-top: 0; } html.ct-compact .ct-mega__titel { font-size: 1.25rem; } html.ct-compact .ct-scherm { display: none; } @media (prefers-reduced-motion: reduce) { .ct-nav__item.is-open .ct-mega__lijst > li { animation: none; } } /* ========================================================================== De snede: rechthoek met een diagonale snede van 30 graden, zoals in het logomerk. Linksboven blijft een driehoekje over; bij hover kleurt dat rood (het logo). --snede-bg moet de achtergrondkleur van de sectie zijn. ========================================================================== */ /* 22-10: de snede en het rode driehoekje zijn op verzoek van Jeroen uitgezet ("heel lelijk"); de klasse blijft onschadelijk staan. */ .ct-snede { position: relative; display: block; overflow: hidden; --s: clamp(22px, 13%, 64px); --sb: clamp(6px, 2.4%, 12px); } .ct-snede::before, .ct-snede::after { content: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* De snede zelf, in de kleur van de achtergrond. */ .ct-snede::after { background: var(--snede-bg, var(--wit)); clip-path: polygon(var(--s) 0, calc(var(--s) + var(--sb)) 0, 0 calc((var(--s) + var(--sb)) * 1.732), 0 calc(var(--s) * 1.732)); } /* Het driehoekje dat rood wordt. */ .ct-snede::before { background: var(--rood); clip-path: polygon(0 0, var(--s) 0, 0 calc(var(--s) * 1.732)); opacity: 0; transition: opacity .3s var(--uit); } a:hover .ct-snede::before, a:focus-visible .ct-snede::before, .ct-snede.is-merk::before { opacity: 1; } .ct-merk { display: block; width: 74px; height: auto; color: var(--rood); } /* ========================================================================== Kaartrasters zonder losse kaart op een nieuwe rij (23-10). Het aantal kolommen volgt het aantal kaarten: 2 tot 5 op één rij, 6 en 9 in rijen van drie, 7 en 8 in rijen van vier, 10 in rijen van vijf. Geldt vanaf 1000 px; daaronder houden de rasters hun eigen automatische kolommen. ========================================================================== */ @media (min-width: 1000px) { :is(.cs-inzet__rij, .cp-andere__rij, .ci-andere__rij, .ct-kaarten, .ct-tegels:not(.ct-tegels--sectoren) ul) { --n: 4; } :is(.cs-inzet__rij, .cp-andere__rij, .ci-andere__rij, .ct-kaarten, .ct-tegels:not(.ct-tegels--sectoren) ul):has(> li:nth-child(2):last-child) { --n: 2; } :is(.cs-inzet__rij, .cp-andere__rij, .ci-andere__rij, .ct-kaarten, .ct-tegels:not(.ct-tegels--sectoren) ul):has(> li:nth-child(3):last-child, > li:nth-child(6):last-child, > li:nth-child(9):last-child) { --n: 3; } :is(.cs-inzet__rij, .cp-andere__rij, .ci-andere__rij, .ct-kaarten, .ct-tegels:not(.ct-tegels--sectoren) ul):has(> li:nth-child(5):last-child, > li:nth-child(10):last-child) { --n: 5; } :is(.cs-inzet__rij, .cp-andere__rij, .ci-andere__rij, .ct-kaarten, .ct-tegels:not(.ct-tegels--sectoren) ul):not(:has(> li:nth-child(2))) { --n: 3; } :is(.cs-inzet__rij, .cp-andere__rij, .ci-andere__rij, .ct-kaarten, .ct-tegels:not(.ct-tegels--sectoren) ul) { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } } /* Footerlogo op wit vlak (Walter, 23-10). */ .ct-footer__logo { box-sizing: content-box; width: 128px; height: auto; padding: 22px 27px; background: var(--wit); border-radius: 3px; } /* Cookiebanner (26-10): kaart linksonder, blokkeert de pagina niet; op mobiel over de volle breedte onderaan. */ .ct-cookies { position: fixed; left: 24px; bottom: 24px; z-index: 90; width: min(420px, calc(100vw - 32px)); padding: 24px; background: var(--wit); color: var(--tekst); border-top: 3px solid var(--blauw); box-shadow: 0 16px 48px rgb(0 20 50 / .22); } .ct-cookies[hidden] { display: none; } .ct-cookies__titel { margin: 0 0 8px; color: var(--kop); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; text-transform: uppercase; } .ct-cookies__tekst { margin: 0 0 18px; font-size: .9375rem; line-height: 1.6; } .ct-cookies__tekst a { color: var(--blauw); } .ct-cookies__knoppen { display: flex; flex-wrap: wrap; gap: 8px; } .ct-cookies__knoppen .ct-knop { flex: 1 1 auto; justify-content: center; } @media (max-width: 520px) { .ct-cookies { left: 0; bottom: 0; width: 100%; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); } } .ct-footer__knop { padding: 0; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }