/* Mike the Bike – thema-CSS. Kleuren, fonts en knoppen staan in theme.json; hier alleen wat daar niet kan. */ :root { --mtb-bandenspoor: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Zichtbare focus overal */ :where(a, button, summary, input, textarea, select):focus-visible { outline: 3px solid var(--wp--preset--color--rood); outline-offset: 2px; } .has-navy-background-color :where(a, button):focus-visible, .has-navy-donker-background-color :where(a, button):focus-visible { outline-color: #fff; } .mtb-bandenspoor { background-image: var(--mtb-bandenspoor); } /* ---------- Merk (logo + naam) ---------- */ .mtb-merk { align-items: center; gap: 1rem; } .mtb-merk__logo { margin: 0; flex: none; } .mtb-merk__logo img { display: block; height: auto; border-radius: 6px; } .mtb-merk__tekst p { margin: 0; line-height: 1; } .mtb-merk__msv { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 1.05rem; letter-spacing: .12em; padding-bottom: .15rem; } .mtb-merk__naam, .mtb-merk__naam a { font-family: var(--wp--preset--font-family--kop); font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: .01em; color: #fff; text-decoration: none; } .mtb-merk__naam { padding-bottom: .35rem; border-bottom: 3px solid var(--wp--preset--color--rood); width: max-content; max-width: 100%; } .mtb-merk__sinds { font-family: var(--wp--preset--font-family--script); font-size: 1.05rem; margin-top: .35rem !important; padding-left: 4.5rem; color: #fff; } .mtb-merk--klein .mtb-merk__naam, .mtb-merk--klein .mtb-merk__naam a { font-size: 1.7rem; } .mtb-merk--klein .mtb-merk__sinds { padding-left: 2.6rem; font-size: .95rem; } .mtb-merk--klein .mtb-merk__msv { font-size: .95rem; } /* ---------- Header ---------- */ .mtb-header { position: relative; padding-top: 1rem; padding-bottom: 1rem; } .mtb-header__rij { align-items: center; gap: 1.25rem 2rem; } .mtb-nav { margin-inline: auto; } .mtb-nav .wp-block-navigation__container { gap: 2.1rem; } .mtb-nav .wp-block-navigation-item__content, .mtb-footernav .wp-block-navigation-item__content { padding: .45rem 0; border-bottom: 3px solid transparent; letter-spacing: .02em; } .mtb-nav .current-menu-item > .wp-block-navigation-item__content, .mtb-footernav .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--wp--preset--color--rood); } .mtb-nav .wp-block-navigation-item__content:hover { border-bottom-color: rgba(255,255,255,.6); } .mtb-nav .wp-block-navigation__submenu-icon { color: #fff; } .mtb-nav .wp-block-navigation__submenu-container { background: var(--wp--preset--color--navy-donker) !important; border: 1px solid rgba(255,255,255,.18); padding: .5rem 1rem; min-width: 14rem; gap: .25rem; } .mtb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #fff; white-space: nowrap; } .mtb-ledenknop { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.15rem; color: #fff; text-decoration: none; padding: .7rem 1.5rem; border: 1.5px solid rgba(255,255,255,.9); border-radius: 6px; transition: background-color .15s; } .mtb-ledenknop:hover { background: rgba(255,255,255,.12); color: #fff; } .mtb-lidwordenknop, .mtb-meerinfo__knop { display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.15rem; color: #fff; background: var(--wp--preset--color--rood); padding: .7rem 1.5rem; border: 1.5px solid var(--wp--preset--color--rood); border-radius: 6px; transition: filter .15s; } .mtb-lidwordenknop:hover, .mtb-meerinfo__knop:hover { filter: brightness(1.12); color: #fff; } .mtb-lidwordenknop:focus-visible, .mtb-meerinfo__knop:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .mtb-lidwordenknop--groot, .mtb-meerinfo__knop { font-size: 1.3rem; padding: .9rem 2rem; } .mtb-lidwordenknop--groot { display: table; margin: 2rem auto 0; } .mtb-meerinfo__knop:focus-visible { outline-color: var(--wp--preset--color--navy); } @media (max-width: 640px) { .mtb-header__balk .mtb-lidwordenknop { padding: .7rem 1rem; font-size: 1rem; } } /* Hamburger-breakpunt hoger dan de standaard 600px: menu + knop passen anders niet naast het merk */ @media (max-width: 1099px) { .mtb-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .mtb-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .mtb-nav { margin-inline: 0 0; margin-left: auto; } } .mtb-nav .wp-block-navigation__responsive-container-open { color: #fff; } .mtb-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 2rem; } .mtb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; font-size: 1.6rem; } @media (max-width: 640px) { .mtb-header__rij { flex-wrap: wrap !important; gap: .75rem 1rem; } .mtb-merk { gap: .75rem; } .mtb-merk__logo img { width: 56px !important; } .mtb-merk__sinds { padding-left: 2.6rem; } .mtb-ledenknop__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .mtb-ledenknop { padding: .7rem .8rem; } } /* ---------- Footer ---------- */ .mtb-footer { position: relative; } .mtb-footer__rij { align-items: center; gap: 1.5rem 2rem; } .mtb-footernav { font-size: 1.05rem !important; } .mtb-footernav .wp-block-navigation__container { gap: .5rem 1.9rem; flex-wrap: wrap; justify-content: center; } .mtb-footernav .wp-block-navigation__submenu-container { display: none; } /* footer: alleen hoofdlinks */ .mtb-footernav .wp-block-navigation__submenu-icon { display: none; } .mtb-social { gap: 1rem; } .mtb-social .wp-social-link a { padding: .4rem; } /* ---------- Inhoud ---------- */ .mtb-main { min-height: 40vh; } .mtb-main h1 { color: var(--wp--preset--color--navy); } .is-style-omlijnd .wp-block-button__link { background: transparent; border: 1.5px solid currentColor; } /* Footer altijd onderaan, ook op korte pagina's */ .wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; } .wp-site-blocks > .mtb-main { flex: 1 0 auto; } .wp-site-blocks > footer { margin-block-start: 0; } .wp-site-blocks > * + * { margin-block-start: 0; } /* ===================================================================== HOMEPAGE (fase 3) ===================================================================== */ :root { --mtb-papier-textuur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --mtb-verweerd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16 .22' numOctaves='4' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 34 0 0 0 -10.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --mtb-gescheurd: polygon(0.0% 2px, 1.43% 3px, 2.86% 5px, 4.29% 4px, 5.71% 5px, 7.14% 3px, 8.57% 3px, 10.0% 12px, 11.43% 8px, 12.86% 7px, 14.29% 3px, 15.71% 8px, 17.14% 5px, 18.57% 7px, 20.0% 5px, 21.43% 3px, 22.86% 5px, 24.29% 6px, 25.71% 10px, 27.14% 6px, 28.57% 12px, 30.0% 4px, 31.43% 3px, 32.86% 5px, 34.29% 7px, 35.71% 3px, 37.14% 7px, 38.57% 5px, 40.0% 8px, 41.43% 10px, 42.86% 8px, 44.29% 5px, 45.71% 6px, 47.14% 2px, 48.57% 2px, 50.0% 5px, 51.43% 10px, 52.86% 5px, 54.29% 12px, 55.71% 6px, 57.14% 3px, 58.57% 3px, 60.0% 12px, 61.43% 7px, 62.86% 5px, 64.29% 8px, 65.71% 10px, 67.14% 6px, 68.57% 4px, 70.0% 12px, 71.43% 2px, 72.86% 7px, 74.29% 5px, 75.71% 12px, 77.14% 12px, 78.57% 6px, 80.0% 7px, 81.43% 4px, 82.86% 5px, 84.29% 12px, 85.71% 5px, 87.14% 10px, 88.57% 4px, 90.0% 10px, 91.43% 8px, 92.86% 9px, 94.29% 6px, 95.71% 5px, 97.14% 9px, 98.57% 7px, 100.0% 4px, 100.0% calc(100% - 8px), 98.57% calc(100% - 12px), 97.14% calc(100% - 9px), 95.71% calc(100% - 7px), 94.29% calc(100% - 3px), 92.86% calc(100% - 7px), 91.43% calc(100% - 3px), 90.0% calc(100% - 9px), 88.57% calc(100% - 9px), 87.14% calc(100% - 2px), 85.71% calc(100% - 9px), 84.29% calc(100% - 6px), 82.86% calc(100% - 7px), 81.43% calc(100% - 3px), 80.0% calc(100% - 7px), 78.57% calc(100% - 5px), 77.14% calc(100% - 10px), 75.71% calc(100% - 5px), 74.29% calc(100% - 3px), 72.86% calc(100% - 2px), 71.43% calc(100% - 6px), 70.0% calc(100% - 4px), 68.57% calc(100% - 2px), 67.14% calc(100% - 12px), 65.71% calc(100% - 10px), 64.29% calc(100% - 9px), 62.86% calc(100% - 9px), 61.43% calc(100% - 2px), 60.0% calc(100% - 8px), 58.57% calc(100% - 4px), 57.14% calc(100% - 7px), 55.71% calc(100% - 8px), 54.29% calc(100% - 2px), 52.86% calc(100% - 7px), 51.43% calc(100% - 10px), 50.0% calc(100% - 4px), 48.57% calc(100% - 3px), 47.14% calc(100% - 6px), 45.71% calc(100% - 7px), 44.29% calc(100% - 2px), 42.86% calc(100% - 6px), 41.43% calc(100% - 8px), 40.0% calc(100% - 5px), 38.57% calc(100% - 7px), 37.14% calc(100% - 7px), 35.71% calc(100% - 12px), 34.29% calc(100% - 7px), 32.86% calc(100% - 12px), 31.43% calc(100% - 4px), 30.0% calc(100% - 12px), 28.57% calc(100% - 2px), 27.14% calc(100% - 9px), 25.71% calc(100% - 9px), 24.29% calc(100% - 8px), 22.86% calc(100% - 6px), 21.43% calc(100% - 7px), 20.0% calc(100% - 9px), 18.57% calc(100% - 5px), 17.14% calc(100% - 7px), 15.71% calc(100% - 7px), 14.29% calc(100% - 6px), 12.86% calc(100% - 7px), 11.43% calc(100% - 3px), 10.0% calc(100% - 3px), 8.57% calc(100% - 7px), 7.14% calc(100% - 8px), 5.71% calc(100% - 6px), 4.29% calc(100% - 9px), 2.86% calc(100% - 2px), 1.43% calc(100% - 5px), 0.0% calc(100% - 3px)); --mtb-zij: max(1rem, calc((100vw - 1240px) / 2)); } /* Knoppen met pijl, labels, sectiekoppen */ .mtb-pijl .wp-block-button__link::after { content: "\2192"; margin-left: .6em; } .is-style-omlijnd .wp-block-button__link { color: var(--wp--preset--color--navy); } .mtb-hero .is-style-omlijnd .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.9); } .mtb-label { display: flex; align-items: center; gap: .9rem; margin: 0; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1rem; letter-spacing: .28em; text-transform: uppercase; } .mtb-label::before { content: ""; width: 2.4rem; height: 3px; background: var(--wp--preset--color--rood); flex: none; } .mtb-sectiekop { align-items: center; gap: .75rem 2rem; margin-bottom: 1.5rem; } .mtb-sectielink { margin: 0; font-family: var(--wp--preset--font-family--label); font-weight: 600; } .mtb-sectielink a { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .mtb-sectielink a::after { content: "\2192"; margin-left: .5rem; display: inline-block; text-decoration: none; } .mtb-icoon { flex: none; } /* Header transparant over de hero (alleen homepage) */ .home .wp-site-blocks > .mtb-header, .home .mtb-header { position: absolute; inset: 0 0 auto 0; z-index: 10; width: 100%; background: linear-gradient(to bottom, rgba(11,26,51,.92), rgba(11,26,51,.55) 70%, transparent) !important; } .home .wp-site-blocks { position: relative; } /* ---------- Hero ---------- */ .mtb-hero { position: relative; overflow: hidden; color: #fff; min-height: clamp(560px, 50vw, 740px); padding: 11rem 1rem 7rem; display: grid; align-items: center; background: radial-gradient(120% 90% at 85% 40%, #15305a 0%, #0b1a33 60%), #0b1a33; } /* Foto: zacht uitlopend naar het navy (masker met vloeiende tussenstappen, ook onderaan) */ .mtb-hero::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; z-index: 0; pointer-events: none; height: 100%; aspect-ratio: 410 / 435; max-width: 75%; background: url("../img/placeholder/hero.jpg") right center / cover no-repeat; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.03) 8%, rgba(0,0,0,.12) 17%, rgba(0,0,0,.3) 27%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.8) 50%, rgba(0,0,0,.94) 62%, #000 75%), linear-gradient(to bottom, #000 0%, #000 70%, rgba(0,0,0,.6) 85%, rgba(0,0,0,.25) 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.03) 8%, rgba(0,0,0,.12) 17%, rgba(0,0,0,.3) 27%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.8) 50%, rgba(0,0,0,.94) 62%, #000 75%), linear-gradient(to bottom, #000 0%, #000 70%, rgba(0,0,0,.6) 85%, rgba(0,0,0,.25) 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .mtb-hero__inhoud { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin-inline: auto; text-align: left; } .mtb-hero > .mtb-hero__slagzin { max-width: none; } .mtb-hero__label { font-family: var(--wp--preset--font-family--label); font-weight: 600; letter-spacing: .22em; font-size: 1.05rem; margin: 0 0 .6rem; } .mtb-hero__kop { color: #fff !important; margin: 0; line-height: .86; font-size: clamp(4.8rem, 12.5vw, 10.5rem); -webkit-mask-image: var(--mtb-verweerd); mask-image: var(--mtb-verweerd); } .mtb-hero__kop mark { display: block; } .mtb-hero__sinds { margin: .35rem 0 2rem; font-family: var(--wp--preset--font-family--kop); line-height: 1; letter-spacing: .02em; font-size: clamp(2.6rem, 6.4vw, 5.2rem); color: #e6e6e6; text-transform: uppercase; -webkit-mask-image: var(--mtb-verweerd); mask-image: var(--mtb-verweerd); } .mtb-hero__knoppen { gap: 1rem; } .mtb-hero__slagzin { position: absolute; right: var(--mtb-zij); bottom: 3.2rem; z-index: 2; margin: 0; transform: rotate(-6deg); font-family: var(--wp--preset--font-family--script); font-size: clamp(1.4rem, 3vw, 2.3rem); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.55); } .mtb-hero__slagzin::after { content: ""; display: block; height: 5px; margin: .15rem 0 0 18%; border-radius: 4px; transform: rotate(-2deg); background: var(--wp--preset--color--rood); box-shadow: 0 0 0 1px rgba(0,0,0,.15); } .mtb-hero::after { /* bandenspoor linksonder */ content: ""; position: absolute; left: 0; bottom: 0; width: min(42%, 520px); height: 70px; z-index: 1; opacity: .5; pointer-events: none; background: repeating-linear-gradient(100deg, #000 0 3px, transparent 3px 11px); -webkit-mask-image: linear-gradient(to right, #000, transparent); mask-image: linear-gradient(to right, #000, transparent); } @media (max-width: 781px) { .mtb-hero { padding: 9rem 1rem 6rem; align-items: flex-end; } .mtb-hero::before { max-width: none; width: 100%; aspect-ratio: auto; background-position: 70% center; opacity: .5; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), #000 40%, rgba(0,0,0,.35)); mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), #000 40%, rgba(0,0,0,.35)); -webkit-mask-composite: source-over; mask-composite: add; } .mtb-hero__slagzin { right: 1rem; bottom: 1.4rem; } } /* ---------- Volgende rit + overige activiteiten ---------- */ .mtb-rit { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); background-color: var(--wp--preset--color--papier); background-image: var(--mtb-papier-textuur); position: relative; } .mtb-rit__links { padding: 3.2rem 2rem 3.4rem var(--mtb-zij); } .mtb-rit__links > .mtb-label { color: var(--wp--preset--color--navy-donker); margin-bottom: 1.6rem; } .mtb-rit__rechts { background: var(--wp--preset--color--navy); color: #fff; padding: 3.2rem var(--mtb-zij) 3.4rem 5rem; clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%); margin-left: -1px; } .mtb-rit__rechts .mtb-label { color: #fff; } .mtb-volgende { display: grid; grid-template-columns: auto minmax(0, 1fr) clamp(150px, 17vw, 230px); gap: 1.6rem; align-items: start; } .mtb-datum { display: flex; flex-direction: column; align-items: center; width: 112px; padding: .9rem .5rem 1rem; background: #131722; color: #fff; border-radius: 6px; text-align: center; line-height: 1; } .mtb-datum__dag { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 1.3rem; letter-spacing: .08em; } .mtb-datum__nr { font-family: var(--wp--preset--font-family--kop); font-size: 4.6rem; margin: .1rem 0 .05rem; } .mtb-datum__maand { font-family: var(--wp--preset--font-family--kop); font-size: 2.4rem; color: #e8353a; } .mtb-volgende__titel { font-family: var(--wp--preset--font-family--label); font-weight: 700; text-transform: none; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; margin: 0 0 .7rem; color: var(--wp--preset--color--navy-donker); } .mtb-statuslabel { display: inline-block; margin: 0 0 .5rem; padding: .1rem .6rem; background: var(--wp--preset--color--rood); color: #fff; font-family: var(--wp--preset--font-family--label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; } .mtb-ritregels { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .3rem; } .mtb-ritregels li { display: flex; align-items: center; gap: .6rem; font-size: 1rem; } .mtb-ritregels .mtb-icoon { color: var(--wp--preset--color--rood); } .mtb-volgende__tekst { margin: 0 0 1.2rem; max-width: 34rem; } .mtb-knop-wrap { margin: 0; } .mtb-knop { display: inline-flex; align-items: center; gap: .6rem; background: var(--wp--preset--color--rood); color: #fff; text-decoration: none; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.2rem; padding: .65rem 1.5rem; border-radius: 999px; } .mtb-knop:hover { background: #b8141a; color: #fff; } .mtb-polaroid { margin: 0; background: #fff; padding: .55rem .55rem 1.6rem; box-shadow: 0 8px 22px rgba(0,0,0,.28); transform: rotate(3.5deg); } .mtb-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.05; object-fit: cover; } .mtb-leeg { padding: 1rem 0; } .mtb-activiteiten { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .mtb-activiteit { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem .7rem .7rem; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; background: rgba(255,255,255,.03); } .mtb-activiteit:hover { background: rgba(255,255,255,.1); } .mtb-activiteit__tekst { flex: 1; display: grid; gap: .1rem; min-width: 0; } .mtb-activiteit__tekst strong { font-family: var(--wp--preset--font-family--label); font-size: 1.2rem; font-weight: 700; } .mtb-activiteit__tekst span { font-size: .95rem; opacity: .85; } .mtb-badge { display: grid; justify-items: center; width: 56px; padding: .3rem 0 .35rem; background: #fff; color: var(--wp--preset--color--navy-donker); border-radius: 4px; line-height: 1; flex: none; } .mtb-badge small { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: .72rem; letter-spacing: .05em; } .mtb-badge strong { font-family: var(--wp--preset--font-family--kop); font-size: 1.9rem; font-weight: 400; } .mtb-badge__maand { color: var(--wp--preset--color--rood); font-weight: 700 !important; } .mtb-leeg-licht { opacity: .8; } @media (max-width: 1000px) { .mtb-rit { grid-template-columns: 1fr; } .mtb-rit__links { padding: 2.5rem 1rem; } .mtb-rit__rechts { clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); padding: 3.4rem 1rem 2.5rem; margin-left: 0; } } @media (max-width: 640px) { .mtb-volgende { grid-template-columns: auto 1fr; } .mtb-volgende .mtb-polaroid { grid-column: 1 / -1; max-width: 240px; justify-self: center; } .mtb-datum { width: 92px; } } /* ---------- Scheiding tussen Volgende rit en Historie (subtiele navy band, geen inhoud) ---------- */ .mtb-scheiding { height: 56px; background-color: var(--wp--preset--color--navy-donker); background-image: var(--mtb-bandenspoor); } @media (max-width: 640px) { .mtb-scheiding { height: 34px; } } /* ---------- Recente fotoalbums (ongebruikt op de homepage, pattern blijft herbruikbaar) ---------- */ .mtb-albums-sectie { color: #fff; padding: 3.2rem 1rem 3.6rem; background: linear-gradient(rgba(11,26,51,.93), rgba(11,26,51,.96)), url("../img/placeholder/hero.jpg") center 30% / cover no-repeat, #0b1a33; } .mtb-albums-sectie .mtb-label { color: #fff; } .mtb-albums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } .mtb-album { display: grid; background: rgba(11,26,51,.85); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; height: 100%; align-content: start; } .mtb-album:hover { border-color: rgba(255,255,255,.4); } .mtb-album__beeld { display: block; aspect-ratio: 5 / 3; overflow: hidden; background: #1b2f55; } .mtb-album__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .mtb-album:hover img { transform: scale(1.04); } .mtb-album__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .8rem 1rem .4rem; } .mtb-album__kop strong { font-family: var(--wp--preset--font-family--label); font-size: 1.2rem; font-weight: 600; line-height: 1.15; } .mtb-album__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; padding: 0 1rem 1rem; font-size: .9rem; opacity: .85; } .mtb-album__meta span { display: inline-flex; align-items: center; gap: .4rem; } .mtb-album__meta .mtb-icoon { width: 15px; height: 15px; } @media (max-width: 1000px) { .mtb-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .mtb-albums { grid-template-columns: 1fr; } } /* ---------- Een club met historie ---------- */ .mtb-historie { position: relative; background-color: var(--wp--preset--color--papier); background-image: var(--mtb-papier-textuur); clip-path: var(--mtb-gescheurd); padding: 5.5rem 1rem 5.5rem; margin-block: -10px; z-index: 1; } .mtb-historie__kolommen { gap: 2.5rem; align-items: center; } .mtb-historie .mtb-label { color: var(--wp--preset--color--navy-donker); margin-bottom: .7rem; } .mtb-historie__kop { font-size: clamp(3.2rem, 6.4vw, 5.4rem) !important; line-height: .92; margin: 0 0 1.2rem; } .mtb-gescheurd { margin: 0; transform: rotate(-2deg); } .mtb-gescheurd img { width: 100%; height: auto; display: block; filter: sepia(.35) contrast(1.05); box-shadow: 0 10px 28px rgba(0,0,0,.3); border: 8px solid #f7f3ea; } .mtb-historie__rechts { position: relative; display: grid; gap: 0; } .mtb-polaroid-foto { margin: 0; background: #fff; padding: .6rem .6rem 1rem; box-shadow: 0 8px 22px rgba(0,0,0,.28); max-width: 220px; } .mtb-polaroid-foto img { display: block; width: 100%; height: auto; } .mtb-polaroid-foto--race { transform: rotate(4deg); justify-self: start; position: relative; z-index: 2; } .mtb-polaroid-foto--race figcaption { font-family: var(--wp--preset--font-family--script); color: #333; font-size: 1.1rem; text-align: right; margin: .2rem 0 -.4rem; } .mtb-polaroid-foto--logo { transform: rotate(-3deg); justify-self: end; margin-top: -1.2rem; max-width: 190px; } @media (max-width: 781px) { .mtb-historie__rechts { grid-template-columns: 1fr 1fr; align-items: center; } .mtb-polaroid-foto--logo { margin-top: 0; } } /* ---------- Welkomstwoord (onder de hero) ---------- */ .mtb-welkomstwoord { position: relative; z-index: 1; overflow: hidden; padding: 2rem 1.5rem clamp(3rem, 5vw, 3.5rem); background-color: var(--wp--preset--color--papier); background-image: var(--mtb-papier-textuur); } .mtb-welkomstwoord__kop { text-align: center; display: flex; flex-direction: column; align-items: center; } .mtb-welkomstwoord__kop > *, .mtb-welkomstwoord__kolommen > *, .mtb-welkomstwoord__punt > * { margin-block: 0 !important; } .mtb-welkomstwoord__titel { font-family: var(--wp--preset--font-family--kop); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 5.5vw, 4.4rem) !important; line-height: .95; letter-spacing: -.01em; color: var(--wp--preset--color--navy); } .mtb-welkomstwoord__slot { font-family: var(--wp--preset--font-family--script); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.25; color: var(--wp--preset--color--rood); transform: rotate(-1.5deg); margin-top: .7rem !important; } .mtb-welkomstwoord__lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; max-width: 40rem; margin-top: .9rem !important; color: var(--wp--preset--color--tekst); } /* Fotoband: laag, met zachte gebogen boven- en onderrand; motor links, rijder rechts */ .mtb-welkomstwoord__foto.wp-block-group { height: clamp(10rem, 16.3vw, 15rem); margin: clamp(-2.2rem, -2.4vw, -.5rem) calc(50% - 50vw) clamp(.4rem, 1.5vw, .6rem) !important; background: url("../img/welkom-weg.jpg") 50% 45% / cover no-repeat; /* Penseelrand: onregelmatige, gebogen vorm in plaats van een rechthoek (SVG-masker met verstoorde rand) */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 300%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-5%25%22 y=%22-20%25%22 width=%22110%25%22 height=%22140%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.004 0.13%22 numOctaves=%223%22 seed=%227%22 result=%22n%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22n%22 scale=%2226%22 xChannelSelector=%22R%22 yChannelSelector=%22G%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter=%22url%28%23b%29%22 fill=%22%23000%22 d=%22M-20,4 C220,14 380,112 500,112 C620,112 790,14 1020,0 L1020,226 C820,286 640,270 500,272 C360,270 190,288 -20,232 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 300%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-5%25%22 y=%22-20%25%22 width=%22110%25%22 height=%22140%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.004 0.13%22 numOctaves=%223%22 seed=%227%22 result=%22n%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22n%22 scale=%2226%22 xChannelSelector=%22R%22 yChannelSelector=%22G%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter=%22url%28%23b%29%22 fill=%22%23000%22 d=%22M-20,4 C220,14 380,112 500,112 C620,112 790,14 1020,0 L1020,226 C820,286 640,270 500,272 C360,270 190,288 -20,232 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .mtb-welkomstwoord__kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 3.5rem); } .mtb-welkomstwoord__punt { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: .9rem; align-items: start; align-content: start; } .mtb-welkomstwoord__icoon { grid-row: 1 / span 2; width: 2.6rem; height: 2.6rem; color: var(--wp--preset--color--rood); } .mtb-welkomstwoord__punt .wp-block-html { display: contents; } .mtb-welkomstwoord__punt h3 { font-family: var(--wp--preset--font-family--label); font-weight: 700; text-transform: uppercase; font-size: 1.45rem; line-height: 1.1; color: var(--wp--preset--color--navy-donker); } .mtb-welkomstwoord__punt p { font-size: 1rem; line-height: 1.6; margin-top: .4rem !important; max-width: 24rem; } .mtb-welkomstwoord__kop > .mtb-lidwordenknop--groot { margin: 1.3rem 0 0 !important; } @media (max-width: 860px) { .mtb-welkomstwoord__kolommen { grid-template-columns: 1fr; gap: 1.6rem; } } /* Geen blokafstand tussen homepage-secties */ .mtb-home, .mtb-home .wp-block-post-content { margin: 0; } .mtb-home .wp-block-post-content > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } .mtb-home .wp-block-post-content > .mtb-historie { margin-block: -10px !important; } .wp-site-blocks > .mtb-home + footer { margin-block-start: 0; } /* Overige activiteiten: label en link op één regel */ .mtb-rit__rechts { padding-left: 4.5rem; } .mtb-rit__rechts .mtb-label { letter-spacing: .2em; font-size: .92rem; } .mtb-rit__rechts .mtb-label::before { width: 1.8rem; } .mtb-rit__rechts .mtb-sectielink { font-size: .92rem; white-space: nowrap; } @media (max-width: 781px) { .mtb-historie__links { max-width: 440px; margin-inline: auto; } .mtb-historie__rechts { max-width: 480px; margin-inline: auto; } } /* ===================================================================== Volgende rit – nauwkeuriger naar het ontwerp (compact, schuine titel, gestapelde polaroids) ===================================================================== */ .mtb-rit { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); --mtb-zij: max(3rem, calc((100vw - 1240px) / 2)); background-image: radial-gradient(60% 90% at 18% 20%, rgba(255,255,255,.55), transparent 70%), radial-gradient(40% 70% at 55% 90%, rgba(255,255,255,.4), transparent 70%), var(--mtb-papier-textuur); } .mtb-rit__links { position: relative; z-index: 3; padding: 2.2rem 0 2.5rem var(--mtb-zij); } .mtb-rit__links > .mtb-label { margin-bottom: 1.1rem; } .mtb-rit__rechts { padding: 2.2rem var(--mtb-zij) 2.5rem 4.2rem; clip-path: polygon(90px 0, 100% 0, 100% 100%, 0 100%); } .mtb-rit__rechts .mtb-sectiekop { flex-wrap: nowrap; gap: 1rem; margin-bottom: 1.1rem; } .mtb-rit__rechts .mtb-label { letter-spacing: .16em; font-size: .85rem; white-space: nowrap; } .mtb-rit__rechts .mtb-sectielink { font-size: .9rem; } .mtb-volgende { grid-template-columns: auto minmax(0, 1fr) clamp(150px, 17vw, 200px); gap: 1.4rem; align-items: start; } .mtb-datum { width: 112px; padding: .7rem .4rem .8rem; border-radius: 12px; background: #151821; } .mtb-datum__dag { font-family: var(--wp--preset--font-family--kop); font-weight: 400; font-size: 1.9rem; letter-spacing: .04em; } .mtb-datum__nr { font-size: 5.4rem; margin: 0; } .mtb-datum__maand { font-size: 2.9rem; } .mtb-volgende__titel { font-style: italic; font-weight: 700; font-size: clamp(1.6rem, 2.75vw, 2.35rem); margin: .2rem 0 .75rem; letter-spacing: .005em; } .mtb-ritregels { display: flex; flex-wrap: wrap; gap: .45rem 1.6rem; margin: 0 0 .75rem; } .mtb-ritregels li { font-size: .95rem; } .mtb-volgende__tekst { font-size: .95rem; line-height: 1.45; margin: 0 0 1.1rem; max-width: 30rem; } .mtb-knop { font-size: 1.15rem; padding: .55rem 1.5rem; } /* twee gestapelde polaroids, de voorste over de schuine rand heen */ .mtb-polaroid { position: relative; width: 100%; padding: .5rem .5rem 1.5rem; transform: rotate(4deg) translateX(clamp(0px, 3vw, 44px)); margin-top: -.6rem; background: #fbfaf6; } .mtb-polaroid::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #f3f0e8; box-shadow: 0 6px 16px rgba(0,0,0,.25); transform: rotate(-8deg) translate(-26px, 8px); } .mtb-polaroid img { aspect-ratio: 3 / 4; } .mtb-activiteiten { gap: .7rem; } .mtb-activiteit { padding: .5rem .9rem .5rem .5rem; border-radius: 8px; gap: .9rem; } .mtb-activiteit__tekst span { font-size: .9rem; } .mtb-badge { width: 52px; border-radius: 6px; padding: .3rem 0; } @media (max-width: 1000px) { .mtb-rit { grid-template-columns: 1fr; } .mtb-rit__links { padding: 2rem 1rem 2.2rem; } .mtb-rit__rechts { clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); padding: 3.4rem 1rem 2.2rem; } .mtb-polaroid { transform: rotate(3deg); } } @media (max-width: 640px) { .mtb-datum { width: 96px; } .mtb-datum__nr { font-size: 4.4rem; } .mtb-volgende .mtb-polaroid { max-width: 200px; } } /* tekstkolom ruimer: polaroid hangt deels over de tekstkolom en de schuine rand (zoals het ontwerp) */ .mtb-rit { --mtb-zij: max(2.5rem, calc((100vw - 1240px) / 2)); } .mtb-volgende { grid-template-columns: auto minmax(0, 1fr) 120px; } .mtb-polaroid { width: clamp(150px, 16vw, 190px); margin-left: calc(-1 * clamp(30px, 3.5vw, 60px)); } @media (max-width: 640px) { .mtb-volgende { grid-template-columns: auto 1fr; } .mtb-volgende .mtb-polaroid { width: 200px; margin-left: 0; } } .mtb-polaroid { transform: rotate(4deg) translateX(clamp(0px, 1vw, 12px)); } @media (min-width: 1200px) { .mtb-volgende { grid-template-columns: auto minmax(0, 1fr) 190px; } .mtb-polaroid { margin-left: 0; width: 180px; transform: rotate(4deg) translateX(8px); } } @media (max-width: 1000px) { .mtb-polaroid { transform: rotate(3deg); } } /* ===================================================================== HERO + HEADER – schaal en opbouw naar het ontwerp (1024 px: hero 535 hoog) ===================================================================== */ .mtb-hero { min-height: clamp(520px, 52vw, 780px); padding: 8rem 1rem clamp(2.2rem, 5.7vw, 5rem); display: flex; align-items: flex-end; background: radial-gradient(120% 90% at 85% 40%, #15305a 0%, #0b1a33 60%), #0b1a33; } .mtb-hero__label { font-size: clamp(.72rem, 1.2vw, .95rem); letter-spacing: .2em; margin: 0 0 .5rem; } .mtb-hero__kop { font-size: 7.6vw; line-height: .98; letter-spacing: .005em; max-width: 100%; } .mtb-hero__kop mark { font-size: 1.07em; line-height: .98; } .mtb-hero__sinds { font-size: 4.6vw; margin: .5rem 0 clamp(1rem, 2.6vw, 2.2rem); line-height: 1; color: #d9dadc; } .mtb-hero__knoppen { gap: clamp(.6rem, 1.4vw, 1.1rem); } .mtb-hero__knoppen .wp-block-button__link { font-size: clamp(.95rem, 1.6vw, 1.15rem); padding: .62em 1.55em; } .mtb-hero__slagzin { width: max-content; right: clamp(1rem, 3.4vw, 3rem); bottom: clamp(1.8rem, 7.5vw, 4.5rem); text-align: left; line-height: 1.15; font-size: clamp(1.3rem, 2.8vw, 2.3rem); transform: rotate(-8deg); } .mtb-hero__slagzin::after { margin: .3rem 0 0 .6em; height: 4px; width: 78%; } /* Header op de homepage: merk op de foto, menu + knop in een navy balk die doorloopt tot de rand */ .home .mtb-header { background: linear-gradient(to bottom, rgba(11,26,51,.8), rgba(11,26,51,0)) !important; padding-top: 1rem; padding-bottom: 1rem; } .mtb-header__balk { align-items: center; gap: 2rem; margin-left: auto; } .mtb-header__balk .mtb-nav { margin: 0; } .home .mtb-header__balk { position: relative; background: rgba(19,41,75,.94); padding: .55rem 0 .55rem 2.2rem; gap: 2.2rem; } .home .mtb-header__balk::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 60vw; background: inherit; } .home .mtb-header__rij { align-items: flex-start; } .home .mtb-header__balk .mtb-ledenknop { margin-right: 0; } /* Hamburger pas onder 960 px (menu + knop passen naast het merk) */ @media (min-width: 960px) and (max-width: 1099px) { .mtb-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; } .mtb-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: block; position: static; background: none; } .mtb-nav .wp-block-navigation__container { gap: 1.4rem; font-size: 1.05rem; } .mtb-header__balk { gap: 1.2rem; } .home .mtb-header__balk { padding-left: 1.4rem; } .mtb-merk__naam, .mtb-merk__naam a { font-size: 2.2rem; } } @media (max-width: 781px) { .mtb-hero { min-height: 560px; padding: 8rem 1rem 3rem; } .mtb-hero__kop { font-size: clamp(3.4rem, 17vw, 5.2rem); } .mtb-hero__sinds { font-size: clamp(2rem, 10vw, 3rem); } .mtb-hero__slagzin { font-size: 1.15rem; right: 1rem; bottom: 1rem; } .home .mtb-header__balk { background: transparent; padding: 0; } .home .mtb-header__balk::after { display: none; } } /* fijnslijpen hero: marge, kopmaat, fotoplaatsing */ .mtb-header, .mtb-hero { padding-inline: clamp(1rem, 4.4vw, 3rem); } .mtb-hero__kop { font-size: 8.1vw; } .mtb-hero::before { width: 66%; max-width: none; aspect-ratio: auto; background-size: cover; background-position: left center; } @media (min-width: 1500px) { .mtb-hero__kop { font-size: clamp(8.1vw, 8.1vw, 9.2rem); } } @media (min-width: 1700px) { .mtb-hero__kop { font-size: 9.2rem; } .mtb-hero__sinds { font-size: 5.4rem; } } @media (max-width: 781px) { .mtb-hero::before { width: 100%; background-position: 70% center; } } @media (max-width: 640px) { .mtb-header__rij { flex-wrap: wrap !important; gap: .5rem; } .mtb-merk { gap: .6rem; min-width: 0; } .mtb-merk__logo img { width: 48px !important; } .mtb-merk__naam, .mtb-merk__naam a { font-size: 1.55rem; } .mtb-merk__msv { font-size: .8rem; } .mtb-merk__sinds { font-size: .85rem; padding-left: 2.2rem; } .mtb-header__balk { gap: .4rem; flex: none; } .mtb-ledenknop { padding: .55rem .7rem; } .mtb-hero { padding-bottom: 5rem; } .mtb-hero__slagzin { right: 1rem; bottom: 1.1rem; font-size: 1.05rem; } } /* tablet: polaroid naast de tekst, niet eroverheen */ @media (min-width: 641px) and (max-width: 1000px) { .mtb-volgende { grid-template-columns: auto minmax(0, 1fr) 170px; } .mtb-polaroid { margin-left: 0; width: 160px; transform: rotate(3deg); } .mtb-rit__links { padding-right: 1.5rem; } } /* ===================================================================== HERO v3 – heldere foto over de volle breedte, alleen links donker voor de tekst ===================================================================== */ .mtb-hero { background: linear-gradient(90deg, rgba(10,22,44,.8) 0%, rgba(10,22,44,.62) 30%, rgba(10,22,44,.2) 55%, rgba(10,22,44,0) 70%), linear-gradient(to bottom, rgba(10,22,44,.45) 0%, rgba(10,22,44,0) 22%), url("../img/placeholder/hero-vlak.jpg") center / 100% 100% no-repeat, #16243a; } .mtb-hero::before { width: 64%; max-width: none; aspect-ratio: auto; background-size: cover; background-position: 15% center; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 10%, rgba(0,0,0,.45) 22%, rgba(0,0,0,.8) 36%, #000 50%), linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,.5) 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 10%, rgba(0,0,0,.45) 22%, rgba(0,0,0,.8) 36%, #000 50%), linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,.5) 100%); } .mtb-hero__label { text-shadow: 0 1px 6px rgba(0,0,0,.5); } .mtb-hero__slagzin, .mtb-merk__sinds { font-family: var(--wp--preset--font-family--script); font-weight: 400; } .mtb-hero__slagzin { font-size: clamp(1.5rem, 3.2vw, 2.7rem); line-height: 1.05; } .mtb-merk__sinds { font-size: 1.25rem; padding-left: 5.2rem; } /* groter logo en merk in de header (ontwerp) */ .mtb-merk__logo img { width: clamp(72px, 9.6vw, 130px) !important; } .mtb-merk__msv { font-size: clamp(1rem, 1.55vw, 1.25rem); } .mtb-merk__naam, .mtb-merk__naam a { font-size: clamp(2.2rem, 4.3vw, 3.4rem); } .mtb-merk--klein .mtb-merk__logo img { width: 64px !important; } .mtb-merk--klein .mtb-merk__naam, .mtb-merk--klein .mtb-merk__naam a { font-size: 1.7rem; } .mtb-merk--klein .mtb-merk__sinds { font-size: 1.05rem; padding-left: 2.8rem; } @media (max-width: 640px) { .mtb-merk__logo img { width: 48px !important; } .mtb-merk__naam, .mtb-merk__naam a { font-size: 1.55rem; } .mtb-merk__sinds { font-size: .95rem; padding-left: 2.4rem; } .mtb-hero__slagzin { font-size: 1.25rem; } } /* Overige activiteiten: paneel loopt tot de bovenrand, kaarten ruim van de schuine rand */ .mtb-rit > * { margin-block: 0 !important; } @media (min-width: 1001px) { .mtb-rit__rechts { padding-left: calc(68px + 2.4rem); } } @media (min-width: 1001px) and (max-width: 1199px) { .mtb-volgende { grid-template-columns: auto minmax(0, 1fr) 170px; } .mtb-polaroid { margin-left: 0; width: 160px; transform: rotate(4deg) translateX(0); } .mtb-rit { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } } /* ===================================================================== Polaroids bij "Volgende rit": twee echte foto's (voor + achter), wisselend uit de fotocollectie ===================================================================== */ .mtb-polaroid { background: none; padding: 0; box-shadow: none; } .mtb-polaroid::before { content: none; } .mtb-polaroid__voor, .mtb-polaroid__achter { margin: 0; background: #fbfaf6; padding: .5rem .5rem 1.5rem; box-shadow: 0 6px 18px rgba(0,0,0,.28); } .mtb-polaroid__voor { position: relative; z-index: 1; } .mtb-polaroid__achter { position: absolute; inset: 0; z-index: 0; background: #f3f0e8; transform: rotate(-8deg) translate(-26px, 8px); } .mtb-polaroid--enkel .mtb-polaroid__voor { box-shadow: 0 8px 22px rgba(0,0,0,.28); } .mtb-polaroid__voor img, .mtb-polaroid__achter img { display: block; width: 100%; height: 100%; object-fit: cover; } .mtb-polaroid__voor img { height: auto; aspect-ratio: 3 / 4; } /* ===================================================================== LEDENOMGEVING – groot, rustig en duidelijk (doelgroep o.a. 60+) ===================================================================== */ body.mtb-ledenpagina { font-size: 1.25rem; line-height: 1.55; background-color: var(--wp--preset--color--papier); background-image: var(--mtb-papier-textuur); } .mtb-ledenpagina .mtb-main { padding-block: clamp(2rem, 5vw, 4rem); padding-inline: 1rem; } .mtb-ledenpagina .mtb-main > h1, .mtb-ledenpagina .wp-block-post-title { font-size: clamp(2.4rem, 6vw, 3.8rem); margin-bottom: 1.2rem; max-width: 980px; margin-inline: auto; } .mtb-leden { max-width: 980px; margin-inline: auto; font-size: 1.25rem; } .mtb-grotenknop { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 60px; padding: .65rem 1.7rem; cursor: pointer; background: var(--wp--preset--color--rood); color: #fff !important; border: 2px solid var(--wp--preset--color--rood); border-radius: 999px; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.35rem; line-height: 1.1; text-decoration: none !important; } .mtb-grotenknop:hover { background: #b8141a; border-color: #b8141a; } .mtb-grotenknop--omlijnd { background: transparent; color: var(--wp--preset--color--navy) !important; border-color: var(--wp--preset--color--navy); } .mtb-grotenknop--omlijnd:hover { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: #fff !important; } .mtb-grotenknop--klein { min-height: 52px; font-size: 1.15rem; padding: .5rem 1.3rem; } .mtb-icoon-groot { flex: none; width: 1.6rem; height: 1.6rem; } /* Kop van de ledenpagina */ .mtb-leden__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-bottom: 1.8rem; } .mtb-leden__hallo { margin: 0 0 .2rem; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 1.5rem; color: var(--wp--preset--color--rood); } .mtb-leden__titel { margin: 0; font-size: clamp(2.8rem, 6.5vw, 4.4rem); } /* Grote tegel: laatste notulen */ .mtb-leden__groot { display: flex; align-items: center; gap: 1.5rem; padding: 1.6rem 2rem; margin-bottom: 1.5rem; border-radius: 14px; text-decoration: none !important; background: var(--wp--preset--color--navy); color: #fff !important; box-shadow: 0 6px 18px rgba(11,26,51,.25); } .mtb-leden__groot:hover { background: var(--wp--preset--color--navy-donker); } .mtb-leden__groot > .mtb-icoon-groot { width: 3.4rem; height: 3.4rem; } .mtb-leden__groot-tekst { display: grid; gap: .1rem; min-width: 0; } .mtb-leden__label { font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; color: #ffb4b6; } .mtb-leden__groot strong { font-family: var(--wp--preset--font-family--label); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; } .mtb-leden__groot small { font-size: 1.1rem; opacity: .85; } .mtb-leden__actie { margin-left: auto; display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.5rem; background: var(--wp--preset--color--rood); border-radius: 999px; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.3rem; white-space: nowrap; } .mtb-leden__groot--leeg { opacity: .75; } /* Tegels */ .mtb-leden__tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } .mtb-tegel { display: grid; grid-template-rows: auto 1fr auto; gap: .9rem; height: 100%; padding: 1.6rem; background: #fff; color: var(--wp--preset--color--navy) !important; border: 2px solid rgba(19,41,75,.18); border-radius: 14px; text-decoration: none !important; box-shadow: 0 2px 8px rgba(0,0,0,.06); } .mtb-tegel:hover { border-color: var(--wp--preset--color--rood); box-shadow: 0 6px 18px rgba(0,0,0,.12); } .mtb-tegel > .mtb-icoon-groot:first-child { width: 2.8rem; height: 2.8rem; color: var(--wp--preset--color--rood); } .mtb-tegel > .mtb-icoon-groot:last-child { justify-self: end; color: var(--wp--preset--color--navy); } .mtb-tegel__tekst { display: grid; gap: .3rem; } .mtb-tegel__tekst strong { font-family: var(--wp--preset--font-family--label); font-size: 1.7rem; line-height: 1.1; } .mtb-tegel__tekst span { font-size: 1.1rem; color: #3b4559; } .mtb-leden__beheer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px dashed rgba(19,41,75,.25); } .mtb-leden__beheer h2 { font-size: 1.8rem; margin: 0 0 1rem; } .mtb-leden__beheer p { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; } /* Documentenlijst */ .mtb-terug { margin: 0 0 1.5rem; } .mtb-leden__jaar { font-size: 2.4rem; margin: 2rem 0 .8rem; } .mtb-leden__jaar small { font-family: var(--wp--preset--font-family--tekst); font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: #5a6478; margin-left: .5rem; } .mtb-doclijst { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .8rem; } .mtb-doc { display: flex; align-items: center; gap: 1.2rem; padding: 1.1rem 1.5rem; min-height: 80px; background: #fff; color: var(--wp--preset--color--navy) !important; border: 2px solid rgba(19,41,75,.18); border-radius: 12px; text-decoration: none !important; } .mtb-doc:hover { border-color: var(--wp--preset--color--rood); box-shadow: 0 4px 14px rgba(0,0,0,.1); } .mtb-doc > .mtb-icoon-groot { width: 2.4rem; height: 2.4rem; color: var(--wp--preset--color--rood); } .mtb-doc__tekst { display: grid; gap: .1rem; min-width: 0; } .mtb-doc__tekst strong { font-family: var(--wp--preset--font-family--label); font-size: 1.6rem; line-height: 1.15; } .mtb-doc__tekst span { color: #3b4559; font-size: 1.1rem; } .mtb-doc__actie { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.25rem; white-space: nowrap; } .mtb-archief { margin-top: 2.5rem; padding: 1rem 1.5rem 1.5rem; background: rgba(19,41,75,.06); border-radius: 14px; } .mtb-leeg-groot { font-size: 1.3rem; padding: 1.2rem 0; } /* Inlogpagina */ .mtb-login { background: #fff; padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: 14px; box-shadow: 0 8px 26px rgba(11,26,51,.18); border-top: 6px solid var(--wp--preset--color--rood); } .mtb-login label { display: block; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.4rem; margin-bottom: .4rem; color: var(--wp--preset--color--navy); } .mtb-login input[type="text"], .mtb-login input[type="password"] { width: 100%; min-height: 62px; padding: .6rem 1rem; font: inherit; font-size: 1.4rem; border: 2px solid var(--wp--preset--color--navy); border-radius: 10px; background: #fff; color: var(--wp--preset--color--tekst); } .mtb-login__toon label { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--wp--preset--font-family--tekst); font-weight: 400; font-size: 1.2rem; } .mtb-login__toon input { width: 1.6rem; height: 1.6rem; } .mtb-login .mtb-grotenknop { width: 100%; } .mtb-login__vergeten { text-align: center; margin: 1rem 0 0; font-size: 1.25rem; } .mtb-login__vergeten a { color: var(--wp--preset--color--navy); font-weight: 700; } .mtb-melding { padding: 1rem 1.2rem; border-radius: 10px; font-size: 1.2rem; margin: 0 0 1.2rem; } .mtb-melding--fout { background: #fde8e8; border: 2px solid #c81e1e; color: #7a1010; } .mtb-melding--ok { background: #e7f6ec; border: 2px solid #1c7c3c; color: #0f4a23; } @media (max-width: 820px) { .mtb-leden__tegels { grid-template-columns: 1fr; } .mtb-tegel { grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; } .mtb-leden__groot { flex-wrap: wrap; padding: 1.3rem; } .mtb-leden__actie { margin-left: 0; width: 100%; justify-content: center; } .mtb-leden__kop .mtb-grotenknop { width: 100%; } .mtb-doc { flex-wrap: wrap; } .mtb-doc__actie { margin-left: 0; width: 100%; justify-content: flex-end; } } /* Ledenomgeving – bijstellingen na eerste controle */ .mtb-ledenpagina .wp-block-post-content > * { max-width: 980px !important; } .mtb-ledenpagina .mtb-main--leden .wp-block-post-content > .mtb-login { max-width: 620px !important; } .mtb-login input[type="text"], .mtb-login input[type="password"] { box-sizing: border-box; } .mtb-login__titel { font-size: clamp(2.2rem, 6vw, 3rem); margin: 0 0 .6rem; } .mtb-login__intro { font-size: 1.2rem; margin: 0 0 1.4rem; color: #3b4559; } .mtb-leden__tegels li { display: flex; } .mtb-tegel { height: auto; flex: 1; grid-template-rows: auto auto auto; align-content: start; min-height: 0; } .mtb-tegel__tekst { align-content: start; } .mtb-tegel > .mtb-icoon-groot:last-child { align-self: end; } .mtb-leden__beheer { margin-top: 3rem; } @media (max-width: 820px) { .mtb-leden__kop .mtb-grotenknop { width: auto; } .mtb-tegel { grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; } .mtb-tegel > .mtb-icoon-groot:last-child { align-self: center; } } .mtb-ledenpagina .mtb-main > .wp-block-post-content { max-width: 980px !important; width: 100%; } .mtb-ledenpagina .mtb-main--leden:has(.mtb-login) > .wp-block-post-content { max-width: 620px !important; } /* ===================================================================== FOTO'S UPLOADEN + ALBUM ===================================================================== */ .mtb-uploaden__kop { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 .4rem; } .mtb-uploaden__datum { margin: 0 0 1rem; color: #3b4559; } .mtb-uploaden__datum a { color: var(--wp--preset--color--navy); font-weight: 700; } .mtb-uploaden__uitleg { font-size: 1.25rem; margin: 0 0 1.5rem; max-width: 44rem; } .mtb-uploaden__suggestie { background: #eef4ff; border-left: 4px solid var(--wp--preset--color--navy); padding: .6rem .9rem; margin: 0 0 1rem; font-size: 1.05rem; max-width: 44rem; } .mtb-uploaden__activiteit-veld { margin: 0 0 1.2rem; } .mtb-uploaden__activiteit-veld label { display: block; font-weight: 700; margin-bottom: .3rem; } .mtb-uploaden__activiteit-veld select { width: 100%; max-width: 32rem; font: inherit; font-size: 1.1rem; padding: .5rem .6rem; border-radius: 6px; border: 1.5px solid rgba(19,41,75,.3); } .mtb-upload__invoer { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .mtb-upload__kies { width: 100%; min-height: 84px; font-size: 1.7rem; } .mtb-upload__invoer:focus-visible + .mtb-upload__telling, .mtb-upload__kies:focus-within { outline: 3px solid var(--wp--preset--color--navy); outline-offset: 3px; } .mtb-upload__kies[aria-disabled="true"] { opacity: .5; pointer-events: none; } .mtb-upload__telling { font-size: 1.3rem; font-weight: 700; margin: 1rem 0 .6rem; min-height: 1.5em; } .mtb-upload__start { width: 100%; min-height: 72px; font-size: 1.6rem; background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); } .mtb-upload__start:hover { background: var(--wp--preset--color--navy-donker); } .mtb-balk { height: 18px; background: rgba(19,41,75,.15); border-radius: 999px; overflow: hidden; margin: 1.2rem 0 .4rem; } .mtb-balk__vulling { height: 100%; width: 0; background: var(--wp--preset--color--rood); transition: width .25s; } .mtb-upload__lijst { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .4rem; font-size: 1.05rem; } .mtb-upload__regel { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .9rem; background: #fff; border-radius: 8px; border: 1px solid rgba(19,41,75,.15); } .mtb-upload__naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .mtb-upload__uitslag { white-space: nowrap; font-weight: 700; } .mtb-upload__uitslag.goed { color: #15803d; } .mtb-upload__uitslag.fout { color: #b91c1c; } .mtb-upload__albumlink { font-weight: 700; color: inherit; text-decoration: underline; } .mtb-terug-album a { font-weight: 700; } .mtb-fotogrid { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; } .mtb-fotogrid a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #1b2f55; } .mtb-fotogrid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .mtb-fotogrid a:hover img { transform: scale(1.04); } .mtb-grotenknop, .mtb-upload__kies, .mtb-upload__start { box-sizing: border-box; max-width: 100%; } /* Eén foto met witte rand en zachte schaduw (geen tweede foto erachter) */ .mtb-polaroid, .mtb-polaroid--enkel { margin: 0; background: #fbfaf6; padding: .55rem .55rem 1.6rem; box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.18); } .mtb-polaroid::before { content: none; } .mtb-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } /* ===================================================================== HERO op telefoon (≤ 781 px) – staat bewust helemaal onderaan zodat geen desktopregel dit overschrijft ===================================================================== */ @media (max-width: 781px) { .mtb-hero { min-height: 620px; padding: 8.5rem 1rem 3.2rem; align-items: flex-end; } /* foto: hele breedte, rijder gecentreerd, donkerder onderaan voor de leesbaarheid; geen masker (dat gaf een harde rand) */ .mtb-hero::before { width: 100%; max-width: none; aspect-ratio: auto; opacity: 1; -webkit-mask-image: none; mask-image: none; background: linear-gradient(to top, rgba(10,22,44,.92) 0%, rgba(10,22,44,.7) 38%, rgba(10,22,44,.12) 72%, rgba(10,22,44,.35) 100%), url("../img/placeholder/hero.jpg") 100% 40% / cover no-repeat; } .mtb-hero__label { font-size: .74rem; letter-spacing: .16em; margin-bottom: .6rem; } .mtb-hero__kop { font-size: 19.5vw; line-height: .92; } .mtb-hero__sinds { font-size: 10vw; margin: .5rem 0 1.5rem; } .mtb-hero__knoppen { gap: .6rem; } .mtb-hero__knoppen .wp-block-button__link { font-size: 1.02rem; padding: .7em 1.25em; } .mtb-hero__slagzin { right: 1rem; bottom: 3.4rem; font-size: 1.35rem; } .mtb-hero__slagzin::after { margin-left: .4em; } .mtb-hero::after { height: 46px; width: 60%; } } @media (max-width: 400px) { .mtb-hero__knoppen .wp-block-button__link { font-size: .95rem; padding: .7em 1.05em; } } @media (max-width: 781px) { .mtb-hero { min-height: 660px; padding-bottom: 6.4rem; } .mtb-hero::before { background-position: 0 0, 80% 40%; } .mtb-hero__slagzin { bottom: 1rem; right: 1.2rem; } .mtb-hero::after { height: 40px; } } @media (max-width: 781px) { .mtb-hero__kop { font-size: min(19.5vw, 8.2rem); } .mtb-hero__sinds { font-size: min(10vw, 4.2rem); } } /* Telefoon: kop terug op de oorspronkelijke (kleinere) maat; rest van de hero blijft zoals gekozen */ @media (max-width: 781px) { .mtb-hero { min-height: 580px; } .mtb-hero__kop { font-size: 8.1vw; line-height: .98; } .mtb-hero__sinds { font-size: min(10vw, 4.2rem); margin: .5rem 0 1.4rem; } } /* ===================================================================== HERO-LETTERS: bandenspoor als doorschijnende laag over de letters (vervangt de spikkels) Websitekleuren blijven leidend; het spoor staat in een iets andere tint van dezelfde kleur. Afmetingen in em zodat het meeschaalt met de lettergrootte. ===================================================================== */ .mtb-hero__kop, .mtb-hero__sinds { -webkit-mask-image: none; mask-image: none; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-repeat: no-repeat; } .mtb-hero__kop { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27300%27%20height=%27110%27%3E%3Cdefs%3E%3Cpattern%20id=%27p%27%20width=%2740%27%20height=%2752%27%20patternUnits=%27userSpaceOnUse%27%3E%3Cpath%20d=%27M-6%2011%20L20%202%20L46%2011%27%20fill=%27none%27%20stroke=%27%23c9cfdd%27%20stroke-width=%279%27/%3E%3Cpath%20d=%27M-6%2032%20L20%2023%20L46%2032%27%20fill=%27none%27%20stroke=%27%23c9cfdd%27%20stroke-width=%279%27/%3E%3Cpath%20d=%27M-6%2053%20L20%2044%20L46%2053%27%20fill=%27none%27%20stroke=%27%23c9cfdd%27%20stroke-width=%279%27/%3E%3C/pattern%3E%3C/defs%3E%3Crect%20width=%27300%27%20height=%27110%27%20fill=%27%23ffffff%27/%3E%3Cg%20transform=%27rotate%28-8%20150.0%2055.0%29%27%3E%3Crect%20x=%27-300%27%20y=%2722%27%20width=%27900%27%20height=%2752%27%20fill=%27url%28%23p%29%27/%3E%3Crect%20x=%27-300%27%20y=%2716%27%20width=%27900%27%20height=%273%27%20fill=%27%23c9cfdd%27/%3E%3Crect%20x=%27-300%27%20y=%2777%27%20width=%27900%27%20height=%273%27%20fill=%27%23c9cfdd%27/%3E%3C/g%3E%3Ccircle%20cx=%2740%27%20cy=%2793%27%20r=%270.8%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%2777%27%20cy=%2754%27%20r=%271.8%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%27142%27%20cy=%2742%27%20r=%271%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%2728%27%20cy=%273%27%20r=%271.8%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%27130%27%20cy=%2784%27%20r=%270.8%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%27209%27%20cy=%2729%27%20r=%271%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%27177%27%20cy=%2711%27%20r=%271.3%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%279%27%20cy=%273%27%20r=%272.4%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%273%27%20cy=%2797%27%20r=%271%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%27291%27%20cy=%2780%27%20r=%272.4%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%2767%27%20cy=%2748%27%20r=%271.8%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%27166%27%20cy=%2738%27%20r=%271%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%27228%27%20cy=%27105%27%20r=%270.8%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%27125%27%20cy=%27101%27%20r=%270.8%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%2756%27%20cy=%27109%27%20r=%271.3%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%2736%27%20cy=%2737%27%20r=%272.4%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%27281%27%20cy=%2746%27%20r=%271%27%20fill=%27%23c9cfdd%27/%3E%3Ccircle%20cx=%2791%27%20cy=%2765%27%20r=%271.8%27%20fill=%27%23c9cfdd%27/%3E%3Cpath%20d=%27M203%2056%20l16%20-10%27%20stroke=%27%23c9cfdd%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M8%2027%20l19%20-11%27%20stroke=%27%23c9cfdd%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M99%2019%20l16%20-9%27%20stroke=%27%23c9cfdd%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M169%2074%20l13%20-8%27%20stroke=%27%23c9cfdd%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M105%2056%20l19%20-11%27%20stroke=%27%23c9cfdd%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M125%2043%20l15%20-9%27%20stroke=%27%23c9cfdd%27%20stroke-width=%271.4%27/%3E%3C/svg%3E"); background-size: 2.68em .98em; background-position: 0 0; } .mtb-hero__kop mark { display: block; width: max-content; background-color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27450%27%20height=%27110%27%3E%3Cdefs%3E%3Cpattern%20id=%27p%27%20width=%2740%27%20height=%2752%27%20patternUnits=%27userSpaceOnUse%27%3E%3Cpath%20d=%27M-6%2011%20L20%202%20L46%2011%27%20fill=%27none%27%20stroke=%27%23ae141a%27%20stroke-width=%279%27/%3E%3Cpath%20d=%27M-6%2032%20L20%2023%20L46%2032%27%20fill=%27none%27%20stroke=%27%23ae141a%27%20stroke-width=%279%27/%3E%3Cpath%20d=%27M-6%2053%20L20%2044%20L46%2053%27%20fill=%27none%27%20stroke=%27%23ae141a%27%20stroke-width=%279%27/%3E%3C/pattern%3E%3C/defs%3E%3Crect%20width=%27450%27%20height=%27110%27%20fill=%27%23d7191f%27/%3E%3Cg%20transform=%27rotate%28-8%20225.0%2055.0%29%27%3E%3Crect%20x=%27-300%27%20y=%2722%27%20width=%271050%27%20height=%2752%27%20fill=%27url%28%23p%29%27/%3E%3Crect%20x=%27-300%27%20y=%2716%27%20width=%271050%27%20height=%273%27%20fill=%27%23ae141a%27/%3E%3Crect%20x=%27-300%27%20y=%2777%27%20width=%271050%27%20height=%273%27%20fill=%27%23ae141a%27/%3E%3C/g%3E%3Ccircle%20cx=%27430%27%20cy=%27104%27%20r=%270.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%2741%27%20cy=%2740%27%20r=%271%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27331%27%20cy=%2774%27%20r=%271.3%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27113%27%20cy=%2723%27%20r=%270.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27262%27%20cy=%2717%27%20r=%271.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27287%27%20cy=%2788%27%20r=%272.4%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27427%27%20cy=%2760%27%20r=%271.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27226%27%20cy=%2799%27%20r=%270.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27164%27%20cy=%27103%27%20r=%271.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27191%27%20cy=%2797%27%20r=%271%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27252%27%20cy=%2726%27%20r=%270.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%2780%27%20cy=%2719%27%20r=%272.4%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27230%27%20cy=%27110%27%20r=%272.4%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%2782%27%20cy=%2798%27%20r=%271.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27330%27%20cy=%27100%27%20r=%271.3%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27355%27%20cy=%2739%27%20r=%271.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%2773%27%20cy=%2783%27%20r=%271.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27295%27%20cy=%2727%27%20r=%271.3%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27416%27%20cy=%2755%27%20r=%271.3%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27298%27%20cy=%2750%27%20r=%271.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27158%27%20cy=%2780%27%20r=%272.4%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27326%27%20cy=%2754%27%20r=%271%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27423%27%20cy=%2790%27%20r=%271%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27395%27%20cy=%2768%27%20r=%271.8%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27139%27%20cy=%27105%27%20r=%272.4%27%20fill=%27%23ae141a%27/%3E%3Ccircle%20cx=%27253%27%20cy=%2756%27%20r=%272.4%27%20fill=%27%23ae141a%27/%3E%3Cpath%20d=%27M212%2034%20l11%20-7%27%20stroke=%27%23ae141a%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M184%20103%20l17%20-10%27%20stroke=%27%23ae141a%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M27%2090%20l18%20-11%27%20stroke=%27%23ae141a%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M327%2021%20l18%20-11%27%20stroke=%27%23ae141a%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M21%2072%20l12%20-7%27%20stroke=%27%23ae141a%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M82%2096%20l9%20-6%27%20stroke=%27%23ae141a%27%20stroke-width=%271.4%27/%3E%3C/svg%3E"); background-size: 4.2em .98em; background-position: 0 0; } .mtb-hero__sinds { width: max-content; max-width: 100%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27270%27%20height=%2764%27%3E%3Cdefs%3E%3Cpattern%20id=%27p%27%20width=%2740%27%20height=%2730%27%20patternUnits=%27userSpaceOnUse%27%3E%3Cpath%20d=%27M-6%207%20L20%201%20L46%207%27%20fill=%27none%27%20stroke=%27%23b6bcc9%27%20stroke-width=%279%27/%3E%3Cpath%20d=%27M-6%2019%20L20%2013%20L46%2019%27%20fill=%27none%27%20stroke=%27%23b6bcc9%27%20stroke-width=%279%27/%3E%3Cpath%20d=%27M-6%2031%20L20%2025%20L46%2031%27%20fill=%27none%27%20stroke=%27%23b6bcc9%27%20stroke-width=%279%27/%3E%3C/pattern%3E%3C/defs%3E%3Crect%20width=%27270%27%20height=%2764%27%20fill=%27%23d9dadc%27/%3E%3Cg%20transform=%27rotate%28-8%20135.0%2032.0%29%27%3E%3Crect%20x=%27-300%27%20y=%2710%27%20width=%27870%27%20height=%2730%27%20fill=%27url%28%23p%29%27/%3E%3Crect%20x=%27-300%27%20y=%274%27%20width=%27870%27%20height=%273%27%20fill=%27%23b6bcc9%27/%3E%3Crect%20x=%27-300%27%20y=%2743%27%20width=%27870%27%20height=%273%27%20fill=%27%23b6bcc9%27/%3E%3C/g%3E%3Ccircle%20cx=%2764%27%20cy=%2735%27%20r=%271.3%27%20fill=%27%23b6bcc9%27/%3E%3Ccircle%20cx=%27247%27%20cy=%2730%27%20r=%272.4%27%20fill=%27%23b6bcc9%27/%3E%3Ccircle%20cx=%2718%27%20cy=%271%27%20r=%271.8%27%20fill=%27%23b6bcc9%27/%3E%3Ccircle%20cx=%2770%27%20cy=%2715%27%20r=%271.8%27%20fill=%27%23b6bcc9%27/%3E%3Ccircle%20cx=%27146%27%20cy=%2735%27%20r=%271.8%27%20fill=%27%23b6bcc9%27/%3E%3Ccircle%20cx=%27173%27%20cy=%2710%27%20r=%271%27%20fill=%27%23b6bcc9%27/%3E%3Ccircle%20cx=%27234%27%20cy=%2733%27%20r=%270.8%27%20fill=%27%23b6bcc9%27/%3E%3Ccircle%20cx=%27181%27%20cy=%274%27%20r=%272.4%27%20fill=%27%23b6bcc9%27/%3E%3Ccircle%20cx=%2712%27%20cy=%2750%27%20r=%271.3%27%20fill=%27%23b6bcc9%27/%3E%3Ccircle%20cx=%27128%27%20cy=%2746%27%20r=%271.8%27%20fill=%27%23b6bcc9%27/%3E%3Ccircle%20cx=%27193%27%20cy=%2759%27%20r=%271.8%27%20fill=%27%23b6bcc9%27/%3E%3Ccircle%20cx=%27197%27%20cy=%2737%27%20r=%271%27%20fill=%27%23b6bcc9%27/%3E%3Cpath%20d=%27M190%206%20l10%20-6%27%20stroke=%27%23b6bcc9%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M47%2062%20l14%20-8%27%20stroke=%27%23b6bcc9%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M135%2019%20l15%20-9%27%20stroke=%27%23b6bcc9%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M83%2022%20l16%20-10%27%20stroke=%27%23b6bcc9%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M126%2058%20l18%20-11%27%20stroke=%27%23b6bcc9%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M201%2055%20l22%20-13%27%20stroke=%27%23b6bcc9%27%20stroke-width=%271.4%27/%3E%3C/svg%3E"); background-size: 4.35em 1.03em; background-position: 0 50%; color: transparent; } /* Ledenpagina: vier tegels in 2 kolommen; archief per jaar */ @media (min-width: 821px) { .mtb-leden__tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mtb-archief__jaar { font-size: 1.8rem; margin: 1.6rem 0 .6rem; } /* Logo is nu een transparante SVG (schild zonder wit blok): geen afgeronde hoeken of achtergrond nodig */ .mtb-merk__logo img { border-radius: 0; background: none; } .mtb-merk__logo img { width: auto !important; height: clamp(84px, 11vw, 150px) !important; } .mtb-merk--klein .mtb-merk__logo img { height: 74px !important; width: auto !important; } @media (max-width: 640px) { .mtb-merk__logo img { height: 62px !important; width: auto !important; } } .mtb-polaroid-foto--logo { background: #fbfaf6; } .mtb-polaroid-foto--logo img { padding: 6%; } /* Controledocument voor het bestuur (aanmelding en privacy) */ .mtb-controle { font-size: 1rem; } .mtb-controle .kader { background: var(--wp--preset--color--papier); border-left: 4px solid var(--wp--preset--color--rood); padding: .9rem 1.1rem; margin: 1.2rem 0 1.6rem; } .mtb-controle .kader p { margin: .3rem 0; } .mtb-controle h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 2.2rem 0 .8rem; } .mtb-controle__scroll { overflow-x: auto; } .mtb-controle table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: .92rem; line-height: 1.4; } .mtb-controle th, .mtb-controle td { border: 1px solid #b9c0cc; padding: .5rem .6rem; text-align: left; vertical-align: top; } .mtb-controle th { background: var(--wp--preset--color--navy); color: #fff; font-weight: 700; } .mtb-controle td:first-child, .mtb-controle th:first-child { width: 3.2rem; text-align: center; } .mtb-controle table.p td:first-child, .mtb-controle table.p th:first-child { width: 9rem; text-align: left; font-weight: 700; } .mtb-controle td:nth-child(2) { font-weight: 700; } .mtb-controle table.p td:nth-child(2) { font-weight: 400; } .mtb-controle tr.voorstel td { background: #fff6e5; } .mtb-controle td:last-child { color: #3b4559; } .mtb-controle table.b td:last-child { color: inherit; } .mtb-knoprij { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0 0; } /* ===================================================================== AGENDA en activiteitenpagina ===================================================================== */ .mtb-agenda__filter { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.4rem; } .mtb-agenda__filter a { padding: .45rem 1.1rem; border: 2px solid var(--wp--preset--color--navy); border-radius: 999px; color: var(--wp--preset--color--navy); text-decoration: none; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.05rem; } .mtb-agenda__filter a:hover, .mtb-agenda__filter a.is-actief { background: var(--wp--preset--color--navy); color: #fff; } .mtb-agenda__kop { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 2rem 0 .8rem; } .mtb-agenda__lijst { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; } .mtb-agenda__rij { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem .6rem .6rem; background: #fff; border: 1px solid rgba(19,41,75,.18); border-radius: 10px; color: var(--wp--preset--color--navy); text-decoration: none; } .mtb-agenda__rij:hover { border-color: var(--wp--preset--color--rood); box-shadow: 0 3px 12px rgba(0,0,0,.1); } .mtb-agenda__rij.is-afgelast { opacity: .65; } .mtb-agenda__rij.is-afgelast strong { text-decoration: line-through; } .mtb-agenda__tekst { flex: 1; display: grid; gap: .1rem; min-width: 0; } .mtb-agenda__tekst strong { font-family: var(--wp--preset--font-family--label); font-size: 1.3rem; line-height: 1.15; } .mtb-agenda__tekst span { font-size: 1rem; color: #3b4559; } .mtb-agenda__status { font-style: normal; font-size: .85rem; background: var(--wp--preset--color--rood); color: #fff; padding: .05rem .5rem; border-radius: 4px; margin-left: .4rem; text-decoration: none; display: inline-block; } .mtb-badge--licht { background: var(--wp--preset--color--navy); color: #fff; width: 64px; } .mtb-badge--licht .mtb-badge__maand { color: #ff9ea1; } .mtb-badge--licht strong { font-size: 1.7rem; } .mtb-agenda__jaar { border: 1px solid rgba(19,41,75,.18); border-radius: 10px; margin: 0 0 .6rem; background: rgba(255,255,255,.6); } .mtb-agenda__jaar summary { cursor: pointer; padding: .8rem 1rem; font-size: 1.2rem; list-style: none; display: flex; justify-content: space-between; align-items: baseline; } .mtb-agenda__jaar summary strong { font-family: var(--wp--preset--font-family--kop); font-size: 1.9rem; color: var(--wp--preset--color--navy); font-weight: 400; } .mtb-agenda__jaar summary span { color: #3b4559; } .mtb-agenda__jaar[open] summary { border-bottom: 1px solid rgba(19,41,75,.12); } .mtb-agenda__jaar .mtb-agenda__lijst { padding: .8rem; margin: 0; } .mtb-actdetail { margin: 0 0 1.5rem; } .mtb-ritregels--groot li { font-size: 1.2rem; } .mtb-ritregels--groot { flex-direction: column; gap: .6rem; } .mtb-actdetail .mtb-knoprij { margin-top: 1.2rem; } /* Foto's: let-op-tekst, auteur voor bestuur, verwijderknop bij eigen foto's */ .mtb-uploaden__let-op { background: #fff6e5; border-left: 4px solid var(--wp--preset--color--rood); padding: .8rem 1rem; max-width: 44rem; font-size: 1.1rem; } .mtb-fotogrid li { position: relative; } .mtb-fotogrid__door { display: block; font-size: .85rem; color: #3b4559; margin-top: .2rem; } .mtb-fotogrid__wacht { display: inline-block; margin-top: .3rem; padding: .15rem .55rem; font-size: .8rem; font-weight: 600; color: #92400e; background: #fef3c7; border-radius: 999px; } .mtb-fotogrid__verwijder { margin: .3rem 0 0; } .mtb-fotogrid__verwijder button { font: inherit; font-size: .95rem; padding: .35rem .8rem; border: 1.5px solid #b91c1c; color: #b91c1c; background: #fff; border-radius: 6px; cursor: pointer; } .mtb-fotogrid__verwijder button:hover { background: #b91c1c; color: #fff; } .mtb-fotogrid a { aspect-ratio: 4 / 3; } /* Fotoalbums: overzicht en albuminfo */ .mtb-fotoalbums__grid { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.2rem; } .mtb-fotoalbum { display: grid; grid-template-rows: auto 1fr; height: 100%; background: #fff; border: 1px solid rgba(19,41,75,.18); border-radius: 10px; overflow: hidden; color: var(--wp--preset--color--navy); text-decoration: none; } .mtb-fotoalbum:hover { border-color: var(--wp--preset--color--rood); box-shadow: 0 6px 18px rgba(0,0,0,.12); } .mtb-fotoalbum__beeld { position: relative; display: block; aspect-ratio: 5 / 3; background: #1b2f55; overflow: hidden; } .mtb-fotoalbum__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .mtb-fotoalbum:hover img { transform: scale(1.04); } .mtb-fotoalbum__leden { position: absolute; top: .6rem; left: .6rem; background: var(--wp--preset--color--navy); color: #fff; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .6rem; border-radius: 4px; } .mtb-fotoalbum__tekst { display: grid; gap: .2rem; padding: .8rem 1rem 1rem; align-content: start; } .mtb-fotoalbum__tekst strong { font-family: var(--wp--preset--font-family--label); font-size: 1.3rem; line-height: 1.15; } .mtb-fotoalbum__tekst span { font-size: 1rem; color: #3b4559; } .mtb-agenda__filter small { opacity: .75; } .mtb-albuminfo { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0 0 1.2rem; font-size: 1.1rem; align-items: center; } .mtb-albuminfo span { display: inline-flex; align-items: center; gap: .5rem; } .mtb-albuminfo svg { color: var(--wp--preset--color--rood); } .mtb-albuminfo__leden { background: var(--wp--preset--color--navy); color: #fff; padding: .1rem .7rem; border-radius: 4px; font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } /* Jubilea (bestuur) */ .mtb-jub__lijst { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; } .mtb-jub__lijst li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; border: 1px solid rgba(19,41,75,.18); border-radius: 10px; padding: .8rem 1.1rem; font-size: 1.2rem; } .mtb-jub__naam { font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.3rem; } .mtb-jub__jaren small { color: #3b4559; } .mtb-jub__uitleg { color: #3b4559; font-size: 1.05rem; } .mtb-jub__duur { display: grid; gap: .5rem; margin: 0 0 1rem; } .mtb-jub__groep { background: #fff; border: 1px solid rgba(19,41,75,.18); border-radius: 10px; } .mtb-jub__groep > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.1rem; font-size: 1.2rem; cursor: pointer; list-style: none; } .mtb-jub__groep > summary::-webkit-details-marker { display: none; } .mtb-jub__groep > summary .mtb-jub__naam::before { content: "▸"; display: inline-block; width: 1.2em; color: var(--wp--preset--color--rood, #d7191f); transition: transform .15s; } .mtb-jub__groep[open] > summary .mtb-jub__naam::before { transform: rotate(90deg); } .mtb-jub__groep > .mtb-jub__lijst { margin: 0; padding: 0 .8rem .8rem; } .mtb-jub__groep > .mtb-jub__lijst li { font-size: 1.1rem; } @media (max-width: 600px) { .mtb-jub__groep > .mtb-jub__lijst li { flex-direction: column; align-items: flex-start; gap: .15rem; padding: .6rem .8rem; } } .mtb-jub__lijst--invul input { width: 8rem; min-height: 48px; font: inherit; font-size: 1.2rem; padding: .3rem .7rem; border: 2px solid var(--wp--preset--color--navy); border-radius: 8px; } .mtb-jub .mtb-leden__jaar small { font-size: 1.05rem; } /* Fotogalerij (groot beeld met vorige/volgende) */ .mtb-lightbox-open { overflow: hidden; } .mtb-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(8,16,32,.96); display: flex; align-items: center; justify-content: center; } .mtb-lightbox[hidden] { display: none; } .mtb-lightbox__beeld { margin: 0; max-width: calc(100vw - 9rem); max-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .mtb-lightbox__beeld img { max-width: 100%; max-height: calc(100vh - 6rem); object-fit: contain; display: block; border-radius: 4px; } .mtb-lightbox__teller { color: #fff; font-size: 1.15rem; margin-top: .7rem; } .mtb-lightbox button { font: inherit; cursor: pointer; border: 2px solid #fff; background: rgba(19,41,75,.9); color: #fff; } .mtb-lightbox button:hover, .mtb-lightbox button:focus-visible { background: #fff; color: #13294b; outline: 3px solid #f2b705; outline-offset: 2px; } .mtb-lightbox__sluit { position: absolute; top: 1rem; right: 1rem; font-size: 1.3rem; min-height: 56px; padding: .4rem 1.2rem; border-radius: 10px; } .mtb-lightbox__knop { position: absolute; top: 50%; transform: translateY(-50%); width: 64px; height: 96px; font-size: 3.2rem; line-height: 1; border-radius: 12px; } .mtb-lightbox__vorige { left: .75rem; } .mtb-lightbox__volgende { right: .75rem; } @media (max-width: 640px) { .mtb-lightbox__beeld { max-width: 100vw; } .mtb-lightbox__beeld img { max-height: calc(100vh - 11rem); } .mtb-lightbox__knop { top: auto; bottom: 1rem; transform: none; width: 30%; height: 64px; } .mtb-lightbox__vorige { left: 1rem; } .mtb-lightbox__volgende { right: 1rem; } } /* Jubileumoverzicht: maandkoppen, geweest en binnenkort */ .mtb-jub__maand { font-family: var(--wp--preset--font-family--label); font-size: 1.3rem; margin: 1.2rem 0 .5rem; color: #13294b; } .mtb-jub--geweest { opacity: .6; } /* Bestuur: foto's selecteren en verwijderen */ .mtb-selectie__balk { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin: 1.2rem 0 0; padding: .8rem 1rem; background: #fff; border: 1px solid rgba(19,41,75,.18); border-radius: 10px; } .mtb-selectie__acties { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; } .mtb-selectie__acties[hidden], .mtb-fotogrid__kies[hidden] { display: none; } .mtb-selectie__teller { font-size: 1.15rem; font-weight: 700; min-width: 8.5rem; } .mtb-selectie__verwijder { background: #b91c1c; border-color: #b91c1c; color: #fff; } .mtb-selectie__verwijder:disabled { background: #d8d8d8; border-color: #d8d8d8; color: #555; cursor: not-allowed; } .mtb-selectie .mtb-fotogrid { margin-top: 1rem; } .mtb-fotogrid__kies { position: absolute; top: .5rem; left: .5rem; display: flex; align-items: center; gap: .5rem; padding: .3rem .6rem; background: rgba(255,255,255,.95); border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer; } .mtb-fotogrid__kies input { width: 1.6rem; height: 1.6rem; accent-color: #b91c1c; } .is-selecteren .mtb-fotogrid a { cursor: pointer; } .mtb-fotogrid li.is-gekozen a { outline: 4px solid #b91c1c; outline-offset: -4px; } .mtb-fotogrid li.is-gekozen img { opacity: .75; } .mtb-fotogrid__eigen { font: inherit; font-size: .95rem; margin-top: .3rem; padding: .35rem .8rem; border: 1.5px solid #b91c1c; color: #b91c1c; background: #fff; border-radius: 6px; cursor: pointer; } .mtb-fotogrid__eigen:hover { background: #b91c1c; color: #fff; } .mtb-fotogrid__verwijder { display: none; } /* Albumtitel: voor elk album dezelfde, rustige grootte; past meestal op één regel */ .mtb-main--album h1, .mtb-main--album .wp-block-post-title { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); line-height: 1.15; letter-spacing: .01em; margin-bottom: .6rem; } /* Homepage-kop ongeveer 20% kleiner op beeldschermen (12 okt): 8.1vw -> 6.4vw, "Sinds 1974" 4.6vw -> 3.6vw. Telefoon blijft zoals het was. */ @media (min-width: 782px) { .mtb-hero__kop { font-size: 6.4vw; } .mtb-hero__sinds { font-size: 3.6vw; } } @media (min-width: 1700px) { .mtb-hero__kop { font-size: 7.4rem; } } /* Jubilea = goud/amber, verjaardagen = groenblauw; naast kleur ook een label, zodat het ook zonder kleur te onderscheiden is */ .mtb-jub__lijst li.mtb-jub--jubileum { background: #fff8e0; border-color: #e8c35a; border-left: 8px solid #d99a00; } .mtb-jub__lijst li.mtb-jub--verjaardag { background: #e8f5f3; border-color: #8cc9c0; border-left: 8px solid #0f766e; } .mtb-jub__soort { display: inline-block; vertical-align: middle; margin-right: .5rem; padding: .1rem .6rem; border-radius: 999px; font-family: var(--wp--preset--font-family--label); font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .mtb-jub__soort--jubileum { background: #d99a00; color: #1a1f2b; } .mtb-jub__soort--verjaardag { background: #0f766e; color: #fff; } .mtb-jub__kop--jubileum { border-bottom: 4px solid #d99a00; padding-bottom: .3rem; } .mtb-jub__kop--verjaardag { border-bottom: 4px solid #0f766e; padding-bottom: .3rem; } .mtb-jub__maand--verjaardag { color: #0f766e; } /* Menu: items nooit afbreken; op de homepage (navy balk) iets minder ruimte, zodat ook het extra bestuursitem "Jubilea" past */ .mtb-nav .wp-block-navigation-item__content { white-space: nowrap; } @media (min-width: 960px) and (max-width: 1399px) { .home .mtb-header__balk { gap: 1.4rem; padding-left: 1.6rem; } .mtb-nav .wp-block-navigation__container { gap: 1.5rem; } } .mtb-jub__lijst li.mtb-jub--aspirant { background: #eef1fb; border-color: #aab6e6; border-left: 8px solid #3b4fa8; } .mtb-jub__soort--aspirant { background: #3b4fa8; color: #fff; } .mtb-jub__soort--lidtype { background: #5a4a8a; color: #fff; } .mtb-jub__kop--aspirant { border-bottom: 4px solid #3b4fa8; padding-bottom: .3rem; } .mtb-jub__lidworden { margin: 0; } .mtb-jub__lijst li.mtb-jub--aspirant { flex-wrap: wrap; } .mtb-jub__acties { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; justify-content: flex-end; } /* Mijn documenten (alleen eigenaar) */ .mtb-prive__lijst { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem; } .mtb-prive__item { background: #fff; border: 1px solid rgba(19,41,75,.18); border-radius: 10px; padding: 1rem 1.2rem; } .mtb-prive__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; font-size: 1.25rem; } .mtb-prive__soort { color: #3b4559; font-size: 1rem; } .mtb-prive__nu { margin-left: auto; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .7rem; border-radius: 999px; background: #5a4a8a; color: #fff; } .mtb-prive__nu--leden { background: #1d6b45; } .mtb-prive__form { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: end; } .mtb-prive__form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; } .mtb-prive__form legend { font-weight: 700; font-size: 1rem; margin-bottom: .3rem; padding: 0; } .mtb-prive__keuze { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.2rem; cursor: pointer; min-height: 48px; } .mtb-prive__keuze input { width: 1.6rem; height: 1.6rem; accent-color: #d7191f; } .mtb-prive__links { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; } .mtb-prive__link { display: grid; gap: .25rem; height: 100%; background: #fff; border: 1px solid rgba(19,41,75,.18); border-radius: 10px; padding: 1rem 1.2rem; color: var(--wp--preset--color--navy); text-decoration: none; } .mtb-prive__link:hover { border-color: var(--wp--preset--color--rood); box-shadow: 0 6px 18px rgba(0,0,0,.12); } .mtb-prive__link strong { font-family: var(--wp--preset--font-family--label); font-size: 1.5rem; line-height: 1.1; } .mtb-prive__link span { font-size: 1.05rem; color: #3b4559; } /* Aanmeldformulier nieuw lid: bredere indeling met kaarten per stap */ .mtb-aanmeld { max-width: 62rem; margin-inline: auto; } .mtb-aanmeld__test { background: #fff6e5; border-left: 5px solid #d99a00; padding: .8rem 1rem; font-size: 1.05rem; margin: 0 0 1.4rem; } .mtb-aanmeld__kop { display: grid; gap: 1rem; margin-bottom: 1.4rem; } .mtb-aanmeld__intro { font-size: 1.25rem; margin: 0; max-width: 46rem; } .mtb-aanmeld__voortgang { display: grid; gap: .45rem; } .mtb-aanmeld__voortgang[hidden] { display: none; } .mtb-aanmeld__voortgang-tekst { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 1.15rem; color: var(--wp--preset--color--navy); } .mtb-aanmeld__balk { display: block; height: 10px; border-radius: 999px; background: rgba(19,41,75,.14); overflow: hidden; } .mtb-aanmeld__balk > span { display: block; height: 100%; width: 0; background: var(--wp--preset--color--navy); border-radius: 999px; transition: width .25s ease; } .mtb-aanmeld__voortgang.is-klaar .mtb-aanmeld__balk > span { background: #1d6b45; } .mtb-aanmeld__voortgang.is-klaar .mtb-aanmeld__voortgang-tekst { color: #1d6b45; } .mtb-aanmeld__form { display: grid; gap: 1.3rem; } .mtb-aanmeld__kaart { background: #fff; border: 1px solid rgba(19,41,75,.14); border-radius: 16px; padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.8rem; box-shadow: 0 2px 10px rgba(19,41,75,.06); } .mtb-aanmeld__stap { display: flex; align-items: center; gap: .8rem; font-size: clamp(1.7rem, 4vw, 2.1rem); color: var(--wp--preset--color--navy); margin: 0 0 1.2rem; } .mtb-aanmeld__nr { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; background: var(--wp--preset--color--navy); color: #fff; font-family: var(--wp--preset--font-family--label); font-size: 1.3rem; line-height: 1; } .mtb-aanmeld__rij { display: grid; gap: 1rem 1.2rem; margin-bottom: 1rem; } .mtb-aanmeld__rij:last-child { margin-bottom: 0; } @media (min-width: 720px) { .mtb-aanmeld__rij--naam { grid-template-columns: 1.15fr .55fr 1.3fr; } .mtb-aanmeld__rij--plaats { grid-template-columns: .7fr 1.3fr; } .mtb-aanmeld__rij--contact { grid-template-columns: 1fr 1fr; } .mtb-aanmeld__rij--verjaardag { grid-template-columns: minmax(0, 28rem); } } .mtb-aanmeld__veld { margin: 0; min-width: 0; } .mtb-aanmeld__veld label, .mtb-aanmeld__label { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: .35rem; } .mtb-aanmeld__label small { font-weight: 400; color: #3b4559; font-size: .95rem; } .mtb-aanmeld__hulp { color: #3b4559; font-size: 1.05rem; margin: 0 0 .6rem; } .mtb-aanmeld input[type=text], .mtb-aanmeld input[type=email], .mtb-aanmeld input[type=tel], .mtb-aanmeld select, .mtb-aanmeld textarea { width: 100%; box-sizing: border-box; min-height: 54px; font: inherit; font-size: 1.2rem; padding: .5rem .9rem; border: 2px solid rgba(19,41,75,.35); border-radius: 10px; background: #fff; color: #1a1f2b; transition: border-color .12s, box-shadow .12s; } .mtb-aanmeld input:hover, .mtb-aanmeld select:hover, .mtb-aanmeld textarea:hover { border-color: rgba(19,41,75,.7); } .mtb-aanmeld input:focus-visible, .mtb-aanmeld select:focus-visible, .mtb-aanmeld textarea:focus-visible { outline: none; border-color: var(--wp--preset--color--navy); box-shadow: 0 0 0 4px #f2b705; } .mtb-aanmeld__ster { color: var(--wp--preset--color--rood); font-weight: 700; } .mtb-aanmeld__verjaardag { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: .8rem; } .mtb-aanmeld__toestemmingen { display: grid; } .mtb-aanmeld__keuze { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; padding: 1rem 0; border-top: 1px solid rgba(19,41,75,.12); } .mtb-aanmeld__keuze:first-child { border-top: 0; } .mtb-aanmeld__vraag { flex: 1 1 22rem; margin: 0; font-size: 1.15rem; font-weight: 500; min-width: 0; } .mtb-aanmeld__ja-nee { display: inline-flex; border: 2px solid var(--wp--preset--color--navy); border-radius: 10px; overflow: hidden; flex: none; } .mtb-aanmeld__radio { position: relative; display: block !important; margin: 0 !important; cursor: pointer; } .mtb-aanmeld__radio + .mtb-aanmeld__radio { border-left: 2px solid var(--wp--preset--color--navy); } .mtb-aanmeld__radio input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .mtb-aanmeld__radio span { display: grid; place-items: center; min-width: 5.5rem; min-height: 52px; padding: .3rem 1.2rem; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.3rem; background: #fff; color: var(--wp--preset--color--navy); } .mtb-aanmeld__radio input:checked + span { background: var(--wp--preset--color--navy); color: #fff; } .mtb-aanmeld__radio input:focus-visible + span { box-shadow: inset 0 0 0 4px #f2b705; } .mtb-aanmeld__vink { display: flex !important; align-items: flex-start; gap: .8rem; font-weight: 400 !important; font-size: 1.15rem !important; margin: 0 0 .9rem !important; cursor: pointer; } .mtb-aanmeld textarea { min-height: 10rem; padding: .7rem .9rem; line-height: 1.5; resize: vertical; } .mtb-meerinfo__kosten { margin: 1.25rem 0 1.5rem; } .mtb-aanmeld input[type=checkbox] { width: 1.7rem; height: 1.7rem; accent-color: var(--wp--preset--color--navy); flex: none; margin-top: .1rem; } .mtb-aanmeld .heeft-fout input[type=text], .mtb-aanmeld .heeft-fout input[type=email], .mtb-aanmeld .heeft-fout input[type=tel], .mtb-aanmeld .heeft-fout select { border-color: #b91c1c; background: #fff5f5; } .mtb-aanmeld__keuze.heeft-fout { background: #fff5f5; border-radius: 10px; padding-inline: .8rem; } .mtb-aanmeld__fout { color: #b91c1c; font-weight: 700; font-size: 1.05rem; margin: .4rem 0 0; flex-basis: 100%; } .mtb-aanmeld__verzendrij { display: flex; justify-content: flex-end; margin-top: 1.4rem; } .mtb-aanmeld__verzend { min-width: 16rem; font-size: 1.3rem; } .mtb-aanmeld__val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 520px) { .mtb-aanmeld__verjaardag { grid-template-columns: 1fr; } .mtb-aanmeld__verzendrij { justify-content: stretch; } .mtb-aanmeld__verzend { width: 100%; } .mtb-aanmeld__ja-nee { width: 100%; } .mtb-aanmeld__radio { flex: 1; } } /* Homepage: de navy menubalk loopt met een verlengstuk (60vw) naar rechts door. Dat stuk wordt afgeknipt, zodat de pagina nooit breder is dan het scherm. Alleen horizontaal: het uitklapmenu eronder blijft zichtbaar. */ .home .mtb-header { overflow-x: clip; } /* Voet: klein linkje naar de privacyverklaring */ .mtb-footer__klein { margin: 1.4rem auto 0; font-size: .95rem; text-align: left; max-width: 1240px; } .mtb-footer__klein a { color: rgba(255,255,255,.82); text-underline-offset: 3px; } .mtb-footer__klein a:hover, .mtb-footer__klein a:focus-visible { color: #fff; } /* Route bij een activiteit */ .mtb-route { margin: 2rem 0 1.5rem; padding-top: 1.4rem; border-top: 3px solid var(--wp--preset--color--navy); } .mtb-route__kop { font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--wp--preset--color--navy); margin: 0 0 1rem; } .mtb-route__rij { display: grid; gap: 1.2rem 2rem; align-items: start; } @media (min-width: 860px) { .mtb-route__rij { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } } .mtb-route__kaart { display: block; border-radius: 12px; overflow: hidden; border: 1px solid rgba(19,41,75,.18); box-shadow: 0 2px 10px rgba(19,41,75,.08); } .mtb-route__kaart img { display: block; width: 100%; height: auto; } .mtb-route__lijst { margin: 0; display: grid; gap: .9rem; } .mtb-route__lijst > div { display: grid; gap: .1rem; } .mtb-route__lijst dt { font-family: var(--wp--preset--font-family--label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; color: #3b4559; } .mtb-route__lijst dd { margin: 0; font-size: 1.2rem; } .mtb-route__lijst ul { margin: 0; padding-left: 1.2rem; } .mtb-route__bron { margin: .3rem 0 0; font-size: .9rem; color: #3b4559; } /* Activiteit met route: gegevens links, kaart over de volle hoogte rechts die links uitloopt in het donkerblauw (kaart omgekeerd naar een donkere variant). Zonder route blijft de gewone opmaak. */ .mtb-actpaneel { position: relative; display: flex; background: #0f2342; color: #fff; border-radius: 18px; overflow: hidden; min-height: 21rem; } .mtb-actpaneel__kaart { position: absolute; inset: 0; display: block; } .mtb-actpaneel__kaart img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 3% 50%; filter: invert(.92) hue-rotate(180deg) saturate(1.3); -webkit-mask-image: linear-gradient(to right, transparent 24%, #000 50%); mask-image: linear-gradient(to right, transparent 24%, #000 50%); } .mtb-actpaneel__tekst { box-sizing: border-box; position: relative; z-index: 2; width: min(100%, 31rem); padding: clamp(1.5rem, 3.5vw, 2.6rem); display: grid; gap: 1.1rem; align-content: center; pointer-events: none; } .mtb-actpaneel__tekst a { pointer-events: auto; } .mtb-actpaneel__tekst, .mtb-actpaneel__tekst span, .mtb-actpaneel__tekst li { color: #fff; } .mtb-actpaneel .mtb-knoprij { display: flex; flex-wrap: nowrap; gap: .6rem; margin: .3rem 0 0; } .mtb-actpaneel .mtb-knoprij a { white-space: nowrap; padding: .6rem 1.05rem; font-size: 1.05rem; min-height: 0; } .mtb-actdetail .mtb-actpaneel__tekst .mtb-grotenknop--omlijnd { color: #fff !important; border-color: rgba(255,255,255,.85); background: rgba(15,35,66,.65); } .mtb-actdetail .mtb-actpaneel__tekst .mtb-grotenknop--omlijnd:hover { background: #fff; color: #0f2342 !important; } @media (max-width: 859px) { .mtb-actpaneel { flex-direction: column; min-height: 0; padding-bottom: 0; } .mtb-actpaneel__tekst { width: 100%; padding-bottom: .8rem; } .mtb-actpaneel__kaart { position: relative; inset: auto; height: 15rem; } .mtb-actpaneel__kaart img { object-position: 50% 50%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42%); mask-image: linear-gradient(to bottom, transparent 0, #000 42%); } } @media (max-width: 520px) { .mtb-actpaneel .mtb-knoprij { flex-wrap: wrap; } .mtb-actpaneel .mtb-knoprij a { flex: 1 1 auto; text-align: center; } } .mtb-route--zonderkaart { border-top: 0; margin-top: 1.8rem; padding-top: 0; } .mtb-route--zonderkaart .mtb-route__kop { display: none; } .mtb-route--zonderkaart .mtb-route__rij { display: block; } .mtb-route--zonderkaart .mtb-route__lijst { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.4rem 2.4rem; align-items: start; } .mtb-route--zonderkaart .mtb-route__lijst > div { align-content: start; } .mtb-route--zonderkaart .mtb-route__lijst > div:last-child { grid-column: 1 / -1; } .mtb-route__hint { margin: 1.2rem 0 0; padding: .8rem 1.1rem; background: #fff; border: 1px dashed rgba(19,41,75,.35); border-radius: 10px; font-size: 1.1rem; } /* ===== Routepagina bij een activiteit (hero, kaart, route in het kort, stops, onderweg langs, knoppen) ===== */ body.mtb-rit-route { overflow-x: clip; } .mtb-rit-route .mtb-main { padding-top: 0 !important; padding-bottom: 0 !important; } .mtb-rit-route .mtb-main > .mtb-rt { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; } .mtb-rit-route .mtb-main > .wp-block-post-content { padding: 0 1rem 2rem; } .mtb-rt__hero { position: relative; background: #0b1a33 var(--mtb-hero) 50% 45% / cover no-repeat; color: #fff; padding: clamp(1rem, 2.5vw, 1.6rem) 0 clamp(2rem, 4.5vw, 3.2rem); } .mtb-rt__hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,26,51,.94) 0%, rgba(11,26,51,.78) 36%, rgba(11,26,51,.12) 74%, rgba(11,26,51,0) 100%); } .mtb-rt__binnen { position: relative; width: min(1120px, calc(100% - 2rem)); margin-inline: auto; } .mtb-rt__terug { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-size: 1.05rem; padding: .35rem 0; } .mtb-rt__terug:hover { text-decoration: underline; } .mtb-rt__titel { margin: clamp(.8rem, 2vw, 1.4rem) 0 1rem; color: #fff !important; font-size: clamp(2.6rem, 9vw, 5.6rem); line-height: .96; text-shadow: 0 4px 22px rgba(0,0,0,.4); max-width: 14ch; overflow-wrap: anywhere; } .mtb-rt__regels { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: clamp(1.1rem, 2.4vw, 1.3rem); } .mtb-rt__regels li { display: flex; align-items: center; gap: .8rem; } .mtb-rt__regels .mtb-icoon { color: #ff4f55; flex: none; } .mtb-rt__body { grid-template-columns: minmax(0, 1fr); position: relative; background: #fff; padding: clamp(1.4rem, 3.5vw, 2.2rem) 0 clamp(2.2rem, 5vw, 3.6rem); display: grid; gap: clamp(1.2rem, 3vw, 1.8rem); } .mtb-rt__body > * { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; box-sizing: border-box; } .mtb-rt__body > .mtb-knoprij { margin-block: 0; } .mtb-rt__label { margin: 0 0 1rem; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--navy); } .mtb-rt__label span { font-weight: 500; letter-spacing: .04em; color: #5b667a; } /* Kaart met tekst eroverheen en een statistiekenbalk */ .mtb-rt__kaart { position: relative; display: grid; grid-template-columns: minmax(17rem, 29%) minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: #0b1a33; color: #fff; box-shadow: 0 18px 40px rgba(11,26,51,.22); } .mtb-rt__kaartbeeld { cursor: zoom-in; grid-column: 2; grid-row: 1; display: block; width: 100%; height: 100%; align-self: stretch; object-fit: cover; } .mtb-rt__kaart::before { content: ""; grid-column: 2; grid-row: 1; position: relative; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #0b1a33 0%, rgba(11,26,51,.82) 5%, rgba(11,26,51,.38) 10%, rgba(11,26,51,0) 17%); } .mtb-rt__overlay { grid-column: 1; grid-row: 1; position: relative; z-index: 2; box-sizing: border-box; width: auto; padding: clamp(1.2rem, 2.4vw, 2rem); display: grid; gap: .8rem; align-content: center; } .mtb-rt__script { margin: 0; font-family: var(--wp--preset--font-family--script); font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1; color: #e6ebf5; } .mtb-rt__regios { margin: 0; color: #fff !important; font-family: var(--wp--preset--font-family--label); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.03; } .mtb-rt__uitleg { margin: .2rem 0 .4rem; color: #dbe2ef; font-size: 1rem; line-height: 1.5; } .mtb-rt__knop { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; box-sizing: border-box; min-height: 3.2rem; padding: .7rem 1.3rem; border-radius: 14px; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.2rem; text-decoration: none; border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; } .mtb-rt__knop--rood { background: var(--wp--preset--color--rood); color: #fff; justify-self: start; } .mtb-rt__knop--rood:hover { background: #b8141a; color: #fff; } .mtb-rt__knop--licht { background: #fff; color: var(--wp--preset--color--navy); border-color: #d5dbe7; } .mtb-rt__knop--licht:hover { border-color: var(--wp--preset--color--navy); } .mtb-rt__knop--groot { min-height: 3.8rem; font-size: 1.35rem; } .mtb-rt__vol { position: absolute; top: 1rem; right: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; background: rgba(11,26,51,.72); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; font: inherit; font-size: .95rem; cursor: pointer; } .mtb-rt__vol:hover { background: rgba(11,26,51,.92); } .mtb-rt__stats { grid-column: 1 / -1; grid-row: 2; position: static; margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #13294b; border-top: 1px solid rgba(255,255,255,.14); } .mtb-rt__stats li { display: flex; align-items: center; gap: .9rem; padding: .95rem 1.2rem; min-width: 0; } .mtb-rt__stats li + li { border-left: 1px solid rgba(255,255,255,.14); } .mtb-rt__stats .mtb-icoon { flex: none; color: #fff; opacity: .9; } .mtb-rt__stats span { display: grid; min-width: 0; } .mtb-rt__stats strong { font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.55rem; line-height: 1.1; } .mtb-rt__stats small { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #b8c3d8; line-height: 1.25; } .mtb-rt__dialoog { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; } .mtb-rt__dialoog::backdrop { background: rgba(5,10,22,.88); } .mtb-rt__dialoog img { display: block; max-width: 96vw; max-height: 90vh; width: auto; height: auto; border-radius: 12px; } .mtb-rt__dialoog form { position: absolute; top: -.6rem; right: -.6rem; z-index: 2; margin: 0; } .mtb-rt__sluit { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: #fff; color: #0b1a33; font-size: 1.7rem; line-height: 1; cursor: pointer; } /* Route in het kort */ .mtb-rt__kort { background: #f3f5f9; border-radius: 20px; padding: 1.3rem 1.5rem 1.4rem; } .mtb-rt__tijdlijn { list-style: none; margin: 0; padding: 0 0 .3rem; display: flex; overflow-x: auto; scrollbar-width: thin; } .mtb-rt__punt { position: relative; flex: 1 1 4.7rem; min-width: 0; text-align: center; display: grid; justify-items: center; align-content: start; gap: .1rem; padding: 0 .3rem; } .mtb-rt__punt::before { content: ""; position: absolute; top: 1.05rem; left: 0; right: 0; height: 3px; background: #c4cddd; } .mtb-rt__punt:first-child::before { left: 50%; } .mtb-rt__punt:last-child::before { right: 50%; } .mtb-rt__marker { position: relative; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: .45rem; border-radius: 50%; } .mtb-rt__marker::after { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; border: 3px solid #2f93ff; box-sizing: border-box; } /* Dezelfde kleuren als op de kaart: start groen, finish zwart, stops rood, overige plaatsen blauw. */ .mtb-rt__punt--start .mtb-rt__marker, .mtb-rt__punt--finish .mtb-rt__marker, .mtb-rt__punt--stop .mtb-rt__marker { color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(11,26,51,.18); } .mtb-rt__punt--start .mtb-rt__marker { background: #2eb34a; } .mtb-rt__punt--finish .mtb-rt__marker { background: #111; } .mtb-rt__punt--stop .mtb-rt__marker { background: #d7191f; } .mtb-rt__punt--tanken .mtb-rt__marker { background: #2f7bf5; } .mtb-rt__punt--start .mtb-rt__marker::after, .mtb-rt__punt--finish .mtb-rt__marker::after, .mtb-rt__punt--stop .mtb-rt__marker::after { display: none; } .mtb-rt__punt strong { font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.05rem; line-height: 1.15; color: var(--wp--preset--color--tekst); overflow-wrap: anywhere; } @media (max-width: 640px) { .mtb-rt__punt { flex: 1 0 6.2rem; } } .mtb-rt__punt small { font-size: .85rem; color: #5b667a; } /* Stops */ .mtb-rt__stops { display: flex; flex-wrap: wrap; gap: 1rem; } .mtb-rt__stops > .mtb-rt__stop { flex: 1 1 18rem; } .mtb-rt__stop { position: relative; display: flex; align-items: flex-end; min-height: 22rem; border-radius: 20px; overflow: hidden; color: #fff; background: #0b1a33 var(--mtb-stopfoto) 50% 50% / cover no-repeat; box-shadow: 0 12px 28px rgba(11,26,51,.18); } .mtb-rt__stop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,26,51,.96) 0%, rgba(11,26,51,.72) 42%, rgba(11,26,51,0) 82%); } .mtb-rt__stop--zonderfoto { min-height: 12rem; } .mtb-rt__stop--rood.mtb-rt__stop--zonderfoto { --mtb-stopkleur: #d7191f; background: linear-gradient(135deg, #a8141a 0%, #d7191f 100%); } .mtb-rt__stop--blauw.mtb-rt__stop--zonderfoto { --mtb-stopkleur: #2f7bf5; background: linear-gradient(135deg, #1d4fae 0%, #2f7bf5 100%); } .mtb-rt__stop--rood { --mtb-stopkleur: #d7191f; } .mtb-rt__stop--blauw { --mtb-stopkleur: #2f7bf5; } .mtb-rt__stop--zonderfoto .mtb-rt__nummer { background: #fff; color: var(--mtb-stopkleur); border-color: rgba(255,255,255,.55); } .mtb-rt__stop:not(.mtb-rt__stop--zonderfoto) .mtb-rt__nummer { background: var(--mtb-stopkleur); } .mtb-rt__stop--zonderfoto .mtb-rt__stopicoon { color: rgba(255,255,255,.28); } .mtb-rt__stop--zonderfoto::before { background: var(--mtb-bandenspoor); } .mtb-rt__stopicoon { position: absolute; top: 1.2rem; right: 1.4rem; color: rgba(255,255,255,.14); } .mtb-rt__nummer { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--wp--preset--color--rood); border: 3px solid #fff; color: #fff; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.3rem; } .mtb-rt__stoptekst { position: relative; z-index: 1; padding: 4.2rem 1.6rem 1.5rem; display: grid; gap: .35rem; } .mtb-rt__stopkm { margin: 0; font-size: .95rem; color: #e3e8f2; } .mtb-rt__stoptekst h3 { margin: 0; color: #fff !important; font-family: var(--wp--preset--font-family--label); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.1; } .mtb-rt__stopplaats { margin: .2rem 0 0; display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; } .mtb-rt__stopplaats .mtb-icoon { color: #ff4f55; } .mtb-rt__stopuitleg { margin: .3rem 0 0; color: #dbe2ef; font-size: 1.05rem; line-height: 1.45; max-width: 30rem; } /* Knoppen onderaan */ .mtb-rt__acties { display: flex; flex-wrap: wrap; gap: .8rem; } .mtb-rt__acties .mtb-rt__knop--rood { flex: 2 1 20rem; justify-self: auto; } .mtb-rt__acties .mtb-rt__knop--licht { flex: 1 1 14rem; } @media (max-width: 859px) { .mtb-rt__kaart { display: block; min-height: 0; } .mtb-rt__binnen { width: calc(100% - 2.5rem); } .mtb-rt__body > * { width: calc(100% - 2.5rem); } .mtb-rt__kaartbeeld { position: relative; display: block; height: auto; } .mtb-rt__kaart::before { display: none; } .mtb-rt__overlay { width: 100%; padding: 1.3rem 1.2rem .6rem; } .mtb-rt__stats { position: static; margin: .6rem 1rem 1rem; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mtb-rt__stats li { padding: .75rem .9rem; } .mtb-rt__stats li:nth-child(odd) { border-left: 0; } .mtb-rt__stats li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); } .mtb-rt__stats li + li { border-left: 1px solid rgba(255,255,255,.14); } .mtb-rt__stats li:nth-child(odd) { border-left: 0; } .mtb-rt__stats strong { font-size: 1.3rem; } .mtb-rt__stops { grid-template-columns: 1fr; } .mtb-rt__stop { min-height: 19rem; } .mtb-rt__stop--zonderfoto { min-height: 10rem; } .mtb-rt__acties .mtb-rt__knop { flex: 1 1 100%; min-height: 3.6rem; } } @media (max-width: 520px) { .mtb-rt__kaartbeeld { height: auto; } .mtb-rt__titel { max-width: none; } .mtb-rt__kort, .mtb-rt__langs { padding-inline: 1rem; } .mtb-rt__stats small { font-size: .72rem; } } /* ===== Kleding bestellen (ledenpagina) ===== */ .mtb-kl { display: grid; gap: 1.4rem; } .mtb-kl__artikelen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; } .mtb-kl__artikel { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #0b1a33; box-shadow: 0 10px 26px rgba(11,26,51,.2); min-width: 0; } .mtb-kl__foto { position: relative; aspect-ratio: 1 / 1; background: radial-gradient(ellipse at 50% 42%, #fff 0%, #e9edf4 80%); display: grid; place-items: center; overflow: hidden; } .mtb-kl__foto img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; } /* witte achtergrond van de productfoto valt weg */ .mtb-kl__foto--3d { cursor: grab; touch-action: pan-y; } .mtb-kl__foto--3d:active { cursor: grabbing; } .mtb-kl__foto--3d canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .mtb-kl__foto--3d.is-3d img { visibility: hidden; } .mtb-kl__hint { position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%); padding: .2rem .8rem; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid #d5dbe7; font-size: .9rem; color: #4a5468; white-space: nowrap; pointer-events: none; transition: opacity .4s; opacity: 0; } .mtb-kl__foto--3d.is-3d .mtb-kl__hint { opacity: 1; } .mtb-kl__tekst { position: relative; display: grid; gap: .2rem; padding: 1rem 1.3rem 1.2rem; color: #fff; background: linear-gradient(135deg, #1a3866 0%, #0b1a33 100%); flex: 1; } .mtb-kl__tekst::before { content: ""; position: absolute; inset: 0; background: var(--mtb-bandenspoor); pointer-events: none; } .mtb-kl__naam { position: relative; font-family: var(--wp--preset--font-family--kop); font-size: 2rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; } .mtb-kl__model { position: relative; font-size: 1rem; color: #c9d3e6; } .mtb-kl__prijs { position: relative; font-family: var(--wp--preset--font-family--script); font-size: 2rem; color: #ff6a70; line-height: 1.1; } .mtb-kl__let-op { margin: 0; font-size: 1.1rem; color: #4a5468; } .mtb-kl__leeg { margin: 0; padding: 1rem 1.2rem; background: #f3f5f9; border-radius: 14px; font-size: 1.15rem; color: #4a5468; } .mtb-kl__mijn { padding: 1.2rem 1.5rem; background: #fff; border: 2px solid #d5dbe7; border-left: 6px solid var(--wp--preset--color--rood); border-radius: 16px; } .mtb-kl__mijn h2, .mtb-kl__form h2 { margin: 0 0 .8rem; font-size: 2rem; } .mtb-kl__mijn ul { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .4rem; } .mtb-kl__mijn li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: 1.2rem; padding: .4rem 0; border-bottom: 1px solid #e6eaf2; } .mtb-kl__mijn li .mtb-icoon { vertical-align: -5px; color: var(--wp--preset--color--rood); } .mtb-kl__totaal { margin: .4rem 0 0; font-size: 1.3rem; } .mtb-kl__totaal strong { font-size: 1.5rem; color: var(--wp--preset--color--navy); } .mtb-kl__totaal small { font-size: .95rem; color: #5a6478; } .mtb-kl__form { padding: 1.5rem; background: #f3f5f9; border-radius: 20px; } .mtb-kl__uitleg { margin: 0 0 1rem; font-size: 1.1rem; color: #4a5468; } .mtb-kl__rijen { display: grid; gap: .8rem; } .mtb-kl__rij { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; padding: .9rem 1rem; background: #fff; border-radius: 14px; } .mtb-kl__rij label { display: grid; gap: .25rem; } .mtb-kl__rij label span { font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: #5a6478; } .mtb-kl__rij select, .mtb-kl__rij input { box-sizing: border-box; width: 100%; min-height: 3.2rem; padding: .5rem .8rem; font-size: 1.2rem; font-family: inherit; border: 2px solid #c9d1e0; border-radius: 10px; background: #fff; color: var(--wp--preset--color--tekst); } .mtb-kl__rij select:focus, .mtb-kl__rij input:focus { border-color: var(--wp--preset--color--navy); } .mtb-kl__som { margin: 1rem 0 0; font-size: 1.4rem; } .mtb-kl__som strong { font-size: 1.8rem; color: var(--wp--preset--color--rood); } .mtb-kl__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 1rem 0 0; } .mtb-kl__knoppen .mtb-grotenknop { cursor: pointer; } .mtb-kl__overslaan { margin-left: auto; padding: .5rem 0; background: none; border: none; font-family: inherit; font-size: 1.05rem; color: #5a6478; text-decoration: underline; cursor: pointer; } .mtb-kl__overslaan:hover, .mtb-kl__overslaan:focus-visible { color: var(--wp--preset--color--navy); } .mtb-kl__maten { background: #fff; border: 2px solid #d5dbe7; border-radius: 14px; padding: .2rem 1.2rem; } .mtb-kl__maten summary { cursor: pointer; padding: .9rem 0; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.3rem; } .mtb-kl__maten summary small { font-weight: 500; color: #5a6478; margin-left: .5rem; } .mtb-kl__maten table { width: 100%; max-width: 30rem; border-collapse: collapse; margin: 0 0 1rem; font-size: 1.1rem; } .mtb-kl__maten th, .mtb-kl__maten td { text-align: left; padding: .45rem .7rem; border-bottom: 1px solid #e6eaf2; } .mtb-kl__maten thead th { font-family: var(--wp--preset--font-family--label); letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; color: #5a6478; } .mtb-kl__maten p { margin: 0 0 1rem; font-size: 1rem; color: #4a5468; } /* Overzicht */ .mtb-kl__voortgang { padding: 1.2rem 1.5rem; background: #f3f5f9; border-radius: 16px; } .mtb-kl__voortgang p { margin: 0 0 .7rem; font-size: 1.2rem; } .mtb-kl__voortgang small { color: #5a6478; } .mtb-kl__balk { height: .9rem; background: #d9dfeb; border-radius: 999px; overflow: hidden; } .mtb-kl__balk span { display: block; height: 100%; background: linear-gradient(90deg, #d7191f, #ff4f55); border-radius: 999px; } .mtb-kl__totalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; } .mtb-kl__blok { padding: 1.1rem 1.3rem; background: #fff; border: 2px solid #d5dbe7; border-radius: 16px; } .mtb-kl__blok h3 { margin: 0 0 .7rem; font-size: 1.6rem; display: flex; align-items: center; gap: .5rem; } .mtb-kl__blok h3 small { margin-left: auto; font-family: var(--wp--preset--font-family--tekst); font-size: 1rem; text-transform: none; letter-spacing: 0; color: #5a6478; } .mtb-kl__blok .mtb-icoon { color: var(--wp--preset--color--rood); } .mtb-kl__maten-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; } .mtb-kl__maten-lijst li { display: flex; justify-content: space-between; font-size: 1.2rem; padding: .3rem 0; border-bottom: 1px solid #eef1f6; } .mtb-kl__nog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem .9rem; } .mtb-kl__nog li { padding: .55rem .9rem; background: #fff5f5; border-left: 4px solid var(--wp--preset--color--rood); border-radius: 8px; font-size: 1.15rem; } @media (max-width: 640px) { .mtb-kl__rij { grid-template-columns: 1fr 1fr; } .mtb-kl__rij label:first-child { grid-column: 1 / -1; } .mtb-kl__knoppen .mtb-grotenknop { width: 100%; } .mtb-kl__artikelen { grid-template-columns: 1fr 1fr; gap: .8rem; } .mtb-kl__artikel:first-child { grid-column: 1 / -1; } .mtb-kl__artikel:not(:first-child) .mtb-kl__tekst { padding: .8rem .9rem 1rem; } .mtb-kl__artikel:not(:first-child) .mtb-kl__naam { font-size: 1.45rem; } .mtb-kl__artikel:not(:first-child) .mtb-kl__model { font-size: .9rem; } .mtb-kl__artikel:not(:first-child) .mtb-kl__prijs { font-size: 1.6rem; } } /* ---------- Meerdaagse activiteit (weekend met routedagen) ---------- */ .mtb-wk .mtb-rt__body { background: #0b1a33; color: #fff; } .mtb-wk .mtb-rt__titel { max-width: 18ch; } .mtb-wk__onder { margin: -.4rem 0 1rem; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.2rem); color: #fff; } .mtb-wk .mtb-route__hint, .mtb-wk .mtb-route__hint a { color: #fff; } .mtb-wk .mtb-route__hint { background: #13294b; border: 1px solid rgba(255,255,255,.2); } /* anders witte tekst op een wit vlak: de melding voor bezoekers was onzichtbaar */ .mtb-wk .mtb-route__hint a { text-decoration: underline; font-weight: 600; } .mtb-wk__stats { list-style: none; margin-block: 0; margin-inline: auto; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #13294b; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; } .mtb-wk__stats li { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.3rem; min-width: 0; } .mtb-wk__stats li + li { border-left: 1px solid rgba(255,255,255,.14); } .mtb-wk__stats .mtb-icoon { flex: none; color: #ff7d82; } .mtb-wk__stats span, .mtb-wk__feiten span { display: grid; min-width: 0; } .mtb-wk__stats strong { font-family: var(--wp--preset--font-family--label); font-size: 1.6rem; line-height: 1.1; } .mtb-wk__stats small { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: #b8c3d8; line-height: 1.3; } .mtb-wk__rooster { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.4rem; align-items: start; } .mtb-wk__links { display: grid; gap: 1.1rem; min-width: 0; } .mtb-wk__tabs { display: none; grid-auto-flow: column; grid-auto-columns: 1fr; background: #13294b; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow-x: auto; scroll-snap-type: x mandatory; } .mtb-wk--js .mtb-wk__tabs { display: grid; } .mtb-wk__tab { appearance: none; background: transparent; border: 0; border-bottom: 4px solid transparent; color: #cfd8ea; padding: .85rem 1.1rem; text-align: left; cursor: pointer; font: inherit; scroll-snap-align: start; white-space: nowrap; display: grid; gap: .1rem; min-height: 3.4rem; } .mtb-wk__tab strong { font-family: var(--wp--preset--font-family--label); font-size: 1.25rem; color: #fff; } .mtb-wk__tab span { font-size: .95rem; } .mtb-wk__tab:hover { background: rgba(255,255,255,.05); } .mtb-wk__tab.is-actief { border-bottom-color: var(--wp--preset--color--rood); background: rgba(255,255,255,.07); color: #fff; } .mtb-wk__tab:focus-visible, .mtb-wk__alle a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; } .mtb-wk__dag { background: #13294b; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: clamp(1rem, 2.5vw, 1.5rem); display: grid; gap: 1.1rem; min-width: 0; } .mtb-wk__dag[hidden] { display: none !important; } .mtb-wk__daghoofd { display: flex; justify-content: space-between; align-items: start; gap: 1rem; } .mtb-wk__daghoofd h2 { margin: 0; color: #fff; font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1.1; } .mtb-wk__daghoofd p { margin: .2rem 0 0; color: #cfd8ea; } .mtb-wk__vol { position: static; flex: none; } .mtb-wk__feiten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .mtb-wk__feiten li { display: flex; gap: .8rem; align-items: start; min-width: 0; } .mtb-wk__feiten .mtb-icoon { flex: none; color: #ff7d82; margin-top: .15rem; } .mtb-wk__feiten small { color: #8fb3ff; font-size: .85rem; } .mtb-wk__feiten strong { font-size: 1.1rem; color: #fff; } .mtb-wk__feiten em { font-style: normal; color: #cfd8ea; font-size: .95rem; } .mtb-wk__let { color: #ffd479 !important; } .mtb-wk__kaart { width: 100%; height: auto; border-radius: 12px; display: block; border: 1px solid rgba(255,255,255,.14); } .mtb-wk__leeg { margin: 0; padding: 1.6rem; border: 1px dashed rgba(255,255,255,.3); border-radius: 12px; text-align: center; color: #cfd8ea; } .mtb-wk__acties { display: flex; flex-wrap: wrap; gap: .7rem; } .mtb-wk__stops h3 { margin: 0; color: #fff; font-size: 1.35rem; } .mtb-wk__bron { margin: .15rem 0 1rem; color: #8fb3ff; font-size: .9rem; } .mtb-wk__dag > * { min-width: 0; } .mtb-wk__stops { min-width: 0; max-width: 100%; } .mtb-wk__tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(5.9rem, 1fr); gap: .4rem; overflow-x: auto; padding-bottom: .4rem; } .mtb-wk__tijdlijn li { position: relative; display: grid; gap: .15rem; align-content: start; padding-top: 2.9rem; padding-right: .6rem; min-width: 0; } .mtb-wk__tijdlijn li::before { content: ""; position: absolute; left: 0; right: 0; top: 1.05rem; border-top: 2px solid rgba(143,179,255,.5); } .mtb-wk__tijdlijn li:first-child::before { left: 1.05rem; } .mtb-wk__tijdlijn li:last-child::before { right: calc(100% - 1.05rem); } .mtb-wk__bol { position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: #13294b; border: 2px solid #8fb3ff; color: #fff; z-index: 1; } .mtb-wk__tijdlijn .is-rood .mtb-wk__bol { background: #d7191f; border-color: #fff; color: #fff; } .mtb-wk__tijdlijn .is-blauw .mtb-wk__bol { background: #2f7bf5; border-color: #fff; color: #fff; } .mtb-wk__tijdlijn .is-start .mtb-wk__bol { border-color: #2fb36b; color: #2fb36b; } .mtb-wk__tijdlijn .is-eind .mtb-wk__bol { background: #fff; border-color: #fff; color: #0b1a33; } .mtb-wk__tijdlijn strong { color: #fff; line-height: 1.25; font-size: .95rem; overflow-wrap: break-word; hyphens: auto; } .mtb-wk__tijdlijn small { color: #b8c3d8; line-height: 1.3; } .mtb-wk__alle { background: #13294b; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 1.2rem; } .mtb-wk__alle h2 { margin: 0 0 .8rem; color: #fff; font-size: 1.4rem; } .mtb-wk__alle ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .mtb-wk__alle li a, .mtb-wk__alle--bezoeker li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .8rem .5rem; color: #fff; text-decoration: none; border-top: 1px solid rgba(255,255,255,.12); } .mtb-wk__alle li:first-child a, .mtb-wk__alle--bezoeker li:first-child { border-top: 0; } .mtb-wk__alle--bezoeker li { grid-template-columns: 2.6rem minmax(0, 1fr); } .mtb-wk__nr { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 1.15rem; } .mtb-wk__alle a.is-actief .mtb-wk__nr { background: var(--wp--preset--color--rood); } .mtb-wk__tekst { display: grid; min-width: 0; } .mtb-wk__tekst small { color: #b8c3d8; } .mtb-wk__noot { margin: .8rem 0 0; padding: .8rem; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #cfd8ea; font-size: .9rem; } .mtb-wk__alle--bezoeker, .mtb-wk .mtb-route__hint, .mtb-wk .mtb-knoprij { max-width: 34rem; margin-inline: auto; } @media (max-width: 1150px) { .mtb-wk__rooster { grid-template-columns: minmax(0, 1fr); } .mtb-wk__stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mtb-wk__stats li:nth-child(odd) { border-left: 0; } .mtb-wk__stats li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); } } @media (max-width: 640px) { .mtb-wk .mtb-rt__titel { font-size: clamp(2rem, 8.4vw, 3.4rem); overflow-wrap: normal; } .mtb-wk__stats strong { font-size: 1.35rem; } .mtb-wk__stats small { font-size: .68rem; letter-spacing: .02em; } .mtb-wk__stats li { padding: .8rem .8rem; gap: .6rem; } .mtb-wk__feiten { grid-template-columns: 1fr; } .mtb-wk__daghoofd { flex-direction: column; } .mtb-wk__tab { padding: .7rem .9rem; } .mtb-wk__tijdlijn { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; overflow: visible; } .mtb-wk__tijdlijn li { padding: .1rem 0 1.1rem 3.1rem; min-height: 2.6rem; } .mtb-wk__tijdlijn li::before { left: 1.05rem !important; right: auto !important; top: 0; bottom: 0; border-top: 0; border-left: 2px solid rgba(143,179,255,.5); } .mtb-wk__tijdlijn li:first-child::before { top: 1.05rem; } .mtb-wk__tijdlijn li:last-child::before { bottom: auto; height: 1.05rem; } } /* Voorpagina op een smalle telefoon: kop en link naast "Overige activiteiten" mogen afbreken (anders is het blok 380 px en scrolt de pagina zijwaarts) */ @media (max-width: 480px) { .mtb-rit__rechts .mtb-sectiekop { flex-wrap: wrap; } .mtb-rit__rechts .mtb-label, .mtb-rit__rechts .mtb-sectielink { white-space: normal; } } /* Album per dag */ .mtb-fotodagen ul { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; } .mtb-fotodagen a { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: inherit; text-decoration: none; font-family: var(--wp--preset--font-family--label); font-weight: 600; } .mtb-fotodagen a:hover { background: rgba(255,255,255,.1); } .mtb-fotodagen small { opacity: .75; font-weight: 500; } .mtb-fotodag { margin: 2.4rem 0 0; scroll-margin-top: 6rem; font-size: clamp(1.5rem, 3.4vw, 2.1rem); } .mtb-fotodag small { font-size: .55em; opacity: .7; font-weight: 500; margin-left: .4rem; } .mtb-fotodag + .mtb-fotogrid { margin-top: 1rem; } /* Aanmelden voor een activiteit ("Ben je erbij?"): lichte kaart op papierkleur, past op lichte en donkere pagina's; drie gelijke keuzes naast elkaar, ook op een telefoon */ .mtb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mtb-deelname { box-sizing: border-box; max-width: 820px; margin: 2.2rem auto 0; padding: 1.4rem; background: #f1eee8; color: #13294b; border: 1px solid #d9d3c5; border-top: 5px solid #d7191f; border-radius: 14px; } .mtb-deelname h2 { margin: 0; color: #13294b; font-size: clamp(1.5rem, 5vw, 2.1rem); } .mtb-deelname__uitleg { margin: .4rem 0 1.1rem; color: #4d5870; font-size: 1rem; } .mtb-deelname__keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0; } .mtb-deelname__keuze { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; text-align: center; padding: .85rem .35rem; min-height: 5.2rem; border-radius: 12px; border: 2px solid #cfc8b8; background: #fff; color: #13294b; font: 600 1rem/1.15 var(--wp--preset--font-family--body, inherit); cursor: pointer; transition: border-color .15s, background .15s; -webkit-tap-highlight-color: transparent; } .mtb-deelname__icoon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #e8e4db; font-size: 1rem; font-weight: 700; line-height: 1; transition: background .15s, color .15s; } .mtb-deelname__label { min-width: 0; overflow-wrap: anywhere; hyphens: auto; } .mtb-deelname__keuze:hover { border-color: #13294b; } .mtb-deelname__keuze:focus-visible { outline: 3px solid #d7191f; outline-offset: 2px; } .mtb-deelname__keuze[aria-pressed="true"] .mtb-deelname__icoon { color: #fff; } .mtb-deelname__keuze--ja[aria-pressed="true"] { border-color: #1f7a4d; background: #e3f4ea; } .mtb-deelname__keuze--ja[aria-pressed="true"] .mtb-deelname__icoon { background: #1f7a4d; } .mtb-deelname__keuze--misschien[aria-pressed="true"] { border-color: #c98a12; background: #fdf0d3; } .mtb-deelname__keuze--misschien[aria-pressed="true"] .mtb-deelname__icoon { background: #c98a12; } .mtb-deelname__keuze--nee[aria-pressed="true"] { border-color: #6b7288; background: #e6e8ee; } .mtb-deelname__keuze--nee[aria-pressed="true"] .mtb-deelname__icoon { background: #6b7288; } .mtb-deelname__bericht { margin: .9rem 0 0; font-size: 1rem; } .mtb-deelname__mee { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #d9d3c5; } .mtb-deelname__stapel { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .mtb-deelname__stapel li { position: relative; width: 2.4rem; height: 2.4rem; margin-left: -.5rem; border-radius: 50%; border: 2px solid #f1eee8; display: grid; place-items: center; font: 700 1rem var(--wp--preset--font-family--label, inherit); color: #fff; } .mtb-deelname__stapel li:first-child { margin-left: 0; } .mtb-deelname__stapel li.mtb-deelname__jij { outline: 2px solid #d7191f; outline-offset: 1px; } .mtb-deelname__stapel li.mtb-deelname__meer { background: #c9c2b2; color: #13294b; font-size: .85rem; } .mtb-deelname__cijfers { margin: 0; color: #4d5870; } .mtb-deelname__cijfers b { color: #13294b; } .mtb-deelname--bezoeker { padding: 1rem 1.2rem; border-top-width: 1px; } .mtb-deelname--bezoeker p { margin: 0; } .mtb-deelname--bezoeker a { color: #d7191f; font-weight: 600; text-decoration: underline; } @media (max-width: 420px) { .mtb-deelname { padding: 1.1rem; } .mtb-deelname__keuze { font-size: .95rem; min-height: 5rem; } } .mtb-deelname__organisator { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #d9d3c5; } .mtb-deelname__organisator summary { cursor: pointer; font-weight: 700; color: #13294b; } .mtb-deelname__organisator-rij { margin: .7rem 0 0; } .mtb-deelname__orgknop { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid #d9d3c5; } .mtb-deelname__orgknop span { color: #4d5870; font-size: .95rem; } .mtb-deelname__orgknop + .mtb-deelname__organisator { border-top: 0; padding-top: 0; } /* Groepskop in de lijst met knoppen: de status staat hier, niet bij elke naam */ .mtb-deelname__groep { margin: 1.2rem 0 .1rem; padding: .35rem .7rem; border-radius: 6px; font-size: 1.05rem; color: #13294b; background: #ece7da; } .mtb-deelname__groep span { font-weight: 400; color: #4d5870; } .mtb-deelname__groep--aangevraagd { background: #fdf0d5; } .mtb-deelname__groep--bevestigd { background: #e2f1e8; } .mtb-deelname__groep + .mtb-deelname__beoordeel { border-top: 0; } /* Vraag voor het bestuur (vergaderingen) */ .mtb-vv { box-sizing: border-box; max-width: 820px; margin: 2.2rem auto 0; padding: 1.4rem; background: #f1eee8; color: #13294b; border: 1px solid #d9d3c5; border-top: 5px solid #d7191f; border-radius: 14px; } .mtb-vv h2 { margin: 0; color: #13294b; font-size: clamp(1.5rem, 5vw, 2.1rem); } .mtb-vv h3 { margin: 1.3rem 0 .6rem; font-size: 1.2rem; color: #13294b; } .mtb-vv h3 small { font-weight: 400; color: #4d5870; font-size: .85rem; } .mtb-vv__uitleg { margin: .4rem 0 1.1rem; color: #4d5870; font-size: 1rem; } .mtb-vv__eigen, .mtb-vv__lijst { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; } .mtb-vv__eigen li, .mtb-vv__lijst li { background: #fff; border: 1px solid #d9d3c5; border-radius: 10px; padding: .8rem 1rem; } .mtb-vv__eigen p, .mtb-vv__lijst p { margin: 0; } .mtb-vv__eigen p + p, .mtb-vv__lijst p + p { margin-top: .3rem; } .mtb-vv__meta { color: #4d5870; font-size: .9rem; } .mtb-vv__van span { font-weight: 400; color: #4d5870; font-size: .9rem; } .mtb-vv__intrekken { margin-top: .5rem; padding: 0; background: none; border: none; color: #6b7288; text-decoration: underline; font: inherit; font-size: .9rem; cursor: pointer; } .mtb-vv__intrekken:hover, .mtb-vv__intrekken:focus-visible { color: #d7191f; } .mtb-vv__form textarea { box-sizing: border-box; width: 100%; max-width: 100%; padding: .7rem .8rem; font: inherit; font-size: 1rem; border: 2px solid #c9d1e0; border-radius: 10px; background: #fff; color: #13294b; } .mtb-vv__form textarea:focus { border-color: #13294b; } .mtb-vv__bestuur { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #d9d3c5; } .mtb-vv__leeg { margin: 0; color: #4d5870; } /* Wie opent de notulen (alleen eigenaar) */ .mtb-lees { margin: .8rem 0; padding: 1rem 1.2rem; background: #fff; border: 1px solid #d9d3c5; border-radius: 12px; } .mtb-lees summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; justify-content: space-between; } .mtb-lees__tel { color: #4d5870; font-size: .95rem; } .mtb-lees__lijst { list-style: none; margin: .8rem 0 0; padding: 0; } .mtb-lees__lijst li { display: flex; flex-wrap: wrap; gap: .2rem 1rem; justify-content: space-between; padding: .45rem 0; border-top: 1px solid #ece7da; } .mtb-lees__lijst li span:last-child { color: #4d5870; font-variant-numeric: tabular-nums; } .mtb-lees__nog { margin: .8rem 0 0; color: #4d5870; } /* Uitnodiging "Als app gebruiken" (alleen leden op een telefoon, weg te klikken) */ .mtb-app-uitnodiging { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 9000; display: flex; align-items: center; gap: .75rem; padding: .8rem 2.6rem .8rem 1rem; background: var(--wp--preset--color--navy-donker); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: .95rem; line-height: 1.35; } .mtb-app-uitnodiging p { margin: 0; flex: 1; } .mtb-app-uitnodiging__knop { flex: none; background: #D7191F; color: #fff; border: 0; border-radius: 6px; padding: .55rem .8rem; font: inherit; font-weight: 700; cursor: pointer; } .mtb-app-uitnodiging__dicht { position: absolute; top: .2rem; right: .3rem; width: 2.2rem; height: 2.2rem; background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; } .mtb-app-uitnodiging button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* iPhone: stappen en een wijzende pijl naar het menu van Safari (de drie streepjes links in de zwevende adresbalk, ca. 115 px van de rand) */ .mtb-app-uitnodiging--ios { display: block; bottom: calc(env(safe-area-inset-bottom) + 6.2rem); } .mtb-app-uitnodiging__kop { font-family: var(--wp--preset--font-family--barlow-condensed, inherit); font-weight: 700; font-size: 1.05rem; margin: 0 0 .4rem !important; } .mtb-app-uitnodiging__stappen { margin: 0; padding-left: 1.3rem; } .mtb-app-uitnodiging__stappen li { margin: .15rem 0; } .mtb-app-uitnodiging__stappen li::marker { color: #ff6b6f; font-weight: 700; } .mtb-app-uitnodiging__pijl { position: absolute; left: 4.75rem; top: 100%; margin-top: .3rem; width: 3.2rem; height: 3rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); animation: mtb-pijl .9s ease-in-out infinite; } .mtb-app-uitnodiging__pijl svg { display: block; width: 100%; height: 100%; } .mtb-app-uitnodiging__pijl path { fill: #D7191F; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; } @keyframes mtb-pijl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.35rem); } } @media (prefers-reduced-motion: reduce) { .mtb-app-uitnodiging__pijl { animation: none; } } .mtb-app-vervaging { position: fixed; inset: 0; z-index: 8999; background: rgba(11,26,51,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* Kaart "Meldingen op je telefoon" op de ledenpagina */ .mtb-meldingen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin: 1.5rem 0; padding: 1.2rem 1.4rem; background: #fff; border: 1px solid rgba(19,41,75,.14); border-left: 5px solid #D7191F; border-radius: 10px; box-shadow: 0 2px 10px rgba(19,41,75,.07); } /* .mtb-meldingen[hidden] staat op gelijke specificiteit als de regel hierboven; zonder deze regel wint "display: flex" het van de ingebouwde browserstijl voor [hidden], en blijft de kaart zichtbaar staan nadat meldingen.js 'm wil verbergen (gemeld door Olan, 20 okt: het blok "Meldingen staan aan!" bleef permanent op het scherm staan). */ .mtb-meldingen[hidden] { display: none; } .mtb-meldingen__tekst { flex: 1 1 18rem; min-width: 0; } .mtb-meldingen h2 { margin: 0 0 .3rem; font-size: 1.35rem; color: var(--wp--preset--color--navy); } .mtb-meldingen__status { margin: 0; line-height: 1.45; } .mtb-meldingen__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; } .mtb-meldingen__knoppen [hidden] { display: none; } @media (max-width: 520px) { .mtb-meldingen__knoppen > button { flex: 1 1 100%; } } /* iPhone met Chrome, Firefox of Edge: uitleg om in Safari te openen (geen pijl, want de knoppen zitten daar anders) */ .mtb-app-uitnodiging--safari { bottom: calc(env(safe-area-inset-bottom) + 1rem); } .mtb-app-uitnodiging--safari p { margin: 0 0 .6rem; } .mtb-app-uitnodiging__link { width: 100%; box-sizing: border-box; margin: 0 0 .6rem; padding: .55rem .6rem; font: inherit; font-size: .85rem; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); border-radius: 6px; } .mtb-app-uitnodiging__knop--breed { width: 100%; padding: .7rem .8rem; } /* In de app (beginscherm): geen zwarte WordPress-beheerbalk */ @media (display-mode: standalone) { #wpadminbar { display: none !important; } html { margin-top: 0 !important; } } /* Naar beneden trekken om te verversen (iPhone-app, zie verversen.js) */ .mtb-verversen { position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%; z-index: 9500; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--wp--preset--color--navy); color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.35); opacity: 0; transform: translate(-50%, -56px); pointer-events: none; } .mtb-verversen--terug { transition: transform .25s ease, opacity .25s ease; } .mtb-verversen__pijl { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; transition: transform .15s ease; } .mtb-verversen--bezig .mtb-verversen__pijl { animation: mtb-draai .8s linear infinite; } @keyframes mtb-draai { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mtb-verversen--bezig .mtb-verversen__pijl { animation: none; } } /* iPhone, Safari van vóór versie 26: onderbalk met het Deel-icoon in het midden; de pagina eindigt boven die balk, dus lager geplaatst dan bij de zwevende balk */ .mtb-app-uitnodiging--klassiek { bottom: calc(env(safe-area-inset-bottom) + 4.6rem); } .mtb-app-uitnodiging--klassiek .mtb-app-uitnodiging__pijl { left: calc(48vw - 12px - 1.6rem); } .mtb-app-uitnodiging--onbekend { bottom: calc(env(safe-area-inset-bottom) + 1rem); } /* In de app: de strook achter de statusbalk van de iPhone (klok, batterij) kreeg de achtergrond van de pagina en zag er als een wazige grijze band uit. Nu navy bovenaan, passend bij de kop, en donkerder onderaan, passend bij de voet. De pagina zelf (body) blijft wit. */ @media (display-mode: standalone) { html { background: linear-gradient(to bottom, var(--wp--preset--color--navy) 50%, var(--wp--preset--color--navy-donker) 50%); } } /* viewport-fit=cover (zie pwa.php): ruimte voor de statusbalk, het thuisscherm en (liggend) de uitsparing van de iPhone */ html { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } @media (display-mode: standalone) { .mtb-header { padding-top: calc(1rem + env(safe-area-inset-top)); } .home .mtb-header { padding-top: calc(1rem + env(safe-area-inset-top)) !important; } .mtb-footer { padding-bottom: calc(var(--wp--preset--spacing--50) + env(safe-area-inset-bottom)) !important; } } /* Vermelding onderaan de voet */ .mtb-footer__credit { margin-top: .5rem; font-size: .85rem; } .mtb-footer__credit a { color: rgba(255,255,255,.6); } /* Poster bij een activiteit (alleen leden) */ .mtb-poster { margin-top: 2rem; } .mtb-poster h2 { font-size: 1.6rem; margin: 0 0 .75rem; } .mtb-poster__link { display: inline-block; line-height: 0; border: 1px solid rgba(19,41,75,.2); border-radius: 6px; overflow: hidden; box-shadow: 0 4px 14px rgba(19,41,75,.18); max-width: min(100%, 280px); } .mtb-poster__link img { width: 100%; height: auto; display: block; } .mtb-poster__log { margin-top: 1.5rem; } .mtb-lightbox--poster .mtb-lightbox__beeld { max-width: 100vw; } .mtb-lightbox--poster .mtb-lightbox__beeld img { max-width: 100vw; max-height: calc(100vh - 4.5rem); border-radius: 0; } /* Welkomstvenster voor nieuwe leden */ .mtb-welkom { border: 0; border-radius: 10px; padding: 1.6rem 1.5rem 1.3rem; width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; box-shadow: 0 18px 50px rgba(8,16,32,.5); background: #fbfaf7; color: #1a1f2b; border-top: 6px solid #c4161c; } .mtb-welkom::backdrop { background: rgba(8,16,32,.72); backdrop-filter: blur(3px); } .mtb-welkom__label { margin: 0 0 .2rem; font-family: var(--wp--preset--font-family--condensed, inherit); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; color: #c4161c; font-weight: 700; } .mtb-welkom h2 { margin: 0 0 .6rem; font-size: 2rem; color: #13294b; } .mtb-welkom p { font-size: 1.05rem; line-height: 1.55; } .mtb-welkom__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 .6rem; } .mtb-welkom__klein { font-size: .9rem !important; color: #4a5366; margin: .4rem 0 0; } /* Meldingenkaart: heeft geen zin op een laptop/desktop (geen app-icoon om te badgen); alleen op mobiele breedte tonen (18 okt, Olan). */ @media (min-width: 768px) { .mtb-meldingen { display: none !important; } } /* Weekend-aanmelden: status, voorkeur en knoppen (grote knoppen, doelgroep 60+) */ .mtb-deelname__keuze[aria-disabled="true"] { cursor: default; } .mtb-deelname__status { margin: 1rem 0 0; padding: .9rem 1rem; border-radius: 12px; font-size: 1.1rem; line-height: 1.45; border: 2px solid #cfc8b8; background: #fff; } .mtb-deelname__status--ja { border-color: #1f7a4d; background: #e3f4ea; } .mtb-deelname__status--wacht { border-color: #c98a12; background: #fdf0d3; } .mtb-deelname__vraag { margin-top: 1rem; padding: 1rem; border: 2px solid #d7191f; border-radius: 12px; background: #fff; } .mtb-deelname__vraag p { margin: 0 0 .8rem; font-size: 1.1rem; } .mtb-deelname__knop { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 3.2rem; padding: .6rem 1.2rem; margin: .3rem .5rem .3rem 0; border-radius: 12px; border: 2px solid #13294b; background: #13294b; color: #fff; font-family: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; } .mtb-deelname__knop--rood { background: #d7191f; border-color: #d7191f; } .mtb-deelname__knop--licht { background: #fff; color: #13294b; } .mtb-deelname__knop:focus-visible { outline: 3px solid #d7191f; outline-offset: 2px; } .mtb-deelname__voorkeur { margin-top: 1.1rem; } .mtb-deelname__voorkeur fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .mtb-deelname__voorkeur legend { font-weight: 700; font-size: 1.1rem; padding: 0; margin-bottom: .3rem; } .mtb-deelname__optie { display: flex; align-items: center; gap: .6rem; min-height: 3rem; font-size: 1.05rem; } .mtb-deelname__optie input { width: 1.4rem; height: 1.4rem; flex: none; } .mtb-deelname__veld { display: block; margin: .9rem 0 .3rem; font-weight: 600; } .mtb-deelname__voorkeur select, .mtb-deelname__voorkeur textarea { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 3rem; padding: .6rem .7rem; font: inherit; font-size: 1.05rem; border: 2px solid #cfc8b8; border-radius: 10px; background: #fff; } .mtb-deelname__beoordeel { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; margin: .5rem 0; padding: .6rem 0; border-top: 1px solid #d9d3c5; } .mtb-deelname__wie { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; } .mtb-deelname__waarschuwing { flex-basis: 100%; margin: 0; color: #8a4b00; font-weight: 600; } /* Ritten stap 3.1: voorkeuren op de ledenpagina */ .mtb-voorkeuren { margin-top: 2rem; padding: 1.4rem; background: #fff; border: 2px solid rgba(19,41,75,.18); border-radius: 14px; } .mtb-voorkeuren h2 { margin: 0 0 .8rem; font-size: 1.8rem; } .mtb-voorkeuren__optie { display: flex; align-items: center; gap: .9rem; min-height: 3.4rem; font-size: 1.2rem; font-weight: 600; cursor: pointer; } .mtb-voorkeuren__optie input { width: 1.8rem; height: 1.8rem; flex: none; } .mtb-voorkeuren__uitleg { margin: .4rem 0 1rem; font-size: 1.05rem; color: #3b4559; } /* Ritten stap 3: organisatorschermen (/leden/ritten/) – mobiel eerst, grote knoppen */ .mtb-ro { font-size: 1.15rem; } .mtb-ro h2 { font-size: clamp(1.8rem, 6vw, 2.4rem); margin: 0 0 .4rem; } .mtb-ro h3 { margin: 0; } .mtb-ro__boven:empty { display: none; } .mtb-ro__filter { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.2rem; } .mtb-ro__filter .mtb-grotenknop { flex: 1 1 12rem; min-height: 3.4rem; } .mtb-ro__kaarten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; } .mtb-ro__kaart { display: grid; gap: .6rem; padding: 1.2rem; background: #fff; border: 2px solid rgba(19,41,75,.18); border-left: 6px solid var(--wp--preset--color--rood); border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.06); } .mtb-ro__datum { margin: 0; font-weight: 700; color: var(--wp--preset--color--rood); } .mtb-ro__titel { font-family: var(--wp--preset--font-family--label); font-size: 1.6rem; line-height: 1.15; overflow-wrap: anywhere; } .mtb-ro__label { display: inline-block; padding: .05rem .5rem; margin-left: .3rem; border-radius: 999px; background: #13294b; color: #fff; font-size: .9rem; font-weight: 600; vertical-align: middle; } .mtb-ro__label--rood { background: #c8161d; } .mtb-ro__tellers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .mtb-ro__tellers li { padding: .4rem .8rem; background: #f1eee8; border-radius: 10px; font-size: 1.05rem; } .mtb-ro__tellers b { font-size: 1.4rem; margin-right: .2rem; } .mtb-ro__let-op { margin: 0; font-size: 1rem; color: #4d5870; } .mtb-ro__kaart .mtb-grotenknop { justify-self: start; } .mtb-ro__melding ul { margin: 0; padding-left: 1.2rem; } @media (min-width: 760px) { .mtb-ro__kaarten { grid-template-columns: 1fr 1fr; } } .mtb-ro__kop { margin-bottom: 1rem; } .mtb-ro__kop p { margin: .2rem 0 .6rem; } .mtb-ro__grid { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; } .mtb-ro__grid li { display: grid; gap: .1rem; padding: .8rem; background: #fff; border: 2px solid rgba(19,41,75,.18); border-radius: 12px; text-align: center; } .mtb-ro__grid b { font-family: var(--wp--preset--font-family--label); font-size: 2.4rem; line-height: 1; color: var(--wp--preset--color--navy); } .mtb-ro__grid span { font-size: 1.05rem; } .mtb-ro__lijst { margin: 0 0 1.4rem; padding: 1rem 1.1rem; background: #fff; border: 2px solid rgba(19,41,75,.12); border-radius: 14px; } .mtb-ro__lijst h3 { font-family: var(--wp--preset--font-family--label); font-size: 1.5rem; margin-bottom: .4rem; } .mtb-ro__lijst ul { list-style: none; margin: 0; padding: 0; } .mtb-ro__lijst li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; padding: .6rem 0; border-top: 1px solid #e3dfd5; overflow-wrap: anywhere; } .mtb-ro__lijst li:first-child { border-top: 0; } .mtb-ro__opm { flex-basis: 100%; font-size: 1.02rem; color: #3b4559; } .mtb-ro__tijd { margin-left: auto; font-size: .98rem; color: #4d5870; white-space: nowrap; } @media (min-width: 760px) { .mtb-ro__grid { grid-template-columns: repeat(4, 1fr); } } .mtb-ro__fasen { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; counter-reset: fase; } .mtb-ro__fase { display: grid; gap: .1rem; padding: .7rem .8rem; background: #fff; border: 2px solid rgba(19,41,75,.18); border-radius: 12px; } .mtb-ro__fase strong { font-family: var(--wp--preset--font-family--label); font-size: 1.1rem; line-height: 1.15; } .mtb-ro__fase span { font-size: 1rem; } .mtb-ro__fase em { font-style: normal; font-size: .95rem; color: #4d5870; } .mtb-ro__fase--gedaan { background: #eef0f4; } .mtb-ro__fase--nu { border-color: #d7191f; background: #fff3f3; box-shadow: 0 0 0 2px #d7191f; } .mtb-ro__fase--nu em { color: #d7191f; font-weight: 700; text-transform: uppercase; } .mtb-ro__knoppen { display: flex; flex-wrap: wrap; gap: .4rem; flex-basis: 100%; } .mtb-ro__knoppen form { margin: 0; } .mtb-ro__knoppen .mtb-deelname__knop { margin: 0; min-height: 3.2rem; } /* Rij met naam links en knoppen rechts in een vaste kolom, zodat "Bevestigen" in elke rij en elke lijst op dezelfde plek staat (organisatorscherm én activiteitpagina). */ .mtb-ro__lijst li.mtb-ro__rij { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; } .mtb-ro__wie, .mtb-deelname__wie { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; } .mtb-ro__rij .mtb-ro__knoppen, .mtb-deelname__beoordeel-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .3rem; } /* Vaste plek per knop: "Bevestigen" altijd links, "Op de wachtlijst" altijd rechts, ook als er maar één knop is. */ .mtb-knopplek--bevestigd { grid-column: 1; } .mtb-knopplek--wachtlijst { grid-column: 2; } .mtb-ro__rij .mtb-ro__knoppen form, .mtb-deelname__beoordeel-knoppen form { margin: 0; } .mtb-ro__rij .mtb-ro__knoppen .mtb-deelname__knop, .mtb-deelname__beoordeel-knoppen .mtb-deelname__knop { width: 100%; margin: 0; padding-inline: .5rem; } @media (min-width: 760px) { .mtb-ro__lijst li.mtb-ro__rij, .mtb-deelname__beoordeel { grid-template-columns: minmax(0, 1fr) 21rem; column-gap: 1.2rem; grid-auto-flow: row dense; } .mtb-ro__rij > :not(.mtb-ro__knoppen), .mtb-deelname__beoordeel > :not(.mtb-deelname__beoordeel-knoppen) { grid-column: 1; } .mtb-ro__rij .mtb-ro__knoppen, .mtb-deelname__beoordeel-knoppen { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; } } .mtb-ro__kamerknop { margin: 0 0 1.4rem; } .mtb-ro__kamerlijst ol { margin: .6rem 0; padding-left: 1.4rem; } .mtb-ro__kamerlijst li { display: grid; gap: .1rem; } .mtb-ro__kamerlijst h4 { margin: 1rem 0 .3rem; font-size: 1.15rem; } @media (min-width: 760px) { .mtb-ro__fasen { grid-template-columns: repeat(4, 1fr); } } .mtb-ro__acties { display: grid; gap: .8rem; margin: 0 0 1.4rem; } .mtb-ro__actie { margin: 0; display: grid; gap: .5rem; justify-items: start; } .mtb-ro__herinnerd { margin: 0; padding: .8rem 1rem; background: #e3f4ea; border: 2px solid #1f7a4d; border-radius: 12px; } .mtb-ro__mailform label { display: block; margin: 1rem 0 .3rem; font-weight: 700; } .mtb-ro__mailform input[type="text"], .mtb-ro__mailform textarea { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 3.2rem; padding: .6rem .8rem; font: inherit; font-size: 1.1rem; border: 2px solid var(--wp--preset--color--navy); border-radius: 10px; background: #fff; } .mtb-ro__mailform .mtb-grotenknop { margin: 1rem .5rem 0 0; } .mtb-ro__mailvoorbeeld { padding: 1rem 1.1rem; background: #fff; border: 2px solid rgba(19,41,75,.18); border-radius: 12px; margin-bottom: 1rem; } .mtb-ro__mailtekst { overflow-wrap: anywhere; } .mtb-ro__vraag { margin: 0; font-size: 1.3rem; } /* Ritten: kamerhulp voor het lid */ .mtb-deelname__hulp { margin: .6rem 0 0; font-size: 1rem; color: #3b4559; } /* Ritten stap 4: rit afsluiten (formulier en bevestiging) – mobiel eerst */ .mtb-af { margin: 0 0 1.4rem; } .mtb-af h3 { font-family: var(--wp--preset--font-family--label); font-size: 1.7rem; margin: 0 0 .5rem; } .mtb-af__regels { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .6rem; } .mtb-af__regel { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .8rem 1rem; background: #fff; border: 2px solid rgba(19,41,75,.14); border-radius: 12px; } .mtb-af__aan { display: flex; align-items: center; gap: .6rem; flex: 1 1 14rem; min-height: 3rem; font-size: 1.1rem; cursor: pointer; overflow-wrap: anywhere; } .mtb-af__aan input { width: 1.6rem; height: 1.6rem; flex: none; } .mtb-af__km { font-weight: 600; } .mtb-af__regel input[type="text"] { box-sizing: border-box; width: 7rem; min-height: 3rem; padding: .5rem .7rem; font: inherit; font-size: 1.1rem; border: 2px solid #cfc8b8; border-radius: 10px; background: #fff; } .mtb-af__regel select { box-sizing: border-box; flex: 1 1 14rem; max-width: 100%; min-height: 3rem; padding: .5rem .7rem; font: inherit; font-size: 1.05rem; border: 2px solid #cfc8b8; border-radius: 10px; background: #fff; } .mtb-af__regel--extra { background: #f1eee8; border-style: dashed; } .mtb-af__veld { flex-basis: 100%; margin: .2rem 0 0; font-weight: 600; } .mtb-af__geenkm { font-size: 1rem; color: #4d5870; } .mtb-af__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; } .mtb-af__knoppen .mtb-grotenknop, .mtb-af__form > .mtb-grotenknop { min-height: 3.4rem; } .mtb-af__samenvatting { list-style: none; margin: .8rem 0; padding: 0; } .mtb-af__samenvatting li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; padding: .6rem 0; border-top: 1px solid #e3dfd5; overflow-wrap: anywhere; } .mtb-af__samenvatting li:first-child { border-top: 0; } .mtb-ro__afsluitmelding { margin: 0 0 1.2rem; } .mtb-ro__afsluitmelding h3 { margin: 0 0 .4rem; font-family: var(--wp--preset--font-family--label); font-size: 1.5rem; } .mtb-ro__afsluitmelding ul { list-style: none; margin: 0; padding: 0; } .mtb-ro__afsluitmelding li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; padding: .7rem 0; border-top: 1px solid rgba(19,41,75,.15); overflow-wrap: anywhere; } .mtb-ro__afsluitmelding li:first-child { border-top: 0; } .mtb-ro__afsluitmelding .mtb-ro__let-op { flex-basis: 100%; } .mtb-ro__recent { padding: .8rem 1rem; background: #fff; border: 2px solid rgba(19,41,75,.12); border-radius: 14px; } /* Ritten stap 4: statistiek (/leden/statistiek/) */ .mtb-st { font-size: 1.15rem; } .mtb-st h2 { font-size: clamp(1.7rem, 6vw, 2.2rem); margin: 0 0 .6rem; } .mtb-st__jaren ul { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .mtb-st__jaren .mtb-grotenknop { min-height: 3.2rem; } .mtb-st__blok { margin: 0 0 1.8rem; } .mtb-st__grid { grid-template-columns: 1fr 1fr; } .mtb-st__laatste { margin: .2rem 0 0; } @media (min-width: 760px) { .mtb-st__grid { grid-template-columns: repeat(4, 1fr); } } .mtb-st__tabelwrap { overflow-x: auto; } .mtb-st__tabel { width: 100%; border-collapse: collapse; font-size: 1.05rem; background: #fff; border: 2px solid rgba(19,41,75,.12); } .mtb-st__tabel th, .mtb-st__tabel td { padding: .6rem .7rem; text-align: left; border-top: 1px solid #e3dfd5; } .mtb-st__tabel thead th { background: #f1eee8; font-family: var(--wp--preset--font-family--label); font-size: 1.05rem; border-top: 0; } .mtb-st__tabel thead a { color: inherit; text-decoration: none; display: inline-block; min-height: 2.4rem; line-height: 2.4rem; } .mtb-st__tabel td:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .mtb-st__tabel thead { position: absolute; left: -9999px; } .mtb-st__tabel, .mtb-st__tabel tbody, .mtb-st__tabel tr, .mtb-st__tabel th, .mtb-st__tabel td { display: block; } .mtb-st__tabel tr { padding: .6rem .8rem; border-top: 6px solid #f1eee8; } .mtb-st__tabel th[scope="row"] { border: 0; padding: .2rem 0; font-size: 1.2rem; } .mtb-st__tabel td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem 0; text-align: right; } .mtb-st__tabel td::before { content: attr(data-label); font-weight: 600; text-align: left; } .mtb-st__tabelkop { display: none; } } /* "Bekijk als" (webmaster bekijkt de site als lid of bestuur): vaste balk onderaan */ .mtb-bekijkals { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: #8f5a00; color: #fff; font-size: .95rem; box-shadow: 0 -4px 16px rgba(0,0,0,.25); } .mtb-bekijkals a { color: #13294b; background: #fff; border-radius: 6px; padding: .35rem .8rem; font-weight: 700; text-decoration: none; } .mtb-bekijkals a.mtb-bekijkals__licht { background: transparent; color: #fff; border: 1px solid #fff; } .mtb-bekijkals a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } body:has(.mtb-bekijkals) { padding-bottom: 4.5rem; } /* Ritten (26 okt, besluit 29): tabbladen Deelnemers / Kamerindeling en de kamerindeling zelf – mobiel eerst (390 px), geen zijwaarts scrollen */ .mtb-ro__tabs { display: flex; gap: .5rem; margin: 0 0 1.2rem; border-bottom: 3px solid #13294b; } .mtb-ro__tab { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; box-sizing: border-box; min-height: 3.4rem; padding: .5rem .8rem; border: 2px solid #13294b; border-bottom: 0; border-radius: 12px 12px 0 0; background: #fff; color: #13294b !important; font-weight: 700; font-size: 1.1rem; text-decoration: none; text-align: center; } .mtb-ro__tab--actief { background: #13294b; color: #fff !important; } .mtb-ro__tab:focus-visible { outline: 3px solid #d7191f; outline-offset: 2px; } .mtb-ro__tabteller { display: inline-block; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: #d7191f; color: #fff; font-size: .95rem; line-height: 1.5rem; text-align: center; } .mtb-ro__samenvatting { margin: -.6rem 0 1.2rem; font-size: 1.2rem; color: #13294b; } .mtb-ro__opmerking { flex-basis: 100%; } .mtb-ro__opmerking summary { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .3rem .9rem; border: 2px solid #13294b; border-radius: 10px; background: #fff; color: #13294b; font-weight: 700; cursor: pointer; list-style: none; } .mtb-ro__opmerking summary::-webkit-details-marker { display: none; } .mtb-ro__opmerking summary:focus-visible { outline: 3px solid #d7191f; outline-offset: 2px; } .mtb-ro__opmerking p { margin: .5rem 0 0; overflow-wrap: anywhere; } .mtb-ro__voortgang { margin: 0 0 1.2rem; font-size: 1.2rem; } .mtb-ro__kamermelding { margin: 0 0 1.2rem; } .mtb-ro__kamermelding ul { margin: .4rem 0; padding-left: 1.2rem; } .mtb-ro__plaats { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; flex-basis: 100%; margin: 0; } .mtb-ro__plaats label { font-weight: 600; } .mtb-ro__plaats select { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 3.2rem; padding: .5rem .7rem; font: inherit; font-size: 1.05rem; border: 2px solid #cfc8b8; border-radius: 10px; background: #fff; } .mtb-ro__plaats .mtb-deelname__knop { width: 100%; margin: 0; } .mtb-ro__kamerkaarten { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); } .mtb-ro__kamer { padding: 1rem 1.1rem; background: #fff; border: 2px solid rgba(19,41,75,.18); border-left: 6px solid #13294b; border-radius: 14px; overflow-wrap: anywhere; } .mtb-ro__kamer h4 { margin: 0 0 .3rem; font-family: var(--wp--preset--font-family--label); font-size: 1.4rem; color: #13294b; } .mtb-ro__kamer p { margin: .2rem 0; } .mtb-ro__kamerknoppen { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; margin-top: .6rem; } .mtb-ro__kform { margin: 0; } .mtb-ro__kform .mtb-deelname__knop { width: 100%; margin: 0; } .mtb-ro__waarschuwingen { margin: 0 0 1.4rem; padding: 1rem 1.1rem; background: #fff7e6; border: 2px solid #c47a00; border-radius: 14px; } .mtb-ro__waarschuwingen h3 { font-size: 1.3rem; margin-bottom: .3rem; } .mtb-ro__waarschuwingen ul { margin: 0; padding-left: 1.2rem; } .mtb-ro__voorstel { margin: 0 0 1.4rem; } .mtb-ro__voorstel .mtb-ro__kform .mtb-deelname__knop { width: auto; min-width: 100%; } .mtb-ro__kamerknop .mtb-grotenknop { display: flex; width: 100%; box-sizing: border-box; justify-content: center; text-align: center; min-height: 3.6rem; } @media (min-width: 760px) { .mtb-ro__tab { flex: 0 0 auto; min-width: 14rem; } .mtb-ro__plaats { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } .mtb-ro__plaats label { grid-column: 1 / -1; } .mtb-ro__plaats label + select { grid-column: 1 / 3; } .mtb-ro__plaats .mtb-deelname__knop { width: auto; } .mtb-ro__kamerkaarten { grid-template-columns: 1fr 1fr; } .mtb-ro__kamerknoppen { grid-template-columns: 1fr 1fr; } .mtb-ro__voorstel .mtb-ro__kform .mtb-deelname__knop { min-width: 0; } .mtb-ro__kamerknop .mtb-grotenknop { display: inline-flex; width: auto; } } /* Aanmelden: één formulier met radio-keuzes, duo en (weekend) slapen; vaste duo (26 okt 2026) */ .mtb-deelname__formulier fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .mtb-deelname__keuze--aan .mtb-deelname__icoon, .mtb-deelname__keuze:has(input:checked) .mtb-deelname__icoon { color: #fff; } .mtb-deelname__keuze--ja.mtb-deelname__keuze--aan, .mtb-deelname__keuze--ja:has(input:checked) { border-color: #1f7a4d; background: #e3f4ea; } .mtb-deelname__keuze--ja.mtb-deelname__keuze--aan .mtb-deelname__icoon, .mtb-deelname__keuze--ja:has(input:checked) .mtb-deelname__icoon { background: #1f7a4d; } .mtb-deelname__keuze--misschien.mtb-deelname__keuze--aan, .mtb-deelname__keuze--misschien:has(input:checked) { border-color: #c98a12; background: #fdf0d3; } .mtb-deelname__keuze--misschien.mtb-deelname__keuze--aan .mtb-deelname__icoon, .mtb-deelname__keuze--misschien:has(input:checked) .mtb-deelname__icoon { background: #c98a12; } .mtb-deelname__keuze--nee.mtb-deelname__keuze--aan, .mtb-deelname__keuze--nee:has(input:checked) { border-color: #6b7288; background: #e6e8ee; } .mtb-deelname__keuze--nee.mtb-deelname__keuze--aan .mtb-deelname__icoon, .mtb-deelname__keuze--nee:has(input:checked) .mtb-deelname__icoon { background: #6b7288; } .mtb-deelname__keuze:has(input:focus-visible) { outline: 3px solid #d7191f; outline-offset: 2px; } .mtb-deelname__rest[hidden], .mtb-deelname__formulier [hidden] { display: none; } .mtb-deelname__rest { margin-top: 1rem; } .mtb-deelname__duo-kies summary { cursor: pointer; font-size: 1.1rem; min-height: 2.8rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: .3em; } .mtb-deelname__duo-kies summary span { text-decoration: underline; color: #13294b; font-weight: 700; } .mtb-deelname__koptekst { margin: 1.1rem 0 .3rem; font-weight: 700; font-size: 1.1rem; } .mtb-deelname__anders summary { cursor: pointer; min-height: 2.8rem; display: flex; align-items: center; text-decoration: underline; color: #13294b; font-weight: 600; } .mtb-deelname__kamer--zonderduo .mtb-deelname__anders summary { display: none; } .mtb-deelname__formulier input[type="text"] { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 3rem; padding: .6rem .7rem; font: inherit; font-size: 1.05rem; border: 2px solid #cfc8b8; border-radius: 10px; background: #fff; } .mtb-deelname__weg { margin-top: .4rem; } .mtb-deelname__duoregel { margin: .8rem 0 0; font-size: 1.1rem; } .mtb-deelname__duoaf { margin-top: .4rem; } .mtb-duovraag { box-sizing: border-box; padding: .9rem 1.2rem; background: #fdf0d3; border-bottom: 3px solid #c98a12; color: #13294b; } .mtb-duovraag__melding { margin: 0; font-size: 1.1rem; font-weight: 600; } .mtb-duovraag__rij { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .3rem 0; } .mtb-duovraag__rij p { margin: 0; font-size: 1.15rem; flex: 1 1 18rem; } .mtb-duovraag__rij .mtb-deelname__knop { margin: 0; } .mtb-voorkeuren__duo { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(19,41,75,.18); } .mtb-voorkeuren__duo h3 { margin: 0 0 .6rem; font-size: 1.4rem; } .mtb-ro__duolos { color: #7a4a00; font-weight: 600; } .mtb-ro__duomelding ul { margin: .4rem 0 .6rem 1.2rem; padding: 0; }