/* Beheer-App — nagebouwd op het Figma-bestand "Dashboard-Pk" met exacte waarden uit get_design_context (kleur/radius/schaduw/font per node), niet alleen van een screenshot afgelezen. Genoteerd per sectie waar een waarde is GEËXTRAPOLEERD (niet letterlijk uit Figma gehaald, maar consistent met een wél bevestigd patroon) i.p.v. letterlijk overgenomen. */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=Manrope:wght@700&display=swap'); :root { /* Ingrediëntenkast — de hex-waarden die Figma zelf per node teruggeeft wijken op de laatste twee cijfers af van colors_and_type.css (bijv. spirulina #00a99d i.p.v. #00A1A1) — hier de Figma-waarde aangehouden. */ --ik-aubergine:#610039; --ik-spirulina:#00a99d; --ik-granaatappel:#de1d66; --ik-olijf:#959964; --ik-sinaasappel:#fa851e; --ik-paprika:#CF6634; --ik-appel:#6fb737; --ik-saffraan:#F4A51C; --ik-champignon:#C9B79A; --ik-amandel:#e7d8c8; --ik-lychee:#F3C8D2; --ik-cream:#F4EADF; --ik-mint:#D7EDE9; --titel-donker: #4d1240; /* exacte kleur van dashboardkaart-titels (54:27) */ --brand-pk: var(--ik-spirulina); --brand-asft: var(--ik-sinaasappel); --brand-kk: var(--ik-appel); --brand-wk: var(--ik-granaatappel); /* Gloed-schaduw op de ringbadge-kaarten — alle 4 nu EXACT uit get_design_context (geen extrapolatie meer), elk apart opgevraagd: Aanschuiftafel (29:1118), Kinder Keuken (29:1150), Wereldkeuken (29:1192). Let op: de 3 waarden zijn zelf ook niet consistent met elkaar in Figma (andere kleur en/of alpha per kaart, geen nette formule) — hier dus ook niet gladgestreken. Participatiekeuken (4e kaart) bestaat NIET in Figma — er zijn maar 3 keuken-kaarten getekend. Deze waarde is dus onvermijdelijk zelf ingevuld (zelfde vorm, spirulina-kleur, .4 alpha), niet uit Figma. */ --gloed-pk: 0px 10px 30px 0px rgba(0,169,157,.4); /* NIET uit Figma — bestaat niet */ --gloed-asft: 0px 10px 30px 0px rgba(255,153,58,.4); /* exact: 29:1118 */ --gloed-kk: 0px 10px 30px 0px rgba(111,183,55,1); /* exact: 29:1150 (var(--color), geen alpha) */ --gloed-wk: 0px 10px 30px 0px rgba(222,29,102,.31); /* exact: 29:1192 */ --fg: var(--ik-aubergine); --muted: #6b7280; --white: #fff; --border: #E5E7EB; --card-row-bg: #f9fafb; /* exact: team-/menu-kaartregels (46:55, 46:40) */ /* Paginaverloop — exact: het DASHBOARD-frame (1:15): amandel op 44% dekking naar spirulina op 44% dekking onder 107.9157°, over wit. */ --bg-gradient: linear-gradient(107.9157122213133deg, rgba(231, 216, 200, 0.44) 6.7938%, rgba(0, 169, 157, 0.44) 99.471%), linear-gradient(90deg, #fff 0%, #fff 100%); --radius-lg: 20px; /* exact: hero/team/menu-kaarten */ --radius-md: 12px; /* exact: menu-regel (46:40) */ --radius-pill: 999px; --shadow-card: 0px 4px 5.2px 0px rgba(0,0,0,.09); /* exact: team-/menu-card */ --shadow-hero: 0px 4px 10.4px 1px rgba(0,0,0,.09); /* exact: hero-reservation-card */ --shadow-dash: 0px 4px 6px 0px rgba(0,0,0,.03); /* exact: dashboardkaart (54:24) */ --shadow-doc: 4px 4px 17.4px 6px rgba(0,0,0,.09); /* exact: document-rij (48:133) */ --font-ui: "Barlow Condensed", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; /* exact: beschrijvingsteksten */ --font-datum: "Manrope", system-ui, sans-serif; /* exact: datum op de taken-tegels (45:738) */ } * { box-sizing: border-box; } html, body { margin: 0; } /* Het verloop staat op , niet op : dat is het canvas, en iOS Safari trekt juist dát vlak door in de overscroll boven- en onderaan. Met een losse kleur op zag je daar een randje in de verkeerde tint. */ html { background: var(--bg-gradient); background-attachment: fixed; background-repeat: no-repeat; min-height: 100%; } body { font-family: var(--font-ui); background: transparent; color: var(--fg); line-height: 1.45; font-size: 16px; min-height: 100vh; } /* Koppen op schermen die niet in Figma staan (overzicht, afdelingpagina, lijsten). Maten uitsluitend uit het ontwerp overgenomen — optie "compact", met Alex afgestemd: h1 32px = "MENU" (46:38) · h2 25px = MENUITEM (29:1086) · h3 22px = menugerecht (46:42). Kleur altijd aubergine #610039. */ /* Verbergen moet verbergen blijven: veel elementen hier hebben display:flex, en dat wint het van het hidden-attribuut. */ [hidden] { display: none !important; } h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 700; margin: 0 0 10px; color: var(--fg); } h1 { font-size: clamp(24px, 3.2vw, 32px); text-transform: uppercase; letter-spacing: 0; } h2 { font-size: clamp(20px, 2.5vw, 25px); text-transform: uppercase; letter-spacing: 0; line-height: 1.019; } h3 { font-size: 22px; font-weight: 600; text-transform: none; letter-spacing: 0; } p { margin: 0 0 12px; } a { color: var(--fg); text-decoration: none; } a.onderlijnd { text-decoration: underline; text-underline-offset: 2px; } img { max-width: 100%; } ul.schoon { list-style: none; margin: 0; padding: 0; } img.icoon { display: inline-block; vertical-align: middle; } /* ---------- Layout ---------- */ .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; } main.wrap { padding-top: 28px; padding-bottom: 64px; } /* ---------- Topbar: gecentreerd logo, MENUITEM-stijl navigatie ---------- */ header.topbar { padding: 18px 0 8px; position: relative; z-index: 40; } .topbar-grid { display: none; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; } .topbar-links, .topbar-rechts { display: none; gap: 22px; } .topbar-rechts { justify-content: flex-end; } /* MENUITEM — exact: 29:1086/29:1089: Barlow Condensed Bold 25px, line-height 1.019; actief item spirulina, de rest aubergine. */ .topbar-nav-item { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; font-size: clamp(16px, 1.6vw, 25px); line-height: 1.019; letter-spacing: 0; color: var(--fg); white-space: nowrap; } .topbar-nav-item.actief, .topbar-nav-item:hover { color: var(--ik-spirulina); } .topbar-logo { display: flex; justify-content: center; } /* Mobiel 110px (keuze van Alex — mobiel staat niet in Figma), desktop 137px: de exacte hoogte uit node 4:397 (356x137). */ .topbar-logo img { height: 110px; width: auto; max-width: 100%; display: block; } /* Op smalle telefoons past 110px niet naast de hamburger: dan krimpt hij mee. */ @media (max-width: 400px) { .topbar-logo img { height: auto; max-height: 110px; } } @media (min-width: 860px) { .topbar-logo img { height: 137px; } } /* Mobiel: logo in het midden, hamburger rechtsboven. Dat kan sinds de account-widget op smalle schermen in het menu zit en niet meer rechtsboven zweeft. Drie kolommen, zodat het logo echt midden blijft. */ .topbar-mobiel-rij { display: grid; grid-template-columns: 20px 1fr 56px; align-items: center; } .topbar-mobiel-rij .topbar-logo { grid-column: 2; grid-row: 1; min-width: 0; } .topbar-mobiel-rij .hamburger { grid-column: 3; grid-row: 1; justify-self: end; } /* ---------- Hamburger en mobiel menu ---------- Nagebouwd van participatiekeuken.isdebesteklant.nl, met onze eigen kleuren (keuze van Alex: het lichte paginaverloop met aubergine tekst, geen iconen bij de menu-items). Maten en timing zijn die van de voorbeeldsite. */ .hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 64px; width: auto; border: 0; background: transparent; cursor: pointer; padding: 0; position: relative; z-index: 60; color: var(--ik-aubergine); } .hamburger .strepen { display: flex; flex-direction: column; align-items: center; gap: 6px; } .hamburger .streep { display: block; height: 5px; background: currentColor; border-radius: 9999px; } .hamburger .streep:nth-child(1), .hamburger .streep:nth-child(3) { width: 28px; transition: transform .3s; } .hamburger .streep:nth-child(2) { width: 36px; transition: opacity .2s; } .hamburger.open .streep:nth-child(1) { transform: translateY(11px) rotate(45deg); } .hamburger.open .streep:nth-child(2) { opacity: 0; } .hamburger.open .streep:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } .hamburger .knoplabel { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; } /* Openstaand menu: het logo verdwijnt en de hamburger wordt wit, want hij staat dan op het spirulina-vlak. */ body.menu-open .topbar-mobiel-rij .topbar-logo { visibility: hidden; } .hamburger.open { color: #fff; } .hamburger .label-open { display: none; } .hamburger.open .label-dicht { display: none; } .hamburger.open .label-open { display: inline; } /* Het menu veegt van boven naar beneden open (clip-path, 500ms) over het hele scherm; logo en hamburger blijven erbovenop staan. */ .topbar-mobiel-rij { position: relative; z-index: 60; } nav.hoofdnav { position: fixed; inset: 0; z-index: 50; display: block; margin: 0; /* Achtergrond — exact: Rectangle 34 (45:1090): spirulina met daarover een verloop van spirulina 20% naar #666 20%, van boven naar beneden. */ background: linear-gradient(180deg, rgba(0, 169, 157, .2) 0%, rgba(102, 102, 102, .2) 100%), linear-gradient(90deg, #00a99d 0%, #00a99d 100%); color: #fff; padding: 0; overflow-y: auto; border-radius: 0; box-shadow: none; opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); transition: opacity .3s ease-out, clip-path .5s ease-out; } nav.hoofdnav.open { opacity: 1; pointer-events: auto; clip-path: inset(0 0 0 0); } .hoofdnav-binnen { margin: 0 auto; width: 100%; max-width: 672px; padding: 112px 20px 32px; } /* De zoekbalk van de homepage staat ook in het menu; daar mag hij de volle breedte hebben. */ nav.hoofdnav .zoekbalk { max-width: none; margin-bottom: 0; } /* Menu-items: een regel per item met een scheidingslijn erboven en een chevron erachter. */ .menu-lijst { margin-top: 24px; } nav.hoofdnav .menu-lijst a { display: flex; align-items: center; gap: 16px; padding: 16px 8px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: 20px; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0; color: #fff; } nav.hoofdnav .menu-lijst a.actief { color: #fff; } nav.hoofdnav .menu-label { flex: 1; } nav.hoofdnav .menu-chevron { font-size: 24px; color: rgba(255, 255, 255, .7); line-height: 1; } nav.hoofdnav #aw-slot { margin-top: 32px; } /* De extra hamburger voor desktop staat standaard uit (op mobiel hangt de hamburger al in de mobiel-rij); pas vanaf 860px komt hij tevoorschijn. */ .hamburger-desktop { display: none; } @media (min-width: 860px) { .topbar-mobiel-rij { display: none; } .topbar-grid { display: grid; } .topbar-links, .topbar-rechts { display: flex; align-items: center; } /* Hamburger óók op desktop, rechtsboven; het menu (hoofdnav) blijft het schuif-overlay zoals op mobiel — niet meer verbergen (Alex, 25-09-2026). */ header.topbar { position: relative; } .hamburger-desktop { display: flex; position: absolute; top: 14px; right: 20px; z-index: 60; } } /* ---------- Kaarten ---------- */ .kaart { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 24px; margin-bottom: 18px; } /* ---------- Stapsgewijs formulier (evenement_formulier.html) ---------- Zelfde interactiepatroon als het contactformulier op participatiekeuken.nl: één vraag per stap, met genummerde bolletjes bovenin die de voortgang tonen. */ .wizard-stappen { display: flex; justify-content: center; gap: 10px; margin-bottom: 28px; } .wizard-stap-bol { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; font-family: var(--font-ui); background: var(--card-row-bg); color: var(--muted); } .wizard-stap-bol.actief { background: var(--ik-aubergine); color: #fff; } .wizard-stap-bol.gehad { background: var(--ik-spirulina); color: #fff; cursor: pointer; } .wizard-label { color: var(--muted); font-size: 14px; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .02em; } .wizard-paneel h2 { margin: 0 0 18px; } .wizard-acties { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; } .wizard-acties [data-wizard-vorige] { margin-right: auto; } /* Aanmaakwizard op een eigen pagina (marcom_formulier.html) — nagebouwd naar het contactformulier op participatiekeuken.nl/new/contact: één witte kaart, de stapteller als ringetje rechtsboven, een grote vraag als kop en daaronder keuzepillen. Alle kleuren/radii komen uit het bestaande palet hierboven; er is geen eigen kleur bijverzonnen. */ .wizard-kaart { position: relative; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-hero); padding: 96px 40px 32px; max-width: 720px; margin: 0 auto 24px; } .wizard-ring-hoek { position: absolute; top: 28px; right: 32px; display: flex; align-items: center; gap: 10px; } .wizard-ring-uitleg { font-family: var(--font-ui); font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); } /* De ring is getekend om op een gekleurd vlak te staan (witte streek). Op de witte kaart draaien we dat om: amandel als spoor, aubergine als voortgang. CSS wint van de stroke-attributen in de macro, dus de macro blijft heel. */ .wizard-ring-hoek .ring-svg circle { stroke: var(--ik-amandel); stroke-opacity: 1; } .wizard-ring-hoek .ring-svg circle.ring-boog { stroke: var(--ik-aubergine); } .wizard-ring-hoek .ring-tekst { color: var(--ik-aubergine); font-size: 17px; } /* Kop en onderregel staan op het voorbeeld gecentreerd: 36px/700 uppercase en 24px/400, allebei in #5d0e39 en in Barlow Condensed. */ .wizard-kaart .wizard-paneel { text-align: center; } .wizard-kaart .wizard-paneel h2 { font-size: clamp(26px, 4vw, 36px); color: #5d0e39; margin: 0 0 6px; } .wizard-uitleg { font-family: var(--font-ui); font-size: 24px; font-weight: 400; line-height: 31.2px; color: #5d0e39; margin: 0 auto 26px; max-width: 46ch; } /* Invulvelden blijven wél gewoon links uitgelijnd. */ .wizard-kaart .form-veld, .wizard-kaart .keuzelijst { text-align: left; } /* Keuzepillen: één klik is het antwoord én de volgende stap. Maten en kleuren letterlijk overgenomen van het contactformulier op participatiekeuken.nl/new/contact (computed styles uitgelezen, niet van een screenshot afgelezen): pil 56px hoog, radius 320px, rand rgba(62,52,200,.1), schaduw 1px 1px 8px 1px rgba(182,165,208,.68), tekst Barlow Condensed 22.4px/33.6px in #5d0e39. Gekozen wordt hij rgba(23,128,139,.71) met rand #36b37e, witte tekst en 5% groter — ook die waarden komen daarvandaan, niet uit het Ingrediëntenkast-palet. */ .keuzepillen { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .keuzepil { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 26px; text-align: center; font-family: var(--font-ui); font-size: 22.4px; font-weight: 400; line-height: 33.6px; color: #5d0e39; background: #fff; border: 1px solid rgba(62, 52, 200, .1); border-radius: 320px; box-shadow: 1px 1px 8px 1px rgba(182, 165, 208, .68); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s; } .keuzepil.gekozen, .keuzepil:has(input:checked) { background: rgba(23, 128, 139, .71); border-color: #36b37e; color: #fff; transform: scale(1.05); } /* Waar je er meerdere mag kiezen is de pil zelf de checkbox — precies zoals op het voorbeeld, waar elke pil een