/* ================================================================
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. Hier op één vaste waarde voor alle typen forceren, met
verhoogde specificiteit zodat dit zeker boven de eigen regels van
Gebiedonline uitkomt. */
#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 {
margin-top: -2.3rem !important;
position: relative !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;
}