groen en
de popup-instelling close_button_color komt daar niet doorheen. */
.hc-popup-menu .dialog-close-button { color: var(--e-global-color-bone); }
.hc-mobielmenu__nav .elementor-nav-menu a.elementor-item {
border-bottom: 1px solid rgba(204, 186, 120, .16);
}
/* Het paneel lijnt links uit, net als de rest van de site. */
.hc-mobielmenu__nav .elementor-nav-menu { align-items: flex-start; }
.hc-mobielmenu__nav .elementor-nav-menu a.elementor-item { justify-content: flex-start; }
/* Logo links, net als de rest van het paneel. */
/* De reizen staan onder Reizen; in een paneel horen ze gewoon zichtbaar te
zijn in plaats van achter een uitklap. */
/* ------------------------------------------------- WooCommerce */
/* WooCommerce levert zijn eigen opmaak mee: paarse knoppen, systeemletters en
een eigen tabbladenbalk. Die staat los van de kit, dus hier wordt hij in de
huisstijl getrokken. Wat via een Elementor-widget loopt erft de globals al;
dit is voor alles wat WooCommerce zelf rendert. */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
background-color: var(--e-global-color-primary);
color: var(--e-global-color-bone);
border: 1px solid var(--e-global-color-primary);
border-radius: 999px;
font-family: var(--e-global-typography-knop-font-family), sans-serif;
font-size: var(--e-global-typography-knop-font-size);
font-weight: var(--e-global-typography-knop-font-weight);
letter-spacing: var(--e-global-typography-knop-letter-spacing);
text-transform: uppercase;
padding: 18px 32px;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
background-color: var(--e-global-color-accent);
border-color: var(--e-global-color-accent);
color: var(--e-global-color-secondary);
}
.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled {
background-color: rgba(43, 93, 66, .35);
border-color: transparent; color: var(--e-global-color-bone);
}
.woocommerce div.product .product_title {
font-family: var(--e-global-typography-h1-font-family), sans-serif;
font-size: var(--e-global-typography-h1-font-size);
font-weight: var(--e-global-typography-h1-font-weight);
line-height: var(--e-global-typography-h1-line-height);
letter-spacing: var(--e-global-typography-h1-letter-spacing);
text-transform: var(--e-global-typography-h1-text-transform);
color: var(--e-global-color-accent);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
font-family: var(--e-global-typography-prijs-font-family), sans-serif;
font-size: var(--e-global-typography-prijs-font-size);
font-weight: var(--e-global-typography-prijs-font-weight);
color: var(--e-global-color-accent);
font-variant-numeric: tabular-nums;
}
.woocommerce div.product .woocommerce-tabs ul.tabs { padding-left: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--e-global-color-lijn); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent; border: 0; border-radius: 0;
border-bottom: 2px solid transparent; margin: 0 24px 0 0; padding: 0 0 10px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-family: var(--e-global-typography-micro-font-family), sans-serif;
font-size: var(--e-global-typography-micro-font-size);
font-weight: var(--e-global-typography-micro-font-weight);
letter-spacing: var(--e-global-typography-micro-letter-spacing);
text-transform: uppercase;
color: var(--e-global-color-steen); padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
border-bottom-color: var(--e-global-color-secondary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--e-global-color-accent); }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_table th { color: var(--e-global-color-accent); }
.woocommerce table.shop_attributes td { font-style: normal; }
.woocommerce .woocommerce-breadcrumb {
font-family: var(--e-global-typography-micro-font-family), sans-serif;
font-size: var(--e-global-typography-micro-font-size);
letter-spacing: var(--e-global-typography-micro-letter-spacing);
text-transform: uppercase;
color: var(--e-global-color-steen);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--e-global-color-primary); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce div.product form.cart select {
border: 1px solid var(--e-global-color-lijn-sterk);
border-radius: 999px; padding: 12px 18px;
background: var(--e-global-color-papier);
color: var(--e-global-color-accent);
font-family: var(--e-global-typography-text-font-family), sans-serif;
}
.woocommerce .quantity .qty {
border: 1px solid var(--e-global-color-lijn-sterk);
border-radius: 999px; padding: 12px 8px;
background: var(--e-global-color-papier);
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
border-top-color: var(--e-global-color-primary);
background: var(--e-global-color-papier);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--e-global-color-primary); }
/* ------------------------------------------------- boekingsformulier */
/* Een formulier van achttien velden voelt als werk. In vier stappen met een
voortgangsbalk voelt het als iets afmaken. Dit is de opmaak van die stappen;
de logica is Elementor's eigen multistep. */
.hc-boekform .e-form__indicators {
margin-bottom: 40px; gap: 0;
}
.hc-boekform .e-form__indicators__indicator {
color: var(--e-global-color-steen);
font-family: var(--e-global-typography-micro-font-family), sans-serif;
font-size: var(--e-global-typography-micro-font-size);
letter-spacing: var(--e-global-typography-micro-letter-spacing);
text-transform: uppercase;
padding-bottom: 12px;
border-bottom: 2px solid var(--e-global-color-lijn);
transition: color .2s ease, border-color .2s ease;
}
.hc-boekform .e-form__indicators__indicator--state-inactive { opacity: .6; }
.hc-boekform .e-form__indicators__indicator--state-active,
.hc-boekform .e-form__indicators__indicator--state-completed {
color: var(--e-global-color-accent);
border-bottom-color: var(--e-global-color-secondary);
opacity: 1;
}
.hc-boekform .e-form__indicators__indicator__number {
font-family: var(--e-global-typography-prijs-font-family), sans-serif;
font-size: 20px; margin-right: 8px;
}
.hc-boekform .elementor-field-group > label {
font-family: var(--e-global-typography-micro-font-family), sans-serif;
font-size: var(--e-global-typography-micro-font-size);
letter-spacing: var(--e-global-typography-micro-letter-spacing);
text-transform: uppercase;
color: var(--e-global-color-steen);
margin-bottom: 8px;
}
.hc-boekform .elementor-field-textual {
border: 1px solid var(--e-global-color-lijn-sterk);
background: var(--e-global-color-papier);
color: var(--e-global-color-accent);
border-radius: 999px; padding: 15px 20px; min-height: 52px;
}
.hc-boekform textarea.elementor-field-textual { border-radius: 16px; }
.hc-boekform .elementor-field-textual:focus {
border-color: var(--e-global-color-primary);
box-shadow: 0 0 0 3px rgba(43, 93, 66, .18);
}
.hc-boekform .elementor-field-description {
font-size: 13px; color: var(--e-global-color-steen); margin-top: 6px;
}
.hc-boekform .e-form__buttons { gap: 12px; margin-top: 16px; }
.hc-boekform .elementor-message {
border-radius: 0; padding: 16px 20px;
font-family: var(--e-global-typography-text-font-family), sans-serif;
}
.hc-boekform .elementor-message-success {
background: var(--e-global-color-groen-sluier);
color: var(--e-global-color-primary);
}
@media (max-width: 767px) {
.hc-boekform .e-form__indicators { flex-wrap: wrap; gap: 8px 16px; }
.hc-boekform .e-form__indicators__indicator { border-bottom-width: 2px; }
}
/* De staplabels staan naast elkaar en mogen niet in losse woorden vallen. */
.hc-boekform .e-form__indicators__indicator { white-space: nowrap; }
.hc-boekform .e-form__indicators__indicator__label { white-space: nowrap; }
@media (max-width: 600px) {
.hc-boekform .e-form__indicators__indicator__label { display: none; }
}
/* ------------------------------------------------- reizigers */
/* Een kop boven elk reizigersblok, zodat het formulier leest als een lijst
mensen en niet als veertig velden. De tekst staat in css omdat een
formulier geen koppen kent; het is opmaak, geen inhoud. */
.hc-boekform .hc-verborgen { display: none !important; }
.hc-boekform .hc-reiziger-groep__start { margin-top: 34px; position: relative; }
.hc-boekform .hc-reiziger-groep__start::before {
position: absolute; top: -26px; left: 0;
font-family: var(--e-global-typography-h4-font-family), sans-serif;
font-size: var(--e-global-typography-h4-font-size);
font-weight: var(--e-global-typography-h4-font-weight);
letter-spacing: var(--e-global-typography-h4-letter-spacing);
text-transform: uppercase;
color: var(--e-global-color-accent);
}
.hc-boekform .hc-reiziger-groep--1.hc-reiziger-groep__start::before { content: "Reiziger 1"; }
.hc-boekform .hc-reiziger-groep--2.hc-reiziger-groep__start::before { content: "Reiziger 2"; }
.hc-boekform .hc-reiziger-groep--3.hc-reiziger-groep__start::before { content: "Reiziger 3"; }
.hc-boekform .hc-reiziger-groep--4.hc-reiziger-groep__start::before { content: "Reiziger 4"; }
.hc-boekform .hc-reiziger-groep--5.hc-reiziger-groep__start::before { content: "Reiziger 5"; }
.hc-boekform .hc-reiziger-groep--6.hc-reiziger-groep__start::before { content: "Reiziger 6"; }
.hc-boekform .hc-reiziger-groep--7.hc-reiziger-groep__start::before { content: "Reiziger 7"; }
.hc-boekform .hc-reiziger-groep--8.hc-reiziger-groep__start::before { content: "Reiziger 8"; }
.hc-reizigers-acties {
display: flex; flex-wrap: wrap; gap: 12px; width: 100%; margin: 22px 0 6px;
}
.hc-reiziger-knop {
background: transparent;
border: 1px solid var(--e-global-color-lijn-sterk);
border-radius: 999px;
padding: 12px 22px;
font-family: var(--e-global-typography-knop-font-family), sans-serif;
font-size: 12px; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase;
color: var(--e-global-color-accent);
cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hc-reiziger-knop::before { content: "+"; margin-right: 8px; font-size: 15px; }
.hc-reiziger-knop--minder::before { content: "\2212"; }
.hc-reiziger-knop:hover {
background: var(--e-global-color-accent);
border-color: var(--e-global-color-accent);
color: var(--e-global-color-secondary);
}
.hc-reiziger-knop[hidden] { display: none; }
/* ------------------------------------------------- korte regels */
/* Een losse regel van een paar woorden hoort niet af te breken. In een
flexrij krimpt zo'n kolom anders tot de smalste maat en valt de zin in
tweeen. Op smal mag hij wel gewoon meelopen. */
.hc-eenregel { flex: 0 0 auto; }
.hc-eenregel :where(p, .elementor-heading-title) { white-space: nowrap; }
@media (max-width: 900px) {
.hc-eenregel { flex: 1 1 100%; }
.hc-eenregel :where(p, .elementor-heading-title) { white-space: normal; }
}
/* ------------------------------------------------- megamenu, woordafbreking */
/* De reisnamen in het paneel braken middenin een woord omdat de kolom smal is
en Elementor's eigen regel woordafbreking toestaat. Twee klassen diep zodat
deze wint. */
.hc-mega.hc-mega .hc-menukaart__titel .elementor-heading-title,
.hc-mega.hc-mega .hc-menukaart .elementor-heading-title {
overflow-wrap: normal;
word-break: keep-all;
hyphens: none;
-webkit-hyphens: none;
}
/* "Drielandenweekend" is een woord van zeventien tekens. Bij 16px past het
niet in de kolom en breekt het middenin. keep-all helpt daar niet: dat geldt
alleen voor Chinees, Japans en Koreaans. De letter moet dus kleiner, en het
miniatuur smaller zodat er meer ruimte overblijft. */
.hc-mega.hc-mega .hc-menukaart .hc-menukaart__titel .elementor-heading-title {
font-size: 13px;
line-height: 1.3;
letter-spacing: 0;
white-space: nowrap;
}
/* ------------------------------------------------- mobiel menu, paneel */
/* Elementor geeft een uitklapmenu zijn eigen dropdownstijl: elf pixels met
ruime letterafstand, bedoeld voor een lijstje onder een balk. In een paneel
op een telefoon is dat onleesbaar en breken de reisnamen in drieen. Alles
hieronder brengt het terug naar iets wat je met een duim kunt raken. */
.hc-mobielmenu__nav,
.hc-mobielmenu__nav .elementor-nav-menu,
.hc-mobielmenu__nav .elementor-nav-menu > li { width: 100%; }
.hc-mobielmenu__nav .elementor-nav-menu > li > a.elementor-item {
font-family: var(--e-global-typography-secondary-font-family), sans-serif;
font-size: 20px;
font-weight: var(--e-global-typography-secondary-font-weight);
letter-spacing: 0;
text-transform: uppercase;
color: var(--e-global-color-bone);
padding: 16px 0;
border-bottom: 1px solid rgba(204, 186, 120, .16);
white-space: nowrap;
}
/* De reizen staan open onder Reizen; een uitklap in een paneel is een klik te
veel. Ze staan iets ingesprongen met een gouden streep ernaast. */
.hc-mobielmenu__nav .elementor-nav-menu ul.sub-menu {
display: block !important;
position: static !important;
width: 100%;
background: transparent; box-shadow: none;
margin: 6px 0 10px;
padding: 0 0 0 16px;
border-left: 2px solid rgba(204, 186, 120, .28);
}
.hc-mobielmenu__nav .elementor-nav-menu ul.sub-menu li { width: 100%; }
/* Een klasse extra: Elementor zet de dropdownstijl met een even specifieke
regel die later laadt, dus zonder dit blijven de reisnamen in kapitalen met
ruime letterafstand staan en breken ze alsnog. */
.hc-mobielmenu .hc-mobielmenu__nav .elementor-nav-menu ul.sub-menu a.elementor-sub-item {
font-family: var(--e-global-typography-text-font-family), sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.35;
letter-spacing: 0;
text-transform: none;
color: var(--e-global-color-bone);
padding: 9px 0;
border-bottom: 0;
white-space: nowrap;
}
.hc-mobielmenu .hc-mobielmenu__nav .elementor-nav-menu ul.sub-menu a.elementor-sub-item:hover,
.hc-mobielmenu .hc-mobielmenu__nav .elementor-nav-menu ul.sub-menu a.elementor-sub-item.elementor-item-active {
color: var(--e-global-color-secondary);
}
.hc-mobielmenu__nav .elementor-nav-menu .sub-arrow { display: none; }
/* ------------------------------------------------- zwevende plug-inknoppen */
/* De toegankelijkheidswidget van Elementor hangt een knop van 44px vast in de
rechteronderhoek, op elke pagina, met z-index 2147483645. Samen met de
cookieknop stonden er twee losse iconen permanent over het ontwerp heen.
De knop zit in een shadow root en is van buitenaf niet te bereiken; het
gastelement #ea11y-root staat wel gewoon in de pagina.
Let op: hiermee verdwijnt ook het voorleesmenu van die widget. De site zelf
voldoet aan de contrasteisen en werkt met toetsenbordbediening, en zoomen
doet de browser. Terugzetten is een regel weghalen, of de widget uitzetten
in wp-admin bij Elementor > Accessibility. */
#ea11y-root { display: none !important; }
/* ------------------------------------------------- tekstkleur op HC Groen */
/* Mist en Goud zijn de gedempte kleuren van het donkere register en zijn
afgestemd op Nacht: 8.07:1 en 9.75:1. Op HC Groen zakken diezelfde twee naar
3.27:1 en 3.95:1, onder de drempel voor lopende tekst. Dat raakte de intro
van de sectie individuele reizen, de eyebrow erboven en de naam onder elke
review — gemeten met build/pw/contrast.js.
De variabelen worden hier alleen op de tekstdragers zelf herschreven, niet
op de sectie. Daarmee blijft de goudkleur van een vlak, een knoprand of een
icoon ongemoeid; alleen wat gelezen moet worden gaat naar Goud licht, dat op
groen 4.95:1 haalt en verder dezelfde kleur is. */
.hc-op-groen .elementor-heading-title,
.hc-op-groen .elementor-widget-text-editor,
.hc-op-groen .elementor-widget-text-editor p,
.hc-op-groen .elementor-widget-text-editor li,
.hc-op-groen .elementor-icon-list-text {
--e-global-color-mist: var(--e-global-color-geel-zacht, #DDD0A0);
--e-global-color-secondary: var(--e-global-color-geel-zacht, #DDD0A0);
}
/* ------------------------------------------------- nieuwsbrief in de footer */
/* Het formulier stond op de paginatekstkleur (#2E2E2E) en dus op 1.54:1 tegen
de zwarte footer: het label was aanwezig en onleesbaar. Het veld zelf is wit,
de tekst erin hoort dus donker te zijn; het label en de hulptekst eromheen
staan op Mist. */
.hc-form--donker .elementor-field-group > label,
.hc-form--donker .elementor-field-subgroup label,
.hc-form--donker .elementor-field-description {
color: var(--e-global-color-mist);
}
.hc-form--donker input,
.hc-form--donker textarea,
.hc-form--donker select {
color: var(--e-global-color-accent);
}
.hc-form--donker input::placeholder,
.hc-form--donker textarea::placeholder {
color: var(--e-global-color-steen);
opacity: 1;
}
/* ------------------------------------------- klikvlak van een kalenderregel */
/* De reiskaart, de blogkaart en de reisvormkaart zijn over hun hele vlak
klikbaar; de kalenderregel was dat niet en reageerde alleen op de knop
rechts. Zelfde constructie als bij .hc-kaart: de knop krijgt een uitgerekte
::after en de lagen ertussen gaan los van position: relative, anders bedekt
het vlak alleen de knop zelf. Een uitverkochte regel heeft geen knop en
blijft dus terecht onklikbaar. Nagemeten met build/pw/klik.js. */
.hc-vertrek { position: relative; }
.hc-vertrek .e-con, .hc-vertrek .e-con-inner, .hc-vertrek .elementor-widget,
.hc-vertrek .elementor-widget-container, .hc-vertrek .elementor-button-wrapper,
.hc-vertrek .hc-vertrek__boek .elementor-button { position: static; }
/* ------------------------------------------------- verborgen waardedragers */
/* Een dynamic tag past niet in het attributenveld van een container, dus de
vertrekpagina zet de reisnaam en het vertreklabel in een gewone widget die
hier onzichtbaar wordt. De bewegingslaag leest ze uit om het
aanvraagformulier op die pagina alvast in te vullen. */
.hc-drager { display: none !important; }
/* ============================================================ hercontrole 17 sep */
/* -------------------------------------------------- focus op een donker vlak */
/* De focusring is een groene gloed. Op gebroken wit werkt dat; op Nacht haalt
hij 1,11:1 en op HC Groen 2,75:1, en WCAG 1.4.11 vraagt 3:1. Wie met het
toetsenbord door de meelopende balk of de voettekst loopt zag dus niet waar
hij stond. Op die vlakken wordt de ring licht. */
.hc-op-donker :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.hc-boekbalk :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.hc-footer :where(a, button, input, select, textarea, [tabindex]):focus-visible {
box-shadow: 0 0 0 3px rgba(242, 241, 237, .85);
}
/* -------------------------------------------------- knoplabels op een klein scherm */
/* "Vraag deze reis individueel aan" is 366px breed in een kolom van 322px, en
met white-space: nowrap valt de rechterrand buiten het scherm: de knop wordt
afgekapt en de afgeronde hoek weggesneden. Onder de 768px mag een lang label
dus over twee regels. De kortere labels raakt dit niet. */
/* Tot en met het tabletbreekpunt, niet alleen op mobiel. Op 768px liep dit mis
op zeven pagina's: "Zet me op de wachtlijst" 75px buiten beeld, "Bekijk alle
vertrekdata" 71px, "Vraag een individuele reis aan" 64px, en in de kaarten
op /aanbod/ en de homepage werd "Bekijk →" afgekapt tot "BEKIJK" zonder pijl.
Alles door één regel: white-space: nowrap op de knop. */
@media (max-width: 1024px) {
.hc-btn .elementor-button,
.hc-link .elementor-button {
white-space: normal;
max-width: 100%;
text-align: center;
}
.hc-link .elementor-button { text-align: left; }
.hc-btn .elementor-button-content-wrapper { flex-wrap: nowrap; }
}
/* -------------------------------------------------- de winkelwagenknop op mobiel */
/* Het aantalveld en de knop stonden naast elkaar in een rij van 390px; de knop
liep er 43px uit en las als "Toevoegen aan winkelwag". Onder elkaar past het. */
@media (max-width: 767px) {
.hc-product__kopen form.cart { flex-wrap: wrap; gap: 12px; }
.hc-product__kopen form.cart .quantity { flex: 0 0 auto; }
.hc-product__kopen form.cart .single_add_to_cart_button {
flex: 1 1 100%;
width: 100%;
white-space: normal;
}
}
/* -------------------------------------------------- de stappenbalk */
/* De labels stonden onder de 600px op display: none. Wat overbleef waren vier
genummerde bolletjes zonder betekenis: je zag hoeveel stappen er waren, maar
niet welke. Ze staan nu onder het cijfer, klein en afgebroken waar nodig. */
@media (max-width: 600px) {
.hc-boekform .e-form__indicators__indicator__label {
display: block;
white-space: normal;
font-size: 11px;
line-height: 1.2;
text-align: center;
}
.hc-boekform .e-form__indicators__indicator { white-space: normal; }
}
/* De inactieve stappen stonden op opacity .6 over Steen, effectief 2,39:1.
Een stap die je nog moet doen mag gedempt zijn, niet onleesbaar. */
.hc-boekform .e-form__indicators__indicator { opacity: 1; }
.hc-boekform .e-form__indicators__indicator:not(.e-form__indicators__indicator--state-active):not(.e-form__indicators__indicator--state-completed)
.e-form__indicators__indicator__label { color: var(--e-global-color-steen); }
/* -------------------------------------------------- uitverkochte vertrekken */
/* De kaart stond als geheel op opacity .62, waardoor de knoptekst op 3,69:1
uitkwam terwijl de knop gewoon klikbaar is: de uitzondering voor
uitgeschakelde bediening geldt dan niet. En er stond nergens dát het vertrek
vol zit; je zag alleen een vage kaart. */
.hc-woo-archief li.product.outofstock { opacity: 1; }
.hc-woo-archief li.product.outofstock .hc-kaart__beeld,
.hc-woo-archief li.product.outofstock img { opacity: .55; }
.hc-woo-archief li.product.outofstock > a::after,
.hc-woo-archief li.product.outofstock::after {
content: "Uitverkocht";
display: inline-block;
margin-top: 8px;
padding: 3px 10px;
font-family: var(--e-global-typography-accent-font-family), sans-serif;
font-size: 10.5px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--e-global-color-bone);
background: var(--e-global-color-steen);
border-radius: 999px;
}
.hc-woo-archief li.product.outofstock > a::after { content: none; }
/* -------------------------------------------------- de balk op een klein scherm */
/* 152px van 844px op de reisvormpagina's en 197px op de keuzepagina's, ofwel
18 tot 23 procent van het scherm, permanent. De reisnaam kan eruit: die staat
in de kop van de pagina waar je op staat. */
@media (max-width: 767px) {
.hc-boekbalk #hc-reis-boekbalk-titel,
.hc-boekbalk .hc-boekbalk__titel { display: none; }
.hc-boekbalk > .e-con-inner > .e-con:first-child > .elementor-widget-heading:first-child {
display: none;
}
.hc-boekbalk { padding-top: 10px; padding-bottom: 10px; }
}
/* -------------------------------------------------- de keuzekaart per reisvorm */
/* "Hoe wil je deze reis doen?" is de kern van de reispagina, en daar was alleen
de tekstlink onderaan klikbaar. Zelfde constructie als bij .hc-kaart en
.hc-vormkaart: de knop krijgt een uitgerekte ::after en de lagen ertussen
gaan los van position: relative, anders bedekt het vlak alleen de knop. */
.hc-keuzekaart { position: relative; }
.hc-keuzekaart .e-con, .hc-keuzekaart .e-con-inner,
.hc-keuzekaart .elementor-widget, .hc-keuzekaart .elementor-widget-container,
.hc-keuzekaart .elementor-button-wrapper,
.hc-keuzekaart .hc-btn .elementor-button { position: static; }
/* Het hele vlak reageert nu, dus ook de aanwijzer en de hover horen bij de
kaart en niet alleen bij de link. */
.hc-keuzekaart { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.hc-keuzekaart:hover { border-color: var(--e-global-color-primary); }
.hc-keuzekaart:hover .hc-btn--pijl .elementor-button-icon { transform: translateX(4px); }
/* -------------------------------------------------- cijfers in de stappenbalk */
/* Een afgeronde stap krijgt een gevulde cirkel in Nacht, maar het cijfer erin
bleef Nacht: zwart op zwart, contrast 1.00, dus je zag alleen een donkere
stip en wist niet meer welke stap je gehad had. Gemeten met
build/pw/stapnummers.js. */
.hc-boekform .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number,
.hc-boekform .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__icon {
color: var(--e-global-color-bone);
}
/* -------------------------------------------------- klikvlak van een kaart */
/* Het klikvlak zelf zit in design/beweging.js (kaartklik). De css-oplossing met
een uitgerekte ::after leek te werken maar leverde geen kliks af; wat hier
overblijft is de aanwijzer, zodat het vlak er ook klikbaar uitziet. */
.hc-klikbaar { cursor: pointer; }
/* ============================================ mobiele controle 17 september */
@media (max-width: 767px) {
/* De productkaarten op /shop/ liepen 36px buiten hun container. Omdat html en
body op overflow-x: clip staan werd dat stuk afgeknipt in plaats van
scrollbaar: je zag een kaart met een afgesneden rechterrand en geen manier
om erbij te komen. WooCommerce rekent de kaartbreedte zelf uit met een
negatieve marge die hier niet opgaat. */
/* Niet op .hc-woo-archief: die klasse staat op de widget van de vertrekpagina
en niet op het archief van /shop/, en daar zat de fout juist. De ul is wel
322 breed, het is de li die op de eigen rasterbreedte van WooCommerce blijft
staan en 382 wordt. */
/* De ul is een raster van Elementor (.elementor-grid, columns-4) en de li is
dus een rasteritem: width op het item doet niets zolang de kolom zelf 382
breed blijft. Op een scherm van 390 past er een kolom. */
/* Elementor legt hier een raster neer waarvan de kolom 382px breed blijft in
een container van 322: de kaart werd 36px afgesneden en omdat html en body
op overflow-x: clip staan viel dat stuk gewoon weg. De kolombreedte
overschrijven lukte niet, die wordt dieper gezet dan een uitroepteken hier
wint. Op een scherm van 390 past er toch maar een kaart naast elkaar, dus
het raster gaat eruit en de kaarten staan onder elkaar. */
.elementor .woocommerce ul.products {
margin-right: 0;
margin-left: 0;
display: block !important;
}
.elementor .woocommerce ul.products li.product {
width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
float: none !important;
clear: both;
margin-bottom: 24px !important;
}
/* Raakvlakken. De menuregels in de voettekst waren 36px hoog en raakten
elkaar zonder tussenruimte; de juridische regels onderaan waren 13px. De
eis is 44px, of een vrij vlak van 44 om het midden. De tekst blijft waar
hij staat, alleen het aanraakbare vlak groeit. */
/* De voettekst is een theme-sjabloon; Elementor zet er zijn eigen
.elementor-location-footer omheen en onze eigen klasse zit dieper. */
/* Elementor zet de padding van een menuregel zelf met een .elementor-kit-6 die even
zwaar weegt en later laadt, vandaar het uitroepteken. */
.elementor-location-footer .elementor-nav-menu a.elementor-item {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.hc-juridisch .elementor-nav-menu a.elementor-item {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.hc-juridisch .elementor-nav-menu { row-gap: 4px; }
/* De hamburgerknop was 26x26. Er is ruimte omheen, dus hij haalde de norm,
maar een knop die het hele menu opent mag zelf raakbaar zijn. */
.hc-burger a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
/* De stappenbalk viel uiteen in vier regels van samen 377px, bijna de helft
van het scherm, en stap 1 stond uit de lijn: een smaller vak, het cijfer
27px naar links en als enige een label over twee regels. Vier gelijke
vakken naast elkaar, en de labels eronder. */
.hc-boekform .e-form__indicators {
display: flex;
flex-wrap: nowrap;
gap: 6px;
align-items: flex-start;
}
.hc-boekform .e-form__indicators__indicator {
flex: 1 1 0;
min-width: 0;
text-align: center;
padding: 0;
}
.hc-boekform .e-form__indicators__indicator__number {
margin: 0 auto;
}
.hc-boekform .e-form__indicators__indicator__label {
font-size: 10px;
letter-spacing: .06em;
line-height: 1.25;
hyphens: auto;
}
.hc-boekform .e-form__indicators__indicator__separator { display: none; }
}
/* Hetzelfde raster loopt op tablet uit de container: de kolom blijft 478px in
een breedte van 668. Daar passen er twee naast elkaar, dus flex in plaats van
het raster, met dezelfde reden als hierboven: de kolombreedte zelf is niet te
overschrijven. */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor .woocommerce ul.products {
display: flex !important;
flex-wrap: wrap;
gap: 24px;
margin-right: 0;
margin-left: 0;
}
.elementor .woocommerce ul.products li.product {
width: calc(50% - 12px) !important;
margin: 0 !important;
float: none !important;
}
}
/* ------------------------------------------- tabletcontrole 17 september */
@media (min-width: 768px) and (max-width: 1024px) {
/* "Wat is inbegrepen" hield twee kolommen aan binnen een halve kolom: 138px
per kolom, regels van één woord. Op tablet is er ruimte voor één. */
.hc-sectie[id="inbegrepen"] .elementor-grid,
.hc-sectie[id="inbegrepen"] [class*="elementor-grid-"] {
grid-template-columns: 1fr !important;
}
.hc-sectie[id="inbegrepen"] > .e-con-inner > .e-con { flex-wrap: wrap; }
}
/* De meelopende balk staat vast onderaan en dekt daar de onderste strook van de
pagina af: op tablet ving hij kliks op waar een keuzekaart nog doorliep. De
pagina krijgt onderaan evenveel ruimte terug als de balk hoog is, zodat je
overal onderlangs kunt scrollen. */
body:has(.hc-boekbalk) { padding-bottom: 96px; }
@media (max-width: 767px) { body:has(.hc-boekbalk) { padding-bottom: 150px; } }
/* De winkelwagenknop stak 10px buiten zijn kolom: padding plus breedte telden
bij elkaar op. */
.elementor .elementor-element.hc-woo .cart button.single_add_to_cart_button,
.elementor .elementor-element.hc-woo .single_add_to_cart_button { box-sizing: border-box; }
/* ------------------------------------------- klikvlakken, 17 september laat */
/* De uitgerekte ::after op de link in een kaart is overal weggehaald. Hij
maakte de kaart niet klikbaar (dat doet kaartklik() in design/beweging.js)
maar lag wel over de tekst, en dat had twee gevolgen: in geen enkele kaart
was tekst met de muis te selecteren, en slepen over die tekst begon een
linksleep in plaats van een selectie. Bij loslaten was er dan geen selectie,
dus de uitzondering in kaartklik() sloeg niet aan en de kaart navigeerde weg
terwijl de bezoeker alleen tekst wilde meenemen. Gemeten op /, op
/reis/fietsreis-toscane/ en op /reis/fietsweekend-klassiekers/. */
/* Het nieuwsbriefveld in de voettekst kreeg bij focus alleen een schaduw van
1.01 tegen het witte veld en een rand van 1.49 tegen het donkere vlak. WCAG
1.4.11 vraagt 3:1, en elk ander focuspunt op de site haalt dat wel. */
.hc-form--donker input:focus,
.hc-form--donker input:focus-visible,
.hc-form--donker textarea:focus {
outline: none;
/* Goud op Nacht haalt 9.75:1, ruim boven de 3:1 van WCAG 1.4.11. De ring
eromheen moet met een uitroepteken: Elementor zet op dit veld zijn eigen
box-shadow en die wint anders. */
border-color: var(--e-global-color-secondary);
box-shadow: 0 0 0 3px rgba(242, 241, 237, .85) !important;
}
/* ===== aanbod.css ===== */
/* Hungry Cyclist — aanvulling voor /aanbod/: de filterchips boven de reizen.
Wordt door build/site_css.py als Custom CSS in de kit gezet, samen met
design/site.css en de andere aanvullingen. De chips komen uit de widget
`taxonomy-filter` in build/archief.py.
WAAROM CSS: deze widget tekent zijn chips met eigen Elementor-variabelen
(--e-filter-*) en die staan standaard op het plugin-grijs #69727d met een
bijna-zwart #0c0d0e voor de actieve staat. Kleur, vorm en uitlijning zijn
hier dus geen widgetinstelling; ze worden hieronder op de globals uit Site
Settings gezet. Wat de widget wél kan besturen — de typografie — staat in
build/archief.py en verwijst daar naar HC / Knop.
WAAROM DE DUBBELE CLASS: elke .elementor-kit-6 hieronder draagt naast .hc-filter ook
.elementor-widget-taxonomy-filter. De plugin zet zijn eigen waarden met
precies dezelfde specificiteit (.elementor-widget-taxonomy-filter en
.elementor-widget-taxonomy-filter .e-filter-item) en widget-loop-filter.css
wordt ná de Custom CSS van de kit ingeladen. Bij gelijke specificiteit wint
dan het laatste blad, en dat is de plugin. Met de tweede class ligt het
verschil vast in plaats van in de volgorde van de -tags. Dezelfde
ingreep als bij het formulier in paginas.css.
De vorm is de pill-knop uit design/componenten.md §1.2: rust transparant met
een lijn, hover op Zandvlak met een groene lijn. De ingedrukte chip krijgt
het vlak van de primaire knop op licht (Inkt met Gebroken wit en een groene
rand), niet een goud vlak: geel is op deze site een merkteken en nooit een
vlak, en goud op groen haalt met 3.9:1 de contrasteis niet. */
.hc-filter.elementor-widget-taxonomy-filter {
--e-filter-normal-text-color: var(--e-global-color-text);
--e-filter-hover-text-color: var(--e-global-color-primary);
--e-filter-active-text-color: var(--e-global-color-bone);
--e-filter-space-between: 10px;
/* De widget centreert zijn rij standaard. De kop, het raster en de rest van
de pagina staan links, dus de chips ook. */
--e-filter-justify-content: flex-start;
}
.hc-filter.elementor-widget-taxonomy-filter .e-filter-item {
/* De plugin zet de chip op content-box (--e-filter-item-box-sizing:
initial). Met een min-hoogte erbij telt de padding daar bovenop en wordt
een chip van 44 px er een van 70. */
box-sizing: border-box;
padding: 12px 20px;
min-height: 44px; /* aanraakdoel */
border-style: solid;
border-color: var(--e-global-color-lijn-sterk);
border-radius: 999px;
transition: background-color .15s ease, border-color .15s ease,
color .15s ease;
}
.hc-filter.elementor-widget-taxonomy-filter .e-filter-item:hover:not([aria-pressed="true"]) {
background-color: var(--e-global-color-steenvlak);
border-color: var(--e-global-color-primary);
}
.hc-filter.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"] {
background-color: var(--e-global-color-accent);
border-color: var(--e-global-color-primary);
}
/* Levert een reisvorm niets op, dan zet het raster daar een regel neer. Die
staat standaard gecentreerd in het bijna-zwart #1f2124 van de plugin. Op dit
moment heeft elke reisvorm reizen, dus hij is niet te zien; hij hoort alleen
niet te verschijnen in een kleur die niet van de site is. Het is meteen waar
de CSS-id van het raster voor dient. Het wachten tijdens het wisselen regelt
Elementor zelf, met een pulserende dekking op .e-loading-overlay. */
#hc-reizen.elementor-widget-loop-grid {
--e-loop-nothing-found-message-color: var(--e-global-color-steen);
--e-loop-nothing-found-message-align: start;
}
/* ===== blog.css ===== */
/* Hungry Cyclist — aanvulling voor de blogsectie.
Alleen regels die een Elementor-widget zelf niet kan uitdrukken. Kleur,
typografie en verticale ruimte staan in de widget-instellingen, niet hier.
Samen te voegen met design/site.css; zolang dat niet gebeurd is hangt
build/blog.py dit blok achter de custom CSS van de kit, zodat de sectie nu
al klopt. */
/* ---------------------------------------------------------------- blogkaart */
/* De image-widget kent geen beeldverhouding. Zonder deze regel bepaalt de
originele foto de hoogte van de kaart en staan drie kaarten naast elkaar
niet op één lijn: de pici-foto is bijna vierkant, de strade-foto staand.
3:2 is de verhouding waarin een landschapsfoto het minst verliest. */
.hc-blogkaart__beeld img {
transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
/* De samenvatting komt uit de dynamic tag post-excerpt en die levert kale
tekst zonder . De regel .hc-clamp-2 in site.css mikt op die
en grijpt
hier dus niet; deze doet hetzelfde op de widget zelf. */
.hc-blogkaart__lede {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Twee instellingen die deze Elementor-versie wel opslaat maar niet uitvoert:
`height: 100%` op een container komt terug als `--height: auto`, en
`flex_grow` schrijft Elementor over met zijn eigen `--flex-grow: 0` op een
.elementor-kit-6 die specifieker is dan wat wij hier kunnen halen. Zonder deze twee
regels worden drie kaarten naast elkaar niet even hoog en staan hun pijlen
niet op één lijn. `margin-top: auto` doet hetzelfde als flex-grow en botst
nergens mee, want op de voet staat geen marge-instelling. */
/* Eén link per kaart, met de titel als leesbare naam, maar het hele vlak
klikbaar. Een container met een dynamische link rendert op deze installatie
geen (de reiskaart heeft daardoor geen klikbare kaart), dus de link zit
op de kop en wordt hier over de kaart heen gerekt. Elementor zet elk element
op `position: relative`, dus de tussenliggende elementen moeten los, anders
dekt het klikvlak alleen de kop. */
.hc-blogkaart { position: relative; }
.hc-blogkaart__tekst, .hc-blogkaart__titel { position: static; }
.hc-blogkaart__titel a { color: inherit; text-decoration: none; }
.hc-blogkaart__titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* De focusring hoort op de hele kaart, niet op de koptekst alleen. */
.hc-blogkaart__titel a:focus-visible { outline: none; }
.hc-blogkaart:focus-within {
outline: 3px solid var(--e-global-color-primary);
outline-offset: 6px;
}
/* De blogkaart heeft bewust geen doos om zich heen (zie build/BLOG.md), dus
ook geen kaartschaduw bij hover. Wat blijft is de trage inzoom op het beeld
en de pijl die vooruit stapt: dezelfde taal als de reiskaart, ander
materiaal. */
.hc-blogkaart:hover .hc-blogkaart__beeld img { transform: scale(1.04); }
.hc-blogkaart__pijl .elementor-heading-title {
display: inline-block;
transition: transform .15s ease;
}
.hc-blogkaart:hover .hc-blogkaart__pijl .elementor-heading-title {
transform: translateX(4px);
}
/* ---------------------------------------------------------------- bericht */
/* Dezelfde reden als bij de kaart: de drie uitgelichte afbeeldingen hebben
drie verschillende verhoudingen en de hero mag niet per artikel een andere
hoogte krijgen. 4:5 staand, want het beeld staat naast een tekstkolom die
eronder uitlijnt. */
.hc-bericht__beeld img {
aspect-ratio: 4 / 5;
object-fit: cover;
width: 100%;
display: block;
border-radius: 0; /* hoekig: alleen de passe-partout rondt af */
}
/* Twee beelden in de artikelen bestaan alleen nog als miniatuur op de oude
site (191x255 en 300x225 px). Opgerekt naar leesbreedte worden dat blokken
pixels, dus ze blijven klein. De image-widget kan alleen een percentage,
geen maximum in px. */
/* ===== faq-reviews.css ===== */
/* Hungry Cyclist — aanvullingen voor /faq/ en /klantenreviews/.
Deze regels staan hier en niet in design/site.css omdat site.css gedeeld is
met parallel werk. Ze worden door build/faq_reviews.py in de paginainstelling
`custom_css` van juist die twee pagina's gezet, dus ze laden nergens anders.
Alles wat hier kleur of typografie aanraakt doet dat via een globale
variabele uit Site Settings (--e-global-color-*, --e-global-typography-*),
nooit via een losse waarde. Een merkwijziging werkt dus gewoon door.
Bij elk blok staat waarom het niet met widget-instellingen kon. */
/* ===================================================== hele zinnen */
/* WAAROM CSS: de globale tekststijlen h4, primary en citaat staan in Site
Settings op text-transform: uppercase. Dat werkt voor een label van een
woord (ALGEMEEN, FRANK V.) maar niet voor een vraag van twaalf woorden of
een citaat van twee regels; die worden dan onleesbaar en schreeuwerig.
Alleen de transform gaat hier terug naar none. Letter, gewicht, grootte en
kleur blijven van de globals, dus een wijziging in Site Settings werkt
gewoon door. Staat de globale stijl niet op uppercase, dan doet deze regel
niets. Een eigen tekststijl aanmaken kan niet: de kit is gedeeld met
parallel werk en design/tokens.json mag niet aangeraakt worden. */
/* De .elementor-kit-6s zijn expres lang. Elementor schrijft de globale tekststijl per
element weg als `.elementor- .elementor-element.elementor-element-`,
drie klassen diep, en bij een loop-item staat die regel in een