/* * Mijnplein homepage — Figma rebuild 3.8.0 * Source of truth: Desktop homepage WIDESCREEN, Figma node 300:587 (2200px). * This file intentionally replaces all earlier widescreen homepage experiments. */ :root{ --mp-red:#E4032E; --mp-purple:#482974; --mp-blue:#1488CA; --mp-yellow:#F0AB21; --mp-light:#F0F0F0; --mp-master:2200px; --mp-master-left:calc(50% - 1100px); } html,body{overflow-x:hidden!important} .mp-figma-home{position:relative!important;height:6060px!important;font-family:"KoHo",Arial,sans-serif!important;background:#fff!important;overflow:hidden!important} .mp-figma-home *{box-sizing:border-box} .mp-figma-home .mp-figma-inner{max-width:none!important;margin:0!important} /* HEADER — Figma 300:814 */ .mp-site-header{ position:absolute!important;top:0!important;left:0!important;right:0!important; z-index:100!important;height:145px!important;min-height:145px!important; max-width:none!important;margin:0!important;padding:0!important; display:flex!important;align-items:flex-start!important;justify-content:space-between!important; background:linear-gradient(to bottom,rgba(0,0,0,.58),rgba(0,0,0,0))!important; box-shadow:none!important;color:#fff!important; } .admin-bar .mp-site-header{top:32px!important} .mp-brand-tab{ display:block!important;width:320px!important;height:113px!important;flex:0 0 320px!important; margin:0!important;padding:0!important;border:0!important;border-radius:0!important; background:transparent url("../images/mijnplein-logo-tab.png") no-repeat left top/100% 100%!important; box-shadow:none!important; } .mp-brand-tab span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important} .mp-primary-navigation{ position:absolute!important;right:69px!important;top:36px!important;height:55px!important; margin:0!important;padding:0!important;color:#fff!important; } .mp-primary-navigation .wp-block-navigation__container{gap:28px!important;align-items:center!important;flex-wrap:nowrap!important} .mp-primary-navigation .wp-block-navigation-item__content{ color:#fff!important;font:500 22px/50px "KoHo",Arial,sans-serif!important;padding:0!important;text-decoration:none!important;white-space:nowrap!important; } .mp-primary-navigation .mp-nav-language>.wp-block-navigation-item__content{ border:2px solid #fff!important;border-radius:12px!important;height:46px!important;min-width:67px!important;line-height:42px!important;text-align:center!important;padding:0 20px 0 10px!important; } .mp-primary-navigation .mp-nav-vacancies>.wp-block-navigation-item__content{ background:#fff!important;color:var(--mp-red)!important;border-radius:12px!important;height:46px!important;min-width:161px!important; line-height:46px!important;text-align:center!important;padding:0 14px!important;font-weight:700!important; } .mp-primary-navigation .wp-block-navigation__responsive-container-open{display:none!important} /* HERO / INTRO — Figma 300:812 */ .mp-home-hero{ position:absolute!important;left:0!important;top:0!important;width:100%!important;height:1550px!important; padding:0!important;margin:0!important;background:#fff!important;overflow:hidden!important; } .mp-home-hero__photo{ position:absolute!important;left:0!important;top:0!important;width:100%!important;height:811px!important;min-height:0!important; background-image:var(--mp-hero-image)!important;background-size:cover!important;background-position:center center!important; } .mp-home-hero:after{ content:""!important;position:absolute!important;left:0!important;top:800px!important;width:100%!important;height:717px!important; background:var(--mp-light)!important;z-index:0!important; clip-path: polygon(0% 0%, 100% 0%, 100% 93%, 0% 100%); } .mp-home-hero__panels{ position:absolute!important;left:var(--mp-master-left)!important;top:0!important;width:2200px!important;height:1385px!important; display:block!important;margin:0!important;z-index:2!important; } .mp-home-hero__copy{ position:absolute!important;left:222px!important;top:558px!important;width:1132px!important;height:550px!important; padding:118px 135px 70px 230px!important;margin:0!important;background:transparent!important;border:0!important;border-radius:0!important;clip-path:none!important;box-shadow:none!important;z-index:2!important; } .mp-home-hero__copy:before{ content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;background:#fff!important; border-radius:72px 96px 36px 72px / 76px 88px 44px 76px!important; transform:rotate(-1.7deg) skewX(-1.8deg)!important;transform-origin:center!important; box-shadow:none!important; } .mp-home-hero__copy h1{ margin:0 0 13px!important;color:var(--mp-red)!important;font:700 56px/60px "KoHo",Arial,sans-serif!important;font-style:normal!important;letter-spacing:0!important; } .mp-home-hero__copy p{ width:767px!important;max-width:767px!important;margin:0 0 18px!important;color:#000!important;font:500 19px/26px "KoHo",Arial,sans-serif!important; } .mp-home-hero__copy .mp-figma-actions{display:flex!important;gap:22px!important;align-items:center!important} .mp-figma-button{ display:inline-flex!important;align-items:center!important;justify-content:center!important;height:55px!important;min-height:55px!important; padding:0 38px!important;border-radius:8px!important;background:var(--mp-blue)!important;color:#fff!important; font:500 22px/22.4px "KoHo",Arial,sans-serif!important;text-decoration:none!important;border:1.5px solid var(--mp-blue)!important;box-shadow:none!important; } .mp-figma-button--ghost{background:#fff!important;color:var(--mp-blue)!important} .mp-home-hero__slogan{ position:absolute!important;left:1029px!important;top:516px!important;width:906px!important;height:463px!important;min-height:0!important; padding:0 0 0 360px!important;margin:0!important;background:transparent!important;border:0!important;border-radius:0!important; transform:none!important;color:#fff!important;font:700 55px/60px "KoHo",Arial,sans-serif!important;font-style:italic!important;z-index:1!important; } .mp-home-hero__slogan:before{ content:""!important;position:absolute!important;inset:0!important;z-index:-1!important; background:linear-gradient(113deg,var(--mp-red) 0%,#aa145b 34%,var(--mp-purple) 78%)!important; border-radius:78px 72px 76px 54px / 54px 64px 78px 58px!important; transform-origin:center!important; mask: url(../images/shapes/figma-shape-hero-gradient.svg) center / 100% 100% no-repeat !important; } .mp-home-quick{ position:absolute!important;left:calc(50% - 627px)!important;top:1110px!important;width:1440px!important;height:87px!important; display:flex!important;align-items:center!important;gap:23px!important;margin:0!important;z-index:3!important; } .mp-home-quick>span{color:#7E7E7E!important;font:500 27px/33px "KoHo",Arial,sans-serif!important} .mp-home-quick a{ display:flex!important;align-items:center!important;justify-content:center!important;width:203px!important;height:55px!important; padding:0!important;background:#fff!important;color:var(--mp-red)!important;border-radius:12px!important; font:700 18px/50px "KoHo",Arial,sans-serif!important;text-decoration:none!important;box-shadow:none!important; } /* VISIE — absolute position in master page at y=945 */ .mp-home-vision{ position:absolute!important;left:0!important;top:945px!important;width:100%!important;height:970px!important; margin:0!important;padding:0!important;background:transparent!important;overflow:hidden!important;isolation:auto!important; } .mp-home-vision__grey{ position:absolute!important;left:0!important;top:334px!important;width:100%!important;height:636px!important;z-index:0!important; background:var(--mp-light)!important;clip-path:polygon(0 17%,100% 0,100% 55%,0 100%)!important; } .mp-home-vision>.mp-figma-inner{ position:absolute!important;left:var(--mp-master-left)!important;top:0!important;width:2200px!important;height:970px!important;display:block!important;z-index:1!important; } .mp-home-vision__visual{position:absolute!important;left:455px!important;top:241px!important;width:550px!important;height:409px!important;margin:0!important} .mp-home-vision__visual img{display:block!important;width:550px!important;height:409px!important;object-fit:cover!important;box-shadow:0 16px 28px rgba(0,0,0,.12)!important} .mp-home-vision blockquote{ position:absolute!important;left:1114px!important;top:480px!important;width:630px!important;margin:0!important;padding:0!important; color:var(--mp-purple)!important;font:700 36px/40px "KoHo",Arial,sans-serif!important;font-style:normal!important; } .mp-home-vision__heading{position:absolute!important;left:451px!important;top:732px!important;width:594px!important} .mp-home-vision__heading h2{margin:0!important;color:var(--mp-red)!important;font:700 36px/40px "KoHo",Arial,sans-serif!important;font-style:normal!important} .mp-home-vision__copy{position:absolute!important;left:1114px!important;top:594px!important;width:630px!important;padding:0!important;margin:0!important} .mp-home-vision__copy:before{display:none!important} .mp-home-vision__copy p{margin:0 0 19.6px!important;color:#000!important;font:400 16px/23px "KoHo",Arial,sans-serif!important} .mp-home-vision__copy a{color:var(--mp-blue)!important;font:400 16px/23px "KoHo",Arial,sans-serif!important;text-decoration:none!important} /* WERKEN BIJ — y=1834 */ .mp-home-work{ position:absolute!important;left:0!important;top:1834px!important;width:100%!important;height:970px!important; margin:0!important;padding:0!important;background:#fff!important;overflow:hidden!important;isolation:auto!important; } .mp-home-work__decor{position:absolute!important;left:var(--mp-master-left)!important;top:0!important;width:2200px!important;height:970px!important;z-index:0!important;display:block!important} .mp-home-work__purple{ position:absolute!important;left:214px!important;top:66px!important;width:1021px!important;height:532px!important; background:linear-gradient(111deg,var(--mp-purple) 0%,#7b1f72 48%,var(--mp-red) 100%)!important; border-radius:72px 112px 66px 58px / 76px 82px 64px 70px!important;transform:rotate(2.7deg)!important; } .mp-home-work__red{display:none!important} .mp-home-work__yellow{ position:absolute!important;left:786px!important;top:276px!important;width:1323px!important;height:627px!important; background:var(--mp-yellow)!important;border-radius:70px 64px 92px 150px / 56px 60px 86px 124px!important;transform:rotate(-2.4deg)!important; } .mp-home-work__shape{ position:absolute!important;left:var(--mp-master-left)!important;top:0!important;width:2200px!important;height:970px!important;min-height:0!important; margin:0!important;padding:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;transform:none!important;z-index:2!important; } .mp-home-work__shape:before{ content:""!important;position:absolute!important;left:696px!important;top:192px!important;width:1048px!important;height:604px!important; background:#fff!important;border-radius:30px!important;box-shadow:none!important;z-index:0!important; } .mp-home-work__visual{position:absolute!important;left:454px!important;top:285px!important;width:570px!important;height:409px!important;margin:0!important;z-index:2!important;box-shadow:none!important} .mp-home-work__visual img{display:block!important;width:570px!important;height:409px!important;object-fit:cover!important;box-shadow:0 16px 28px rgba(0,0,0,.12)!important} .mp-home-work__copy{position:absolute!important;left:1114px!important;top:299px!important;width:606px!important;padding:0!important;margin:0!important;z-index:3!important} .mp-home-work .mp-figma-kicker{display:block!important;margin:0 0 5px!important;color:var(--mp-red)!important;font:600 italic 56px/60px "KoHo",Arial,sans-serif!important} .mp-home-work__copy h2{width:606px!important;margin:0 0 10px!important;color:var(--mp-purple)!important;font:700 36px/40px "KoHo",Arial,sans-serif!important;font-style:normal!important} .mp-home-work__copy p{width:585px!important;margin:0 0 23px!important;color:#000!important;font:400 16px/23px "KoHo",Arial,sans-serif!important} .mp-home-work__copy .mp-figma-actions{display:flex!important;gap:22px!important;flex-wrap:nowrap!important} .mp-home-work__copy .mp-figma-button{width:236px!important;padding:0!important} /* VACATURES — y=2767 */ .mp-home-vacancies{ position:absolute!important;left:0!important;top:2767px!important;width:100%!important;height:1156px!important; margin:0!important;padding:68px 0 0!important;background:#fff!important;overflow:hidden!important; } .mp-home-vacancies>.mp-figma-inner{width:100%!important;height:100%!important} .mp-home-vacancies h2{margin:0 0 58px!important;text-align:center!important;color:var(--mp-red)!important;font:600 italic 56px/60px "KoHo",Arial,sans-serif!important} .mp-vacancy-slider{width:100%!important} .mp-vacancy-slider__viewport{width:100%!important;overflow:hidden!important;padding-left:max(75px,calc(50% - 913px))!important} .mp-vacancy-slider__track{display:flex!important;gap:107px!important;align-items:flex-start!important} .mp-figma-vacancy{ flex:0 0 413px!important;width:413px!important;height:620px!important;min-height:620px!important; padding:60px 0 0!important;margin:0!important;background:var(--mp-light)!important;border-radius:30px!important;box-shadow:none!important;overflow:visible!important; } .mp-figma-vacancy__media{width:393px!important;height:393px!important;margin:-60px auto 0!important;box-shadow:0 13px 24px rgba(0,0,0,.13)!important;overflow:hidden!important} .mp-figma-vacancy__media img{display:block!important;width:393px!important;height:393px!important;object-fit:cover!important} .mp-figma-vacancy__body{padding:18px 28px 30px!important} .mp-figma-vacancy__status{display:inline-flex!important;min-height:40px!important;padding:7px 15px!important;border-radius:200px!important;background:var(--mp-red)!important;color:#fff!important;font:700 18px/26px "KoHo",Arial,sans-serif!important} .mp-figma-vacancy h3{margin:8px 0 0!important;color:var(--mp-purple)!important;font:700 27px/33px "KoHo",Arial,sans-serif!important} .mp-figma-vacancy__meta{color:var(--mp-purple)!important;font:500 27px/33px "KoHo",Arial,sans-serif!important} .mp-figma-vacancy__excerpt{margin:17px 0 0!important;color:#000!important;font:400 16px/23px "KoHo",Arial,sans-serif!important} .mp-vacancy-slider__controls{display:flex!important;justify-content:center!important;gap:38px!important;margin:46px 0 0!important} .mp-vacancy-slider__controls button{width:42px!important;height:42px!important;border-radius:50%!important;border:0!important;background:#fff!important;box-shadow:0 0 18px rgba(0,0,0,.08)!important;color:var(--mp-blue)!important} .mp-home-vacancies .mp-home-center{margin-top:21px!important;text-align:center!important} /* LOCATIES — y=3957 */ .mp-real-map{width:100%!important;height:698px!important} /* SLUIT JE AAN — y=5389 */ .mp-home-join{ position:absolute!important;left:0!important;top:5389px!important;width:100%!important;height:701px!important; margin:0!important;padding:0!important;background:#fff!important;overflow:hidden!important; } .mp-home-join:before{ content:""!important;position:absolute!important;left:0!important;top:54px!important;width:100%!important;height:819px!important; background:var(--mp-light)!important;clip-path:polygon(0 8%,100% 0,100% 78%,0 100%)!important;transform:none!important; } .mp-home-join>.mp-figma-inner{position:absolute!important;left:var(--mp-master-left)!important;top:0!important;width:2200px!important;height:701px!important;display:block!important;z-index:1!important} .mp-home-join__visual{position:absolute!important;left:455px!important;top:0!important;width:442px!important;margin:0!important} .mp-home-join__visual img{display:block!important;width:442px!important;height:393px!important;object-fit:cover!important;box-shadow:0 16px 28px rgba(0,0,0,.12)!important} .mp-home-join__visual blockquote{width:460px!important;margin:42px 0 0!important;color:var(--mp-red)!important;font:700 36px/40px "KoHo",Arial,sans-serif!important;font-style:normal!important} .mp-home-join__copy{position:absolute!important;left:1004px!important;top:210px!important;width:632px!important;padding:0!important} .mp-home-join__copy h2{margin:0 0 22px!important;color:var(--mp-purple)!important;font:700 36px/40px "KoHo",Arial,sans-serif!important} .mp-home-join__copy p{margin:0 0 19.6px!important;color:#000!important;font:400 16px/23px "KoHo",Arial,sans-serif!important} .mp-home-join__copy .mp-figma-button{margin-top:8px!important;padding:0 64px!important} /* FOOTER — begins at y=6060 */ .mp-site-footer{ position:relative!important;z-index:5!important;min-height:599px!important;height:599px!important; margin:0!important;padding:184px 0 0!important;background:var(--mp-purple)!important;color:#fff!important;overflow:hidden!important; } .mp-site-footer:before{ content:""!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:187px!important; background:linear-gradient(96deg,var(--mp-red),#c20c56 43%,var(--mp-purple))!important; clip-path:polygon(0 0,100% 26%,100% 100%,0 70%)!important;z-index:0!important; } .mp-footer-tab{ position:absolute!important;right:0!important;top:23px!important;width:307px!important;height:109px!important;padding:34px 0 0!important; background:var(--mp-red)!important;color:#fff!important;text-align:center!important;font:700 27px/33px "KoHo",Arial,sans-serif!important; border-radius:44px 0 0 0!important;z-index:2!important; } .mp-footer-columns{ position:relative!important;z-index:2!important;width:1852px!important;max-width:calc(100% - 348px)!important;margin:0 auto!important; display:grid!important;grid-template-columns:310px 310px 310px!important;gap:180px!important;color:#fff!important; } .mp-footer-columns h3{color:#fff!important;font:700 19px/26px "KoHo",Arial,sans-serif!important;margin:0 0 10px!important} .mp-footer-columns p,.mp-footer-columns a{color:#fff!important;font:500 19px/26px "KoHo",Arial,sans-serif!important} /* ========================================================================== 3.8.1 — WIDESCREEN/STANDAARD detailcorrecties ========================================================================== */ /* VACATURES — Figma: square 393px image floats 60px above 413px grey card. Older global styles used a landscape ratio and pushed the text too far down. */ .mp-home-vacancies .mp-vacancy-slider .mp-figma-vacancy{ position:relative !important; flex:0 0 413px !important; width:413px !important; height:620px !important; min-height:620px !important; margin:60px 0 0 !important; padding:0 !important; background:#F0F0F0 !important; border:0 !important; border-radius:30px !important; box-shadow:none !important; overflow:visible !important; } .mp-home-vacancies .mp-figma-vacancy__media{ position:absolute !important; left:10px !important; top:-60px !important; width:393px !important; height:480px !important; min-height:0 !important; margin:0 !important; overflow:visible !important; background:transparent !important; } .mp-home-vacancies .mp-figma-vacancy__media .mp-figma-card-image{ position:absolute !important; left:0 !important; top:0 !important; width:393px !important; height:393px !important; aspect-ratio:auto !important; margin:0 !important; overflow:hidden !important; background:#ddd !important; box-shadow:0 13px 24px rgba(0,0,0,.13) !important; border-radius:0 !important; } .mp-home-vacancies .mp-figma-vacancy__media .mp-figma-card-image img{ display:block !important; width:393px !important; height:393px !important; max-width:none !important; object-fit:cover !important; object-position:center !important; } .mp-home-vacancies .mp-figma-vacancy__media .mp-figma-vacancy__status{ position:absolute !important; left:0 !important; top:440px !important; bottom:auto !important; margin:0 !important; min-height:40px !important; padding:7px 15px !important; border-radius:200px !important; background:#E4032E !important; color:#fff !important; font:700 18px/26px "KoHo",Arial,sans-serif !important; white-space:nowrap !important; } .mp-home-vacancies .mp-figma-vacancy__body{ position:absolute !important; left:28px !important; right:28px !important; top:495px !important; padding:0 !important; margin:0 !important; } .mp-home-vacancies .mp-figma-vacancy__body h3{ margin:0 !important; color:#482974 !important; font:700 27px/33px "KoHo",Arial,sans-serif !important; } .mp-home-vacancies .mp-figma-vacancy__meta{ margin:0 !important; color:#482974 !important; font:500 27px/33px "KoHo",Arial,sans-serif !important; } .mp-home-vacancies .mp-figma-vacancy__excerpt{ margin:17px 0 0 !important; color:#000 !important; font:400 16px/23px "KoHo",Arial,sans-serif !important; } .mp-home-vacancies .mp-figma-vacancy__body>a{ color:#1488CA !important; font:400 16px/23px "KoHo",Arial,sans-serif !important; text-decoration:none !important; } .mp-home-vacancies .mp-vacancy-slider__viewport{ padding-top:0 !important; padding-bottom:0 !important; } .mp-home-vacancies .mp-vacancy-slider__track{ gap:107px !important; } /* LOCATION MAP — marker styling was lost in the clean 3.8.0 rebuild. Leaflet was still creating the markers, but the custom spans had no visible shape. */ /* Selected location card stays above markers but below Leaflet controls. */ /* FOOTER LOGO — use the real Mijnplein wordmark instead of plain KoHo text. */ .mp-site-footer .mp-footer-tab{ font-size:0 !important; line-height:0 !important; width:307px !important; height:109px !important; padding:0 !important; background:#E4032E url("../images/mijnplein-wordmark.png") no-repeat center center / 165px auto !important; border-radius:44px 0 0 0 !important; clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,0 34%,4% 13%) !important; box-shadow:none !important; } /* ========================================================================== 3.8.2 — hoofdmenu verticaal uitlijnen met Mijnplein-wordmark De zichtbare witte wordmark in het logo ligt hoger dan het midden van het rode logo-tabvlak. Daarom lijnen we de navigatie uit op de wordmark zelf in plaats van op het volledige 113px hoge tabvlak. ========================================================================== */ .mp-site-header .mp-primary-navigation{ top:22px !important; height:55px !important; display:flex !important; align-items:center !important; } .mp-site-header .mp-primary-navigation .wp-block-navigation__container{ height:55px !important; align-items:center !important; } .mp-site-header .mp-primary-navigation .wp-block-navigation-item{ display:flex !important; align-items:center !important; height:55px !important; } .mp-site-header .mp-primary-navigation .wp-block-navigation-item__content{ display:flex !important; align-items:center !important; height:55px !important; line-height:1 !important; } .mp-site-header .mp-primary-navigation .mp-nav-language>.wp-block-navigation-item__content, .mp-site-header .mp-primary-navigation .mp-nav-vacancies>.wp-block-navigation-item__content{ height:46px !important; min-height:46px !important; line-height:46px !important; } /* ========================================================================== 3.8.3 — HEADER exact volgens Figma node 300:814 2200x145. Menu-tekst staat op y=38; logo is 320x113. ========================================================================== */ .mp-site-header{ position:absolute !important; left:0 !important; right:0 !important; top:0 !important; height:145px !important; min-height:145px !important; padding:0 !important; margin:0 !important; background:linear-gradient( to bottom, rgba(0,0,0,.60) 0%, rgba(0,0,0,.38) 31%, rgba(0,0,0,.16) 62%, rgba(0,0,0,0) 100% ) !important; box-shadow:none !important; overflow:visible !important; z-index:1000 !important; } .admin-bar .mp-site-header{top:32px !important} /* Exact Figma logo-plate: 320 x 113 at 0,0 */ .mp-site-header .mp-brand-tab{ position:absolute !important; left:0 !important; top:0 !important; width:320px !important; height:113px !important; min-width:320px !important; margin:0 !important; padding:0 !important; } /* Figma navigation block starts at y=36/38. This aligns the text baseline with the white 'mijnplein' wordmark. */ .mp-site-header .mp-primary-navigation{ position:absolute !important; right:68.6px !important; top:36px !important; height:55px !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:flex-start !important; } .mp-site-header .mp-primary-navigation .wp-block-navigation__container{ height:55px !important; gap:28px !important; align-items:flex-start !important; flex-wrap:nowrap !important; } .mp-site-header .mp-primary-navigation .wp-block-navigation-item{ height:55px !important; display:flex !important; align-items:flex-start !important; } .mp-site-header .mp-primary-navigation .wp-block-navigation-item__content{ height:55px !important; padding:0 !important; display:flex !important; align-items:flex-start !important; color:#fff !important; font:500 22px/50px "KoHo",Arial,sans-serif !important; white-space:nowrap !important; text-decoration:none !important; } /* NL selector: Figma x=1890, y=40, 67x46 */ .mp-site-header .mp-primary-navigation .mp-nav-language>.wp-block-navigation-item__content{ height:46px !important; min-height:46px !important; min-width:67px !important; margin-top:4px !important; padding:0 20px 0 10px !important; border:2px solid #fff !important; border-radius:12px !important; line-height:42px !important; align-items:center !important; justify-content:center !important; } /* Vacatures: Figma x=1970.48, y=40, 160.926x46 */ .mp-site-header .mp-primary-navigation .mp-nav-vacancies>.wp-block-navigation-item__content{ height:46px !important; min-height:46px !important; min-width:160.926px !important; margin-top:4px !important; padding:0 14px !important; background:#fff !important; color:#E4032E !important; border:0 !important; border-radius:12px !important; font:700 22px/50px "KoHo",Arial,sans-serif !important; align-items:center !important; justify-content:center !important; } /* Search control sits on the same Figma baseline (icon center around y=67). */ .mp-site-header .mp-header-search, .mp-site-header .mp-search-toggle, .mp-site-header [data-mp-search-toggle]{ align-self:flex-start !important; margin-top:16px !important; } /* ========================================================================== 3.8.4 — live WordPress header alignment correction In the rendered WP Navigation block the visible menu text sat ~46px lower than the logo wordmark despite the Figma y-coordinate. Compensate at the navigation block level so the visible text baseline matches the logo. ========================================================================== */ .mp-site-header .mp-primary-navigation{ top:-10px !important; } .mp-site-header .mp-primary-navigation .wp-block-navigation__responsive-container, .mp-site-header .mp-primary-navigation .wp-block-navigation__responsive-container-content{ margin-top:0 !important; padding-top:0 !important; } .mp-site-header .mp-primary-navigation .wp-block-navigation__container{ margin-top:0 !important; padding-top:0 !important; } /* Keep the Figma dark header glow clearly visible over the hero photo. */ .mp-site-header{ background: linear-gradient( to bottom, rgba(0,0,0,.60) 0%, rgba(0,0,0,.44) 28%, rgba(0,0,0,.23) 56%, rgba(0,0,0,.08) 78%, rgba(0,0,0,0) 100% ) !important; } /* ========================================================================== 3.8.5 — header menu fine-tuning na live screenshot 3.8.4 zette de WP-navigation te ver omhoog. De zichtbare menutekst wordt nu teruggezet naar een optische middenpositie ten opzichte van de witte mijnplein-wordmark. ========================================================================== */ .mp-site-header .mp-primary-navigation{ top:20px !important; } /* 3.9.0 — Figma node 426:4885: separate "Ga snel naar" frame */ .mp-figma-home{height:6225px !important} .mp-home-vision{top:1110px !important} .mp-home-work{top:1999px !important} .mp-home-vacancies{top:2932px !important} .mp-home-join{top:5554px !important} /* 3.9.1 — functional tools appended to editable WordPress navigation */ .mp-site-header .mp-header-tools{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:14px !important; height:55px !important; padding:0 !important; margin:0 !important; white-space:nowrap !important; } .mp-site-header .mp-header-tools .mp-header-search{ margin:0 !important; align-self:center !important; } .mp-site-header .mp-header-tools .mp-header-search__toggle{ width:28px !important; height:46px !important; color:#fff !important; } .mp-site-header .mp-header-tools .mp-language-selector{ height:46px !important; align-items:center !important; } .mp-site-header .mp-header-tools .mp-language-selector__current{ height:46px !important; min-height:46px !important; min-width:67px !important; padding:0 10px !important; border:2px solid #fff !important; border-radius:12px !important; color:#fff !important; background:transparent !important; font:500 22px/42px "KoHo",Arial,sans-serif !important; } .mp-site-header .mp-header-vacancy-button{ display:flex !important; align-items:center !important; justify-content:center !important; min-width:161px !important; height:46px !important; padding:0 14px !important; background:#fff !important; color:#E4032E !important; border-radius:12px !important; text-decoration:none !important; font:700 22px/46px "KoHo",Arial,sans-serif !important; } /* ========================================================================== 3.9.2 — Figma refinement pass Vacatures 300:1895 · Locaties 301:560 · Footer 300:2351 ========================================================================== */ /* Remove historical hairline underneath the header. */ .mp-site-header{ border-bottom:0 !important; outline:0 !important; box-shadow:none !important; } .wp-site-blocks > .wp-block-template-part:first-child{ border-bottom:0 !important; box-shadow:none !important; } /* Figma 426:4885 puts the separate quick-menu frame at y=1182. */ .mp-home-quick{ top:1182px !important; } /* VACANCIES Figma background card is 520x620, not 413px. The 393x393 photo floats 60px above it and is horizontally centered. */ .mp-home-vacancies .mp-vacancy-slider__viewport{ padding-left:max(0px,calc((100vw - 2200px)/2 + 187px)) !important; padding-top:0 !important; overflow-y:visible !important; } .mp-home-vacancies .mp-vacancy-slider__track{ gap:30px !important; align-items:flex-start !important; } .mp-home-vacancies .mp-figma-vacancy{ position:relative !important; flex:0 0 520px !important; width:520px !important; height:620px !important; min-height:620px !important; margin:60px 0 0 !important; padding:0 !important; background:#F0F0F0 !important; border-radius:30px !important; overflow:visible !important; box-shadow:none !important; } .mp-home-vacancies .mp-figma-vacancy__media{ position:static !important; width:auto !important; height:auto !important; margin:0 !important; } .mp-home-vacancies .mp-figma-vacancy__media .mp-figma-card-image{ position:absolute !important; left:64px !important; top:-60px !important; width:393px !important; height:393px !important; margin:0 !important; overflow:hidden !important; box-shadow:0 13px 24px rgba(0,0,0,.13) !important; } .mp-home-vacancies .mp-figma-vacancy__media .mp-figma-card-image img{ width:393px !important; height:393px !important; max-width:none !important; object-fit:cover !important; } .mp-home-vacancies .mp-figma-vacancy__status{ position:absolute !important; left:68px !important; top:380px !important; margin:0 !important; min-height:40px !important; padding:7px 15px !important; border-radius:200px !important; background:#E4032E !important; color:#fff !important; font:700 18px/26px "KoHo",Arial,sans-serif !important; white-space:nowrap !important; z-index:3 !important; } .mp-home-vacancies .mp-figma-vacancy__body{ position:absolute !important; left:68px !important; right:38px !important; top:414px !important; padding:0 !important; margin:0 !important; } .mp-home-vacancies .mp-figma-vacancy__body h3{ margin:24px 0 0 !important; font:700 27px/33px "KoHo",Arial,sans-serif !important; color:#482974 !important; } .mp-home-vacancies .mp-figma-vacancy__meta{ margin:0 !important; font:500 27px/33px "KoHo",Arial,sans-serif !important; color:#482974 !important; } .mp-home-vacancies .mp-figma-vacancy__excerpt{ margin:17px 0 0 !important; font:400 16px/23px "KoHo",Arial,sans-serif !important; color:#000 !important; } .mp-home-vacancies .mp-figma-vacancy__body > a{ display:inline !important; font:400 16px/23px "KoHo",Arial,sans-serif !important; color:#1488CA !important; text-decoration:none !important; } .mp-home-vacancies .mp-vacancy-slider__controls{ margin-top:64px !important; } /* LOCATIONS The white details panel overlaps the lower 84px of the map in Figma. The yellow Locaties tab must therefore sit above Leaflet's panes. */ /* Leaflet must remain underneath the overlapping title/details panel. */ /* FOOTER — Figma node 300:2351 */ .mp-site-footer{ position:relative !important; width:100% !important; height:599px !important; min-height:599px !important; margin:0 !important; padding:0 !important; background:#482974 !important; color:#fff !important; overflow:hidden !important; } .mp-site-footer:before{ content:"" !important; position:absolute !important; left:0 !important; top:0 !important; width:100% !important; height:187px !important; background:linear-gradient(96deg,#E4032E 0%,#C50D54 43%,#482974 100%) !important; clip-path:polygon(0 0,100% 26%,100% 100%,0 70%) !important; z-index:1 !important; } .mp-site-footer:after{ display:none !important; } .mp-site-footer .mp-footer-tab{ position:absolute !important; right:0 !important; top:23px !important; width:307px !important; height:109px !important; padding:0 !important; background:#E4032E url("../images/mijnplein-wordmark.png") no-repeat center center / 165px auto !important; border-radius:40px 0 0 0 !important; clip-path:polygon(13% 0,100% 0,100% 100%,0 100%,0 31%,4% 12%) !important; z-index:3 !important; font-size:0 !important; } .mp-site-footer .mp-footer-columns{ position:absolute !important; left:7.91% !important; top:184px !important; width:980px !important; max-width:none !important; margin:0 !important; padding:0 !important; display:grid !important; grid-template-columns:210px 212px 230px !important; column-gap:117px !important; align-items:start !important; z-index:2 !important; } .mp-site-footer .mp-footer-columns > div{ width:auto !important; margin:0 !important; padding:0 !important; } .mp-site-footer .mp-footer-columns h3{ margin:0 0 10px !important; color:#fff !important; font:700 19px/26px "KoHo",Arial,sans-serif !important; } .mp-site-footer .mp-footer-columns p, .mp-site-footer .mp-footer-columns a{ margin:0 !important; color:#fff !important; font:500 19px/26px "KoHo",Arial,sans-serif !important; text-decoration:none !important; } .mp-site-footer .mp-footer-navigation{ margin:0 !important; padding:0 !important; } .mp-site-footer .mp-footer-navigation .wp-block-navigation__container{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:0 !important; } .mp-site-footer .mp-footer-navigation .wp-block-navigation-item{ position:relative !important; padding-left:18px !important; margin:0 !important; } .mp-site-footer .mp-footer-navigation .wp-block-navigation-item:before{ content:"›" !important; position:absolute !important; left:0 !important; top:0 !important; color:#F0AB21 !important; font-size:24px !important; line-height:26px !important; } .mp-site-footer .mp-footer-navigation .wp-block-navigation-item__content{ padding:0 !important; font:500 19px/34px "KoHo",Arial,sans-serif !important; color:#fff !important; } .mp-site-footer .mp-footer-social{ display:flex !important; gap:12px !important; margin-top:28px !important; margin-bottom:29px !important; } .mp-site-footer .mp-footer-social a{ display:grid !important; place-items:center !important; width:38px !important; height:38px !important; border:2px solid #fff !important; border-radius:50% !important; font:700 16px/1 Arial,sans-serif !important; } .mp-site-footer .mp-footer-privacy{ display:block !important; color:#fff !important; font:500 19px/26px "KoHo",Arial,sans-serif !important; } .mp-site-footer .mp-footer-privacy::first-letter{ color:#F0AB21 !important; } /* ========================================================================== 3.9.3 — authoritative vacancy layout from Figma node 300:1895 This block deliberately uses higher specificity than all historical rules. ========================================================================== */ .mp-home-vacancies .mp-vacancy-slider .mp-vacancy-slider__viewport{ width:100% !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:max(0px,calc((100vw - 2200px)/2 + 187px)) !important; overflow-x:hidden !important; overflow-y:visible !important; } .mp-home-vacancies .mp-vacancy-slider .mp-vacancy-slider__track{ display:flex !important; align-items:flex-start !important; gap:30px !important; transform:translate3d(0,0,0); } .mp-home-vacancies .mp-vacancy-slider .mp-figma-vacancy{ position:relative !important; flex:0 0 520px !important; width:520px !important; max-width:520px !important; height:620px !important; min-height:620px !important; margin:60px 0 0 !important; padding:0 !important; background:#F0F0F0 !important; border:0 !important; border-radius:30px !important; overflow:visible !important; box-shadow:none !important; } .mp-home-vacancies .mp-vacancy-slider .mp-figma-vacancy .mp-figma-vacancy__media{ position:static !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; } .mp-home-vacancies .mp-vacancy-slider .mp-figma-vacancy .mp-figma-card-image{ position:absolute !important; left:64px !important; top:-60px !important; width:393px !important; height:393px !important; min-width:393px !important; min-height:393px !important; max-width:393px !important; max-height:393px !important; aspect-ratio:1 / 1 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border-radius:0 !important; box-shadow:0 13px 24px rgba(0,0,0,.13) !important; background:#ddd !important; } .mp-home-vacancies .mp-vacancy-slider .mp-figma-vacancy .mp-figma-card-image img{ display:block !important; position:static !important; width:393px !important; height:393px !important; min-width:393px !important; min-height:393px !important; max-width:393px !important; max-height:393px !important; object-fit:cover !important; object-position:center !important; margin:0 !important; } .mp-home-vacancies .mp-vacancy-slider .mp-figma-vacancy .mp-figma-vacancy__status{ position:absolute !important; left:68px !important; top:380px !important; right:auto !important; bottom:auto !important; z-index:4 !important; display:inline-flex !important; align-items:center !important; width:auto !important; height:40px !important; min-height:40px !important; margin:0 !important; padding:7px 15px !important; border-radius:200px !important; background:#E4032E !important; color:#fff !important; font:700 18px/26px "KoHo",Arial,sans-serif !important; white-space:nowrap !important; } .mp-home-vacancies .mp-vacancy-slider .mp-figma-vacancy .mp-figma-vacancy__body{ position:absolute !important; left:68px !important; top:442px !important; right:38px !important; bottom:auto !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; } .mp-home-vacancies .mp-vacancy-slider .mp-figma-vacancy .mp-figma-vacancy__body h3{ margin:0 !important; padding:0 !important; color:#482974 !important; font:700 27px/33px "KoHo",Arial,sans-serif !important; } .mp-home-vacancies .mp-vacancy-slider .mp-figma-vacancy .mp-figma-vacancy__meta{ margin:0 !important; padding:0 !important; color:#482974 !important; font:500 27px/33px "KoHo",Arial,sans-serif !important; } .mp-home-vacancies .mp-vacancy-slider .mp-figma-vacancy .mp-figma-vacancy__excerpt{ margin:17px 0 0 !important; padding:0 !important; color:#000 !important; font:400 16px/23px "KoHo",Arial,sans-serif !important; } .mp-home-vacancies .mp-vacancy-slider .mp-figma-vacancy .mp-figma-vacancy__body > a{ display:inline !important; margin:0 !important; padding:0 !important; color:#1488CA !important; font:400 16px/23px "KoHo",Arial,sans-serif !important; text-decoration:none !important; } .mp-home-vacancies .mp-vacancy-slider .mp-vacancy-slider__controls{ margin-top:64px !important; } /* 3.9.6 — locatierij bestuurt uitsluitend kaart/selectie; geen directe pagina-links */ /* ========================================================================== 3.9.7 — exact footer top artwork from Figma/PDF node 300:2351 The red→purple diagonal strip AND red Mijnplein logo-tab are now one rasterized design asset taken directly from the supplied 2200px frame. ========================================================================== */ .mp-site-footer{ position:relative !important; background:#482974 !important; overflow:hidden !important; } .mp-site-footer:before{ content:"" !important; position:absolute !important; z-index:1 !important; left:50% !important; top:0 !important; width:2200px !important; height:187px !important; transform:translateX(-50%) !important; background-image:url("../images/footer-top-figma.png") !important; background-repeat:no-repeat !important; background-position:center top !important; background-size:2200px 187px !important; clip-path:none !important; } /* The exact logo is already part of footer-top-figma.png. */ .mp-site-footer .mp-footer-tab{ display:none !important; } /* Keep all editable footer content above the purple body, below the artwork. */ .mp-site-footer .mp-footer-columns{ z-index:2 !important; } /* ========================================================================== 3.10.7 — consistente afronding voor ALLE inhoudsfoto's Het Figma-bestand is hierin niet overal consequent. Vanaf deze versie geldt één ontwerpregel: inhoudsfoto's krijgen 18px afgeronde hoeken. Volvlak-hero's, kaarten/tegels, iconen, logo's en de Leaflet-kaart zelf vallen hier bewust niet onder. ========================================================================== */ :root{ --mp-photo-radius:18px; } /* Homepage photos */ /* Reusable theme photo blocks/cards */ .mp-figma-card-image, .mp-card-grid .wp-block-image, .mp-image-text .wp-block-image, .mp-content-visual, .mp-figma-featured-card .wp-block-image, .mp-figma-target .wp-block-image{ border-radius:var(--mp-photo-radius) !important; overflow:hidden !important; } .mp-figma-card-image img, .mp-card-grid .wp-block-image img, .mp-image-text .wp-block-image img, .mp-content-visual img, .mp-figma-featured-card .wp-block-image img, .mp-figma-target .wp-block-image img{ border-radius:var(--mp-photo-radius) !important; } /* Editor/content images: only ordinary content figures, not logos/icons. */ .entry-content .wp-block-image:not(.is-style-rounded) img, .mp-figma-content-body .wp-block-image img{ border-radius:var(--mp-photo-radius) !important; } /* Ensure the vacancy photo remains square in size, only corners are rounded. */ .mp-home-vacancies .mp-figma-card-image{ aspect-ratio:1 / 1 !important; } /* ========================================================================== 3.11.0 — locatie-markers volgens Figma Compacte vlag/pin-vorm met witte kern, rood voor Onderwijs en geel voor Onderwijs & opvang. Actieve marker iets groter met zachte highlight. ========================================================================== */ /* ========================================================================== 3.11.1 — EXACTE Figma locatievlaggetjes Bron: Figma 302:1280 (rood) / 302:1270 (oranje), exact frame 30×42. Geen CSS-benadering meer: de Leaflet-marker bevat exact dezelfde vectorgeometrie als het Figma-object. ========================================================================== */ /* Oude CSS-markerconstructie volledig uitschakelen. */ /* ========================================================================== 3.11.5 — footer-logo opnieuw opgebouwd uit Figma 300:2351 Exacte Figma-afmetingen logo-tab: x≈1893, y=23, w=307, h=109 binnen het 2200×599 widescreen footerframe. ========================================================================== */ .mp-site-footer::before{ content:"" !important; display:block !important; position:absolute !important; left:0 !important; top:0 !important; width:100% !important; height:187px !important; z-index:1 !important; transform:none !important; background:linear-gradient(96deg,#E4032E 0%,#C20C56 43%,#482974 100%) !important; clip-path:polygon(0 0,100% 26%,100% 100%,0 70%) !important; } /* Stop using the raster footer-top image; render the logo tab as its own vector shape with the exact Mijnplein wordmark. */ .mp-site-footer .mp-footer-tab{ display:block !important; position:absolute !important; right:0 !important; top:23px !important; width:307px !important; height:109px !important; margin:0 !important; padding:0 !important; z-index:4 !important; background: url("../images/mijnplein-wordmark.png") no-repeat 50% 37px / 148px auto, url("../images/footer-logo-shape-desktop.svg") no-repeat 0 0 / 307px 109px !important; border:0 !important; border-radius:0 !important; clip-path:none !important; box-shadow:none !important; color:transparent !important; font-size:0 !important; line-height:0 !important; } .mp-site-footer .mp-footer-tab::before, .mp-site-footer .mp-footer-tab::after{ content:none !important; display:none !important; } /* ========================================================================== 3.11.7 — Werken bij: vacatureblok in normale documentflow Deze sectie deelt .mp-home-vacancies met de homepage, maar mag op de Werken bij-pagina NOOIT de absolute homepage-positionering erven. ========================================================================== */ .mp-pdf-jobs .mp-jobs-vacancies{ position:relative !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:72px 0 84px !important; background:#fff !important; overflow:hidden !important; z-index:auto !important; } .mp-pdf-jobs .mp-jobs-vacancies > .mp-figma-inner{ position:relative !important; left:auto !important; top:auto !important; width:min(100%,1294px) !important; height:auto !important; min-height:0 !important; margin:0 auto !important; padding:0 !important; } .mp-pdf-jobs .mp-jobs-vacancies h2{ position:relative !important; left:auto !important; top:auto !important; width:auto !important; margin:0 0 58px !important; padding:0 !important; text-align:center !important; color:#E4032E !important; font:600 italic 56px/60px "KoHo",Arial,sans-serif !important; } /* The slider itself participates in layout and reserves the card height. */ .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider{ position:relative !important; left:auto !important; top:auto !important; width:100% !important; height:auto !important; min-height:760px !important; margin:0 !important; padding:0 !important; overflow:visible !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider__viewport{ position:relative !important; width:100% !important; height:620px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider__track{ display:flex !important; align-items:flex-start !important; gap:90px !important; width:max-content !important; height:620px !important; margin:0 !important; padding:0 !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-figma-vacancy{ position:relative !important; flex:0 0 413px !important; width:413px !important; height:620px !important; min-height:620px !important; margin:0 !important; padding:60px 0 0 !important; background:#F0F0F0 !important; border:0 !important; border-radius:30px !important; box-shadow:none !important; overflow:visible !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-figma-card-image, .mp-pdf-jobs .mp-jobs-vacancies .mp-figma-vacancy__media{ width:393px !important; height:393px !important; margin:-60px auto 0 !important; overflow:hidden !important; border-radius:18px !important; box-shadow:0 13px 24px rgba(0,0,0,.13) !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-figma-card-image img, .mp-pdf-jobs .mp-jobs-vacancies .mp-figma-vacancy__media img{ display:block !important; width:393px !important; height:393px !important; object-fit:cover !important; border-radius:18px !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-figma-vacancy__body{ position:static !important; margin:0 !important; padding:18px 28px 30px !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-figma-vacancy__status{ position:static !important; display:inline-flex !important; min-height:40px !important; margin:0 !important; padding:7px 15px !important; border-radius:200px !important; background:#E4032E !important; color:#fff !important; font:700 18px/26px "KoHo",Arial,sans-serif !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-figma-vacancy h3{ margin:8px 0 0 !important; color:#482974 !important; font:700 27px/33px "KoHo",Arial,sans-serif !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-figma-vacancy__meta{ margin:0 !important; color:#482974 !important; font:500 27px/33px "KoHo",Arial,sans-serif !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-figma-vacancy__excerpt{ margin:17px 0 0 !important; color:#000 !important; font:400 16px/23px "KoHo",Arial,sans-serif !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider__controls{ position:relative !important; left:auto !important; top:auto !important; width:100% !important; display:flex !important; justify-content:center !important; gap:38px !important; margin:46px 0 0 !important; padding:0 !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider__controls button{ display:grid !important; place-items:center !important; width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important; background:#F0F0F0 !important; color:#1488CA !important; box-shadow:none !important; font-size:0 !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider__controls button > span{ display:block !important; visibility:visible !important; opacity:1 !important; color:#1488CA !important; font:400 26px/1 Arial,sans-serif !important; transform:translateY(-1px) !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-home-center{ position:relative !important; left:auto !important; top:auto !important; width:auto !important; margin:24px 0 0 !important; padding:0 !important; display:flex !important; justify-content:center !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-home-center .mp-figma-button{ width:auto !important; min-width:220px !important; } /* CTA follows the vacancy block, footer follows CTA. */ .mp-pdf-jobs .mp-jobs-cta{ position:relative !important; clear:both !important; margin:0 !important; z-index:1 !important; } /* 3.11.7 — footerlogo iets lager volgens visuele vergelijking */ .mp-site-footer .mp-footer-tab{ top:39px !important; } /* 3.11.8 — footerlogo iets terug omhoog voor betere Figma-overlap */ .mp-site-footer .mp-footer-tab{ top:31px !important; } /* 3.11.9 — footerlogo tussenpositie */ .mp-site-footer .mp-footer-tab{ top:35px !important; } /* ========================================================================== 3.12.7 — locatiekaart volgens Figma: rode speech/vlag-vorm Toegepast op alle viewports. Hoofdvlak met afgeronde bovenhoeken / onderhoeken en aparte driehoekige punt. ========================================================================== */ /* Verwijder eventuele oude tail op child-elementen. */ /* Body zelf blijft rechthoekig; de vlagpunt komt van de kaartcontainer. */ /* Afbeelding hoort visueel in dezelfde kaart, zonder los zwevend frame. */ /* Pijlknop zoals in Figma: witte cirkel in het rode vlak. */ /* 3.12.7 widescreen Figma proportions */ /* ========================================================================== 3.12.19 — WIDESCREEN footerbovenkant opnieuw gemeten vanaf PDF/Figma Frame 2200 × 599 (node 300:2351). In het ontwerp loopt de BOVENKANT van de rood→paars-vorm schuin omlaag: links y=0, rechts ongeveer y=123. De ONDERKANT is horizontaal op y=123. De vorige CSS deed feitelijk het omgekeerde: de bovenkant was vrijwel horizontaal en de onderkant liep schuin. Dat is hier gecorrigeerd. Alleen widescreen. Standaard en mobiel blijven bewust ongemoeid. ========================================================================== */ @media (min-width:1600px){ .mp-site-footer{ position:relative !important; height:599px !important; min-height:599px !important; background:transparent !important; overflow:hidden !important; } /* Paarse footerbody begint in het ontwerp pas onder de horizontale onderrand van de gekleurde bovenbalk. */ .mp-site-footer::after{ content:"" !important; display:block !important; position:absolute !important; left:0 !important; right:0 !important; top:123px !important; bottom:0 !important; background:#482974 !important; z-index:0 !important; } /* Rood → magenta → paars: schuine BOVENrand, horizontale ONDERrand. */ .mp-site-footer::before{ content:"" !important; display:block !important; position:absolute !important; left:0 !important; top:0 !important; width:100% !important; height:123px !important; z-index:1 !important; transform:none !important; background:linear-gradient(90deg,#E4032E 0%,#E4032E 13%,#C20C56 48%,#482974 100%) !important; clip-path:polygon(0 0,100% 100%,100% 100%,0 100%) !important; } /* Logo-tab: dezelfde positie/maat als het 2200px Figma-frame. De laatste historische top-overrides worden hiermee expliciet vervangen. */ .mp-site-footer .mp-footer-tab{ display:block !important; position:absolute !important; right:0 !important; top:23px !important; width:307px !important; height:109px !important; margin:0 !important; padding:0 !important; z-index:4 !important; background: url("../images/mijnplein-wordmark.png") no-repeat 50% 37px / 148px auto, url("../images/footer-logo-shape-desktop.svg") no-repeat 0 0 / 307px 109px !important; border:0 !important; border-radius:0 !important; clip-path:none !important; box-shadow:none !important; color:transparent !important; font-size:0 !important; line-height:0 !important; } /* Bewerkbare footerinhoud boven de paarse body. */ .mp-site-footer .mp-footer-columns{ z-index:2 !important; } } /* ========================================================================== 3.12.20 — WIDESCREEN footer: herstel exacte Figma/PDF artwork 3.12.19 probeerde de vorm opnieuw met CSS op te bouwen. Dat was onnodig: footer-top-figma.png bevat de reeds uit het 2200px ontwerp uitgesneden bovenbalk + logo-tab. Deze asset is vanaf nu opnieuw de autoriteit. ========================================================================== */ @media (min-width:1600px){ .mp-site-footer{ position:relative !important; width:100% !important; height:599px !important; min-height:599px !important; margin:0 !important; padding:0 !important; background:#482974 !important; color:#fff !important; overflow:hidden !important; isolation:isolate !important; } /* Exacte 2200px Figma/PDF-uitsnede. */ .mp-site-footer::before{ content:"" !important; display:block !important; position:absolute !important; left:50% !important; top:0 !important; width:2200px !important; height:187px !important; transform:translateX(-50%) !important; background:url("../images/footer-top-figma.png") no-repeat center top / 2200px 187px !important; clip-path:none !important; z-index:1 !important; pointer-events:none !important; } /* Geen tweede laag meer: die veroorzaakte de witte footer in 3.12.19. */ .mp-site-footer::after{ content:none !important; display:none !important; } /* Logo zit al exact in footer-top-figma.png. */ .mp-site-footer .mp-footer-tab{ display:none !important; } /* Footertekst blijft boven de paarse onderzijde van het artwork. */ .mp-site-footer .mp-footer-columns{ position:absolute !important; left:7.91% !important; top:184px !important; width:980px !important; max-width:none !important; margin:0 !important; padding:0 !important; display:grid !important; grid-template-columns:210px 212px 230px !important; column-gap:117px !important; align-items:start !important; z-index:2 !important; } } /* ========================================================================== 3.12.21 — WIDESCREEN footerbovenbalk fluid Het Figma-artwork blijft de bron, maar schaalt nu met de viewport. Geen vaste 2200px breedte meer en dus geen lege paarse stroken links/rechts. ========================================================================== */ @media (min-width:1600px){ .mp-site-footer::before{ left:0 !important; right:0 !important; top:0 !important; width:100% !important; height:auto !important; aspect-ratio:2200 / 187 !important; min-height:136px !important; max-height:none !important; transform:none !important; background-image:url("../images/footer-top-figma.png") !important; background-repeat:no-repeat !important; background-position:left top !important; background-size:100% 100% !important; clip-path:none !important; } /* De footerinhoud volgt de schaal van het 2200px ontwerp. Bij 2200px = 184px; op bredere/smallere widescreens beweegt dit mee. */ .mp-site-footer .mp-footer-columns{ top:clamp(150px,8.36vw,205px) !important; left:clamp(96px,7.91vw,190px) !important; } } /* 3.12.22 — WIDESCREEN footer typography: readable at large resolutions. */ @media (min-width:1600px){ .mp-site-footer .mp-footer-columns{ width:1120px !important; grid-template-columns:240px 240px 260px !important; column-gap:120px !important; } .mp-site-footer .mp-footer-columns h3{ margin:0 0 10px !important; font:700 clamp(16px,.91vw,20px)/1.2 "KoHo",Arial,sans-serif !important; } .mp-site-footer .mp-footer-columns p, .mp-site-footer .mp-footer-columns a, .mp-site-footer .mp-footer-navigation .wp-block-navigation-item__content{ font-size:clamp(16px,.91vw,20px) !important; line-height:1.42 !important; } .mp-site-footer .mp-footer-columns p{margin:0 0 18px !important} .mp-site-footer .mp-footer-social{ display:flex !important; gap:12px !important; margin:20px 0 20px !important; } .mp-site-footer .mp-footer-social a, .mp-site-footer .mp-footer-social span{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:38px !important; height:38px !important; border:2px solid #fff !important; border-radius:50% !important; font:600 17px/1 Arial,sans-serif !important; color:#fff !important; text-decoration:none !important; } .mp-site-footer .mp-footer-privacy{ display:inline-block !important; margin-top:2px !important; } } /* 3.12.23 — WIDESCREEN footer: larger socials + Figma privacy arrow. */ @media (min-width:1600px){ .mp-site-footer .mp-footer-social{ gap:14px !important; } .mp-site-footer .mp-footer-social a, .mp-site-footer .mp-footer-social span{ width:46px !important; height:46px !important; font-size:20px !important; border-width:2px !important; } .mp-site-footer .mp-footer-privacy{ position:relative !important; padding-left:18px !important; color:#fff !important; } .mp-site-footer .mp-footer-privacy::before{ content:"›" !important; position:absolute !important; left:0 !important; top:50% !important; transform:translateY(-52%) !important; color:#f0ab21 !important; font-weight:700 !important; font-size:1.15em !important; line-height:1 !important; } } @media (min-width:1600px){ .mp-site-footer .mp-footer-columns h3{ font-size:23px !important; } .mp-site-footer .mp-footer-columns p, .mp-site-footer .mp-footer-columns a, .mp-site-footer .mp-footer-navigation .wp-block-navigation-item__content{ font-size:22px !important; } } /* 3.12.24 — Privacy label itself must be fully white; only the preceding arrow is orange. */ .mp-site-footer .mp-footer-privacy, .mp-site-footer .mp-footer-privacy:link, .mp-site-footer .mp-footer-privacy:visited, .mp-site-footer .mp-footer-privacy:hover, .mp-site-footer .mp-footer-privacy:active{ color:#fff !important; } .mp-site-footer .mp-footer-privacy::first-letter{ color:#fff !important; } .mp-site-footer .mp-footer-privacy::before{ color:#f0ab21 !important; } /* ========================================================================== 3.12.41 — opgeschoonde widescreen-correcties Samengevoegd uit de historische 3.12.26–3.12.39 overrides. Iedere selector staat hier nog maar één keer per context; alleen de uiteindelijke waarden zijn behouden. ========================================================================== */ @media (min-width:1600px){ .mp-home-join{ background:#fff !important; } .mp-home-join::before{ top:132px !important; height:calc(100% - 132px) !important; clip-path:polygon(0 0,100% 8%,100% 100%,0 100%) !important; background:var(--mp-light) !important; } .mp-home-join__visual{ top:22px !important; } } /* ==========================================================================\n LOCATIES — WIDESCREEN CANONICAL / Figma 302:1258\n Eén bron van waarheid. Geen historische overrides onder deze sectie.\n ========================================================================== */ .mp-home-locations{ position:absolute!important;left:0!important;top:4122px!important;width:100%!important;height:1267px!important; margin:0!important;padding:0!important;background:#fff!important;overflow:visible!important; } .mp-home-locations__heading{ position:relative!important;width:100%!important;height:180px!important;margin:0!important;padding:0!important; display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;text-align:center!important; } .mp-home-locations__heading .mp-figma-kicker{margin:0!important;color:var(--mp-red)!important;font:600 italic 56px/60px "KoHo",Arial,sans-serif!important} .mp-home-locations__heading h2{margin:0!important;color:var(--mp-purple)!important;font:700 36px/40px "KoHo",Arial,sans-serif!important} .mp-location-stage--real{position:relative!important;width:100%!important;height:698px!important;overflow:hidden!important;background:#eef1ef!important} .mp-location-stage--real .mp-real-map{position:absolute!important;inset:0!important;width:100%!important;height:698px!important;z-index:1!important} .mp-location-stage--real .leaflet-pane{z-index:200!important}.mp-location-stage--real .leaflet-top,.mp-location-stage--real .leaflet-bottom{z-index:500!important} .mp-location-stage--real .mp-leaflet-divicon,.mp-location-stage--real .leaflet-marker-icon.mp-leaflet-divicon{width:30px!important;height:42px!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;overflow:visible!important} .mp-location-stage--real svg.mp-leaflet-marker{display:block!important;width:30px!important;height:42px!important;overflow:visible!important;color:#E4032E!important;background:none!important;border:0!important;filter:drop-shadow(0 3px 3px rgba(0,0,0,.16))!important;transform-origin:0 42px!important;transition:transform .18s ease,filter .18s ease!important}.mp-location-stage--real svg.mp-leaflet-marker--combined{color:#F0AB21!important}.mp-location-stage--real svg.mp-leaflet-marker .mp-marker-fill{fill:currentColor!important}.mp-location-stage--real svg.mp-leaflet-marker.is-active{transform:scale(1.16)!important}.mp-location-stage--real .mp-leaflet-marker i{display:none!important} .mp-location-stage--real .mp-location-feature{position:absolute!important;left:60%!important;top:88px!important;width:268px!important;margin:0!important;background:var(--mp-red)!important;color:#fff!important;border-radius:28px 28px 0 0!important;box-shadow:0 14px 28px rgba(0,0,0,.16)!important;overflow:visible!important;z-index:650!important;transform:translateX(-50%)!important} .mp-location-feature__image{width:268px!important;height:185px!important;overflow:hidden!important;border-radius:28px 28px 0 0!important}.mp-location-feature__image img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}.mp-location-feature__body{position:relative!important;min-height:115px!important;padding:12px 15px!important;background:var(--mp-red)!important;color:#fff!important}.mp-location-feature__body:after{content:""!important;position:absolute!important;left:0!important;bottom:-32px!important;border-top:32px solid var(--mp-red)!important;border-right:32px solid transparent!important}.mp-location-feature .mp-figma-kicker{font:700 12px/17px "KoHo",Arial,sans-serif!important;color:#fff!important}.mp-location-feature h3{margin:2px 0 0!important;font:700 19px/26px "KoHo",Arial,sans-serif!important;color:#fff!important}.mp-location-feature p{margin:0!important;font:500 12px/17px "KoHo",Arial,sans-serif!important;color:#fff!important}.mp-location-feature a{position:absolute!important;right:14px!important;bottom:21px!important;width:42px!important;height:42px!important;border-radius:50%!important;background:#fff!important;color:var(--mp-blue)!important;display:grid!important;place-items:center!important;text-decoration:none!important} .mp-location-stage--real .mp-location-legend{position:absolute!important;left:68%!important;bottom:86px!important;transform:translateX(-50%)!important;display:flex!important;align-items:center!important;gap:26px!important;width:max-content!important;min-height:58px!important;padding:10px 22px!important;margin:0!important;background:#fff!important;border-radius:200px!important;box-shadow:0 0 27px rgba(0,0,0,.25)!important;font:500 19px/26px "KoHo",Arial,sans-serif!important;white-space:nowrap!important;z-index:650!important}.mp-location-legend button{display:flex!important;align-items:center!important;gap:10px!important;border:0!important;background:none!important;padding:0!important;font:inherit!important}.mp-location-legend button span{width:32px!important;height:32px!important;border-radius:50%!important;background:var(--mp-red)!important}.mp-location-legend button[data-location-filter="combined"] span{background:var(--mp-yellow)!important} /* Figma: one full-width white plate overlaps the map; its TOP EDGE rises from left to right. */ .mp-location-details-wrap{position:relative!important;width:100%!important;height:570px!important;margin:-112px 0 0!important;padding:0!important;background:transparent!important;overflow:visible!important;z-index:600!important;clip-path:none!important} .mp-location-details-wrap::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;background:#fff!important;clip-path:polygon(0 8%,100% 0,100% 100%,0 100%)!important;z-index:0!important;pointer-events:none!important} .mp-figma-home .mp-location-details.mp-figma-inner{position:relative!important;width:1294px!important;max-width:calc(100% - 120px)!important;min-height:570px!important;margin:0 auto!important;padding:170px 0 48px!important;display:grid!important;grid-template-columns:360px 1fr!important;column-gap:120px!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;z-index:2!important;align-items:start!important} .mp-location-details__title{position:absolute!important;left:0!important;top:48px!important;width:438px!important;height:104px!important;margin:0!important;padding:0 0 0 88px!important;display:flex!important;align-items:center!important;background:var(--mp-yellow)!important;color:#fff!important;border-radius:48px 48px 0 0!important;clip-path:polygon(3% 0,92% 5%,100% 100%,0 91%)!important;z-index:8!important;overflow:visible!important}.mp-location-details__title span{display:block!important;transform:rotate(-2.4deg)!important;color:#fff!important;font:600 italic 60px/60px "KoHo",Arial,sans-serif!important} .mp-location-office{grid-column:1!important;margin:0!important;padding:0!important}.mp-location-list{grid-column:2!important;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:70px!important;align-content:start!important;overflow:visible!important}.mp-location-office h3,.mp-location-list h3{margin:0 0 19px!important;color:var(--mp-purple)!important;font:700 27px/33px "KoHo",Arial,sans-serif!important}.mp-location-list h3{grid-column:1/-1!important}.mp-location-office p{margin:0 0 20px!important;color:#000!important;font:500 19px/26px "KoHo",Arial,sans-serif!important}.mp-location-list__item{display:block!important;width:100%!important;margin:0 0 13px!important;padding:0!important;border:0!important;background:transparent!important;text-align:left!important;color:#000!important;font:500 19px/26px "KoHo",Arial,sans-serif!important;cursor:pointer!important}.mp-location-list__item strong{color:var(--mp-blue)!important}.mp-location-list__item.is-active strong,.mp-location-list__item:hover strong{color:var(--mp-red)!important}.mp-location-list__item span{color:#000!important;font-weight:500!important} /* 3.12.45 — Figma location transition: white plate with raised rounded shoulder beside yellow tab. */ @media (min-width:1600px){ .mp-location-details-wrap::before{ inset:-34px 0 0 0!important; background:#fff!important; clip-path:polygon(0 13%,29.5% 13%,31.5% 4%,100% 0,100% 100%,0 100%)!important; } .mp-location-details-wrap::after{ content:""!important; position:absolute!important; left:calc(50% - 647px + 405px)!important; top:-12px!important; width:110px!important; height:76px!important; background:#fff!important; border-radius:42px 0 0 0!important; transform:rotate(1.4deg)!important; transform-origin:left bottom!important; z-index:1!important; pointer-events:none!important; } .mp-location-details__title{ top:30px!important; z-index:9!important; } .mp-figma-home .mp-location-details.mp-figma-inner{ padding-top:160px!important; } } /* ========================================================================== 3.13.0 — FIGMA VECTOR SHAPES Organische vormen komen uit de vectorgeometrie van het aangeleverde Figma/PDF-model. CSS border-radius/skew/clip-path approximaties zijn hier bewust uitgeschakeld. Kleuren blijven Mijnplein CSS-variabelen. ========================================================================== */ .mp-home-hero__copy:before{ border-radius:0!important;transform:none!important; -webkit-mask:url('../images/shapes/figma-shape-hero-white.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-hero-white.svg') center/100% 100% no-repeat!important; } .mp-home-work__yellow{ border-radius:0!important;transform:none!important; -webkit-mask:url('../images/shapes/figma-shape-work-yellow.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-work-yellow.svg') center/100% 100% no-repeat!important; } .mp-home-work__shape:before{ border-radius:0!important; -webkit-mask:url('../images/shapes/figma-shape-work-white.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-work-white.svg') center/100% 100% no-repeat!important; } .mp-home-join::before{ clip-path:none!important;transform:none!important; -webkit-mask:url('../images/shapes/figma-shape-join-grey.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-join-grey.svg') center/100% 100% no-repeat!important; } .mp-site-footer .mp-footer-tab{ border-radius:0!important;clip-path:none!important;transform:none!important; -webkit-mask:url('../images/shapes/figma-shape-footer-tab.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-footer-tab.svg') center/100% 100% no-repeat!important; } /* Locaties: exact de twee door Figma geëxporteerde SVG-paden. */ .mp-location-details-wrap{ margin:-85px 0 0!important;height:570px!important;background:transparent!important;clip-path:none!important; } .mp-location-details-wrap::before{ content:""!important;position:absolute!important;left:0!important;right:0!important;top:0!important;height:85px!important; inset:auto 0 auto 0!important;background:transparent!important;clip-path:none!important;border-radius:0!important;transform:none!important; z-index:1!important;pointer-events:none!important; } .mp-location-details-wrap::after{ content:""!important;position:absolute!important;left:0!important;right:0!important;top:77px!important;bottom:0!important; width:auto!important;height:auto!important;background:#fff!important;border-radius:0!important;transform:none!important;clip-path:none!important; z-index:0!important;pointer-events:none!important; } .mp-location-details__title{ left:0!important;top:0!important;width:438px!important;height:87px!important;padding:0 0 0 88px!important; background:var(--mp-yellow)!important;border-radius:0!important;clip-path:none!important;transform:none!important; -webkit-mask:url('../images/shapes/figma-shape-locations-yellow.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-locations-yellow.svg') center/100% 100% no-repeat!important; z-index:9!important; } .mp-location-details__title span{transform:none!important;font-size:56px!important;line-height:60px!important} .mp-figma-home .mp-location-details.mp-figma-inner{padding-top:125px!important} /* ========================================================================== 3.13.3 — VISIEBLOK Onderste vlak achter foto/quote/tekst wit; bovenste diagonale overgang blijft. ========================================================================== */ .mp-figma-home .mp-home-vision__grey{ background:#fff !important; } /* ========================================================================== 3.13.6 — SLUIT JE AAN: grijze Figma-vorm full-bleed op widescreen De sectie-inhoud blijft op de bestaande masterpositie; alleen het grijze achtergrondvlak loopt viewport-breed door. ========================================================================== */ @media (min-width:1600px){ .mp-figma-home > .mp-home-join{ overflow:visible!important; } .mp-figma-home > .mp-home-join::before{ left:50%!important; right:auto!important; width:100vw!important; max-width:none!important; margin-left:-50vw!important; } } /* ========================================================================== 3.13.9 — LOCATIES: tabs aan de onderrand van de kaart De tabs zijn nu viewport-gepositioneerd en dus niet meer gebonden aan de 1294px contentcontainer. De witte tweede tab draagt de lijsttitel. ========================================================================== */ @media (min-width:1600px){ .mp-location-stage--real{overflow:visible!important;} .mp-location-map-tabs{ display:block!important; position:absolute!important; left:0!important;right:0!important;bottom:0!important; height:clamp(91px,5.70vw,146px)!important; z-index:700!important; pointer-events:none!important; } .mp-location-map-tabs .mp-location-details__title{ display:flex!important; position:absolute!important; left:clamp(205px,12.81vw,328px)!important; right:auto!important;top:auto!important;bottom:0!important; width:clamp(458px,28.63vw,733px)!important;height:clamp(91px,5.70vw,146px)!important; margin:0!important;padding:0 0 0 clamp(120px,7.54vw,193px)!important; align-items:center!important; background:var(--mp-yellow)!important;color:#fff!important; border-radius:0!important;clip-path:none!important;transform:none!important; -webkit-mask:url('../images/shapes/figma-shape-locations-yellow.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-locations-yellow.svg') center/100% 100% no-repeat!important; z-index:3!important; } .mp-location-map-tabs .mp-location-details__title span{ display:block!important;transform:none!important; color:#fff!important;font:600 italic clamp(38px,2.35vw,60px)/1 "KoHo",Arial,sans-serif!important; } .mp-location-details__group-title{ display:flex!important; position:absolute!important; left:clamp(541px,33.83vw,866px)!important; right:auto!important;top:auto!important;bottom:-1px!important; width:clamp(895px,55.94vw,1432px)!important;height:clamp(53px,3.32vw,85px)!important; margin:0!important;padding:0 clamp(54px,3vw,77px) 0 clamp(165px,10.31vw,264px)!important; box-sizing:border-box!important;align-items:center!important; background:#fff!important;color:var(--mp-purple)!important; border-radius:0!important;clip-path:none!important;transform:none!important; -webkit-mask:url('../images/shapes/figma-shape-locations-white.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-locations-white.svg') center/100% 100% no-repeat!important; z-index:4!important; } .mp-location-details__group-title span{ display:block!important;color:var(--mp-purple)!important; font:700 clamp(24px,1.48vw,38px)/1.15 "KoHo",Arial,sans-serif!important;white-space:nowrap!important; } .mp-location-details-wrap .mp-location-details__title{display:none!important;} .mp-location-list h3{display:none!important;} } /* ========================================================================== 3.13.15 — SLUIT JE AAN: full-bleed bevestiging widescreen Houd de grijze Figma-vorm ook boven 1600px exact viewport-breed. ========================================================================== */ @media (min-width:1600px){ .mp-figma-home > .mp-home-join{ overflow:visible!important; } .mp-figma-home > .mp-home-join::before{ left:50%!important; right:auto!important; width:100vw!important; max-width:none!important; margin-left:-50vw!important; } } /* ========================================================================== 3.13.16 — SLUIT JE AAN: grijs werkelijk viewport-breed De sectie zelf draagt nu de grijze achtergrond. Een witte schuine laag maakt de Figma-overgang bovenaan, onafhankelijk van de contentbreedte. ========================================================================== */ @media (min-width:1600px){ .mp-figma-home > .mp-home-join{ background:var(--mp-light)!important; overflow:hidden!important; } .mp-figma-home > .mp-home-join::after{ content:""!important; display:block!important; position:absolute!important; left:0!important; top:0!important; width:100%!important; height:clamp(150px,12vw,210px)!important; background:#fff!important; clip-path:polygon(0 0,100% 0,100% 100%,0 62%)!important; transform:none!important; z-index:0!important; pointer-events:none!important; } .mp-figma-home > .mp-home-join > .mp-figma-inner{ z-index:1!important; } } /* ========================================================================== 3.13.17 — LOCATIEKAARTJE + FILTERVINKJES volgens Figma Foto boven, compacte rode infobalk onder; geen type-label in het kaartje. ========================================================================== */ @media (min-width:1600px){ .mp-location-stage--real .mp-location-feature{ display:block!important; background:transparent!important; border-radius:18px 18px 0 0!important; overflow:visible!important; } .mp-location-stage--real .mp-location-feature__image{ display:block!important; width:100%!important; height:auto!important; aspect-ratio:1.42 / 1!important; border-radius:18px 18px 0 0!important; overflow:hidden!important; } .mp-location-stage--real .mp-location-feature__image img{ width:100%!important; height:100%!important; object-fit:cover!important; } .mp-location-stage--real .mp-location-feature__body{ position:relative!important; width:100%!important; min-height:78px!important; height:78px!important; box-sizing:border-box!important; padding:11px 62px 10px 15px!important; background:#E4032E!important; border-radius:0!important; overflow:visible!important; } .mp-location-stage--real .mp-location-feature .mp-figma-kicker{ display:none!important; } .mp-location-stage--real .mp-location-feature h3{ margin:0 0 1px!important; font:700 17px/20px "KoHo",Arial,sans-serif!important; color:#fff!important; } .mp-location-stage--real .mp-location-feature p{ margin:0!important; font:500 12px/16px "KoHo",Arial,sans-serif!important; color:#fff!important; } .mp-location-stage--real .mp-location-feature a{ position:absolute!important; right:14px!important; top:50%!important; bottom:auto!important; width:42px!important; height:42px!important; transform:translateY(-50%)!important; } .mp-location-stage--real .mp-location-feature::after{ content:""!important; display:block!important; position:absolute!important; left:0!important; bottom:-32px!important; width:0!important; height:0!important; border-top:32px solid #E4032E!important; border-right:32px solid transparent!important; border-left:0!important; } .mp-location-stage--real .mp-location-feature__body::after{ content:none!important; display:none!important; } .mp-location-legend button span{ position:relative!important; display:grid!important; place-items:center!important; color:#fff!important; font:700 18px/1 Arial,sans-serif!important; } .mp-location-legend button span::after{ content:"✓"!important; opacity:0!important; transform:translateY(-1px)!important; } .mp-location-legend button.is-active span::after{ opacity:1!important; } } /* ========================================================================== 3.13.18 — LOCATIEKAARTJE: afbeelding draagt de vorm, geen rode fotorrand ========================================================================== */ @media (min-width:1600px){ .mp-location-stage--real .mp-location-feature{ padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; overflow:visible!important; } .mp-location-stage--real .mp-location-feature__image{ margin:0!important; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; overflow:visible!important; } .mp-location-stage--real .mp-location-feature__image img{ display:block!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; clip-path:inset(0 round 18px 18px 0 0)!important; } .mp-location-stage--real .mp-location-feature__body{ margin:0!important; border:0!important; border-radius:0!important; } } /* ========================================================================== 3.13.19 — LOCATIEKAARTJE: grotere punt, naadloos aangesloten ========================================================================== */ @media (min-width:1600px){ .mp-location-stage--real .mp-location-feature::after{ bottom:-38px!important; border-top-width:40px!important; border-right-width:40px!important; } } /* ========================================================================== 3.13.20 — LOCATIEKAARTJE: pointer gebruikt exacte Figma-pinvector Zelfde geometrie als Vector 9 van de kleine Leaflet-markers; alleen groter. ========================================================================== */ @media (min-width:1600px){ .mp-location-stage--real .mp-location-feature::after{ content:""!important; display:block!important; position:absolute!important; left:0!important; bottom:-43px!important; width:40px!important; height:45px!important; border:0!important; background:#E4032E!important; -webkit-mask:url('../images/shapes/figma-shape-location-card-pointer.svg') 0 0/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-location-card-pointer.svg') 0 0/100% 100% no-repeat!important; pointer-events:none!important; } } /* ========================================================================== 3.13.21 — LOCATIEKAARTJE: pointerverhouding exact volgens ontwerp ========================================================================== */ @media (min-width:1600px){ .mp-location-stage--real .mp-location-feature::after{ left:0!important; bottom:-52px!important; width:60px!important; height:54px!important; border:0!important; background:#E4032E!important; -webkit-mask:url('../images/shapes/figma-shape-location-card-pointer.svg') 0 0/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-location-card-pointer.svg') 0 0/100% 100% no-repeat!important; } } /* ========================================================================== 3.13.22 — LOCATIEKAARTJE: één masker voor complete Figma-vorm ========================================================================== */ @media (min-width:1600px){ .mp-location-stage--real .mp-location-feature{ box-sizing:border-box!important; padding:0 0 18% 0!important; background:#E4032E!important; border:0!important; border-radius:0!important; overflow:visible!important; -webkit-mask:url('../images/shapes/figma-shape-location-card.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-location-card.svg') center/100% 100% no-repeat!important; } .mp-location-stage--real .mp-location-feature__image, .mp-location-stage--real .mp-location-feature__image img{ border-radius:0!important; clip-path:none!important; } .mp-location-stage--real .mp-location-feature::after{ content:none!important; display:none!important; } } /* ========================================================================== 3.13.23 — LOCATIEKAARTJE: masker uitsluitend op het afbeeldingsvlak ========================================================================== */ @media (min-width:1600px){ .mp-location-stage--real .mp-location-feature{ box-sizing:border-box!important; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; overflow:visible!important; -webkit-mask:none!important; mask:none!important; } .mp-location-stage--real .mp-location-feature__image{ margin:0!important; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; overflow:visible!important; } .mp-location-stage--real .mp-location-feature__image img{ display:block!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; clip-path:none!important; -webkit-mask:url('../images/shapes/figma-shape-location-card-image.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-location-card-image.svg') center/100% 100% no-repeat!important; } .mp-location-stage--real .mp-location-feature::after{ content:""!important; display:block!important; position:absolute!important; left:0!important; bottom:-52px!important; width:60px!important; height:54px!important; border:0!important; background:#E4032E!important; -webkit-mask:url('../images/shapes/figma-shape-location-card-pointer.svg') 0 0/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-location-card-pointer.svg') 0 0/100% 100% no-repeat!important; pointer-events:none!important; } } /* ========================================================================== 3.13.24 — LOCATIES: witte tab exact boven de locatielijst De titeltekst volgt de werkelijke linkerzijde van .mp-location-list en blijft daardoor correct uitgelijnd wanneer de viewport verandert. ========================================================================== */ @media (min-width:1600px){ .mp-location-stage--real{ --mp-location-group-title-pad:clamp(165px,10.31vw,264px); } .mp-location-details__group-title{ left:calc(var(--mp-location-list-left, 50%) - var(--mp-location-group-title-pad))!important; padding-left:var(--mp-location-group-title-pad)!important; } } /* ========================================================================== 3.13.25 — NAVIGATIE: paarse submenu's (widescreen) ========================================================================== */ @media (min-width:1600px){ .mp-site-header .mp-primary-navigation .wp-block-navigation__submenu-container{ background:var(--mp-purple)!important; } .mp-site-header .mp-primary-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ color:#fff!important; } .mp-site-header .mp-primary-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{ color:#fff!important; background:rgba(255,255,255,.10)!important; } } /* ======================================================================== 3.13.26 — CONTENT PAGE HEADER according to Figma Green reference area = photo placeholder. 2200px master composition. ======================================================================== */ .mp-figma-content-page--strict .mp-pdf-content-page{ position:relative!important; overflow:hidden!important; background:#fff!important; } .mp-figma-content-page--strict .mp-content-masthead{ position:relative!important; width:100%!important; height:525px!important; margin:0!important; overflow:hidden!important; background:#fff!important; } .mp-figma-content-page--strict .mp-content-photo, .mp-figma-content-page--strict .mp-content-swoop{ position:absolute!important; left:calc(50% - 1100px)!important; top:0!important; width:2200px!important; height:525px!important; margin:0!important; } .mp-figma-content-page--strict .mp-content-swoop{ z-index:1!important; background:linear-gradient(100deg,#E4032E 0%,#B1125C 45%,#482974 100%)!important; -webkit-mask:url('../images/shapes/figma-shape-content-band.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-content-band.svg') center/100% 100% no-repeat!important; clip-path:none!important; } .mp-figma-content-page--strict .mp-content-photo{ z-index:2!important; background-image:var(--mp-content-image)!important; background-size:cover!important; background-position:center 42%!important; background-repeat:no-repeat!important; -webkit-mask:url('../images/shapes/figma-shape-content-photo.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-content-photo.svg') center/100% 100% no-repeat!important; } .mp-figma-content-page--strict .mp-figma-content-body{ margin:0!important; padding:0 0 105px!important; background:#fff!important; } .mp-figma-content-page--strict .mp-figma-content-body::before{display:none!important} .mp-figma-content-page--strict .mp-figma-content-body>.mp-figma-inner{ padding-top:0!important; } .mp-figma-content-page--strict .mp-figma-copy>.mp-figma-kicker{display:none!important} /* ======================================================================== 3.13.27 — CONTENT HEADER: Figma band sits IN FRONT of the photo. Use a self-coloured SVG so the shape cannot bleed below the photo mask. ======================================================================== */ .mp-figma-content-page--strict .mp-content-photo{ z-index:2!important; } .mp-figma-content-page--strict .mp-content-swoop{ z-index:3!important; background:transparent url('../images/shapes/figma-shape-content-band-gradient.svg') center/100% 100% no-repeat!important; -webkit-mask:none!important; mask:none!important; clip-path:none!important; pointer-events:none!important; } /* ======================================================================== 3.13.30 — CONTENT HEADER WIDESCREEN: scale the Figma 2200 master with the viewport instead of centre-cropping it. This keeps the photo edge and gradient band at the same relative positions as the widescreen design. ======================================================================== */ .mp-figma-content-page--strict .mp-content-masthead{ height:525px!important; } .mp-figma-content-page--strict .mp-content-photo, .mp-figma-content-page--strict .mp-content-swoop{ left:0!important; right:auto!important; top:0!important; width:100%!important; height:525px!important; } .mp-figma-content-page--strict .mp-content-photo{ -webkit-mask:url('../images/shapes/figma-shape-content-photo.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-content-photo.svg') center/100% 100% no-repeat!important; } .mp-figma-content-page--strict .mp-content-swoop{ background:transparent url('../images/shapes/figma-shape-content-band-gradient.svg') center/100% 100% no-repeat!important; } /* ======================================================================== 3.13.33 — CONTENT HEADER: lift the red→purple Figma band slightly so it overlaps the photo edge at the same height as the widescreen design. ======================================================================== */ .mp-figma-content-page--strict .mp-content-swoop{ top:-18px!important; } /* ======================================================================== 3.13.34 — CONTENT HEADER: position the red→purple swoop to match Figma. ======================================================================== */ .mp-figma-content-page--strict .mp-content-swoop{ top:-32px!important; transform:rotate(-2.0deg); } /* ========================================================================== 3.13.36 — INNER PAGES: white footer lead-in. Homepage keeps the original light-grey Figma footer artwork. ========================================================================== */ @media (min-width:1600px){ .mp-site-footer--inner::before{ background-image:url("../images/footer-top-figma-white.png") !important; } } /* 3.13.39 — Werken-bij hero volgens Figma: foto boven, grijs vlak eronder, kaart op de overgang */ .mp-pdf-jobs .mp-jobs-photo{ position:relative!important; min-height:640px!important; padding:0!important; background:#f0f0f0!important; background-image:none!important; overflow:hidden!important; } .mp-pdf-jobs .mp-jobs-photo::before{ content:""!important; position:absolute!important; inset:0 0 auto 0!important; height:278px!important; background-image:var(--mp-jobs-image)!important; background-size:cover!important; background-position:center!important; z-index:0!important; } .mp-pdf-jobs .mp-jobs-photo::after{ content:""!important; position:absolute!important; left:0!important; right:0!important; bottom:0!important; height:120px!important; background:#fff!important; clip-path:polygon(0 52%,100% 0,100% 100%,0 100%)!important; z-index:1!important; pointer-events:none!important; } .mp-pdf-jobs .mp-jobs-card{ position:absolute!important; left:50%!important; top:122px!important; transform:translateX(-50%)!important; z-index:2!important; width:min(860px,52vw)!important; margin:0!important; padding:48px 58px 50px!important; background:#fff!important; border-radius:0!important; clip-path:none!important; -webkit-mask:url('../images/shapes/figma-shape-jobs-card.svg') center / 100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-jobs-card.svg') center / 100% 100% no-repeat!important; box-shadow:none!important; } .mp-pdf-jobs .mp-jobs-card>div{max-width:700px!important} .mp-pdf-jobs .mp-jobs-card h1{ font-size:clamp(40px,2.7vw,52px)!important; line-height:1.04!important; margin:0 0 16px!important; } .mp-pdf-jobs .mp-jobs-card p{ font-size:16px!important; line-height:1.5!important; margin-bottom:24px!important; } /* ========================================================================== 3.13.40 — Werken bij / Uitgelichte onderwerpen volgens Figma De decoratieve paars-rode en gele vormen zijn afgeleid van de aangeleverde Figma-referentie. De compositie blijft op widescreen op de 1440px-master staan en rekt dus niet mee tot de volledige viewportbreedte. ========================================================================== */ .mp-pdf-jobs .mp-jobs-featured{ position:relative!important; padding:0!important; min-height:0!important; background:#fff!important; overflow:hidden!important; isolation:isolate!important; } .mp-pdf-jobs .mp-jobs-featured::before, .mp-pdf-jobs .mp-jobs-featured::after{ display:none!important; } .mp-pdf-jobs .mp-jobs-featured__stage{ position:relative!important; width:min(100%,1440px)!important; height:min(78.28vw,1127px)!important; min-height:780px!important; margin:0 auto!important; } .mp-pdf-jobs .mp-jobs-featured__red, .mp-pdf-jobs .mp-jobs-featured__yellow{ position:absolute!important; display:block!important; pointer-events:none!important; z-index:0!important; } .mp-pdf-jobs .mp-jobs-featured__red{ left:13.54%!important; top:4.14%!important; width:39.63%!important; height:29.01%!important; background:linear-gradient(96deg,var(--mp-purple) 0%,#8b155e 48%,var(--mp-red) 100%)!important; -webkit-mask:url('../images/shapes/figma-shape-jobs-featured-red.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-jobs-featured-red.svg') center/100% 100% no-repeat!important; } .mp-pdf-jobs .mp-jobs-featured__yellow{ left:37.80%!important; top:60.36%!important; width:58.11%!important; height:33.87%!important; background:var(--mp-yellow)!important; -webkit-mask:url('../images/shapes/figma-shape-work-yellow.svg') center/100% 100% no-repeat!important; mask:url('../images/shapes/figma-shape-work-yellow.svg') center/100% 100% no-repeat!important; } .mp-pdf-jobs .mp-jobs-featured__shape{ position:absolute!important; left:20.59%!important; top:11.53%!important; width:58.67%!important; min-height:76.22%!important; box-sizing:border-box!important; padding:48px 46px 44px!important; margin:0!important; background:#fff!important; border-radius:16px!important; box-shadow:none!important; z-index:2!important; } .mp-pdf-jobs .mp-jobs-featured__shape>h2{ margin:0 0 28px!important; text-align:center!important; font-size:38px!important; line-height:1.05!important; } .mp-pdf-jobs .mp-jobs-featured .mp-figma-featured-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; column-gap:42px!important; row-gap:42px!important; } .mp-pdf-jobs .mp-jobs-featured .mp-figma-featured-card{ min-width:0!important; padding:0!important; } .mp-pdf-jobs .mp-jobs-featured .mp-figma-featured-card .mp-figma-card-image, .mp-pdf-jobs .mp-jobs-featured .mp-figma-featured-card .wp-block-image{ margin:0 0 16px!important; } .mp-pdf-jobs .mp-jobs-featured .mp-figma-featured-card .mp-figma-card-image img, .mp-pdf-jobs .mp-jobs-featured .mp-figma-featured-card .wp-block-image img{ width:100%!important; height:150px!important; object-fit:cover!important; } .mp-pdf-jobs .mp-jobs-featured .mp-figma-featured-card h3{ margin:0 0 10px!important; font-size:18px!important; line-height:1.15!important; } .mp-pdf-jobs .mp-jobs-featured .mp-figma-featured-card p{ margin:0 0 8px!important; font-size:13px!important; line-height:1.45!important; } /* ========================================================================== 3.13.42 — Werken bij: Recente vacatures exact dezelfde kaartopbouw als home Alleen de sectieflow blijft jobs-specifiek; kaart, foto, badge, tekst, sliderafstand en navigatie volgen de homepage-geometrie. ========================================================================== */ .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider{ min-height:830px !important; overflow:visible !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider__viewport{ width:100% !important; height:680px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider__track{ display:flex !important; align-items:flex-start !important; gap:30px !important; width:max-content !important; height:680px !important; margin:0 !important; padding:0 !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider .mp-figma-vacancy{ position:relative !important; flex:0 0 520px !important; width:520px !important; max-width:520px !important; height:620px !important; min-height:620px !important; margin:60px 0 0 !important; padding:0 !important; background:#F0F0F0 !important; border:0 !important; border-radius:30px !important; overflow:visible !important; box-shadow:none !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider .mp-figma-vacancy__media{ position:static !important; width:auto !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; border-radius:0 !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider .mp-figma-card-image{ position:absolute !important; left:64px !important; top:-60px !important; width:393px !important; height:393px !important; min-width:393px !important; min-height:393px !important; max-width:393px !important; max-height:393px !important; aspect-ratio:1 / 1 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border-radius:0 !important; box-shadow:0 13px 24px rgba(0,0,0,.13) !important; background:#ddd !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider .mp-figma-card-image img{ display:block !important; position:static !important; width:393px !important; height:393px !important; min-width:393px !important; min-height:393px !important; max-width:393px !important; max-height:393px !important; object-fit:cover !important; object-position:center !important; margin:0 !important; border-radius:0 !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider .mp-figma-vacancy__status{ position:absolute !important; left:68px !important; top:380px !important; right:auto !important; bottom:auto !important; z-index:4 !important; display:inline-flex !important; align-items:center !important; width:auto !important; height:40px !important; min-height:40px !important; margin:0 !important; padding:7px 15px !important; border-radius:200px !important; background:#E4032E !important; color:#fff !important; font:700 18px/26px "KoHo",Arial,sans-serif !important; white-space:nowrap !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider .mp-figma-vacancy__body{ position:absolute !important; left:68px !important; top:442px !important; right:38px !important; bottom:auto !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider .mp-figma-vacancy__body h3{ margin:0 !important; padding:0 !important; color:#482974 !important; font:700 27px/33px "KoHo",Arial,sans-serif !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider .mp-figma-vacancy__meta{ margin:0 !important; padding:0 !important; color:#482974 !important; font:500 27px/33px "KoHo",Arial,sans-serif !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider .mp-figma-vacancy__excerpt{ margin:17px 0 0 !important; padding:0 !important; color:#000 !important; font:400 16px/23px "KoHo",Arial,sans-serif !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider .mp-figma-vacancy__body > a{ display:inline !important; margin:0 !important; padding:0 !important; color:#1488CA !important; font:400 16px/23px "KoHo",Arial,sans-serif !important; text-decoration:none !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider__controls{ position:relative !important; left:auto !important; top:auto !important; width:100% !important; display:flex !important; justify-content:center !important; gap:38px !important; margin:64px 0 0 !important; padding:0 !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-vacancy-slider__controls button{ display:grid !important; place-items:center !important; width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important; background:#fff !important; box-shadow:0 0 18px rgba(0,0,0,.08) !important; color:#1488CA !important; } .mp-pdf-jobs .mp-jobs-vacancies .mp-home-center{ margin:21px 0 0 !important; }