body { margin: 0; color: var(--e-global-color-text); font-family: var(--e-global-typography-text-font-family), Sans-serif; line-height: 1.5; } /* ================================================ FULLSCREEN ZOEKOVERLAY ================================================ */ .tg-search-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .tg-search-overlay.is-open { opacity: 1; visibility: visible; } .tg-search-overlay__inner { width: 90%; max-width: 700px; position: relative; } .tg-search-overlay__close { display: none !important; } .tg-search-overlay__label { color: rgba(255, 255, 255, 0.5); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 12px; } /* WordPress / Ivory Search form in overlay */ .tg-search-overlay .search-form, .tg-search-overlay form { display: flex; align-items: center; gap: 0; border-bottom: 2px solid rgba(255, 255, 255, 0.4); } /* Label wraps het inputveld — label is de flex-child */ .tg-search-overlay .search-form label, .tg-search-overlay form label { flex: 1 1 auto; min-width: 0; display: block; margin: 0; } .tg-search-overlay .search-field, .tg-search-overlay input[type="search"], .tg-search-overlay .is-search-input { width: 100% !important; display: block; background: transparent !important; border: none !important; color: #fff !important; font-size: 28px; font-family: var(--e-global-typography-text-font-family), Sans-serif; padding: 12px 0; outline: none; box-shadow: none !important; } /* Verberg browser-native clear-knop (blauw ×) */ .tg-search-overlay input[type="search"]::-webkit-search-cancel-button, .tg-search-overlay input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; } .tg-search-overlay .search-field::placeholder, .tg-search-overlay input[type="search"]::placeholder, .tg-search-overlay .is-search-input::placeholder { color: rgba(255, 255, 255, 0.35); } .tg-search-overlay .search-submit, .tg-search-overlay input.search-submit, .tg-search-overlay button[type="submit"], .tg-search-overlay input[type="submit"], .tg-search-overlay .is-search-submit { background: #fff !important; color: #000 !important; border: none !important; padding: 10px 24px !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer; flex-shrink: 0; margin-left: 0; transition: background 0.2s, color 0.2s; } .tg-search-overlay .search-submit:hover, .tg-search-overlay input.search-submit:hover, .tg-search-overlay button[type="submit"]:hover, .tg-search-overlay input[type="submit"]:hover, .tg-search-overlay .is-search-submit:hover { background: #e0e0e0 !important; color: #000 !important; } /* Verberg Ivory Search clear-knop (blauw kruisje) */ .tg-search-overlay .is-search-reset, .tg-search-overlay .is-search-clear, .tg-search-overlay .search-reset, .tg-search-overlay .search-clear, .tg-search-overlay button[type="reset"], .tg-search-overlay input[type="reset"], .tg-search-overlay [class*="reset"], .tg-search-overlay [class*="clear"] { display: none !important; } /* Zoekknop in navigatiemenu */ .tg-search-item { display: flex; align-items: center; } .tg-search-btn { background: none; border: none; outline: none; box-shadow: none; cursor: pointer; padding: 0 4px; display: flex; align-items: center; color: inherit; line-height: 1; } .tg-search-btn:focus, .tg-search-btn:focus-visible { outline: none; box-shadow: none; border: none; } /* ===================================================== ZOEKRESULTATEN — Elementor Archive Posts ===================================================== */ /* Minimale hoogte zodat footer niet aan header hangt */ body.search-results #page, body.search-no-results #page { min-height: 100vh; } /* Buitenste sectie: padding en container breedte */ body.search-results .elementor-element-e74ba0e { padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(56px, 7vw, 96px) !important; } body.search-results .elementor-element-e74ba0e > .e-con-inner { max-width: min(1140px, calc(100% - 64px)) !important; padding-left: 0 !important; padding-right: 0 !important; } /* Heading "Zoekresultaten" */ body.search-results .elementor-element-2c9ed0c .elementor-heading-title { font-family: "Titillium Web", Sans-serif !important; font-size: clamp(40px, 6vw, 64px) !important; font-weight: 700 !important; text-transform: uppercase !important; color: #000000 !important; line-height: 1 !important; margin-bottom: 40px !important; } /* Widget: geen eigen spatiëring */ body.search-results .elementor-element-cbe80f6 { padding: 0 !important; margin: 0 !important; } /* 1-kolom lijst */ body.search-results .elementor-widget-archive-posts .elementor-posts.elementor-grid { display: flex !important; flex-direction: column !important; gap: 20px !important; } /* Kaart: horizontaal grid zoals agenda */ body.search-results .elementor-post.elementor-grid-item { position: relative; display: grid; grid-template-areas: "label content"; grid-template-columns: 88px minmax(0, 1fr); align-items: stretch; border: 2px solid #000000; background: #ffffff; gap: 0; padding: 0; padding-right: 64px; overflow: hidden; transition: opacity 0.15s ease; } body.search-results .elementor-post.elementor-grid-item:hover { opacity: 0.85; } /* Elementor thumbnail verbergen */ body.search-results .elementor-post__thumbnail { display: none; } /* Gehele kaart klikbaar via overlay op de link */ body.search-results .elementor-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Post type label: zwarte linkerkolom zoals agenda datumblok (fallback voor alle types) */ body.search-results .elementor-post.elementor-grid-item::before { content: "Overige"; grid-area: label; display: flex; align-items: center; justify-content: center; align-self: stretch; background: #000000; color: #ffffff; padding: 16px 8px; margin: 0; border: none; font-family: "Titillium Web", Sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); min-height: 80px; } /* Type-specifieke labels — zelfde specificiteit, later in cascade = wint */ body.search-results .elementor-post.type-kennisbank::before { content: "Kennisbank"; } body.search-results .elementor-post.type-programma::before { content: "Programma"; } body.search-results .elementor-post.type-agenda::before { content: "Agenda"; } body.search-results .elementor-post.type-post::before { content: "Nieuws"; } body.search-results .elementor-post.type-nieuws::before { content: "Nieuws"; } body.search-results .elementor-post.type-page::before { content: "Pagina"; } /* Tekst wrapper */ body.search-results .elementor-post__text { grid-area: content; display: flex; flex-direction: column; justify-content: center; padding: 18px 24px; } /* Titel */ body.search-results .elementor-post__title { margin: 0 0 4px; } body.search-results .elementor-post__title a { font-family: "Titillium Web", Sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; color: #000000; text-decoration: none; } body.search-results .elementor-post__title a:hover { text-decoration: none; } /* Meta: datum */ body.search-results .tg-search-meta { margin: 0 0 6px; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: 14px; color: #4a4a4a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body.search-results .tg-search-meta .guifi-kennisbank-meta__separator ~ *, body.search-results .tg-search-meta .guifi-kennisbank-meta__separator { display: none !important; } /* Excerpt: 1 regel */ body.search-results .elementor-post__excerpt p { margin: 0; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: 14px; line-height: 1.55; color: #4a4a4a; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Pijl: rechts gecentreerd op kaardhoogte */ body.search-results .elementor-post.elementor-grid-item::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 1.5px solid rgba(0, 0, 0, 0.35); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg%20width%3D'14'%20height%3D'15'%20viewBox%3D'0%200%2019%2020'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%2011.7949V8.20513H13.3271L6.86714%202.53711L9.41857%200L19%208.77193V11.2011L9.41857%2020L6.86714%2017.4629L13.3271%2011.7949H0Z'%20fill%3D'black'%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px 15px; transition: background-color 0.25s ease, border-color 0.25s ease; } body.search-results .elementor-post.elementor-grid-item:hover::after { background-color: #000000; border-color: #000000; background-image: url("data:image/svg+xml,%3Csvg%20width%3D'14'%20height%3D'15'%20viewBox%3D'0%200%2019%2020'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%2011.7949V8.20513H13.3271L6.86714%202.53711L9.41857%200L19%208.77193V11.2011L9.41857%2020L6.86714%2017.4629L13.3271%2011.7949H0Z'%20fill%3D'white'%2F%3E%3C%2Fsvg%3E"); } /* Sorteer-balk */ .guifi-sort-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: 14px; color: #000000; } .guifi-sort-count { font-family: "Titillium Web", Sans-serif; font-size: 24px; font-weight: 700; color: #000000; } .guifi-sort-controls { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .guifi-sort-right { display: flex; align-items: center; gap: 8px; } .guifi-sort-label { white-space: nowrap; font-family: "Titillium Web", Sans-serif; font-size: 24px; font-weight: 700; color: #000000; } .guifi-sort-select { border: 1.5px solid #000000; background: #ffffff; padding: 5px 10px; font-family: inherit; font-size: 13px; color: #000000; cursor: pointer; outline: none; } .guifi-sort-select:focus { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); } /* Responsive: tablet */ @media (max-width: 1024px) { body.search-results .elementor-element-e74ba0e > .e-con-inner { max-width: calc(100% - 48px) !important; } } /* Responsive: mobiel */ @media (max-width: 767px) { body.search-results .elementor-element-e74ba0e > .e-con-inner { max-width: calc(100% - 32px) !important; } body.search-results .elementor-widget-archive-posts .elementor-posts.elementor-grid { gap: 12px !important; } /* Kaart: label boven, content eronder */ body.search-results .elementor-post.elementor-grid-item { grid-template-areas: "label" "content"; grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding-right: 0; } body.search-results .elementor-post.elementor-grid-item::before { writing-mode: horizontal-tb; transform: none; min-height: auto; padding: 6px 16px; font-size: 10px; align-self: auto; justify-content: flex-start; } body.search-results .elementor-post.elementor-grid-item::after { right: 14px; top: auto; bottom: 14px; transform: none; } body.search-results .elementor-post__text { padding: 12px 16px 48px; } body.search-results .elementor-post__title a { font-size: 15px; } .guifi-sort-bar { flex-direction: column; align-items: flex-start; } } /* Agenda thema-filter */ .guifi-agenda-filter-row { padding-top: 0 !important; padding-bottom: 0 !important; } .guifi-agenda-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0 24px; } .guifi-agenda-filter__btn { display: inline-flex; align-items: center; min-height: 37px; padding: 8px 18px; border: 2px solid #000000; color: #000000; background: #ffffff; font-family: "Titillium Web", Sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .guifi-agenda-filter__btn:hover, .guifi-agenda-filter__btn.is-active { background: #000000; color: #ffffff; text-decoration: none; } /* Gravity Forms submit button margin */ .gform_button.button { margin-top: 24px !important; } /* ================================================ PROJECTEN SLIDER SCROLLBAR ================================================ */ .projecten-slider-scrollbar { padding: 32px 0 0; width: 100%; pointer-events: none; } @media (min-width: 1025px) { .projecten-slider-scrollbar { margin-top: -80px; } } .projecten-slider-scrollbar .carousel-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; pointer-events: auto; border-radius: 0; outline: none; cursor: pointer; border: none; display: block; } /* Thumb is transparent but has the right width so it can be grabbed */ .projecten-slider-scrollbar .carousel-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--scrollbar-thumb-width, 60px); height: 4px; background: transparent; border: none; cursor: grab; } .projecten-slider-scrollbar .carousel-slider::-webkit-slider-thumb:active { cursor: grabbing; } .projecten-slider-scrollbar .carousel-slider::-moz-range-thumb { width: var(--scrollbar-thumb-width, 60px); height: 4px; background: transparent; border: none; cursor: grab; } .projecten-slider-scrollbar .carousel-slider::-ms-thumb { width: var(--scrollbar-thumb-width, 60px); height: 4px; background: transparent; border: none; cursor: grab; } #menubar-413 > ul > li.tg-search-item { border: none; outline: none; box-shadow: none; } @media (min-width: 1025px) { #menubar-413 > ul.e-n-menu-heading { gap: 8px; } } input, textarea { font-family: var(--e-global-typography-text-font-family), Sans-serif; } .header { min-width: 100%; } * { outline: none !important; } .header .elementor-widget-n-menu .e-n-menu-title-label-custom.e-link { cursor: pointer; color: #fff !important; } a { color: var(--e-global-color-accent); text-decoration: none; } a.elementor-element:hover { text-decoration: none; } p:last-child { margin-bottom: 0; } strong { font-weight: 600; } ul { padding-left: 15px; } .header.elementor-sticky--effects { /* box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1); */ /* background-color: var(--e-global-color-primary); */ } .elementor-widget-image a img[src$=".svg"] { width: auto; } p:empty, p { margin-top: 0; } h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.2; margin-bottom: 13px; } a { -webkit-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; outline: none !important; } a:hover { text-decoration: underline; } a:focus { outline: none; outline-offset: 0; } .elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:last-child a { padding-right: 0 !important; } img { display: block; } img.size-full { width: 100%; } .open-menu .elementor-icon-wrapper { display: flex; } .back-to-top { position: fixed; right: 30px; bottom: 30px; opacity: 0; transition: all 0.4s; cursor: pointer; } .back-to-top.show { opacity: 1; } .header .elementor-widget-theme-site-logo.elementor-widget-image img { width: 113px; transition: all 0.4s ease-out 0s; } .header.scroll .elementor-widget-theme-site-logo.elementor-widget-image img { width: 80px; } p.gform_required_legend { display: none; } .gform-theme--framework .gform_validation_errors { display: none; } /* topsport_gelderland */ .pl-container { padding-left: calc((100% - 1420px)/2); } .gform-theme--foundation .gfield textarea.large, .gform-theme--foundation .gfield .ginput_password.large, .gform-theme--foundation .gfield input.large, .gform-theme--foundation .gfield select.large { font-size: 20px; padding: 0 15px; height: 40px; color: #000; border-radius: 0; font-size: 14px; font-weight: normal; font-family: "DM Sans", Sans-serif; border: 2px solid; box-shadow: none; opacity: 1; } .gform-theme--foundation .gfield textarea.large { min-height: 186px; } .gform-theme--foundation .gfield textarea.large::placeholder, .gform-theme--foundation .gfield .ginput_password.large::placeholder, .gform-theme--foundation .gfield input.large::placeholder, .gform-theme--foundation .gfield select.large::placeholder { color: #000; opacity: 0.5; } .gform-theme--foundation .gform_fields { gap: 25px; } .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit], [type=button], [type=reset]).button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit], [type=button], [type=reset]):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) { background-color: var(--e-global-color-primary) !important; padding: 0 25px; border-radius: 0; font-weight: 400; font-size: 20px; letter-spacing: 1px; height: 40px; } .gform-footer.gform_footer.top_label { position: static; margin: 0; } .ml-auto { margin-left: auto !important; } .ratio-550-500 a, .ratio-550-500 img { object-fit: cover; aspect-ratio: 550/500; width: 100%; } .ratio-192-114 img { object-fit: contain; aspect-ratio: 114/192; width: 100%; } .ratio-500-300 img { width: 100%; object-fit: cover; aspect-ratio: 500/300; } .ratio-1058-400 img { width: 100%; object-fit: cover; aspect-ratio: 1058/400; } .ratio-150-150 img { width: 100%; object-fit: cover; aspect-ratio: 150/150; max-width: 150px; } .single-tax .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text a { font-size: 20px; line-height: 1.8; border: 1px solid #000; padding: 5px 15px; margin-right: 25px; display: inline-block; text-decoration: none; font-weight: 400; } .single-tax .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text a:hover { color: #fff; background: #000; } .single-tax span.elementor-post-info__terms-list { font-size: 0; } div#programmas-ajax { display: flex; padding: 50px 0; gap: 25px; align-items: flex-start; } div#programmas-ajax .programmas-content { width: 61.83%; display: flex; gap: 25px; } div#programmas-ajax .programmas-sidebar { width: calc(100% - 61.83% - 25px); border: 2px solid #000; padding: 25px; display: flex; gap: 25px; flex-flow: column; } #programmas-result { display: flex; gap: 25px; flex-flow: column; } #programmas-result .programma-item { display: flex; border: 2px solid #000; } #programmas-result .programma-item .programma-thumb { width: 38.26%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; } #programmas-result .programma-item .programma-thumb img, #programmas-result .programma-item .programma-thumb .programma-thumb__fallback { width: 100%; height: 100%; object-fit: cover; } #programmas-result .programma-item .programma-thumb .programma-thumb__fallback { position: absolute; inset: 0; display: block; background: linear-gradient(135deg, #f1f1f1, #d8d8d8); background-size: cover; background-position: center center; background-repeat: no-repeat; } #programmas-result .programma-item .programma-content { padding: 25px; width: calc(100% - 38.26%); color: #000; border-left: 2px solid #000; } #programmas-result .programma-item .programma-content h4 { font-size: 18px; } #programmas-result .programma-item:hover, #programmas-result .programma-item { text-decoration: none !important } #programmas-result .programma-item .elementor-widget-icon { text-align: right; font-size: 20px; } #programmas-result .programma-item .elementor-widget-icon svg { font-size: 20px; } #programmas-result .programma-item .the_excerpt { font-size: 16px; font-weight: var(--e-global-typography-c5053eb-font-weight); line-height: var(--e-global-typography-c5053eb-line-height); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .programmas-sidebar input#programma-search { width: 100%; padding: 5px 15px; border: 2px solid #000; font-size: 16px; color: #000; height: 40px; } .programmas-sidebar input#programma-search::placeholder { color: #00000080; } .programmas-sidebar .search-box { display: flex; } button#programma-search-btn { border: none; background: #000; border-radius: 0; padding: 0; width: 74px; text-align: center; display: flex; justify-content: center; } button#programma-search-btn img { width: 24px; } .sidebar-box h4 { font-size: 20px; font-weight: bold; } .label-custom { display: block; position: relative; padding-left: 35px; cursor: pointer; font-size: 18px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .label-custom+.label-custom { margin-top: 15px; } .label-custom input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .label-custom .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #fff; border: 2px solid #000; } .label-custom:hover input~.checkmark { background-color: #ccc; } .label-custom input:checked~.checkmark { background-color: #000; } .label-custom .checkmark:after { content: ""; position: absolute; display: none; } .label-custom input:checked~.checkmark:after { display: block; } .label-custom .checkmark:after { left: 8px; top: 4px; width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } a.programma-item+.ajax-pagination { display: none; } .ajax-pagination { display: flex; padding: 25px 0; align-items: center; justify-content: center; gap: 35px; } .ajax-pagination>.pagination-num { display: flex; align-items: center; justify-content: center; border: 2px solid transparent; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; } .ajax-pagination>.pagination-num:hover, .ajax-pagination>.pagination-num.active { border-color: #000; } .header .elementor-widget-n-menu .e-n-menu-title { transition: all 0.4s; } .header.scroll .elementor-widget-n-menu .e-n-menu-title { padding: 30px 0 } .header .elementor-widget-image a img[src$=".svg"] { transition: all 0.4s; width: 244px; } .header.scroll .elementor-widget-image a img[src$=".svg"] { width: 180px; } .home-projects .elementor-button-icon svg { font-size: 30px; margin-left: 5px; } .elementor-widget-button .elementor-button span { align-items: center; } .home-projects .swiper-wrapper .elementor-button-icon svg { font-size: 16px; margin-left: 5px; } .home-projects .elementor-button-link:hover .elementor-button-icon svg path { fill: #fff; } .home-projects .e-loop-item.e-con.e-flex>.e-con-inner { height: 100%; } .home-projects .elementor-widget-container, .home-projects .elementor-widget-loop-carousel { overflow: visible; } .home-projects .e-loop-item .elementor-widget-button { margin-top: auto; } .home-projects .info { flex: 1 1 auto; } .btn-white svg path { fill: #fff } .btn-white:hover svg path { fill: #000 } .btn-black:hover svg path { fill: #fff } /* Kennisbank kaarten hover animatie */ @media (min-width: 1025px) { .elementor-element.elementor-element-a140ec1, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px !important; } .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-38477a2, .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-855b249, .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-3aeb952, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.elementor-widget-heading, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.elementor-widget-text-editor, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.btn-white.elementor-widget-button { position: relative; z-index: 1; transition: transform 0.35s linear, opacity 0.3s linear, max-height 0.35s linear, margin 0.35s linear; } .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-38477a2, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.elementor-widget-heading { margin-bottom: 0; transform: translateY(14px); } .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-38477a2 .elementor-heading-title, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.elementor-widget-heading .elementor-heading-title { margin-bottom: 0; } .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-855b249 p, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.elementor-widget-text-editor p { margin: 0; } .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-855b249, .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-3aeb952, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.elementor-widget-text-editor, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.btn-white.elementor-widget-button { opacity: 0; max-height: 0; overflow: hidden; transform: translateY(18px); margin-top: 0 !important; margin-bottom: 0 !important; pointer-events: none; } .elementor-element.elementor-element-a140ec1:hover .elementor-element.elementor-element-38477a2, .elementor-element.elementor-element-a140ec1:focus-within .elementor-element.elementor-element-38477a2, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button):hover > .elementor-widget.elementor-widget-heading, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button):focus-within > .elementor-widget.elementor-widget-heading { transform: translateY(6px); margin-bottom: 8px; } .elementor-element.elementor-element-a140ec1:hover .elementor-element.elementor-element-855b249, .elementor-element.elementor-element-a140ec1:hover .elementor-element.elementor-element-3aeb952, .elementor-element.elementor-element-a140ec1:focus-within .elementor-element.elementor-element-855b249, .elementor-element.elementor-element-a140ec1:focus-within .elementor-element.elementor-element-3aeb952, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button):hover > .elementor-widget.elementor-widget-text-editor, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button):hover > .elementor-widget.btn-white.elementor-widget-button, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button):focus-within > .elementor-widget.elementor-widget-text-editor, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button):focus-within > .elementor-widget.btn-white.elementor-widget-button { opacity: 1; max-height: 200px; transform: translateY(0); pointer-events: auto; } } @media (max-width: 1024px) { .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-38477a2, .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-855b249, .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-3aeb952, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.elementor-widget-heading, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.elementor-widget-text-editor, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.btn-white.elementor-widget-button { opacity: 1; max-height: none; transform: none; pointer-events: auto; } .elementor-element.elementor-element-a140ec1 .elementor-element.elementor-element-38477a2, .elementor-element.e-con.e-child:has(> .elementor-widget.elementor-widget-heading + .elementor-widget.elementor-widget-text-editor + .elementor-widget.btn-white.elementor-widget-button) > .elementor-widget.elementor-widget-heading { margin-bottom: 8px; } } .ukirot-marquee-wrapper { overflow: hidden; } .ukirot-marquee-row { position: relative; overflow: hidden; } .ukirot-marquee-inner { display: inline-flex; align-items: center; gap: var(--gap); animation: marquee var(--duration) linear infinite; } .ukirot-marquee-row.reverse .ukirot-marquee-inner { animation-direction: reverse; } .ukirot-item img { /* height: var(--row-height); */ width: auto; display: block; max-width: none; object-fit: cover; } .ukirot-marquee-row.reverse .ukirot-item:first-child { margin-left: calc(var(--row-height)/2 * -1); } @keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } .ukirot-marquee-inner { display: flex; width: max-content; animation: marquee-left linear infinite; animation-duration: var(--duration); } .ukirot-marquee-wrapper.direction-right .ukirot-marquee-inner { animation-name: marquee-right; } .ukirot-item img { object-position: top; } .ukirot-item .ukirot-caption { margin: 0; font-family: "DM Sans", Sans-serif; font-size: 26px; font-weight: bold; color: #fff; position: absolute; bottom: 0; left: 0; padding: 30px 25px; width: 100%; } .ukirot-item { position: relative; } .ukirot-item .avatar { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .ukirot-item .avatar img { filter: none; width: 100%; height: 100%; } .ukirot-item .avatar::after { content: none; } .over-title .elementor-heading-title { -webkit-text-stroke: 2px #fff; text-stroke: 2px #fff; color: transparent !important; } .partners { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; align-items: center; } .partners .item { display: flex; align-items: center; justify-content: center; height: 90px; padding: 8px; } .partners .item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } @media (max-width: 1024px) { .partners { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; } } @media (max-width: 767px) { .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; } .partners .item { height: 80px; padding: 8px; } } .home-banner .slider-left { max-width: 358px !important; } .home-banner .slider-right { max-width: 725px !important; } .home-banner .slider-right img { width: 100%; object-fit: cover; aspect-ratio: 725/580; } .home-banner .slider-left img { width: 100%; object-fit: cover; aspect-ratio: 358/465; } .home-banner .elementor-widget-animated-headline .elementor-headline-plain-text { width: 100%; display: block; } @media (max-width:1600px) { .pl-container { padding-left: 25px; } } @media (max-width:1380px) { .header .elementor-widget-n-menu { display: none !important; } .header .open-menu { display: block !important; margin-left: auto; } .header .open-menu .elementor-icon-wrapper, .header .open-menu .elementor-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 45px !important; height: 45px !important; min-width: 45px !important; min-height: 45px !important; padding: 0 !important; } .header .open-menu .elementor-icon svg { width: 45px !important; height: 45px !important; min-width: 45px !important; min-height: 45px !important; max-width: 45px !important; max-height: 45px !important; display: block; } } @media (min-width:1201px) and (max-width:1600px) { .elementor-107 .elementor-element.elementor-element-3918b6e { padding: 25px 80px !important; } } @media (max-width:1200px) { .elementor-107 .elementor-element.elementor-element-3918b6e { padding: 25px 64px !important; } } @media (max-width:1024px) { .elementor-107 .elementor-element.elementor-element-3918b6e { padding: 25px !important; } .header .elementor-widget-image a img[src$=".svg"] { width: 157px; } .pl-container { padding-left: 25px; } .single .ratio-1058-400 { margin-left: -25px; width: calc(100% + 50px); max-width: calc(100% + 50px) !important; } .single-tax .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text a { margin-right: 5px; margin-bottom: 5px; } div#programmas-ajax { flex-flow: column; padding: 0 25px; } div#programmas-ajax .programmas-sidebar { width: 100%; } div#programmas-ajax .programmas-content { width: 100%; } .programmas-sidebar input#programma-search { height: 52px; font-size: 18px; } .home-banner .slider-right { max-width: 199px !important; } .home-banner .slider-right img { aspect-ratio: 199/342; } .home-projects .elementor-button-icon svg { font-size: 18px; margin-left: 5px; } } @media (max-width:767px) { #programmas-result .programma-item { flex-flow: column; } #programmas-result .programma-item .programma-thumb, #programmas-result .programma-item .programma-content { width: 100%; } #programmas-result .programma-item .programma-content { border-left: none; } #programmas-result .programma-item .the_excerpt { font-size: 16px; } .home-projects .swiper-wrapper .elementor-button-icon svg { font-size: 12px; margin-left: 5px; } /* --- Mobiel: projecten-slider strak — alle kaarten gelijke hoogte, knop netjes onder --- */ .home-projects .swiper-wrapper { align-items: stretch; } .home-projects .swiper-slide { height: auto; display: flex; } .home-projects .swiper-slide > .elementor-element-1ae898b.e-con { --align-self: stretch; --padding-bottom: 0px; flex: 1 1 auto; height: 100%; width: 100%; } .home-projects .swiper-slide > .elementor-element-1ae898b.e-con > .e-con-inner { display: flex; flex-direction: column; height: 100%; } .home-projects .swiper-slide .elementor-element-77cdcd7.elementor-widget-image, .home-projects .swiper-slide .elementor-element-77cdcd7 .elementor-widget-container, .home-projects .swiper-slide .elementor-element-77cdcd7 img { display: block; width: 100%; } .home-projects .swiper-slide .elementor-element-77cdcd7 img { aspect-ratio: 1 / 1; object-fit: cover; } .home-projects .swiper-slide .elementor-element-5573ed5.info { flex: 1 1 auto; display: flex; flex-direction: column; } .home-projects .swiper-slide .elementor-element-2b0b7c1 { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; --min-height: 0px; } .home-projects .swiper-slide .elementor-element-7a53862.elementor-widget-button { margin-top: auto; } /* --- Mobiel: swipe niet laten storen door native image-drag --- */ .home-projects .swiper-slide img { -webkit-user-drag: none; user-select: none; pointer-events: none; touch-action: pan-y; } .home-projects .swiper { touch-action: pan-y; } .home-partner br { display: none; } .ratio-150-150 img { max-width: 100%; } .home-partner .elementor-element-233d8c8.elementor-widget-image { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } .home-partner .elementor-element-233d8c8.elementor-widget-image img { width: 100% !important; max-width: 100% !important; display: block; } .home-partner .elementor-element-e4c8f17.e-con { padding-bottom: 20px !important; align-items: center !important; text-align: center !important; } .home-partner .elementor-element-e4c8f17 .elementor-widget-button { width: 100% !important; margin-bottom: 0 !important; } .home-partner .elementor-element-e4c8f17 .elementor-heading-title { text-align: center !important; } /* ================================================ CONTACTKAARTEN MOBIEL ================================================ */ /* ROW containers → vertikaal stapelen (.e-con én .e-con-inner) */ .e-con:has(> .e-con:has(> .ratio-150-150.elementor-widget-image)), .e-con:has(> .e-con:has(> .e-con:has(> .e-con:has(.elementor-widget-button)):has(> .elementor-widget-image))), .e-con-inner:has(> .e-con:has(> .e-con:has(> .e-con:has(.elementor-widget-button)):has(> .elementor-widget-image))) { flex-direction: column !important; align-items: center !important; } .elementor-element-d4c98a8 { padding-top: 15px !important; } /* Directe ID-targeting outer cards (border-containers) */ .elementor-element-3006191, .elementor-element-5df8331, .elementor-element-bb5395e, .elementor-element-d690376, .elementor-element-c3172e7 { width: 100% !important; max-width: 100% !important; flex-basis: auto !important; flex-shrink: 0 !important; margin-left: auto !important; margin-right: auto !important; } /* Directe ID-targeting inner layout containers */ .elementor-element-b252638, .elementor-element-7812dd0, .elementor-element-cecb606, .elementor-element-296a5b7, .elementor-element-c176979 { flex-direction: column !important; align-items: center !important; text-align: center !important; padding-bottom: 20px !important; width: 100% !important; } /* Afbeeldingen in inner layout containers: bovenaan, full width */ .elementor-element-b252638 > .elementor-widget-image, .elementor-element-7812dd0 > .elementor-widget-image, .elementor-element-cecb606 > .elementor-widget-image, .elementor-element-296a5b7 > .elementor-widget-image, .elementor-element-c176979 > .elementor-widget-image { order: -1; width: 100% !important; max-width: 100% !important; padding: 0 !important; } .elementor-element-b252638 > .elementor-widget-image img, .elementor-element-7812dd0 > .elementor-widget-image img, .elementor-element-cecb606 > .elementor-widget-image img, .elementor-element-296a5b7 > .elementor-widget-image img, .elementor-element-c176979 > .elementor-widget-image img { width: 100% !important; max-width: 100% !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; display: block; } /* Knoppen in inner layout containers: full width, gecentreerd */ .elementor-element-b252638 .elementor-widget-button, .elementor-element-7812dd0 .elementor-widget-button, .elementor-element-cecb606 .elementor-widget-button, .elementor-element-296a5b7 .elementor-widget-button, .elementor-element-c176979 .elementor-widget-button { width: 100% !important; } /* Titels centreren */ .elementor-element-b252638 .elementor-heading-title, .elementor-element-7812dd0 .elementor-heading-title, .elementor-element-cecb606 .elementor-heading-title, .elementor-element-296a5b7 .elementor-heading-title, .elementor-element-c176979 .elementor-heading-title { text-align: center !important; } /* FAQ accordion sectie: volle breedte op mobiel */ .elementor-element-d292942, .elementor-element-4a0f6a0 { width: 100% !important; max-width: 100% !important; flex-basis: auto !important; } .elementor-element-d292942 .elementor-widget-n-accordion, .elementor-element-d292942 .e-n-accordion { width: 100% !important; } .elementor-element-d292942 .e-n-accordion-item-title { width: 100% !important; box-sizing: border-box; } /* TYPE A: kaart met directe ratio-150-150 afbeelding (border zit op deze container) */ .e-con:has(> .ratio-150-150.elementor-widget-image) { width: 100% !important; max-width: 100% !important; flex-basis: auto !important; flex-shrink: 0 !important; margin-left: auto !important; margin-right: auto !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding-bottom: 20px !important; } .e-con:has(> .ratio-150-150.elementor-widget-image) > .ratio-150-150.elementor-widget-image { width: 100% !important; max-width: 100% !important; padding: 0 !important; } .e-con:has(> .ratio-150-150.elementor-widget-image) > .ratio-150-150.elementor-widget-image img { width: 100% !important; max-width: 100% !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; display: block; border: none !important; outline: none !important; box-shadow: none !important; } /* Geen extra border op afbeeldingen in home-partner sectie */ .elementor-element-911c663 .ratio-150-150 img, .home-partner .ratio-150-150 img { border: none !important; outline: none !important; box-shadow: none !important; } .e-con:has(> .ratio-150-150.elementor-widget-image) .elementor-widget-button { width: 100% !important; margin-bottom: 0 !important; } .e-con:has(> .ratio-150-150.elementor-widget-image) .elementor-heading-title { text-align: center !important; } /* TYPE B: kaart met inner layout container (border zit op outer container) */ /* Outer card container (heeft de border) */ .e-con:has(> .e-con:has(> .e-con:has(.elementor-widget-button)):has(> .elementor-widget-image)) { width: 100% !important; max-width: 100% !important; flex-basis: auto !important; flex-shrink: 0 !important; margin-left: auto !important; margin-right: auto !important; } /* Inner layout container */ .e-con:has(> .e-con:has(.elementor-widget-button)):has(> .elementor-widget-image) { flex-direction: column !important; align-items: center !important; text-align: center !important; padding-bottom: 20px !important; } .e-con:has(> .e-con:has(.elementor-widget-button)):has(> .elementor-widget-image) > .elementor-widget-image { width: 100% !important; max-width: 100% !important; padding: 0 !important; order: -1; } .e-con:has(> .e-con:has(.elementor-widget-button)):has(> .elementor-widget-image) > .elementor-widget-image img { width: 100% !important; max-width: 100% !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; display: block; } .e-con:has(> .e-con:has(.elementor-widget-button)):has(> .elementor-widget-image) .elementor-widget-button { width: 100% !important; } .e-con:has(> .e-con:has(.elementor-widget-button)):has(> .elementor-widget-image) .elementor-heading-title { text-align: center !important; } .partners { display: flex; flex-wrap: wrap; gap: 0; } .partners .item { width: 50%; } } /* ===================================================== TOPSPORT GELDERLAND — Cookie Banner ===================================================== */ /* Banner wrapper */ .cmplz-cookiebanner.banner-1 { background: #111 !important; border: 1px solid #2a2a2a !important; border-top: 3px solid #E01E1E !important; border-radius: 0px !important; box-shadow: none !important; padding: 1.5rem !important; width: 360px !important; max-width: calc(100vw - 2rem) !important; left: auto !important; right: 1rem !important; bottom: 1rem !important; top: auto !important; height: auto !important; overflow: visible !important; font-family: 'DM Sans', sans-serif !important; box-sizing: border-box !important; } /* Klein rood diagonaal streep-detail in de rechterbovenhoek (subtiele brand touch) */ .cmplz-cookiebanner.banner-1::before { content: ""; position: absolute; top: 0; right: 0; width: 70px; height: 70px; background: repeating-linear-gradient( 135deg, transparent 0 10px, rgba(224, 30, 30, 0.6) 10px 11px ); clip-path: polygon(100% 0, 0 0, 100% 100%); pointer-events: none; opacity: 0.5; } /* Header */ .cmplz-cookiebanner .cmplz-header { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: space-between !important; border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0.75rem !important; } .cmplz-cookiebanner .tsg-accent-bar { display: flex !important; gap: 8px !important; width: 100% !important; margin-bottom: 1rem !important; } .cmplz-cookiebanner .tsg-bar { flex: 1 1 0 !important; height: 6px !important; border-radius: 999px !important; } /* Sporttalent — accent bar: fading rood (van licht naar vol) */ .cmplz-cookiebanner .tsg-bar-b { background: rgba(224, 30, 30, 0.2) !important; } .cmplz-cookiebanner .tsg-bar-g { background: rgba(224, 30, 30, 0.45) !important; } .cmplz-cookiebanner .tsg-bar-y { background: rgba(224, 30, 30, 0.75) !important; } .cmplz-cookiebanner .tsg-bar-w { background: #E01E1E !important; } .cmplz-cookiebanner .cmplz-logo { display: none !important; } .cmplz-cookiebanner .cmplz-divider-header { display: none !important; } .cmplz-divider.cmplz-footer {display: none;} /* Titel */ .cmplz-cookiebanner .cmplz-title, .cmplz-cookiebanner.cmplz-categories-visible .cmplz-title { display: block !important; font-family: "DM Sans", Sans-serif!important; font-size: 32px !important; font-weight: 700 !important; color: #fff !important; line-height: 1.05 !important; padding: 0 !important; flex: 1 !important; text-transform: uppercase !important; letter-spacing: 0 !important; } .cmplz-cookiebanner .cmplz-title span, .cmplz-cookiebanner.cmplz-categories-visible .cmplz-title span { color: #E01E1E !important; } /* Sluit-knop */ .cmplz-cookiebanner .cmplz-close { background: #222 !important; border-radius: 50% !important; width: 28px !important; height: 28px !important; min-width: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-left: 8px !important; cursor: pointer !important; display: none!important; } .cmplz-cookiebanner .cmplz-close svg path { fill: #888 !important; } .cmplz-cookiebanner .cmplz-close:hover { background: #333 !important; } .cmplz-cookiebanner .cmplz-close:hover svg path { fill: #fff !important; } /* Dividers */ .cmplz-cookiebanner .cmplz-divider { border-color: #222 !important; margin: 1rem 0 !important; } /* Body tekst */ .cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-message p { font-size: 15px !important; color: #888 !important; line-height: 1.6 !important; margin-bottom: 1.25rem !important; padding-right:100px; } /* Categorieën */ .cmplz-cookiebanner .cmplz-categories { margin: 0.25rem 0 !important; } .cmplz-cookiebanner .cmplz-category { background: #1a1a1a !important; border: 1px solid #222 !important; border-radius: 6px !important; margin-bottom: 5px !important; overflow: hidden !important; } .cmplz-cookiebanner .cmplz-category summary { padding: 10px 12px !important; list-style: none !important; cursor: pointer !important; } .cmplz-cookiebanner .cmplz-category summary::-webkit-details-marker { display: none !important; } .cmplz-cookiebanner .cmplz-category-header { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 8px !important; box-sizing: border-box !important; } .cmplz-cookiebanner .cmplz-category-title { font-size: 13px !important; font-weight: 600 !important; color: #ddd !important; flex: 1 !important; } /* Altijd actief badge — Sporttalent rood */ .cmplz-cookiebanner .cmplz-always-active { font-family: 'DM Sans', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; color: #E01E1E !important; background: rgba(224, 30, 30, 0.12) !important; border: 1px solid rgba(224, 30, 30, 0.3) !important; padding: 3px 8px !important; border-radius: 4px !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; } .cmplz-cookiebanner .cmplz-always-active .cmplz-banner-checkbox { display: none !important; } /* Toggle */ .cmplz-cookiebanner .cmplz-banner-checkbox { position: relative !important; display: inline-block !important; flex-shrink: 0 !important; overflow: visible !important; } .cmplz-cookiebanner .cmplz-consent-checkbox { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; margin: 0 !important; } .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label { position: relative !important; display: inline-block !important; width: 38px !important; height: 20px !important; padding: 0 !important; padding-left: 0 !important; margin: 0 !important; background: #333 !important; border-radius: 20px !important; cursor: pointer !important; transition: background 0.2s !important; overflow: visible !important; vertical-align: middle !important; box-sizing: border-box !important; } .cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-label .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; } .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before { content: '' !important; display: block !important; position: absolute !important; width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; max-width: 14px !important; max-height: 14px !important; top: 3px !important; left: 3px !important; background: #777 !important; border-radius: 50% !important; transition: transform 0.2s ease, background 0.2s !important; box-shadow: none !important; box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; } .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after { display: none !important; content: none !important; } .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-consent-checkbox:checked + .cmplz-label, .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-consent-checkbox:checked ~ .cmplz-label { background: #E01E1E !important; } .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-consent-checkbox:checked + .cmplz-label::before, .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-consent-checkbox:checked ~ .cmplz-label::before { transform: translateX(18px) !important; background: #fff !important; } /* Pijltje */ .cmplz-cookiebanner .cmplz-icon.cmplz-open { display: flex !important; align-items: center !important; flex-shrink: 0 !important; transition: transform 0.2s !important; } .cmplz-cookiebanner .cmplz-icon.cmplz-open svg path { fill: #555 !important; } .cmplz-cookiebanner details[open] > summary .cmplz-icon.cmplz-open { transform: rotate(180deg) !important; } /* Beschrijving */ .cmplz-cookiebanner .cmplz-description { padding: 8px 12px 10px !important; background: #111 !important; } .cmplz-cookiebanner .cmplz-description span { font-size: 11px !important; color: #555 !important; line-height: 1.5 !important; } /* Knoppen */ .cmplz-cookiebanner .cmplz-buttons { display: flex !important; flex-direction: column !important; gap: 8px !important; } .cmplz-cookiebanner .ovk-btn-row { display: flex !important; flex-direction: row !important; gap: 8px !important; width: 100% !important; } /* Alle knoppen basis */ .cmplz-cookiebanner .cmplz-btn { font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; text-transform: none !important; border-radius: 0px !important; padding: 12px 16px !important; cursor: pointer !important; text-align: center !important; box-sizing: border-box !important; line-height: 1 !important; transition: background 0.15s, border-color 0.15s, color 0.15s !important; } /* Accepteer: Sporttalent rood, primaire CTA */ .cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: #E01E1E !important; color: #fff !important; border: none !important; width: 100% !important; display: block !important; box-shadow: none !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background: #B81818 !important; box-shadow: none !important; } /* Weigeren + Bekijk voorkeuren: witte outline */ .cmplz-cookiebanner .cmplz-btn.cmplz-deny, .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences { background: transparent !important; color: #fff !important; border: 1.5px solid #fff !important; flex: 1 !important; width: auto !important; display: block !important; font-size: 13px !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover, .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover { background: rgba(255,255,255,0.1) !important; } /* Bewaar voorkeuren: zelfde solid rode styling als Accepteren */ .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { background: #E01E1E !important; color: #fff !important; border: none !important; box-shadow: none !important; flex: 1 !important; width: auto !important; font-size: 13px !important; display: none !important; /* default verborgen — alleen zichtbaar in preferences state */ } .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover { background: #B81818 !important; color: #fff !important; box-shadow: none !important; } /* State-toggle: in preferences-state ruilt Save met View van plek Complianz voegt .cmplz-categories-visible toe aan de banner wanneer user op "Bekijk voorkeuren" klikt */ .cmplz-cookiebanner.cmplz-categories-visible .cmplz-btn.cmplz-view-preferences { display: none !important; } .cmplz-cookiebanner.cmplz-categories-visible .cmplz-btn.cmplz-save-preferences { display: block !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-manage-options { display: none !important; } /* Links: wit */ .cmplz-cookiebanner .cmplz-links a, .cmplz-cookiebanner .cmplz-documents a { font-size: 12px !important; color: #fff !important; text-decoration: none !important; opacity: 0.6 !important; transition: opacity 0.15s !important; } .cmplz-cookiebanner .cmplz-links a:hover, .cmplz-cookiebanner .cmplz-documents a:hover { opacity: 1 !important; color: #E01E1E !important; } /* Mobiel */ @media (max-width: 600px) { .cmplz-cookiebanner.banner-1 { left: 1rem !important; right: 1rem !important; width: auto !important; bottom: 1rem !important; top: auto !important; height: auto !important; max-height: calc(100vh - 2rem) !important; overflow-y: auto !important; border-radius: 10px !important; padding: 1.25rem !important; scrollbar-width: thin !important; scrollbar-color: #333 transparent !important; } .cmplz-cookiebanner.banner-1::-webkit-scrollbar { width: 3px !important; } .cmplz-cookiebanner.banner-1::-webkit-scrollbar-track { background: transparent !important; } .cmplz-cookiebanner.banner-1::-webkit-scrollbar-thumb { background: #333 !important; border-radius: 3px !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-deny, .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences { font-size: 12px !important; padding: 11px 6px !important; } .cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-message p { padding-right:0px; } } /* ===================================================== Einde TOPSPORT GELDERLAND — Cookie Banner ===================================================== */ /* ===================================================== ZOEKRESULTATEN PAGINA ===================================================== */ .guifi-search { padding: 56px 0 96px; } .guifi-search__container { width: min(1140px, calc(100% - 64px)); margin: 0 auto; } .guifi-search__header { margin-bottom: 40px; } .guifi-search__title { margin: 0; font-family: "Titillium Web", Sans-serif; font-size: clamp(40px, 6vw, 64px); font-weight: 700; line-height: 1; text-transform: uppercase; color: #000000; } .guifi-search__query { margin: 8px 0 0; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: 16px; color: #555555; } .guifi-search__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .guifi-search__empty { font-family: "Titillium Web", sans-serif; font-size: 16px; font-weight: 700; color: #555555; margin: 0; } .guifi-search .navigation.posts-navigation { margin-top: 48px; font-family: "Titillium Web", sans-serif; font-weight: 700; } @media (max-width: 1024px) { .guifi-search__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .guifi-search { padding: 40px 0 64px; } .guifi-search__container { width: calc(100% - 32px); } .guifi-search__grid { grid-template-columns: 1fr; gap: 16px; } } /* ===================================================== Einde ZOEKRESULTATEN PAGINA ===================================================== */ #tg-search-toggle { border:none!important;} .elementor-widget-n-menu .e-n-menu:not([data-layout=dropdown]) .e-n-menu-item:not(:last-child) { margin-inline-end:20px!important; } .elementor-widget-text-editor a { color: #000000 !important; text-decoration: underline !important; } .guifi-fc--bg-zwart .elementor-widget-text-editor a, .guifi-fc__surface--dark .elementor-widget-text-editor a, [style*="background-color: var( --e-global-color-secondary )"] .elementor-widget-text-editor a, [style*="background-color: var(--e-global-color-secondary)"] .elementor-widget-text-editor a, [style*="background: var( --e-global-color-secondary )"] .elementor-widget-text-editor a, [style*="background: var(--e-global-color-secondary)"] .elementor-widget-text-editor a, [style*="background-color: #000"] .elementor-widget-text-editor a, [style*="background-color: #1a1a1a"] .elementor-widget-text-editor a, [style*="--background-color: var( --e-global-color-secondary )"] .elementor-widget-text-editor a, [style*="--background-color: var(--e-global-color-secondary)"] .elementor-widget-text-editor a { color: #ffffff !important; text-decoration: underline !important; } /* ===================================================== NIEUWS OVERZICHT ===================================================== */ /* Hero-blok bovenaan de nieuws-pagina: primaire achtergrond, tegen de menubalk aan, 64px padding-bottom tot de artikelen. Breadcrumb + h1 binnen. */ .guifi-nieuws__hero { background: var(--e-global-color-primary, #1C1C1C); padding: 64px 0; color: #fff; } .guifi-nieuws__hero-container { width: min(1140px, calc(100% - 64px)); margin: 0 auto; } .guifi-nieuws__hero-breadcrumb { margin-bottom: 20px; font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.4; color: #fff; } .guifi-nieuws__hero-breadcrumb p, .guifi-nieuws__hero-breadcrumb .rank-math-breadcrumb { margin: 0; padding: 0; } .guifi-nieuws__hero-breadcrumb a { color: #fff; text-decoration: none; transition: color 0.15s; } .guifi-nieuws__hero-breadcrumb a:hover { color: #E01E1E; } .guifi-nieuws__hero-breadcrumb .separator { margin: 0 8px; color: rgba(255, 255, 255, 0.5); } .guifi-nieuws__hero-title { margin: 0; color: #fff; font-family: "Titillium Web", sans-serif; font-size: 64px; font-weight: 700; line-height: 64px; text-transform: uppercase; } .guifi-nieuws__hero-intro { margin: 20px 0 0; max-width: 760px; font-family: "DM Sans", sans-serif; font-size: 18px; line-height: 1.55; color: #fff; } @media (max-width: 767px) { .guifi-nieuws__hero { padding: 48px 0; } .guifi-nieuws__hero-title { font-size: 48px; line-height: 48px; } } /* Als de hero erboven staat, exact 64px witruimte tussen het zwarte blok en de artikelen — geen opgeteld padding-stack. */ .guifi-nieuws__hero + .guifi-nieuws { padding-top: 64px; } .guifi-nieuws { padding: clamp(32px, 4vw, 64px) 0 clamp(48px, 6vw, 96px); } .guifi-nieuws__container { width: min(1140px, calc(100% - 64px)); margin: 0 auto; } /* --- Uitgelichte berichten (2-kolom, card-body stijl) --- */ .guifi-nieuws__featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; } .guifi-nieuws__featured-card { display: flex; flex-direction: column; overflow: hidden; border: 2px solid #000000; background: #ffffff; } .guifi-nieuws__featured-card .guifi-nieuws__card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .guifi-nieuws__featured-card .guifi-nieuws__card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; flex-shrink: 0; } .guifi-nieuws__featured-card .guifi-nieuws__card-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; } .guifi-nieuws__featured-card:hover .guifi-nieuws__card-image { transform: scale(1.04); } .guifi-nieuws__featured-card .guifi-nieuws__card-title { font-family: "DM Sans", Sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; color: #000000; } .guifi-nieuws__featured-card .guifi-nieuws__card-excerpt { -webkit-line-clamp: 4; } /* --- Grid: card-body stijl (afbeelding + tekst eronder) --- */ .guifi-nieuws__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .guifi-nieuws__card { display: flex; flex-direction: column; overflow: hidden; border: 2px solid #000000; background: #ffffff; } .guifi-nieuws__card .guifi-nieuws__card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .guifi-nieuws__card .guifi-nieuws__card-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; flex-shrink: 0; } .guifi-nieuws__card .guifi-nieuws__card-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.35s ease; } .guifi-nieuws__card:hover .guifi-nieuws__card-image { transform: scale(1.04); } .guifi-nieuws__card-image--placeholder { background: #e8e8e8; width: 100%; height: 100%; } .guifi-nieuws__card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 20px 20px; } /* Label-positionering binnen de card-body (flex-column). De visuele styling van het label wordt door de .elementor-button classes geregeld; we forceren 16px / medium met !important omdat de kit-CSS `.elementor-kit-103 .elementor-button` (0,2,0) hoger specifiek is dan een enkele class. */ .guifi-nieuws__card-label { align-self: flex-start; margin-bottom: 10px; font-size: 16px !important; font-weight: 500 !important; } .guifi-nieuws__card-label .elementor-button-text { font-size: 16px !important; font-weight: 500 !important; } .guifi-nieuws__card-title { margin: 0 0 8px; font-family: "DM Sans", Sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; color: #000000; } .guifi-nieuws__card-excerpt { margin: 0 0 12px; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: 14px; line-height: 1.55; color: #555555; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .guifi-nieuws__card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; } .guifi-nieuws__card-date { font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: 12px; color: #888888; } .guifi-nieuws__card-arrow { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #000; transition: transform 0.25s ease; } .guifi-nieuws__card:hover .guifi-nieuws__card-arrow, .guifi-nieuws__featured-card:hover .guifi-nieuws__card-arrow { transform: translateX(3px); } /* --- Infinite scroll sentinel & loader --- */ .guifi-nieuws__sentinel { height: 1px; margin-top: 40px; } .guifi-nieuws__loader { display: flex; justify-content: center; gap: 8px; padding: 32px 0; } .guifi-nieuws__loader-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--e-global-color-primary, #00a850); animation: guifi-nieuws-bounce 1.2s infinite ease-in-out; } .guifi-nieuws__loader-dot:nth-child(2) { animation-delay: 0.2s; } .guifi-nieuws__loader-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes guifi-nieuws-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } .guifi-nieuws__empty { font-family: "Titillium Web", sans-serif; font-size: 16px; color: #555555; margin: 0; } /* --- Agenda: inschrijving gesloten --- */ .guifi-agenda-card__registration-closed { display: inline-block; font-family: "Titillium Web", sans-serif; font-size: 14px; color: #888888; font-style: italic; } .guifi-agenda-single-gesloten { display: block; padding: 20px 24px; border: 2px solid #000000; background: #ffffff; font-family: "Titillium Web", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; color: #000000; font-style: normal; text-transform: uppercase; letter-spacing: 0.02em; text-align: center; } /* --- Agenda single: titelkolom breder --- */ @media (min-width: 992px) { body.single-agenda .elementor-element.elementor-element-7d30a12 { flex-grow: 1; flex-basis: auto; max-width: none; width: 100%; } body.single-agenda .elementor-element.elementor-element-7d30a12 .elementor-heading-title { max-width: none; word-break: normal; hyphens: none; } } /* --- Agenda single: hero — afbeelding en tekstblok bovenaan uitlijnen --- */ body.single-agenda .elementor-element.elementor-element-0d9e495 { --align-items: flex-start; align-items: flex-start; } body.single-agenda .elementor-element.elementor-element-7141e94 img { height: auto; max-height: 600px; object-position: center top; } body.single-agenda .elementor-element.elementor-element-a525085 { padding-top: 24px; } /* --- Ons-team pagina: per rij uitlijnen (data wisselt zelden, IDs zijn stabiel) --- */ /* Rij 1 (Eline, Famke, Reina) — function-title kan 3 regels zijn, namen zijn 1 regel */ @media (min-width: 768px) { body.page-id-2181 .elementor-element-6961e03 .elementor-heading-title, body.page-id-2181 .elementor-element-db01054 .elementor-heading-title, body.page-id-2181 .elementor-element-65f62b2 .elementor-heading-title { min-height: 3.6em; } } /* Smallere desktop/laptop: namen in rij 2 (Hein/Bart-Jan) wrappen naar 2 regels — dan moet Nadiah ook 2 regels reserveren zodat email-lijn klopt. Bij ruimere breedte staan ze op 1 regel en is min-height onnodig. */ @media (min-width: 768px) and (max-width: 1199px) { body.page-id-2181 .elementor-element-a228a3b .elementor-heading-title, body.page-id-2181 .elementor-element-34f6a3d .elementor-heading-title, body.page-id-2181 .elementor-element-5d4161e .elementor-heading-title { min-height: 2.2em; } } /* --- Geen horizontale page-scroll (offset-right slider, animated headline, e.d.) --- */ html, body { overflow-x: clip; } @supports not (overflow-x: clip) { html, body { overflow-x: hidden; } } /* --- Complianz legal pagina's + footer legal-links: site-typografie forceren --- */ #cmplz-document, #cmplz-document p, #cmplz-document h1, #cmplz-document h2, #cmplz-document h3, #cmplz-document h4, #cmplz-document h5, #cmplz-document h6, #cmplz-document li, #cmplz-document a, #cmplz-document span, #cmplz-document summary, #cmplz-document details, .cmplz-document.privacy-statement, .cmplz-document.disclaimer, .cmplz-document.cookie-statement, footer.elementor-location-footer .elementor-icon-list-item a[href*="cookiebeleid"], footer.elementor-location-footer .elementor-icon-list-item a[href*="disclaimer"], footer.elementor-location-footer .elementor-icon-list-item a[href*="privacyverklaring"], footer.elementor-location-footer .elementor-icon-list-item:has(a[href*="cookiebeleid"]) .elementor-icon-list-text, footer.elementor-location-footer .elementor-icon-list-item:has(a[href*="disclaimer"]) .elementor-icon-list-text, footer.elementor-location-footer .elementor-icon-list-item:has(a[href*="privacyverklaring"]) .elementor-icon-list-text { font-family: "DM Sans", Sans-serif; } /* Body-tekst, links en kleine elementen op min. 18px / line-height 1.5 */ #cmplz-document, #cmplz-document p, #cmplz-document li, #cmplz-document a, #cmplz-document span, #cmplz-document summary, #cmplz-document details, #cmplz-document .cmplz-subtitle, #cmplz-document .cmplz-dropdown a, #cmplz-document .cmplz-dropdown summary p, #cmplz-document .cmplz-dropdown h4, #cmplz-document .cmplz-dropdown h5 { font-size: 18px; line-height: 1.5; } /* Heading-hiërarchie iets groter dan bodytekst */ #cmplz-document h1 { font-size: 36px; line-height: 1.2; } #cmplz-document h2 { font-size: 28px; line-height: 1.25; } #cmplz-document h3, #cmplz-document .cmplz-dropdown summary h3 { font-size: 22px; line-height: 1.3; } #cmplz-document h4 { font-size: 20px; line-height: 1.35; } @media (max-width: 767px) { #cmplz-document, #cmplz-document p, #cmplz-document li, #cmplz-document a, #cmplz-document span, #cmplz-document .cmplz-subtitle, #cmplz-document .cmplz-dropdown a, #cmplz-document .cmplz-dropdown summary p, #cmplz-document .cmplz-dropdown h4, #cmplz-document .cmplz-dropdown h5 { font-size: 16px; } #cmplz-document h1 { font-size: 28px; } #cmplz-document h2 { font-size: 22px; } #cmplz-document h3, #cmplz-document .cmplz-dropdown summary h3 { font-size: 20px; } #cmplz-document h4 { font-size: 18px; } } /* --- Home: projecten-slider — decoratieve blue.png mag geen touches opvangen --- */ .home-projects .elementor-element.elementor-element-3f1a71a { pointer-events: none; } /* --- Home: animated headline (Wij zijn er voor ...) — woorden op gelijke hoogte --- */ .elementor-element-865106e .elementor-headline, .elementor-element-865106e .elementor-headline-text-wrapper, .elementor-element-865106e .elementor-headline-plain-text, .elementor-element-865106e .elementor-headline-dynamic-wrapper, .elementor-element-865106e .elementor-headline-dynamic-text { vertical-align: top; line-height: 1.2; } .elementor-element-865106e .elementor-headline-letters .elementor-headline-dynamic-text, .elementor-element-865106e .elementor-headline-letters .elementor-headline-dynamic-text *, .elementor-element-865106e .elementor-headline-dynamic-text *, .elementor-element-865106e .elementor-headline-plain-text * { font-style: normal; vertical-align: top; line-height: 1.2; } /* --- Responsive --- */ @media (max-width: 1024px) { .guifi-nieuws__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .guifi-nieuws__container { width: calc(100% - 32px); } .guifi-nieuws__featured { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; } .guifi-nieuws__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 480px) { .guifi-nieuws__grid { grid-template-columns: minmax(0, 1fr); } } /* Kennisbank hero: standaard 24px zij-padding + bottom-padding terug (stijl gelijk aan de content-blokken) */ body.single-kennisbank .guifi-kennisbank-hero { padding-left: 24px; padding-right: 24px; padding-bottom: clamp(28px, 4vw, 56px); box-sizing: border-box; } /* Enkele bron voor de zij-gutter = de sectie hierboven; neutraliseer de losse 20px op __content (≤1024) zodat het niet stapelt */ body.single-kennisbank .guifi-kennisbank-hero__content { padding-left: 0; padding-right: 0; } /* Content-banks (flexible content) op kennisbank-artikelen: zelfde 24px min zij-gutter als de hero, zodat koppen/tekst op ELKE breedte uitlijnen met de hero. Container-breedte krijgt een 48px inset (24 links + 24 rechts); de losse 20px-floor op de content-box (≤1024/≤767) wordt vervangen door de designwaarde zonder floor, zodat de gutter niet stapelt. tpl/tpr-indents blijven werken via de active-var. */ body.single-kennisbank .guifi-fc { --guifi-fc-container-width: min(1200px, 100% - 48px); --guifi-fc-container-width-narrow: min(1200px, 100% - 48px); } body.single-kennisbank .guifi-fc__content-box, body.single-kennisbank .guifi-fc__container--narrow { padding-left: var(--guifi-fc-text-pad-left-active, 0px); padding-right: var(--guifi-fc-text-pad-right-active, 0px); } /* Voorkom dubbele inset: de container (--narrow) levert al de 24px-gutter; de content-box moet die vullen i.p.v. de narrow-breedte NOG een keer toe te passen (anders ~48px i.p.v. 24px). Zo lijnt de bank-tekst exact uit met de hero. */ body.single-kennisbank .guifi-fc__row--text .guifi-fc__content-box, body.single-kennisbank .guifi-fc__row--text .guifi-fc__content-box--wide { max-width: 100%; } /* "Meer kennis" (related, static) tussen 768–1023px: nette 2-koloms grid i.p.v. de afgekapte slider-rij. De grid-regels van het thema gelden pas vanaf 1024px, waardoor in dit bereik 320px-brede slides met overflow:hidden werden afgesneden (swiper is hier statisch, dus niet scrollbaar). */ @media (min-width: 768px) and (max-width: 1023px) { body.single-kennisbank .guifi-kennisbank-related--static .guifi-kennisbank-related__slider { width: 100%; margin-left: 0; overflow: visible; } body.single-kennisbank .guifi-kennisbank-related--static .guifi-kennisbank-related__slider .swiper-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; transform: none !important; } body.single-kennisbank .guifi-kennisbank-related--static .guifi-kennisbank-related__slider .swiper-slide { width: auto !important; max-width: none; } } body > div.elementor.elementor-7786.elementor-location-archive > div > div { min-height:40vh; } /* ========================================================================== Homepage — Regio-keuze blok hover effect Container .elementor-element-5f2b9d1 met 4 regio-headings (Achterhoek, Arnhem-Nijmegen, Stedendriehoek, Foodvalley). Op hover: 3 rode chevrons links + tekst rood (#E01E1E). ========================================================================== */ .elementor-element-5f2b9d1 .elementor-widget-heading { position: relative; cursor: pointer; } /* Verberg standaard, toon op hover — 3 rode chevrons als pseudo-element */ .elementor-element-5f2b9d1 .elementor-widget-heading::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateX(-8px); width: 36px; height: 32px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: left center; background-size: contain; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; } /* Heading-tekst: smooth transition voor kleur + padding */ .elementor-element-5f2b9d1 .elementor-widget-heading .elementor-heading-title { transition: color .2s ease, padding-left .25s ease; } /* Hover-state: chevron komt in beeld + tekst rood + tekst schuift naar rechts */ .elementor-element-5f2b9d1 .elementor-widget-heading:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); } .elementor-element-5f2b9d1 .elementor-widget-heading:hover .elementor-heading-title { color: #E01E1E !important; padding-left: 46px; } /* Mobile: minder padding-shift */ @media (max-width: 768px) { .elementor-element-5f2b9d1 .elementor-widget-heading:hover .elementor-heading-title { padding-left: 40px; } } /* ========================================================================== Homepage — Agenda blok decoratie: rode concentrische cirkels links Container .elementor-element-43cd3c1 (e-parent van het agenda widget). De rings staan absoluut links, deels buiten de viewport, op de hoogte van de agenda-titel en cards (niet eronder). Verborgen op mobiel (parent heeft al elementor-hidden-mobile). ========================================================================== */ .elementor-element-43cd3c1 { position: relative !important; overflow: visible !important; } .elementor-element-43cd3c1::before { content: ""; position: absolute; left: -370px; top: 100px; width: 500px; height: 500px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; pointer-events: none; z-index: 0; } /* Inner content (agenda cards + title) blijft erboven */ .elementor-element-43cd3c1 > .e-con-inner, .elementor-element-43cd3c1 .elementor-widget-agenda_widget { position: relative; z-index: 1; } /* Alleen op desktop tonen — verberg op tablet groot, tablet klein én mobiel */ @media (max-width: 1366px) { .elementor-element-43cd3c1::before { display: none !important; } } /* ========================================================================== Homepage — "Elk niveau, elke discipline" zwarte sectie eindigt eerder, 3 kennisbank cards (Sporters/Trainers/Ouders) steken over de witte sectie heen voor een overlap-effect. ========================================================================== */ /* Zwarte parent-sectie: overflow visible zodat cards eruit kunnen steken + relative voor positionering van de diagonale strepen */ .elementor-element-79764d8 { overflow: visible !important; position: relative; } /* Diagonale rode strepen — driehoek in elke hoek met clip-path. Finite gradient met 5 strepen (binnenste 2 weggelaten), stripes parallel aan hypotenusa (`/` direction, gradient 135deg) */ .elementor-element-79764d8::before, .elementor-element-79764d8::after { content: ""; position: absolute; width: 380px; height: 300px; background: linear-gradient( 135deg, transparent 30px, #E01E1E 30px 32px, transparent 32px 62px, #E01E1E 62px 64px, transparent 64px 94px, #E01E1E 94px 96px, transparent 96px 126px, #E01E1E 126px 128px, transparent 128px 158px, #E01E1E 158px 160px, transparent 160px ); pointer-events: none; z-index: 1; } /* Linksboven — driehoek met rechte hoek in top-left */ .elementor-element-79764d8::before { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); } /* Rechtsonder — gespiegeld via 180° rotatie */ .elementor-element-79764d8::after { bottom: 0; right: 0; transform: rotate(180deg); clip-path: polygon(0 0, 100% 0, 0 100%); } /* Cards-container schuift omhoog met negatieve margin-bottom → sectie-achtergrond eindigt 1/4 vanaf onderkant van de cards */ .elementor-element-89e74fb { margin-bottom: -90px !important; position: relative; z-index: 2; } /* Mobiel/tablet: geen overlap, kaarten normaal binnen de sectie + strepen weg */ @media (max-width: 1024px) { .elementor-element-89e74fb { margin-bottom: 0 !important; } .elementor-element-79764d8::before, .elementor-element-79764d8::after { display: none !important; } } /* ────────────────────────────────────────────────────────────────────── Nieuwsfeed Loop Grid (Actueel) → horizontale slider Widget: :is(.elementor-element-061d7a3, .elementor-element-c4fa591, .elementor-element-6bbd857, .elementor-element-fdd0fcb) Loop item template-id: 9425, inner container .elementor-element-90e9ba8 Op desktop (≥1025px) wordt de 10-koloms Loop Grid een flex-row met snap-points: ~4.5 kaarten zichtbaar, scroll voor alle 10 uitgelichte berichten. Tablet/mobile blijft de Elementor-grid (2 / 1 kolom). De Loop Item template heeft z'n responsive Elementor-styling (padding, min-height, gradient overlay) alleen onder 1600px gezet — we trekken dat ook door op widescreen zodat de kaart consistent oogt. ────────────────────────────────────────────────────────────────────── */ /* Slider breekt rechts uit de boxed container tot aan viewport-rand. Widget is flex-item van .e-con-inner (column direction); we forceren width = 50vw + 50% (halve viewport + halve content-container), zodat de rechterrand precies op de viewport-rand uitkomt. html/body heeft overflow-x:clip dus geen page-scroll. Links blijft uitgelijnd met "ACTUEEL". */ :is(.elementor-element-061d7a3, .elementor-element-c4fa591, .elementor-element-6bbd857, .elementor-element-fdd0fcb).elementor-widget-loop-grid { width: calc(50vw + 50%); max-width: none; align-self: flex-start; flex-shrink: 0; } /* Grid container → horizontale drag-to-scroll. Geen scroll-snap (free drag), scrollbar verborgen, cursor grab. JS in functions.php (tsg_feed_slider_js) handelt het muis-slepen af. */ :is(.elementor-element-061d7a3, .elementor-element-c4fa591, .elementor-element-6bbd857, .elementor-element-fdd0fcb).elementor-widget-loop-grid .elementor-loop-container.elementor-grid { display: flex !important; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; cursor: grab; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } :is(.elementor-element-061d7a3, .elementor-element-c4fa591, .elementor-element-6bbd857, .elementor-element-fdd0fcb).elementor-widget-loop-grid .elementor-loop-container.elementor-grid::-webkit-scrollbar { display: none; } :is(.elementor-element-061d7a3, .elementor-element-c4fa591, .elementor-element-6bbd857, .elementor-element-fdd0fcb).elementor-widget-loop-grid .elementor-loop-container.elementor-grid.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } :is(.elementor-element-061d7a3, .elementor-element-c4fa591, .elementor-element-6bbd857, .elementor-element-fdd0fcb).elementor-widget-loop-grid .elementor-loop-container.elementor-grid.is-dragging a { pointer-events: none; } /* Vaste kaartbreedte: 320px op elk scherm. Bij smaller scherm valt de slider gewoon buiten beeld en kan je 'm naar links slepen. */ :is(.elementor-element-061d7a3, .elementor-element-c4fa591, .elementor-element-6bbd857, .elementor-element-fdd0fcb).elementor-widget-loop-grid .elementor-loop-container.elementor-grid > .e-loop-item { flex: 0 0 320px; min-width: 0; } /* Inner container vult de hele slide — !important omdat Elementor's inline