/* ================================================================
Smakelijk Achterhoek — huisstijl stylesheet voor Gebiedonline
Gebaseerd op de echte broncode (cx_/go_ classes, Bootstrap 5)
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&display=swap');
/* --- 1. Basis: lettertype + pagina-achtergrond -------------------
Baloo 2 op alle koppen, crème als vaste paginakleur. ------------- */
body.go_page,
.cx_btn-label,
h1, h2, h3, h4, h5, h6,
.go_row-title,
.go_card-title-wrapper,
.navbar-brand {
font-family: 'Baloo 2', sans-serif !important;
}
body.go_page {
background-color: #FAF6EC !important;
color: #283129;
}
/* Fotoslider-rijen (grote carrousel-rijen) hebben geen instelbaar
achtergrondveld en vallen terug op een vaste witte kleur — dat trekken
we gelijk met de ingestelde thema-achtergrondkleur (crème) */
.go_row.go_section-slider {
background-color: #FAF6EC !important;
}
.go_row-title {
font-weight: 800 !important;
color: #283129;
letter-spacing: -0.01em;
}
/* --- 2. Topmenu (logo + Over ons / Contact / Iets plaatsen / etc.)
Achtergrond crème, logo groter, zoekbalk als ronde kaart. -------- */
.go_menu-top-bar {
background-color: #FAF6EC !important;
border-bottom: 1px solid #E8DFC9;
padding-top: 28px;
padding-bottom: 28px;
}
.go_navbar-brand img,
.go_logo img {
max-height: 108px !important;
height: auto !important;
width: auto !important;
}
/* Zoek/filter-balk (bv. op Agenda, Adressen): ronde hoeken, kaart-stijl */
.go_search-wrapper {
background-color: #EDF3DA !important;
border-radius: 22px !important;
overflow: hidden;
border: 1px solid #DCE7C8;
}
.go_top-menu .go_topmenu-button {
color: #283129 !important;
font-weight: 600;
font-size: 14px; /* tekstgrootte van de items */
padding: 8px 4px; /* ruimte rond elk item */
}
.go_top-menu {
gap: 4px;
}
.go_top-menu .go_topmenu-button i {
color: #154D26 !important;
font-size: 16px; /* icoongrootte */
}
.go_top-menu .go_topmenu-button:hover {
color: #154D26 !important;
}
/* --- 3. Hoofdmenu --------------------------------------------------
Menutekst in huisstijlkleuren; huidige pagina als groene pil;
"Word lid" als losse gele knop rechts naast het zoekicoon. -------- */
.go_main-menu-bar,
.go_main-menu-bar .go_main-menu-wrapper,
nav.go_hoofdmenu,
nav.go_hoofdmenu .cx_menu-container {
background-color: #FAF6EC !important;
background-image: none !important;
}
.go_main-menu-bar {
border-bottom: 1px solid #E8DFC9;
}
.go_hoofdmenu .nav-link,
.go_hoofdmenu .cx_btn-label {
font-weight: 700 !important;
font-size: 16px;
color: #283129 !important;
}
.go_hoofdmenu .nav-link:hover {
color: #154D26 !important;
}
.go_hoofdmenu .nav-link.active:not(.dropdown-toggle),
.go_hoofdmenu .nav-item.active > .nav-link:not(.dropdown-toggle),
nav.go_hoofdmenu .nav-link.active:not(.dropdown-toggle),
html body .go_hoofdmenu.go_hoofdmenu a.nav-link.active.active:not(.dropdown-toggle) {
color: #ffffff !important;
background-color: #154D26 !important;
border-radius: 999px;
}
html body .go_hoofdmenu.go_hoofdmenu a.nav-link.active.active:not(.dropdown-toggle) span {
color: #ffffff !important;
}
/* Open dropdownmenu (.show): lichter/omlijnd, zodat het niet identiek oogt
aan de "huidige pagina"-pil hierboven en er geen twee volle groene
pillen tegelijk lijken te branden */
.go_hoofdmenu .dropdown-toggle.show,
.go_hoofdmenu .nav-item.show .nav-link,
nav.go_hoofdmenu .dropdown-toggle.show,
html body .go_hoofdmenu.go_hoofdmenu a.dropdown-toggle.show.show {
color: #154D26 !important;
background-color: transparent !important;
border: 1.5px solid #154D26;
border-radius: 999px;
}
html body .go_hoofdmenu.go_hoofdmenu a.dropdown-toggle.show.show span {
color: #154D26 !important;
}
/* Dropdown-knop die "actief" is omdat er een kind-pagina open staat: alleen
de tekst accentueren, geen vaste groene pil (die knop is geen link zelf) */
.go_hoofdmenu .dropdown-toggle.active:not(.show) {
color: #154D26 !important;
background-color: transparent !important;
}
/* Eigen, merk-kleurige focusring in plaats van de standaard blauwe browser-
focusring (toegankelijkheid blijft behouden, alleen de kleur/stijl wijzigt) */
.go_hoofdmenu .nav-link:focus-visible,
.go_hoofdmenu .dropdown-toggle:focus-visible {
outline: 2px solid #154D26 !important;
outline-offset: 2px;
}
/* Op hover moet de tekst wit blijven zolang de "huidige pagina"-pil groen
is — anders wordt de tekst onleesbaar (groen op groen) */
.go_hoofdmenu .nav-link.active:not(.dropdown-toggle):hover,
.go_hoofdmenu .nav-item.active > .nav-link:not(.dropdown-toggle):hover,
nav.go_hoofdmenu .nav-link.active:not(.dropdown-toggle):hover {
color: #ffffff !important;
}
/* Open dropdownmenu blijft op hover ook de omlijnde stijl (niet wit) */
.go_hoofdmenu .dropdown-toggle.show:hover,
.go_hoofdmenu .nav-item.show .nav-link:hover,
nav.go_hoofdmenu .dropdown-toggle.show:hover {
color: #154D26 !important;
}
.go_hoofdmenu .dropdown-menu {
border-radius: 18px;
border: 1px solid #E8DFC9;
}
/* Huidige pagina binnen het geopende "Meer"-dropdownmenu: donkergroene
rij met witte tekst (was onleesbaar: donkergroen op donkergroen) */
.go_hoofdmenu .dropdown-item.active,
.go_hoofdmenu .dropdown-item.active:hover,
.go_hoofdmenu .dropdown-item.active:focus {
background-color: #154D26 !important;
color: #ffffff !important;
}
.go_hoofdmenu .dropdown-item:hover {
background-color: #EDF3DA;
color: #154D26;
}
/* "Word lid"-knop in het hoofdmenu (geel), zodra dit als los menu-item
op het hoofdniveau staat (bv. link naar /wordlid) */
.go_hoofdmenu .navbar-nav > .nav-item > a.nav-link[href="/wordlid"] {
background-color: #EBC26B !important;
color: #283129 !important;
border-radius: 999px !important;
font-weight: 800 !important;
padding: 8px 18px !important;
}
.go_hoofdmenu .navbar-nav > .nav-item > a.nav-link[href="/wordlid"]:hover {
background-color: #E2A93E !important;
}
/* Dit menu-item altijd helemaal rechts tonen (vlak voor het vergrootglas),
ongeacht de volgorde in de menu-instellingen zelf */
.go_hoofdmenu .navbar-nav > .nav-item > a.nav-link[href="/wordlid"] {
position: absolute !important;
right: 60px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
}
.go_hoofdmenu .cx_menu-container {
position: relative !important;
}
/* Bootstrap's "me-auto" op de menulijst zelf duwt het zoekicoon helemaal
naar de rand — dat overschrijven we zodat ze dicht bij elkaar komen */
nav.go_hoofdmenu ul.navbar-nav.me-auto {
margin-right: 0 !important;
margin-inline-end: 0 !important;
}
.go_hoofdmenu .collapse.navbar-collapse {
justify-content: flex-start !important;
}
/* --- 4. Knoppen (algemeen: word lid, versturen, bewerken, etc.) --
Alle knoppen naar ronde pil-vorm in huisstijlkleuren; kleine
beheerknoppen (potlood) bewust uitgezonderd. --------------------- */
.btn.btn-primary,
.go_button {
font-family: 'Baloo 2', sans-serif !important;
font-weight: 800 !important;
background-color: #154D26 !important;
border-color: #154D26 !important;
border-radius: 999px !important;
padding: 10px 22px !important;
}
.btn.btn-primary:hover,
.go_button:hover {
background-color: #0F3A1D !important;
border-color: #0F3A1D !important;
}
/* Zoekschermen (classmanager/beheer): knoppen als "Zoeken", "Wissen",
"Bewaar zoekvraag", "Nieuwe ... invoeren" gebruiken alleen .btn
zonder .go_button — hier ook afronden en in de huisstijl zetten */
.btn.btn-default,
.btn.btn-secondary:not(.go_button):not(.go_button-secondary) {
font-family: 'Baloo 2', sans-serif !important;
font-weight: 700 !important;
border-radius: 999px !important;
padding: 10px 22px !important;
background-color: #C3D797 !important;
border-color: #C3D797 !important;
color: #154D26 !important;
}
.btn.btn-default:hover,
.btn.btn-secondary:not(.go_button):not(.go_button-secondary):hover {
background-color: #B3CB7F !important;
border-color: #B3CB7F !important;
}
/* Uitzondering: kleine beheer-knoppen (potlood/bewerken) — niet
meenemen in de pil-stijl, anders wordt de bewerk-UI onleesbaar. */
.go_webpage-controls .btn,
a[href*="cmd=open"].btn {
border-radius: 4px !important;
padding: 4px 10px !important;
}
/* "Uitgebreid zoeken" (btn-secondary, niet btn-primary!): witte tekst */
.btn.btn-secondary.go_button {
background-color: #154D26 !important;
border-color: #154D26 !important;
color: #ffffff !important;
}
.btn.btn-secondary.go_button:hover {
background-color: #0F3A1D !important;
border-color: #0F3A1D !important;
}
/* Bewerken / Kopiëren / Verwijderen (go_button-secondary, andere class!) */
.btn.btn-secondary.go_button-secondary {
background-color: #EDF3DA !important;
border-color: #EDF3DA !important;
color: #154D26 !important;
border-radius: 999px !important;
font-weight: 700 !important;
}
.btn.btn-secondary.go_button-secondary:hover {
background-color: #DCE7C8 !important;
border-color: #DCE7C8 !important;
}
/* --- 5. Homepage-blokken (WORD LID / DOE MEE / NIEUWSBRIEF) ------
Ronde hoeken + hover; plus twee zelf toe te kennen CSS-classes
(sa-qr-blok, sa-link-blok) voor klikbare kaartblokken. ----------- */
.go_block.cx_card .go_card.go_block-content {
/* achtergrondkleur bewust NIET forceren: die stel je zelf per blok in */
border-radius: 28px !important;
transition: transform .15s ease;
}
.go_block.cx_card .go_card.go_block-content:hover {
transform: translateY(-2px);
}
.go_block-text p strong {
font-family: 'Baloo 2', sans-serif;
font-weight: 800;
letter-spacing: 0.02em;
}
/* QR-code / lidmaatschap-blok (CSS Class: sa-qr-blok)
Blok heeft een target-url, is dus zelf klikbaar: geef het ook de
uitstraling van een klikbare kaart (hover-lift + pointer) --------- */
.sa-qr-blok .go_block-content,
.go_block-content.sa-qr-blok,
.sa-qr-blok.go_block-content,
a.sa-qr-blok,
.sa-qr-blok {
padding: 32px 32px 36px !important;
cursor: pointer;
text-align: center !important;
transition: transform .15s ease, box-shadow .15s ease;
}
.sa-qr-blok .go_block-content:hover,
.go_block-content.sa-qr-blok:hover,
.sa-qr-blok.go_block-content:hover,
a.sa-qr-blok:hover,
.sa-qr-blok:hover {
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(21,77,38,.12);
}
.sa-qr-blok img {
background: #ffffff !important;
border-radius: 20px !important;
padding: 20px !important;
box-shadow: 0 4px 14px rgba(21,77,38,.10) !important;
display: inline-block !important;
}
/* tekst onder de QR ook centreren, zodat het geheel als één
gecentreerde kaart oogt */
.sa-qr-blok .go_block-text,
.sa-qr-blok p {
text-align: center !important;
}
/* Blokken zonder QR maar wél met een target-url (CSS Class:
sa-link-blok) — zelfde klikbare kaart-uitstraling, zonder de
beeld-specifieke styling van sa-qr-blok --------------------------- */
.sa-link-blok .go_block-content,
.go_block-content.sa-link-blok,
.sa-link-blok.go_block-content,
a.sa-link-blok,
.sa-link-blok {
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.sa-link-blok .go_block-content:hover,
.go_block-content.sa-link-blok:hover,
.sa-link-blok.go_block-content:hover,
a.sa-link-blok:hover,
.sa-link-blok:hover {
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(21,77,38,.12);
}
/* Vangnet: overige blokken/kaarten (bv. Word lid / Doneer-pagina) die
geen .cx_card of andere specifieke klasse hebben en daardoor de gele
Gebiedonline-standaardkleur + scherpe hoeken behielden i.p.v. de
huisstijl-kaartstijl ---------------------------------------------- */
.card.go_card,
.go_block .go_card,
.go_block-content {
/* achtergrondkleur bewust NIET forceren: die vul je zelf per blok in
via het CMS — hier alleen vormgeving (hoeken/rand) */
border-radius: 22px !important;
border-color: #EFE7D4 !important;
}
/* QR-code afbeeldingen: eigen witte kaart binnen het getinte blok,
zodat de code goed scanbaar blijft (contrast). NIET op sa-link-blok
(custom-vormgegeven afbeeldingen, bv. met afgeknipt hoekje). */
.go_block:not(.sa-link-blok) img,
.go_card:not(.sa-link-blok) img {
border-radius: 14px !important;
}
.sa-link-blok img {
border-radius: 0 !important;
}
.go_block.sa-link-blok,
.go_block.sa-link-blok .go_card,
.go_block.sa-link-blok .go_block-content {
border-radius: 0 !important;
overflow: visible !important;
}
/* Titels binnen deze blokken (bv. "Word lid", "Doneer") volgen dezelfde
Baloo 2 kop-stijl als de rest van de site */
.go_block-title,
.go_block h1, .go_block h2, .go_block h3,
.go_card-title, .go_card .card-title {
font-family: 'Baloo 2', sans-serif !important;
font-weight: 800 !important;
color: #283129 !important;
}
/* Tekst-alinea's in kaarten (bv. bestuur/personen): een Enter in de
tekst maakt een nieuwe met browser-standaard marge, wat als een
hele lege regel oogt — verkleinen tot een normale regelafstand. */
.go_block-text p,
.go_card p,
.go_block p,
.card-body p {
margin: 0 0 2px !important;
}
.go_block-text p:last-child,
.go_card p:last-child,
.go_block p:last-child,
.card-body p:last-child {
margin-bottom: 0 !important;
}
/* --- 6. Nieuws-/aanbodkaarten ("Het laatste nieuws") -------------
Gelijke kaarthoogte + tekst-afkap, alleen op de homepage-rij. ---- */
.go_card.go_card-with-border {
border-radius: 22px !important;
border-color: #EFE7D4 !important;
background-color: #EDF3DA !important;
}
/* Nieuwskaarten ("Het laatste nieuws"): vaste totaalhoogte zodat alle
kaarten in de rij gelijk zijn, ongeacht het type bericht (aanbod/
activiteit/bericht hebben van nature andere inhoud/lengte). We laten
de eigen overlap-opmaak (negative margin-top op de content-wrapper)
intact en knippen overtollige tekst af i.p.v. de hoogte te forceren
via flex, wat botst met die overlap. Deze regels zijn specifiek voor
de HOMEPAGE (image-top layout, rij #go_row-10030) — zonder deze scope
raken ze ook de kaarten op andere pagina's, zoals de Actueel-lijst
(/berichten), die een ander (image-left) layout gebruiken. */
#go_row-10030 a.go_card.go_card-with-source {
height: 430px !important;
overflow: hidden !important;
display: block !important;
}
#go_row-10030 a.go_card.go_card-with-source .cx_template-image-wrapper {
height: 190px !important;
overflow: hidden !important;
}
#go_row-10030 a.go_card.go_card-with-source .cx_template-image-wrapper img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* titel en introtekst afkappen op een vast aantal regels, zodat
kortere/langere berichten niet meer voor uitschietende kaarten
zorgen */
#go_row-10030 a.go_card.go_card-with-source .go_card-title-wrapper {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
#go_row-10030 a.go_card.go_card-with-source .go_card-text-intro {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Gebiedonline zet per berichttype (aanbod/activiteit/bericht) een
andere margin-top op de content-wrapper (die over de foto overlapt),
waardoor de categorielabel niet bij elk type op dezelfde hoogte
begint (bijv. "BERICHT"-kaarten zakken lager uit dan "AANBOD"/
"ACTIVITEIT"). In plaats van hun margin-top-trucs te blijven volgen,
wordt de content-wrapper hier absoluut gepositioneerd op een vaste
afstand vanaf de bovenkant van de kaart (net onder de 190px-foto) —
dat werkt voor ieder type identiek, ongeacht wat Gebiedonline zelf
per type instelt. */
#go_row-10030 a.go_card.go_card-with-source {
position: relative !important;
}
#go_row-10030 a.go_card.go_card-with-source .cx_template.cx_template-image-top {
position: static !important;
}
/* Berichtkaarten (go_card-message) tonen een extra "auteur"-blok
(foto + naam) vóór het categorielabel dat andere kaarttypen niet
hebben — daardoor zakte "BERICHT" lager uit dan "AANBOD"/
"ACTIVITEIT". Dat blok verbergen zodat alle typen dezelfde
opbouw hebben. */
#go_row-10030 a.go_card.go_card-with-source .go_source-wrapper.meta-wrapper {
display: none !important;
}
/* Ondanks bovenstaande fixes verschilt de positie van het categorielabel
zelf nog steeds per type (activiteit/bericht 15px lager dan
aanbod/service) — Gebiedonline's eigen basisstijl zet kennelijk een
afwijkende margin-top op .category-wrapper per kaarttype. Hier op
één vaste waarde forceren voor alle typen. */
#go_row-10030 a.go_card.go_card-with-source .category-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
#go_row-10030 a.go_card.go_card-with-source .cx_template-image-top .cx_template-content-wrapper,
#go_row-10030 a.go_card.go_card-with-source.go_card-activity .cx_template-image-top .cx_template-content-wrapper,
#go_row-10030 a.go_card.go_card-with-source.go_card-service .cx_template-image-top .cx_template-content-wrapper,
#go_row-10030 a.go_card.go_card-with-source.go_card-message .cx_template-image-top .cx_template-content-wrapper {
position: absolute !important;
top: 190px !important;
left: 0 !important;
right: 0 !important;
margin-top: 0 !important;
}
.go_card .category-wrapper {
color: #E2A93E;
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.go_card .go_card-title-wrapper {
font-weight: 700 !important;
color: #283129;
}
.go_card .go_source-name-wrapper {
font-weight: 600;
color: #6E7567;
font-size: 13px;
}
.go_card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
/* Link "Bekijk al het nieuws" */
.go_link {
color: #154D26 !important;
font-weight: 700;
}
.go_link:hover {
color: #C2603A !important;
}
/* --- 7. Productgroepen-tegels ("Wat zoek je vandaag?") -----------
Ronde hoeken + hover-lift op de tegels. -------------------------- */
.go_row.Verkooppunten .go_block.cx_card .go_card {
border-radius: 20px !important;
transition: transform .15s ease;
}
.go_row.Verkooppunten .go_block.cx_card .go_card:hover {
transform: translateY(-2px);
}
/* --- 8. Kaart (Leaflet) — kleine correcties ----------------------
Ronde hoeken op kaart-embed en popups. --------------------------- */
.leaflet-popup-content-wrapper {
border-radius: 18px !important;
font-family: 'Baloo 2', sans-serif;
}
.go_map-commissaris {
box-shadow: 0 3px 10px rgba(0,0,0,.25) !important;
}
/* Kaart-embed op de homepage: afgeronde hoeken */
#cxMap,
.leaflet-container {
border-radius: 20px !important;
overflow: hidden;
}
/* --- 9. Links algemeen --------------------------------------------
Standaard linkkleur + hoverkleur in de huisstijl. ---------------- */
.go_container a:not(.btn):not(.go_button):not(.card) {
color: #154D26;
}
.go_container a:not(.btn):not(.go_button):not(.card):hover {
color: #C2603A;
}
/* --- 10. Footer ----------------------------------------------------
Kleuren, regelafstand, nieuwsbrief-uitlijning, logo/tekst linksboven
en social-iconen (via ::before, herkend op de link-URL). --------- */
footer,
.go_footer,
.go_footer-web {
background-color: #103E20 !important;
color: #CFE3BE !important;
}
footer a,
.go_footer a,
.go_footer-web a {
color: #CFE3BE !important;
}
footer a:hover,
.go_footer a:hover,
.go_footer-web a:hover {
color: #ACCD63 !important;
}
/* Regels in de footer-kolommen (Terug naar homepage / Volg ons.../
Over Slow Food...) staan te ver uit elkaar — compacter maken */
footer li,
.go_footer li,
.go_footer-web li,
footer ul,
.go_footer ul,
.go_footer-web ul {
margin-bottom: 0 !important;
line-height: 1.3 !important;
}
footer p,
.go_footer p,
.go_footer-web p,
footer .nav-item,
.go_footer .nav-item,
.go_footer-web .nav-item {
margin-bottom: 4px !important;
line-height: 1.3 !important;
}
/* "Blijf op de hoogte!" kop (in go_footer-default-wrapper) heeft nu te
weinig contrast — naar crème, ongeacht of het een h2/h3/h4/div is */
.go_footer-web h1,
.go_footer-web h2,
.go_footer-web h3,
.go_footer-web h4,
.go_footer-default-wrapper h1,
.go_footer-default-wrapper h2,
.go_footer-default-wrapper h3,
.go_footer-default-wrapper h4 {
color: #FAF6EC !important;
}
/* Inschrijf-knop: gele/oker pil met donkere tekst, ongeacht of het
element een button, input of link is */
.go_footer-web button,
.go_footer-web input[type="submit"],
.go_footer-web .btn,
.go_footer-default-wrapper button,
.go_footer-default-wrapper input[type="submit"],
.go_footer-default-wrapper .btn {
background-color: #E2A93E !important;
border-color: #E2A93E !important;
color: #103E20 !important;
font-weight: 700 !important;
font-size: 15px !important;
padding: 10px 20px !important;
}
.go_footer-web input[type="email"],
.go_footer-web input[type="text"],
.go_footer-default-wrapper input[type="email"],
.go_footer-default-wrapper input[type="text"] {
border-radius: 999px !important;
}
/* Nieuwsbrief-blok: kop/tekst/formulier op één regel, in plaats van
onder elkaar — op basis van de echte classnamen. Harde reset omdat
Bootstrap .row/.col/toolbar-wrappers standaard marges/padding zetten
die de uitlijning verstoorden. */
.go_footer-newsletter-subscription-wrapper .row {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 16px !important;
}
.go_footer-newsletter-subscription-wrapper .col {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 16px !important;
width: auto !important;
}
.go_footer-newsletter-subscription-wrapper p {
white-space: nowrap !important;
flex: 0 0 auto !important;
font-size: 13px !important;
margin: 0 !important;
color: #CFE3BE !important;
}
.go_footer-newsletter-subscription-wrapper form {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
.go_footer-newsletter-subscription-wrapper .row,
.go_footer-newsletter-subscription-wrapper [class*="col"],
.go_footer-newsletter-subscription-wrapper .cx_fieldlines,
.go_footer-newsletter-subscription-wrapper .cx_fieldline,
.go_footer-newsletter-subscription-wrapper .cx_fieldline-content,
.go_footer-newsletter-subscription-wrapper .cx_widget,
.go_footer-newsletter-subscription-wrapper .btn-toolbar,
.go_footer-newsletter-subscription-wrapper .cx_paragraph-wrapper {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
display: flex !important;
align-items: center !important;
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
}
/* De knop-toolbar (#cxs_1193) heeft Bootstrap d-table + w-100 die
'm laten uitrekken/anders gedragen dan het e-mailveld — expliciet
defeaten zodat beide even hoog en verticaal gelijk uitlijnen */
.go_footer-newsletter-subscription-wrapper .cx_btn-toolbar.d-table {
display: flex !important;
align-items: center !important;
width: auto !important;
table-layout: auto !important;
}
/* cx_form-group-lg reserveert normaliter ruimte voor een label boven
het veld — hier is geen label, dus die ruimte duwt het veld
onnodig naar beneden t.o.v. de knop */
.go_footer-newsletter-subscription-wrapper .cx_form-group-lg {
padding-top: 0 !important;
margin-top: 0 !important;
}
.go_footer-newsletter-subscription-wrapper .cx_fieldline-content,
.go_footer-newsletter-subscription-wrapper .cx_widget-E_mail {
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
}
.go_footer-newsletter-subscription-wrapper .cx_grid-row,
.go_footer-newsletter-subscription-wrapper .cx_btn-toolbar {
margin: 0 !important;
width: auto !important;
display: flex !important;
align-items: center !important;
height: 48px !important;
}
.go_footer-newsletter-subscription-wrapper .cx_grid-col {
padding: 0 !important;
}
.go_footer-newsletter-subscription-wrapper .cx_form-group-lg label,
.go_footer-newsletter-subscription-wrapper label[for="E_mail"] {
display: none !important;
}
/* Kop "Blijf op de hoogte!" (h3) onderdrukken — de tekst ernaast
("Schrijf je hier in...") volstaat op deze regel */
.go_footer-newsletter-subscription-wrapper h3 {
display: none !important;
}
.go_footer-newsletter-subscription-wrapper input#E_mail {
border-radius: 999px !important;
padding: 0 16px !important;
width: 220px !important;
height: 48px !important;
box-sizing: border-box !important;
border: none !important;
vertical-align: middle !important;
line-height: 48px !important;
margin-top: 0 !important;
align-self: center !important;
}
.go_footer-newsletter-subscription-wrapper .btn.btn-primary.cx_btn {
background-color: #E2A93E !important;
border-color: #E2A93E !important;
color: #103E20 !important;
border-radius: 999px !important;
font-weight: 700 !important;
white-space: nowrap;
height: 48px !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
padding: 0 22px !important;
margin: 0 !important;
}
/* Onderste regel (Privacy / Beveiligingsprobleem / Gebiedonline) iets
kleiner */
.go_footer-default-wrapper a {
font-size: 12px !important;
}
/* Logo + korte tekst bovenaan het footer-menu (echte, al gehoste
SA-woordmerk-afbeelding — de transparante witte SF Achterhoek-slak
staat niet op de Gebiedonline-mediaserver, dus die kan niet via
CSS content:url() worden ingeladen zonder eerst als webafbeelding
te zijn geüpload) */
.go_footer-menuwrapper {
display: flex !important;
flex-direction: column !important;
padding-top: 0 !important;
}
.go_footer-menuwrapper .go_container.d-table {
display: flex !important;
justify-content: space-between !important;
width: 100% !important;
padding-left: 79px !important;
box-sizing: border-box !important;
}
.go_footer-menuwrapper::before {
content: "" !important;
display: block !important;
order: -2 !important;
width: 220px !important;
height: 64px !important;
background-image: url('https://smakelijkachterhoek.nl/engine/download/blob/gebiedsplatform/99678/2026/29/Community_Achterhoek_600_Wit_Trans_1.png?app=gebiedsplatform&class=11534&id=185&field=99678');
background-repeat: no-repeat !important;
background-position: left center !important;
background-size: contain !important;
margin: 0 0 8px 79px !important;
}
.go_footer-menuwrapper::after {
content: "De voedselcommunity voor de Achterhoek, Twente & Liemers. Een initiatief van Slow Food Achterhoek." !important;
display: block !important;
order: -1 !important;
font-size: 15px !important;
line-height: 1.5 !important;
color: #CFE3BE !important;
max-width: 460px !important;
margin: 0 0 24px 79px !important;
}
@media (max-width: 767px) {
.go_footer-menuwrapper .go_container.d-table {
padding-left: 24px !important;
}
.go_footer-menuwrapper::before,
.go_footer-menuwrapper::after {
margin-left: 24px !important;
}
}
/* Social-media icoontjes vóór de tekstlinks (Font Awesome is al geladen
op de site) — geen los icoon-element in de HTML, dus via ::before op
de links zelf. Tekst wordt onderdrukt en de li's naast elkaar gezet.
Kolom-onafhankelijk: werkt in welke kolom van het footer-menu de
social-links ook staan. */
.go_footer-menuwrapper .go_container ul:nth-of-type(3) li {
display: inline-flex !important;
margin: 0 8px 0 0 !important;
}
.go_footer-menuwrapper a[href*="instagram.com"],
.go_footer-menuwrapper a[href*="facebook.com"],
.go_footer-menuwrapper a[href*="youtube.com"],
.go_footer-menuwrapper a[href*="linkedin.com"] {
font-size: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 34px !important;
border-radius: 50% !important;
background: #1F5630 !important;
}
.go_footer-menuwrapper a[href*="instagram.com"]::before,
.go_footer-menuwrapper a[href*="facebook.com"]::before,
.go_footer-menuwrapper a[href*="youtube.com"]::before,
.go_footer-menuwrapper a[href*="linkedin.com"]::before {
font-weight: 900;
font-size: 15px !important;
margin-right: 0 !important;
color: #CFE3BE;
}
.go_footer-menuwrapper a[href*="instagram.com"]::before,
.go_footer-menuwrapper a[href*="facebook.com"]::before,
.go_footer-menuwrapper a[href*="youtube.com"]::before {
font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", FontAwesome !important;
}
.go_footer-menuwrapper a[href*="linkedin.com"]::before {
font-family: "Font Awesome 6 Brands", FontAwesome !important;
}
.go_footer-menuwrapper a[href*="instagram.com"]::before {
content: "\f16d";
}
.go_footer-menuwrapper a[href*="facebook.com"]::before {
content: "\f39e";
}
.go_footer-menuwrapper a[href*="youtube.com"]::before {
content: "\f167";
}
.go_footer-menuwrapper a[href*="linkedin.com"]::before {
content: "\f0e1";
}
/* --- 11. Aanbod/zoekpagina (/aanbod) ------------------------------
Kaartstijl voor adreskaarten en de detailpagina. ----------------- */
/* Adreskaarten op het /aanbod-overzicht (rasterweergave) */
a.card.go_card.go_card-no-border {
background-color: #EDF3DA !important;
border-radius: 22px !important;
overflow: hidden;
}
a.card.go_card.go_card-no-border .card-body {
background-color: #EDF3DA !important;
}
/* Detailpagina van een adres (/aanbod/{id}/...): hoofdkaart + reacties */
.go_wall-wrapper .card.go_card.go_wall-card {
background-color: #EDF3DA !important;
border-radius: 22px !important;
overflow: hidden;
}
/* De donkergroene contactstrook onderin de kaart: ronde hoeken onderaan */
.go_contact-wrapper {
border-radius: 0 0 22px 22px !important;
overflow: hidden;
}
#comments.card.go_card.go_comments-wrapper {
background-color: #EDF3DA !important;
border-radius: 22px !important;
}
/* Contactregel op de detailpagina (e-mail/website/telefoon): niet afbreken */
.go_contact-wrapper .go_card-meta-line {
white-space: nowrap;
}
/* --- 11b. Organisatie-tegels: gelijke hoogte per rij in de ledenlijst.
Organisatie-tegels (ledenlijst): gelijke hoogte per rij,
ongeacht of een organisatie SDG-iconen/foto's toont. LET OP: alleen
in de ledenlijst-grid (kaarten in een cx_grid-row-equalHeight of
direct in de contentkolom) — NIET op de projectdetailpagina, waar
dezelfde .go_card-organization class hergebruikt wordt in een
image-left lijst-item (.go_wall-relations-wrapper). Vandaar de
:not()-uitsluiting. --------------------------------------------- */
.cx_grid-col a.go_card.go_card-organization,
a.go_card.go_card-organization,
a.card.go_card.go_card-organization {
height: 220px !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* Uitzondering: op de projectdetailpagina (zijbalk) is dit dezelfde
class maar in een image-left lijst-item — daar overschrijft sectie
12 (.go_wall-relations-wrapper) deze afmetingen weer, met een
selector die zwaarder weegt zodat 'ie wint van de regel hierboven. */
/* SDG-iconenrij (varieert sterk in aantal/hoogte per organisatie) —
verkleinen en op minder rijen tonen i.p.v. verbergen. Dit zijn losse
![]()
-tags zonder eigen class, dus op de src herkennen. Let op: de
organisatie-tegel gebruikt go_card-organization (niet
go_card-with-source), dus breed targeten. */
a.go_card img[src*="SDG-icon"],
a.card img[src*="SDG-icon"] {
width: 32px !important;
height: 32px !important;
margin: 0 4px 4px 0 !important;
display: inline-block !important;
}
/* --- 12. Projectdetailpagina (zijbalk): compacte lijst-widgets zodat
de pagina korter wordt.
Projectdetailpagina (zijbalk): compactere widgets zodat de
pagina minder lang wordt. Contactpersonen/Betrokken organisaties/
Betrokken locaties/Activiteiten/Berichten delen dezelfde
.cx_template-image-left opzet met een relatief grote foto/logo
(262-388px breed) t.o.v. de korte titel — dat maakt elke regel
onnodig hoog. Hier verkleinen tot een compacte thumbnail. -------- */
.go_wall-relations-wrapper .cx_template-image-wrapper {
width: 56px !important;
height: 56px !important;
flex: 0 0 56px !important;
border-radius: 10px !important;
overflow: hidden !important;
}
.go_wall-relations-wrapper .cx_template-image-wrapper img,
.go_wall-relations-wrapper .cx_template-image-wrapper picture {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.go_wall-relations-wrapper .cx_template.cx_template-image-left {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
/* Herstelt de afmetingen/layout die sectie 11b breed zette op
a.go_card.go_card-organization — hier moet het weer een compacte,
horizontale lijstregel zijn i.p.v. een 220px-hoge tegel. */
.go_wall-relations-wrapper .cx_grid-col a.go_card.go_card-organization,
.go_wall-relations-wrapper a.card.go_card.go_card-organization {
height: auto !important;
width: auto !important;
display: flex !important;
flex-direction: row !important;
overflow: visible !important;
}
.go_wall-relations-wrapper .card-body {
padding: 10px 14px !important;
}
.go_wall-relations-wrapper .go_card-title-wrapper {
font-size: 15px !important;
margin: 0 !important;
line-height: 1.3 !important;
}
.go_wall-relations-wrapper .go_card-line1,
.go_wall-relations-wrapper .go_card-meta-wrapper {
font-size: 12px !important;
margin: 2px 0 0 !important;
}
/* SDG-iconen (bij organisaties) blijven zichtbaar maar compact, niet
de hele rijhoogte laten opblazen */
.go_wall-relations-wrapper .cx_template-content-wrapper img[src*="SDG-icon"] {
width: 22px !important;
height: 22px !important;
margin: 4px 3px 0 0 !important;
}
/* --- 13. Mobiele weergave: headerknop niet meer over de foto heen.
Headerknop ("maak je eigen profiel aan" e.d.) op smalle
schermen: staat standaard los over de achtergrondfoto midden in
beeld (float-end + geen eigen positionering in de mobiele grid) —
op mobiel netjes ONDER de afbeelding plaatsen i.p.v. erover ------ */
@media (max-width: 767px) {
.go_content-header-grid.go_content-header-hasBackground.go_content-header-hasButtons {
display: flex !important;
flex-direction: column !important;
}
.go_content-header-grid.go_content-header-hasBackground.go_content-header-hasButtons .go_content-header-background {
order: 1 !important;
position: relative !important;
}
.go_content-header-grid.go_content-header-hasBackground.go_content-header-hasButtons .go_content-header {
order: 2 !important;
position: relative !important;
padding: 16px !important;
}
.go_content-header-grid.go_content-header-hasBackground.go_content-header-hasButtons .go_content-header-buttons {
float: none !important;
}
.go_content-header-grid.go_content-header-hasBackground.go_content-header-hasButtons .go_content-header-buttons a.float-end {
float: none !important;
display: block !important;
width: 100% !important;
text-align: center !important;
}
}
/* --- 14. Activiteiten: losse thema's in dezelfde pil-stijl als tags.
Activiteiten: zelf ingevoerd thema (los
, geen link)
naast de vaste thema-tags (.go_theme-label) — zelfde pil-stijl --- */
dd.go_module-theme-labels ul,
.go_module-theme-labels ul {
display: flex !important;
flex-wrap: wrap !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
dd.go_module-theme-labels ul li,
.go_module-theme-labels ul li {
display: inline-flex !important;
align-items: center !important;
background: #EFEFEF !important;
color: #555 !important;
border-radius: 999px !important;
padding: 6px 14px !important;
font-size: 14px !important;
margin: 4px 6px 4px 0 !important;
list-style: none !important;
}
dd.go_module-theme-labels ul li a,
.go_module-theme-labels ul li a {
color: #555 !important;
text-decoration: none !important;
}
/* --- 15. ANBI-pagina: geen afronding op de kaartjes, compacte
documentthumbnails/iconen naast de titel.
ANBI-strook: eigen afbeeldingen (kaartjes met afgeknipt
hoekje, PNG met transparante hoek) mogen niet door een algemene
img/button border-radius-regel afgerond worden ------------------ */
img[src*="ANBI-kaartje"],
img[alt*="Statuten"],
img[alt*="statuten"],
img[alt*="Beleidsplan"],
img[alt*="beleidsplan"],
img[alt*="Jaarverslag"],
img[alt*="jaarverslag"],
.sa-link-blok img,
.go_block.cx_card.sa-link-blok .go_card.go_block-content img {
border-radius: 0 !important;
}
/* ANBI-documentkaarten: de document-thumbnail (met alt "Document '...'
groter tonen") mag niet de hele breedte/hoogte van de kaart vullen —
compact naast de titel weergeven, zoals in een gewoon bericht. --- */
.cx_template-image-wrapper img[alt*="groter tonen"] {
width: 90px !important;
height: 120px !important;
object-fit: cover !important;
flex: 0 0 90px !important;
}
/* ANBI-documentkaarten: handmatig geplaatste icoontjes (jaarverslag,
beleidsplan e.d.) mogen niet de hele kaart vullen — compact naast
de titel, zoals een documentbestand met thumbnail. --------------- */
.cx_widget img[src*="anbi-iconen"],
img[src*="Jaarverslag-icoon"],
img[alt*="jaarverslag"],
img[alt*="Jaarverslag"],
img[alt*="beleidsplan"],
img[alt*="Beleidsplan"] {
width: 64px !important;
height: 64px !important;
object-fit: contain !important;
}
/* --- 16. Losse webpagina's: minder witruimte tussen secties.
Webpagina's (bv. "Slow Food Achterhoek"): secties (.go_row)
stonden verder uit elkaar dan op de homepage — verticale padding en
standaard kop/alinea-marges verkleind. */
.cx_content-inner .go_row {
margin: 0 !important;
}
.cx_content-inner .go_container {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.cx_content-inner .go_row-title {
margin: 0 0 8px !important;
}
.cx_content-inner .go_container > p {
margin: 0 0 8px !important;
}
.cx_content-inner .go_container > p:last-of-type {
margin-bottom: 0 !important;
}
/* Brede, hoge-specificiteit vangnet: browser-standaardmarges op h1/h2/p
binnen deze webpagina-secties resetten, ongeacht welk element van de
drie hierboven wel/niet matcht */
.cx_content-inner .go_section .go_row h1,
.cx_content-inner .go_section .go_row h2,
.cx_content-inner .go_section .go_row .go_container h1,
.cx_content-inner .go_section .go_row .go_container h2 {
margin-top: 0 !important;
margin-bottom: 8px !important;
}
.cx_content-inner .go_section .go_row p,
.cx_content-inner .go_section .go_row .go_container p {
margin-top: 0 !important;
margin-bottom: 8px !important;
}
.cx_content-inner .go_section .go_row {
padding-top: 6px !important;
padding-bottom: 6px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* --- 17. "Breder scherm"-modus: content niet breder dan het hoofdmenu.
"Breder scherm"-modus: content mag niet breder worden dan het
hoofdmenu erboven — kader terugbrengen naar dezelfde breedte/centrering
als de nav in plaats van edge-to-edge vol te lopen. Achtergrond blijft
crème doorlopen tot de randen (alleen de inhoud wordt gecentreerd).
Beperkt tot binnen .cx_content-fw zodat het hoofdmenu (dat ook een
.container-fluid gebruikt) hier niet door geraakt wordt. */
.cx_content-fw div.container-fluid {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
background-color: #FAF6EC !important;
}
.cx_content.cx_content-fw,
.content.go_content-webpage {
background-color: #FAF6EC !important;
}