@charset "UTF-8";
.ww-filters {
display: flex;
flex-direction: column;
gap: 20px;
padding: 16px;
margin-bottom: 24px;
background: #fff;
border: 1px solid #000;
}
.ww-filters__search {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 1px solid #000;
}
.ww-filters__search-icon {
display: inline-flex;
color: #000;
font-size: 16px;
line-height: 1;
}
.ww-filters__search-input {
flex: 1 1 auto;
width: 100%;
border: 0;
background: transparent;
color: #000;
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.025em;
}
.ww-filters__search-input::placeholder {
color: #71717a;
font-weight: 700;
}
.ww-filters__search-input:focus {
outline: none;
}
.ww-filters__group {
display: flex;
flex-direction: column;
gap: 10px;
}
.ww-filters__label {
margin: 0;
font-size: 13px;
line-height: 1.2;
letter-spacing: 0.01em;
color: #71717a;
}
.ww-filters__row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ww-filters__pill {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 10px 16px;
background: #fff;
border: 1px solid #000;
border-radius: 0;
font-weight: 800;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.025em;
text-transform: uppercase;
color: #000;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.ww-filters__pill:hover {
background: rgba(0, 0, 0, 0.06);
}
.ww-filters__pill.is-active {
background: #000;
color: #fff;
}
.ww-filters__pill-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
font-size: 12px;
line-height: 1.2;
color: #ff3d3d;
}
.agenda--overview .agenda__filters,
.agenda--overview .agenda__locations {
padding: 0;
margin: 0;
border: 0;
}
.buurt-directory .buurt-directory__panel {
flex-direction: column;
align-items: stretch;
gap: 20px;
padding: 16px;
margin-bottom: 24px;
background: #fff;
border: 1px solid #000;
}
.buurt-directory .buurt-directory__search-wrap {
max-width: 100%;
}
.buurt-directory .buurt-directory__search {
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 1px solid #000;
}
.buurt-directory .buurt-directory__search-icon {
color: #000;
}
.buurt-directory .buurt-directory__search-input {
color: #000;
font-weight: 700;
}
.buurt-directory .buurt-directory__search-input::placeholder {
color: #71717a;
}
.buurt-directory .buurt-directory__filters {
gap: 8px;
}
.buurt-directory .buurt-directory__filter {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 10px 16px;
background: #fff;
border: 1px solid #000;
border-radius: 0;
font-weight: 800;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.025em;
text-transform: uppercase;
color: #000;
}
.buurt-directory .buurt-directory__filter.is-active, .buurt-directory .buurt-directory__filter.woensel-btn--black {
background: #000;
color: #fff;
}
.buurt-directory .buurt-directory__filter-count {
margin-left: 6px;
color: #ff3d3d;
}
.gform_wrapper .gform_button,
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_footer button {
font-family: inherit !important;
font-weight: 800 !important;
}
.single-buurtgroep__hero,
.single-fonds__hero,
.single-meldpunt__hero {
padding-bottom: 0;
}
.single-buurtgroep__hero > .container,
.single-fonds__hero > .container,
.single-meldpunt__hero > .container {
position: relative;
z-index: 3;
padding-bottom: 2.5rem;
}
.single-buurtgroep__hero-grid,
.single-fonds__hero-grid,
.single-meldpunt__hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
@media (min-width: 992px) {
.single-buurtgroep__hero-grid:has(> :nth-child(2)),
.single-fonds__hero-grid:has(> :nth-child(2)),
.single-meldpunt__hero-grid:has(> :nth-child(2)) {
grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
gap: clamp(2rem, 5vw, 4rem);
}
}
.single-buurtgroep__hero-text,
.single-fonds__hero-text,
.single-meldpunt__hero-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.single-buurtgroep__labels,
.single-fonds__labels,
.single-meldpunt__labels {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.single-buurtgroep__intro,
.single-fonds__intro,
.single-meldpunt__intro {
margin: 0;
max-width: 46rem;
font-size: 18px;
line-height: 28px;
letter-spacing: 0.025em;
color: #18181b;
}
.single-buurtgroep__hero-buttons,
.single-fonds__hero-buttons,
.single-meldpunt__hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.single-buurtgroep__hero-img img,
.single-fonds__hero-img img,
.single-meldpunt__hero-img img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
border: 3px solid #000;
}
.single-buurtgroep__hero-logo,
.single-fonds__hero-logo,
.single-meldpunt__hero-logo {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1.5rem, 4vw, 2.5rem);
background: var(--ww-white);
border: 3px solid #000;
}
.single-buurtgroep__hero-logo img,
.single-fonds__hero-logo img,
.single-meldpunt__hero-logo img {
display: block;
width: 100%;
max-width: 260px;
height: auto;
object-fit: contain;
}
.single-buurtgroep__body,
.single-fonds__body,
.single-meldpunt__body {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
@media (min-width: 992px) {
.single-buurtgroep__body,
.single-fonds__body,
.single-meldpunt__body {
grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
}
}
.single-buurtgroep__main > * + *,
.single-fonds__main > * + *,
.single-meldpunt__main > * + * {
margin-top: 2.5rem;
}
.single-buurtgroep__main h2,
.single-fonds__main h2,
.single-meldpunt__main h2 {
margin: 2.5rem 0 1.25rem;
font-weight: 800;
font-size: 30px;
line-height: 32px;
letter-spacing: 0.025em;
text-transform: uppercase;
color: #000;
}
.single-buurtgroep__main h2:first-child,
.single-fonds__main h2:first-child,
.single-meldpunt__main h2:first-child {
margin-top: 0;
}
@media (min-width: 992px) {
.single-buurtgroep__sidebar,
.single-fonds__sidebar,
.single-meldpunt__sidebar {
position: sticky;
top: 120px;
}
}
.single-buurtgroep__notice,
.single-fonds__notice,
.single-meldpunt__notice {
padding: 1.25rem 1.5rem;
border: 1px solid #000;
background: var(--defaults-gray-100);
}
.single-buurtgroep__notice p,
.single-fonds__notice p,
.single-meldpunt__notice p {
margin: 0;
}
.single-buurtgroep__gallery-grid,
.single-fonds__gallery-grid,
.single-meldpunt__gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 1rem;
}
@media (min-width: 620px) {
.single-buurtgroep__gallery-grid,
.single-fonds__gallery-grid,
.single-meldpunt__gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.single-buurtgroep__gallery-grid img,
.single-fonds__gallery-grid img,
.single-meldpunt__gallery-grid img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4/3;
object-fit: cover;
border: 1px solid #000;
}
.single-buurtgroep__meedoen,
.single-fonds__cta,
.single-meldpunt__contact {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.single-buurtgroep__meedoen h2,
.single-fonds__cta h2,
.single-meldpunt__contact h2 {
margin: 0;
}
.single-buurtgroep__meedoen p,
.single-fonds__cta p,
.single-meldpunt__contact p {
margin: 0;
}
.single-fonds__cta-help,
.single-buurtgroep__contact-name {
margin-top: 0.5rem !important;
font-size: 14px;
color: #27272a;
}
.woensel-checklist {
margin: 1rem 0 0;
padding: 0;
list-style: none;
}
.woensel-checklist li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 0.6rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
line-height: 26px;
}
.woensel-checklist li:last-child {
border-bottom: 0;
}
.woensel-checklist li i {
flex: 0 0 auto;
margin-top: 6px;
font-size: 14px;
}
.single-meldpunt__row {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.single-meldpunt__row:last-of-type {
border-bottom: 0;
}
.single-meldpunt__row i {
flex: 0 0 auto;
width: 24px;
text-align: center;
margin-top: 4px;
font-size: 18px;
}
.single-meldpunt__row strong {
display: block;
font-weight: 800;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.025em;
}
.single-meldpunt__row span {
display: block;
margin-top: 2px;
font-size: 14px;
line-height: 20px;
color: #27272a;
}
.single-meldpunt__row a {
color: inherit;
text-decoration: none;
}
.single-meldpunt__row a:hover {
text-decoration: underline;
}
.single-meldpunt__disclaimer {
margin-top: 1rem;
font-size: 13px;
line-height: 20px;
color: #27272a;
}
.single-buurtgroep__hero:has(> .woensel-separator--black) + .buurt-meta,
.single-fonds__hero:has(> .woensel-separator--black) + .buurt-meta,
.single-meldpunt__hero:has(> .woensel-separator--black) + .buurt-meta {
padding-top: 88px;
}
.info-card__text p {
margin: 0;
}
.info-card__text p + p {
margin-top: 0.75rem;
}
.gform_wrapper .gform_button,
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper button[type=submit],
.gform_wrapper input[type=submit] {
text-transform: uppercase !important;
}
button.agenda__link {
padding: 0;
border: 0;
background: none;
cursor: pointer;
appearance: none;
}
.woensel-nav:not(.woensel-nav--mobile) {
gap: 1rem;
}
.woensel-nav:not(.woensel-nav--mobile) > li {
white-space: nowrap;
}
.buurt-map-pin--ruimte .buurt-map-pin__dot {
background: var(--ww-blue);
}
.buurt-map-pin--organisatie .buurt-map-pin__dot,
.buurt-map-pin--featured .buurt-map-pin__dot {
background: var(--ww-pink);
}
.buurt-map-pin--aed .buurt-map-pin__dot {
background: var(--ww-green);
}
.page-hero__crumbs .breadcrumb-sep {
color: inherit;
opacity: 0.5;
}
.agenda__item:hover .agenda__action .fa-arrow-up-right {
transform: rotate(45deg);
}
.agenda.bg-color-black .agenda__item {
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.agenda.bg-color-black .agenda__item:hover {
background: #fff;
border-color: #fff;
}
.agenda.bg-color-black .agenda__item:hover .agenda__event-title,
.agenda.bg-color-black .agenda__item:hover .agenda__day,
.agenda.bg-color-black .agenda__item:hover .agenda__time,
.agenda.bg-color-black .agenda__item:hover .agenda__meta,
.agenda.bg-color-black .agenda__item:hover .agenda__location,
.agenda.bg-color-black .agenda__item:hover .agenda__price,
.agenda.bg-color-black .agenda__item:hover .agenda__meta-sep {
color: #000;
}
.agenda.bg-color-black .agenda__item:hover .agenda__action {
background: #000;
border-color: #000;
color: #fff;
}
.agenda.bg-color-white .agenda__item,
.agenda.bg-color-grey .agenda__item,
.agenda.bg-color-yellow .agenda__item {
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.agenda.bg-color-white .agenda__item:hover,
.agenda.bg-color-grey .agenda__item:hover,
.agenda.bg-color-yellow .agenda__item:hover {
background: #000;
border-color: #000;
}
.agenda.bg-color-white .agenda__item:hover .agenda__event-title,
.agenda.bg-color-white .agenda__item:hover .agenda__day,
.agenda.bg-color-white .agenda__item:hover .agenda__time,
.agenda.bg-color-white .agenda__item:hover .agenda__meta,
.agenda.bg-color-white .agenda__item:hover .agenda__location,
.agenda.bg-color-white .agenda__item:hover .agenda__price,
.agenda.bg-color-white .agenda__item:hover .agenda__meta-sep,
.agenda.bg-color-grey .agenda__item:hover .agenda__event-title,
.agenda.bg-color-grey .agenda__item:hover .agenda__day,
.agenda.bg-color-grey .agenda__item:hover .agenda__time,
.agenda.bg-color-grey .agenda__item:hover .agenda__meta,
.agenda.bg-color-grey .agenda__item:hover .agenda__location,
.agenda.bg-color-grey .agenda__item:hover .agenda__price,
.agenda.bg-color-grey .agenda__item:hover .agenda__meta-sep,
.agenda.bg-color-yellow .agenda__item:hover .agenda__event-title,
.agenda.bg-color-yellow .agenda__item:hover .agenda__day,
.agenda.bg-color-yellow .agenda__item:hover .agenda__time,
.agenda.bg-color-yellow .agenda__item:hover .agenda__meta,
.agenda.bg-color-yellow .agenda__item:hover .agenda__location,
.agenda.bg-color-yellow .agenda__item:hover .agenda__price,
.agenda.bg-color-yellow .agenda__item:hover .agenda__meta-sep {
color: #fff;
}
.agenda.bg-color-white .agenda__item:hover .agenda__action,
.agenda.bg-color-grey .agenda__item:hover .agenda__action,
.agenda.bg-color-yellow .agenda__item:hover .agenda__action {
background: #fff;
border-color: #fff;
color: #000;
}
.woensel-nav:not(.woensel-nav--mobile) a {
position: relative;
}
.woensel-nav:not(.woensel-nav--mobile) a::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 40px;
max-width: 100%;
margin-left: -20px;
height: 3px;
background: #ff3d3d;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.18s ease;
pointer-events: none;
}
.woensel-nav:not(.woensel-nav--mobile) a:hover::after,
.woensel-nav:not(.woensel-nav--mobile) .current-menu-item > a::after,
.woensel-nav:not(.woensel-nav--mobile) .current_page_item > a::after,
.woensel-nav:not(.woensel-nav--mobile) .current-menu-ancestor > a::after {
transform: scaleX(1);
}
.single-evenement__hero.single-evenement__hero {
padding-bottom: calc(38px + 2.75rem);
}
.page-hero.bg-color-yellow .page-hero__crumbs,
.page-hero.bg-color-yellow .page-hero__crumbs a,
.page-hero.bg-color-yellow .page-hero__crumbs a:hover {
color: #000;
}
.page-hero.bg-color-yellow .page-hero__crumb-sep {
color: #ff3d3d;
opacity: 1;
}
.timeline__viewport.is-dragging {
cursor: grabbing;
user-select: none;
}
.agenda-hoverimg {
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 340px;
z-index: 60;
pointer-events: none;
overflow: hidden;
border: 1px solid #000;
opacity: 0;
clip-path: inset(100% 0 0 0);
transition: opacity 0.3s ease, clip-path 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.agenda-hoverimg.is-visible {
opacity: 1;
clip-path: inset(0 0 0 0);
}
.agenda-hoverimg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ww-addcal-trigger {
cursor: pointer;
}
.ww-calmodal {
padding: 0;
border: 1px solid #000;
background: #fff;
max-width: 380px;
width: calc(100% - 32px);
color: #000;
}
.ww-calmodal::backdrop {
background: rgba(0, 0, 0, 0.5);
}
.ww-calmodal__box {
position: relative;
padding: 28px;
}
.ww-calmodal__close {
position: absolute;
top: 8px;
right: 12px;
border: 0;
background: transparent;
font-size: 28px;
line-height: 1;
cursor: pointer;
color: #000;
}
.ww-calmodal__eyebrow {
margin: 0 0 4px;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #ff3d3d;
}
.ww-calmodal__title {
margin: 0 0 18px;
font-weight: 800;
font-size: 20px;
line-height: 1.15;
text-transform: uppercase;
}
.ww-calmodal__opts {
display: flex;
flex-direction: column;
gap: 10px;
}
.ww-calmodal__opt {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: 1px solid #000;
color: #000;
text-decoration: none;
font-weight: 800;
font-size: 15px;
letter-spacing: 0.02em;
text-transform: uppercase;
transition: background-color 0.12s ease, color 0.12s ease;
}
.ww-calmodal__opt i {
width: 20px;
text-align: center;
font-size: 18px;
}
.ww-calmodal__opt:hover {
background: #ff3d3d;
color: #fff;
}
/* ---------------------------------------------------------------
Footer compacter, review Justin 30-07-2026
--------------------------------------------------------------- */
.woensel-footer {
/* Was calc(3.5rem + 50px) = 106px. De 50px is ruimte voor de zigzag-crest
die er half overheen valt, die blijft staan; de rest mag eraf. */
padding-top: calc(2rem + 50px);
/* Het logo stond op 370px breed, dat is 164px hoog. Daardoor liep de hele
footer onnodig hoog uit: de merkkolom was hoger dan de linkkolommen. */
}
.woensel-footer__brand-link, .woensel-footer__logo {
width: 200px;
}
.woensel-footer__heading {
font-size: 17px;
margin-bottom: 0.75rem;
}
.woensel-footer__list li {
margin-bottom: 0.35rem;
}
.woensel-footer__socials {
margin-top: 1rem;
}
.woensel-footer__socials a {
width: 34px;
height: 34px;
}
.woensel-footer__bar {
margin-top: 2rem;
padding: 1.1rem 0;
}
@media (min-width: 992px) {
/* De vier linkkolommen zijn samen smaller dan de merkkolom van 4/12.
Het logo heeft die ruimte niet meer nodig, dus de kolommen mogen breder
ademen en de rijen sluiten netter op elkaar aan. */
.woensel-footer .row {
--bs-gutter-y: 2rem;
}
}
/* ---------------------------------------------------------------
Gravity Forms op de huisstijl, review Justin 30-07-2026
Justin zag drie dingen: de select is niet even hoog als het veld
ernaast, op de een zit wel een border radius en op de ander niet, en
de asterisk is waarschijnlijk niet het rood van de website.
Alle drie hebben dezelfde oorzaak. Het thema stylet select en textarea
wel, maar die regels zijn geschreven voor de oude "gravity-theme".
De site draait op de nieuwe orbital-theme, en die wint op
specificiteit. In plaats van daar met !important tegenin te gaan
zetten we de design tokens van Gravity Forms zelf op onze waarden.
Dan volgt elk veld mee, ook de velden die er later bij komen.
--------------------------------------------------------------- */
.gform_wrapper.gform-theme,
.gform_wrapper.gform-theme--framework {
/* Maatvoering: alles even hoog als de tekstvelden van het thema. */
--gf-ctrl-size: 44px;
--gf-ctrl-size-md: 44px;
--gf-ctrl-line-height: 44px;
--gf-ctrl-btn-size: 44px;
--gf-ctrl-btn-size-md: 44px;
/* Rechte hoeken, zoals de rest van de site. Was 3px op select,
textarea en knop, en 0 op de tekstvelden. */
--gf-ctrl-radius: 0;
--gf-ctrl-radius-max-sm: 0;
--gf-ctrl-radius-max-md: 0;
--gf-ctrl-radius-max-lg: 0;
--gf-ctrl-textarea-radius: 0;
--gf-ctrl-btn-radius: 0;
--gf-ctrl-file-zone-radius: 0;
--gf-ctrl-select-dropdown-radius: 0;
/* Zwarte rand en zwarte tekst; was het grijs #686e77 van Gravity Forms. */
--gf-ctrl-border-color: #000;
--gf-ctrl-border-color-hover: #000;
--gf-ctrl-color: #000;
--gf-ctrl-color-hover: #000;
--gf-ctrl-color-focus: #000;
--gf-ctrl-font-size: 16px;
--gf-ctrl-placeholder-color: #71717a;
--gf-ctrl-placeholder-font-size: 16px;
--gf-ctrl-shadow: none;
--gf-ctrl-btn-shadow: none;
--gf-ctrl-btn-shadow-hover: none;
--gf-ctrl-btn-shadow-focus: none;
/* Het accent stond op het blauw van Gravity Forms, #204ce5. Dat kwam
terug in de vinkjes en de focusrand. */
--gf-ctrl-accent-color: #ff3d3d;
--gf-ctrl-choice-check-color: #ff3d3d;
--gf-ctrl-border-color-focus: #ff3d3d;
--gf-ctrl-outline-color-focus: #ff3d3d;
--gf-ctrl-outline-width-focus: 2px;
/* De asterisk en de foutkleur stonden op het standaardrood #c02b0a. */
--gf-color-danger: #ff3d3d;
--gf-color-danger-rgb: 255, 61, 61;
--gf-ctrl-label-color-req: #ff3d3d;
--gf-ctrl-border-color-error: #ff3d3d;
--gf-ctrl-desc-color-error: #ff3d3d;
--gf-ctrl-textarea-height: 148px;
}
/* De randkleur zet Gravity Forms op een specifiekere plek dan de rest van
de tokens, dus die had de bovenstaande blok niet te pakken. Hier met de
orbital-klasse erbij, plus rechtstreeks op de velden zodat select en
textarea gelijklopen met de tekstvelden. */
.gform_wrapper.gform-theme--orbital {
--gf-ctrl-border-color: #000;
--gf-ctrl-border-color-hover: #000;
}
.gform_wrapper.gform-theme .gfield select,
.gform_wrapper.gform-theme .gfield textarea,
.gform_wrapper.gform-theme .ginput_container select,
.gform_wrapper.gform-theme .ginput_container textarea {
border-color: #000;
}
/* Het adres is nu een route-link naar Google Maps. Onderstreept zodat het
als link te herkennen is, met dezelfde overgang als de rest. */
.single-buurtplek__adres-link,
.single-side__org-list a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.15s ease;
}
.single-buurtplek__adres-link:hover, .single-buurtplek__adres-link:focus-visible,
.single-side__org-list a:hover,
.single-side__org-list a:focus-visible {
color: #ff3d3d;
}
/* ---------------------------------------------------------------
Witruimteschaal: correctie op mijn eigen analyse
Ik had hier eerder lg en xxl "hersteld" omdat een scan over de platte
CSS liet zien dat de schaal twee keer stond met botsende waarden. Die
analyse was fout: de tweede set staat in een media query voor
schermen tot 992px. Het waren dus geen dubbele definities maar de
mobiele waarden.
Zoals het werkelijk is, uitgelezen in de browser:
stap alle breedtes tot 992px
xxs 16 -
xs 32 -
sm 48 -
md 64 -
lg 80 64
xl 112 -
xxl 128 -
De schaal op desktop loopt dus gewoon op en was nooit kapot. Alleen
lg wordt op kleine schermen ingedikt, en dat is precies de bedoeling.
Mijn regel zonder media query overschreef die 64 en zette lg overal
op 80. Daarmee was lg op mobiel even groot als xl. Die regel is hier
weg; er valt niets te herstellen.
--------------------------------------------------------------- */
/* Losse blokken die hun eigen maat meebrachten in plaats van de schaal.
Nagelopen op alle padding-waarden in woensel.css; buiten de schaal
stonden 67px (4,2rem) op info-cards en numbers, 56px op
buurt-directory, en afwijkende waarden op choice-cards en agenda.
Die 67px komt nergens anders voor en leest als een typefout.
Alle inhoudsblokken staan nu op het ritme van 112px, zodat secties
onder elkaar dezelfde adem hebben. De :not() zorgt dat een redacteur
die in de beheerder bewust een andere maat kiest, gewoon voorrang
houdt.
De heroes blijven met opzet buiten deze correctie: die hebben een
eigen opbouw met de zigzag-crest eroverheen. */
.block.info-cards:not([class*=row-padding-top]) {
padding-top: 80px;
}
.block.info-cards:not([class*=row-padding-bottom]) {
padding-bottom: 80px;
}
.block.numbers:not([class*=row-padding-top]) {
padding-top: 80px;
}
.block.numbers:not([class*=row-padding-bottom]) {
padding-bottom: 80px;
}
.block.choice-cards:not([class*=row-padding-top]) {
padding-top: 80px;
}
.block.choice-cards:not([class*=row-padding-bottom]) {
padding-bottom: 80px;
}
.block.agenda:not([class*=row-padding-top]) {
padding-top: 80px;
}
.block.agenda:not([class*=row-padding-bottom]) {
padding-bottom: 80px;
}
.block.buurt-directory:not([class*=row-padding-top]) {
padding-top: 80px;
}
.block.buurt-directory:not([class*=row-padding-bottom]) {
padding-bottom: 80px;
}
.block.post-overview:not([class*=row-padding-top]) {
padding-top: 80px;
}
.block.post-overview:not([class*=row-padding-bottom]) {
padding-bottom: 80px;
}
@media (min-width: 992px) {
.block.info-cards:not([class*=row-padding-top]) {
padding-top: 112px;
}
.block.info-cards:not([class*=row-padding-bottom]) {
padding-bottom: 112px;
}
.block.numbers:not([class*=row-padding-top]) {
padding-top: 112px;
}
.block.numbers:not([class*=row-padding-bottom]) {
padding-bottom: 112px;
}
.block.choice-cards:not([class*=row-padding-top]) {
padding-top: 112px;
}
.block.choice-cards:not([class*=row-padding-bottom]) {
padding-bottom: 112px;
}
.block.agenda:not([class*=row-padding-top]) {
padding-top: 112px;
}
.block.agenda:not([class*=row-padding-bottom]) {
padding-bottom: 112px;
}
.block.buurt-directory:not([class*=row-padding-top]) {
padding-top: 112px;
}
.block.buurt-directory:not([class*=row-padding-bottom]) {
padding-bottom: 112px;
}
.block.post-overview:not([class*=row-padding-top]) {
padding-top: 112px;
}
.block.post-overview:not([class*=row-padding-bottom]) {
padding-bottom: 112px;
}
}
/* ---------------------------------------------------------------
Hover op zwarte blokken, feedback 30-07-2026
De kaders krijgen op hover een hard offset-blok achter zich:
box-shadow: 10px 10px 0 #000. Bij een kader dat zelf al zwart is,
zoals het herinneringsblok in de zijkolom, staat er dan een zwart
blok achter een zwart blok. Dat leest als een dubbel patroon in
plaats van als een hover.
Elders in de stylesheet is dit al opgelost, alleen niet overal:
choice-card en de cta-box van de directory nemen wit op zwart,
contact-form__side-box en steps__box nemen rood. Rood dus, zoals
gevraagd.
Alleen de kaders die zelf zwart zijn. Een fancy-box binnenin een
zwart blok is wit (.bg-color-black .fancy-box) en houdt zijn zwarte
offset-blok.
--------------------------------------------------------------- */
.fancy-box.bg-color-black:hover,
.ww-search__card.bg-color-black:hover {
box-shadow: 10px 10px 0 #ff3d3d;
}
/* Outline-knoppen hoveren naar zwart. Op een zwarte ondergrond zie je
daar niets van. De gekleurde knoppen laten we met rust, die hebben
hun eigen hover. */
.bg-color-black .woensel-btn--outline:hover,
.bg-color-black .woensel-btn--outline:focus-visible {
background: #ffbf3d;
border-color: #ffbf3d;
color: #000;
}
.bg-color-black .woensel-btn--outline:hover i,
.bg-color-black .woensel-btn--outline:focus-visible i {
color: #000;
}
/* ---------------------------------------------------------------
Kaart op de detailpagina
--------------------------------------------------------------- */
.single-buurtplek__leaflet {
width: 100%;
height: 100%;
min-height: 260px;
z-index: 0;
}
.single-buurtplek__leaflet .leaflet-control-attribution {
font-size: 10px;
}
/* ---------------------------------------------------------------
Dubbel vinkje op de checkboxen
Er stonden er twee: een rode box met een wit vinkje, plus een los
rood vinkje ernaast.
Twee dingen tekenen tegelijk. Het thema forceert
appearance: auto, dus de browser tekent de native checkbox (rood
vlak uit accent-color, met het witte vinkje van het systeem). En de
orbital-theme van Gravity Forms zet daar zijn eigen vinkje-glyph
overheen via ::before, in --gf-ctrl-choice-check-color. Zolang die
variabele op het blauw van Gravity Forms stond viel dat niet op;
sinds die op merkrood staat wel.
De native checkbox is degene die we gebruiken, dus het glyph van
Gravity Forms gaat eruit. font-family staat daar op !important, dus
hier ook.
--------------------------------------------------------------- */
.gform_wrapper.gform-theme input[type=checkbox]::before,
.gform_wrapper.gform-theme input[type=radio]::before,
.gform_wrapper.gform-theme .gfield-choice-input::before {
content: none !important;
display: none !important;
}
/* ---------------------------------------------------------------
Overgangen op links en pijlen, feedback 30-07-2026
--------------------------------------------------------------- */
/* Elke link een zachte overgang. Bewust een opsomming en geen "all":
met "all" gaan ook transform en opacity mee, en die worden door GSAP
geanimeerd. Twee easings over dezelfde eigenschap geeft schokkerige
animaties. */
a {
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, text-decoration-color 0.15s ease, box-shadow 0.15s ease;
}
/* Pijlen draaien in plaats van schuiven.
Een rechte pijl schuift naar rechts, dat was er al. Een schuine pijl
schoof mee, waardoor hij schuin bleef wijzen. Die draait nu naar de
horizontaal: omhoog-rechts staat 45 graden linksom van rechts, dus
die draait 45 graden mee; omlaag-rechts staat er 45 graden rechtsom
van, dus die draait terug.
De bestaande regels zetten transform op elke i in een knop, vandaar
!important: anders wint translateX van de draaiing. */
.fa-arrow-up-right,
.fa-arrow-down-right,
.fa-arrow-left,
.fa-arrow-down {
transition: transform 0.2s ease;
}
:is(a, button, .woensel-btn, [class*=__link], [class*=__cta], [class*=card], .agenda__item):hover .fa-arrow-up-right {
transform: rotate(45deg) !important;
}
:is(a, button, .woensel-btn, [class*=__link], [class*=__cta], [class*=card], .agenda__item):hover .fa-arrow-down-right {
transform: rotate(-45deg) !important;
}
/* De keuzekaarten op /ik-heb-een-leuk-idee/ vullen de dropdown in het
formulier alvast in. Ze moeten er dus ook uitzien alsof je erop kunt
klikken. */
.info-card.is-form-trigger {
cursor: pointer;
transition: box-shadow 0.15s ease;
/* Zwart, net als choice-card en ww-search__card. Rood hoort bij de kaders
die zelf zwart zijn, niet bij witte kaarten op een witte achtergrond. */
}
.info-card.is-form-trigger:hover {
box-shadow: 10px 10px 0 #000;
}
.info-card.is-form-trigger:focus-visible {
box-shadow: 10px 10px 0 #000;
outline: 2px solid #ff3d3d;
outline-offset: 2px;
}
/* ---------------------------------------------------------------
Filters ingeklapt op telefoon, review Justin 30-07-2026
De filters stonden op elk formaat open. Op een telefoon duwt dat de
inhoud waar je voor komt ver naar beneden. Het zoekveld blijft
staan, de groepen eronder gaan achter een knop.
De knop bestaat alleen op telefoon. Op breder scherm verdwijnt hij
en staat alles gewoon open, zoals nu.
--------------------------------------------------------------- */
.ww-filters__toggle {
display: none;
align-items: center;
gap: 0.5rem;
width: 100%;
margin-top: 0.75rem;
padding: 12px 16px;
border: 1px solid #000;
background: #fff;
color: #000;
font-weight: 800;
font-size: 15px;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.ww-filters__toggle i {
margin-left: auto;
}
.ww-filters__toggle:hover, .ww-filters__toggle[aria-expanded=true] {
background: #000;
color: #fff;
}
.ww-filters__toggle:focus-visible {
outline: 2px solid #ff3d3d;
outline-offset: 2px;
}
/* Het aantal actieve filters, zodat je ziet dat er iets aan staat
terwijl het paneel dicht is. */
.ww-filters__toggle-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: #ff3d3d;
color: #000;
font-size: 13px;
line-height: 1;
}
.ww-filters__toggle-count[hidden] {
display: none;
}
@media (max-width: 991.98px) {
.ww-filters__toggle {
display: flex;
}
/* Alles behalve het zoekveld en de knop zelf gaat dicht.
De uitzonderingen staan in :where(), want dat telt niet mee voor de
specificiteit. Met drie losse :not()'s woog de dichtregel (0,4,0)
zwaarder dan de openregel (0,2,0), en dan klapte het paneel wel dicht
maar niet meer open. */
.ww-filters > *:not(:where([class*=__search], .ww-filters__toggle)),
.buurt-directory__panel > *:not(:where([class*=__search], .ww-filters__toggle)) {
display: none;
}
.ww-filters.is-filters-open > *,
.buurt-directory__panel.is-filters-open > * {
display: revert;
}
}
/* ---------------------------------------------------------------
Dode hovers op de gele knoppen
.woensel-btn--idea en .woensel-btn--primary hadden allebei een :hover
met exact dezelfde waarden als in rust, geel op zwart. Er gebeurde
dus niets.
Nu een donkerder geel. Werkt op elke ondergrond, dus ook op de zwarte
header waar een zwarte hover zou verdwijnen. Zwarte tekst op dat
donkerder geel haalt 9,8:1, ruim binnen WCAG.
:active krijgt dezelfde waarden. Zonder die regel valt de ingedrukte
staat terug op de standaard van Bootstrap, en dat past nergens bij.
--------------------------------------------------------------- */
.woensel-btn--idea,
.woensel-btn--primary {
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.woensel-btn--idea:hover, .woensel-btn--idea:focus-visible, .woensel-btn--idea:active,
.woensel-btn--primary:hover,
.woensel-btn--primary:focus-visible,
.woensel-btn--primary:active {
background: #e0a836;
border-color: #e0a836;
color: #000;
}
.woensel-btn--idea:hover i, .woensel-btn--idea:focus-visible i, .woensel-btn--idea:active i,
.woensel-btn--primary:hover i,
.woensel-btn--primary:focus-visible i,
.woensel-btn--primary:active i {
color: #000;
}
/* ---------------------------------------------------------------
Zoekresultaten
De lege staat was één regel tekst op een groot wit vlak. Nu een echt
blok met een reden waarom er niets is, en vier doorkliskaarten zodat
een bezoeker niet doodloopt. Bij treffers staat er boven de lijst in
welke onderdelen ze zitten.
--------------------------------------------------------------- */
.ww-search {
/* Verdeling over de contenttypes. */
/* Lege staat. */
/* Doorkliskaarten onder de lege staat. */
}
.ww-search__breakdown {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.25rem;
margin: 0 0 2rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #e4e4e7;
font-size: 0.9rem;
color: #71717a;
}
.ww-search__breakdown-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #000;
}
.ww-search__breakdown-item i {
color: #ff3d3d;
font-size: 0.85em;
}
.ww-search__breakdown-item strong {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
background: #000;
color: #fff;
font-size: 12px;
line-height: 1;
}
.ww-search__empty {
max-width: 46ch;
margin: 0 0 3rem;
}
.ww-search__empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 1.25rem;
border: 2px solid #000;
background: #ffbf3d;
font-size: 22px;
color: #000;
}
.ww-search__empty-title {
margin: 0 0 0.75rem;
font-size: 32px;
line-height: 1.1;
}
.ww-search__empty-text {
margin: 0;
color: #52525b;
}
.ww-search__suggestions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1.5rem;
}
.ww-search__suggestion {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 24px;
border: 1px solid #000;
background: #fff;
color: #000;
text-decoration: none;
transition: box-shadow 0.15s ease;
}
.ww-search__suggestion:hover, .ww-search__suggestion:focus-visible {
box-shadow: 10px 10px 0 #000;
color: #000;
}
.ww-search__suggestion:focus-visible {
outline: 2px solid #ff3d3d;
outline-offset: 2px;
}
.ww-search__suggestion-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 0.5rem;
background: #ff3d3d;
color: #000;
font-size: 18px;
}
.ww-search__suggestion-title {
font-weight: 800;
font-size: 20px;
line-height: 1.15;
text-transform: uppercase;
}
.ww-search__suggestion-text {
font-size: 0.95rem;
line-height: 1.5;
color: #52525b;
}
.ww-search__suggestion-arrow {
margin-top: auto;
padding-top: 0.75rem;
color: #ff3d3d;
}
.ww-search__suggestion:hover .ww-search__suggestion-arrow i {
transform: translateX(3px);
}
/* ---------------------------------------------------------------
Links die geen hover hadden
De site kleurt links rood bij hover (.single-contact a, .woensel-footer a
en zo). Twee plekken waren vergeten: het contactblok in de meta-balk van
een plek, en de privacylink in de labels van een formulier.
--------------------------------------------------------------- */
.buurt-meta__item a,
.gform_wrapper .gform-field-label a,
.gform_wrapper .gfield_label a,
.gform_wrapper .gfield_consent_description a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.15s ease;
}
.buurt-meta__item a:hover, .buurt-meta__item a:focus-visible,
.gform_wrapper .gform-field-label a:hover,
.gform_wrapper .gform-field-label a:focus-visible,
.gform_wrapper .gfield_label a:hover,
.gform_wrapper .gfield_label a:focus-visible,
.gform_wrapper .gfield_consent_description a:hover,
.gform_wrapper .gfield_consent_description a:focus-visible {
color: #ff3d3d;
}
/* ---------------------------------------------------------------
Iconen op hover
Een pijl wijst ergens heen, dus die schuift of draait die kant op.
Elk ander icoon zegt niets over richting; dat groeit alleen een
beetje. Dat leest rustiger dan een hartje of een telefoon die opzij
schiet.
De regel kijkt naar de klasse van het icoon zelf, niet naar de knop.
Wisselt iemand het icoon in de beheerder van een pijl naar iets
anders, dan verandert het gedrag vanzelf mee.
!important omdat de bestaande regels transform op elke i in een knop
zetten, en die zijn specifieker dan deze.
--------------------------------------------------------------- */
a i, button i, summary i, .woensel-btn i, [class*=__link] i, [class*=__cta] i, [class*=card] i, .agenda__item i {
transition: transform 0.18s ease;
transform-origin: center;
}
/* Alles wat geen richting aangeeft: groeien. */
a:hover i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), a:focus-visible i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), button:hover i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), button:focus-visible i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), summary:hover i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), summary:focus-visible i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), .woensel-btn:hover i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), .woensel-btn:focus-visible i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), [class*=__link]:hover i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), [class*=__link]:focus-visible i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), [class*=__cta]:hover i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), [class*=__cta]:focus-visible i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), [class*=card]:hover i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), [class*=card]:focus-visible i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), .agenda__item:hover i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]), .agenda__item:focus-visible i:not([class*=fa-arrow]):not([class*=fa-chevron]):not([class*=fa-angle]):not([class*=fa-caret]) {
transform: scale(1.2) !important;
}
@media (prefers-reduced-motion: reduce) {
a i, button i, summary i, .woensel-btn i, [class*=__link] i, [class*=__cta] i, [class*=card] i, .agenda__item i {
transition: none;
}
a:hover i, a:focus-visible i, button:hover i, button:focus-visible i, summary:hover i, summary:focus-visible i, .woensel-btn:hover i, .woensel-btn:focus-visible i, [class*=__link]:hover i, [class*=__link]:focus-visible i, [class*=__cta]:hover i, [class*=__cta]:focus-visible i, [class*=card]:hover i, [class*=card]:focus-visible i, .agenda__item:hover i, .agenda__item:focus-visible i {
transform: none !important;
}
}
/* ---------------------------------------------------------------
Tijdlijn
Drie dingen:
- de diamanten stonden náást de lijn in plaats van erop. Ze waren een
tekstteken (◆) op een vaste top-waarde, en zo'n glyph zit niet
netjes gecentreerd in zijn regel. Nu een gedraaid vierkantje dat
precies op de lijn gezet wordt
- een afbeelding per moment
- hij liep binnen de container en zag er daardoor uit als een gewoon
blok. Nu over de volle breedte, met een voortgangsbalk eronder,
zodat je ziet dat er meer naast staat
--------------------------------------------------------------- */
.timeline {
/* De carousel loopt door tot de rand; de uitlijning van het eerste
item komt van padding op de track, net als bij het verhalen-blok. */
/* De lijn loopt van rand tot rand, dus ook onder de padding door. */
/* Het oude teken uit. */
/* Gedraaid vierkantje, met zijn hart precies op de lijn. */
/* De marker hangt aan het item, en dat begint pas ná de padding van de
track. De lijn zit hoger, dus die padding gaat er weer af. Anders staat
de diamant precies een padding te laag. */
/* Afbeelding bovenin de kaart, buiten de tekstpadding. */
/* De verhouding staat op de afbeelding zelf, niet op de figure. Met
height:100% op een img zonder vaste hoogte eromheen valt die terug op
auto, en dan duwt de eigen verhouding van de foto de figure toch weer
scheef: een 4:3-foto werd 432x324 in plaats van 432x243. */
/* Voortgangsbalk. */
}
.timeline__carousel {
position: relative;
}
.timeline__track {
padding-inline: max(24px, (100% - 1320px) / 2);
padding-top: 1.75rem;
}
.timeline__track::before {
top: 8px;
left: 0;
right: 0;
}
.timeline__item::before {
content: none;
}
.timeline__item {
position: relative;
}
.timeline__marker {
position: absolute;
top: calc(8px - 1.75rem);
left: 0;
width: 14px;
height: 14px;
margin-top: -7px;
background: #ff3d3d;
transform: rotate(45deg);
}
.timeline__card--has-image {
padding: 0;
overflow: hidden;
}
.timeline__figure {
margin: 0;
overflow: hidden;
}
.timeline__figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/9;
object-fit: cover;
}
.timeline__card--has-image .timeline__card-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
}
.timeline__progress {
position: relative;
height: 3px;
margin-top: 1.5rem;
background: rgba(255, 255, 255, 0.2);
overflow: hidden;
}
.timeline__progress-bar {
position: absolute;
inset: 0 auto 0 0;
width: 20%;
background: #ff3d3d;
transition: width 0.15s ease, transform 0.15s ease;
}
/* Op lichte achtergronden een donkere baan. */
.timeline.bg-color-white .timeline__progress,
.timeline.bg-color-grey .timeline__progress,
.timeline.bg-color-yellow .timeline__progress {
background: rgba(0, 0, 0, 0.12);
}
/* ---------------------------------------------------------------
Kop zonder foto
De dubbele W is overal weggehaald. Zonder foto klapt de aside in en
verspringt de hele kop: de indeling gaat van twee kolommen naar één,
de intro schuift naar rechts en de padding onder verandert.
Met "Ruimte voor een foto vrijhouden" aan blijft de aside staan, leeg
maar op maat, zodat de kop dezelfde hoogte houdt. Zodra er een nieuwe
foto in komt vult die precies deze plek.
244px is wat de oude foto innam op 560px breed, gemeten op /agenda/.
--------------------------------------------------------------- */
.page-hero__aside--leeg {
min-height: 244px;
}
@media (max-width: 991.98px) {
/* Op telefoon staat de aside onder de tekst. Een leeg vlak van 244px
is daar alleen maar een gat waar je doorheen moet scrollen. */
.page-hero__aside--leeg {
min-height: 0;
display: none;
}
}
/* ---------------------------------------------------------------
Twee blokken met dezelfde achtergrond
Elk blok brengt 112px boven en onder mee. Tussen twee blokken van
verschillende kleur levert dat 224px op, maar daar zie je de
kleurwissel als grens, dus dat leest als twee secties.
Staan er twee blokken van dezelfde kleur naast elkaar, dan is die
grens er niet en krijg je 224px leeg vlak waar de pagina lijkt op te
houden. Gemeten voorbeelden: agenda naar info-cards op /agenda/,
info-cards naar numbers op /over-de-wijk/, contact-form naar faq op
/contact/ (240px).
Bij gelijke kleur valt de bovenpadding van het tweede blok weg, zodat
er één ritme-eenheid van 112px overblijft.
Drie uitzonderingen:
- heroes. Die hebben hun eigen opbouw en soms bewust padding 0 onder,
zoals op /contact/. Zou het volgende blok daar ook inklappen, dan
plakt de titel tegen de hero aan
- een blok waar de redactie zelf een bovenpadding heeft gekozen. Die
keuze hoort voorrang te houden
- een vorig blok met een bewust kleine onderpadding (xxs tot en met
md). Daar is de ruimte al krap; nog verder inklappen wordt te dicht
--------------------------------------------------------------- */
.block.bg-color-white:not(.page-hero):not(.home-header):not([class*=row-padding-bottom-xxs]):not([class*=row-padding-bottom-xs]):not([class*=row-padding-bottom-sm]):not([class*=row-padding-bottom-md]) + .block.bg-color-white:not([class*=row-padding-top]) {
padding-top: 0;
}
.block.bg-color-grey:not(.page-hero):not(.home-header):not([class*=row-padding-bottom-xxs]):not([class*=row-padding-bottom-xs]):not([class*=row-padding-bottom-sm]):not([class*=row-padding-bottom-md]) + .block.bg-color-grey:not([class*=row-padding-top]) {
padding-top: 0;
}
.block.bg-color-black:not(.page-hero):not(.home-header):not([class*=row-padding-bottom-xxs]):not([class*=row-padding-bottom-xs]):not([class*=row-padding-bottom-sm]):not([class*=row-padding-bottom-md]) + .block.bg-color-black:not([class*=row-padding-top]) {
padding-top: 0;
}
.block.bg-color-yellow:not(.page-hero):not(.home-header):not([class*=row-padding-bottom-xxs]):not([class*=row-padding-bottom-xs]):not([class*=row-padding-bottom-sm]):not([class*=row-padding-bottom-md]) + .block.bg-color-yellow:not([class*=row-padding-top]) {
padding-top: 0;
}
.block.bg-color-pink:not(.page-hero):not(.home-header):not([class*=row-padding-bottom-xxs]):not([class*=row-padding-bottom-xs]):not([class*=row-padding-bottom-sm]):not([class*=row-padding-bottom-md]) + .block.bg-color-pink:not([class*=row-padding-top]) {
padding-top: 0;
}
.block.bg-color-blue:not(.page-hero):not(.home-header):not([class*=row-padding-bottom-xxs]):not([class*=row-padding-bottom-xs]):not([class*=row-padding-bottom-sm]):not([class*=row-padding-bottom-md]) + .block.bg-color-blue:not([class*=row-padding-top]) {
padding-top: 0;
}
.block.bg-color-green:not(.page-hero):not(.home-header):not([class*=row-padding-bottom-xxs]):not([class*=row-padding-bottom-xs]):not([class*=row-padding-bottom-sm]):not([class*=row-padding-bottom-md]) + .block.bg-color-green:not([class*=row-padding-top]) {
padding-top: 0;
}
/* Niet elke waarde buiten de schaal is een fout.
.single-werkzaamheid__related staat op calc(50px + 32px). Die 50px
compenseert de zwarte zigzag die er half overheen valt, de 32px is de
werkelijke ruimte eronder. Datzelfde patroon staat elders in de
stylesheet, bijvoorbeeld calc(88px - 50px) op een hero met een crest.
Optellen tot 112 zou de zigzag negeren, dus die blijft zoals hij is. */
/* ---------------------------------------------------------------
Witruimte op kleine schermen
De schaal dikt op mobiel in: xl en xxl worden allebei 80px, lg wordt
64. Maar veel blokken brengen hun eigen standaard mee zonder media
query, en die bleven op 112 staan terwijl alles eromheen naar 80
zakte. Op een scherm van 375px is 112px boven én onder bijna een
derde van het beeld aan lege ruimte.
Deze regel pakt elk blok dat geen eigen keuze uit de beheerder heeft.
Wie in de beheerder wel een maat kiest houdt voorrang, want die
klassen gebruiken !important.
Buiten schot blijven de heroes en de blokken die direct onder een
crest of zigzag staan: die compenseren de overlap en zouden anders
onder het zigzagpatroon schuiven.
--------------------------------------------------------------- */
@media (max-width: 991.98px) {
.block:not(.page-hero):not(.home-header):not([class*=row-padding-top]) {
padding-top: 80px;
}
.block:not(.page-hero):not(.home-header):not([class*=row-padding-bottom]) {
padding-bottom: 80px;
}
/* De detailpagina's bouwen hun secties niet op met .block, dus die vielen
buiten de regel hierboven en hielden 112px. Nagelopen welke secties
buiten .block om verticale padding van 90px of meer meebrengen; dit zijn
ze allemaal. */
.single-body,
.single-buurtplek__faq,
.single-buurtplek__related,
.single-verhaal__main,
.single-werkzaamheid__related {
padding-top: 80px;
padding-bottom: 80px;
}
/* Nagemeten of blokken onder een crest of zigzag niet te krap komen te
staan: de ruimte tussen de onderkant van de zigzag en de eerste inhoud
is 30 tot 48px, en nergens schuift er iets onder. Dat hoeft dus geen
uitzondering. */
}
/* ---------------------------------------------------------------
Koppen op kleine schermen
Justin: "het lijkt hier wel alsof dit bijna groter is dan de titel."
Klopt, en het was letterlijk zo. De paginatitel schaalt mee met
clamp(2.5rem, 6vw, 56px), dus 40px op een telefoon. Drie koppen
stonden op een vaste maat en bleven daar dus overheen:
.steps__title 48px
.contact-form--idea .contact-form__intro-title 48px
.ww-search__title 56px
Op 375px was de sectiekop dus 48px tegen 40px voor de paginatitel.
Ze volgen nu dezelfde clamp als .section-title, die het wel goed doet:
28px op mobiel, 48px op breed.
De zoekpagina-titel is een h1, die krijgt de clamp van de paginatitel.
--------------------------------------------------------------- */
.steps__title,
.contact-form--idea .contact-form__intro-title {
font-size: clamp(1.75rem, 5vw, 48px);
}
.ww-search__title {
font-size: clamp(2.5rem, 6vw, 56px);
}
/* De regelhoogte stond als vaste 54px op de sectiekoppen. Bij 48px is dat
precies goed, maar bij 28px op een telefoon wordt het bijna dubbele
regelafstand. Zonder eenheid schaalt hij mee: 48 x 1,125 is nog steeds
54, en 28 x 1,125 is 31,5. */
.section-title,
.choice-cards__title,
.steps__title,
.contact-form--idea .contact-form__intro-title {
line-height: 1.125;
}
/* Golf 2, punt 1c: rood met zwarte tekst.
Gemeten met de WCAG-formule:
zwart op #ff3d3d 5,99:1 haalt AA wel, maar meerdere aanwezigen lazen
het slecht: volverzadigd rood geeft weinig
kleurscheiding met zwarte letters.
wit op #ff3d3d 3,51:1 haalt AA niet (stond in het stapformulier).
zwart op #ffbf3d 12,77:1 ruim goed.
wit op #8f1d1a 8,90:1 ruim goed.
zwart op #8f1d1a 2,36:1 nooit gebruiken.
De rode knop houdt zijn rol, maar wordt leesbaar per ondergrond:
op een lichte sectie donkerrood met witte tekst, dus rood blijft rood.
Op een zwarte sectie huisstijlgeel met zwarte tekst, omdat #8f1d1a tegen
zwart maar 2,36:1 vlakscheiding geeft en de knop dan nauwelijks opvalt.
De homepage-knop staat op .bg-color-yellow. Rood op geel gaf 2,13:1
vlakscheiding, donkerrood op geel geeft 5,42:1. */
.woensel-btn--pink {
background: #8f1d1a;
color: #ffffff;
border-color: #8f1d1a;
}
.woensel-btn--pink i {
color: #ffffff;
}
.bg-color-black .woensel-btn--pink {
background: #ffbf3d;
color: #000000;
border-color: #000000;
}
.bg-color-black .woensel-btn--pink i {
color: #000000;
}
/* Golf 2, punt 1b: dezelfde vaste-regelhoogte-fout zat ook op de koppen die
geen .section-title meedragen en dus buiten de fix hierboven vielen.
Gemeten op 500px breed voor de ingreep:
.home-header__title 40px tekst op 60px regel = 1,50
.page-hero__title 40px tekst op 60px regel = 1,50
.content-section__title 28px tekst op 54px regel = 1,93
.ww-search__title 40px tekst op 60px regel = 1,50
Op desktop is de verhouding 60/56 = 1,0714 en 54/48 = 1,125. Zonder eenheid
blijft desktop dus exact gelijk en schaalt mobiel wel mee. */
.content-section__title {
line-height: 1.125;
}
.home-header__title,
.page-hero__title,
.ww-search__title {
line-height: 1.0714;
}
/* ---------------------------------------------------------------
Uitlijning van de twee kolommen in content-section
De rechterkolom begon op dezelfde hoogte als de eyebrow, en die is
klein. Daardoor hing de tekst met de knop hoog boven de titel, die
pas 35px lager begint.
Centreren zou hier fout zijn: dit blok wordt breed gebruikt en de
kolommen verschillen soms 250px in hoogte. De titel zou dan midden in
een lange tekst zakken.
In plaats daarvan begint de rechterkolom op dezelfde regel als de
titel. De verschuiving is precies de hoogte van de eyebrow plus zijn
ondermarge; daarvoor staat de regelhoogte van de eyebrow nu expliciet,
anders erft hij een waarde die we niet kunnen narekenen.
Alleen op brede schermen: daaronder staan de kolommen onder elkaar en
zou de verschuiving alleen een gat maken.
--------------------------------------------------------------- */
.content-section__eyebrow {
line-height: 1.5;
}
@media (min-width: 992px) {
.content-section__grid:has(.content-section__eyebrow) .content-section__body {
/* 0,8rem x 1,5 regelhoogte = 19,2px, plus 1rem ondermarge = 35,2px */
padding-top: 2.2rem;
}
}
/* ---------------------------------------------------------------
Kaart op de contactpagina in kleur
Die stond op filter: grayscale(1), dus bewust ontkleurd. Dat paste bij
de oude Leaflet-kaarten, die ook een grijze basemap gebruikten. Nu die
op Voyager staan en wel kleur hebben, was de contactkaart de enige
grijze op de site.
--------------------------------------------------------------- */
.contact-form__map iframe {
filter: none;
}
/* -----------------------------------------------------------------
* Bedankpagina: wat gebeurt er nu
*
* De vraag na het versturen is niet "is het gelukt" maar "en nu?".
* Daarom staan de stappen er genummerd onder, in dezelfde vorm als
* het formulier zelf.
* ----------------------------------------------------------------- */
.utility-hero__intro {
margin: 0 0 24px;
max-width: 48ch;
font-size: 1.05rem;
line-height: 1.6;
}
.bedankt-stappen {
padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.bedankt-stappen__kop {
margin: 0 0 28px;
font-size: clamp(1.4rem, 3vw, 2rem);
text-transform: uppercase;
}
.bedankt-stappen__lijst {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 16px;
max-width: 780px;
}
.bedankt-stappen__slot {
margin: 28px 0 0;
max-width: 70ch;
font-size: 0.95rem;
line-height: 1.6;
color: #55504a;
}
.bedankt-stap {
display: flex;
gap: 18px;
align-items: flex-start;
background: #fff;
border: 1px solid #e3e0d8;
padding: 22px 24px;
}
.bedankt-stap__nummer {
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 50%;
background: #000;
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.bedankt-stap__kop {
margin: 3px 0 6px;
font-size: 1.15rem;
line-height: 1.25;
}
.bedankt-stap__tekst {
margin: 0;
font-size: 0.98rem;
line-height: 1.6;
color: #4a453f;
}
@media (max-width: 575.98px) {
.bedankt-stap {
padding: 18px 16px;
gap: 14px;
}
}
/* ---------------------------------------------------------------
Formulieren en agendarijen, feedback 12-08-2026
--------------------------------------------------------------- */
/* Achter een verplicht veld stonden drie sterretjes. Gravity Forms zet er
zelf één neer, in een span met de klasse gfield_required, en die span zit
ín een tweede span met dezelfde klasse. Onze eigen ::before-regel vuurde
daardoor twee keer, bovenop het sterretje dat er al stond. De echte laten
we staan, de twee bedachte gaan eruit. */
.gform_wrapper .gfield_label .gfield_required::before,
.gform_wrapper .gform-field-label .gfield_required::before {
content: none;
}
/* Losse vinkjes stonden elk op een eigen rasterregel, met veertig pixels
ertussen. Voor drie regels tekst die bij elkaar horen is dat te veel lucht;
nu staan ze als groep onder elkaar. De regel geldt alleen tussen twee
vinkvelden, dus de afstand tot het veld erboven blijft zoals hij was. */
.gform_wrapper .gfield--type-checkbox + .gfield--type-checkbox:not(.gfield_contains_required) {
margin-top: -28px;
}
/* De privacyvraag is geen extra regel van dezelfde vraag maar een eigen
vraag waar de bezoeker akkoord geeft, en hoort dus niet tegen het
vinkje erboven aan te plakken. Ze is te herkennen aan
gfield_contains_required: het nieuwsbriefvinkje is nooit verplicht, de
privacyvraag altijd. Geen selector op een veld-ID, zodat de regel
blijft werken als een formulier opnieuw wordt aangemaakt.
De consent-regels verderop in dit bestand raken deze velden niet: het
zijn gewone checkboxes en geen GF Consent-velden. */
.gform_wrapper .gfield--type-checkbox + .gfield--type-checkbox.gfield_contains_required {
margin-top: 28px;
}
/* In de agendarijen groeiden de datum- en tijdkolom mee met hun inhoud, dus
begon de titel op elke regel een paar pixels anders. Vaste breedtes, ruim
genoeg voor "19:30 - 21:00", houden de kolommen recht onder elkaar. */
@media (min-width: 768px) {
.agenda__day {
flex: 0 0 4.5rem;
}
.agenda__time {
flex: 0 0 8.5rem;
}
.agenda__item-link {
gap: 2rem;
}
}
/* Boven "Ook deze week" stond ruim driehonderd pixels leeg: 112 onderaan de
pagina, dan de zigzagrand van 140, en daarbovenop nog eens 112 in het zwarte
blok. De rand hoort bij de huisstijl en blijft; de lucht eromheen is
gehalveerd. De :not() staat erbij omdat de blokregel die we overschrijven
die ook heeft, en anders wint hij op gewicht. */
.single-evenement .single-body {
padding-bottom: 56px;
}
.block.agenda.single-evenement__related:not([class*=row-padding-top]) {
padding-top: 56px;
}
/* ---------------------------------------------------------------
Buurtkaart, hersteld 12-08-2026
--------------------------------------------------------------- */
/* De kaart op In de buurt was tot een streepje van twee pixels ingezakt.
Leaflet zet zelf geen hoogte op zijn container; die moet uit de opmaak
komen, en in de huidige gecompileerde stylesheets stond hij nergens meer.
De hoogtes hieronder zijn dezelfde als in de laatste build waarin de kaart
het wel deed. Dit hoort eigenlijk bij .buurt-directory__map in
_bootscore-custom.scss, maar main.css en woensel.css worden buiten dit
project om gebouwd; vandaar hier, in het bestand dat als laatste laadt. */
.buurt-directory__map {
height: 420px;
}
@media (max-width: 767px) {
.buurt-directory__map {
height: 360px;
}
}
/* ---------------------------------------------------------------
Lettertypes, hersteld 12-08-2026
--------------------------------------------------------------- */
/* De site laadt Archivo Black en Open Sans bij Google, maar in geen enkele
gecompileerde stylesheet stond een font-family die ze gebruikt. Alles viel
dus terug op de systeemletter van Bootstrap: de merkletters werden wel
opgehaald en nooit getoond. Dit zet ze alsnog aan.
Archivo Black bestaat maar in één gewicht. Zonder de regel hieronder maakt
de browser er zelf een vettere versie van, en dat wordt een smeerboel; de
koppen staan in de opmaak namelijk op 800. */
body,
.content-section__text,
input, select, textarea, button {
font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.section-title,
.page-hero__title,
.woensel-footer__heading {
font-family: "Archivo Black", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-weight: 400;
}
/* ---------------------------------------------------------------
Projectkop, feedback 12-08-2026
--------------------------------------------------------------- */
/* De kop van een projectpagina houdt onderaan 38 pixels vrij voor de zwarte
zigzagrand die eroverheen valt. Dat is precies genoeg zolang de kop bijna
leeg is, maar zodra er een inleiding, een knop en een voortgangsbalk in
staan, loopt de inhoud tot in de tanden van die rand. Bovenaan staat dan
ruim tachtig pixels lucht en onderaan niets. Daarom hier ruimte voor de
rand plus dezelfde marge als boven. */
.single-werkzaamheid__hero:has(+ .woensel-hero-crest) {
padding-bottom: calc(38px + 3rem);
}
/* ---------------------------------------------------------------
Tekstsectie: lucht tussen de tekst en de knop, feedback 13-08-2026
--------------------------------------------------------------- */
/* De knop stond op 32px onder de alinea. In een blok dat verder met 112px
werkt, boven, onder en tussen de twee kolommen, plakt de knop daardoor aan
de laatste regel tekst en leest hij als onderdeel van de zin in plaats van
als de handeling die erop volgt.
48px is de eerstvolgende maat uit de witruimteschaal van de site. Groter kan
niet: dan valt de knop buiten de tekstkolom waar hij bij hoort. */
.content-section .content-section__buttons {
margin-top: 48px;
}
/* ---------------------------------------------------------------
Aanmeldformulier, feedback 13-08-2026
--------------------------------------------------------------- */
/* Een formulier met stappen stond naast een halve kolom uitleg. Daar past per
regel precies een veld, dus werd elke stap twee keer zo lang als nodig en
bleef de halve pagina ernaast leeg. De uitleg gaat erboven, het formulier
krijgt de volle breedte. De klasse zet het blok zelf, alleen bij een
formulier met paginering. */
.contact-form--idea.contact-form--wide .contact-form__grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.contact-form--idea.contact-form--wide .contact-form__intro-text {
max-width: 62ch;
}
/* Binnen een stap stonden alle velden onder elkaar: het script dat de stappen
bouwt tilt ze uit de kolomindeling van Gravity Forms, en die was daarna weg.
Hier krijgen ze dezelfde twaalf kolommen terug, zodat de breedte die in het
formulier is ingesteld ook op de site klopt. Een veld zonder ingestelde
breedte staat van Gravity Forms al op 1 / -1 en vult dus gewoon de regel. */
.gform_wrapper.ww-stapform .ww-fstap__velden {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 24px;
row-gap: 18px;
align-items: start;
}
.gform_wrapper.ww-stapform .ww-fstap .ww-fstap__velden > .gfield {
margin-top: 0;
}
/* Op een telefoon is er geen ruimte voor twee velden naast elkaar. De
ingestelde breedte moet daar hard overschreven worden, anders houdt een half
veld zes van de twaalf kolommen vast die er niet meer zijn. */
@media (max-width: 767.98px) {
.gform_wrapper.ww-stapform .ww-fstap__velden {
grid-template-columns: 1fr;
}
.gform_wrapper.ww-stapform .ww-fstap .ww-fstap__velden > .gfield {
grid-column: 1/-1 !important;
}
}
/* De labels stonden op het donkerblauw van Gravity Forms en in gewone kleine
letters, terwijl elk ander formulier op de site zwarte kapitalen gebruikt.
Het uploadveld deed het al goed; nu de rest ook. De kleur staat er twee keer:
als token, want daar stuurt het thema van Gravity Forms de labels mee aan, en
als gewone regel voor de plekken waar dat token niet gebruikt wordt. */
.gform_wrapper.ww-stapform {
--gf-ctrl-label-color-primary: #000;
--gf-ctrl-label-color-secondary: #000;
}
.gform_wrapper.ww-stapform .ww-fstap .gfield_label,
.gform_wrapper.ww-stapform .ww-fstap .gform-field-label {
font-size: 12px;
line-height: 18px;
text-transform: uppercase;
letter-spacing: 0.025em;
color: #000;
}
/* Rechte hoeken en een zwarte rand, zoals de kaders elders op de site. De
afgeronde hoeken en de beige rand komen uit de beheeromgeving, waar ze tussen
de panelen van WordPress thuishoren. */
.gform_wrapper.ww-stapform .ww-fstap {
border-radius: 0;
border-color: #000;
}
.gform_wrapper.ww-stapform .ww-fstap__nummer {
border-radius: 0;
}
.gform_wrapper.ww-stapform .ww-fstap__titel {
text-transform: uppercase;
letter-spacing: 0.025em;
}
/* ---------------------------------------------------------------
Vinkjes en keuzerondjes zichtbaar maken, feedback 13-08-2026
Ze waren nauwelijks te zien: een vakje van dertien pixels met de
lichtgrijze rand die de browser er standaard omheen tekent. Op een
telefoon is dat nauwelijks te raken en op een lichte achtergrond
nauwelijks te vinden.
Dat kwam doordat we appearance op auto forceerden (zie het blok
"Dubbel vinkje op de checkboxen" hierboven). Dan tekent de browser
het vakje, en over de maat en de rand daarvan hebben we niets te
zeggen: alleen accent-color pakt.
Nu andersom. appearance staat uit, dus Gravity Forms tekent het
vakje zelf, en dat volgt onze eigen tokens. Het glyph dat we destijds
hadden uitgezet mag daardoor terug: er staat nu geen tweede,
systeemeigen vinkje meer onder, dus dubbel kan het niet meer.
Aangevinkt wordt het vakje helemaal roze met een wit vinkje. Een dun
gekleurd vinkje op wit leest van een afstand als leeg.
--------------------------------------------------------------- */
.gform_wrapper.gform-theme,
.gform_wrapper.gform-theme--framework {
--gf-ctrl-choice-size: 24px;
--gf-ctrl-choice-size-sm: 24px;
--gf-ctrl-choice-size-md: 24px;
--gf-ctrl-choice-size-lg: 24px;
--gf-ctrl-checkbox-check-size: 15px;
--gf-ctrl-checkbox-check-size-md: 15px;
--gf-ctrl-radio-check-size: 11px;
--gf-ctrl-radio-check-size-md: 11px;
}
.gform_wrapper input[type=checkbox],
.gform_wrapper input[type=radio],
.gform_wrapper .gfield-choice-input {
-webkit-appearance: none !important;
appearance: none !important;
inline-size: 24px !important;
block-size: 24px !important;
width: 24px !important;
height: 24px !important;
min-width: 24px;
min-height: 24px !important;
flex: 0 0 auto;
margin: 0;
padding: 0;
background-color: #fff;
border: 2px solid #000 !important;
box-shadow: none;
cursor: pointer;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.gform_wrapper input[type=checkbox],
.gform_wrapper .gfield-choice-input[type=checkbox] {
border-radius: 0 !important;
}
.gform_wrapper input[type=radio],
.gform_wrapper .gfield-choice-input[type=radio] {
border-radius: 50% !important;
}
/* Het vinkje van Gravity Forms mag weer meedoen, zie de toelichting boven. */
.gform_wrapper.gform-theme input[type=checkbox]::before,
.gform_wrapper.gform-theme input[type=radio]::before,
.gform_wrapper.gform-theme .gfield-choice-input::before {
content: "" !important;
display: block !important;
}
.gform_wrapper.gform-theme input[type=checkbox]::before,
.gform_wrapper.gform-theme .gfield-choice-input[type=checkbox]::before {
content: var(--gf-icon-ctrl-checkbox) !important;
}
.gform_wrapper input[type=checkbox]:checked,
.gform_wrapper .gfield-choice-input[type=checkbox]:checked {
background-color: #ff3d3d;
}
.gform_wrapper input[type=checkbox]:checked::before,
.gform_wrapper .gfield-choice-input[type=checkbox]:checked::before {
color: #fff !important;
}
.gform_wrapper input[type=checkbox]:focus-visible,
.gform_wrapper input[type=radio]:focus-visible,
.gform_wrapper .gfield-choice-input:focus-visible {
outline: 3px solid #ff3d3d;
outline-offset: 2px;
}
/* De keuze zelf mag ook aanklikbaar zijn, niet alleen het vakje. Op een
telefoon is een label van twintig pixels hoog een te klein doel. */
.gform_wrapper .gfield_checkbox .gchoice label,
.gform_wrapper .gfield_radio .gchoice label,
.gform_wrapper .gfield--type-choice .gchoice label {
cursor: pointer;
align-self: center;
font-size: 16px;
line-height: 24px;
color: #000;
}
/* ---------------------------------------------------------------
Keuzes staan nu als knopjes onder elkaar, feedback 13-08-2026
"Soort activiteit" en "Wat voor soort organisatie" waren uitklap-
lijsten. Nu alle antwoorden zichtbaar zijn hebben ze ook lucht
nodig: negen regels die tegen elkaar aan plakken lezen als een
muur. Bewust allemaal onder elkaar en niet in twee kolommen: bij een
kolommenrij weet je niet of je van links naar rechts of van boven naar
beneden moet lezen, en de langere antwoorden breken dan af.
--------------------------------------------------------------- */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
display: grid;
gap: 10px;
}
.gform_wrapper .gfield_radio .gchoice,
.gform_wrapper .gfield_checkbox .gchoice {
margin-bottom: 0;
align-items: center;
}
/* ---------------------------------------------------------------
De uitleg boven het vakje, feedback 13-08-2026
De hulpteksten stonden onder het invulvak. Daar lees je ze pas als je
al iets hebt ingevuld, en op een telefoon vallen ze onder de vouw.
Ze staan nu direct naast de vraag, boven het vak waar het over gaat.
--------------------------------------------------------------- */
.gform_wrapper.ww-stapform .gfield_description {
margin: 0 0 8px;
padding: 0 0 0 12px;
border-left: 3px solid #ffbf3d;
font-size: 14px;
line-height: 1.5;
color: #4a443c;
}
.gform_wrapper.ww-stapform .gfield_description.validation_message {
border-left-color: #ff3d3d;
color: #b3241f;
font-weight: 700;
}
/* ---------------------------------------------------------------
Buurtagenda: knop vlak onder zijn eigen tekst, feedback 13-08-2026
De twee actiekaarten boven het meedoen-blok kregen hun knop met
margin-top: auto, dus die werd naar de onderrand van de kaart
geduwd. Omdat de kaarten in een grid even hoog zijn en de ene
tekst veel korter is dan de andere, ontstond daar een gat van
soms meer dan honderd pixels tussen tekst en knop. Een vaste,
kleinere marge zet de knop weer bij de tekst waar hij bij hoort,
net als bij de andere blokken op de site.
--------------------------------------------------------------- */
.info-card__btn {
margin-top: 1.5rem;
}
/* De call-to-action in het meedoen-blok ("Zet jouw activiteit op de
buurtagenda") volgt dezelfde afstand als de kaarten hierboven. */
.steps__btn {
margin-top: 1.75rem;
align-self: flex-start;
}
/* ===============================================================
Gravity Forms, sitebreed — feedback 13-08-2026
Deze regels gelden voor elk formulier op de site (contact, idee
insturen, activiteit aanmelden, organisatie aanmelden en wat er
later bij komt). Bewust niet per formulier-ID: een regel op een ID
breekt zodra iemand een formulier opnieuw aanmaakt.
=============================================================== */
/* ---------------------------------------------------------------
1. Precies één sterretje achter een verplicht veld
Er stonden er drie. Gravity Forms zet zijn eigen sterretje neer in
deze opbouw:
*
De klasse staat dus twee keer, op de buitenste en de binnenste
span. Onze eigen ::before-regel met content:'*' matchte ze allebei
en zette er twee bij, bovenop het echte sterretje in de tekst van
de binnenste span. Drie.
De vorige poging zette content:none, maar alleen onder
.gfield_label en .gform-field-label. Bij een radiogroep of een
vinkveld staat het label in een