.bcm-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .bcm-public { padding: 0 0 clamp(2.5rem, 5vw, 4.5rem); } .bcm-public__shell { width: min(1560px, calc(100% - clamp(1.25rem, 5vw, 5rem))); margin: 0 auto; } .bcm-public__shell > .portal-mobile-switchboard-v147 { margin-bottom: 1.2rem; } [data-fr-body] .bcm-public__shell { width: 100%; } .bcm-public__content { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem); } .bcm-eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .45rem; color: var(--portal-primary); font-family: var(--portal-font-sans); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .bcm-directory__hero h1 { margin: 0; color: var(--portal-heading); font-family: var(--portal-font-serif); font-weight: 500; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; letter-spacing: -.02em; } .bcm-directory__hero h1 em { font-style: italic; color: var(--portal-primary); } .bcm-directory__intro { max-width: 44rem; margin: .55rem 0 0; color: var(--portal-text); font-size: 1.02rem; line-height: 1.5; } .bcm-toolbar { display: flex; flex-direction: column; gap: .95rem; padding: clamp(.9rem, 2vw, 1.15rem); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-card); background: var(--portal-surface); box-shadow: 0 1px 2px rgba(35, 37, 42, .04); } .bcm-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; } .bcm-search { position: relative; flex: 1 1 220px; min-width: 180px; display: flex; align-items: center; } .bcm-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--portal-muted); pointer-events: none; } .bcm-search input { width: 100%; padding: .7rem .9rem .7rem 2.3rem; border: 1px solid var(--portal-border-strong); border-radius: var(--portal-radius-btn); background: var(--portal-surface); color: var(--portal-heading-ink); font: inherit; } .bcm-search input::placeholder { color: var(--portal-muted); } .bcm-search input:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 1px; border-color: var(--portal-primary); } .bcm-select { padding: .7rem .8rem; border-radius: var(--portal-radius-btn); border: 1px solid var(--portal-border-strong); background: var(--portal-surface); color: var(--portal-heading-ink); font: inherit; font-weight: 600; cursor: pointer; max-width: 100%; min-width: 0; } .bcm-select:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 1px; } .bcm-toggle { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding: .7rem .95rem; border-radius: var(--portal-radius-btn); border: 1px solid var(--portal-border-strong); background: var(--portal-surface); color: var(--portal-heading-ink); font: inherit; font-weight: 700; cursor: pointer; } .bcm-toggle__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--portal-open-dot); flex: 0 0 auto; } .bcm-toggle__count { padding: .12rem .45rem; border-radius: var(--portal-radius-pill); font-size: .78rem; font-weight: 700; background: var(--portal-open-soft); color: var(--portal-open); } .bcm-toggle.is-active { background: var(--portal-heading); border-color: var(--portal-heading); color: var(--portal-surface); } .bcm-toggle.is-active .bcm-toggle__count { background: rgba(255, 255, 255, .22); color: var(--portal-surface); } .bcm-toggle:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 2px; } .bcm-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .bcm-chips--places { border-top: 1px solid var(--portal-border-soft); padding-top: .85rem; } .bcm-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: var(--portal-radius-pill); border: 1px solid var(--portal-border-strong); background: var(--portal-surface); color: var(--portal-text); font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer; } .bcm-chip__count { padding: .1rem .42rem; border-radius: var(--portal-radius-pill); font-size: .74rem; font-weight: 700; background: var(--portal-chip); color: var(--portal-text-soft); } .bcm-chip.is-active { background: var(--portal-heading); border-color: var(--portal-heading); color: var(--portal-surface); } .bcm-chips--places .bcm-chip.is-active { background: var(--portal-primary); border-color: var(--portal-primary); } .bcm-chip.is-active .bcm-chip__count { background: rgba(255, 255, 255, .2); color: var(--portal-surface); } .bcm-chip:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 2px; } .bcm-dropdowns { display: none; gap: .6rem; flex-wrap: wrap; } .bcm-dropdowns .bcm-select { flex: 1 1 150px; } .bcm-toolbar__melden { margin: 0; font-family: var(--portal-font-sans); font-size: .92rem; color: var(--portal-muted); } .bcm-toolbar__melden a { color: var(--portal-primary); font-weight: 600; } .bcm-verantwoording { margin: 1.75rem 0 0; padding: 1.25rem 1.4rem; border: 1px solid var(--portal-border-strong); border-radius: var(--portal-radius, 12px); background: var(--portal-surface); font-size: 0.845rem; line-height: 1.65; } .bcm-verantwoording h2 { margin: 0 0 0.625rem; font-size: 0.9375rem; letter-spacing: 0.02em; } .bcm-verantwoording p { margin: 0 0 0.625rem; } .bcm-verantwoording p:last-child { margin-bottom: 0; } .bcm-verantwoording a { color: inherit; text-decoration: underline; } .bcm-verantwoording-bron { padding: 0.5rem 0.75rem; border-radius: var(--portal-radius-btn, 8px); background: var(--portal-surface-tint); overflow-wrap: anywhere; } .bcm-verantwoording-contact { padding-top: 0.625rem; border-top: 1px solid var(--portal-border); } .bcm-oproep { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; padding: 1.5rem 1.6rem; border: 1px solid var(--portal-border-strong); border-radius: var(--portal-radius, 12px); background: var(--portal-surface-soft); } .bcm-oproep__tekst { flex: 1 1 320px; min-width: 0; } .bcm-oproep__tekst h2 { margin: 0 0 .4rem; font-family: var(--portal-font-serif); color: var(--portal-heading-ink); } .bcm-oproep__tekst p:last-child { margin: 0; font-family: var(--portal-font-sans); color: var(--portal-muted); max-width: 58ch; } .bcm-oproep__knoppen { display: flex; gap: .7rem; flex-wrap: wrap; } .bcm-section { display: grid; gap: 1rem; } .bcm-section__head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; } .bcm-section__head h2 { margin: 0; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 500; font-size: clamp(1.3rem, 3vw, 1.6rem); letter-spacing: -.01em; } .bcm-section__meta { color: var(--portal-muted); font-size: .95rem; } .bcm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.35rem); } @media (min-width: 2400px) { [data-fr-body] .bcm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 3200px) { [data-fr-body] .bcm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .bcm-card[hidden], .bcm-section[hidden], .bcm-noresults[hidden], .bcm-toolbar[hidden] { display: none !important; } .bcm-card { display: flex; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-card); overflow: hidden; background: var(--portal-surface); box-shadow: 0 1px 2px rgba(35, 37, 42, .04); transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; } .bcm-card:hover, .bcm-card:focus-within { box-shadow: var(--portal-shadow-card-hover); border-color: var(--portal-border-strong); transform: translateY(-3px); } .bcm-card__link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; } .bcm-card__link:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: -2px; } .bcm-card__link[aria-busy="true"] { cursor: progress; } .bcm-card__link[aria-busy="true"] .bcm-card__body { opacity: .55; } .bcm-card__link[aria-busy="true"] .bcm-card__cta { animation: bcm-wacht .9s ease-in-out infinite alternate; } @keyframes bcm-wacht { from { opacity: .35; } to { opacity: 1; } } .bcm-card__body { display: flex; flex-direction: column; gap: .68rem; flex: 1; padding: 17px 18px 15px; } .bcm-card__head { display: flex; flex-direction: column; gap: .18rem; } .bcm-card__name { color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; } .bcm-card__sub { color: var(--portal-muted); font-size: .81rem; overflow-wrap: anywhere; } .bcm-card__status { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } .bcm-card__desc { margin: 0; color: var(--portal-text); font-size: .875rem; line-height: 1.55; flex: 1; } .bcm-card__tags { display: flex; flex-wrap: wrap; gap: .375rem; } .bcm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--portal-border-soft); } .bcm-card__cta { display: inline-flex; align-items: center; gap: .35rem; color: var(--portal-primary); font-weight: 600; font-size: .81rem; } .bcm-card__gids { color: var(--portal-mono-faint); font-size: .75rem; } .bcm-cover { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--portal-surface-soft); background-image: repeating-linear-gradient(135deg, rgba(35, 37, 42, .04) 0, rgba(35, 37, 42, .04) 1px, transparent 1px, transparent 11px); border-bottom: 1px solid var(--portal-chip-border); } .bcm-cover__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .bcm-cover--photo .bcm-cover__monogram { display: none; } .bcm-cover__featured, .bcm-cover__logo { position: relative; z-index: 1; } .bcm-cover--card { height: 128px; } .bcm-cover--quick { height: 150px; } .bcm-cover--quick .bcm-cover__featured { top: 14px; right: 56px; padding: 6px 10px; } .bcm-cover--detail { aspect-ratio: 1040 / 240; height: auto; min-height: 200px; max-height: 360px; } .bcm-cover__monogram { display: inline-flex; align-items: center; justify-content: center; font-family: var(--portal-font-serif); font-weight: 700; letter-spacing: .01em; color: var(--portal-primary); background: var(--portal-surface, #fff); border: 1px solid var(--portal-chip-border); border-radius: 50%; box-shadow: 0 1px 3px rgba(20, 24, 35, .08); } .bcm-cover--card .bcm-cover__monogram { width: 72px; height: 72px; font-size: 38px; } .bcm-cover--quick .bcm-cover__monogram { width: 82px; height: 82px; font-size: 44px; } .bcm-cover--detail .bcm-cover__monogram { width: 128px; height: 128px; font-size: 66px; } .bcm-cover--detail .bcm-cover__featured { top: 16px; right: 18px; padding: 6px 10px; } .bcm-cover__logo { max-height: 58%; max-width: 62%; object-fit: contain; padding: 10px 14px; background: #fff; border: 1px solid var(--portal-chip-border); border-radius: 8px; box-shadow: 0 1px 3px rgba(20, 24, 35, .08); } .bcm-cover__featured { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: .3rem; padding: 5px 9px; border-radius: var(--portal-radius-pill); font-family: var(--portal-font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--portal-accent); color: var(--portal-heading); } .bcm-cat--winkels { background-color: var(--portal-cat-winkels); } .bcm-cat--horeca { background-color: var(--portal-cat-horeca); } .bcm-cat--zorg { background-color: var(--portal-cat-zorg); } .bcm-cat--sport { background-color: var(--portal-cat-sport); } .bcm-cat--diensten { background-color: var(--portal-cat-diensten); } .bcm-cat--verblijf { background-color: var(--portal-cat-verblijf); } .bcm-cat--winkels .bcm-cover__monogram { color: var(--portal-primary); } .bcm-cat--horeca .bcm-cover__monogram { color: var(--portal-accent); } .bcm-cat--zorg .bcm-cover__monogram { color: var(--portal-open); } .bcm-cat--sport .bcm-cover__monogram { color: var(--portal-stripe-5); } .bcm-cat--diensten .bcm-cover__monogram { color: var(--portal-stripe-3); } .bcm-cat--verblijf .bcm-cover__monogram { color: var(--portal-stripe-4); } .bcm-status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border-radius: var(--portal-radius-pill); font-size: .78rem; font-weight: 600; } .bcm-status-pill.is-open { background: var(--portal-open-soft); color: var(--portal-open); } .bcm-status-pill.is-open .bcm-status-dot { background: var(--portal-open-dot); } .bcm-status-pill.is-closed { background: var(--portal-closed-soft); color: var(--portal-closed); } .bcm-status-pill.is-closed .bcm-status-dot { background: var(--portal-closed-dot); } .bcm-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .bcm-status-note { color: var(--portal-text-soft); font-size: .8rem; } .bcm-tag { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--portal-chip-border); background: var(--portal-chip); color: var(--portal-text-soft); font-size: .72rem; font-weight: 500; } .bcm-empty { display: flex; align-items: flex-start; gap: 1rem; padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-card); background: var(--portal-surface-soft); } .bcm-empty__icon { display: grid; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 14px; background: var(--portal-primary-soft); color: var(--portal-primary); font-size: 1.2rem; } .bcm-empty h2 { margin: .05rem 0 .35rem; color: var(--portal-heading); font-family: var(--portal-font-serif); font-weight: 500; font-size: 1.2rem; } .bcm-empty p { margin: 0; color: var(--portal-text); line-height: 1.6; } .bcm-noresults { text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 1.2rem; border: 1px dashed var(--portal-border-dashed); border-radius: var(--portal-radius-card); background: var(--portal-surface-soft); } .bcm-noresults__title { color: var(--portal-heading); font-family: var(--portal-font-serif); font-weight: 500; font-size: 1.2rem; } .bcm-noresults p { margin: .5rem 0 1rem; color: var(--portal-text); } .bcm-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; border-radius: var(--portal-radius-btn); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .bcm-btn--primary { background: var(--portal-heading); color: var(--portal-surface); } .bcm-btn--primary:hover { background: var(--portal-primary); color: var(--portal-surface); } .bcm-btn--ghost { background: var(--portal-surface); color: var(--portal-heading); border-color: var(--portal-border-strong); } .bcm-btn--ghost:hover { border-color: var(--portal-primary); color: var(--portal-primary); } .bcm-btn:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 2px; } .bcm-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .bcm-actions__empty { margin: 0; color: var(--portal-text-soft); font-size: .92rem; } .bcm-actions--quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; align-items: stretch; } .bcm-actions--quick > * { justify-content: flex-start; width: 100%; min-width: 0; } .bcm-actions--quick .bcm-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 520px) { .bcm-actions--quick { grid-template-columns: minmax(0, 1fr); } } .bcm-eml-reveal { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .bcm-eml-out a { color: var(--portal-primary); font-weight: 600; } .bcm-pending { font-style: italic; color: var(--portal-muted); } .bcm-noscript { display: flex; align-items: flex-start; gap: .5rem; margin: .8rem 0 0; padding: .8rem .9rem; border-radius: 12px; background: var(--portal-primary-soft); color: var(--portal-accent-deep); font-size: .9rem; line-height: 1.5; } .bcm-hours, .bcm-factlist { margin: 0; display: flex; flex-direction: column; } .bcm-hours > div, .bcm-factlist > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--portal-border-soft); font-size: 14px; line-height: 1.35; } .bcm-hours > div:last-child, .bcm-factlist > div:last-child { border-bottom: 0; } .bcm-hours dt, .bcm-factlist dt { margin: 0; color: var(--portal-text-soft); } .bcm-hours dd, .bcm-factlist dd { margin: 0; color: var(--portal-heading-ink); font-weight: 600; text-align: right; } .bcm-hours .is-closed dd { color: var(--portal-danger); } .bcm-modal:not(.show):not(.is-open) { display: none; } .bcm-modal.is-open { display: flex; position: fixed; inset: 0; z-index: 1200; align-items: center; justify-content: center; padding: clamp(.8rem, 4vw, 2rem); background: rgba(10, 16, 32, .55); overflow-y: auto; overscroll-behavior: contain; } .bcm-modal .modal-dialog { width: 100%; max-width: 920px; max-height: 100%; margin: auto; } .bcm-modal:not(.is-open) .modal-dialog { max-width: min(920px, calc(100% - 1.5rem)); max-height: calc(100% - 1.5rem); margin: .75rem auto; } .bcm-modal .modal-dialog, .bcm-modal [data-bcm-modal-content], .bcm-modal .bcm-quick { display: flex; flex-direction: column; min-height: 0; } .bcm-modal [data-bcm-modal-content] { flex: 1 1 auto; } .bcm-modal .bcm-quick__hero { flex: 0 0 auto; } .bcm-modal .bcm-quick__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } @media (min-width: 900px) { .bcm-modal .bcm-cover--quick { height: 210px; } } html.bcm-modal-open, html.bcm-modal-open body { overflow: hidden; overscroll-behavior-y: none; touch-action: pan-y pinch-zoom; } .bcm-modal .modal-content { display: flex; flex-direction: column; min-height: 0; width: 100%; max-height: 100%; overflow: hidden; border: 1px solid var(--portal-border); border-radius: 20px; background: var(--portal-surface); color: var(--portal-heading-ink); box-shadow: var(--portal-shadow-modal); } .bcm-quick__hero { position: relative; } .bcm-quick__close { position: absolute; top: .75rem; right: .75rem; z-index: 2; display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border: 1px solid var(--portal-border); border-radius: 50%; background: rgba(255, 254, 251, .92); color: var(--portal-heading); cursor: pointer; } .bcm-quick__close:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 2px; } .bcm-quick__body { padding: clamp(1.2rem, 3vw, 1.6rem); display: flex; flex-direction: column; gap: .8rem; } .bcm-quick__title { margin: 0; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 500; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.02em; } .bcm-quick__sub { margin: 0; color: var(--portal-muted); } .bcm-quick__status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; } .bcm-quick__desc { margin: 0; color: var(--portal-text); line-height: 1.65; } .bcm-quick__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.2rem; margin-top: .3rem; } .bcm-quick__block h3 { margin: 0 0 .55rem; color: var(--portal-accent-deep); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .bcm-quick__footer { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: .5rem; padding-top: .9rem; border-top: 1px solid var(--portal-border-soft); } .bcm-quick__source { display: inline-flex; align-items: flex-start; gap: .4rem; color: var(--portal-text-soft); font-size: .82rem; } .bcm-quick__full { display: inline-flex; align-items: center; gap: .35rem; color: var(--portal-primary); font-weight: 600; text-decoration: none; white-space: nowrap; } .bcm-quick__full:hover { text-decoration: underline; } .bcm-detail .bcm-public__shell { width: min(1040px, calc(100% - clamp(1.25rem, 5vw, 5rem))); } [data-fr-body] .bcm-detail .bcm-public__shell { width: 100%; } .bcm-detail__main { display: grid; gap: 22px; } .bcm-detail__hero { border: 1px solid var(--portal-border); border-radius: 18px; overflow: hidden; background: var(--portal-surface); } .bcm-detail__heading { padding: 26px 30px 28px; display: grid; gap: 18px; } .bcm-detail__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .bcm-detail__title-main { display: flex; align-items: center; gap: 16px; min-width: 0; } .bcm-detail__logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--portal-surface); border: 1px solid var(--portal-border); } .bcm-detail__logo img { max-width: 82%; max-height: 82%; object-fit: contain; } .bcm-detail__title-col { min-width: 0; } .bcm-detail__title-col h1 { margin: 0 0 6px; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: -.015em; overflow-wrap: break-word; hyphens: auto; } .bcm-detail__meta { margin: 0; color: var(--portal-muted); font-size: 15px; line-height: 1.4; } .bcm-detail__aka { margin: 5px 0 0; color: var(--portal-muted-faint); font-size: 13px; line-height: 1.4; } .bcm-detail__aka span { color: var(--portal-text-soft); font-weight: 500; } .bcm-detail__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bcm-detail__status .bcm-status-pill { padding: 8px 13px; font-size: 13px; } .bcm-detail__status .bcm-status-dot { width: 8px; height: 8px; } .bcm-detail__status .bcm-status-note { color: var(--portal-text-soft); font-size: 13px; font-weight: 500; } .bcm-detail__lead { margin: 0; color: var(--portal-text); font-size: 16px; line-height: 1.65; max-width: 720px; } .bcm-detail__sbi { display: grid; gap: 9px; justify-items: start; } .bcm-detail__sbi-label { color: var(--portal-muted-faint); font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .bcm-detail__sbi-tags { display: flex; flex-wrap: wrap; gap: 7px; } .bcm-sbi { font-size: 12px; line-height: 1.4; font-weight: 500; padding: 6px 10px; gap: .35em; } .bcm-sbi b { color: var(--portal-primary); font-weight: 700; } .bcm-sbi__main { color: var(--portal-muted-faint); font-weight: 500; } .bcm-detail__panel { padding: 24px 26px; border: 1px solid var(--portal-border); border-radius: 18px; background: var(--portal-surface); } .bcm-detail__panel--wide { padding: 24px 30px; } .bcm-detail__panel h2 { margin: 0 0 16px; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 500; font-size: 22px; line-height: 1; } .bcm-detail__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .bcm-detail__panel-head h2 { margin: 0; } .bcm-detail__panel-meta { color: var(--portal-muted-faint); font-size: 12px; font-weight: 500; } .bcm-detail__about { margin: 0; color: var(--portal-text); font-size: 15px; line-height: 1.7; max-width: 760px; } .bcm-detail__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; } .bcm-detail__source-note { margin: 14px 0 0; color: var(--portal-muted-faint); font-size: 11.5px; line-height: 1.5; } .bcm-detail__kvk-note { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; color: var(--portal-muted); font-size: 11.5px; line-height: 1.45; } .bcm-kvk-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: rgb(238, 241, 250); color: rgb(30, 58, 138); font-family: var(--portal-font-sans); font-size: 8.5px; font-weight: 700; line-height: 1; } .bcm-detail__blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; align-items: stretch; } .bcm-block { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-card); background: var(--portal-surface); } .bcm-block__kicker { margin: 0 0 14px; color: rgb(154, 147, 133); font-family: var(--portal-font-sans); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .bcm-block__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .bcm-block__head .bcm-block__kicker { margin: 0; } .bcm-block__contact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--portal-heading-ink); } .bcm-detail__address { margin: 0; } .bcm-detail__tel { align-self: flex-start; padding: 16px 0 12px; margin: -16px 0 -12px; } .bcm-detail__tel [data-bcm-tel-out] a { color: var(--portal-heading-ink); font-weight: 600; font-size: 14px; line-height: 1.4; text-decoration: none; border-bottom: 1px dotted rgb(200, 191, 168); } .bcm-detail__tel [data-bcm-tel-out] a:hover { color: var(--portal-primary); } .bcm-detail__eml { align-self: flex-start; padding-bottom: 9px; margin-bottom: -9px; } .bcm-detail__eml .bcm-eml-reveal { display: inline-flex; align-items: center; gap: .4rem; padding: 10px 14px; border-radius: 9px; cursor: pointer; border: 1px solid var(--portal-primary-soft-border); background: var(--portal-primary-soft); color: var(--portal-primary); font-family: var(--portal-font-sans); font-size: 13px; font-weight: 600; line-height: 1; } .bcm-detail__eml .bcm-eml-reveal:hover { background: rgb(243, 226, 216); } .bcm-detail__eml .bcm-eml-out a { color: var(--portal-primary); font-weight: 600; font-size: 14px; line-height: 1.4; } .bcm-contact-empty { color: var(--portal-muted); font-size: 13px; line-height: 1.55; background: var(--portal-surface-soft); border: 1px dashed var(--portal-border-dashed); border-radius: 10px; padding: 11px 13px; } .bcm-contact-empty a { color: var(--portal-primary); font-weight: 600; } .bcm-sociaal { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .bcm-sociaal a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 10px 14px; border-radius: 9px; text-decoration: none; border: 1px solid var(--portal-primary-soft-border); background: var(--portal-primary-soft); color: var(--portal-primary); font-family: var(--portal-font-sans); font-size: 13px; font-weight: 600; line-height: 1; } .bcm-sociaal a:hover, .bcm-sociaal a:focus-visible { border-color: var(--portal-primary); } .bcm-detail__mono-note { margin: 12px 0 0; color: var(--portal-mono-faint); font-family: var(--portal-font-mono); font-size: 10.5px; line-height: 1.5; } .bcm-block__ctas { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 16px; } .bcm-btn--block { display: block; text-align: center; padding: 13px 18px; border-radius: var(--portal-radius-btn); font-size: 14px; line-height: 1; } .bcm-btn--block.bcm-btn--primary:hover { background: rgb(15, 26, 48); color: var(--portal-surface); } .bcm-btn--route { padding: 12px 10px; border-radius: 10px; font-size: 13px; } .bcm-vac-pill { padding: 4px 9px; border-radius: var(--portal-radius-pill); background: rgb(233, 240, 247); color: var(--portal-stripe-5); font-size: 11px; font-weight: 600; line-height: 1; } .bcm-vac-item { display: block; padding: 10px 0; border-bottom: 1px solid var(--portal-border-soft); text-decoration: none; } .bcm-vac-item:last-of-type { border-bottom: 0; } .bcm-vac-item__title { display: block; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 600; font-size: 14px; line-height: 1.3; } .bcm-vac-item__meta { display: block; margin-top: 4px; color: var(--portal-muted); font-size: 12px; line-height: 1; } .bcm-vac-foot { display: block; text-align: center; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--portal-border-soft); color: var(--portal-primary); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; } .bcm-vac-foot:hover { color: var(--portal-primary-strong); } .bcm-block--claim { background: var(--portal-primary-soft); border-color: var(--portal-primary-soft-border); justify-content: center; } .bcm-block__claim-title { margin: 0 0 6px; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 600; font-size: 15px; line-height: 1.3; } .bcm-block--claim p { margin: 0 0 14px; color: rgb(107, 95, 87); font-size: 13px; line-height: 1.5; } .bcm-block__claim-cta { display: inline-block; align-self: flex-start; padding: 11px 18px; border-radius: 10px; background: var(--portal-primary); color: var(--portal-surface); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; } .bcm-block__claim-cta:hover { background: var(--portal-primary-strong); color: var(--portal-surface); } .bcm-block__claim-links { margin-top: 11px; } .bcm-block__claim-links a { color: var(--portal-primary); font-size: 12.5px; font-weight: 600; text-decoration: none; } .bcm-block__claim-links a:hover { color: var(--portal-primary-strong); } @media (prefers-reduced-motion: reduce) { .bcm-card { transition: none; } .bcm-card:hover, .bcm-card:focus-within { transform: none; } .bcm-card__link[aria-busy="true"] .bcm-card__cta { animation: none; opacity: .5; } } @media (max-width: 1080px) { .bcm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bcm-chips { display: none !important; } .bcm-dropdowns { display: flex; } } @media (max-width: 640px) { .bcm-grid { grid-template-columns: minmax(0, 1fr); } .bcm-toolbar__row { gap: .55rem; } .bcm-public__shell { width: 100%; } .bcm-toolbar { flex-direction: row; flex-wrap: wrap; gap: .5rem; align-items: stretch; } .bcm-toolbar__row, .bcm-dropdowns { display: contents; } .bcm-toolbar .bcm-search { flex: 1 1 100%; } .bcm-toolbar .bcm-toggle, .bcm-toolbar .bcm-select { flex: 1 0 auto; } .bcm-toolbar .bcm-toggle { min-width: max-content; } .bcm-toolbar .bcm-toolbar__melden { flex: 1 1 100%; } .bcm-cover--card:not(.bcm-cover--photo) { height: 74px; } .bcm-cover--card:not(.bcm-cover--photo) .bcm-cover__monogram { font-size: 40px; } } .bcm-directory .cms-bladeren { --cms-bladeren-marge: 1.4rem 0 0; --cms-bladeren-stand-kleur: var(--portal-text); } .bcm-directory .cms-bladeren .bcm-btn { padding-top: 0; padding-bottom: 0; } .bcm-wegwijzer { margin: 28px 0 0; } .bcm-wegwijzer__kop h2 { margin: 0; font-family: var(--portal-font-display, var(--portal-font-sans)); font-size: 1.35rem; color: var(--portal-heading, var(--portal-text)); } .bcm-wegwijzer__kop p { margin: .3rem 0 0; color: var(--portal-muted); font-size: .95rem; } .bcm-wegwijzer__grid { display: grid; gap: 14px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); } .bcm-wegwijzer__kaart { display: flex; flex-direction: column; gap: .55rem; padding: 18px; border: 1px solid var(--portal-border); border-radius: 10px; background: var(--portal-surface, #fff); text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .bcm-wegwijzer__kaart:hover { border-color: var(--portal-primary); transform: translateY(-2px); } .bcm-wegwijzer__icoon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; background: var(--portal-primary-soft, rgba(0, 0, 0, .05)); color: var(--portal-primary); font-size: 1.1rem; } .bcm-wegwijzer__tekst { display: flex; flex-direction: column; gap: .25rem; } .bcm-wegwijzer__tekst strong { color: var(--portal-heading, var(--portal-text)); font-size: 1rem; } .bcm-wegwijzer__tekst span { color: var(--portal-muted); font-size: .9rem; line-height: 1.55; } .bcm-wegwijzer__knop { margin-top: auto; color: var(--portal-primary); font-size: .88rem; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .bcm-wegwijzer__kaart { transition: none; } .bcm-wegwijzer__kaart:hover { transform: none; } } .bcm-tel-toon { padding: 0; border: 0; background: none; color: var(--portal-primary); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .bcm-tel-toon:hover { text-decoration-thickness: 2px; } .bcm-swipekop { display: none; } .bcm-modal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 10px 14px; border-top: 1px solid var(--portal-border); } .bcm-modal-nav button { min-height: 44px; padding: 8px 12px; color: var(--portal-heading-ink); background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: 8px; } .bcm-modal-nav button:disabled { opacity: .4; cursor: default; } .bcm-modal-nav span { font-size: 13px; color: var(--portal-muted); } @media (max-width: 1024px) { body:has(.dorps-onderbalk) #fr-main .bcm-public__content.bcm-directory { gap: 14px; } body:has(.dorps-onderbalk) #fr-main .bcm-directory__hero h1 { font-size: 27px; line-height: 1.15; } body:has(.dorps-onderbalk) #fr-main .bcm-directory__hero .bcm-eyebrow, body:has(.dorps-onderbalk) #fr-main .bcm-directory__uitleg, body:has(.dorps-onderbalk) #fr-main .bcm-toolbar__melden { display: none; } body:has(.dorps-onderbalk) #fr-main .bcm-directory__intro { font-size: 13px; margin: 4px 0 0; } body:has(.dorps-onderbalk) #fr-main .bcm-directory__intro:not(:has(> span + span)) { display: none; } body:has(.dorps-onderbalk) #fr-main .bcm-toolbar { padding: 10px; gap: 8px; } body:has(.dorps-onderbalk) #fr-main .bcm-search input { min-height: 48px; padding-top: 8px; padding-bottom: 8px; font-size: 16px; } body:has(.dorps-onderbalk) #fr-main .bcm-toggle, body:has(.dorps-onderbalk) #fr-main .bcm-select { min-height: 48px; padding-top: 8px; padding-bottom: 8px; } body:has(.dorps-onderbalk) #fr-main .bcm-section__head { margin-bottom: 8px; } body:has(.dorps-onderbalk) #fr-main .bcm-section__head h2 { font-size: 21px; } body:has(.dorps-onderbalk) #fr-main .cms-bladeren--boven { --cms-bladeren-marge-boven: 0 0 10px; } .bcm-swipekop { display: flex; align-items: center; justify-content: center; min-height: 28px; flex: 0 0 auto; touch-action: none; } .bcm-swipekop > span[aria-hidden] { width: 42px; height: 4px; border-radius: 2px; background: var(--portal-border); pointer-events: none; } .bcm-modal { z-index: 1400; } .bcm-modal.is-open { padding: 0; align-items: flex-end; overflow: hidden; } .bcm-modal .modal-dialog, .bcm-modal:not(.is-open) .modal-dialog { max-width: 100%; width: 100%; max-height: calc(100dvh - 12px); margin: auto 0 0; } .bcm-modal .modal-content { border-radius: 16px 16px 0 0; max-height: calc(100dvh - 12px); } .bcm-modal .bcm-cover--quick { height: 110px; } .bcm-modal .bcm-quick__body { touch-action: pan-y pinch-zoom; } .bcm-modal-nav { padding-bottom: max(10px, var(--veilige-onderrand, env(safe-area-inset-bottom, 0px))); } } .bcm-toolbar .bcm-search input, .bcm-toolbar .bcm-select, .bcm-toolbar .bcm-toggle { min-height: 48px; box-sizing: border-box; } .bcm-tel:has(.bcm-tel-toon) { cursor: pointer; } .bcm-vac-card__call { padding: 12px 0; margin: -12px 0; } .bcm-vac-card__apply { padding-top: 7px; margin-top: -7px; } .bcm-veeg-status:empty { display: none; } .bcm-veeg-status { position: absolute; z-index: 3; bottom: max(24px, var(--veilige-onderrand, env(safe-area-inset-bottom, 0px))); left: 50%; transform: translateX(-50%); margin: 0; padding: 10px 18px; border-radius: 24px; background: var(--portal-heading-ink); color: var(--portal-surface); white-space: nowrap; pointer-events: none; } .bcm-veeg-laden { padding: 28px; color: var(--portal-muted); } @media (max-width: 1024px) { .bcm-modal.show { overflow: hidden; } .bcm-modal .modal-dialog { position: relative; } .bcm-modal .modal-content.cms-swipe-dragging { animation: none; } .bcm-modal [data-swipe-handle] { user-select: none; -webkit-user-select: none; } .bcm-modal .bcm-veeg-voorbeeld { position: absolute; left: 0; pointer-events: none; animation: none; } } .bcm-ingangen { margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-card); } .bcm-ingangen summary { cursor: pointer; font-weight: 600; } .bcm-ingangen h2 { font-size: 1rem; margin-top: 1rem; } .bcm-ingangen ul { columns: 2 18rem; padding-left: 1.2rem; } .bcm-ingangen li, .bcm-verwant li { break-inside: avoid; overflow-wrap: anywhere; margin: .4rem 0; } .bcm-verwant p { overflow-wrap: anywhere; }
.bcm-mijn--narrow { max-width: 46rem; } .bcm-crumbs { margin: 0; font-size: 13px; font-weight: 500; color: var(--portal-muted); } .bcm-crumbs a { color: var(--portal-muted); text-decoration: none; font-weight: 500; } .bcm-crumbs a:hover { color: var(--portal-primary); } .bcm-mijn__hero h1 { margin: 0; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 500; font-size: clamp(28px, 4vw, 42px); line-height: 1.06; letter-spacing: -.015em; } .bcm-mijn__hero h1 em { font-style: italic; color: var(--portal-primary); } .bcm-mijn__intro { max-width: 600px; margin: 13px 0 0; color: rgb(85, 86, 91); font-size: 17px; line-height: 1.55; } .bcm-panel { background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: 18px; padding: 24px 28px; } .bcm-panel h2 { margin: 0 0 8px; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 500; font-size: 22px; line-height: 1.2; } .bcm-panel p { color: var(--portal-text); font-size: 14px; line-height: 1.6; } .bcm-panel__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .bcm-panel--ok { border-color: rgb(207, 229, 203); background: rgb(240, 247, 238); } .bcm-panel--info { border-color: var(--portal-border-strong); } .bcm-panel--warn { border-color: rgb(236, 208, 204); background: rgb(250, 241, 240); } .bcm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; border-radius: 10px; border: 1px solid var(--portal-border-strong); background: var(--portal-surface); color: var(--portal-heading-ink); font-weight: 600; font-size: 13.5px; line-height: 1; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .bcm-btn:hover { border-color: var(--portal-primary); color: var(--portal-primary); } .bcm-btn--primary { background: var(--portal-primary); border-color: var(--portal-primary); color: var(--portal-surface); } .bcm-btn--primary:hover { background: var(--portal-primary-strong); border-color: var(--portal-primary-strong); color: var(--portal-surface); } .bcm-formmsg { display: flex; align-items: flex-start; gap: 8px; padding: 11px 15px; border-radius: 11px; font-size: 13.5px; line-height: 1.5; } .bcm-formmsg--ok { background: var(--portal-open-soft); color: var(--portal-open); border: 1px solid rgb(211, 230, 208); } .bcm-formmsg--error { background: rgb(250, 241, 240); color: var(--portal-danger); border: 1px solid rgb(236, 208, 204); } .bcm-formmsg--info { background: var(--portal-surface-soft); color: var(--portal-text); border: 1px solid var(--portal-border); } .bcm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .bcm-field label, .bcm-field__inline { font-weight: 600; color: var(--portal-text); font-size: 13px; } .bcm-opt { color: var(--portal-muted); font-weight: 400; } .bcm-field__hint { color: var(--portal-muted-faint); font-size: 12px; line-height: 1.5; } .bcm-mijn input[type="text"], .bcm-mijn input[type="email"], .bcm-mijn input[type="time"], .bcm-mijn input[type="file"], .bcm-mijn textarea, .bcm-mijn select { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgb(226, 220, 205); background: var(--portal-surface); color: var(--portal-heading-ink); font: inherit; font-size: 14px; } .bcm-mijn input[type="time"], .bcm-mijn select { width: auto; } .bcm-mijn textarea { resize: vertical; } .bcm-mijn input:focus-visible, .bcm-mijn textarea:focus-visible, .bcm-mijn select:focus-visible { outline: none; border-color: var(--portal-primary); box-shadow: 0 0 0 3px rgba(192, 71, 46, .12); } .bcm-form__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; } .bcm-verifynote { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 14px; padding: 11px 13px; border-radius: 10px; background: var(--portal-surface-soft); border: 1px dashed var(--portal-border-dashed); color: var(--portal-text-soft); font-size: 13px; line-height: 1.55; } .bcm-verifynote .bi { color: var(--portal-primary); } @media (prefers-reduced-motion: reduce) { .bcm-btn { transition: none; } }