/* ════════════════════════════════════════════════════════════ PIANTE DI DOMANI - geavanceerde redesign (concept) Botanische, cinematische one-pager in de eigen huisstijl: paars (brand) + groen (planten/logo) + goud (truck-embleem). Alle "bewegende beelden" zijn CSS/SVG-gedreven → werkt overal, ook offline. Engine geïnspireerd op de salon-booking template. ═══════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --ink:#241830; /* tekst (aubergine) */ --deep:#241141; /* diepste paars (donkere secties) */ --plum:#2f1a4d; /* plum */ --violet:#5d2b86; /* primair brand-paars */ --violet-br:#7d49ad; /* helder paars */ --lav:#9a7cc0; /* lavendel (lichte band) */ --lav-soft:#c3aede; --leaf:#4f8a45; /* groen accent (logo/planten) */ --leaf-br:#6fae5c; --gold:#d4a93f; /* goud - truck-embleem */ --gold-soft:#e6c878; --cream:#f7f4fa; /* achtergrond (licht lavendel-wit) */ --linen:#efe9f5; --sand:#e8def2; --white:#ffffff; --muted:#766b85; --fh:"Cormorant Garamond",Georgia,"Times New Roman",serif; --fb:"Jost","Segoe UI",system-ui,sans-serif; --ease:cubic-bezier(.16,1,.3,1); } html{scroll-behavior:auto} body{background:var(--cream);color:var(--ink);font-family:var(--fb);font-weight:300;line-height:1.7;overflow-x:hidden} body.custom-cursor,body.custom-cursor *{cursor:none!important} img{display:block;max-width:100%} a{color:inherit} /* ── LOADER ── */ #loader{position:fixed;inset:0;z-index:9000;background:var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;transition:opacity .8s var(--ease),visibility .8s} #loader.done{opacity:0;visibility:hidden} #loader img{height:74px;width:auto;animation:pulse-logo 1.5s ease infinite} @keyframes pulse-logo{0%,100%{opacity:.4;transform:scale(.95)}50%{opacity:1;transform:scale(1)}} #loader-bar{width:170px;height:1px;background:rgba(255,255,255,.12);position:relative;overflow:hidden} #loader-bar::after{content:"";position:absolute;left:-100%;top:0;height:100%;width:100%;background:var(--gold);animation:load-sweep 1.5s var(--ease) forwards} @keyframes load-sweep{to{left:0}} #loader-text{font-size:.5rem;letter-spacing:.6em;text-transform:uppercase;color:rgba(255,255,255,.4)} /* ── GRAIN ── */ body::before{content:"";position:fixed;inset:0;z-index:8999;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); opacity:.4;mix-blend-mode:multiply} /* ── PROGRESS ── */ #prog{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--violet),var(--gold));z-index:8000;width:0;transition:width .08s linear} /* ── CURSOR ── */ #cur,#cur-ring{opacity:0} body.custom-cursor #cur,body.custom-cursor #cur-ring{opacity:1} #cur{position:fixed;width:6px;height:6px;background:var(--violet-br);border-radius:50%;pointer-events:none;z-index:10001;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s,opacity .3s} #cur-ring{position:fixed;width:30px;height:30px;border:1px solid rgba(212,169,63,.55);border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s} body.h #cur{width:3px;height:3px;background:var(--gold)} body.h #cur-ring{width:46px;height:46px;border-color:rgba(125,73,173,.8)} ::-webkit-scrollbar{width:3px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--violet)} /* ════ NAV ════ */ nav{position:fixed;top:0;left:0;right:0;z-index:600;display:flex;align-items:center;justify-content:space-between;padding:1.15rem 4rem;transition:background .5s,border-color .5s,padding .5s} nav.scrolled{background:rgba(247,244,250,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(93,43,134,.16);padding-top:.85rem;padding-bottom:.85rem} .nav-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none} .nb-img{height:40px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))} .nb-txt{display:flex;flex-direction:column;line-height:1.05} .nb-name{font-family:var(--fh);font-size:1.3rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:#fff;transition:color .5s} .nb-sub{font-size:.42rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:3px;transition:color .5s} nav.scrolled .nb-name{color:var(--violet)} nav.scrolled .nb-sub{color:var(--muted)} .nav-links{display:flex;gap:2.4rem;list-style:none} .nav-links a{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);text-decoration:none;position:relative;transition:color .3s} .nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease)} .nav-links a:hover{color:#fff} .nav-links a:hover::after{width:100%} nav.scrolled .nav-links a{color:rgba(36,24,48,.66)} nav.scrolled .nav-links a:hover{color:var(--violet)} .nav-cta{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.5);padding:.5rem 1.3rem;position:relative;overflow:hidden;transition:border-color .3s,color .3s} .nav-cta::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-102%);transition:transform .35s var(--ease)} .nav-cta span{position:relative;z-index:1;transition:color .3s} .nav-cta:hover{border-color:var(--gold)} .nav-cta:hover::before{transform:none} .nav-cta:hover span{color:var(--deep)} nav.scrolled .nav-cta{color:var(--violet);border-color:rgba(93,43,134,.4)} nav.scrolled .nav-cta:hover span{color:var(--deep)} /* burger (mobiel) */ .nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} /* taalwisselaar */ .nav-right{display:flex;align-items:center;gap:1.1rem} .lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:40px;position:relative;z-index:600; border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);backdrop-filter:blur(4px)} nav.scrolled .lang-switch{border-color:rgba(93,43,134,.3);background:rgba(93,43,134,.06)} .lang-opt{font-family:var(--fb);font-size:.52rem;letter-spacing:.16em;font-weight:600;text-transform:uppercase; color:#fff;background:transparent;border:0;cursor:pointer;line-height:1;padding:.42rem .68rem;border-radius:40px; transition:background .25s,color .25s} nav.scrolled .lang-opt{color:var(--violet)} .lang-opt:hover{color:var(--gold-soft)} nav.scrolled .lang-opt:hover{color:var(--gold)} .lang-opt.active{background:var(--gold);color:var(--deep)} nav.scrolled .lang-opt.active{background:var(--violet);color:#fff} .lang-opt.active:hover{color:var(--deep)} nav.scrolled .lang-opt.active:hover{color:#fff} .nav-burger span{width:24px;height:2px;background:#fff;transition:.3s} .nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-burger.open span:nth-child(2){opacity:0} .nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} nav.scrolled .nav-burger span{background:var(--violet)} /* ════════════════════════════════════════ HERO - Italiaanse zonsondergang (levend) ════════════════════════════════════════ */ .hero{position:relative;height:100vh;min-height:680px;overflow:hidden; background:linear-gradient(to bottom,#3a1e63 0%,#6e3a7e 28%,#b1567a 52%,#e08a5f 74%,#f0b46a 100%)} .hero-sun{position:absolute;top:46%;right:20%;width:300px;height:300px;border-radius:50%; background:radial-gradient(circle,rgba(255,224,160,.95),rgba(255,200,140,.35) 45%,rgba(255,200,140,0) 70%);z-index:1;animation:sun-breathe 9s ease-in-out infinite} @keyframes sun-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.07);opacity:1}} /* hills (parallax) */ .hero-hills{position:absolute;left:0;right:0;bottom:0;z-index:1;height:48%;will-change:transform} .hero-hills svg{width:100%;height:100%} /* plant slides - donkere silhouetten tegen de lucht */ .hero-slides{position:absolute;inset:0;z-index:2} .hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease} .hslide.active{opacity:1} .hslide .plant{position:absolute;right:7vw;bottom:-1vh;height:82vh;max-height:720px;width:auto; filter:brightness(.32) drop-shadow(0 0 30px rgba(58,30,99,.4));transform-origin:bottom center;animation:kenburns 20s var(--ease) infinite alternate} .hslide .plant.alt{right:auto;left:3vw;bottom:-2vh;height:48vh;max-height:400px;filter:brightness(.26);animation-duration:24s;animation-direction:alternate-reverse} @keyframes kenburns{0%{transform:translateY(0) scale(1) rotate(0)}100%{transform:translateY(-16px) scale(1.07) rotate(.4deg)}} /* foreground fronds */ .hero-frond{position:absolute;bottom:-30px;z-index:3;width:250px;opacity:.9;pointer-events:none;transform-origin:bottom center;filter:brightness(.22)} .hero-frond.r{right:-50px;transform:rotate(-4deg);animation:sway 8s ease-in-out infinite} .hero-frond.l{left:-60px;animation:sway-l 7s ease-in-out infinite} @keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} @keyframes sway-l{0%,100%{transform:scaleX(-1) rotate(-5deg)}50%{transform:scaleX(-1) rotate(1deg)}} /* legibility scrim */ .hero-ov{position:absolute;inset:0;z-index:4;pointer-events:none; background:linear-gradient(to bottom,rgba(36,17,65,.55) 0%,rgba(36,17,65,.12) 22%,rgba(36,17,65,.05) 50%,rgba(36,17,65,.5) 80%,rgba(36,17,65,.78) 100%)} /* particles (gloeiende blaadjes/pollen) */ #particles{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden} .particle{position:absolute;top:-30px;border-radius:50%;background:radial-gradient(circle,var(--gold-soft),rgba(212,169,63,0) 70%);opacity:0;animation:leaf-fall linear infinite} @keyframes leaf-fall{ 0%{transform:translateY(-40px) translateX(0);opacity:0} 12%{opacity:.9} 88%{opacity:.5} 100%{transform:translateY(105vh) translateX(70px);opacity:0} } /* hero content */ @keyframes cfadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .hero-content{position:absolute;bottom:0;left:0;z-index:6;padding:0 5rem 8.5rem;max-width:62%;will-change:transform} .hero-badge{display:inline-flex;align-items:center;gap:.55rem;font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;color:#fff;background:rgba(93,43,134,.6);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(4px);padding:.45rem 1rem;margin-bottom:1.4rem;animation:cfadeUp .8s .3s both} .hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(212,169,63,.6);animation:pulse-dot 2s infinite} @keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(212,169,63,.6)}70%{box-shadow:0 0 0 8px rgba(212,169,63,0)}100%{box-shadow:0 0 0 0 rgba(212,169,63,0)}} .hero-tag{font-size:.5rem;letter-spacing:.55em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:1rem;animation:cfadeUp .8s .4s both} .hero-h1{font-family:var(--fh);font-size:clamp(3.2rem,7.5vw,7.5rem);font-weight:300;line-height:.95;letter-spacing:.01em;color:#fff;margin:0 0 1.3rem;animation:cfadeUp 1s .5s both;text-shadow:0 2px 40px rgba(36,17,65,.5)} .hero-em{display:block;font-style:italic;color:var(--gold-soft);font-size:clamp(2.2rem,5vw,4.6rem)} .hero-sub{font-size:.76rem;letter-spacing:.05em;color:rgba(255,255,255,.9);margin:0 0 2.4rem;max-width:470px;line-height:1.95;animation:cfadeUp .9s .75s both} .hero-btns{display:flex;gap:1rem;flex-wrap:wrap;animation:cfadeUp .9s .95s both} .btn-gold,.btn-ghost,.nav-cta,.btn-submit{will-change:transform} .btn-gold{display:inline-block;padding:.95rem 2.6rem;background:var(--gold);color:var(--deep);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;font-weight:600;position:relative;overflow:hidden;transition:transform .25s} .btn-gold::before{content:"";position:absolute;inset:0;background:var(--gold-soft);transform:translateX(-102%);transition:transform .4s var(--ease)} .btn-gold:hover::before{transform:none} .btn-gold span{position:relative;z-index:1} .btn-ghost{display:inline-block;padding:.95rem 2.6rem;border:1px solid rgba(255,255,255,.45);color:#fff;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;transition:border-color .3s,color .3s,background .3s} .btn-ghost:hover{border-color:#fff;color:var(--violet);background:#fff} /* hero categorie-indicatoren */ .hero-bar{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.16);width:212px} .hero-ind{padding:1.35rem 1.7rem;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.09);background:transparent;transition:background .3s;position:relative;overflow:hidden;text-align:left} .hero-ind:hover{background:rgba(255,255,255,.07)} .hero-ind.active{background:rgba(36,17,65,.32)} .hi-num{font-size:.42rem;letter-spacing:.38em;color:rgba(255,255,255,.45);display:block;margin-bottom:.4rem;transition:color .3s} .hero-ind.active .hi-num{color:var(--gold)} .hi-name{font-family:var(--fh);font-size:1.2rem;font-weight:400;color:rgba(255,255,255,.62);letter-spacing:.03em;display:block;transition:color .3s;line-height:1.1} .hero-ind.active .hi-name{color:#fff} .hi-line{position:absolute;left:0;top:0;width:2px;background:var(--gold);height:0} .hero-svc-name{display:block;margin-top:1.5rem;font-family:var(--fh);font-style:italic;font-size:1.05rem;color:var(--gold-soft);letter-spacing:.05em;transition:opacity .35s;max-width:560px;min-height:1.5em} /* scroll cue */ .hero-scroll{position:absolute;bottom:2.4rem;left:5rem;z-index:6;display:flex;align-items:center;gap:1rem;color:rgba(255,255,255,.6);animation:cfadeUp 1s 1.6s both} .hero-scroll span{font-size:.42rem;letter-spacing:.4em;text-transform:uppercase} .scroll-line{width:44px;height:1px;background:linear-gradient(to right,var(--gold),transparent);animation:pulse 2s ease infinite} @keyframes pulse{0%,100%{opacity:.25}55%{opacity:.95}} /* ════ DIAGONALE BAND (huisstijl-motief) ════ */ .diag-top{clip-path:polygon(0 3.5vw,100% 0,100% 100%,0 100%)} .diag-bottom{clip-path:polygon(0 0,100% 0,100% calc(100% - 3.5vw),0 100%)} .diag-both{clip-path:polygon(0 3.5vw,100% 0,100% calc(100% - 3.5vw),0 100%)} /* ════ STATS (donkere diagonale balk) ════ */ .stats{background:var(--deep);display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-top:-3.5vw;padding-top:3vw} .stat{text-align:center;padding:2.4rem 1rem;border-right:1px solid rgba(255,255,255,.06)} .stat:last-child{border-right:none} .stat-n{font-family:var(--fh);font-size:2.7rem;font-weight:400;color:var(--gold);line-height:1;margin-bottom:.4rem} .stat-n .u{font-size:1.3rem;color:var(--lav-soft);margin-left:.1rem} .stat-l{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.45)} /* ════ INTRO ════ */ .lbl{font-size:.52rem;letter-spacing:.46em;text-transform:uppercase;color:var(--violet-br);display:block;margin-bottom:1.1rem} .intro{text-align:center;padding:7.5rem 2rem 6rem;max-width:780px;margin:0 auto;position:relative} .intro h2{font-family:var(--fh);font-size:clamp(2rem,4.4vw,3.4rem);font-weight:400;color:var(--ink);line-height:1.2;margin-bottom:1.4rem} .intro h2 em{font-style:italic;color:var(--violet)} .intro p{font-size:.92rem;color:var(--muted);max-width:560px;margin:0 auto;line-height:2} .intro-line{width:42px;height:1px;background:var(--gold);margin:2.4rem auto 0} /* ════ MARQUEE (auto-scroll botanische namen) ════ */ .marquee{background:var(--violet);overflow:hidden;padding:1.4rem 0;position:relative} .marquee-track{display:flex;gap:3.2rem;width:max-content;animation:scroll-x 40s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-item{display:flex;align-items:center;gap:1.3rem;font-family:var(--fh);font-style:italic;font-size:1.5rem;color:rgba(255,255,255,.78);white-space:nowrap;letter-spacing:.02em} .marquee-item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.85} @keyframes scroll-x{to{transform:translateX(-50%)}} /* ════ CATEGORIE-FILMSTRIP (sleepbaar) ════ */ .svc-film{background:var(--cream);padding:6rem 0 4.5rem;overflow:hidden} .svc-film-head{padding:0 5rem;margin-bottom:2.8rem;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap} .svc-film-h2{font-family:var(--fh);font-size:clamp(2rem,3.8vw,3.2rem);font-weight:400;color:var(--ink);letter-spacing:.02em;line-height:1.1} .svc-film-h2 em{font-style:italic;color:var(--violet)} .svc-film-head p{font-size:.84rem;color:var(--muted);max-width:340px;line-height:1.9} .svc-track{display:flex;overflow-x:auto;scrollbar-width:none;cursor:grab;user-select:none;-webkit-overflow-scrolling:touch;gap:4px;padding:0 5rem} .svc-track:active{cursor:grabbing} .svc-track::-webkit-scrollbar{display:none} .svc-fc{position:relative;min-width:330px;height:520px;overflow:hidden;flex-shrink:0;display:block;text-decoration:none} .svc-fc .plate{position:absolute;inset:0} .svc-fc-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(36,17,65,.92) 0%,rgba(36,17,65,.25) 48%,transparent 100%);z-index:2} .svc-fc-body{position:absolute;bottom:0;left:0;right:0;padding:2.2rem 2.3rem;z-index:3} .sc-num{font-size:.46rem;letter-spacing:.4em;color:var(--gold-soft);display:block;margin-bottom:.55rem} .svc-fc h3{font-family:var(--fh);font-size:2.3rem;font-weight:400;color:#fff;letter-spacing:.02em;margin-bottom:.3rem;line-height:1} .svc-fc h3 em{font-style:italic;color:var(--gold-soft);display:block;font-size:1.3rem;letter-spacing:.03em} .sc-desc{font-size:.72rem;color:rgba(255,255,255,.66);letter-spacing:.03em;margin-top:.6rem;display:block;line-height:1.8;max-height:0;opacity:0;overflow:hidden;transition:all .45s var(--ease)} .svc-fc:hover .sc-desc{max-height:120px;opacity:1} .sc-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:0;transform:translateY(6px);transition:all .4s .06s;padding-bottom:2px;border-bottom:1px solid rgba(212,169,63,.4)} .svc-fc:hover .sc-cta{opacity:1;transform:none} .svc-fc::after{content:"";position:absolute;inset:0;border:1px solid rgba(212,169,63,0);transition:border-color .4s;pointer-events:none;z-index:4} .svc-fc:hover::after{border-color:rgba(212,169,63,.35)} .svc-film-foot{padding:1rem 5rem 0;display:flex;align-items:center;justify-content:space-between} .svc-prog{display:flex;gap:6px;align-items:center} .sp-bar{height:2px;width:34px;background:rgba(93,43,134,.2);transition:background .3s} .sp-bar.active{background:var(--violet)} .svc-drag{font-size:.42rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(36,24,48,.3)} /* ════ PLATE (botanische "foto"-tegel: paars + groene plant) ════ */ .plate{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--deep),var(--violet))} .plate::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(230,200,120,.22),transparent 55%);z-index:1} .plate img{position:absolute;bottom:-2%;left:50%;height:96%;width:auto;transform:translateX(-50%);z-index:1; transition:transform 1.4s var(--ease),filter .6s;animation:kenburns 22s var(--ease) infinite alternate;transform-origin:bottom center} .plate.kb-slow img{animation-duration:30s} .plate--violet{background:linear-gradient(150deg,#241141,var(--violet))} .plate--plum{background:linear-gradient(150deg,#1c0d33,var(--plum))} .plate--lav{background:linear-gradient(150deg,var(--violet),var(--lav))} .plate--mid{background:linear-gradient(150deg,var(--violet-br),#9a5fb0)} .plate--gold{background:linear-gradient(150deg,#5d2b86,#a87a3a)} .plate-cap{position:absolute;left:1.2rem;bottom:1rem;z-index:3;font-size:.46rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.75)} /* ════ IMPORT / EXPORT - route Italië ⇄ Nederland ════ */ .route{background:var(--linen);padding:8.5rem 4.5rem 7.5rem;position:relative;overflow:hidden;margin-top:-3.5vw} .route::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:url("img/greenhouse.svg") center bottom/cover no-repeat;opacity:.07;pointer-events:none;z-index:0} .route-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1} .route-head{text-align:center;margin-bottom:4.5rem} .route-head h2{font-family:var(--fh);font-size:clamp(2rem,4vw,3.3rem);font-weight:400;color:var(--ink);line-height:1.15} .route-head h2 em{font-style:italic;color:var(--violet)} .route-map{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem} .route-line{position:absolute;top:34px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--violet) 0 10px,transparent 10px 20px);z-index:0;opacity:.45} .route-line::after{content:"";position:absolute;top:-4px;left:0;width:18px;height:10px;background:var(--gold);border-radius:2px;box-shadow:0 0 10px rgba(212,169,63,.6);animation:truck 6s linear infinite} @keyframes truck{0%{left:0}100%{left:calc(100% - 18px)}} .route-step{position:relative;z-index:1;text-align:center;padding:0 .6rem} .route-dot{width:70px;height:70px;margin:0 auto 1.3rem;border-radius:50%;background:var(--cream);border:1px solid rgba(93,43,134,.3);display:flex;align-items:center;justify-content:center;transition:transform .4s,border-color .4s} .route-step:hover .route-dot{transform:translateY(-6px);border-color:var(--violet)} .route-dot svg{width:28px;height:28px;stroke:var(--violet);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} .route-step h3{font-family:var(--fh);font-size:1.35rem;font-weight:400;color:var(--ink);margin-bottom:.4rem} .route-step p{font-size:.74rem;color:var(--muted);line-height:1.85} .route-flags{text-align:center;margin-top:3.5rem;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)} .route-flags b{color:var(--violet);font-weight:500} /* ════ EDITORIAL SECTIES ════ */ .ed-section{display:grid;grid-template-columns:54% 46%;min-height:84vh;overflow:hidden} .ed-section.ed-rev{grid-template-columns:46% 54%} .ed-section.ed-rev .ed-img-side{order:2} .ed-img-side{position:relative;overflow:hidden;background:var(--violet)} .ed-img-side .plate{position:absolute;inset:0} .ed-img-side .plate img{height:90%;animation-duration:26s} .ed-img-label{position:absolute;top:2.6rem;left:2.6rem;z-index:3;font-size:.46rem;letter-spacing:.5em;text-transform:uppercase;color:rgba(255,255,255,.6);writing-mode:vertical-rl;transform:rotate(180deg)} .ed-text-side{display:flex;flex-direction:column;justify-content:center;padding:6rem 5rem;background:var(--cream)} .ed-section.ed-alt .ed-text-side{background:var(--linen)} .ed-h2{font-family:var(--fh);font-size:clamp(2.2rem,3.8vw,3.6rem);font-weight:400;color:var(--ink);line-height:1.06;margin-bottom:1rem} .ed-h2 em{display:block;font-style:italic;color:var(--violet)} .ed-rule{width:34px;height:1px;background:var(--gold);margin:1.3rem 0} .ed-text-side p{font-size:.88rem;color:var(--muted);line-height:2.05;margin-bottom:1.4rem;max-width:520px} .ed-list{list-style:none;margin:.4rem 0 1.6rem} .ed-list li{position:relative;padding-left:1.6rem;font-size:.86rem;color:var(--ink);opacity:.82;margin-bottom:.75rem;line-height:1.6} .ed-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--leaf);border-radius:50%} .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 2rem} .tag{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(93,43,134,.3);color:var(--violet);padding:.36rem .9rem;transition:border-color .3s,color .3s,background .3s} .tag:hover{border-color:var(--violet);background:var(--violet);color:#fff} .ed-quote{font-family:var(--fh);font-size:clamp(1.4rem,2.6vw,2rem);font-style:italic;color:rgba(93,43,134,.5);margin-top:2.2rem;line-height:1.4;border-top:1px solid rgba(212,169,63,.3);padding-top:1.7rem} /* ════ VOOR WIE - donker grid ════ */ .why{background:var(--deep);padding:8.5rem 0 7.5rem;overflow:hidden;position:relative;margin-top:-3.5vw} .why::before{content:"";position:absolute;inset:0;background-image:url("img/pattern.svg");background-size:150px;opacity:.06} .why-inner{max-width:1200px;margin:0 auto;padding:0 4.5rem;position:relative} .why-head{text-align:center;margin-bottom:4.5rem} .why-head .lbl{color:var(--gold);opacity:.9} .why-head h2{font-family:var(--fh);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:300;color:#fff;line-height:1.15} .why-head h2 em{font-style:italic;color:var(--lav-soft)} .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07)} /* vacature-grid (admin-gestuurd) */ #vac-grid{grid-template-columns:repeat(2,1fr)} .vac-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin:.1rem 0 .2rem} .vac-pill{font-family:var(--fb);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);border:1px solid rgba(230,200,120,.35);border-radius:40px;padding:.25rem .6rem} .why-card p.vac-body{white-space:pre-line} .why-card{padding:3rem 2.2rem;background:var(--deep);position:relative;overflow:hidden;transition:background .4s} .why-card:hover{background:rgba(255,255,255,.03)} .why-card::before{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,var(--violet-br),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .why-card:hover::before{transform:scaleX(1)} .why-num{font-family:var(--fh);font-size:3.4rem;font-weight:300;color:rgba(212,169,63,.14);line-height:1;margin-bottom:.4rem} .why-icon{width:30px;height:30px;stroke:var(--gold);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:1.1rem} .why-card h3{font-family:var(--fh);font-size:1.5rem;font-weight:400;color:#fff;margin-bottom:.6rem;letter-spacing:.02em} .why-card p{font-size:.78rem;color:rgba(255,255,255,.46);line-height:2} /* ════ GALERIJ (sleepbaar) ════ */ .gal-head{text-align:center;padding:6.5rem 2rem 3rem;background:var(--sand)} .gal-head h2{font-family:var(--fh);font-size:clamp(2rem,3.6vw,3rem);font-weight:400;color:var(--ink)} .gal-head h2 em{font-style:italic;color:var(--violet)} .hgwrap{overflow:hidden;position:relative;background:var(--sand);padding-bottom:5rem} .hgwrap::before,.hgwrap::after{content:"";position:absolute;top:0;bottom:5rem;width:90px;z-index:10;pointer-events:none} .hgwrap::before{left:0;background:linear-gradient(to right,var(--sand),transparent)} .hgwrap::after{right:0;background:linear-gradient(to left,var(--sand),transparent)} .hgallery{display:flex;gap:6px;padding:0 4.5rem;overflow-x:auto;scrollbar-width:none;cursor:grab;user-select:none;-webkit-overflow-scrolling:touch} .hgallery:active{cursor:grabbing} .hgallery::-webkit-scrollbar{display:none} .hgallery .plate{height:320px;width:260px;flex-shrink:0;opacity:0;transition:opacity .6s ease} .hgallery.gallery-visible .plate{opacity:1} .hgallery .plate:nth-child(1){transition-delay:.05s}.hgallery .plate:nth-child(2){transition-delay:.1s} .hgallery .plate:nth-child(3){transition-delay:.15s}.hgallery .plate:nth-child(4){transition-delay:.2s} .hgallery .plate:nth-child(5){transition-delay:.25s}.hgallery .plate:nth-child(6){transition-delay:.3s} .hgallery .plate:nth-child(7){transition-delay:.35s}.hgallery .plate:nth-child(8){transition-delay:.4s} /* ════ CTA band (voorraadlijst) ════ */ .cta-band{position:relative;background:linear-gradient(135deg,var(--violet),var(--plum));padding:7.5rem 4.5rem;overflow:hidden;text-align:center;margin-top:-3.5vw} .cta-band .frond{position:absolute;width:300px;opacity:.14;pointer-events:none} .cta-band .frond.a{left:-40px;top:-20px;transform:rotate(18deg)} .cta-band .frond.b{right:-40px;bottom:-70px;transform:scaleX(-1) rotate(18deg)} .cta-inner{position:relative;z-index:2;max-width:700px;margin:0 auto} .cta-inner h2{font-family:var(--fh);font-size:clamp(2rem,4vw,3.2rem);font-weight:300;color:#fff;line-height:1.15;margin-bottom:1rem} .cta-inner h2 em{font-style:italic;color:var(--gold-soft)} .cta-inner p{font-size:.88rem;color:rgba(255,255,255,.72);line-height:1.95;margin-bottom:2.2rem;max-width:500px;margin-inline:auto} /* ════ CONTACT ════ */ .contact{background:var(--linen);padding:7.5rem 4.5rem} .contact-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1.25fr;gap:5.5rem;align-items:start} .ci h2{font-family:var(--fh);font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:400;color:var(--ink);line-height:1.18;margin-bottom:1rem} .ci h2 em{font-style:italic;color:var(--violet)} .ci>p{font-size:.86rem;color:var(--muted);line-height:2;margin-bottom:2rem;max-width:400px} .cdet{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:2rem} .cdr{display:flex;align-items:flex-start;gap:.9rem;font-size:.84rem;color:var(--ink);opacity:.85} .cdr a{color:inherit;text-decoration:none;transition:color .2s,opacity .2s} .cdr a:hover{color:var(--violet);opacity:1} .cdr .nm{font-weight:500;color:var(--ink)} .cdi{flex-shrink:0;margin-top:2px} .cdi svg{width:17px;height:17px;stroke:var(--violet);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round} .chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);background:rgba(212,169,63,.12);border:1px solid rgba(212,169,63,.4);padding:.45rem .9rem;margin-top:.4rem} .cform{display:flex;flex-direction:column;gap:1.1rem;background:var(--white);padding:2.6rem;border:1px solid rgba(93,43,134,.12);box-shadow:0 30px 70px rgba(36,17,65,.07)} .cform h3{font-family:var(--fh);font-size:1.5rem;font-weight:400;color:var(--violet);margin-bottom:.2rem} .cform .sub{font-size:.74rem;color:var(--muted);margin-bottom:.6rem} .frow{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .fg{display:flex;flex-direction:column;gap:.4rem} .fg label{font-size:.52rem;letter-spacing:.26em;text-transform:uppercase;color:var(--violet);opacity:.85} .fg input,.fg textarea,.fg select{background:var(--cream);border:none;border-bottom:1px solid rgba(93,43,134,.25);color:var(--ink);font-family:var(--fb);font-size:.86rem;font-weight:300;padding:.8rem .6rem;outline:none;resize:none;transition:border-color .3s;-webkit-appearance:none;border-radius:0} .fg input:focus,.fg textarea:focus,.fg select:focus{border-bottom-color:var(--violet)} .fg input::placeholder,.fg textarea::placeholder{color:rgba(0,0,0,.28)} .fcheck{display:flex;flex-wrap:wrap;gap:1rem;font-size:.72rem;color:var(--muted)} .fcheck label{display:flex;align-items:center;gap:.4rem;cursor:pointer} .fcheck input{accent-color:var(--violet);width:15px;height:15px} .btn-submit{align-self:flex-start;padding:.95rem 2.6rem;background:var(--violet);color:#fff;font-family:var(--fb);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;border:none;cursor:pointer;position:relative;overflow:hidden} .btn-submit::before{content:"";position:absolute;inset:0;background:var(--deep);transform:translateX(-102%);transition:transform .4s var(--ease)} .btn-submit:hover::before{transform:none} .btn-submit span{position:relative;z-index:1} .form-note{font-size:.62rem;color:var(--muted)} .form-ok{display:none;font-size:.8rem;color:var(--leaf);padding:.6rem 0;font-weight:400} /* sollicitatie-popup */ .apply-btn{background:none;border:0;cursor:pointer;font:inherit;padding:0;display:inline-flex;align-items:center;gap:.4rem} .modal{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;padding:1.2rem} .modal.open{display:flex} .modal-overlay{position:absolute;inset:0;background:rgba(36,17,65,.6);backdrop-filter:blur(3px)} .modal-box{position:relative;z-index:1;width:100%;max-width:470px;max-height:90vh;overflow:auto; background:var(--cream);border:1px solid rgba(93,43,134,.14);border-radius:16px;padding:2.2rem 1.9rem; box-shadow:0 30px 80px rgba(36,17,65,.4)} .modal-box .lbl{margin-bottom:.2rem} .modal-box h3{font-family:var(--fh);font-weight:400;font-size:1.55rem;color:var(--violet);margin:.1rem 0 1.1rem;line-height:1.15} .modal-x{position:absolute;top:.6rem;right:.9rem;background:none;border:0;font-size:1.7rem;line-height:1;color:var(--muted);cursor:pointer;padding:.2rem .4rem} .modal-x:hover{color:var(--violet)} .mform{display:flex;flex-direction:column;gap:1rem} .file-field input[type=file]{font-family:var(--fb);font-size:.78rem;color:var(--ink);background:var(--cream); border:1px dashed rgba(93,43,134,.32);border-radius:9px;padding:.55rem .6rem;cursor:pointer;width:100%} .file-field input[type=file]::file-selector-button{font-family:var(--fb);font-size:.6rem;letter-spacing:.16em; text-transform:uppercase;font-weight:600;border:0;background:var(--violet);color:#fff;padding:.5rem .85rem; border-radius:6px;margin-right:.8rem;cursor:pointer;transition:background .2s} .file-field input[type=file]::file-selector-button:hover{background:var(--deep)} .file-hint{font-size:.6rem;color:var(--muted);margin-top:-.3rem} @media(max-width:560px){ .modal-box{padding:1.8rem 1.3rem} } /* ════ FOOTER ════ */ footer{background:var(--deep);padding:4.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem} .fl{font-size:.66rem;color:rgba(255,255,255,.45);line-height:2.1} .fl a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s} .fl a:hover{color:var(--gold)} .fc{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.7rem} .fc img{height:56px;width:auto} .fc-name{font-family:var(--fh);font-size:1.2rem;font-weight:400;letter-spacing:.36em;color:var(--gold);text-transform:uppercase} .fc-tag{font-size:.44rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.35)} .fr{text-align:right;font-size:.66rem;color:rgba(255,255,255,.45);line-height:2.1} .fr a{color:inherit;text-decoration:none;transition:color .2s} .fr a:hover{color:var(--gold)} .footer-legal{background:var(--deep);padding:1.4rem 4.5rem;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap} .footer-legal a,.footer-legal span{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.32);text-decoration:none;transition:color .2s} .footer-legal a:hover{color:var(--gold)} /* ════ REVEAL / SPLIT ════ */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease),transform .95s var(--ease)} .reveal.visible{opacity:1;transform:none} .reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .95s var(--ease),transform .95s var(--ease)} .reveal-left.visible{opacity:1;transform:none} .reveal-right{opacity:0;transform:translateX(30px);transition:opacity .95s var(--ease),transform .95s var(--ease)} .reveal-right.visible{opacity:1;transform:none} .d1{transition-delay:.1s}.d2{transition-delay:.22s}.d3{transition-delay:.34s}.d4{transition-delay:.46s}.d5{transition-delay:.58s}.d6{transition-delay:.7s} .split-word{display:inline-block;overflow:hidden;vertical-align:bottom} .split-word .w-inner{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .85s var(--ease),opacity .85s var(--ease)} .split-word.visible .w-inner{transform:translateY(0);opacity:1} .split-word:nth-child(1) .w-inner{transition-delay:0s}.split-word:nth-child(2) .w-inner{transition-delay:.08s} .split-word:nth-child(3) .w-inner{transition-delay:.16s}.split-word:nth-child(4) .w-inner{transition-delay:.24s} .split-word:nth-child(5) .w-inner{transition-delay:.32s}.split-word:nth-child(6) .w-inner{transition-delay:.4s} .split-word:nth-child(7) .w-inner{transition-delay:.48s}.split-word:nth-child(8) .w-inner{transition-delay:.56s} /* ════ SECTION DOTS ════ */ #section-dots{position:fixed;right:1.6rem;top:50%;transform:translateY(-50%);z-index:700;display:flex;flex-direction:column;gap:.75rem} .sdot{width:7px;height:7px;border-radius:50%;border:1px solid rgba(93,43,134,.6);background:transparent;cursor:pointer;transition:background .35s,transform .35s,border-color .35s;position:relative} .sdot.active{background:var(--violet);border-color:var(--violet);transform:scale(1.5)} .sdot:hover{border-color:var(--violet);transform:scale(1.3)} .sdot-label{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:.44rem;letter-spacing:.2em;text-transform:uppercase;color:var(--violet);white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none;background:var(--cream);padding:2px 6px} .sdot:hover .sdot-label{opacity:1} /* ════ PAGE EXIT ════ */ #page-exit{position:fixed;inset:0;background:var(--deep);z-index:9500;opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease} #page-exit.active{opacity:1;pointer-events:all} #page-exit img{height:64px;width:auto;animation:pulse-logo 1.2s ease infinite} /* ════ RESPONSIVE ════ */ @media(max-width:1024px){ nav{padding:1rem 1.4rem} .nav-links{position:fixed;inset:0;background:rgba(36,17,65,.98);flex-direction:column;justify-content:center;align-items:center;gap:1.8rem;transform:translateX(100%);transition:transform .5s var(--ease);z-index:590} .nav-links.open{transform:none} .nav-links a{font-size:.9rem;color:#fff} .nav-burger{display:flex;z-index:600} .nav-cta{display:none} .nav-right{gap:.8rem} .hero-content{max-width:100%;padding:0 1.6rem 7rem} .hero-bar{display:none} .hero-svc-name,.hero-scroll{left:1.6rem} .hslide .plant{right:-8vw;height:58vh;opacity:.85} .hslide .plant.alt{display:none} .stats{grid-template-columns:repeat(2,1fr);margin-top:-6vw;padding-top:6vw} .stat{border-bottom:1px solid rgba(255,255,255,.06)} .svc-film-head,.svc-track,.svc-film-foot{padding-left:1.6rem;padding-right:1.6rem} .route{padding:6vw 1.6rem 4rem} .route-map{grid-template-columns:1fr 1fr;gap:2.5rem 1rem} .route-line{display:none} .ed-section,.ed-section.ed-rev{grid-template-columns:1fr;min-height:auto} .ed-section.ed-rev .ed-img-side{order:0} .ed-img-side{height:62vw;max-height:440px} .ed-text-side{padding:3.5rem 1.6rem} .why{padding:8vw 0 4rem} .why-inner{padding:0 1.6rem} .why-grid{grid-template-columns:1fr} #vac-grid{grid-template-columns:1fr} .hgallery{padding:0 1.6rem} .hgwrap::before,.hgwrap::after{width:40px} .cta-band{padding:8vw 1.6rem 4rem} .contact{padding:5rem 1.6rem} .contact-inner{grid-template-columns:1fr;gap:3rem} .cform{padding:2rem 1.4rem} footer{grid-template-columns:1fr;text-align:center;padding:3.5rem 1.6rem} .fr{text-align:center} .diag-top,.diag-bottom,.diag-both{clip-path:none} .stats,.route,.why,.cta-band{margin-top:0} body{cursor:auto} #cur,#cur-ring,#section-dots{display:none} } /* ── Rustiger hero op telefoons ── In de SVG-versie (geen video) vielen de voorgrond-varens en het grote cipres-silhouet over de knoppen heen: te druk. Op telefoons laten we die weg; de gradient, de zon-gloed en de subtiele heuvels (met al kleine cipresjes erin) blijven, met tekst en knoppen duidelijk centraal. */ @media(max-width:768px){ .hero-frond{display:none} .hslide .plant{display:none} .hero-sun{opacity:.85} .hero-content{padding-bottom:5.5rem} .hero-svc-name{display:none} } @media(max-width:560px){ .frow{grid-template-columns:1fr} .hero-h1{font-size:clamp(2.8rem,12vw,4.2rem)} .marquee-item{font-size:1.2rem} .stats{grid-template-columns:1fr 1fr} .lang-opt{padding:.4rem .55rem;font-size:.5rem} .nav-right{gap:.6rem} } /* ════ REDUCED MOTION ════ */ @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.2s!important} .marquee-track{animation:none} #particles{display:none} .plate img{animation:none;transform:translateX(-50%)} .hslide .plant{animation:none} } /* ════════════════════════════════════════════════════════════ ECHTE MEDIA - hero-video + foto-upgrade voor plates Toegevoegd: alles degradeert netjes. Geen bestand = SVG blijft. ════════════════════════════════════════════════════════════ */ /* ── Hero per-categorie video-slides ── Elke .hslide heeft een eigen