/* ===================================================================== Blueprint aanvragen-overzicht — de aanvragenlijst in app-stijl --------------------------------------------------------------------- Wordt door includes/router.php automatisch geladen op naam van de blueprint (handle pm-aanvragen-overzicht), dus ook meteen uitgesloten van LiteSpeed's UCSS/async — zie de toelichting in de router. Overgenomen uit /app/app.html (kaarten, filterpillen, modal) en /app/admin.css (biedingen-rijen), maar ALLES onder .pmao gescoped en met de CSS-variabelen op .pmao in plaats van :root. Zonder die scoping zou dit bestand de rest van het Blocksy-thema overschrijven. Bewuste afwijkingen van de app, met reden: - de filterbalk is niet sticky: de site heeft zelf al een sticky header via Elementor, twee sticky's over elkaar geeft een dubbele balk; - de lijst staat gecentreerd met een maximale breedte, zodat de kaarten op een breed scherm dezelfde verhoudingen houden als in de app; - de bevestig-modal is een bottom sheet op mobiel (net als de app) maar staat gecentreerd op desktop. ===================================================================== */ .pmao { --surface: #f7fbff; --white: #ffffff; --on-surface: #191c1d; --on-surface-variant: #3e4850; --outline: #6e7881; --outline-variant: #bdc8d1; --primary: #00658c; --primary-container: #00afef; --secondary: #4d6700; --green: #95c11f; --error: #ba1a1a; --error-container: #ffdad6; --amber: #e69500; --deep-navy: #192a3d; --thumb: #2b5c6b; --container-low: #f3f4f5; /* De achtergrond van de app zelf (--surface in app.html). Robbie, 29 augustus 2026: "spiegel gewoon hoe het er in de app uitziet voor ophalers". Hier stond eerst de grijstint van de aanvraag-detailpagina (#eef1f5); die is bewust losgelaten omdat dit scherm de app moet zijn, niet de detailpagina. */ --pmao-veld: #f7fbff; /* Het veld loopt van rand tot rand, ook binnen een smalle themacontainer — exact dezelfde aanpak als .pmad op de detailpagina. Zo oogt het als de app zonder dat we aan het thema of aan hoeven te komen. Een eerdere versie zette hier een smal paneel met afgeronde hoeken; dat gaf op mobiel dat rare randje. */ width: 100vw; margin-left: calc(50% - 50vw); background: var(--pmao-veld); color: var(--on-surface); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } .pmao *, .pmao *::before, .pmao *::after { box-sizing: border-box; } /* ---- AFSCHERMING TEGEN DE THEMASTIJLEN ------------------------------------ Dit blok is er omdat de app en de website niet dezelfde uitgangspositie hebben. app.html staat alleen op de wereld en begint met `* { box-sizing: border-box; margin: 0; padding: 0 }`; de body zet geen line-height, dus alles staat op `normal`. Op de website laadt daarnaast Bootstrap en de themastylesheet, en Bootstrap heeft toevallig klassen die precies zo heten als de onze: `.card`, `.card-body` (padding: 1rem!) en `.badge`. Die vielen dwars door de kaart heen — de gegevenskolom kreeg 32px minder ruimte, waardoor "Berekende richtprijs" op twee regels brak, en de kaart werd 40px hoger dan in de app (Robbie, 29 augustus 2026: "hoe kan het dat de richtprijs op de app volledig is geschreven en bij ons afgebroken?"). Hieronder zetten we diezelfde nullijn terug, gescoped op .pmao. De tweede groep noemt de botsende klassen expliciet met twee klassen, zodat hij wint van Bootstrap ongeacht in welke volgorde de stylesheets binnenkomen. Alles wat de kaart daarna zelf instelt staat verderop in dit bestand en wint hier weer van: zelfde gewicht, maar later. ⚠ Test wijzigingen aan dit bestand nooit zonder de themastylesheets ernaast. Zonder Bootstrap ziet alles er goed uit terwijl de echte pagina stuk is. */ .pmao *, .pmao *::before, .pmao *::after { box-sizing: border-box; margin: 0; padding: 0; line-height: normal; letter-spacing: normal; text-transform: none; font-family: inherit; } .pmao .cards, .pmao .card, .pmao .card-row, .pmao .card-body, .pmao .card-bottom, .pmao .card-info, .pmao .card-price, .pmao .card-statusrow, .pmao .card-bids, .pmao .thumb, .pmao .badge, .pmao .meta, .pmao .richt, .pmao .empty, .pmao .loadmore, .pmao .modal-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; float: none; line-height: normal; letter-spacing: normal; text-transform: none; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; vertical-align: baseline; white-space: normal; width: auto; height: auto; } /* ---- Binnenwikkel ---- De app heeft geen maximale breedte (het is een telefoonscherm) maar wel 16px zijruimte, net als main in app.html. Op desktop hangen we daar een maximum aan zodat de kaart niet uitrekt; 730px is twee keer 20% smaller dan de 1140px van de detailpagina (Robbie, 29 augustus 2026). */ .pmao .pmaoBinnen { max-width: 720px; margin: 0 auto; padding: 6px 16px 48px; } @media (min-width: 900px) { .pmao .pmaoBinnen { max-width: 730px; padding: 10px 24px 64px; } } /* ---- Paginakop ---- Exact h1.page-title uit app.html: 28px, 800, -0.02em. Geen aparte desktopmaat en geen eigen kleur — de app heeft die ook niet. */ .pmao .page-title { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 10px 0 14px; color: var(--on-surface); } /* ---- App-banner (stond al op de oude pagina, alleen mobiel) ---- */ .pmao-appbnr-wrap { width: 100%; margin-bottom: 20px; } @media (min-width: 768px) { .pmao-appbnr-wrap { display: none; } } @keyframes pmaoShine { 0% { left: -60%; } 55% { left: 120%; } 100% { left: 120%; } } .pmao-appbnr { display: block; border-radius: 14px; overflow: hidden; position: relative; border: 2px solid #2D5D6E; box-shadow: 0 3px 0 #1a3a45, 0 6px 14px rgba(0,0,0,.15); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .pmao-appbnr:active { transform: translateY(3px); box-shadow: 0 2px 0 #1a3a45, 0 4px 8px rgba(0,0,0,.15); } .pmao-appbnr::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%); animation: pmaoShine 4s ease-in-out infinite; pointer-events: none; } .pmao-appbnr img { width: 100%; height: auto; display: block; } .pmao-appbnr__cta { display: block; width: 100%; text-align: center; background: #9ac221; color: #fff; font-weight: 800; font-size: 15px; padding: 14px; } /* ---- Uitlegbalk voor de adv. plaatser ---- */ .pmao-eigen-note { display: flex; gap: 12px; align-items: flex-start; background: #eef7fb; border: 1px solid rgba(0,101,140,.22); border-left: 4px solid var(--primary); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; max-width: 900px; } .pmao-eigen-note__icon { flex: 0 0 auto; color: var(--primary); display: inline-flex; margin-top: 1px; } .pmao-eigen-note__text { font-size: 14px; line-height: 1.55; color: var(--on-surface-variant); } .pmao-eigen-note__text b { color: var(--on-surface); display: block; margin-bottom: 2px; } /* ---- Filterpillen (Status/Afstand/Datum) ---- */ .pmao .filter-pills { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .pmao .filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--outline-variant); color: var(--on-surface); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; font-family: inherit; } .pmao .filter-pill .chev { color: var(--outline); display: inline-flex; transition: transform .15s ease; } .pmao .filter-pill.open .chev { transform: rotate(180deg); } .pmao .filter-pill.active { border-color: var(--green); color: #5c7a13; background: rgba(149,193,31,.1); } .pmao .filter-pill.active .chev { color: #5c7a13; } .pmao .filter-overlay { position: relative; margin: -4px 0 12px; } /* ---- Desktop: filteren en sorteren op één rij ---- Op mobiel staan de pillen en de sorteerkeuze onder elkaar, precies zoals in de app — daar is geen ruimte voor allebei naast elkaar. Op desktop wel (Robbie, 29 augustus 2026), dus daar leggen we ze naast elkaar: pillen links, sorteren rechts. Met grid en niet met een extra wikkel-div, zodat de HTML gelijk blijft aan die van de app. Het uitklappende filterpaneel staat in de HTML tussen de pillen en de sorteerkeuze; hier krijgt het een eigen rij over de volle breedte, zodat het netjes onder de balk openklapt in plaats van ertussen. */ @media (min-width: 900px) { .pmao .pmao-header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; margin-bottom: 20px; } .pmao .pmao-header .filter-pills { grid-column: 1; grid-row: 1; margin-bottom: 0; } .pmao .pmao-header .filter-actions-row { grid-column: 2; grid-row: 1; margin-bottom: 0; } .pmao .pmao-header .filter-overlay { grid-column: 1 / -1; grid-row: 2; margin: 12px 0 0; } } .pmao .filter-overlay-backdrop { position: fixed; inset: 0; z-index: 30; background: transparent; } .pmao .filter-overlay-panel { position: relative; z-index: 31; background: var(--white); border: 1px solid var(--outline-variant); border-radius: 14px; box-shadow: 0 8px 24px rgba(25,42,61,.14); padding: 16px; margin-top: 4px; max-width: 420px; } .pmao .filter-overlay-panel h4 { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--on-surface); } .pmao .filter-apply-btn { width: 100%; border: none; border-radius: 10px; padding: 12px; margin-top: 8px; background: var(--green); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; } .pmao .filter-check-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; color: var(--on-surface); cursor: pointer; margin: 0; } .pmao .filter-check-row input { width: 18px; height: 18px; accent-color: var(--green); flex: 0 0 auto; margin: 0; } .pmao .filter-check-icon { display: inline-flex; width: 18px; flex: 0 0 auto; color: var(--green); visibility: hidden; } .pmao .filter-datum-opt.selected .filter-check-icon { visibility: visible; } .pmao .filter-slider-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; } .pmao .filter-slider-head b { color: #5c7a13; } /* ---- Schuifbalk en selectievakjes ---------------------------------------- Twee dingen uit de themastylesheets vielen hier overheen en dat was op de echte pagina meteen zichtbaar (Robbie, 29 augustus 2026: "hij pakt de checkmarks en lijntje niet goed in de filter"): 1. Het thema heeft een kale `input[type="range"] { -webkit-appearance: none }` ZONDER achtergrond. Daarmee verdwijnt de baan van de schuifbalk volledig en hou je alleen een los bolletje over. Terugzetten op `appearance: auto` helpt niet, want het thema stylet ook `::-webkit-slider-thumb` kaal. We tekenen baan en knop hier dus zelf, in het groen van de app. 2. Bootstrap zet selectievakjes op `appearance: none` en tekent zijn eigen vinkje als achtergrondafbeelding. Binnen .pmao willen we het gewone systeemvakje met accent-color, precies zoals in de app. Allebei gescoped op .pmao, dus de rest van de site verandert er niets van. */ .pmao input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 8px 0 4px; padding: 0; border: 0; border-radius: 999px; outline: none; background: #d7dee6; cursor: pointer; } .pmao input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: transparent; border: 0; } .pmao input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -6px; border-radius: 50%; background: var(--green); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); cursor: pointer; } .pmao input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: #d7dee6; border: 0; } .pmao input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 1px 3px rgba(15, 23, 42, .3); cursor: pointer; } .pmao .filter-check-row input[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; width: 18px; height: 18px; flex: 0 0 auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; background-image: none; accent-color: var(--green); vertical-align: middle; cursor: pointer; } /* ---- Sorteren ---- In de app deelt de sorteerkeuze deze rij met "Filter onthouden" en is hij daardoor 294 van de 472px breed, rechts uitgelijnd. Die knop bestaat op de website niet meer (zie includes/aanvragen-overzicht.php), maar volle breedte was meteen het meest zichtbare verschil met de app — dus houden we plek en maat aan. */ .pmao .filter-actions-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; justify-content: flex-end; } .pmao .select-wrap { position: relative; flex: 1 1 auto; min-width: 0; } .pmao .select-wrap select { width: 100%; appearance: none; -webkit-appearance: none; padding: 12px 40px 12px 14px; background: var(--white); color: var(--on-surface); border: 1px solid var(--outline-variant); border-radius: 10px; font-size: 15px; font-family: inherit; outline: none; box-shadow: 0 1px 2px rgba(0,0,0,0.04); height: auto; margin: 0; } .pmao .select-wrap select:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .pmao .select-wrap .chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--outline); pointer-events: none; display: inline-flex; } .pmao .select-wrap-sort { flex: 0 1 294px; margin-bottom: 0; min-width: 0; } /* ---- Kaarten ---- */ /* Altijd ÉÉN kolom, ook op desktop (Robbie, 29 augustus 2026: "waarom op desktop aanvragen naast elkaar zetten? dat moet onder elkaar blijven"). Zoals de app. */ .pmao .cards { display: flex; flex-direction: column; gap: 12px; } .pmao .card { position: relative; background: var(--white); border: 1px solid var(--outline-variant); border-radius: 12px; box-shadow: 0 2px 6px rgba(25, 42, 61, 0.06); padding: 12px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; overflow: hidden; transition: background .12s ease, max-height .3s ease, opacity .3s ease, margin-bottom .3s ease, padding .3s ease, transform .3s ease; } .pmao .card:hover { background: var(--container-low); } .pmao .card.gesloten { background: var(--container-low); opacity: .75; } .pmao .card.card-removing { max-height: 0 !important; opacity: 0; margin-bottom: -12px; padding-top: 0; padding-bottom: 0; transform: scale(.96); pointer-events: none; } .pmao .card-row { display: flex; gap: 12px; align-items: flex-start; } .pmao .thumb { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 10px; overflow: hidden; background: var(--thumb); display: flex; align-items: center; justify-content: center; } /* Op desktop een maat groter (Robbie, 29 augustus 2026). 96px past nog binnen de hoogte die de gegevens ernaast toch al innemen, dus de kaart wordt er niet hoger van — de foto vult alleen de ruimte die er links naast stond. Mobiel blijft op 72px, gelijk aan de app. */ @media (min-width: 900px) { .pmao .thumb { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 12px; } } .pmao .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pmao .thumb svg { color: #fff; } .pmao .card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .pmao .card-body h3 { font-size: 14px; font-weight: 700; line-height: 1.3; margin: 0; color: #2d5d6e; } .pmao .card-body h3 a { color: inherit; text-decoration: none; } .pmao .card-body h3 a:hover { text-decoration: underline; } .pmao .card-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pmao .card-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .pmao .meta { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--on-surface-variant); } .pmao .meta.upper { text-transform: uppercase; } .pmao .meta svg { flex: 0 0 auto; color: #2d5d6e; } .pmao .dist-icons { display: inline-flex; align-items: center; gap: 2px; } .pmao .richt { font-size: 11px; color: var(--outline); } .pmao .richt b { color: #76a200; font-weight: 600; } .pmao .card-price { flex: 0 0 auto; min-width: 72px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; text-align: right; } .pmao .card-price .laagste b { color: var(--deep-navy); } .pmao .card-price .jouw.wint b { color: var(--green); } .pmao .card-price .jouw.verliest b { color: var(--error); } .pmao .badge { align-self: flex-end; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; border: 1px solid transparent; } .pmao .badge.in_behandeling { background: rgba(230,149,0,.12); color: var(--amber); border-color: rgba(230,149,0,.25); } .pmao .badge.gesloten { background: var(--error-container); color: var(--error); border-color: rgba(186,26,26,.2); } .pmao .badge.aod { background: rgba(149,193,31,.14); color: #5d7c13; border-color: rgba(149,193,31,.35); } .pmao .badge.aod.geboekt { background: #95C11F; color: #fff; border-color: #95C11F; } .pmao .card-statusrow { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } .pmao .card-deadline { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; padding: 3px 8px; border-radius: 999px; background: rgba(230,149,0,.12); color: #8a5a00; border: 1px solid rgba(230,149,0,.3); } .pmao .card-deadline.urgent { background: rgba(186,26,26,.10); color: var(--error); border-color: rgba(186,26,26,.3); } .pmao .card-deadline.done { background: rgba(0,0,0,.05); color: var(--on-surface-variant); border-color: rgba(0,0,0,.12); } /* ---- Opnieuw vrijgekomen aanvraag ---- */ .pmao .card.heropend { border-color: rgba(149,193,31,.55); } .pmao .card-heropend { margin-top: 10px; border-radius: 9px; padding: 8px 11px; background: linear-gradient(135deg, #f2fadf 0%, #e4f5c4 100%); border: 1px solid rgba(77,103,0,.22); color: var(--secondary); font-size: 12.5px; font-weight: 700; line-height: 1.35; display: flex; align-items: center; gap: 7px; } .pmao .card-heropend .card-heropend-bedrag { color: #3d5200; font-weight: 800; } /* ---- Verbergen-knopje ---- */ .pmao .bid-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--container-low); border: 1px solid var(--outline-variant); color: var(--outline); cursor: pointer; padding: 0; } .pmao .bid-x:hover { background: var(--outline-variant); } .pmao .card-hide-x { position: absolute; top: 8px; right: 8px; background: var(--white); z-index: 2; } /* Ruimte vrijhouden voor dat knopje, anders loopt een lange titel eronderdoor en lijkt de laatste letter weggevallen. In de app gebeurt dat ook, maar daar valt het minder op omdat de kaart altijd schermbreed is. */ .pmao .card-hide-x ~ .card-row .card-body h3 { padding-right: 26px; } /* ---- Laadstatus ---- */ .pmao .loadmore { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px 0; color: var(--outline); font-size: 15px; cursor: pointer; } .pmao .spin { animation: pmaoSpin .8s linear infinite; } @keyframes pmaoSpin { to { transform: rotate(360deg); } } .pmao .empty code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--container-low); padding: 2px 6px; border-radius: 4px; } .pmao .empty a { color: var(--primary); font-weight: 700; } .pmao .empty { text-align: center; color: var(--on-surface-variant); padding: 40px 16px; font-size: 14px; line-height: 1.6; } .pmao .empty a { color: var(--primary); font-weight: 600; } /* ---- Admin: biedingen-rijen in de kaart (uit admin.css) ---- admin.css zet .card.admin bewust op cursor:default omdat de app geen admin-detailscherm heeft. Op de website bestaat de aanvraagpagina wél, dus daar is de kaart gewoon klikbaar (Robbie, 29 augustus 2026) en laten we de normale kaart-cursor en hover staan. */ .pmao .card-bids { border-top: 1px solid var(--outline-variant); padding-top: 8px; display: flex; flex-direction: column; } .pmao .card-bids-head { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 4px; } .pmao .card-bids-empty { font-size: 12px; color: var(--outline); font-style: italic; } .pmao .card-bid-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; } .pmao .card-bid-avatar { width: 30px; height: 30px; border-radius: 999px; overflow: hidden; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--on-surface-variant); flex: 0 0 auto; } .pmao .card-bid-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .pmao .card-bid-avatar svg { width: 18px; height: 18px; } .pmao .card-bid-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: #2d5d6e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pmao .card-bid-price { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--deep-navy); } .pmao .card-bid-won { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--green); margin-right: 14px; } .pmao .card-bid-won svg { width: 16px; height: 16px; } .pmao .card-bid-row.won .card-bid-name { color: var(--green); } .pmao .card-bid-row.won .card-bid-price { color: var(--green); } .pmao .card.admin .meta-row { display: flex; align-items: center; flex-wrap: wrap; } .pmao .card.admin .meta-row .meta { display: inline-flex; align-items: center; gap: 5px; } .pmao .card.admin .meta-row .meta + .meta { margin-left: 24px; } .pmao .card-heropend-admin { margin-top: 6px; margin-bottom: 8px; padding: 7px 10px; border-left: 3px solid var(--green); background: rgba(77,103,0,.06); border-radius: 0 8px 8px 0; } .pmao .card-heropend-reden { font-size: 12.5px; font-weight: 600; color: var(--secondary); line-height: 1.4; } .pmao .card-heropend-meta { font-size: 11.5px; color: var(--on-surface-variant); margin-top: 3px; line-height: 1.45; } .pmao .card-heropend-lbl { font-weight: 700; color: var(--on-surface-variant); } /* ---- Bevestig-modal ---- */ .pmao-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; } .pmao-modal[hidden] { display: none; } .pmao-modal-backdrop { position: absolute; inset: 0; background: rgba(25,42,61,.45); } .pmao .modal-card { position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; background: var(--white); border-radius: 18px 18px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0,0,0,.18); animation: pmaoSheetUp .22s ease-out; } @keyframes pmaoSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (min-width: 640px) { .pmao-modal { align-items: center; } .pmao .modal-card { border-radius: 18px; padding-bottom: 20px; animation: none; } } .pmao .modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: none; background: var(--container-low); border-radius: 50%; color: var(--on-surface-variant); display: flex; align-items: center; justify-content: center; cursor: pointer; } .pmao .modal-title { font-size: 20px; font-weight: 800; margin: 0 0 16px; padding-right: 38px; color: var(--on-surface); } .pmao .modal-text { color: var(--on-surface-variant); font-size: 14px; line-height: 1.5; margin-bottom: 16px; } .pmao .bid-error { color: var(--error); font-size: 13px; margin: -2px 0 2px; } .pmao .btn-action { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; margin-bottom: 12px; font-family: inherit; } .pmao .btn-action.danger { background: var(--error); } .pmao .btn-action.ghost { background: none; color: var(--on-surface-variant); margin-bottom: 0; } .pmao .btn-action:hover { opacity: .9; } /* ===================================================================== Blok voor uitgelogde bezoekers / rollen zonder toegang --------------------------------------------------------------------- In de stijl van de uitvoerders-wervingspagina (blueprints/uitvoerders.php + assets/uitvoerders.css): donkere hero met verlooprand, gradient-badge, accentwoord in teal/blauw en de pil-knop met twee regels. Dezelfde kleurtokens — verander je daar de huisstijl, doe het hier ook. Let op: het afschermingsblok bovenaan dit bestand zet lettertype en regelhoogte van alles onder .pmao terug naar de app-nullijn. Deze secties moeten hun eigen font en line-height dus expliciet zetten. Er staat bewust geen echte aanvraagdata in de HTML (zie overzicht-include): de blur is opmaak, geen slot. ===================================================================== */ .pmao .pmaoWerf, .pmao .pmaoKlant { --werf-groen: #95C11F; --werf-blauw: #00AFEF; --werf-teal: #1ec98d; --werf-tealBlauw: #0aa0e9; --werf-inkt: #0f172a; --werf-grijs: #64748b; --werf-lijn: #e2e8f0; font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.5; } /* ---- De donkere hero ---- */ .pmao .pmaoWerf { position: relative; overflow: hidden; background: radial-gradient(130% 140% at 20% -10%, #1e3a5f 0%, #16283f 40%, #0f172a 100%); color: #fff; border-radius: 22px; padding: 34px 30px 30px; margin-bottom: 14px; box-shadow: 0 12px 30px rgba(15, 23, 42, .12); } .pmao .pmaoWerfBadge { display: inline-flex; align-items: center; background: linear-gradient(120deg, var(--werf-groen), var(--werf-blauw)); color: #fff; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; } .pmao .pmaoWerf h2 { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 900; letter-spacing: -1px; line-height: 1.12; color: #fff; margin: 16px 0 0; max-width: 620px; } .pmao .pmaoWerf h2 .accent { background: linear-gradient(90deg, var(--werf-teal), var(--werf-tealBlauw)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pmao .pmaoWerfSub { font-size: 15px; line-height: 1.7; color: #b6c6d8; margin-top: 14px; max-width: 540px; } @keyframes pmaoWerfPuls { 0%, 100% { box-shadow: 0 10px 26px rgba(30, 201, 141, .35); } 50% { box-shadow: 0 10px 36px rgba(10, 160, 233, .45); } } @keyframes pmaoWerfGlans { 0% { transform: translateX(-130%) skewX(-18deg); } 60%, 100% { transform: translateX(230%) skewX(-18deg); } } .pmao .pmaoWerfCta { position: relative; overflow: hidden; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 24px; padding: 15px 32px; border-radius: 999px; text-decoration: none; background: linear-gradient(90deg, var(--werf-teal), var(--werf-tealBlauw)); color: #fff; animation: pmaoWerfPuls 2.6s ease-in-out infinite; } .pmao .pmaoWerfCta::after { content: ''; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); animation: pmaoWerfGlans 3.2s ease-in-out infinite; } .pmao .pmaoWerfCta .hoofd { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.2px; } .pmao .pmaoWerfCta .sub { font-size: 11.5px; font-weight: 600; opacity: .95; } .pmao .pmaoWerfChips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .pmao .pmaoWerfChip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: #dbe7f3; } .pmao .pmaoWerfChip b { font-family: 'Inter', sans-serif; color: #fff; } .pmao .pmaoWerfVoet { margin-top: 18px; font-size: 13px; color: #93a7bd; } .pmao .pmaoWerfVoet a { color: #7fd7f5; font-weight: 700; text-decoration: underline; } /* ---- Voor wie juist zelf een aanvraag wil plaatsen ---- Bewust compact: kop, één regel en een knop naast elkaar. Uitleggen hoe de flow werkt doet de flow zelf (Robbie, 29 augustus 2026). */ .pmao .pmaoKlant { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: #fff; border: 1px solid var(--werf-lijn); border-radius: 18px; padding: 20px 24px; color: #1e293b; box-shadow: 0 8px 22px rgba(15, 23, 42, .06); margin-bottom: 18px; } .pmao .pmaoKlantTekst { flex: 1 1 300px; min-width: 0; } .pmao .pmaoKlant h2 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 900; letter-spacing: -.3px; line-height: 1.25; color: var(--werf-inkt); margin: 0; } .pmao .pmaoKlant p { font-size: 14px; line-height: 1.5; color: var(--werf-grijs); margin: 5px 0 0; } .pmao .pmaoKlantCta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 999px; text-decoration: none; background: var(--werf-groen); color: #fff; font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 800; box-shadow: 0 4px 0 #7da31a; transition: transform .12s ease, box-shadow .12s ease; } .pmao .pmaoKlantCta:hover { color: #fff; transform: translateY(1px); box-shadow: 0 3px 0 #7da31a; } /* ---- De vervaagde kaarten als bewijs, onderaan ---- Uitvagen met een MASKER, niet met een gekleurde gradient eroverheen: dan klopt het op elke paginaachtergrond. */ .pmao .pmao-lock { position: relative; } .pmao .pmao-lock__cards { filter: blur(5px); opacity: .6; pointer-events: none; user-select: none; max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 55%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 55%, transparent 92%); } @media (max-width: 699px) { .pmao .pmaoWerf { padding: 26px 20px 24px; border-radius: 18px; } .pmao .pmaoWerf h2 { font-size: 23px; letter-spacing: -.6px; } .pmao .pmaoWerfCta { display: flex; } .pmao .pmao-lock__cards { max-height: 220px; } .pmao .pmaoKlant { padding: 18px; } .pmao .pmaoKlant h2 { font-size: 17px; } .pmao .pmaoKlantCta { width: 100%; } } /* ═══════════════════════════════════════════════════════════════════ PARTNERVOORSPRONG — het eerste uur is een aanvraag alleen voor partners. De kaart blijft LEESBAAR onder de strook (licht vervaagd, niet weggepoetst): wie niet kan zien welke klus hij misloopt, wordt daar ook niet warm van. ⚠ Scope is `.pmao`, een KLASSE. Ik had hier eerst `#pmAO` staan, en dat bestaat nergens in de HTML: het hele blok matchte dus op niets, het slot-icoon kreeg geen afmeting en vulde de halve kaart. Kijk bij een nieuwe regel altijd even hoe de bestaande regels in dit bestand geschreven zijn. ⚠ De strook heeft een eigen stapelcontext nodig. De kaartinhoud eronder krijgt een `filter`, en dat maakt daar een stacking context van die in de schilderreeks ná gewone blokelementen komt. Zonder z-index op de strook wordt de vervaagde kaart er dus bovenóp getekend en lijkt de strook zelf ook wazig (les van 7 september 2026). ═══════════════════════════════════════════════════════════════════ */ .pmao .card.pvOpSlot { position: relative; } .pmao .card.pvOpSlot > .card-row, .pmao .card.pvOpSlot > .card-statusrow, .pmao .card.pvOpSlot > .card-heropend { filter: blur(1.4px); opacity: .8; user-select: none; } .pmao .card.pvOpSlot .card-hide-x { display: none; } .pmao .pvSlot { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 8px; } .pmao .pvStrook { width: 100%; background: #fff; border: 1px solid #cbd5e1; border-radius: 11px; box-shadow: 0 12px 28px rgba(15,23,42,.22); padding: 10px 12px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .pmao .pvSlotIco { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; background: #0f172a; color: #fff; } .pmao .pvSlotIco svg { width: 13px; height: 13px; } .pmao .pvStrookTekst { min-width: 0; flex: 1 1 190px; } .pmao .pvKop { display: block; font: 800 13px 'Inter', sans-serif; color: #0f172a; line-height: 1.3; } .pmao .pvSub { display: block; font-size: 11.5px; color: #94a3b8; line-height: 1.45; margin-top: 2px; } .pmao .pvSub b { color: #64748b; font-family: 'Inter', sans-serif; font-weight: 700; } .pmao .pvKnop { flex: 0 0 auto; text-decoration: none; font: 800 12.5px 'Inter', sans-serif; color: #fff; background: #7ba018; border-radius: 999px; padding: 9px 16px; box-shadow: 0 6px 14px rgba(123,160,24,.3); } .pmao .pvKnop:hover { background: #6b8c15; } /* Wat de PARTNER op dezelfde kaart ziet: geen slot maar een gunst. */ .pmao .pvExclusief { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 800 11.5px 'Inter', sans-serif; color: #7ba018; background: #eefaf4; border: 1px solid #cdebd9; border-radius: 999px; padding: 4px 10px; } .pmao .pvExclusief svg { width: 12px; height: 12px; flex: 0 0 auto; }