:root{ --ink:#1E293B; --mid:#6E7F79; --line:#D9E0DD; --bg:#F3F6F5; --acc:#141414; --gold:#FFFFFF; --warn:#A32D2D; /* Woonklasse accentkleur (Planner 5D): een groen, actieve staat, rest blijft neutraal. Vroeger waren de actieve vlakken donker (--ink) met wit; die kleuren nu groen. */ --wk:#2F7D4F; --wk-ink:#25603D; --wk-soft:rgba(47,125,79,.12); --wk-line:rgba(47,125,79,.30); /* Het groen van de kaartillustraties, en het vlak waarop ze liggen. Ze horen bij de TEKENINGEN en niet bij de knoppen, dus ze staan los van --wk: wie de actieve kleur van de app bijstelt, hoort de goedgekeurde set niet mee te verkleuren. Ze staan hier omdat het anders vier keer hetzelfde hexgetal wordt, verspreid over vier tekeningen in planner/paneel.js. */ --kaartgroen:#2E7D52; --kaartvlak:#DFE4E8; --panelw:330px; /* De band linksboven waar de pil "Verder" in staat: zijn 40 px hoogte plus 10 px lucht. Alles wat in die hoek begon (de stappenbalk, de werkbladen, de compacte catalogus, het uitlegkaartje) begint een band lager, zodat de pil vrij staat. Hij staat op EEN plek zodat die zes dingen niet uit elkaar kunnen lopen. */ --pilband:50px; /* ================= HET STELSEL ================= Hoeveel verschillende maten gebruikte de app werkelijk, geteld op 19 september met review/schermen/meet-stelsel.mjs over dit bestand en planner/overzicht.css: lettergrootte 27 verschillende waarden, 293 keer gebruikt afstand 41 verschillende waarden, 1282 keer gebruikt hoekronding 22 verschillende waarden, 229 keer gebruikt schaduw 45 verschillende vormen voor 88 plekken kleur 152 verschillende hexwaarden Tussen 9,5 en 15,5 px lagen dertien lettergroottes, waarvan zeven halve stappen. Tussen 1 en 18 px lag zo goed als elke hele afstand. Dat is geen ontwerp, dat is wat er onderweg is ontstaan. Hieronder staan de ladders waar alles nu op ligt. EEN plek: wie hier een waarde bijstelt stelt hem overal bij, en een nieuw scherm erft hem vanzelf. Wat er na deze ronde nog over is en waarom, staat onder AFSTAND. */ /* ---- de letterladder ---- Acht treden voor de app, drie voor de landingsplaat. Elke oude waarde is op de dichtstbijzijnde trede gezet, nooit verder dan 2 px. */ --tekst-xs:10px; /* opschrift in kapitalen, telbolletje */ --tekst-s:11px; /* bijschrift, hulptekst, pil */ --tekst-m:12px; /* de werkmaat: de waarde in een rij, een knoplabel */ --tekst-l:13px; /* leestekst in een paneel, de naam op een kaart */ --tekst-xl:14px; /* de romp van de pagina, een invoerveld */ --tekst-2xl:15px; /* kop van een kaart */ --tekst-3xl:17px; /* kop van een venster of paneel */ --tekst-4xl:21px; /* paginakop */ /* ---- de hoekronding ---- Vier treden plus de pil en de cirkel. Was 22 waarden; 2, 3 en 5 px zijn op 4 gezet, 6 tot en met 10 op 8, 11 tot en met 14 op 12, 16 tot en met 20 op 18, en 99px en 999px zeiden allebei "pil". */ --rond-s:4px; /* staal, pictogramknop, de papierstijl */ --rond-m:8px; /* rij, knop, invoerveld */ --rond-l:12px; /* kaart, paneel */ --rond-xl:18px; /* venster */ --rond-vol:999px; /* pil */ /* ---- de schaduw ---- De app heeft TWEE families en dat is met opzet: de planner draagt zachte hoogteschaduwen, de vensters en de poort de harde slagschaduw van de papierstijl. Vier hoogtes en drie slagen, in plaats van 45 losse vormen. Vier en niet drie, want met drie krijgt een zwevend chipje dezelfde schaduw als een venster. */ --schaduw-1:0 1px 3px rgba(30,41,59,.10); /* rand van een kaart */ --schaduw-2:0 2px 10px rgba(30,41,59,.10); /* iets dat zweeft */ --schaduw-3:0 8px 30px rgba(30,41,59,.13),0 1px 3px rgba(30,41,59,.07); /* een paneel */ --schaduw-4:0 18px 44px rgba(30,41,59,.16),0 2px 6px rgba(30,41,59,.06); /* een venster */ --papier-1:2px 2px 2px rgba(0,0,0,.15); --papier-2:3px 3px 2px rgba(0,0,0,.20); --papier-3:6px 6px 0 rgba(0,0,0,.16); /* ---- AFSTAND: de ladder ligt er, de migratie nog niet ---- Dit is de ladder waar nieuw werk op hoort. Hij is NOG NIET over de bestaande opmaak heen gehaald, en daar is een reden voor: afstand zit op 1282 plekken en elke wijziging verschuift de opmaak. Hoekronding en schaduw kunnen zonder risico, want daar beweegt niets van; afstand hoort in een eigen ronde met een eigen volle proef ernaast. Wie hier iets nieuws bouwt: pak een trede, verzin geen tussenmaat. */ --ruimte-1:2px; --ruimte-2:4px; --ruimte-3:6px; --ruimte-4:8px; --ruimte-5:12px; --ruimte-6:16px; --ruimte-7:24px; /* ---- de hoofdknop in een venster: ORANJE, en dat is beslist ---- Beslist op 19 september, op beeld. De platen met allebei de standen naast elkaar staan in review/schermen/knopkleur.html. De kleurregel van dit stelsel is: oranje wijst de VOORWAARTSE zet aan en verder niets. Dat geldt op een SCHERM, waar knoppen met elkaar concurreren: daar is alleen de pil Verder oranje en is de gewone hoofdknop de donkere inkt (.tb.dark bovenin dit bestand). In een venster geldt die redenering niet. Een venster is modaal, er staat maar EEN hoofdknop in beeld, en er is dus niets om mee te concurreren. Daar is oranje gewoon de kleur die de hoofdhandeling aanwijst. Dat het zo hoort staat ook twee keer vastgelegd, en dat is het argument dat de doorslag gaf: uitest-papierstijl en uitest-opslag meten samen ACHT keer dat deze knop oranje is, op 1600 en op 390 px. Die kleur stond daar niet toevallig. Zet je hem om, dan gaan die acht metingen rood, en dat is de bedoeling: ze bewaken een afspraak. Eén plek, dus omzetten blijft één regel. */ --vensterknop:#EC633D; --vensterknop-hover:#E05428; } *{box-sizing:border-box} html,body{margin:0;height:100%} body{ font:14px/1.45 -apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink); background:var(--bg);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden; } button{font:inherit;cursor:pointer} /* ---------- top bar ---------- drie delen: merk links, de 2D/3D-schakelaar exact in het midden, rechts de losse pictogrammen in drie groepjes (bewerken, vastleggen, instellingen). De stappen staan niet meer in de balk: die zitten in de rail links in het beeld (#rail). */ #top{ position:relative;flex:0 0 54px;display:flex;align-items:center;gap:12px;padding:0 14px; background:#fff;border-bottom:1px solid var(--line); } #top .brand{font-weight:700;letter-spacing:.3px} #top .brand span{color:var(--mid);font-weight:400} #top .grow{flex:1} #modes{flex:0 0 auto} /* ---------- de rail ---------- Links in het beeld, 16 px van de rand, een zwevende witte kaart met vijf iconen van 44 px. De actieve stap staat groen op lichtgroen, dezelfde actieve staat als de kijkstanden in de onderbalk; een klaar gemelde stap krijgt een groene stip rechtsboven in het icoon. Geen cijfers en geen woorden: het woord staat in de tooltip, na 400 ms, en die ligt over het paneel heen (z-index boven .pop). Waarom dat mag zonder woord erin: de iconen zijn een vorm plus een kenmerk op een raster van 24, en op 44 px met een tooltip lopen ze niet dicht. Zie NAVIGATIE-SPEC.md 1. */ #rail{ position:absolute;left:16px;top:calc(16px + var(--pilband));z-index:33;display:flex;flex-direction:column;gap:2px;padding:5px; background:#fff;border:1px solid rgba(30,41,59,.07);border-radius:var(--rond-xl); box-shadow:var(--schaduw-3); } #rail button{ position:relative;width:44px;height:44px;padding:0;border:0;border-radius:var(--rond-l);background:none; color:var(--mid);display:flex;align-items:center;justify-content:center; } #rail button svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #rail button:hover{color:var(--wk);background:var(--wk-soft)} #rail button.on{background:var(--wk-zacht);color:var(--wk)} #rail button.klaar::after{content:"";position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--wk)} #rail button:focus-visible{outline:2px solid var(--wk);outline-offset:-2px} #rail button:disabled{opacity:.4} #rail .railsplit{height:1px;margin:4px 6px;background:var(--line)} #rail .tip{ position:absolute;left:52px;top:50%;transform:translateY(-50%);z-index:5;pointer-events:none; background:var(--ink);color:#fff;font-size:var(--tekst-m);font-weight:600;padding:5px 9px;border-radius:var(--rond-m);white-space:nowrap; opacity:0;visibility:hidden; } #rail .tip::before{content:"";position:absolute;left:-5px;top:50%;margin-top:-5px;border:5px solid transparent;border-left:0;border-right-color:var(--ink)} /* De tooltip volgt de muis en ECHTE toetsenbordaandacht. Sloot je een paneel met Escape, dan ging de aandacht terug naar de railknop en bleef die :focus-visible; ging je daarna met de muis verder op de tekening, dan verhuisde de aandacht nergens heen (een svg is geen focuselement) en bleef het zwarte labeltje eindeloos hangen, met de muis 1200 px verderop. html.muisbezig zegt: de laatste handeling was met de muis. */ #rail button:hover .tip, html:not(.muisbezig) #rail button:focus-visible .tip{opacity:1;visibility:visible;transition:opacity .12s .4s,visibility 0s .4s} @media (prefers-reduced-motion:no-preference){ #rail button{transition:background .15s,color .15s} } /* de klaar-stip en de tooltip mogen niet over de rand van de kaart lopen */ #rail{overflow:visible} /* de pil LINKSBOVEN in beeld, boven de rail: "Verder", en op de laatste tussenstap van Installatie "Opleveren". Waar hij heen gaat staat er niet in: het volgende tabblad staat donker in het paneel. Een terugknop is er bewust niet: de rail staat altijd in beeld en dat IS de weg terug. Hij stond tot 18 september rechtsonder, naast de loep en de schaalbalk. Sander wees de rail aan en zei: "de verder knop zou eigenlijk helemaal linkboven moeten staan boven deze knoppen". De zet die je vooruit brengt staat nu bovenaan de kolom waar de stappen in staan, in plaats van in de hoek waar de gereedschappen liggen. Hij is BREDER dan de rail (88 px tegen 56, en "Opleveren" 112) en steekt dus naar rechts uit. Dat is met opzet: het woord blijft heel en wordt geen pictogram. Gecentreerd op de rail zou mooier zijn, maar dan komt zijn linkerkant op x=0 te liggen (44 - 44 op een bureau, 32 - 44 op een telefoon, dus zelfs eraf): hij lijnt daarom links uit met de rail en houdt dezelfde marge als die balk zelf. Alles wat in deze hoek begint zakt een --pilband, zodat er niets onder hem verdwijnt. Zie die variabele bovenin. Oranje, niet het donker van de rest van de app: dit is de enige knop in beeld die je VOORUIT brengt, en tussen een schermvol donkergrijze pictogrammen verdween hij. #EC633D is het oude oranje van Woonklasse, door Sander aangewezen, met de tekst er wit op. */ /* #stapnav is de buitenste laag die vroeger #volgende zelf droeg (linksboven, boven de rail; zie alle #volgende-posities hieronder die nu #stapnav heten). De pil verandert zelf niets aan wat hij doet of hoe hij eruitziet, alleen zijn plek verhuist een laag naar buiten. #vorige, 26 september bijgekomen, is de vaste buur links ervan: zelfde hoogte en ronding, in de stille kleuren van .btn.ghost, zodat vooruit de hoofdknop blijft. */ #stapnav{position:absolute;left:16px;top:16px;z-index:8;display:flex;align-items:center;gap:8px} #volgende{ display:none;height:40px; align-items:center;gap:6px;padding:0 16px 0 18px;border:1px solid #EC633D; background:#EC633D;color:#fff;border-radius:var(--rond-m);font-size:var(--tekst-l);font-weight:600; box-shadow:var(--schaduw-2); } /* op een bureau draagt hij een naam, net als de pil ("‹ Vloer"): Sander wil dat de terugknop zegt waar hij heen gaat, niet alleen dat hij teruggaat. Onder de 700 px (dezelfde grens als de rail hieronder) is elke pixel kostbaar en valt .lbl weg; het teken blijft, de naam staat dan nog in de tooltip en de aria-label (vorigeUpdate, planner/vragen.js). */ #vorige{ display:none;height:40px;align-items:center;gap:6px;padding:0 14px 0 12px; border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:var(--rond-m); font-size:var(--tekst-l);font-weight:600;box-shadow:var(--schaduw-2); } #vorige span:first-child{font-size:var(--tekst-3xl);line-height:1} #vorige:disabled{opacity:.4} #vorige:focus-visible{outline:2px solid var(--acc);outline-offset:2px} @media (hover:hover){ #vorige:hover:not(:disabled){background:var(--bg)} } /* ---------- de loep ---------- Drie knoppen in de rechteronderhoek: inzoomen, uitzoomen, passend in beeld. Ze stonden tot 18 september boven de pil Verder; die staat nu linksboven en de loep is in die hoek blijven liggen waar hij lag, want hij hoort bij de schaalbalk eronder en niet bij de stappen. Niet in de kijkstandbalk linksonder: die schuift op een telefoon al zijwaarts en een vierde groep duwt de magneet en de liniaal uit beeld. Geen percentage erbij; de schaalbalk rechtsonder op het blad zegt al in echte maten hoe lang een meter is en verspringt met de zoom mee. */ #loep{ position:absolute;right:16px;bottom:64px;z-index:8; display:flex;flex-direction:column; border:1px solid var(--line);border-radius:var(--rond-m);overflow:hidden;background:#fff; box-shadow:var(--schaduw-2); } #loep button{ display:flex;align-items:center;justify-content:center; width:40px;height:38px;padding:0;border:0;background:#fff;color:var(--mid); } #loep button+button{border-top:1px solid var(--line)} #loep button:disabled{opacity:.4} #loep button:focus-visible{outline:2px solid var(--wk);outline-offset:-2px} #loep.uit{display:none} @media (hover:hover){ #loep button:hover:not(:disabled){background:var(--bg);color:var(--ink)} } /* dezelfde twee uitwijkregels als de pil eronder: opzij voor het productvenster, omhoog voor de kijkstandbalk */ #main:has(#side.open:not(.links)) #loep{right:calc(min(300px,100vw - 28px) + 28px)} #loep.boven{bottom:calc(64px + var(--hudh,50px))} /* ---- in 3D staat de loep hoger ---- Rechtsonder, boven de pil Verder, staat in 3D ook de schaalmeter (#schaal3d hieronder). De loep kwam daar tot 13 september niet, want hij was in 3D verborgen; nu hij daar de camera stuurt staan ze op dezelfde hoek. Gemeten op 1600 x 1000: de onderste knop liep 21 px over de meter heen. Hij gaat er dus boven. Alleen BOVEN 900 px. Daaronder tilt de regel bij de telefoonopmaak verderop (`#loep{bottom:calc(74px + var(--hudh))}`) hem al ruim boven de meter uit, en die regel moet blijven winnen: `body.mode3d #loep` heeft een hogere soortelijkheid en zou hem anders stil omzetten. De .boven-regel staat erbij om dezelfde reden. */ @media (min-width:901px){ body.mode3d #loep{bottom:100px} body.mode3d #loep.boven{bottom:calc(100px + var(--hudh,50px))} } /* ---- de schaalmeter in 3D ---- De plattegrond heeft er al een; het 3D-beeld niet, en daar is de vraag "hoe groot is dit eigenlijk" juist het lastigst te beantwoorden. Een balk in perspectief is nooit overal waar, dus hij is geijkt op EEN afstand (het midden van de ruimte op ooghoogte); dat staat in de tooltip en niet in beeld. Alleen het getal plus de eenheid: "500 mm". Hij staat rechtsonder op een vaste plek, onder de loep. */ #schaal3d{position:absolute;right:16px;bottom:70px;z-index:6;display:none; flex-direction:column;align-items:flex-end;gap:3px;color:var(--mid); font-size:var(--tekst-s);font-weight:600;font-variant-numeric:tabular-nums;text-align:right; text-shadow:0 0 4px #fff,0 0 8px #fff} #schaal3d .s3-balk{height:0;border-top:2px solid var(--ink);position:relative;margin:0 0 0 auto} #schaal3d .s3-balk::before,#schaal3d .s3-balk::after{content:"";position:absolute;top:-4px;width:0;height:6px;border-left:2px solid var(--ink)} #schaal3d .s3-balk::before{left:0} #schaal3d .s3-balk::after{right:0} #schaal3d .s3-tekst b{font-weight:600;color:var(--ink)} #main:has(#side.open:not(.links)) #schaal3d{right:calc(min(300px,100vw - 28px) + 28px)} /* op een smal scherm is elke pixel beeld nodig */ @media (max-width:520px){ #schaal3d{display:none!important} } #volgende span{font-size:var(--tekst-3xl);line-height:1;opacity:.8} #volgende:focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* sluiten is geen "verder": een gouden pil zegt dat dit de zet is die de tekening af maakt, niet de zoveelste stap vooruit */ #volgende.sluit{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600} /* ---------- de startkaart ---------- Het eerste scherm was een leeg raster met een zin erboven: niets om op te drukken en geen antwoord op de vraag waarom je moet tekenen. Nu ligt er een kaart met drie plattegronden op. Ze zijn getekend in de taal van het blad zelf (inktomtrek op de warme ondergrond, gouden maatlijn eronder), dus je kiest een ruimte door naar een ruimte te kijken in plaats van naar een pictogram. Zelf tekenen blijft ernaast staan, een regel lager. */ #start{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9; display:none;width:min(540px,calc(100% - 28px)); background:#fff;border:1px solid var(--line);border-radius:var(--rond-l);padding:22px 22px 16px; box-shadow:var(--schaduw-4);text-align:center; } #start.aan{display:block} #start h2{margin:0 0 4px;font-size:var(--tekst-3xl);font-weight:700;letter-spacing:.1px} #start .sub{margin:0 0 16px;font-size:var(--tekst-m);color:var(--mid)} #start .vormen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} #start .vorm{ display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px; border:1px solid var(--line);border-radius:var(--rond-l);background:#fff;color:var(--ink); } #start .vorm svg{display:block} #start .vorm .nm{font-size:var(--tekst-m);font-weight:600} #start .vorm .mt{font-size:var(--tekst-s);color:var(--mid);font-variant-numeric:tabular-nums} #start .vorm:hover{border-color:var(--acc);background:var(--bg)} #start .vorm:hover .nm{color:var(--acc)} #start .vorm:focus-visible{outline:2px solid var(--acc);outline-offset:2px} #start .zelf{ margin-top:13px;border:0;background:none;color:var(--mid);font-size:var(--tekst-m); padding:7px 10px;border-radius:var(--rond-m);text-decoration:underline;text-underline-offset:3px; } #start .zelf:hover{color:var(--acc)} #start .zelf:focus-visible{outline:2px solid var(--acc);outline-offset:1px} @media (max-width:600px){ #start{padding:18px 12px 12px;top:44%} #start h2{font-size:var(--tekst-2xl)} #start .vormen{gap:7px} #start .vorm{padding:10px 3px 8px;gap:4px} #start .vorm .nm{font-size:var(--tekst-s)} #start .vorm .mt{font-size:var(--tekst-xs)} } .seg{display:flex;border:1px solid var(--line);border-radius:var(--rond-m);overflow:hidden} .seg button{padding:7px 16px;border:0;background:#fff;color:var(--mid);font-size:var(--tekst-l);font-weight:600} .seg button.on{background:var(--ink);color:var(--gold)} .seg button:focus-visible{outline:2px solid var(--acc);outline-offset:-2px} .tb{padding:7px 12px;border:1px solid var(--line);background:#fff;border-radius:var(--rond-m);font-size:var(--tekst-m)} .tb:hover{border-color:var(--acc);color:var(--acc)} .tb.dark{background:var(--ink);color:#fff;border-color:var(--ink)} .tb:focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* een knop die alleen een pictogram draagt, even groot als het actiemenu */ .tb.ic{ display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:33px;padding:0; color:var(--mid);--icon-accent:var(--acc); } .tb.ic.on{background:var(--ink);color:var(--gold);border-color:var(--ink);--icon-accent:var(--gold)} .tb.ic.on:hover{color:var(--gold)} /* de rest van de acties zit achter één knop, zodat de balk leeg blijft */ #acties{position:relative} #more{display:flex;align-items:center;justify-content:center;width:34px;height:33px;padding:0;color:var(--mid)} #moremenu{ position:absolute;right:0;top:calc(100% + 7px);z-index:40;display:none;min-width:172px; background:#fff;border:1px solid var(--line);border-radius:var(--rond-m);padding:5px; box-shadow:var(--schaduw-3); } #moremenu.open{display:block} #moremenu button,#moremenu .shop{ display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none; border-radius:var(--rond-m);font-size:var(--tekst-m);color:var(--ink); } #moremenu .shop{box-sizing:border-box;text-decoration:none} #moremenu button:hover,#moremenu .shop:hover{background:var(--bg);color:var(--acc)} #moremenu button:disabled{opacity:.4;background:none;color:var(--mid)} /* "Opslaan" naast "Openen" laat je denken dat je werk weg is als je niet op Opslaan drukt. Dat is niet zo: de tekening staat na elke wijziging in het kladblok van dit tabblad. Dat één keer zeggen, op de plek waar je het gaat zoeken, scheelt de angst en maakt van Opslaan wat het is: een bestand om mee te nemen. De regel zegt er sinds 22 september bij WAAR het staat, want "opgeslagen" zonder plek werd gelezen als "in mijn account" (zie de toelichting bij de regel zelf in index.html). */ #moremenu .bewaard{ display:flex;align-items:center;gap:6px;padding:7px 10px 8px;margin-bottom:4px; border-bottom:1px solid var(--line);color:var(--mid);font-size:var(--tekst-s);line-height:1.3; } /* staat er niets, dan valt de regel weg. Dit moet hier staan: het blok hierboven zet display:flex en wint het van het display:none dat de browser zelf aan [hidden] geeft. */ #moremenu .bewaard[hidden]{display:none} #moremenu .bewaard svg{flex:0 0 auto;color:var(--acc)} /* .klad = het staat alleen in dit tabblad. Dan is het vinkje net zo grijs als de regel zelf: er is wel iets, maar het is niet het zwarte vinkje van werk dat in het account staat. Geen rood en geen uitroepteken; dit is een statusregel en geen waarschuwing. */ #moremenu .bewaard.klad svg{color:var(--mid)} /* de account-ingang staat bovenaan het actiemenu. Op een telefoon is dit de enige plek waar hij past, dus hij krijgt daar het volle raakvlak en niet het formaat van een voetnoot. */ #moremenu .acc{ display:flex;align-items:center;gap:7px;padding:9px 10px;margin-bottom:4px; border-bottom:1px solid var(--line);color:var(--acc);font-size:var(--tekst-m);font-weight:600; text-decoration:none;cursor:pointer; } #moremenu .acc[hidden]{display:none} #moremenu .acc:hover{background:var(--bg)} #moremenu .acc svg{flex:0 0 auto} @media (max-width:600px){ #moremenu .acc{padding:13px 10px;font-size:var(--tekst-l)} } /* ---------- layout ---------- */ #main{position:relative;flex:1;display:flex;min-height:0} /* ---------- zwevende panelen ---------- Deze app kent twee soorten venster, en het verschil draagt betekenis: een venster waarin je KIEST (de fotokiezer) dimt de tekening en sluit zodra je gekozen hebt; een venster waarin je WERKT zweeft boven de tekening zonder waas, zodat de ruimte zichtbaar blijft terwijl je hem aanpast. Verder delen ze dezelfde taal: witte kaart, haarlijnrand, ronde hoek, kopregel met een kruisje rechts. */ .pop{ position:absolute;z-index:30;display:none;flex-direction:column;min-height:0; width:var(--panelw);max-width:calc(100% - 28px); background:#fff;border:1px solid var(--line);border-radius:var(--rond-l); box-shadow:var(--schaduw-4); overflow:hidden; } .pop.open{display:flex} /* de linkerpanelen staan direct naast de rail (16 + 54 + 12) en delen een plek: er kan er maar één open staan. Ze lopen tot 70 px boven de onderrand, zodat de onderbalk vrij blijft, in 2D net zo goed als in 3D. Ze beginnen een --pilband lager dan de bovenrand: daar staat de pil Verder, en die steekt met zijn 88 px breedte tot over deze 82 heen. */ #roompop,#openpop,#stappop{left:82px;top:calc(16px + var(--pilband));bottom:70px} /* ---- een paneel is zo hoog als wat erin staat ---- Het Ruimte-menu is vier kaarten hoog. Met een vaste boven- EN onderrand rekte het paneel door tot 70 px boven de onderrand en stond er onder die kaarten een halve schermhoogte wit. De onderrand wordt daarom een GRENS in plaats van een plek: max-height houdt hem net zo goed 70 px van de onderrand af, maar alleen als de inhoud daar echt om vraagt. Vorm, Dak en Spots vragen daar wel om, en dan scrollt .popbody zoals altijd. .popbody moet daarvoor van flex:1 af. flex-basis 0 met grow 1 vraagt om alle ruimte die er is, en dat is precies wat hier niet meer moet; flex:0 1 auto is "zo hoog als je inhoud, en krimp pas als het niet past". #openpop doet mee omdat het hetzelfde paneel een stap verder is: stap je vanuit het menu naar Openingen, dan gaat de bak over en had een ruimte zonder deuren of ramen er nog 396 px wit onder staan (gemeten op 1600x1000). Twee panelen die naast elkaar dezelfde stap zijn horen zich ook hetzelfde te gedragen. Sinds 15 september geldt dit voor ELK zwevend paneel, ook #stappop (Afwerking, Installatie, Opleveren): onder vier kaarten, onder de ene rij van Afwerking / Uitzicht en onder Installatie / Elektra liep het blad wit door tot onderaan het scherm, en Sander streepte dat rood door: "zorg dat nergens weggegooide ruimte is". Hoger dan het scherm toelaat wordt hij niet; dan scrollt .popbody. */ #roompop,#openpop,#stappop{bottom:auto;max-height:calc(100% - 86px - var(--pilband))} #roompop>.popbody,#openpop>.popbody,#stappop>.popbody{flex:0 1 auto} /* het stappaneel en de catalogus krijgen bij het openen zelf de aandacht in plaats van hun eerste veld (zie zetPop); dat mag geen rand om het hele paneel trekken */ #stappop:focus,#panelbox:focus{outline:none} .pophead{ flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 8px 11px 14px;border-bottom:1px solid var(--line); } .pophead h2{margin:0} /* ---- de tussenstappen als tabbladen ---- Een segmentbalk bovenin het paneel: de actieve tab groen gevuld, de eerstvolgende in donker (zo zie je waar "Verder" heen gaat), de rest grijs. Vier tabs is het maximum; past er meer niet in, dan is de stap te groot. Leeg (stap Inrichten) staat hij niet in de weg. */ /* De rij tabbladen. Tot 9 september waren dat er hoogstens vier korte woorden en paste dat altijd; sinds de tabbladen van stap Installatie de VLAKKEN zijn (elke wand, plafond, vloer) kunnen het er acht of meer worden. In een L-vorm stond er dan "Wa... Wa... Wa..." en wist je van geen enkel tabblad meer welke wand het was - precies het tegenovergestelde van waar die rij voor is. Hij schuift daarom zijwaarts zodra hij niet past, met de namen heel. */ .poptabs{flex:0 0 auto;display:flex;margin:12px 14px 0;border:1px solid var(--line);border-radius:var(--rond-m); overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch} .poptabs::-webkit-scrollbar{display:none} .poptabs:empty{display:none} .poptabs button{flex:1 0 auto;min-width:0;padding:6px 10px;border:0;background:#fff;color:var(--mid);font-size:var(--tekst-m);font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .poptabs button.on{background:var(--wk);color:#fff} .poptabs button.next{color:var(--ink)} .poptabs button:not(.on):hover{background:var(--wk-soft);color:var(--wk-ink)} .poptabs button:focus-visible{outline:2px solid var(--wk);outline-offset:-2px} /* koppen in een paneel: een woord in kleine kapitalen */ .popkop{font-size:var(--tekst-xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--mid);font-weight:700;margin:14px 0 8px 2px} .popkop:first-child{margin-top:0} /* een schakelrij: naam links, de schakelaar rechts */ .schakelrij{display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%; margin-bottom:6px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--rond-m);background:#fff;font-size:var(--tekst-m);font-weight:600;cursor:pointer} .schakelrij input{appearance:none;-webkit-appearance:none;width:34px;height:20px;margin:0;border-radius:var(--rond-m);background:#C9D2CE;position:relative;flex:0 0 34px;cursor:pointer} .schakelrij input::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s} .schakelrij input:checked{background:var(--wk)} .schakelrij input:checked::after{left:16px} .schakelrij input:focus-visible{outline:2px solid var(--wk);outline-offset:2px} /* een maatveld: naam links, het getal rechts in een vak */ .maatveld{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:6px;padding:7px 7px 7px 11px; border:1px solid var(--line);border-radius:var(--rond-m);background:#fff;font-size:var(--tekst-m);font-weight:600} .maatveld label{flex:1;color:var(--ink);font-size:var(--tekst-m);width:auto} .maatveld input,.maatveld .ro{flex:0 0 92px;width:92px;text-align:right;font-weight:600;padding:6px 8px} .maatveld .ro{border:1px solid transparent;color:var(--mid)} .popx{border:0;background:none;font-size:var(--tekst-4xl);line-height:1;color:var(--mid);padding:2px 8px;border-radius:var(--rond-m)} .popx:hover{color:var(--ink);background:var(--bg)} .popx:focus-visible{outline:2px solid var(--acc);outline-offset:-2px} .popbody{flex:1;overflow-y:auto;padding:14px 14px 22px;min-height:0;overscroll-behavior:contain} @keyframes popin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:no-preference){ .pop.open{animation:popin .18s cubic-bezier(.32,.72,0,1)} } /* ---------- kiesvensters ---------- Alles waarin je iets UITZOEKT staat groot en gecentreerd met een gedimde tekening erachter: de productcatalogus en de fotokiezers per optie. Eén component, dus de catalogus en de fotokiezer voelen als hetzelfde venster op een andere schaal. Ze sluiten zodra je gekozen hebt. */ .ovl{ position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center; background:rgba(30,41,59,.45);padding:20px; } .ovl.open{display:flex} .ovlbox{ background:#fff;border-radius:var(--rond-l);width:100%;max-height:100%; display:flex;flex-direction:column;box-shadow:var(--schaduw-4);overflow:hidden; } @keyframes ovlin{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:no-preference){ .ovl.open .ovlbox{animation:ovlin .2s cubic-bezier(.32,.72,0,1)} } /* ---------- de productcatalogus: de categoriepagina van de winkel ---------- Links zoeken plus de categorieboom (bewust zonder Merk: het planner- assortiment is te klein om óók nog op merk te schiften), rechts de kop met sorteren en de kaarten. */ #panelbox{max-width:min(1180px,94vw);height:min(900px,90vh)} /* de catalogus is sinds 25 september altijd dit grote venster (het zwevende kaartje is weg). Het laat de bovenbalk vrij: het logo (terug naar je ontwerpen, met de vraag Niet opgeslagen), ongedaan maken en bewaren blijven bereikbaar terwijl je kiest, zoals ze dat naast het kaartje waren. */ #panel.ovl{top:54px} #paneltitle{margin:0;font-size:var(--tekst-2xl);font-weight:700} #panelmain{flex:1;display:flex;min-height:0} #panelside{ flex:0 0 236px;border-right:1px solid var(--line);padding:16px 16px 20px; overflow-y:auto;background:#fff; } #panelside input{font-size:var(--tekst-l);padding:9px 11px} #panelside .kop{ font-size:var(--tekst-2xl);font-weight:700;margin:16px 0 6px; } #cats{display:flex;flex-direction:column;align-items:stretch} #cats button{ border:0;background:none;padding:6px 0;text-align:left;font-size:var(--tekst-l);color:var(--ink); display:flex;gap:5px;align-items:baseline; } #cats button .n{color:var(--mid);font-weight:400;font-size:var(--tekst-m)} #cats button:hover{color:var(--acc)} #cats button.on{font-weight:700} /* de q1-boom (Q1BOOM in planner/kern.js): een pijltje voor de hoofdcategorie, dat omlaag wijst als zij openstaat; de subcategorieen staan eronder ingesprongen en een maat kleiner */ #cats .pijl{flex:0 0 auto;align-self:center;color:var(--mid);transition:transform .15s} #cats button[aria-expanded="true"] .pijl{transform:rotate(90deg)} #cats button.sub{padding:4px 0 4px 15px;font-size:var(--tekst-m)} #cats button.sub .n{font-size:var(--tekst-s)} #cats button:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:var(--rond-s)} #panelright{flex:1;display:flex;flex-direction:column;min-width:0} #panelkop{flex:0 0 auto;padding:14px 18px 10px;border-bottom:1px solid var(--line)} #panelkop .rij1{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap} #panelkop h3{margin:0;font-size:var(--tekst-4xl);font-weight:700;line-height:1.2} #panelkop h3 .n{color:var(--mid);font-weight:400;font-size:var(--tekst-2xl)} #panelkop .sort{display:flex;gap:7px;align-items:center;font-size:var(--tekst-m);color:var(--mid);white-space:nowrap} #panelkop .sort select{width:auto;font-size:var(--tekst-m);padding:6px 8px} #panelkop .resline{ margin-top:7px;font-size:var(--tekst-m);color:var(--mid); display:flex;gap:10px;align-items:center;flex-wrap:wrap; } .wispil{ border:1px solid var(--line);border-radius:var(--rond-xl);padding:4px 11px;font-size:var(--tekst-s); background:#fff;color:var(--ink);display:inline-flex;gap:6px;align-items:center; } .wispil:hover{border-color:var(--acc);color:var(--acc)} .wispil.on{border-color:var(--acc);background:var(--acc);color:#fff} .wispil .n{opacity:.6;font-variant-numeric:tabular-nums} .wispil.on .n{opacity:.8} /* de twee knoppenrijen boven de modelbibliotheek: eerst wat het IS, dan van wie het is. Ze scrollen niet mee weg, want ze zijn de plattegrond van 1665 modellen. */ /* de scheidslijn tussen wat wij verkopen en wat de bibliotheek kan tekenen */ .bibkop{margin:22px 0 14px;padding-top:16px;border-top:1px solid var(--line)} .bibkop h4{margin:0;font-size:var(--tekst-l)} .bibkop h4 .n{color:var(--mid);font-weight:400} .bibkop p{margin:4px 0 10px;font-size:var(--tekst-m);color:var(--mid);max-width:62ch} .vormbalk{display:flex;flex-direction:column;gap:8px;margin:0 0 16px} .vormbalk .rij{display:flex;gap:7px;align-items:center;flex-wrap:wrap} .vormbalk .rij>b{font-size:var(--tekst-s);color:var(--mid);font-weight:600;min-width:38px} #panelbody{padding:16px 18px 22px} .pgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));align-content:start} /* de winkelkaart: witte fotohelft met kleurstip, beige informatieblok */ .pgrid .pcard{gap:0;padding:0;overflow:hidden;display:flex;flex-direction:column} /* dit product wordt vervangen door een eigen model uit de onderdeel-editor */ .pcard .eigenmodel{margin-left:6px;padding:1px 5px;border-radius:var(--rond-s);font-weight:700; background:var(--ink);color:var(--gold);font-size:var(--tekst-xs);letter-spacing:.3px} .pgrid .foto{position:relative;background:#fff;padding:12px} /* transparante render: grijze ondergrond, anders verdwijnt wit op wit. Het moet op ALLEBEI: de img draagt zelf een witte achtergrond (zie .pcard .pimg verderop) en die wordt achter de doorzichtige beeldinhoud geschilderd, dus zonder de tweede regel is het grijs alleen een randje. */ .pgrid .foto.render{background:#E9EEEC} .foto.render .pimg{background:transparent} .pgrid .pcard .pimg{height:168px;width:100%} /* De seriekaart van de configurator draagt een productfoto (fotos/cfg-kaart/, 29 september) die zijn vak van rand tot rand vult. Het vak is vierkant, net als de foto, dus cover snijdt op geen enkele breedte iets af. Breder kan niet: het meubel vult de foto voor 86 tot 89 procent, en in 291x192 (1600) of 448x192 (768) zou cover de kraan of de onderkant wegsnijden. Een winkelkaart in hetzelfde raster krijgt hetzelfde vierkante vak, met zijn eigen witte rand, anders staan de fotovakken van een rij op twee hoogtes. */ .pgrid .foto.vol{padding:0} .pgrid .pcard .foto.vol .pimg{height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:0} .pgrid:has(.foto.vol) .pcard .foto:not(.vol) img.pimg{height:auto;aspect-ratio:1/1} /* Twee kolommen in een raster met seriekaarten (Ilias, 30 september: "maak op tablet twee kolommen in badmeubelen"). Tussen het mobiele breekpunt (600) en ongeveer 780 staat de zijbalk naast een raster dat smaller is dan 2 x 224 + 14, en dan paste er maar een kaart naast elkaar. Een kolom is hier nooit breder dan de helft, dus er staan er minstens twee; past er al meer, dan kiest min() gewoon 224 en blijft alles zoals het was. Op zo'n smalle kaart loopt een lange naam na drie regels af en de rubriek na een, zodat de kaart heel blijft. */ @media (min-width:601px){ .pgrid:has(.foto.vol){grid-template-columns:repeat(auto-fill,minmax(min(calc(50% - 7px),224px),1fr))} .pgrid:has(.foto.vol) .pcard .nm{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .pgrid:has(.foto.vol) .pcard .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } .pgrid .stip{ position:absolute;left:12px;bottom:12px;width:15px;height:15px;border-radius:50%; border:1px solid rgba(30,41,59,.25);box-shadow:0 0 0 2px #fff; } /* het hartje rechtsboven op de foto. Het zit IN de kaartknop, dus het vangt zijn eigen klik af (zie de handler): aanraken mag nooit het product plaatsen. */ .pgrid .hart{ position:absolute;right:8px;top:8px;z-index:3;width:30px;height:30px;border-radius:50%; display:flex;align-items:center;justify-content:center;cursor:pointer; background:rgba(255,255,255,.92);box-shadow:var(--schaduw-1);color:var(--mid); } .pgrid .hart:hover{color:var(--ink)} .pgrid .hart.on{color:#c0392b} .pgrid .hart.on svg{fill:currentColor} .pgrid .info{background:var(--bg);padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1;border-top:1px solid var(--line)} .pgrid .crumb{font-size:var(--tekst-xs);letter-spacing:1px;text-transform:uppercase;color:var(--mid);font-weight:600} .pgrid .pcard .nm{font-size:var(--tekst-m);line-height:1.35} /* Vloer / Wand / Vloer en wand op een tegelkaart: waar hij mag liggen, dezelfde plek en grootte als de crumb erboven, alleen niet in kapitalen */ .pgrid .tegelkaart .gebruik{font-size:var(--tekst-xs);color:var(--mid)} .pgrid .pcard .pr{font-size:var(--tekst-2xl);font-weight:700;color:var(--ink);margin-top:auto;padding-top:5px} .pgrid .lever{display:flex;gap:5px;align-items:center;font-size:var(--tekst-s);color:var(--mid);margin-top:2px} .pgrid .lever svg{flex:0 0 auto;color:#3E8E5A} /* voetregel van de catalogus: links waar je doorheen bladert, rechts wat er tot nu toe in het ontwerp staat. Twee verschillende getallen, dus twee kanten; ze mogen elkaar niet verwarren. */ #foot{ flex:0 0 auto;border-top:1px solid var(--line);padding:11px 18px;background:#F3F6F5; display:flex;justify-content:space-between;align-items:baseline;gap:12px; } #foot .tot{font-size:var(--tekst-2xl);font-weight:700} #foot .cnt{font-size:var(--tekst-s);color:var(--mid)} #foot .vnd{font-size:var(--tekst-m);color:var(--mid)} #foot .rechts{display:flex;gap:9px;align-items:baseline} h2.sec{font-size:var(--tekst-xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--mid);margin:0 0 9px;font-weight:600} h2.sec:not(:first-child){margin-top:20px} .row{display:flex;gap:8px;margin-bottom:8px;align-items:center} .row[hidden]{display:none} .row label{font-size:var(--tekst-s);color:var(--mid);width:86px;flex:0 0 86px} input[type=text],input[type=number],select{ width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:var(--rond-m);font:inherit;font-size:var(--tekst-m);background:#fff; } input:focus,select:focus{outline:none;border-color:var(--acc)} /* de rand alleen is te weinig om een veld met het toetsenbord terug te vinden; bij toetsenbordfocus komt dezelfde gouden ring als op elke knop erbij */ input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:1px} input[type=number]{font-variant-numeric:tabular-nums} .btn{display:block;width:100%;padding:9px;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:var(--rond-m);font-size:var(--tekst-m);margin-top:8px} .btn.ghost{background:#fff;color:var(--ink)} .btn.warn{background:#fff;color:var(--warn);border-color:#ecc9c5} .hint{font-size:var(--tekst-s);color:var(--mid);line-height:1.55} .chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px} .chips button{padding:5px 9px;border:1px solid var(--line);background:#fff;border-radius:var(--rond-xl);font-size:var(--tekst-s);color:var(--mid)} .chips button.on{background:var(--ink);color:var(--gold);border-color:var(--ink)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px} .grid2 button{text-align:left;padding:8px 9px;border:1px solid var(--line);background:#fff;border-radius:var(--rond-m);font-size:var(--tekst-m)} .grid2 button:hover{border-color:var(--acc);color:var(--acc)} /* De kaart ziet eruit als een webwinkelkaart en gedraagt zich als een knop: erop drukken zet het product in de ruimte. Zonder woord erbij lees je dat als "naar de productpagina". Bij aanwijzen of toetsenbordfocus zegt de kaart wat er gebeurt; op een aanraakscherm staat het er altijd. */ .pgrid .pcard .toevoeg{ position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2; padding:6px 14px;border-radius:var(--rond-xl);background:var(--ink);color:#fff; font-size:var(--tekst-m);font-weight:600;white-space:nowrap;pointer-events:none;opacity:0; box-shadow:var(--schaduw-2); } .pgrid .pcard:hover .toevoeg,.pgrid .pcard:focus-visible .toevoeg{opacity:1} @media (prefers-reduced-motion:no-preference){ .pgrid .pcard .toevoeg{transition:opacity .14s} } @media (pointer:coarse){ .pgrid .pcard .toevoeg{opacity:1} } /* product cards */ .prod{display:flex;gap:10px;align-items:center;padding:7px;border:1px solid var(--line);border-radius:var(--rond-m);background:#fff;margin-bottom:6px;cursor:pointer;width:100%;text-align:left} .prod:hover{border-color:var(--acc)} .prod img{width:52px;height:52px;object-fit:contain;border-radius:var(--rond-s);background:#fff;border:1px solid var(--line);flex:0 0 52px} .prod .nm{font-size:var(--tekst-m);line-height:1.3;max-height:32px;overflow:hidden} .prod .pr{font-size:var(--tekst-s);color:var(--mid);margin-top:2px} .more{font-size:var(--tekst-s);color:var(--mid);text-align:center;padding:8px} .pgrid .more{grid-column:1/-1;padding:34px 8px} /* ---------- het overzicht: de categorieen als kaarten ---------- catOverzicht in planner/q1-catalogus.js. Dezelfde winkelkaart als een product, maar de kaart is een weg naar binnen en geen artikel: geen prijs, geen hartje, geen "Toevoegen", wel de naam, het aantal en een pijl. De foto staat op wit, ook een render (die heeft zijn eigen schaduw). Vijf naast elkaar in het grote venster, zodat de tien hoofdcategorieen op twee rijen passen; twee naast elkaar op een telefoon. */ .pgrid.catgrid{grid-template-columns:repeat(auto-fill,minmax(164px,1fr))} .pgrid.catgrid .foto,.pgrid.catgrid .foto.render{background:#fff;padding:12px} .pgrid.catgrid .pcard .pimg{height:128px;background:#fff} .pgrid.catgrid .info{flex-direction:row;align-items:center;gap:8px;padding:10px 10px 11px 12px} .pgrid.catgrid .info .tekst{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .pgrid.catgrid .pcard .nm{font-size:var(--tekst-l);font-weight:700;line-height:1.25;overflow-wrap:anywhere} .pgrid.catgrid .aantal{font-size:var(--tekst-s);color:var(--mid);font-variant-numeric:tabular-nums} .pgrid.catgrid .pijl{flex:0 0 auto;color:var(--mid)} .pgrid.catgrid .pcard:hover .pijl,.pgrid.catgrid .pcard:focus-visible .pijl{color:var(--acc)} .pgrid.catgrid .pcard:focus-visible{outline:2px solid var(--acc);outline-offset:2px} @media (max-width:600px){ .pgrid.catgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .pgrid.catgrid .foto,.pgrid.catgrid .foto.render{padding:8px} .pgrid.catgrid .pcard .pimg{height:104px} .pgrid.catgrid .pcard .nm{font-size:var(--tekst-m)} } /* ---------- varianten: de familiekaart en het samenstelscherm ---------- famKaartHtml en famScherm in planner/q1-catalogus.js. De familiekaart is dezelfde winkelkaart als een product, met een rij kleurstippen en "6 kleuren"; een klik opent een niveau dieper het samenstelscherm: links de foto van precies het gekozen artikel, rechts per as de keuzes. */ .famstip{display:inline-block;width:14px;height:14px;border-radius:50%;flex:0 0 auto; border:1px solid rgba(30,41,59,.25);box-shadow:0 0 0 1.5px #fff} .pgrid .famstippen{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:5px} .pgrid .fammeer{font-size:var(--tekst-xs);color:var(--mid)} .pgrid .famtel{font-size:var(--tekst-s);color:var(--mid)} #results.famscherm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:start} .famscherm .famfoto{background:#fff;border:1px solid var(--line);border-radius:var(--rond-m);padding:18px;position:sticky;top:0} .famscherm .famgroot{display:block;width:100%;height:380px;object-fit:contain} .famscherm .famkeuze{display:flex;flex-direction:column;gap:14px;min-width:0} .famscherm .crumb{font-size:var(--tekst-xs);letter-spacing:1px;text-transform:uppercase;color:var(--mid);font-weight:600} .famscherm h4{margin:-8px 0 0;font-size:var(--tekst-2xl);line-height:1.25} .famscherm .famvar{margin:-6px 0 0;font-size:var(--tekst-s);color:var(--mid);line-height:1.45} .famscherm .famas>b{display:block;font-size:var(--tekst-s);font-weight:600;color:var(--mid);margin-bottom:7px} .famscherm .famas>b span{color:var(--ink)} .famscherm .famopties{display:flex;flex-wrap:wrap;gap:6px} .famscherm .famopt{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line); background:#fff;border-radius:var(--rond-xl);font:inherit;font-size:var(--tekst-s);color:var(--ink);cursor:pointer} .famscherm .famopt:hover{border-color:var(--acc)} .famscherm .famopt.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);font-weight:600} .famscherm .famopt.anders{border-style:dashed;color:var(--mid)} .famscherm .famopt:focus-visible{outline:2px solid var(--acc);outline-offset:1px} .famscherm .famuitleg{margin:0;font-size:var(--tekst-xs);color:var(--mid)} .famscherm .famprijs{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px} .famscherm .fampr{font-size:var(--tekst-2xl);font-weight:700} .famscherm .famnr{font-size:var(--tekst-s);color:var(--mid);font-variant-numeric:tabular-nums} .famscherm .famknoppen{display:flex;gap:8px;flex-wrap:wrap} .famscherm .famknoppen .btn{width:auto;margin-top:0;padding:10px 22px} .famscherm .famfav.on{border-color:var(--acc);color:var(--acc)} @media (max-width:600px){ /* OP EEN TELEFOON SCROLT HET HELE VENSTER (catNaar in planner/paneel.js zegt het al), maar niets kon scrollen: #panelright groeit met zijn inhoud, #panelmain loopt over en #panelbox (overflow hidden) knipt het af. Gemeten op live, 390 px, Inloopdouches: de laatste kaart op 5085 px en een veeg deed niets. Nu scrolt #panelmain, met de zoekregel mee. */ #panelmain{overflow-y:auto;-webkit-overflow-scrolling:touch} #results.famscherm{grid-template-columns:1fr;gap:14px} .famscherm .famfoto{position:static;padding:10px} .famscherm .famgroot{height:240px} .famscherm .famknoppen .btn{flex:1} } /* ---------- stage ---------- */ #stage{flex:1;position:relative;min-width:0;overflow:hidden} #sheetwrap{position:absolute;inset:0;background:#fff} /* ---------- het blad wijkt voor een open paneel ---------- Een paneel legde tot nu toe een derde van het scherm over de tekening heen en het blad rekende daar niet mee: je zette een badmeubel neer en de wand ernaast lag onder het venster. Het tekenvak springt nu in aan de kant waar het paneel staat, dus de ruimte staat altijd héél in beeld. Alleen op een breed scherm: daaronder is een paneel een vol scherm of een blad onderaan, en zou inspringen de tekening tot een streepje knijpen. */ @media (min-width:901px){ #roompop.open ~ #stage #sheetwrap, #openpop.open ~ #stage #sheetwrap, #stappop.open ~ #stage #sheetwrap{left:calc(82px + var(--panelw) + 14px)} } /* Het productvenster is pas onder de 601 px een blad onderin. Tussen 601 en 900 is het gewoon een venster van 300 px dat RECHTS OVER de tekening ligt, en daar viel het inspringen tussen wal en schip: het gold vanaf 901 en het blad-onderin pas vanaf 601. Het gevolg was niet cosmetisch. Nagemeten op 820 en 768 staand was van het klikvlak van een GESELECTEERDE opening nog 3 van de 15 punten bereikbaar (bij een nis op 768 geen enkel), gaf elementFromPoint in het midden het blad zelf terug, bleef drag op null en bewoog de opening geen millimeter over vijf sleepframes. Dat is precies de klacht "een geselecteerde deur laat zich niet slepen": hij zit onder het venster dat door het selecteren openging. Onder de 601 px blijft het zoals het was; daar is het paneel een blad onderin en zou inspringen de tekening tot een streepje knijpen. */ @media (min-width:601px){ #main:has(#side.open:not(.links)) #sheetwrap{right:324px} #main:has(#side.open.links) #sheetwrap{left:324px} } svg#sheet{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none} /* de liniaal wijst punten aan; het kruisje zegt dat er niets te selecteren is */ body.liniaal svg#sheet{cursor:crosshair} #three{position:absolute;inset:0;display:none} #three canvas{width:100%;height:100%;display:block} body.mode3d #stage{padding:0;overflow:hidden} body.mode3d #sheetwrap{display:none} body.mode3d #three{display:block} /* ---------- de onderbalk ---------- Een samengestelde balk met alleen zichten: standaard, van boven, voor, ooghoogte | rondlopen, draaien | kijklaag, zicht bewaren, styling. Hij staat er altijd, ook in 2D en op Opleveren; wat daar niet kan staat grijs en verdwijnt niet (hudStand). Foto en video zijn acties, geen zichten, en staan in de topbalk. */ #hud{ position:absolute;left:16px;bottom:16px;display:flex;align-items:stretch;gap:10px; max-width:calc(100% - 28px); } #hud .seg{background:#fff;box-shadow:var(--schaduw-2);min-width:0;overflow-x:auto;align-items:center} #hud .seg button{white-space:nowrap;flex:0 0 auto} #hud button:focus-visible{outline:2px solid var(--wk);outline-offset:-2px} /* ---- de kijkstandbalk als pictogrammen (Planner5D-taal) ---- één groene accentkleur voor aanwijzen en actief, de rest neutraal grijs. */ #hudviews button,#hudtools button{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:38px; padding:0;background:#fff;border:0;color:var(--mid);--icon-accent:var(--mid)} #hudviews button:not(.on):hover,#hudtools button:not(.on):hover{color:var(--wk);--icon-accent:var(--wk);background:var(--wk-soft)} #hudviews button.on,#hudtools button.on{background:var(--wk-soft);color:var(--wk-ink);--icon-accent:var(--wk)} #hudviews button:disabled,#hudtools button:disabled{opacity:1;color:#B5C0BB;--icon-accent:#B5C0BB;background:#fff;cursor:default} #hudviews .hudsplit{flex:0 0 1px;align-self:stretch;width:1px;background:var(--line);margin:6px 1px} /* de bewaarde zichten: chips die boven de balk zweven */ #viewspop{position:absolute;left:14px;bottom:62px;z-index:6;display:none;flex-wrap:wrap;gap:6px; max-width:calc(100% - 28px)} body.mode3d #viewspop.aan{display:flex} /* een open werkpaneel begint op x 72 en is 330 breed; de chips begonnen op x 14 en verdwenen er dus onder. Ze schuiven ernaast in plaats van eronder. */ @media (min-width:901px){ #main:has(.pop.open) #viewspop{left:calc(82px + 330px + 14px); max-width:calc(100% - 82px - 330px - 28px)} } #viewspop .vchip{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line); border-radius:var(--rond-vol);padding:4px 4px 4px 12px;box-shadow:var(--schaduw-2); font-size:var(--tekst-m);font-weight:600;color:var(--ink)} #viewspop .vchip .go{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer} #viewspop .vchip .go:hover{color:var(--wk)} #viewspop .vchip .del{border:0;background:none;width:20px;height:20px;border-radius:50%;color:var(--mid); cursor:pointer;display:flex;align-items:center;justify-content:center} #viewspop .vchip .del:hover{background:var(--wk-soft);color:var(--wk)} /* ---- de kijklaagknop en het lagenpaneel ---- De knop is een gewone kijkstandknop in de onderbalk (viewKnoppen zet hem in #lagenknop); #lagenknop zelf is alleen een haakje en tekent niets. Het paneel klapt boven de onderbalk open. */ #lagenknop{display:contents} #hudviews #lagenbtn.laag-uit{color:var(--wk-ink);--icon-accent:var(--wk)} #hudviews #lagenbtn.on{background:var(--wk-soft);color:var(--wk-ink)} @media print{ #lagenknop,#lagenpop{display:none!important} } /* ---- het lichtpaneel achter de zon in de topbalk ---- Tijdstip van de dag en de lichtkleur van de spots. Dezelfde kaart als het actiemenu ernaast. Het lagenpaneel had deze schuif ook; hij staat nu op een plek. */ #lichtvak{position:relative} #lichtpop{ position:absolute;right:0;top:calc(100% + 7px);z-index:40;display:none;width:250px; background:#fff;border:1px solid var(--line);border-radius:var(--rond-m);padding:12px 13px 11px; box-shadow:var(--schaduw-3); } #lichtpop.open{display:block} #lichtpop .lp-tijd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:2px} #lichtpop .lp-tijd b{font-size:var(--tekst-l)} #lichtpop .lp-tijd span{font-size:var(--tekst-m);color:var(--mid);font-variant-numeric:tabular-nums} #lichtpop input[type=range]{width:100%;margin:2px 0 4px} #lichtpop .lp-tijdmerk{display:flex;justify-content:space-between;font-size:var(--tekst-xs);color:var(--mid);margin-bottom:6px} #lichtpop .lp-mood{display:flex;gap:5px;margin:0 0 9px} #lichtpop .lp-moodb{flex:1;font-size:var(--tekst-s);font-weight:600;padding:6px 4px;border:1px solid var(--line); background:#fff;border-radius:var(--rond-m);color:var(--mid)} #lichtpop .lp-moodb.on{border-color:var(--wk);color:var(--wk-ink);background:var(--wk-zacht)} #lichtpop .lp-kelvin{display:grid;grid-template-columns:1fr 1fr;gap:5px} #lichtpop .lp-k{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 9px; border:1px solid var(--line);background:#fff;border-radius:var(--rond-m);text-align:left} #lichtpop .lp-k b{font-size:var(--tekst-m);font-weight:600} #lichtpop .lp-k span{font-size:var(--tekst-xs);opacity:.62;line-height:1.25} #lichtpop .lp-k.on{border-color:var(--wk);box-shadow:inset 0 0 0 1px var(--wk)} #lichtpop .popkop{margin-top:10px} /* ---- het kijkmenu achter de hamburger (alleen op een telefoon) ---- Dezelfde kaart als #lagenpop hieronder, op dezelfde hoogte boven de balk, want het is hetzelfde soort ding: een paneel dat boven de onderbalk openklapt. De knop staat in #hudviews (index.html) en is boven 600 px weg; dit paneel dus ook - zie het telefoonblok verderop in dit bestand. Regels van 44 px hoog met een woord erbij: in de balk zijn het pictogrammen, hier is ruimte voor de naam. */ /* #hudviews button hierboven zet display:flex met een id erin, dus een kale #kijkmenubtn verliest het. GEMETEN: zonder de groep ervoor stond de hamburger op 1600 px gewoon in de balk mee (13 knoppen in plaats van 12). */ #hudviews #kijkmenubtn{display:none} #kijkmenu{display:none} #kijkmenu{ position:absolute;left:16px;bottom:calc(var(--hudh,50px) + 26px);width:326px;max-width:calc(100% - 28px); max-height:calc(100% - var(--hudh,50px) - 60px);overflow:auto;background:#fff;border:1px solid var(--line); border-radius:var(--rond-l);box-shadow:var(--schaduw-3);padding:6px;z-index:40; } #kijkmenu .kmrij{ display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px; border:0;background:none;border-radius:var(--rond-m);text-align:left; font-size:var(--tekst-m);color:var(--ink); } #kijkmenu .kmrij svg{flex:0 0 auto;width:20px;height:20px;color:var(--mid)} #kijkmenu .kmrij .kmnaam{flex:1 1 auto;min-width:0} /* het woordje rechts zegt of een stand AANSTAAT. Drie van de acht regels zijn schakelaars (rondlopen, draaien, styling) en die moeten hun stand dragen, anders is een menu een lijst met knoppen waarvan je er niet een kunt lezen. */ #kijkmenu .kmrij .kmstand{ flex:0 0 auto;font-size:var(--tekst-s);font-weight:600;color:var(--wk-ink); background:var(--wk-soft);border-radius:var(--rond-vol);padding:2px 9px; } #kijkmenu .kmrij:hover{background:var(--bg)} #kijkmenu .kmrij.on{background:var(--wk-soft);color:var(--wk-ink)} #kijkmenu .kmrij.on svg{color:var(--wk)} #kijkmenu .kmrij:disabled{opacity:.4;background:none;color:var(--mid)} #lagenpop{ position:absolute;left:16px;bottom:calc(var(--hudh,50px) + 26px);width:326px;max-width:calc(100% - 28px); max-height:calc(100% - var(--hudh,50px) - 60px);overflow:auto;background:#fff;border:1px solid var(--line); border-radius:var(--rond-l);box-shadow:var(--schaduw-3);padding:12px 13px 13px;z-index:40; } #lagenpop .lp-kop{display:flex;align-items:center;justify-content:space-between;gap:8px} #lagenpop h2{font-size:var(--tekst-l);margin:0;letter-spacing:.02em;text-transform:uppercase;color:var(--mid)} #lagenpop .lp-sec{font-size:var(--tekst-m);margin:14px 0 6px;letter-spacing:.02em;text-transform:uppercase;color:var(--mid)} #lagenpop .lp-sec.rood,#lagenpop .rood{color:#c0392b} #lagenpop .lp-lagen{display:flex;flex-direction:column;gap:5px;margin-top:9px} #lagenpop .lp-laag{display:block;width:100%;text-align:left;border:1px solid var(--line); border-radius:var(--rond-m);padding:8px 10px;background:#fff;min-height:44px} #lagenpop .lp-laag b{display:block;font-size:var(--tekst-l)} #lagenpop .lp-laag span{display:block;font-size:var(--tekst-s);color:var(--mid);line-height:1.35;margin-top:2px} #lagenpop .lp-laag.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)} #lagenpop .lp-sys{display:flex;flex-direction:column;gap:3px} #lagenpop .lp-rij{display:flex;align-items:center;gap:8px;width:100%;text-align:left; border:0;background:transparent;padding:7px 6px;border-radius:var(--rond-m);min-height:38px;opacity:.42} #lagenpop .lp-rij.on{opacity:1;background:#f4f6f8} #lagenpop .lp-rij i{width:12px;height:12px;border-radius:var(--rond-s);flex:0 0 auto} #lagenpop .lp-nm{font-size:var(--tekst-m);flex:0 0 auto} #lagenpop .lp-mt{font-size:var(--tekst-s);color:var(--mid);margin-left:auto;text-align:right} #lagenpop .lp-hint,#lagenpop .lp-voorbehoud{font-size:var(--tekst-s);color:var(--mid);line-height:1.45} #lagenpop .lp-voorbehoud{margin-top:12px;padding-top:9px;border-top:1px solid var(--line)} #lagenpop .lp-run b{display:block;font-size:var(--tekst-m)} #lagenpop .lp-run span{display:block;font-size:var(--tekst-s);color:var(--mid);line-height:1.4;margin-top:2px} #lagenpop .lp-wp{margin-top:8px;display:flex;flex-direction:column;gap:4px} #lagenpop .lp-wprij{display:flex;align-items:center;gap:4px} #lagenpop .lp-wprij span{font-size:var(--tekst-s);color:var(--mid);width:14px;flex:0 0 auto} #lagenpop .lp-wprij input{width:100%;min-width:0;font-size:var(--tekst-s);padding:5px 4px} #lagenpop .lp-mini{flex:0 0 auto;width:26px;height:30px;border:1px solid var(--line); border-radius:var(--rond-s);background:#fff;font-size:var(--tekst-xl);line-height:1} #lagenpop .lp-knoppen{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap} #lagenpop .lp-knoppen .btn{font-size:var(--tekst-s);padding:7px 10px} #lagenpop .lp-fout{display:flex;flex-direction:column;gap:5px} #lagenpop .lp-foutrij{display:block;width:100%;text-align:left;font-size:var(--tekst-s);line-height:1.45; border:1px solid #f0c9c4;background:#fdf5f4;color:#8c2f24;border-radius:var(--rond-m);padding:8px 9px} #lagenpop .lp-bron{display:flex;flex-direction:column;gap:4px} #lagenpop .lp-bronrij{display:flex;align-items:center;gap:4px} #lagenpop .lp-bronrij span{font-size:var(--tekst-s);flex:1 1 0;min-width:0} #lagenpop .lp-bronrij select,#lagenpop .lp-bronrij input{width:74px;flex:0 0 auto;font-size:var(--tekst-s);padding:5px 4px} #lagenpop .lp-tijd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:2px} #lagenpop .lp-tijd b{font-size:var(--tekst-l)} #lagenpop .lp-tijd span{font-size:var(--tekst-m);color:var(--mid);font-variant-numeric:tabular-nums} #lagenpop #lp_tijd,#lagenpop #lp_fov{width:100%;margin:4px 0 0;height:28px} #lagenpop .lp-kelvin{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:9px 0 7px} #lagenpop .lp-k{display:flex;flex-direction:column;align-items:flex-start;gap:1px; padding:6px 8px;border:1px solid var(--wk-lijn,#dcdcdc);border-radius:var(--rond-m);background:#fff; cursor:pointer;text-align:left;font:inherit;color:inherit} #lagenpop .lp-k b{font-size:var(--tekst-m);font-weight:600} #lagenpop .lp-k span{font-size:var(--tekst-xs);opacity:.62;line-height:1.25} #lagenpop .lp-k:hover{background:var(--wk-zacht,#f2f5f8)} #lagenpop .lp-k.on{border-color:var(--wk,#141414);box-shadow:inset 0 0 0 1px var(--wk,#141414)} #lagenpop .lp-tijdmerk{display:flex;justify-content:space-between;font-size:var(--tekst-xs);color:var(--mid);margin-bottom:6px} #lagenpop .lp-mood{display:flex;gap:5px;margin:0 0 4px} #lagenpop .lp-moodb{flex:1;font-size:var(--tekst-s);font-weight:600;padding:6px 4px;border:1px solid var(--line); background:#fff;border-radius:var(--rond-m);color:var(--ink);cursor:pointer} #lagenpop .lp-moodb:hover{background:var(--wk-zacht,#f2f5f8)} #lagenpop .lp-moodb.on{border-color:var(--wk,#141414);box-shadow:inset 0 0 0 1px var(--wk,#141414)} /* de vinkjes van de doorkijk */ #lagenpop .lp-vink{display:flex;align-items:center;gap:9px;width:100%;text-align:left; padding:7px 9px;margin:0 0 5px;border:1px solid var(--line);border-radius:var(--rond-m); background:#fff;font-size:var(--tekst-m);color:var(--ink);cursor:pointer} #lagenpop .lp-vink:hover{background:var(--wk-zacht,#f2f5f8)} #lagenpop .lp-vink .vk{flex:0 0 16px;width:16px;height:16px;border:1.5px solid var(--line); border-radius:var(--rond-s);display:grid;place-items:center;font-size:var(--tekst-xs);line-height:1;color:#fff} #lagenpop .lp-vink.on{border-color:var(--wk,#141414);box-shadow:inset 0 0 0 1px var(--wk,#141414)} #lagenpop .lp-vink.on .vk{background:var(--wk,#141414);border-color:var(--wk,#141414)} #lagenpop .lp-vink .vs{flex:1;min-width:0;font-weight:600} #lagenpop .lp-vink .vt{display:block;font-weight:400;color:var(--mid);font-size:var(--tekst-s);margin-top:1px} #lagenpop .lp-kant{display:flex;gap:5px;margin:2px 0 4px} #lagenpop .lp-kantb{flex:1;font-size:var(--tekst-s);font-weight:600;padding:6px 4px;border:1px solid var(--line); background:#fff;border-radius:var(--rond-m);color:var(--ink);cursor:pointer} #lagenpop .lp-kantb:hover{background:var(--wk-zacht,#f2f5f8)} #lagenpop .lp-kantb.on{border-color:var(--wk,#141414);box-shadow:inset 0 0 0 1px var(--wk,#141414)} #lagenpop .lp-naarstap{display:block;width:100%;text-align:left;font-size:var(--tekst-s);line-height:1.45; margin-top:10px;border:1px solid var(--line);background:#f8f9fa;border-radius:var(--rond-m);padding:9px 10px;color:var(--ink)} #lagenpop .lp-naarstap:hover{border-color:var(--acc);color:var(--acc)} #lagenpop .lp-naarstap span{float:right;font-size:var(--tekst-xl);line-height:1} /* ---- stap 4: de installatie ---- Zelfde taal als de andere stappaneelen: koppen in kapitalen, regels die je kunt aanklikken, en een kleur alleen waar hij iets betekent. */ .inst-let,.inst-goed{display:flex;gap:9px;align-items:flex-start;font-size:var(--tekst-s);line-height:1.5; border-radius:var(--rond-m);padding:10px 11px;margin-top:10px} .inst-let{background:#fdf6ec;border:1px solid #ecd7ae;color:#7a5312} .inst-goed{background:#f1f8f2;border:1px solid #c6e0c9;color:#2f6136} .inst-som{border:1px solid var(--line);border-radius:var(--rond-m);padding:9px 11px;margin:8px 0 10px;background:#fafbfa} .inst-somrij{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--tekst-m);padding:2px 0} .inst-somrij b{color:var(--ink)} .inst-somsub{font-size:var(--tekst-s);line-height:1.5;color:var(--mid);margin-top:5px} .lp-best{font-style:normal;opacity:.75} .inst-melden{border:1px solid var(--line);border-radius:var(--rond-m);padding:10px;margin-top:8px} .inst-meldlabel{font-size:var(--tekst-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--mid);margin-bottom:7px} .inst-chiprij{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px} .inst-syschip,.inst-wandchip{font:inherit;font-size:var(--tekst-m);padding:7px 12px;border-radius:var(--rond-vol); border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;min-height:36px} .inst-syschip.aan{background:var(--ink);color:#fff;border-color:var(--ink)} .inst-wandchip{border-style:dashed} .inst-syschip:hover,.inst-wandchip:hover{border-color:var(--ink)} .inst-bestlijst{margin-top:10px;display:flex;flex-direction:column;gap:8px} .inst-bestrij{border:1px solid var(--line);border-radius:var(--rond-m);padding:9px 10px} .inst-besthead{display:flex;align-items:center;gap:7px} .inst-bestkl{width:10px;height:10px;border-radius:var(--rond-s);background:var(--k);flex:0 0 auto} .inst-bestnm{flex:1;font-size:var(--tekst-m);font-weight:600;color:var(--ink)} .inst-bestweg{border:0;background:none;color:var(--mid);cursor:pointer;padding:4px;line-height:0;min-width:32px;min-height:32px} .inst-bestweg:hover{color:#b4322a} .inst-bestvelden{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px} .inst-bestvelden label{display:flex;flex-direction:column;gap:2px;font-size:var(--tekst-xs);color:var(--mid);flex:1 1 78px} .inst-bestvelden input,.inst-bestvelden select{font:inherit;font-size:var(--tekst-m);padding:6px 7px;border:1px solid var(--line);border-radius:var(--rond-m);min-height:34px;width:100%} .inst-bestvelden input:disabled{background:#f4f5f4;color:var(--mid)} .inst-bestonb{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:var(--tekst-s);color:var(--ink)} /* ---- stap 4: de regel naar het venster Bestaande installatie ---- Een regel met de stand erin en een knop ernaast, in plaats van de twee volle blokken die hier stonden. */ .inst-regel{display:flex;align-items:center;gap:9px;border:1px solid var(--line); border-radius:var(--rond-m);padding:9px 10px;margin:10px 0 4px;background:#fff} .inst-regelnm{flex:1;min-width:0;font-size:var(--tekst-m);font-weight:600;color:var(--ink)} .inst-regelnm i{display:block;font-style:normal;font-weight:400;font-size:var(--tekst-s);color:var(--mid);margin-top:1px} .inst-regel .btn.mini{flex:0 0 auto;width:auto;margin:0;padding:6px 10px;font-weight:400} /* de leidingen die je zelf hebt getekend: kleur, naam, meters, weghalen */ .inst-handlijst{margin-top:9px;display:flex;flex-direction:column;gap:6px} .inst-handrij{display:flex;align-items:center;gap:8px;border:1px solid var(--line); border-radius:var(--rond-m);padding:8px 10px;background:#fff} .inst-handrij .inst-bestnm i{display:block;font-style:normal;font-weight:400;font-size:var(--tekst-s);color:var(--mid);margin-top:1px} .inst-plaats{display:flex;gap:8px;margin:8px 0 10px;flex-wrap:wrap} .inst-plaats .btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:150px} .inst-zonder{margin-top:10px;border-top:1px solid var(--line);padding-top:8px} .inst-zonderrij{display:flex;flex-direction:column;gap:1px;padding:5px 0;font-size:var(--tekst-s);line-height:1.45} .inst-zonderrij span{font-weight:600;color:var(--ink)} .inst-zonderrij i{font-style:normal;color:var(--mid)} .inst-let svg,.inst-goed svg{flex:0 0 auto;margin-top:1px} .inst-bron{display:flex;flex-direction:column;gap:9px;margin-top:10px} .inst-bronrij{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:flex-end; border:1px solid var(--line);border-radius:var(--rond-m);padding:9px 10px} .inst-bronnm{flex:1 0 100%;font-size:var(--tekst-m);font-weight:600} .inst-aanname{font-style:normal;font-weight:400;font-size:var(--tekst-xs);color:#a06a12; background:#fdf3e3;border-radius:var(--rond-s);padding:1px 5px;margin-left:5px} .inst-bronrij.open{border-color:#2f7d4f;box-shadow:0 0 0 2px rgba(47,125,79,.16)} .inst-bronnm{display:flex;align-items:center;gap:8px} .inst-bronnm .btn.mini{display:inline-block;width:auto;margin:0 0 0 auto;padding:4px 8px;flex:0 0 auto;font-weight:400} .inst-vlv{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--rond-m); padding:9px 10px;margin:8px 0 10px;cursor:pointer;font-size:var(--tekst-s);line-height:1.45;background:#fff} .inst-vlv input{margin:2px 0 0;flex:0 0 auto} .inst-vlv i{display:block;font-style:normal;color:var(--mid);margin-top:1px} .inst-bronrij label{display:flex;flex-direction:column;gap:3px;font-size:var(--tekst-xs);color:var(--mid);flex:1 1 84px;min-width:0} .inst-bronrij select,.inst-bronrij input{width:100%;min-width:0;font-size:var(--tekst-m);padding:6px 5px} .inst-lijst{display:flex;flex-direction:column;gap:6px} .inst-rij{display:flex;align-items:center;gap:9px;width:100%;text-align:left; border:1px solid var(--line);border-radius:var(--rond-m);padding:9px 10px;background:#fff;min-height:46px} .inst-rij:hover{border-color:var(--acc)} .inst-rij.open{border-color:var(--acc);border-bottom-left-radius:0;border-bottom-right-radius:0} .inst-rij .inst-ico{flex:0 0 auto;display:flex;color:var(--mid)} .inst-rij.klaar .inst-ico{color:#3d8a5f} .inst-rij.fout .inst-ico{color:#c0392b} .inst-nm{flex:1 1 auto;min-width:0;font-size:var(--tekst-m)} .inst-nm i{display:block;font-style:normal;font-size:var(--tekst-xs);color:var(--mid);margin-top:1px} .inst-chips{flex:0 0 auto;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end} /* ---- de vier standen van een aansluiting ---- Ze waren met drie: fout, ok, open. Sinds stap 4 met de hand gaat is er een vierde die ertoe doet: LOS, een leiding die getekend is maar waarvan het uiteinde nergens op aansluit. Die leest als half werk en hoort er ook zo uit te zien: de kleur van het systeem, maar gestreept. De chip is sinds 14 september een KNOP: erop klikken zet de pen op die aansluiting klaar. Vandaar de cursor en de hover. */ .inst-chip{font-style:normal;font-weight:400;font-size:var(--tekst-xs);line-height:1;padding:4px 6px; border-radius:var(--rond-s);border:1px solid var(--k);color:var(--k);background:#fff; white-space:nowrap;cursor:pointer} .inst-chip:hover{box-shadow:0 0 0 2px rgba(47,125,79,.18)} .inst-chip.klaar{background:var(--k);color:#fff} .inst-chip.los{border-style:dashed;background:#fff;color:var(--k)} .inst-chip.open{border-style:dotted;color:var(--mid);border-color:var(--line)} .inst-chip.fout{border-color:#c0392b;color:#fff;background:#c0392b} /* ---- de telregel boven Aansluiten ---- Een regel, geen balk en geen percentage, in de stijl van de rail. Met een handmatige stap is dit het getal dat ertoe doet: nul meters betekent hier "nog niets getekend" en niet "niets nodig". */ .inst-voortgang{display:flex;flex-direction:column;gap:2px;padding:9px 11px;margin:8px 0 8px; border:1px solid var(--line);border-radius:var(--rond-m);background:#fafbfa} .inst-voortgang b{font-size:var(--tekst-m)} .inst-voortgang i{font-style:normal;font-size:var(--tekst-xs);color:var(--mid)} .inst-openrij{margin-bottom:4px} .inst-eischip{font-size:var(--tekst-xs);line-height:1;padding:6px 8px;border-radius:var(--rond-s); border:1px solid var(--k);color:var(--k);background:#fff;cursor:pointer;white-space:nowrap} .inst-eischip:hover{background:var(--k);color:#fff} .inst-eischip.open{border-style:dotted} .inst-eischip.los{border-style:dashed} .inst-eischip.fout{border-color:#c0392b;color:#c0392b} .inst-rijblok{display:contents} .inst-ptknop{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px} .inst-ptgroep{flex:0 0 160px} .inst-detail{border:1px solid var(--acc);border-top:0;border-radius:0 0 8px 8px;padding:10px 11px;background:#fbfcfd} .inst-pt{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:flex-end;padding:7px 0;border-top:1px solid var(--line)} .inst-pt:first-child{border-top:0;padding-top:0} .inst-ptnm{flex:1 0 100%;font-size:var(--tekst-s);font-weight:600;display:flex;align-items:center;gap:6px} .inst-ptnm i{width:10px;height:10px;border-radius:var(--rond-s);flex:0 0 auto} .inst-pt label{display:flex;flex-direction:column;gap:3px;font-size:var(--tekst-xs);color:var(--mid);flex:0 0 88px} .inst-pt label input{width:100%;font-size:var(--tekst-m);padding:6px 5px} .inst-ptst{flex:1 1 120px;font-size:var(--tekst-xs);color:var(--mid);line-height:1.45} .inst-ptst .rood{color:#c0392b} .btn.mini{font-size:var(--tekst-s);padding:6px 9px} .inst-fout{display:flex;flex-direction:column;gap:6px} .inst-foutrij{display:block;width:100%;text-align:left;font-size:var(--tekst-s);line-height:1.5; border:1px solid #f0c9c4;background:#fdf5f4;color:#8c2f24;border-radius:var(--rond-m);padding:10px 11px} .inst-foutrij:hover{border-color:#c0392b} .inst-voorbehoud{font-size:var(--tekst-xs);color:var(--mid);line-height:1.5;margin-top:14px; padding-top:10px;border-top:1px solid var(--line)} /* tijdens het opnemen staat het canvas op 1920x1080; contain houdt het beeld onvervormd, zodat je op het scherm precies het opgenomen kader ziet */ #three.opname{background:#000} #three.opname canvas{object-fit:contain;pointer-events:none} /* uitleg bij rondlopen: laag in beeld, boven de knoppenrij, klikt nergens doorheen */ #walkhint{ position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:6;display:none; background:rgba(30,41,59,.93);color:#fff;padding:8px 15px;border-radius:var(--rond-m); font-size:var(--tekst-m);line-height:1.5;max-width:540px;text-align:center;pointer-events:none; } #walkhint b{color:var(--gold)} #walkhint .walkbouw{font-weight:700;color:#F5C26B} /* wie een kijklink kreeg ziet het ontwerp en niet de bouwplaats. Het venster dat dit tot 26 september zei, sloeg de kijkmodus ook over. */ body.kijkmodus #walkhint .walkbouw{display:none} /* de telefoon-joystick (A8): verschijnt waar je vinger neerkomt */ #tjbase{position:fixed;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%; background:rgba(30,41,59,.12);border:1.5px solid rgba(255,255,255,.65);z-index:7;display:none; pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} #tjknob{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%; background:rgba(255,255,255,.92);box-shadow:var(--schaduw-2);transform:translate(-50%,-50%)} #drawhint,#melding{ position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:6;display:none; background:rgba(30,41,59,.93);color:#fff;padding:10px 18px;border-radius:var(--rond-m); font-size:var(--tekst-m);line-height:1.55;max-width:560px;text-align:center;pointer-events:none; } #drawhint b{color:var(--gold)} #melding{top:52px;z-index:8} /* Annuleren onder de plaatsmelding (C-01): plaatsKnop in planner/openingen.js zet de top vlak onder de melding, hier staat alleen de vorm */ #plaatsuit{ position:absolute;top:100px;left:50%;transform:translateX(-50%);z-index:8; display:flex;align-items:center;justify-content:center; min-height:36px;padding:0 16px;border:1px solid var(--line);border-radius:var(--rond-m); background:#fff;color:var(--ink);font-size:var(--tekst-m);box-shadow:var(--schaduw-2);cursor:pointer; } #plaatsuit[hidden]{display:none} #plaatsuit:focus-visible{outline:2px solid var(--wk);outline-offset:2px} @media (pointer:coarse){ #plaatsuit{min-height:44px;padding:0 20px} } @media (hover:hover){ #plaatsuit:hover{background:var(--bg)} } /* ---- de tekenhint ---- Hij stond samen met de melding als twee zwarte balken over elkaar heen, en allebei liepen ze onder het paneel door. Er is er nog EEN, hij is kort, en hij staat gecentreerd boven het vrije deel van het blad - hintPlek() in planner/plattegrond.js zet de linkerpositie. Een harde bovengrens op de breedte houdt hem hoe dan ook binnen beeld, ook op een telefoon. */ #drawhint{ padding:7px 14px;font-size:var(--tekst-m);line-height:1.4; max-width:min(360px,calc(100% - 28px)); white-space:normal; } /* het draadkruis: zonder dit is er geen enkel teken dat je staat te tekenen */ svg#sheet.tekenen{cursor:crosshair} svg#sheet.tekenen *{cursor:crosshair} /* het handje van de loep. Staat NA het draadkruis en na body.liniaal, want zolang je de spatie vasthoudt ben je aan het schuiven en niet aan het tekenen of meten. */ body.loephand svg#sheet,body.loephand svg#sheet *{cursor:grab} body.loepsleep svg#sheet,body.loepsleep svg#sheet *{cursor:grabbing} /* ---------- de aandachtsbalk ---------- De rode omtrekken op de tekening zeggen WELK ding er iets mis mee is; deze balk zegt WAT. Hij blijft staan zolang er iets rood is, want een toast van drie seconden is weg voordat je hem gelezen hebt. Hij blokkeert niets: de tekening werkt gewoon door, dit is een opmerking en geen foutmelding. */ #aandacht{ /* linksonder, en met een bodem MAAR ZONDER top: aandachtUpdate rekent de bottom uit zodat hij boven de knoppenrij blijft, en met allebei gezet rekt de kaart van boven tot onder uit. */ position:absolute;left:14px;bottom:14px;z-index:8;display:none; width:max-content;max-width:min(380px,calc(100% - 28px)); background:#fff;border:1px solid #d92b1f;border-left:4px solid #d92b1f;border-radius:var(--rond-m); padding:9px 34px 10px 13px;box-shadow:var(--schaduw-3); font-size:var(--tekst-m);line-height:1.5;color:#1e293b; } /* het kruisje zit IN de kaart, rechtsboven; de rechterpadding hierboven houdt de tekst eruit vandaan zodat een lange regel er niet onderdoor loopt */ #aandacht .sluit{ position:absolute;top:5px;right:5px;width:22px;height:22px;border:0;border-radius:var(--rond-s); background:none;color:#94a3b8;font-size:var(--tekst-2xl);line-height:1;padding:0; } #aandacht .sluit:hover{background:#f1f5f9;color:#334155} #aandacht h4{margin:0 0 4px;font-size:var(--tekst-s);letter-spacing:.7px;text-transform:uppercase;color:#d92b1f} #aandacht ul{margin:0;padding:0;list-style:none} #aandacht li{margin:3px 0;padding-left:11px;position:relative} #aandacht li:before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:#d92b1f} #aandacht li b{font-weight:600} #aandacht .meer{margin-top:5px;color:#64748b;font-size:var(--tekst-s)} /* ---- accepteren, en terugzetten ---- Elke opmerking draagt zijn eigen knop; de geaccepteerde staan eronder, ingeklapt, met een knop om ze terug te zetten. Is er niets meer rood maar staat er wel iets geaccepteerd, dan blijft de kaart in beeld in een rustige grijze uitvoering: dat is de enige weg terug naar wat er is geaccepteerd. */ #aandacht .okbtn{ border:1px solid var(--line);border-radius:var(--rond-s);background:#fff;color:#334155; font-size:var(--tekst-s);font-weight:600;padding:2px 7px;margin-left:4px;white-space:nowrap; } #aandacht .okbtn:hover{background:#f1f5f9;color:#0f172a} #aandacht .okvak{margin-top:7px;padding-top:6px;border-top:1px solid var(--line)} #aandacht .oktoggle{ border:0;background:none;padding:0;color:#64748b;font-size:var(--tekst-s);font-weight:600; text-decoration:underline;text-underline-offset:2px; } #aandacht .oktoggle:hover{color:#334155} #aandacht .oklijst{margin:5px 0 0;padding:0;list-style:none;color:#64748b} #aandacht .oklijst li{margin:3px 0;padding-left:11px;position:relative} #aandacht .oklijst li:before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:#94a3b8} #aandacht.rustig{border-color:var(--line);border-left-color:#94a3b8} #aandacht h4.rustig{color:#64748b} /* ---------- de vraag: dezelfde taal als de catalogus ---------- Zelfde overlay, zelfde kaart met kopregel en kruisje, zelfde productkaarten (beeld boven, beige blok met kruimelpad en naam eronder, de donkere pil bij aanwijzen). De vraag en de catalogus lezen zo als één systeem. */ #openvraagbox{max-width:min(940px,94vw);max-height:min(760px,90vh)} #openvraagbox .pophead h2{font-size:var(--tekst-2xl);font-weight:700} #openvraagbox .ovkop{padding:16px 18px 6px;display:flex;flex-direction:column;gap:4px} #openvraagbox .ovkop h3{margin:0;font-size:var(--tekst-4xl);font-weight:700;line-height:1.2} #openvraagbox .ovkop .sub{margin:0;font-size:var(--tekst-m);color:var(--mid);line-height:1.5;max-width:640px} /* de puntenlijst van een mededeling (cfg.lijst in ovVenster) */ #openvraagbox .ovkop .ovpunten{margin:2px 0;padding:0 0 0 18px;font-size:var(--tekst-m); color:var(--mid);line-height:1.5;max-width:640px;display:flex;flex-direction:column;gap:4px} #openvraagbox .popbody{padding:12px 18px 20px} #openvraagbox .pgrid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px} #openvraagbox .pgrid .pcard .pimg{height:120px} #openvraagbox .pgrid .foto .glyph{display:flex;align-items:center;justify-content:center;height:120px;width:100%;color:var(--ink)} #openvraagbox .pgrid .foto .glyph svg{width:64px!important;height:64px!important} #openvraagbox .pgrid .foto .getal{display:flex;align-items:baseline;justify-content:center;gap:4px;height:120px;width:100%} #openvraagbox .pgrid .foto .getal b{font-size:34px;font-weight:700;letter-spacing:-.5px;line-height:120px} #openvraagbox .pgrid .foto .getal i{font-style:normal;font-size:var(--tekst-l);color:var(--mid)} #openvraagbox .pgrid .pcard .nm{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #openvraagbox .pgrid .pcard .pr{font-size:var(--tekst-m);font-weight:600;color:var(--mid)} #openvraagbox .ovfoot{ flex:0 0 auto;border-top:1px solid var(--line);padding:11px 18px;background:#F3F6F5; display:flex;justify-content:flex-end;align-items:center;gap:12px; } #openvraagbox .ovfoot .hint{margin-right:auto;font-size:var(--tekst-m);color:var(--mid)} /* De keuze die de tekening weggooit ("Toch opnieuw beginnen" in het venster Opslaan kan nu niet). Die hoort niet even zwaar te wegen als de twee veilige wegen ernaast, dus geen knop maar een tekstlink, en helemaal links zodat hij niet onder de duim ligt die de hoofdknop zoekt. */ /* De voetbalk van "Opslaan kan nu niet": drie hele zinnen. Op een smal scherm breken die af naar een volgende regel in plaats van uit de kaart te lopen. Alleen deze vraag, want de gewone vraag heeft korte woorden. */ #openvraagbox .ovfoot.driewegen{flex-wrap:wrap;row-gap:8px} #openvraagbox .ovfoot .tb.gevaar{ margin-right:auto;background:none;border:0;box-shadow:none;padding:7px 0; font-weight:400;color:#8A3B28;text-decoration:underline;text-underline-offset:3px; } #openvraagbox .ovfoot .tb.gevaar:hover{color:#B23A1E;border-color:transparent;box-shadow:none} @media (max-width:600px){ #openvraagbox .pgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px} #openvraagbox .pgrid .pcard .pimg,#openvraagbox .pgrid .foto .glyph,#openvraagbox .pgrid .foto .getal{height:96px} #openvraagbox .ovkop{padding:12px 12px 4px} #openvraagbox .popbody{padding:10px 12px 16px} } /* ---------- hetzelfde venster, nu als vraag met ja en nee ---------- bevestig() en vraagTekst() lenen de kaart van de vraag: dezelfde kopregel, dezelfde voetbalk, dezelfde knoppen. Alleen smaller, want er staat geen raster met kaarten in maar een zin en twee knoppen. */ #openvraag.bevestig .ovkop{padding:18px 18px 20px;gap:8px} #openvraag.bevestig .ovkop h3{font-size:var(--tekst-3xl)} #openvraag.bevestig .ovkop .sub{font-size:var(--tekst-l)} #openvraag.bevestig .ovveld input{ width:100%;margin-top:4px;padding:9px 11px;font:inherit;font-size:var(--tekst-xl); border:1px solid var(--line);border-radius:var(--rond-m);background:#fff;color:var(--ink); } #openvraag.bevestig .ovveld input:focus-visible{outline:2px solid var(--acc);outline-offset:1px} /* Een bevestiging ligt boven ALLES. Ze stond op 100010 en het papieren formuliervenster (#ovform) op 100012, dus de vraag "Deellink intrekken?" kwam ACHTER het venster waar hij uit kwam: de knop Intrekken was niet aan te klikken (Enter deed het wel, want de focus stond er wel op). Een bevestiging is per definitie het laatste wat er gevraagd wordt, dus krijgt hij een laag boven de hele papieren familie (#ovform 100012, #ovpop 100011, #profielpoort 100002, #poort 100000, #overzicht 99999). De kiesvensters van vraag() blijven op hun eigen laag (.ovl, 60): die staan in de planner en horen niet over de poort heen. */ #openvraag.bevestig{z-index:100020} /* ================= DE PAPIERSTIJL ================= Dit is de vorm van een venster in deze app: een WITTE kaart met donkere inkt, een harde schaduw in plaats van een zachte, rechte hoeken van 4 px, knoppen met een klein schaduwtje, en EEN oranje knop - de hoofdhandeling. De kaart was beige (#EEE7DE); op 16 september, vlak voor de deploy, vroeg Sander om wit. Dat is EEN besluit over de grondkleur en geen herontwerp, dus alleen de waarden hieronder zijn om. Wat er bij die omzetting is afgewogen, want het waren er meer dan een: - de kaart zelf wordt #FFFFFF; - een knop kan op een wit vel niet LICHTER zijn dan de kaart, zoals het papierwit (#FDF8F0) op het beige wel was. Hij wordt dus net iets donkerder: #F2F4F5, met dezelfde harde schaduw. Zo blijft het verschil tussen kaart en knop even groot als het was, alleen de andere kant op; - een productkaart in een kiesvenster wordt wit en houdt zijn rand; zijn informatiestrook eronder blijft er een tint onder (#F2F4F5), anders wordt de kaart een vlakke bak en verdwijnt de tweedeling foto/tekst; - het invoerveld wordt #F8F9FA: wit in wit met alleen een randje leest niet als een veld; - het videovak van het uitlegvenster wordt #EDEFF0, een neutrale bak in plaats van een warme; - de bijtekst was warm bruingrijs (#4b4741) en wordt neutraal (#4A4F52), want warm grijs op wit leest vuil. Contrast op wit: 8,9 op 1. - de amberregel "nog in ontwikkeling" gaat terug naar de tinten die voor een witte kaart getekend waren. De inkt (#212121, 16 op 1 op wit) en het oranje van de hoofdknop (#EC633D) blijven precies wat ze waren. Alles wat hier staat gold tot 15 september alleen boven een papieren scherm (het overzicht, de poort, het abonnement), via een vlag cfg.papier die de aanroeper moest meegeven. Waarom dat weg is. Sander zag twee vensters naast elkaar die allebei uit ovVenster komen: de melding "Waar we nu aan werken" op de ontwerpenpagina (papier, oranje knop) en "Niet opgeslagen" in de planner (wit, zwarte knop). Zijn oordeel: die moeten dezelfde stijl hebben, en wel de papieren. Een vlag per aanroeper is precies hoe dat verschil is ontstaan - wie een nieuw venster maakte en de vlag vergat, kreeg stilletjes de andere vorm. Daarom staat de stijl nu op het venster zelf. Sinds 16 september op #openvraag zonder meer, dus op ALLE drie de soorten die dat venster kent: de vragen van ovVenster (bevestig, bevestigDrie, vraagTekst) en de kiesvensters van vraag() met hun kaartraster. Er is niets meer te vergeten of te laten afdrijven. De vlag cfg.papier mag de aanroeper nog steeds meegeven, hij doet alleen niets meer. #stapuitleg deelt dit blok. Dat venster is geen ovVenster (het komt uit zichzelf op en vraagt niets, zie stapUitlegToon in planner/vragen.js), maar het is wel een venster in deze app, dus draagt het dezelfde kaart. Het heeft zijn eigen namen voor de voetbalk en de tekst; die staan hieronder erbij, in hetzelfde blok, zodat de twee niet opnieuw uit elkaar lopen. Hier stond dat de kiesvensters van vraag() NIET meegingen, omdat hun kaarten de taal van de catalogus spreken. Dat besluit is op 16 september genomen: ze gaan mee, met hun kaarten intact (zie het blok kiesvensters hieronder). De rode tekstknop .gevaar blijft wel rood: gevaar en bevestiging zijn twee verschillende dingen, en die regel staat met opzet zwaarder (#openvraagbox .ovfoot .tb.gevaar) dan de hoofdknop hier. Die hoofdknop is sinds 19 september niet meer oranje maar de gewone donkere inkt; de reden staat bij die regel zelf. */ #openvraag{background:rgba(33,33,33,.42)} #openvraag .ovlbox, #stapuitleg .ovlbox{background:#FFFFFF;color:#212121;border-radius:var(--rond-s);box-shadow:var(--papier-3)} #openvraag .pophead, #stapuitleg .pophead{border-bottom:1px solid rgba(55,55,55,.18)} #openvraag .popx, #stapuitleg .popx{color:#212121} #openvraag .popx:hover, #stapuitleg .popx:hover{background:rgba(55,55,55,.1);color:#212121} #openvraag .ovkop .sub, #stapuitleg .sutekst{color:#4A4F52} #openvraag .ovfoot, #stapuitleg .sufoot{background:transparent;border-top:1px solid rgba(55,55,55,.18)} #openvraag .tb, #stapuitleg .tb{ background:#F2F4F5;color:#212121;border:0;border-radius:var(--rond-s); box-shadow:var(--papier-1);font-weight:600; } #openvraag .tb:hover, #stapuitleg .tb:hover{color:#212121;box-shadow:var(--papier-2)} /* de hoofdhandeling. Bij drie knoppen is dit de enige gekleurde, dus je ziet zonder lezen welke de bevestiging is. Een kiesvenster heeft er geen: daar kies je door op een KAART te klikken, en Annuleren is geen hoofdhandeling. Er staat er dus met opzet geen oranje knop in die vensters. */ /* ---- de hoofdknop in een venster ---- De kleur staat op EEN plek, als --vensterknop bovenin dit bestand, met de reden erbij. Hij is oranje, en dat is op 19 september op beeld beslist. Wat je hier NIET moet doen is hem gelijktrekken met `.tb.dark` daarbuiten, hoe verleidelijk dat ook leest: dezelfde klasse, twee kleuren. Op een scherm concurreren knoppen met elkaar en is oranje voorbehouden aan de voorwaartse zet; in een modaal venster staat er maar een hoofdknop in beeld en valt er niets te verwarren. Dat is geprobeerd en teruggedraaid. Wat er wel aan mankeert, eerlijk: wit op #EC633D haalt 3,27 op 1 en de eis voor tekst van deze grootte is 4,5 (review/kleurstelsel/RAPPORT.md gaat daar niet omheen). Donkere inkt OP hetzelfde oranje haalt 5,48 en zou voldoen zonder de kleur aan te raken. Dat is de weg als iemand dit ooit wil oplossen; de knop een andere kleur geven is het niet. */ #openvraag .tb.dark, #stapuitleg .tb.dark{background:var(--vensterknop);color:#fff;border-color:var(--vensterknop)} #openvraag .tb.dark:hover, #stapuitleg .tb.dark:hover{background:var(--vensterknop-hover);color:#fff} #openvraag .tb:focus-visible, #stapuitleg .tb:focus-visible{outline:2px solid #212121;outline-offset:2px} /* net zo zwaar als de witte regel hierboven (#openvraag.bevestig .ovveld input), anders wint die en blijft het veld wit op een papieren kaart */ #openvraag.bevestig .ovveld input{background:#F8F9FA;border:1px solid rgba(55,55,55,.22);border-radius:var(--rond-s);color:#212121} /* ---- en de kiesvensters van vraag() ---- Sander, 16 september, over "Deur, raam of nis?": dezelfde stijl als alle andere pop-ups. De kaart eromheen is dus papier, net als hierboven. De KAARTEN in het raster blijven wat ze zijn: een tekening, een naam en een regel eronder, de taal van de catalogus. Alleen hun ondergrond en hun rand gaan mee, want een koele grijze tegel (#fff met #D9E0DD) op een beige vel leest als een stuk uit een ander programma. Vorm, indeling, de donkere pil bij aanwijzen en de staat "gekozen" blijven onaangeroerd. */ #openvraag .pcard{background:#FFFFFF;border-color:rgba(55,55,55,.18)} #openvraag .pgrid .foto{background:#FFFFFF} #openvraag .pgrid .info{background:#F2F4F5;border-top-color:rgba(55,55,55,.14)} #openvraag .pgrid .crumb,#openvraag .pgrid .lever{color:#5B6163} #openvraag .pgrid .pcard .pr{color:#212121} #openvraag .pcard .pimg{background:transparent} #openvraagbox .ovfoot .hint{color:#4A4F52} /* een goedgekeurde kaarttekening (RK_ILLU) in een kiesvenster: dezelfde verhouding als op de kaarten in het paneel, dus 4 op 3 en meeschalen in plaats van uitrekken. Zie roomKaartBeeld in planner/paneel.js en de tweelingregel bij .kaartgrid .pcard .pimg.rkill. */ #openvraagbox .pgrid .pcard .pimg.rkill{height:auto;aspect-ratio:4/3;background:transparent} /* en de twee stukken die alleen #stapuitleg heeft: het videovak en de amber regel van een stap die nog in ontwikkeling is. Die amber stond op wit en staat nu op papier, dus hij mag een tint warmer en donkerder zijn. */ #stapuitleg .suvideo{background:#EDEFF0} #stapuitleg.film .suvideo video{background:#EDEFF0} #stapuitleg .subouw{background:rgba(180,120,20,.10);color:#7A5314;border-color:rgba(180,120,20,.24)} @media (max-width:600px){ /* de kiesvensters worden hier schermvullend, want daar kies je op foto's. Een vraag met twee knoppen heeft die ruimte niet nodig en zou als een half leeg scherm lezen, dus die blijft een kaart in het midden. */ #openvraag.bevestig{padding:16px} #openvraag.bevestig .ovlbox{height:auto;border-radius:var(--rond-s)} } /* het hoekvenster: dezelfde witte kaart, compact, zwevend naast het hoekpunt */ /* #vrijpop is hetzelfde venstertje als #hoekpop, met de vrije maten links en rechts van het aangewezen element erin. Een venster, een opmaak: twee kaartjes die naast elkaar op het blad zweven horen er hetzelfde uit te zien. Alleen de labels zijn er breder, want daar staat waar de maat naartoe loopt ("tot de deur") in plaats van "Wand 3". */ #hoekpop,#vrijpop{ position:absolute;z-index:9;display:none;width:212px;padding:10px 12px 8px; background:#fff;border:1px solid var(--line);border-radius:var(--rond-l); box-shadow:var(--schaduw-4); } #vrijpop{width:234px} #hoekpop.open,#vrijpop.open{display:block} #hoekpop .kop,#vrijpop .kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} #hoekpop .kop h3,#vrijpop .kop h3{margin:0;font-size:var(--tekst-xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--mid);font-weight:600} #hoekpop .row,#vrijpop .row{margin-bottom:6px} #hoekpop .row label{width:64px;flex:0 0 64px} #vrijpop .row label{width:96px;flex:0 0 96px;font-size:var(--tekst-s)} #hoekpop .row input,#vrijpop .row input{flex:1;min-width:0;width:auto} #hoekpop .popx,#vrijpop .popx{padding:0 4px;margin-right:-4px} /* Wat een verkoper aan tafel nooit nodig heeft staat weggevouwen in plaats van weggehaald: een regel om op te klikken, en alles staat er nog. */ details.meer{margin:10px 0 0} details.meer>summary{ cursor:pointer;list-style:none;font-size:var(--tekst-s);color:var(--mid); padding:6px 0;border-top:1px solid var(--line); } details.meer>summary::-webkit-details-marker{display:none} details.meer>summary::before{content:"› ";display:inline-block;transition:transform .12s} details.meer[open]>summary::before{content:"⌄ "} details.meer>summary:hover{color:var(--ink)} /* het balkje bij het aangeklikte element: ronde icoonknoppen, alleen die bij dit ding horen, precies zoals Villeroy & Boch het doet. Zweeft boven het element in 2D en in 3D. */ #elpop{ position:absolute;z-index:9;display:none;gap:4px;padding:4px; background:#fff;border:1px solid var(--line);border-radius:var(--rond-vol); box-shadow:var(--schaduw-3); } #elpop.open{display:flex} #elpop button{ width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center; border:0;background:transparent;border-radius:var(--rond-vol);color:var(--ink);cursor:pointer; } #elpop button svg{width:17px;height:17px} #elpop button:hover{background:var(--wk-zacht);color:var(--wk)} #elpop button.aan{background:var(--wk);color:#fff} #elpop button.rood:hover{background:#fdecea;color:#A32D2D} @media (prefers-reduced-motion:no-preference){ #elpop button{transition:background .12s,color .12s} } /* het getal bij de greep: hangt aan het bolletje dat je vasthoudt, niet in een paneel ernaast. Klikbaar is het niet, het is puur aflezen. */ #greeplabel{ position:absolute;z-index:9;display:none;pointer-events:none; padding:5px 9px;background:#fff;border:1px solid var(--line);border-radius:var(--rond-m); box-shadow:var(--schaduw-3);white-space:nowrap; } #greeplabel b{display:block;font-size:var(--tekst-2xl);font-weight:700;color:#2F7D4F;line-height:1.15} #greeplabel i{display:block;font-style:normal;font-size:var(--tekst-xs);color:var(--mid);margin-top:1px} /* zwevende bewerk-knop bij hover over een geplaatst product */ #editbtn{ position:absolute;z-index:7;display:none;align-items:center;gap:6px; padding:6px 10px;border:1px solid var(--line);background:#fff;border-radius:var(--rond-m); font-size:var(--tekst-m);box-shadow:var(--schaduw-2); } #editbtn:hover{border-color:var(--acc);color:var(--acc)} /* ---------- wat elke stap laat staan ---------- Een knop verdwijnt nooit: wat in deze stap niets kan doen staat grijs (hudStand zet de kijkstanden en de 2D/3D-schakelaar op disabled). Alleen het zwevende Aanpassen-knopje bij een product heeft in stap Opleveren geen doel, want daar is het beeld het blad zelf. */ body.stap5 #editbtn{display:none!important} /* ---------- stap 4: het A4 zoals het uit de printer komt ---------- Het blad ligt als papier op de warme ondergrond, naast het paneel. Terwijl je de titel typt of de prijzen aanzet zie je het blad meelopen. Daarom zijn de kop en de weergavevinkjes juist hier komen te staan. */ body.stap5 #sheetwrap{ display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg); } /* ---- en het blad houdt de rij van de pil vrij ---- De pil Verder zweeft los over het blad. Op het SCHERM wijkt de schaalbalk voor die hoek opzij (schaalRand in planner/plattegrond.js), maar op het A4 kan dat niet: dat is het blad zoals het uit de printer komt, en daar staat de balk op zijn eigen plek, 28 px boven de onderrand. Loopt het venster zo dat het blad op zijn HOOGTE vastloopt en zijn rechteronderhoek tot onder de pil komt, dan ligt de pil op die balk. Gemeten over 43 venstervormen gebeurt dat bij precies een, 1280 x 900, en dan drie pixels breed en een hoog. Klein, maar het is dezelfde fout en die hoort dicht. Vandaar deze regel, en niet een die eerst meet of ze elkaar raken: dat is geprobeerd en het werkte niet betrouwbaar, want het blad verandert ook van maat als het stappaneel opengaat of dichtvalt en dan komt er geen meting langs. Zo staat het er altijd goed, ten koste van 42 px bladhoogte (op 1280 x 900 is dat 5 procent, op 2000 x 1300 ruim 3). De 66 was de band van de pil Verder (16 + 40 + 10). Die staat sinds 18 september linksboven, maar de band blijft staan: de loep en de schaalbalk liggen nog in die hoek, en op 1280 x 900 lag de balk van het A4 drie pixels onder wat daar stond (zie blok 29 van tests/uitest-loep.mjs). */ body.stap5 #sheetwrap{padding-bottom:66px} /* het blad staat NAAST het paneel, niet erachter: je verandert de kop en ziet het blad meelopen, en dat werkt alleen als je het blad ook echt ziet. Staat het paneel dicht, dan krijgt het blad de hele stage. Alleen boven 600 px: daaronder is het paneel een blad onderaan het scherm en zou deze inspringing de tekening tot een streepje knijpen. */ @media (min-width:601px){ body.stap5 #stappop.open ~ #stage #sheetwrap{left:calc(82px + var(--panelw) + 14px)} } /* width:auto met height:100% klapt op een telefoon dicht tot een streepje: de hoogte is dan leidend en max-width knijpt alleen de breedte. Twee keer auto met twee maxima laat de verhouding het werk doen, en dat klopt van 390 tot 2000 pixels. */ body.stap5 svg#sheet{ width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:297/210;background:#fff; border:1px solid var(--line);box-shadow:var(--schaduw-4); pointer-events:none; } /* ---------- opleverpaneel ---------- */ .samrij{display:flex;justify-content:space-between;gap:12px;align-items:baseline; padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--tekst-m)} .samrij .k{color:var(--mid);flex:0 0 auto} .samrij .v{text-align:right;font-weight:600;min-width:0} .samrij.tot .v{font-size:var(--tekst-xl)} .optrow .th svg{display:block;margin:auto} details.meekijk{margin-top:14px;border:1px solid var(--line);border-radius:var(--rond-m);background:#fff} details.meekijk>summary{padding:10px 12px;font-size:var(--tekst-m);font-weight:600;cursor:pointer;list-style:none} details.meekijk>summary::-webkit-details-marker{display:none} details.meekijk>summary::after{content:"+";float:right;color:var(--mid)} details.meekijk[open]>summary::after{content:"–"} details.meekijk>summary:hover{color:var(--acc)} details.meekijk .mkbody{padding:2px 12px 12px;border-top:1px solid var(--line)} .leeg-uitleg{font-size:var(--tekst-m);line-height:1.6;color:var(--ink)} /* ---------- productvenster ---------- Zweeft rechts over de tekening, want je stelt het product in terwijl je ernaar kijkt. Staat het product zelf rechts in beeld, dan springt het venster naar links: het mag nooit afdekken wat het bewerkt. */ #side{width:300px;right:14px;top:14px;bottom:14px} #side.links{right:auto;left:82px;top:calc(16px + var(--pilband))} /* Meten in plaats van een breedte raden (zie hudRuimte): het productvenster loopt van boven tot onder langs de rechterkant en de knoppenbalk loopt onderlangs de volle breedte. Waar die twee elkaar raken lag de balk eronder. Nagemeten op 820 staand was "Video maken" met geen enkele van vijf hoeken meer aan te klikken - elementFromPoint gaf #sidebody - op 768 gold dat ook voor "Foto" en op 601 zelfs voor "Rondje draaien" en "Styling". Niet oplossen met een schermbreedte maar met een meting: hudRuimte kijkt of ze elkaar echt raken en zet dan pas .boven, met de gemeten bovenkant van de balk in --sidebot. Zo maakt het niet uit hoe lang het paneel is, wat er geselecteerd staat, of hoe hoog de balk toevallig is. Het paneel wordt alleen korter, niet smaller: .popbody scrolt. Twee selectors, en dat is nodig: verderop staat `body.mode3d #side{bottom:62px}` voor smalle schermen, en dat weegt zwaarder dan een kaal `#side.boven`. Op 601 px bleef de balk daardoor bedekt terwijl 768 en 820 al goed waren. */ #side.boven,body.mode3d #side.boven{bottom:var(--sidebot,14px)} .ro{font-size:var(--tekst-m);padding:7px 0;width:100%} /* ---------- optiekiezer: samenvattingsrij + fotomodal ---------- */ .optrow{ display:flex;gap:9px;align-items:center;width:100%;text-align:left;margin-bottom:6px; padding:7px;border:1px solid var(--line);border-radius:var(--rond-m);background:#fff; } .optrow:hover{border-color:var(--acc)} .optrow .th{ width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);border-radius:var(--rond-s); background:#fff;object-fit:contain;display:block; } .optrow .th.dot{width:26px;height:26px;flex:0 0 26px;margin:8px;border-radius:50%;border-width:2px} /* een uitvoeringsknop draagt drie getallen, geen los aantal centimeters */ .maatknop.breed{min-width:96px;letter-spacing:.01em} /* Een staal van bijna wit verdwijnt in de witte kaart: gemeten 1,11:1, en wat het vorm gaf was alleen de haarlijn eromheen. Een donkerder rand, en alleen bij lichte stalen, want om een donker staal zou die juist gaan storen. */ .optrow .th.dot.bijnawit{border-color:#9aa8a3} .optrow .bd{flex:1;min-width:0} .optrow .ax{display:block;font-size:var(--tekst-xs);letter-spacing:1.1px;text-transform:uppercase;color:var(--mid);font-weight:600} /* De waarde mag over twee regels lopen. Hij stond op EEN regel met drie puntjes erachter. In het paneel van Afwerking las je daardoor "Tegels · Recer Revival Meerdere Kl…": welke tegel er gekozen was stond nergens voluit, en dat is precies wat die rij moet vertellen. Twee regels dekt elke naam in de catalogus (de langste is 55 tekens); daarboven kapt hij alsnog af, zodat een rij nooit ongelimiteerd groeit en de lijst leesbaar blijft. */ .optrow .vl{font-size:var(--tekst-m);line-height:1.35;font-weight:600;margin-top:1px; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden;overflow-wrap:anywhere} /* `leeg` = er staat hier nog niets. `volgt` = deze rij neemt over wat er boven staat. Allebei rustiger dan een rij die een eigen keuze draagt, en dat is het hele punt: de wanden die AFWIJKEN horen op te vallen. */ .optrow.leeg .vl,.optrow.volgt .vl{font-weight:400;color:var(--mid)} /* een rij die vaststaat: te lezen, niet aan te klikken, met de reden erbij */ .optrow.vast{background:var(--bg);border-style:dashed;cursor:default} .optrow.vast:hover{border-color:var(--line)} .optrow.vast::after{content:none} .optrow .vastreden{display:block;font-size:var(--tekst-s);font-weight:400;color:var(--mid); line-height:1.3;margin-top:2px;white-space:normal} /* een rij die bij de rij erboven hoort, zoals de tegelkeuzes onder een wand. Dat werd gedaan met   in het opschrift, maar esc() maakt daar   van, dus er stond letterlijk "  Tegel" in beeld. Inspringen is opmaak; dat hoort hier. */ .optrow.diep{width:calc(100% - 18px);margin-left:18px} .optrow::after{content:"\203A";flex:0 0 auto;font-size:var(--tekst-3xl);line-height:1;color:#B5C0BB;padding-right:4px} .optrow.schakel::after{content:none} /* een rij die zelf een werkwoord draagt (Plaatsen) krijgt geen chevron erbij */ .optrow:has(.cta)::after{content:none} .optrow .cta{flex:0 0 auto;font-size:var(--tekst-s);color:var(--wk-ink);font-weight:600} /* ---------- de regel van een ruimte in de kaart Ruimtes ---------- De naam is geen opschrift maar een INVOERVELD: hernoemen gebeurt in de regel zelf, zonder venster ertussen. Het is met opzet het gewone tekstveld van dit paneel (input[type=text] hierboven), hetzelfde als Lengte bij een wand: zo zie je zonder uitleg dat je hier kunt typen. Hieronder staat alleen wat daar bovenop komt: de ruimtes waar je NIET in staat lezen lichter, net als hun maatregel, en de rand wordt groen zolang je typt. */ .rmnaam{display:block;margin-top:3px} .rmrij.leeg .rmnaam{font-weight:400;color:var(--mid)} .rmnaam:focus{border-color:var(--wk)} /* links in de regel de omtrek van deze ruimte (ruimteOmtrek in planner/paneel.js): geen vakje en geen kader, alleen de lijn. Hij staat over de volle hoogte van de regel (binnen de padding) in een strook van vaste breedte, zodat de namen van alle regels op een lijn beginnen. De viewBox houdt de verhouding: een smalle gang staat in het midden van de strook op de volle hoogte, een brede lage ruimte vult de breedte en wordt dan in zijn geheel lager, nooit uitgerekt. contain:size, en dat is nodig: een svg met alleen een breedte krijgt zijn hoogte uit de viewBox, en dan maakte een gang van 0,90 bij 4,00 van zijn regel een regel van 300 px. Met contain:size telt de tekening niet mee voor de hoogte van de regel en rekt hij mee met wat de tekst ernaast nodig heeft. overflow:visible zodat de halve lijndikte aan de rand niet wegvalt. */ .rmrij .rmomtrek{ flex:0 0 80px;width:80px;height:auto;align-self:stretch;contain:size; display:block;overflow:visible; } /* de prullenbak staat rechts in de regel, op de plek waar een gewone rij zijn chevron heeft (.optrow.schakel haalt die weg) */ .rmweg{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:var(--rond-m); background:#fff;color:var(--mid);cursor:pointer;transition:border-color .15s,color .15s; } .rmweg svg{width:18px;height:18px;display:block} .rmweg:hover{border-color:var(--warn);color:var(--warn)} .rmweg:focus-visible{outline:2px solid var(--wk);outline-offset:2px} /* ---------- de ruimtekiezer in 3D ---------- Rechtsboven in het 3D-beeld, onder de knoppenbalk: een blokje per ruimte met de omtrek (dezelfde ruimteOmtrek als in de kaart Ruimtes) en de naam. De uitleg en wanneer hij er niet staat: ruimteKiezer3dBij in planner/paneel.js. Buiten 3D en tijdens rondlopen haalt de css hem weg. z-index 10 met opzet: boven de 9 telt hij voor elpopPanelen (planner/kern.js) en ontwijkt het balkje van een geselecteerd object hem. */ #ruimtekiezer3d{ position:absolute;top:16px;right:16px;z-index:10;width:200px; display:flex;flex-direction:column;align-items:stretch; } #ruimtekiezer3d[hidden],body:not(.mode3d) #ruimtekiezer3d,#stage:has(#walkbtn.on) #ruimtekiezer3d{display:none} /* dezelfde uitwijkregel als de loep: opzij voor het productvenster */ #main:has(#side.open:not(.links)) #ruimtekiezer3d{right:calc(min(300px,100vw - 28px) + 28px)} #ruimtekiezer3d .rk3knop{display:none} #ruimtekiezer3d .rk3lijst{ display:flex;flex-direction:column;gap:6px; overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 8px;margin:-2px -2px 0; } #ruimtekiezer3d .rk3rij,#ruimtekiezer3d .rk3knop{ flex:0 0 auto;align-items:center;gap:10px;width:100%;min-height:48px; padding:7px 12px 7px 9px;border:1px solid var(--line);border-radius:var(--rond-m); background:#fff;color:var(--ink);font:inherit;font-size:var(--tekst-m);font-weight:500; text-align:left;cursor:pointer;box-shadow:var(--schaduw-2); } #ruimtekiezer3d .rk3rij{display:flex} #ruimtekiezer3d .rmomtrek{ flex:0 0 40px;width:40px;height:30px;display:block;overflow:visible;color:var(--mid); } #ruimtekiezer3d .rk3naam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* de actieve: rustig, de groene rand en het zachte groen van de app */ #ruimtekiezer3d .rk3rij[aria-current="true"]{ border-color:var(--wk);background:linear-gradient(var(--wk-soft),var(--wk-soft)),#fff; color:var(--wk-ink);font-weight:600;cursor:default; } #ruimtekiezer3d .rk3rij[aria-current="true"] .rmomtrek{color:var(--wk)} #ruimtekiezer3d .rk3rij:focus-visible,#ruimtekiezer3d .rk3knop:focus-visible{outline:2px solid var(--wk);outline-offset:2px} @media (hover:hover){ #ruimtekiezer3d .rk3rij:not([aria-current="true"]):hover{border-color:#B5C0BB;background:var(--bg)} } #ruimtekiezer3d .rk3pijl{flex:0 0 12px;width:12px;height:12px;color:var(--mid)} /* telefoon: een knopje met de actieve ruimte, de lijst klapt eronder open */ @media (max-width:600px){ #ruimtekiezer3d{top:12px;right:12px;width:190px;align-items:flex-end} #ruimtekiezer3d .rk3knop{display:flex;width:auto;max-width:100%;min-height:40px;padding:5px 10px 5px 7px} #ruimtekiezer3d .rk3knop .rmomtrek{flex-basis:30px;width:30px;height:24px} #ruimtekiezer3d .rk3lijst{display:none;width:100%;margin-top:6px} #ruimtekiezer3d.open .rk3lijst{display:flex} #ruimtekiezer3d.open .rk3pijl{transform:rotate(180deg)} } /* de fotokiezer is hetzelfde kiesvenster als de catalogus, alleen smaller: hij toont één as, de catalogus toont het hele assortiment */ #pickerbox{max-width:720px} #pickerhead{ flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px; padding:13px 16px;border-bottom:1px solid var(--line); } #pickerhead h2{margin:0;font-size:var(--tekst-xl)} #pickerclose{border:0;background:none;font-size:var(--tekst-4xl);line-height:1;color:var(--mid);padding:2px 8px;border-radius:var(--rond-s)} #pickerclose:hover{color:var(--ink);background:var(--bg)} #pickergrid{ flex:1;overflow-y:auto;padding:14px 16px 18px;display:grid;gap:10px; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); align-content:start; /* kaarten houden hun eigen hoogte in een hoog venster */ } .pcard{ position:relative;display:flex;flex-direction:column;gap:5px;text-align:left; padding:9px;border:1px solid var(--line);border-radius:var(--rond-m);background:#fff; } .pcard:hover{border-color:var(--acc)} .pcard.on{border-color:var(--acc);box-shadow:0 0 0 2px rgba(15,118,110,.25)} .pcard[disabled]{opacity:.35;cursor:default} .pcard .pimg{display:block;width:100%;height:104px;object-fit:contain;background:#fff;border-radius:var(--rond-s)} .pcard .pimg.vlak{border:1px solid var(--line)} /* ---- een kaart die iets DOET ---- Geen kleurvlak maar een neutrale tegel met een lijnpictogram: zo leest "Meer opties" niet als de vierde verfkleur naast de drie ervoor. De streepjesrand is de gangbare taal voor "hier komt iets bij". */ .pcard .pimg.actie{display:flex;align-items:center;justify-content:center; background:var(--bg);border:1px dashed var(--line);color:var(--mid)} .pcard .pimg.actie svg{width:36px!important;height:36px!important} .pcard:hover .pimg.actie,.pcard:focus-visible .pimg.actie{border-color:var(--acc);color:var(--acc)} .pcard .nm{font-size:var(--tekst-m);font-weight:600;line-height:1.35} .pcard .pr{font-size:var(--tekst-s);color:var(--mid)} /* ---------- kaarten in een werkpaneel ---------- Sander wees het rooster van Planner 5D aan: een beeld, een woord eronder. Dit is GEEN derde uiterlijk. Het is dezelfde .pcard als in de catalogus en in de vraagvensters, alleen met z'n tweeen naast elkaar, want het paneel is 330 px breed en niet 900. Wie hier iets verandert, verandert het overal. De actieve kaart is groen zoals elke actieve staat in de app (--wk), niet het losse teal dat in .pcard.on was blijven staan. */ .kaartgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .kaartgrid .pcard{padding:6px;gap:2px} /* De plaat heeft de achtergrondkleur van de 3D-scene (scene.background, planner/scene3d.js), want de renders dragen die kleur zelf: de renderer wordt zonder alpha gemaakt. Zo loopt een beeld dat niet precies past onzichtbaar over in zijn plaat in plaats van er een randje omheen te zetten. Het is dezelfde kleur die achter elk beeldje in de catalogus staat. */ .kaartgrid .pcard .pimg{height:78px;background:#DDE3E7} /* Hier stond .rkbeeld: de haak van een kaart die een LIVE tekening van deze ruimte droeg in plaats van een vast beeld. De laatste die dat deed was "Geplaatst" in het openingenpaneel, en die kaart draagt sinds 13 september zijn eigen tekening uit RK_ILLU en dus .rkill hieronder. Waarom dat teruggedraaid is staat bij openGeplaatst in planner/paneel.js: leeg was het een wit vlak, en met een deur erin hetzelfde beeld als de kaart Deur. */ /* De vaste illustraties van het Ruimte-menu (RK_ILLU in planner/paneel.js). Ze zijn getekend op deze plaat en niet op wit: het lichte grijsblauw houdt de witte vlakken in de tekening leesbaar als vlak in plaats van als gat. Geen rand eromheen, want de plaat IS de rand. En de plaat staat op 4:3, de verhouding van de viewBox waarin ze getekend zijn. Op de 78 px hoge plaat van hierboven (die is breder dan 4:3) zou de tekening met marges links en rechts komen te staan, en dan is de kaart niet meer de goedgekeurde tegel maar een uitsnede ervan. */ .kaartgrid .pcard .pimg.rkill{background:var(--kaartvlak);height:auto;aspect-ratio:4/3} .kaartgrid .pcard .nm{font-size:var(--tekst-s)} .kaartgrid .pcard .pr{font-size:var(--tekst-xs);font-variant-numeric:tabular-nums} .kaartgrid .pcard.on{border-color:var(--wk);box-shadow:0 0 0 2px var(--wk-soft)} /* de kaart Controle in stap Installatie zodra er iets niet klopt: een rode rand en een rode standregel, meer niet (instMenuHtml in planner/paneel.js) */ .kaartgrid .pcard.instrood{border-color:#e0aaa3} .kaartgrid .pcard.instrood .pr{color:#b3413a} .kaartgrid .pcard:focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* op een telefoon is het paneel schermbreed: dan mag het beeld hoger */ @media (max-width:760px){ .kaartgrid .pcard .pimg{height:96px} } /* Niet elke kaart in een paneel heeft een beeld nodig. Een plafondhoogte is een GETAL: drie renders van dezelfde lege ruimte verschillen op 78 px in precies niets. Dezelfde plaat als bij een beeldkaart, dezelfde opmaak als in het keuzevenster, alleen op de maat van het paneel. */ .kaartgrid .pcard .getal,.kaartgrid .pcard .glyph{ display:flex;align-items:center;justify-content:center;gap:3px; height:78px;border-radius:var(--rond-s);background:#DDE3E7;color:var(--ink)} .kaartgrid .pcard .getal{align-items:baseline} .kaartgrid .pcard .getal b{font-size:var(--tekst-4xl);font-weight:700;letter-spacing:-.4px;line-height:78px;font-variant-numeric:tabular-nums} .kaartgrid .pcard .getal i{font-style:normal;font-size:var(--tekst-s);color:var(--mid)} .kaartgrid .pcard .glyph svg{width:40px!important;height:40px!important} @media (max-width:760px){ .kaartgrid .pcard .getal,.kaartgrid .pcard .glyph{height:96px} .kaartgrid .pcard .getal b{line-height:96px} } /* ---------- de filterrij boven een kiezer ---------- Dezelfde donkere pil als elders in de app, in het klein. De stip vooraan is de kleur van de afwerking zelf, dus de rij zegt wat hij doet zonder uitleg. */ #pickerfilter{ display:none;align-items:center;flex-wrap:wrap;gap:7px; padding:11px 16px;border-bottom:1px solid var(--line);background:#fff; } #pickerfilter .lb{font-size:var(--tekst-s);color:var(--mid);margin-right:2px} .fchip{ display:inline-flex;align-items:center;gap:6px;padding:6px 11px; border:1px solid var(--line);border-radius:var(--rond-xl);background:#fff;color:var(--ink);font-size:var(--tekst-m); } .fchip:hover{border-color:var(--acc);color:var(--acc)} .fchip.on{background:var(--ink);border-color:var(--ink);color:#fff} .fchip:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .fdot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(30,41,59,.22);flex:0 0 9px} .pcard .fins{display:flex;gap:4px;justify-content:center;margin-top:5px} @media (pointer:coarse){ .fchip{padding:11px 13px;min-height:44px} } /* op een telefoon zouden zeven afwerkingen drie regels vullen voordat je ook maar een kraan ziet. Dan liever een regel die je opzij schuift, precies zoals de categorieen in de catalogus. */ @media (max-width:600px){ #pickerfilter{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 12px} #pickerfilter .fchip{flex:0 0 auto} } /* ---------- een kiezer MET een zeef ---------- De tegelkiezer draagt honderden kaarten en een balk met zoeken, kleur, formaat en serie. Die drie maten stonden tot 20 september als inline stijl op de elementen die paneel.js zelf maakt, omdat stijl.css toen door een andere lijn werd vastgehouden (zie review/tegelsalles/VOORSTEL-KIEZER.md). Ze horen hier, en verder is er niets aan veranderd: de maten zijn letterlijk dezelfde, gemeten op 1920 en op 390 voor en na de verhuizing. De klasse `zeef` staat op het venster en op de balk zolang de kiezer een zeef heeft; elke andere kiezer (de kraankiezer met zijn zeven afwerkingen) houdt precies wat hij had. */ /* een kiezer met een zeef heeft de breedte nodig; 720 px is gemaakt voor acht kranen */ #pickerbox.zeef{max-width:1180px} /* een zeef wrapt, ook onder 600 px: anders staan de kleur- en formaatrijen buiten beeld */ #pickerfilter.zeef{flex-wrap:wrap;overflow-x:visible} /* elke chiprij een eigen regel die opzij schuift als hij niet past */ #pickerfilter .zrij{display:flex;align-items:center;gap:7px;flex:0 0 100%;min-width:0;overflow-x:auto} #pickerfilter .zrij .fchip,#pickerfilter .zrij .lb{flex:0 0 auto} /* het zoekveld en de keuzelijst in de zeefbalk */ #pickerfilter .zzoek{flex:1 1 180px;width:auto;min-width:150px} #pickerfilter .zlijst{width:auto;flex:0 0 auto} /* wat er naast deze as nog meer verandert; staat er nooit stilzwijgend bij */ .pcard .sub{font-size:var(--tekst-s);line-height:1.3;color:var(--acc);font-weight:600} .psec{grid-column:1/-1;margin:6px 0 -2px;padding-top:10px;border-top:1px solid var(--line); font-size:var(--tekst-s);font-weight:700;letter-spacing:.02em;color:var(--mid)} .psec span{display:block;font-weight:400;margin-top:2px} .pcard .fl{position:absolute;top:6px;right:6px;background:var(--ink);color:var(--gold); font-size:var(--tekst-xs);padding:2px 7px;border-radius:var(--rond-xl)} /* ---- Kraan kiezen: een kaart per kraanfamilie (planner/kraankeus.js) ---- De afwerking kies je OP de kaart: een stip per afwerking, de passende vooraan. Foto, naam van de afwerking en prijs volgen de stip. Een andere keuze in de familie (uitloop en hendel) is een keuzelijst eronder. */ #pickergrid .kkkaart{gap:4px} .kkkaart .kkbeeld{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--rond-s)} .kkkaart .kkbeeld:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .kkkaart .kkfin{font-size:var(--tekst-s);color:var(--ink)} .kkkaart .kkfin i{font-style:normal;color:var(--mid)} .kkkaart .kkstippen{display:flex;flex-wrap:wrap;gap:4px;margin:1px 0 2px} .kkkaart .kkstip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0; border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer} .kkkaart .kkstip span{display:block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(30,41,59,.22)} .kkkaart .kkstip:hover{border-color:var(--acc)} .kkkaart .kkstip.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)} .kkkaart .kkstip:focus-visible{outline:2px solid var(--acc);outline-offset:1px} .kkkaart .kkas{display:flex;flex-direction:column;gap:2px;font-size:var(--tekst-xs);color:var(--mid)} .kkkaart .kkas select{width:100%;min-width:0;font-size:var(--tekst-s);padding:4px 6px;border:1px solid var(--line);border-radius:var(--rond-s);background:#fff;color:var(--ink)} .kkkaart .pr{margin-top:auto;padding-top:2px} .kkkaart .kkkies{margin-top:4px;padding:6px 8px;font-size:var(--tekst-s)} .kkkaart.on .kkkies{background:#fff;color:var(--ink)} @media (pointer:coarse){ .kkkaart .kkstip{width:30px;height:30px} .kkkaart .kkstip span{width:18px;height:18px} } #pickerfoot{flex:0 0 auto;border-top:1px solid var(--line);padding:10px 16px;font-size:var(--tekst-s);color:var(--mid)} /* ---- de kleurkiezer als stap IN het kaartvenster ---- Het kaartvenster is breed omdat er kaarten in liggen; de kiezer heeft die breedte niet nodig en zou er anders als een uitgerekte streep in staan. Zie kpNaarPaneel in planner/paneel.js: dit zijn dezelfde twee blokken die anders in #kleurbox hangen. Sinds 15 september vult het kleurraster wel de hele breedte (Sander kraste de lege stukken links en rechts door); de kiezer zelf houdt zijn smalle maat, die staat bij #kkeigen in kpBouw. */ #pickerbox>#kkbody{width:100%} #pickerbox>#kkfoot{width:100%} /* ---- de terugknop van het Ruimte-paneel ---- Het paneel opent op vier kaarten en stapt een niveau dieper; deze knop is de weg terug. Hij leest als navigatie en niet als een handeling: geen kader, geen kleurvlak, alleen een chevron en het woord waar je heen gaat. */ /* ---- de weg terug is een broodkruimel, geen knop ---- Hij stond als een tweede, vetgedrukte regel boven een paneel dat verder uit kaarten bestaat, en vroeg daarmee net zoveel aandacht als de keuze eronder. Terug is geen keuze; het is waar je vandaan komt. Dus klein, in de grijze inkt van de rest van het paneel, met de letterafstand van een kruimelpad - en pas bij aanwijzen de volle inkt. */ /* Hier stond .paneelterug: een losse regel "\2039 Ruimte" bovenaan de paneelbak. Die regel is weg. De terugweg staat nu IN de kop van het paneel, als kruimelpad (zie kruimelZet in planner/paneel.js), zodat waar je bent en waar je vandaan komt samen een regel zijn in plaats van drie. Het bovenliggende deel is een echte knop: aanwijsbaar, bereikbaar met het toetsenbord en met een zichtbare focus. Waar je nu bent draagt .kruimelnu en is gewoon tekst. De maat komt van .pophead h2 (.sec), dus het pad leest als de kop die het is; alleen de terugweg staat in de grijze inkt van de rest van het paneel en kleurt bij aanwijzen op. */ /* Een pad leest als een pad en niet als een opschrift: dus geen kapitalen en geen letterafstand van 1,4 px, maar gewone schrijfwijze. Dat geldt voor alle drie de delen, anders staat de ene helft van de regel in kapitalen en de andere niet. Panelen zonder pad (Installatie, Opleveren) houden hun kop zoals hij was; die dragen deze klassen niet. */ .pophead h2 .kruimel,.pophead h2 .kruimelsplit,.pophead h2 .kruimelnu,.pophead h2 .kruimelnaam{ text-transform:none;letter-spacing:.01em;font-size:var(--tekst-m);font-weight:600; } .pophead h2 .kruimel{ border:0;background:none;padding:0;margin:0;font-family:inherit;color:var(--mid); cursor:pointer; } .pophead h2 .kruimel:hover{color:var(--ink)} .pophead h2 .kruimel:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--rond-s)} .pophead h2 .kruimelsplit{color:var(--line);margin:0 5px;font-weight:400} .pophead h2 .kruimelnu{color:var(--ink)} /* de naam van de ruimte voor "Afwerking" en "Inrichten": zegt waar je bent, is geen terugweg en dus geen knop. Dezelfde grijze inkt als de terugweg, zodat het pad als EEN regel leest. */ .pophead h2 .kruimelnaam{color:var(--mid)} /* ---- het volle pad op een regel ---- Sinds 15 september begint elke kop met de naam van de ruimte: "Badkamer / Ruimte / Openingen / Geplaatst". Op 390 px past dat niet, en dan brak de kop over twee regels of duwde hij het kruisje weg. Het pad blijft daarom op een regel en kort van links af: de naam van de ruimte krimpt als eerste, met een beletselteken (hij krimpt duizend keer harder dan de rest), daarna pas de andere delen. Het laatste deel, waar je bent, blijft zo lang mogelijk heel. */ .pophead h2.kruimelpad{display:flex;align-items:baseline;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden} .pophead h2.kruimelpad>*{flex:0 .01 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .pophead h2.kruimelpad>.kruimelsplit{flex:0 0 auto;overflow:visible} .pophead h2.kruimelpad>.kruimelnaam{flex-shrink:1000;min-width:1.1em} /* ---- geen tabbladenrij in stap Ruimte ---- Muren tekenen, Nieuwe ruimte, Dak en Openingen staan als kaarten IN het paneel, met hun stand van zaken erbij (roomMenuHtml in planner/paneel.js). Een rij met dezelfde woorden erboven zou dezelfde keuze twee keer aanbieden. #roompop en #openpop zijn de enige panelen van stap Ruimte (zie stapPop), dus dit raakt de tabbladen van Afwerking, Installatie en Opleveren niet. */ #roompop .poptabs,#openpop .poptabs{display:none} /* op een telefoon wordt elk kiesvenster een volledig scherm: alle ruimte naar de foto's, want daar kies je op */ @media (max-width:600px){ .ovl{padding:0} .ovlbox{border-radius:0;height:100%;max-height:100%} #panelbox{max-width:100%;height:100%} #pickergrid{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));padding:12px} #pickergrid .pcard .pimg{height:86px} /* de linkerkolom wordt een kopblok: zoeken bovenaan, de categorieboom als één horizontaal scrollende regel eronder */ #panelmain{flex-direction:column} #panelside{flex:0 0 auto;border-right:0;border-bottom:1px solid var(--line);padding:10px 12px;overflow:visible} #panelside .kop{display:none} #cats{flex-direction:row;overflow-x:auto;gap:14px;padding:8px 0 2px;-webkit-overflow-scrolling:touch} #cats button{white-space:nowrap;padding:2px 0} /* in die ene regel staat een uitgeklapte hoofdcategorie gewoon voor haar subcategorieen; een pijltje zou daar los onder de naam vallen */ #cats .pijl{display:none} #cats button.sub{padding:2px 0} #panelkop{padding:10px 12px 8px} #panelkop h3{font-size:var(--tekst-2xl)} #panelbody{padding:12px} .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .pgrid .foto{padding:8px} .pgrid .pcard .pimg{height:112px} .pgrid .stip{left:8px;bottom:8px} #foot{padding:10px 12px} } @media (max-width:900px){ :root{--panelw:min(330px,calc(100vw - 28px))} #side{width:min(300px,calc(100vw - 28px))} #top{gap:8px;padding:0 10px} #hud{left:10px;bottom:10px} /* op een telefoon loopt het lagenpaneel over de volle breedte: anders valt het over de rand van het scherm */ #lagenpop{left:8px;right:8px;width:auto;padding:11px} #hud .seg button{padding:8px 10px} } /* ---------- raakdoelen ---------- Een vinger is geen muisaanwijzer. Alles wat je met een duim moet raken wordt 44 px, de maat die Apple en Google allebei als ondergrens noemen. Het pictogram blijft even groot; alleen het raakvlak groeit mee. */ /* een balk die breder is dan het scherm moet laten zien dat er meer is: de schaduwen aan de randen komen en gaan met de schuifpositie zelf */ /* De tekening kan de aandacht krijgen (zie tabindex op #sheet); dan hoort daar de gouden ring bij, niet de blauwe van de browser, en alleen bij het toetsenbord: een tik erop moet geen kader om het hele blad zetten. */ svg#sheet:focus{outline:none} svg#sheet:focus-visible{outline:2px solid var(--acc);outline-offset:-2px} @media (max-width:400px){ #top{gap:6px;padding:0 8px} } /* een toestel met een inkeping of afgeronde hoeken snijdt de rand af; de balk houdt daar afstand van in plaats van eronder te verdwijnen */ @supports (padding:env(safe-area-inset-left)){ #top{padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))} #rail{left:calc(16px + env(safe-area-inset-left))} #stapnav{left:calc(16px + env(safe-area-inset-left))} #hud{left:calc(14px + env(safe-area-inset-left))} } @media (max-width:900px){ #hud .seg{ background-image:linear-gradient(to right,#fff,#fff),linear-gradient(to left,#fff,#fff), linear-gradient(to right,rgba(30,41,59,.16),rgba(30,41,59,0)), linear-gradient(to left,rgba(30,41,59,.16),rgba(30,41,59,0)); background-position:left center,right center,left center,right center; background-repeat:no-repeat; background-size:20px 100%,20px 100%,11px 100%,11px 100%; background-attachment:local,local,scroll,scroll; } } @media (pointer:coarse),(max-width:900px){ .tb{min-height:44px} .tb.ic,#more{flex:0 0 44px;width:44px;height:44px;min-height:44px} #hud .seg button{padding:12px 14px} /* maar niet de kijkstanden: die zijn 40 px breed met een icoon van 20, en 28 px padding erbij laat daar 12 px van over */ #hud #hudviews button{padding:0} .popx{padding:9px 14px} #moremenu button{padding:12px 10px} } /* op een telefoon is er geen tweede kant om naartoe te springen: het productvenster blijft rechts en de tekening schuift er niet achter weg */ @media (max-width:620px){ #side.links{left:auto;right:14px;top:14px} body.mode3d #side{bottom:62px} } /* op smalle schermen is er geen plek voor het woordmerk naast de gecentreerde schakelaar; het logo blijft staan */ @media (max-width:560px){ #top .brand{display:none} .seg button{padding:7px 13px} } /* ---------- de rail en de balken op een telefoon ---------- De rail blijft links staan, 40 px breed. De onderbalk schuift zijwaarts binnen zijn kaart (zie hieronder) en alles wat onderaan stond staat erboven. */ @media (max-width:900px){ #hud{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none; right:10px;padding-bottom:2px;-webkit-overflow-scrolling:touch} #hud::-webkit-scrollbar{display:none} #hud>*{flex:0 0 auto} #hud .seg{overflow-x:visible;min-width:auto} #hud .seg::-webkit-scrollbar{display:none} #loep{right:10px;bottom:calc(74px + var(--hudh,50px))} #loep button{width:36px;height:34px} /* de loep staat hier op de kijkstandbalk en dus bovenop de 3D-meter; die gaat daarom boven de loep uit: 188 = de 74 waar de loep begint, zijn 104 hoogte en 10 lucht. */ #schaal3d{bottom:calc(188px + var(--hudh,50px))} #roompop,#openpop,#stappop,#side.links{bottom:calc(26px + var(--hudh,50px))} body.stap5 #sheetwrap{padding:12px} } @media (max-width:700px){ #rail{left:8px;top:calc(8px + var(--pilband));padding:3px;gap:0;border-radius:var(--rond-l)} #stapnav{left:8px;top:8px} /* op een telefoon is er geen ruimte voor de naam naast het teken; die staat dan nog in de tooltip en de aria-label */ #vorige{width:40px;padding:0;justify-content:center} #vorige .lbl{display:none} #rail button{width:40px;height:40px;border-radius:var(--rond-m)} #rail button svg{width:20px;height:20px} #rail .tip{display:none} #hud{left:56px;bottom:10px;max-width:calc(100% - 66px)} } /* ---------- werkpanelen worden bladen op een telefoon ---------- Een paneel van 330 px op een scherm van 390 px laat 60 px tekening over, en dat is te weinig om te zien wat je verandert. Dus: volle breedte, onderaan vast, en zo hoog dat er minstens veertig procent van het scherm tekening overblijft: je moet zien wat je verandert terwijl je het verandert. De kiesvensters (catalogus en fotokiezer) gaan al schermvullend, die blijven. */ @media (max-width:600px){ #roompop,#openpop,#stappop,#side,#side.links{ left:0;right:0;top:auto;width:auto;max-width:none; bottom:calc(26px + var(--hudh,50px) + env(safe-area-inset-bottom)); max-height:75vh;border-radius:12px 12px 0 0;border-left:0;border-right:0;border-bottom:0; box-shadow:0 -8px 30px rgba(30,41,59,.13),0 -1px 3px rgba(30,41,59,.07); } /* De rail zweeft linksboven, het werkblad schuift van onderen omhoog. Op 75vh komt de bovenrand van het blad achter de rail langs en verdwijnen de kop en de tabbladen eronder. Het ruimtepaneel bleef daar met zijn korte rijtjes net onder; met het kaartrooster is het hoger dan 75vh en gebeurde het daar ook. Hij stopt nu twaalf pixels onder de rail. Er valt niets weg: het blad scrollt al. Het openingenpaneel doet mee sinds 7 september. Dat liep er met zijn oude rijen ook al achter langs (656 px inhoud om 499 px ruimte, gemeten op 390 x 844), en met het kaartrooster erin is het 767 px. Zelfde regel, zelfde reden. De 309 is gemeten en niet geraden: 54 topbalk + 8 marge + 5 knoppen van 44 + de scheidingslijn + padding = 297, plus 12 lucht. Hij stond tot 20 september op 289, met knoppen van 40; die werden hier 44 (zie het blok raakdoelen achteraan dit bestand) en dan is de rail 20 px hoger. Het harnas ruimtekaarten ving dat meteen: meting 5c las een paneel dat op 339 begon terwijl de rail tot 347 liep, dus 8 px erachter. Met 309 begint het paneel op 359 en staat het weer twaalf pixels onder de rail. #stappop hoort er sinds 8 september bij. Dat is stap 2, 4 en 5, en juist daar deed het het meeste pijn: op 390 x 844 begon het blad op 143 px en liep de rail tot 277, dus de kop van het paneel en de hele tabbladenrij eronder zaten erachter. In stap 4 en 5 waren "Invoerpunten" en "Controle" daardoor niet te lezen en niet aan te tikken. Zelfde regel, zelfde reden, en er valt niets weg: het blad scrollt al. */ #roompop,#openpop,#stappop{max-height:min(75vh,calc(100vh - 309px - var(--pilband) - 26px - var(--hudh,50px) - env(safe-area-inset-bottom)))} /* ---- stap 4 op een telefoon: het paneel mag de tekening niet afdekken ---- In Installatie teken je OP het blad. Een werkblad dat over de onderste helft van dat blad valt maakt de stap onbruikbaar op een telefoon: je tekent een leiding die je niet ziet. Het paneel krijgt hier daarom een vaste hoogte in plaats van "zo hoog als het mag", en het tekenvak springt er precies zo ver boven in. Wat overblijft is 390 bij ongeveer 330 px, en een A4 in liggend formaat past daar helemaal in. Het paneel scrolt al, dus er valt niets weg. Sinds 15 september is 46vh een GRENS en geen vaste hoogte: een korte kaart (Installatie / Elektra) liet anders een wit vlak onder zich staan. */ body.stap4 #stappop{max-height:46vh} body.stap4 #stappop.open ~ #stage #sheetwrap{ bottom:calc(46vh + 26px + var(--hudh,50px) + env(safe-area-inset-bottom)); /* de rail zweeft linksboven OVER de tekening. Op de plattegrond geeft dat niet: die schuift en zoomt. Het wandaanzicht is een vast A4 dat zich in het vak past, dus daar dekte de rail de linkerhelft van de tekening af - de hoekletter, de eerste maatketen en de kop. Het vak springt daarom naast de rail in plaats van eronder door. En sinds 18 september ook onder de pil Verder door. Die staat boven de rail en is breder dan hij (88 px voor "Verder", 112 voor "Opleveren", tegen 48 voor de rail), dus opzij springen voor de rail alleen was niet genoeg: hij lag tot 120 px in het vak. Omlaag is hier goedkoper dan opzij - gemeten op 390 x 844 wordt het A4 328 x 232 in plaats van 334 x 236 (twee procent), terwijl opzij springen tot 120 px er 262 x 232 van zou maken (tweeentwintig procent). */ top:calc(8px + var(--pilband)); left:calc(56px + env(safe-area-inset-left)); } /* In 3D staat de knoppenbalk er ook nog onder, dus het blad stopt daarboven. De hoogte van die balk stond hier als een vast getal (120 = 58 + 50 + lucht) en dat klopte niet meer zodra hij afbrak of er een knop bij kwam. Nu wordt hij GEMETEN en in --hudh gezet (zie hudRuimte), zodat dit meeschuift met wat er echt staat in plaats van met wat we ooit dachten. Waarom het blad wijkt en niet de balk: die balk is de enige manier om op een telefoon van standpunt te wisselen, en juist bij het aansluiten van leidingen wil je tussendoor van boven kijken. Hem wegstoppen zodra er een paneel openstaat zou dat afpakken op het moment dat je het nodig hebt. */ /* het blad staat op een telefoon BOVEN het opleverblad-paneel, niet erachter: het paneel is daar een blad onderaan, dus het blad schuift naar boven */ body.stap5 #sheetwrap{align-items:flex-start;padding:12px} } @media print{ body{display:block;background:#fff} #top,#rail,#panel,#roompop,#openpop,#stappop,#side,#hud,#three,#drawhint,#walkhint, #stapnav,#schaal3d,#start{display:none!important} /* het blad print als blad, niet als het ingekaderde papier van stap 4 */ body.stap5 #sheetwrap{padding:0;background:#fff;display:block} body.stap5 svg#sheet{width:297mm;height:210mm;border:0;box-shadow:none;aspect-ratio:auto} #main,#stage{display:block;padding:0;overflow:visible} #sheetwrap{position:static;box-shadow:none;width:auto;display:block!important} svg#sheet{width:297mm;height:210mm} @page{size:A4 landscape;margin:0} /* de maatvoering: één A4 per wand in plaats van het blad. Zolang body.printaanz aan staat gaat al het andere eruit. */ body.printaanz #main,body.printaanz #stage,body.printaanz #sheetwrap, body.printaanz svg#sheet,body.printaanz #hud{display:none!important} body.printaanz #aanzichten{display:block!important} /* de balk van het schermbeeld hoort niet op papier */ #aanzichten .aanzbar{display:none!important} #aanzichten .aanzblad{display:block;width:297mm;height:210mm;page-break-after:always;break-after:page} #aanzichten .aanzblad:last-child{page-break-after:auto;break-after:auto} } /* buiten het printen bestaat de laag wel, maar staat hij niet in de weg */ #aanzichten{display:none} /* ---- de maatvoering op het scherm ---- Dezelfde bladen als op papier, alleen op schermmaat, met een balk erboven. Het printen loopt onveranderd via body.printaanz hierboven. */ body.aanzscherm #aanzichten{display:block;position:fixed;inset:0;z-index:70; background:var(--bg);overflow:auto;overscroll-behavior:contain;padding-bottom:28px} body.aanzscherm #aanzichten .aanzbar{position:sticky;top:0;z-index:1; display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 8px 11px 16px;background:#fff;border-bottom:1px solid var(--line)} body.aanzscherm #aanzichten .aanzknoppen{display:flex;align-items:center;gap:8px} body.aanzscherm #aanzichten .aanzblad{display:block;width:min(1080px,calc(100vw - 40px)); height:auto;aspect-ratio:297/210;margin:18px auto 0;background:#fff; border:1px solid var(--line);border-radius:var(--rond-s);box-shadow:var(--schaduw-2)} /* ================================================================== UI-laag Planner 5D ------------------------------------------------------------------ Alleen de schil: balk, rail en het productvenster. De tekening, de productdata en de prijzen blijven waar ze waren. Wat hier staat overschrijft bewust de regels hierboven, zodat het in een keer terug te draaien is door dit blok weg te halen. De taal is die van de referentie: alles zweeft, niets raakt de rand, een accentkleur en verder grijs en wit. ================================================================== */ :root{ --wk:#3E8E5A; --wk-zacht:#EAF3ED; --schaduw:0 8px 30px rgba(30,41,59,.13),0 1px 3px rgba(30,41,59,.07); } /* ---------- de balk ---------- Dunner, wit, en het merk in een gekleurd vierkant links. Het vierkant toont alleen het huismerk: de woordmerkregel eronder wordt weggesneden, want op 34 pixels is dat een veeg en geen woord. */ #top{flex:0 0 52px;gap:14px} #top .merkvak{ flex:0 0 34px;width:34px;height:34px;border-radius:var(--rond-m);background:none; display:flex;align-items:center;justify-content:center; border:0;padding:0;cursor:pointer;color:#1A1A1A; } #top .merkvak:hover{background:var(--bg)} #top .merkvak:focus-visible{outline:2px solid var(--wk);outline-offset:2px} /* het merk zelf draagt de verhouding (944 bij 798 in het viewBox EN als eigen breedte/hoogte), dus width:auto rekent hem exact uit. Alleen een hoogtegrens gaf ooit een uitgetrokken logo; dat kan hier niet meer. */ #top .merkvak .wk-merk{display:block;height:26px;width:auto;fill:currentColor} /* de 2D/3D-schakelaar staat exact in het midden van de balk, los van wat er links en rechts staat */ @media (min-width:901px){ #top .grow{flex:1} #modes{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3} } /* de schakelaar zelf: een pil, de actieve helft gevuld in de accentkleur */ #modes.seg{border:0;border-radius:var(--rond-vol);background:var(--bg);padding:3px;gap:2px} #modes.seg button{ border-radius:var(--rond-vol);background:none;color:var(--mid);padding:6px 18px;font-size:var(--tekst-l);font-weight:600; } #modes.seg button.on{background:var(--wk);color:#fff;box-shadow:var(--schaduw-1)} #modes.seg button:not(.on):hover{color:var(--ink)} /* rechts een rij losse pictogrammen: geen kaders, alleen het teken. */ #top .tb.ic,#top #more{ border:0;background:none;width:34px;height:34px;flex:0 0 34px;border-radius:var(--rond-m);color:var(--mid); } #top .tb.ic:hover,#top #more:hover{background:var(--bg);color:var(--ink)} #top .tb.ic.on{background:var(--wk-zacht);color:var(--wk);border:0;--icon-accent:var(--wk)} #top .tb.ic:disabled{color:#B5C0BB;background:none;cursor:default} /* de terugknop naast het merk: een chevron met de merknaam, zoals "All Projects" in de referentie. Rustig grijs, licht vlak bij hover. */ #top #terugshop{ display:flex;align-items:center;gap:5px;flex:0 0 auto;text-decoration:none; padding:6px 10px 6px 7px;border-radius:var(--rond-m);color:var(--mid);font-size:var(--tekst-l);font-weight:600; border:0;background:none;cursor:pointer;font-family:inherit; } #top #terugshop:hover{background:var(--bg);color:var(--ink)} #top #terugshop:focus-visible{outline:2px solid var(--wk);outline-offset:-2px} /* een dunne scheiding tussen de losse pictogrammen rechts, zodat undo/redo en de bestand-acties als twee groepjes lezen in plaats van een lange rij */ #top .topsplit{flex:0 0 1px;width:1px;height:22px;background:var(--line);margin:0 3px} /* de opslagstatus links, naast de weg terug naar de ontwerpen (opslagTeken in planner/account.js). Rustig zolang alles goed gaat: grijs, klein, een vinkje. Alleen als het werk NIET in het account staat krijgt hij kleur en een onderstreepte knop: opnieuw, inloggen, opslaan of kiezen. Vanaf 901 px staat de 2D/3D-schakelaar in het midden en blijft de status links ervan (max-width); te lang wordt afgekapt, de hele zin staat in de tooltip. Op een telefoon alleen het teken; de zin staat dan in de tooltip en de aria-label. */ #top #opslagstatus{ display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;height:34px;padding:0 9px;margin-left:-4px; border:0;border-radius:var(--rond-m);background:none;cursor:pointer; color:var(--mid);font:inherit;font-size:var(--tekst-m);font-weight:600;white-space:nowrap; } #top #opslagstatus[hidden]{display:none} #top #opslagstatus:hover{background:var(--bg);color:var(--ink)} #top #opslagstatus:focus-visible{outline:2px solid var(--wk);outline-offset:-2px} #top #opslagstatus .opico{flex:0 0 14px} #top #opslagstatus .optekst{min-width:0;overflow:hidden;text-overflow:ellipsis} #top #opslagstatus.ok .opico{color:var(--wk)} #top #opslagstatus.let{color:#8a5a00} #top #opslagstatus.fout{color:#b42318} #top #opslagstatus .opknop{flex:0 0 auto;text-decoration:underline;text-underline-offset:2px} #top #opslagstatus.bezig .opico{animation:opslagdraai 1s linear infinite} @keyframes opslagdraai{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ #top #opslagstatus.bezig .opico{animation:none} } @media (min-width:901px){ #top #opslagstatus{max-width:calc(50vw - 190px)} } @media (max-width:600px){ #top #opslagstatus{padding:0 6px;margin-left:0} #top #opslagstatus .optekst,#top #opslagstatus .opknop{display:none} } /* het account-plekje sluit de rij rechts af. Uitgelogd is het een gewone balkknop met het woord erbij: een kaal cirkeltje naast Opleveren leest als een plaatje en niet als een ingang, en dan zoekt niemand er inloggen achter. Ingelogd krimpt het weer tot de initiaal-cirkel uit de referentie. */ #top #avatar{ display:flex;align-items:center;gap:6px;margin-left:2px; color:var(--ink);font-weight:600;text-decoration:none;cursor:pointer; } #top #avatar[hidden]{display:none} #top #avatar.ingelogd{ flex:0 0 32px;width:32px;height:32px;padding:0;gap:0;justify-content:center; border-radius:50%;border-color:transparent; background:var(--wk-zacht);color:var(--wk);font-size:var(--tekst-l);font-weight:700;letter-spacing:.3px; } #top #avatar.ingelogd:hover{border-color:transparent;color:var(--wk)} /* onder de smalle-schermgrens (max 900) zakt de balk in: de losse extra pictogrammen en de terugtekst wijken, het menu draagt ze dan weer. */ #moremenu .mobiel{display:none} @media (max-width:900px){ #top #fotobtn,#top #vidbtn,#top #deeltop,#top .topsplit{display:none} #moremenu .mobiel{display:block} } /* ---------- de canvas ---------- Een subtiele lichte ruit onder de plattegrond, zoals de referentie. Alleen in 2D: in 3D neemt de scene het hele beeld over. */ #stage{ background-color:#F7F9F8; background-image: linear-gradient(rgba(30,41,59,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(30,41,59,.05) 1px,transparent 1px); background-size:26px 26px;background-position:center; } body.mode3d #stage{background-image:none;background-color:transparent} /* ---------- compacte bediening in het productpaneel ---------- De brede gelabelde blokken (slot, draaien, kopie, verwijderen) worden kleine icoonknoppen; de uitleg zit in de tooltip (title), niet in een hele regel. */ #sidebody .secrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;margin-bottom:8px} #sidebody .iconbtn,#sidefoot .iconbtn{ display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:var(--rond-l); background:#fff;color:var(--mid);transition:border-color .15s,color .15s,background .15s; } #sidebody .iconbtn svg,#sidefoot .iconbtn svg{width:19px;height:19px;display:block} #sidebody .iconbtn:hover,#sidefoot .iconbtn:hover{border-color:var(--wk);color:var(--wk)} #sidebody .iconbtn:focus-visible,#sidefoot .iconbtn:focus-visible{outline:2px solid var(--wk);outline-offset:2px} #sidebody .iconbtn.aan{background:var(--wk-zacht);border-color:var(--wk-line);color:var(--wk)} #sidebody .iconbtn.danger:hover,#sidefoot .iconbtn.danger:hover{border-color:var(--warn);color:var(--warn)} /* ---- de stalen van de kleur- en materiaalkiezer ---- Een rondje met de ECHTE kleur die het model krijgt. Ze staan in het productpaneel, dus onder #sidebody, anders wint de algemene knopstijl. */ #sidebody .matrij{margin:0 0 12px} #sidebody .matkop{display:flex;justify-content:space-between;align-items:baseline; gap:8px;font-size:var(--tekst-s);margin:0 0 5px} #sidebody .matkop .matnu{color:var(--mid);font-size:var(--tekst-s)} #sidebody .matstalen{display:flex;flex-wrap:wrap;gap:5px} #sidebody .matstaal{width:22px;height:22px;min-width:22px;min-height:22px; border-radius:50%;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0; flex:0 0 auto;box-sizing:border-box;transition:transform .1s,box-shadow .1s} #sidebody .matstaal:hover{transform:scale(1.15)} #sidebody .matstaal.aan{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)} #sidebody .matstaal.groot{width:34px;height:34px;border-radius:var(--rond-m)} #sidebody .maatrij{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} #sidebody .maatknop{min-width:44px;padding:6px 10px;border:1px solid var(--line); border-radius:var(--rond-m);background:#fff;font:inherit;font-size:var(--tekst-m);color:var(--ink); cursor:pointer;transition:border-color .12s,box-shadow .12s} #sidebody .maatknop:hover{border-color:#9aa0a4} #sidebody .maatknop.aan{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:600} /* de vaste knoppenbalk onder het productvenster. #sidebody is de enige scrollende laag in .pop, dus alles wat hierbuiten staat blijft in beeld, op een telefoon net zo goed als op een breed scherm. */ #sidefoot{flex:0 0 auto;display:flex;gap:8px;padding:10px 14px; border-top:1px solid var(--line);background:#fff} #sidefoot[hidden]{display:none} /* de rail (#rail) staat hierboven bij de layout; de werkpanelen staan er direct naast (82 px) en stoppen boven de onderbalk (70 px) */ /* ---------- de kop van het kaartje ---------- Links de terugknop met de titel ernaast, rechts uitklappen en sluiten. De titel wisselt mee met waar je bent, dus hij moet een lange categorienaam kunnen dragen zonder de knoppen weg te duwen. */ .popkoplinks{display:flex;align-items:center;gap:5px;min-width:0;flex:1} .popkoplinks #paneltitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .popterug{ border:0;background:none;color:var(--mid);padding:4px 5px;border-radius:var(--rond-m); display:flex;align-items:center;justify-content:center;flex:0 0 auto; } .popterug[hidden]{display:none} .popterug:hover{color:var(--ink);background:var(--bg)} .popterug:focus-visible{outline:2px solid var(--wk);outline-offset:-2px} /* de knoppen rechts in de kop (nu alleen het kruisje; de uitklapknop naar het kleine kaartje is weg sinds 25 september) */ .popkopknoppen{display:flex;align-items:center;gap:2px;flex:0 0 auto} /* het zoekveld als pil met een loep erin */ #panelside input#q{ border-radius:var(--rond-vol);padding:10px 14px 10px 38px;background:#fff; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7F79' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:14px 50%; } #panelside input#q:focus{border-color:var(--wk);outline:none;box-shadow:0 0 0 3px var(--wk-zacht)} /* ================================================================== TELEFOON-PAS (Track E3) ------------------------------------------------------------------ Alles hieronder staat achter een telefoon-mediaquery of is een onschuldige aanraak-verharding die op een muis niets verandert. Het bureaublad (>=901px) raakt hier niets van; staat het los, dan is deze pas in één blok terug te draaien door dit stuk te wissen. ================================================================== */ /* aanraak-verharding, geldt overal maar verandert niets voor een muis: - geen grijze tik-flits op knoppen - de pagina zelf veert of ververst niet bij het slepen (de panelen hebben hun eigen overscroll-contain al) - de 3D-scene vangt twee vingers zelf op, zodat knijpen/draaien de hele pagina niet inzoomt (de plattegrond-SVG deed dit al) */ body{-webkit-tap-highlight-color:transparent} html,body{overscroll-behavior:none} #three canvas{touch-action:none} /* ---------- de balk op een telefoon: passend en met echte raakdoelen ---------- Op 390px liep de rechterrij (ongedaan/opnieuw/overzicht/menu) 40px over de rand: de hele pagina kreeg daardoor een horizontale schuifbalk. Tegelijk waren de icoonknoppen 34px, onder de 44px die een duim nodig heeft. Het overzicht-per-product is de minst gebruikte knop op een telefoon en wijkt; de rest wordt een volwaardig raakdoel en de rij past weer. */ @media (max-width:600px){ #top{gap:8px} #top #afwoverzicht{display:none} /* op 390px is er nog 11px over in de balk: een inlogknop erbij duwt de rij over de rand. Hij wijkt hier dus, en de regel bovenin het actiemenu is op deze breedte de volwaardige ingang. */ #top #avatar{display:none} #top .tb.ic,#top #more{width:44px;height:44px;flex:0 0 44px;border-radius:var(--rond-l)} /* de 2D/3D-pil krijgt een hoger raakvlak maar blijft smal genoeg om naast de rechterrij te passen */ #modes.seg button{padding:10px 15px} /* de terugknop naar de shop houdt zijn raakvlak, ook zonder tekst */ #top #terugshop{padding:10px 9px} } /* ---------- de knoppenbalk: alles binnen bereik ---------- De rij camerastanden + gereedschap is breder dan een telefoon. Hij schoof zijwaarts binnen een kaart die tegen de rail aan was geklemd (left:56 en max-width 100% - 66, hierboven bij max-width:700). Op 390 px bleef daar 324 px van over voor 456 px knoppen: Styling, de magneet en de liniaal stonden buiten beeld, en de rand-schaduw die dat had moeten verraden zit op .seg - een element dat zelf niet schuift, dus die schaduw kwam nooit. De rail hangt bovenaan en komt op een telefoon nooit tot onderaan, dus die klem is hier onnodig. De balk krijgt de volle breedte en breekt af op twee regels; hudRuimte meet de hoogte en zet hem in --hudh, dus de werkbladen schuiven vanzelf mee. Niets schuift meer weg. */ @media (max-width:600px){ #hud{left:10px;max-width:calc(100% - 20px);flex-wrap:wrap;gap:6px} #hud .seg button{padding:11px 12px} } @supports (padding:env(safe-area-inset-left)){ @media (max-width:600px){ #hud{left:calc(10px + env(safe-area-inset-left)); max-width:calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))} } } /* ---------- de topbalk op de smalste schermen ---------- Op 390 px was de balk 417 px breed en viel het tandwiel eraf. Dat is niet zomaar een pictogram: het actiemenu is daar de ENIGE weg naar Foto, Video, Delen, het account, PNG, Print, Opslaan en Openen. Een klant met een tablet rechtop kon zijn badkamer dus niet bewaren. Er stond al een regel voor (max-width:400 met gap 6 en padding 8), maar die werd verderop weer overschreven: de padding door het env()-blok voor toestellen met een inkeping, de gap door de raakdoelregels bij 600. Hij staat daarom hier, na allebei, en rekent de veilige rand mee in plaats van hem kwijt te raken. Wat het oplevert: 12 px padding, 14 px tussenruimte en 12 px op de 2D/3D-pil. De chevron naast het merk gaat weg omdat het merk zelf naar dezelfde plek gaat (de ontwerpen); twee knoppen naar een bestemming is er op deze breedte een te veel. Samen 417 -> 336 px op een balk van 390. */ @media (max-width:430px){ #top{gap:6px; padding-left:calc(8px + env(safe-area-inset-left)); padding-right:calc(8px + env(safe-area-inset-right))} #top #terugshop{display:none} #modes.seg button{padding:10px 12px} } /* ---------- kijk-link ---------- Een deellink met deel=bekijken geeft de ontvanger het model, niet de editor. De grens loopt tussen KIJKEN en VERANDEREN, niet tussen lopen en de rest: alle camerastanden blijven, dus de kijkstandbalk (#hud met standaard zicht, van boven, vooraanzicht, ooghoogte, rondlopen, rondje draaien, een zicht bewaren en de styling), de bewaarde zichten (#viewspop), de kijklaag (#lagenknop/#lagenpop, dat paneel gaat over kijken en niets anders); foto en video zitten in #top en gaan dus mee weg. Weg gaat wat de tekening VERANDERT of wat naar de editor toe leidt: de topbalk met het bestandsmenu, de rail met de stappen, de panelen, en binnen wat blijft staan de twee knoppen die er toch nog heen wijzen (een bewaard zicht weggooien, en de verwijzing naar stap 4). De vijf panelen staan er allemaal bij de naam in, ook de dichte: een gedeeld ontwerp draagt de stap waarin het bewaard is met zich mee, dus wie in stap 2 deelt stuurde tot nu toe het Afwerking-paneel gewoon mee open. De 2D-schakelaar blijft weg. Die zit in #top, en het 2D-blad is het tekenvel zelf: daar sleep je de ruimte en de producten. Dat is bewerken, geen tweede manier van kijken. Het is één klasse op body, gezet door de ?o=-lader; zonder die klasse verandert er niets aan de planner. */ body.kijkmodus #top, body.kijkmodus #rail, body.kijkmodus #editbtn, body.kijkmodus #stapnav, body.kijkmodus #elpop, body.kijkmodus #panel, body.kijkmodus #side, body.kijkmodus #stappop, body.kijkmodus #roompop, body.kijkmodus #openpop, body.kijkmodus #hoekpop, body.kijkmodus #vrijpop, body.kijkmodus #start, body.kijkmodus #aandacht, body.kijkmodus #viewspop .vchip .del, body.kijkmodus #lagenpop .lp-naarstap{display:none!important} /* ---------- de poort ---------- Wie zonder account en zonder deellink binnenkomt krijgt de planner niet. Dit is dus het eerste wat iemand van het product ziet, en het moet er ook naar zijn. Hier stond een beige papieren vlak met de kaart links en een filmpje in de rechterhelft. Sander, 17 september: het beige eruit, donker en modern erin, en de film moet de EDITOR laten zien in plaats van een rondje door een woning. Dat is nu de opzet: de film vult het hele scherm en is de ondergrond, geen halve kolom; er ligt een donkere sluier overheen die van links naar rechts oplost, zodat de kaart leesbaar is en het beeld rechts zichtbaar blijft; de kaart is een donker glasvlak dat op de film ligt. Wat NIET verandert is de vormtaal van de app, want dit moet hetzelfde product blijven als de vensters in de planner (zie DE PAPIERSTIJL hierboven en ovVenster in planner/vragen.js): hoeken van 4 px, een HARDE verschoven schaduw in plaats van een zachte wolk, haarlijnen als scheiding, het mono-oogje boven de kop, en EEN oranje knop (#EC633D) als hoofdhandeling. Alleen de inkt is omgekeerd: lichte letters op een donker vlak in plaats van donkere letters op papier. Twee schriften, geen webfont, dus geen enkele extra laadtijd: de gewone systeemletter voor de tekst, de systeem-monospace voor alles wat een MAAT of een LABEL is. Hij ligt als vaste laag over alles heen in plaats van de app te verbergen: zo hoeft er aan de planner zelf niets veranderd te worden. Volledig ondoorzichtig, ook voordat er iets binnen is: de donkere grond en het posterbeeld staan er meteen. */ #poort{ display:none;position:fixed;inset:0;z-index:100000;background:#0B0E10; align-items:center;justify-content:flex-start;padding:0;overflow:hidden; font:14px/1.45 system-ui,-apple-system,'Archivo',sans-serif;color:#E9EDEF; } html.poort #poort{display:flex} /* ---------- de beeldlaag ---------- De film vult de hele poort en ligt achter alles. Het element heeft met opzet GEEN src en GEEN poster-attribuut: het posterbeeld is de achtergrond van dit vlak en staat er dus al bij het eerste beeld, en de bronnen worden pas na load aangehangen door planner/poort.js. Komt de film nooit, dan blijft de poster staan en mist er niets. */ #poort .beeld{ position:absolute;inset:0;z-index:0;overflow:hidden; background:#0B0E10 url("../assets/poort-editor.webp") center center / cover no-repeat; } /* De opname is een scherm vol licht grijs. Onder een sluier zakt dat naar hetzelfde middengrijs als de sluier zelf, en dan lijkt het beeld vlak. Een tikje meer contrast en verzadiging zet de tekening en de tegels weer uit elkaar; het is een correctie voor de sluier, geen filter. */ #poort .film{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .7s ease; filter:contrast(1.08) saturate(1.10) brightness(.94); } #poort .film.aan{opacity:1} /* de sluier. Twee verlopen over elkaar: een dat van links zwaar naar rechts licht loopt (daar staat de kaart), en een dat de onder- en bovenrand verzwaart. De opname is een LICHT scherm, dus zonder dit zou de witte tekentafel de kaart van links aanvreten. Het moet NET genoeg zijn. Een sluier die overal even zwaar ligt maakt van een scherp scherm een grijze soep, en dan kun je net zo goed een stilstaand vlak neerzetten; de rechterkant blijft daarom bijna open, want daar is de film het argument. De kaart heeft die zwaarte ook niet nodig: die staat op eigen donker glas. */ #poort .beeld::after{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(97deg,rgba(8,11,13,.93) 0%,rgba(8,11,13,.82) 20%,rgba(8,11,13,.46) 44%,rgba(8,11,13,.14) 70%,rgba(8,11,13,.30) 100%), linear-gradient(to bottom,rgba(8,11,13,.40) 0%,rgba(8,11,13,0) 18%,rgba(8,11,13,0) 74%,rgba(8,11,13,.46) 100%); } /* de kaartkolom. Op een breed scherm staat hij links op de film, met ruimte eromheen zodat het beeld er omheen door blijft lopen. */ #poort .paneel{ position:relative;z-index:1; flex:0 0 clamp(340px,42%,580px);max-width:100%; display:flex;align-items:flex-start;justify-content:center; padding:44px clamp(22px,3vw,54px);overflow:auto; } /* het donkere glasvlak. Dezelfde vorm als een venster in de planner: rechte hoeken van 4 px en een harde verschoven schaduw. De vervaging is een extraatje; waar hij niet werkt blijft de ondergrond donker genoeg. */ #poort .kaart{ position:relative;width:100%;max-width:420px;margin:auto 0; display:flex;flex-direction:column; padding:32px clamp(22px,2.4vw,30px) 28px; background:rgba(16,20,23,.90); border:1px solid rgba(255,255,255,.10); border-radius:var(--rond-s); box-shadow:6px 6px 0 rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.06) inset; } /* Met vervaging mag het glas iets doorzichtiger, maar niet veel: de film eronder is een LICHT scherm, en bij .68 liep dat wit door de kaart heen en werd het donkere vlak melkgrijs. Op .80 blijft de kaart zichzelf en is er nog steeds beweging doorheen te zien. */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #poort .kaart{ background:rgba(14,18,21,.80); -webkit-backdrop-filter:blur(26px) saturate(115%); backdrop-filter:blur(26px) saturate(115%); } } #poort .merk{display:flex;align-items:center;gap:12px;margin:0 0 24px} #poort .merk .wk-merk{height:76px;width:auto;display:block;color:#FFFFFF} /* het mono-oogje boven de kop, dezelfde regel als in de vensters van de app */ #poort .oog{ display:block;margin:0 0 8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--tekst-s);letter-spacing:.09em;text-transform:uppercase;color:#8FA0A8; } #poort h1{ margin:0 0 8px;font-size:clamp(23px,2.1vw,27px);line-height:1.15; font-weight:600;letter-spacing:-.02em;color:#F4F7F8; } #poort p.uitleg{margin:0 0 22px;color:#9FACB3;font-size:var(--tekst-l);line-height:1.55} /* de hoofdhandeling: dezelfde oranje knop als in elk venster van de app, met het pijlblokje ervoor. Op papier was de knop licht met een oranje blokje; op donker keert dat om, anders verdwijnt hij in de kaart. */ #poort .knop{ align-self:flex-start; display:inline-flex;align-items:stretch;overflow:hidden;height:46px;padding:5px; background:#EC633D;color:#fff;border:0;border-radius:var(--rond-s); box-shadow:var(--papier-1); font:inherit;font-weight:600;font-size:var(--tekst-xl);cursor:pointer;text-decoration:none; transition:background .16s,box-shadow .16s; } /* hidden op de knop moet ook echt verbergen: de display:inline-flex hierboven wint het anders van de standaardregel van de browser, en dan staat er een dode knop in beeld zolang het inlogadres nog niet bekend is */ #poort .knop[hidden]{display:none} #poort .knop .pijl{ flex:none;width:36px;display:flex;align-items:center;justify-content:center; border-radius:var(--rond-s);background:rgba(0,0,0,.22);color:#fff; } #poort .knop .lbl{display:flex;align-items:center;padding:0 18px;white-space:nowrap} #poort .knop:hover{background:#E05428;box-shadow:var(--papier-2)} #poort .knop:focus-visible{outline:2px solid #F4F7F8;outline-offset:2px} /* de rustige tussenstand terwijl het inlogscherm nog onderweg is */ #poort .status{ margin:12px 0 0;font:400 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#8FA0A8; } #poort .status:empty{display:none} #poort .voet{margin:14px 0 0;font-size:var(--tekst-m);line-height:1.55;color:#9FACB3} #poort .voet:empty{display:none} #poort .voet a{color:#F4F7F8;text-decoration:underline;text-underline-offset:2px} /* ---------- het inlogformulier IN de kaart ---------- Clerk tekent zijn eigen inlogscherm hierbinnen (mountSignIn), op dezelfde kaart. Dit vlak is leeg tot het script het formulier erin heeft gezet; pas dan komt .aan erop. Zolang dat niet gebeurt, en dus ook als een blokkeerder clerk.browser.js tegenhoudt, blijft de knop erboven staan en werkt die gewoon. De kleuren van het formulier zelf staan niet hier maar in het appearance-blok bij de mount (POORTLOOK in planner/account.js): Clerk tekent in een eigen boom en luistert niet naar losse CSS-selectors van ons. Twee lagen en niet een: Clerk SCHRIJFT het class-attribuut van zijn eigen aanhechtpunt over. Het buitenste vak is daarom van ons, het binnenste van hem. */ /* ---------- het skelet ---------- Zolang Clerk nog tekent staat hier de MAAT van wat eraan komt: een blok voor de Google-knop, een streep, een labelregel, het veld, de hoofdknop en de voetregel, met dezelfde hoogtes en tussenruimtes als het echte formulier. Daardoor verandert de kaart niet van hoogte op het moment dat het formulier verschijnt. Bewust NEUTRAAL: geen tekst, geen pictogram, geen knop die zo meteen door een andere knop vervangen wordt. Het glimt zacht, zodat het leest als "nog even" en niet als een kapot scherm. Wie beweging heeft uitgezet krijgt de balkjes stil. */ /* De hoogte is GEMETEN, niet geschat: het ingelogde formulier van Clerk is hier 308 px hoog, op een breed scherm en op 390 px even goed (de knoppen en het veld hebben vaste hoogtes, alleen de breedte verschilt). Het skelet reserveert precies dat, en de balkjes verdelen zich erover. Daardoor staat de kaart bij het wisselen stil in plaats van 67 px te groeien. Verandert Clerk zijn formulier, dan klopt dit getal niet meer. Naar opzoeken: de meting staat in het verslag bij deze wijziging, en je herhaalt hem door #poortskelet even zichtbaar te maken naast het echte vak. */ #poort .skelet{ display:flex;flex-direction:column;justify-content:space-between;gap:14px; width:100%;min-height:308px;margin:2px 0 0; } #poort .skelet[hidden]{display:none} #poort .skelet .bk, #poort .skelet .streep{ display:block;width:100%;border-radius:var(--rond-s); background:linear-gradient(90deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.05) 100%); background-size:220% 100%; } #poort .skelet .knop{height:44px} #poort .skelet .veld{height:42px} #poort .skelet .lbl{height:13px;width:38%} #poort .skelet .voet{height:13px;width:64%;align-self:center} #poort .skelet .streep{height:1px;border-radius:0;background:rgba(255,255,255,.14)} @media (prefers-reduced-motion:no-preference){ @keyframes wkSkelet{from{background-position:120% 0}to{background-position:-120% 0}} #poort .skelet .bk{animation:wkSkelet 1.5s linear infinite} } #poort .inlog{display:none;width:100%;margin:2px 0 0} /* en het echte formulier komt er zacht overheen in plaats van erin te klappen. De hoogte was al gereserveerd door het skelet, dus dit is alleen nog het laatste zetje. */ #poort .inlog.aan{display:block;animation:wkVormIn .28s ease both} @keyframes wkVormIn{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){ #poort .inlog.aan{animation:none} } #poort .inlog>#poortinlog{width:100%} /* Onze eigen invoervelden staan elders in dit bestand als kale `input[type=text]`-regel, en het e-mailveld van Clerk is ook een input[type=text]. Die regel wint van het appearance-blok, dus hier een keer terugzetten wat er lekt, met de kaart als bereik zodat de planner er niets van merkt. Alleen kleur, rand en letter; de maatvoering blijft van Clerk, die weet waar zijn oogje-icoon staat. */ #poort .inlog input[type=text], #poort .inlog input[type=email], #poort .inlog input[type=tel], #poort .inlog input[type=password]{ background:rgba(255,255,255,.06);color:#F4F7F8; border:1px solid rgba(255,255,255,.16);border-radius:var(--rond-s); font:inherit;font-size:var(--tekst-l);padding:0 12px; } #poort .inlog input:focus{border-color:#EC633D} /* De decoratieve maatlijn die hier stond is weg, en dat is een besluit en geen vergeetpost. Hij was getekend voor de vorige beeldhelft: een rondje door een woning uit de VR-scene, waar geen enkele maat in beeld stond. De film laat nu de editor zelf zien, en die tekent zijn EIGEN maatlijnen, schaalbalk en millimeters. Er lag dus een verzonnen maat van 2180 over een echte maat van 2600, rechtsonder precies op de schaalbalk van de planner. Twee maatvoeringen over elkaar leest als een fout in het product. Zie ook de markup van #poort in index.html. */ /* een keer, bij het openklappen. Verder geen beweging in de kaart zelf. */ @keyframes wkPoortIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} #poort .kaart>*{animation:wkPoortIn .46s cubic-bezier(.2,.7,.3,1) both} #poort .kaart>*:nth-child(2){animation-delay:.05s} #poort .kaart>*:nth-child(3){animation-delay:.10s} #poort .kaart>*:nth-child(4){animation-delay:.15s} #poort .kaart>*:nth-child(n+5){animation-delay:.20s} /* wie beweging heeft uitgezet krijgt alleen het stilstaande beeld. Het script in planner/poort.js laadt de film dan niet eens; dit is de tweede sluiting, voor het geval iemand de instelling omzet terwijl de poort al openstaat. */ @media (prefers-reduced-motion: reduce){ #poort .kaart>*{animation:none} #poort .knop{transition:none} #poort .film{display:none} } /* ---------- smal scherm ---------- Geen gedeeld scherm meer en ook geen band bovenin: de film blijft de ondergrond en de kaart gaat in het midden staan. Dat is precies wat er op een breed scherm ook gebeurt, alleen gecentreerd, dus er is niets dat kan omvallen. De sluier wordt hier zwaarder en verticaal, want de kaart ligt nu MIDDEN op het beeld en niet aan de rand ervan. */ @media (max-width:860px){ #poort{justify-content:center} #poort .paneel{ flex:1 1 auto;width:100%;align-items:center; padding:26px 20px calc(30px + env(safe-area-inset-bottom)); } #poort .kaart{max-width:460px;padding:26px 22px 24px} #poort .merk{margin:0 0 18px} #poort .merk .wk-merk{height:64px} #poort .beeld::after{ background: linear-gradient(to bottom,rgba(8,11,13,.62) 0%,rgba(8,11,13,.30) 28%,rgba(8,11,13,.34) 64%,rgba(8,11,13,.74) 100%); } /* met het formulier erbij is de kaart ruim twee keer zo hoog */ #poort.metinlog .merk{margin:0 0 12px} #poort.metinlog .merk .wk-merk{height:54px} #poort.metinlog h1{font-size:var(--tekst-4xl)} #poort.metinlog p.uitleg{margin:0 0 14px} } /* een telefoon in liggende stand: weinig hoogte, dus de kaart mag strakker. De film wordt hier niet geladen; het script kijkt naar dezelfde grens. */ @media (max-height:520px) and (max-width:860px){ #poort .paneel{padding-top:20px;padding-bottom:20px} #poort .merk .wk-merk{height:48px} } /* ---------- het overzicht: waar een ingelogde bezoeker landt ---------- Sander: "je moet eerst op een pagina belanden waar je alle ontwerpen ziet en als er geen ontwerp is moet er staan maak je eerste ontwerp." Dus geen tekentafel meteen na het inloggen, maar dit. Het is dezelfde familie als de poort hierboven en het keuzescherm hieronder, en dat is geen sier: iemand komt hier binnen een paar tellen alle drie tegen. Dus hetzelfde papieren beige vlak (#DDCDAF), dezelfde kaart (#EEE7DE met de korrel), hetzelfde mono-oogje boven de kop en dezelfde papieren knop met het oranje pijlblokje. Alleen de beeldhelft van de poort blijft weg: die verkoopt het product, en dat is hier al gebeurd. De lijst uit /api/ontwerp?mine=1 draagt een naam en een datum en verder niets; de beeldjes van de catalogus komen apart uit /api/catalogus (zie planner/thumbs.js). Hij ligt onder de poort (99999 tegen 100000) en onder het keuzescherm. Zo wint de poort altijd als er alsnog ingelogd moet worden, en legt het abonnementsscherm zich er netjes overheen. */ #overzicht{ display:none;position:fixed;inset:0;z-index:99999; align-items:flex-start;justify-content:center;padding:44px 20px 40px;overflow:auto; font:14px/1.45 system-ui,-apple-system,'Archivo',sans-serif;color:#373737; } html.overzicht #overzicht{display:flex} #overzicht[hidden]{display:none} #overzicht .kaart{ position:relative;width:100%;max-width:520px;margin:auto 0; display:flex;flex-direction:column; padding:32px clamp(22px,2.4vw,30px) 28px; background:#EEE7DE url(../assets/pakket-1.jpg) center/cover; border:1px solid rgba(55,55,55,.18); box-shadow:var(--papier-2); transform:rotate(-.35deg); } @media (max-width:719px){ #overzicht .kaart{transform:none} } #overzicht .merk{display:flex;align-items:center;gap:12px;margin:0 0 24px} #overzicht .merk .wk-merk{height:82px;width:auto;display:block;color:#1A1A1A} #overzicht .oog{ display:block;margin:0 0 8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--tekst-m);letter-spacing:.06em;text-transform:uppercase;color:#7a6f5c; } #overzicht h1{ margin:0 0 8px;font-size:clamp(23px,2.1vw,27px);line-height:1.15; font-weight:600;letter-spacing:-.02em;color:#373737; } #overzicht p.uitleg{margin:0 0 20px;color:#6f6659;font-size:var(--tekst-l);line-height:1.55} /* de ontwerpen zelf: regels op papier, geen kaartjes. Een maatlijn-achtige streep tussen twee regels, de datum in dezelfde monospace als de maten. */ #overzicht .lijst{ display:flex;flex-direction:column;margin:0 0 22px; max-height:46vh;overflow:auto;border-top:1px solid rgba(55,55,55,.18); } #overzicht .lijst:empty{display:none} #overzicht .rij{ display:flex;align-items:baseline;gap:12px;width:100%;text-align:left; padding:12px 2px;background:none;border:0;border-bottom:1px solid rgba(55,55,55,.18); font:inherit;color:#373737;cursor:pointer; } #overzicht .rij:hover{background:rgba(253,248,240,.55)} #overzicht .rij:focus-visible{outline:2px solid #212121;outline-offset:-2px} #overzicht .rij .nm{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-weight:600; } #overzicht .rij .dt{ flex:none;font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#7a6f5c; } /* het ontwerp waar hij middenin zat. Staat bovenaan en draagt zijn eigen waarschuwing: dit ding zit in deze browser en niet in het account. */ #overzicht .rij.lopend{background:rgba(253,248,240,.45)} #overzicht .laden{ margin:0 0 20px;font:400 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#7a6f5c; } #overzicht .laden:empty{display:none} #overzicht .knop{ align-self:flex-start; display:inline-flex;align-items:stretch;overflow:hidden;height:46px;padding:5px; background:#FDF8F0;color:#212121;border:0;border-radius:var(--rond-s); box-shadow:var(--papier-1); font:inherit;font-weight:600;font-size:var(--tekst-xl);cursor:pointer;text-decoration:none; transition:box-shadow .16s; } #overzicht .knop .pijl{ flex:none;width:36px;display:flex;align-items:center;justify-content:center; border-radius:var(--rond-s);background:#EC633D;color:#fff; } #overzicht .knop .lbl{display:flex;align-items:center;padding:0 18px;white-space:nowrap} #overzicht .knop:hover{box-shadow:var(--papier-2)} #overzicht .knop:focus-visible{outline:2px solid #212121;outline-offset:2px} /* de rest van de demo-termijn, in dezelfde woorden als het accountmenu */ #overzicht .voet{margin:16px 0 0;font-size:var(--tekst-m);line-height:1.55;color:#6f6659} #overzicht .voet:empty{display:none} #overzicht .uitweg{ margin:14px 0 0;align-self:flex-start;background:none;border:0;padding:0; font:inherit;font-size:var(--tekst-m);color:#212121;cursor:pointer; text-decoration:underline;text-underline-offset:2px; } #overzicht .uitweg[hidden]{display:none} @media (max-width:860px){ #overzicht{padding:26px 16px calc(30px + env(safe-area-inset-bottom))} #overzicht .kaart{padding:26px 22px 24px} #overzicht .merk{margin:0 0 18px} #overzicht h1{font-size:var(--tekst-4xl)} #overzicht .lijst{max-height:none} } /* ---------- de fullscreen catalogus ("Ontwerpen") ---------- Zelfde papieren huisstijl als de kaart hierboven, maar dan het hele scherm vol: een echte catalogus, utilitair, geen speelgoed. Per ontwerp een stilstaande 3D-render die alleen bij hover langzaam ronddraait (zie planner/thumbs.js), naam en rustige metadata. */ html.overzicht #overzicht{align-items:flex-start} #ovwrap{ width:100%;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:16px; color:#373737; } #ovtop{display:flex;align-items:center;justify-content:space-between;gap:16px} #ovtop .merk{display:flex;align-items:center;gap:12px} #ovtop .merk .wk-merk{height:64px;width:auto;display:block;color:#1A1A1A} #ovacct{display:flex;align-items:center;gap:10px} .ovchip{ display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 6px; background:#EEE7DE;border:1px solid rgba(55,55,55,.18);border-radius:var(--rond-vol); cursor:pointer;font:inherit;color:#373737;box-shadow:var(--papier-1); } .ovchip:hover{box-shadow:var(--papier-2)} .ovchip .rond{ flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden; background:var(--wk-zacht,#e7ded0);color:var(--wk,#b4551f); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--tekst-l); } .ovchip .rond img{width:100%;height:100%;object-fit:cover;display:block} .ovchip .nm{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--tekst-l)} #ovhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} #ovhead .ovtitel{min-width:0} #overzicht #ovhead .oog{ display:block;margin:0 0 6px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--tekst-m);letter-spacing:.06em;text-transform:uppercase;color:#7a6f5c; } #overzicht #ovkop{margin:0;font-size:clamp(24px,2.4vw,30px);line-height:1.1;font-weight:600;letter-spacing:-.02em;color:#373737} .ovnieuw{ align-self:flex-start;display:inline-flex;align-items:stretch;overflow:hidden;height:44px;padding:5px; background:#FDF8F0;color:#212121;border:0;border-radius:var(--rond-s);box-shadow:var(--papier-1); font:inherit;font-weight:600;font-size:var(--tekst-xl);cursor:pointer;flex:none; } .ovnieuw .pijl{flex:none;width:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--rond-s);background:#EC633D;color:#fff} .ovnieuw .lbl{display:flex;align-items:center;padding:0 16px;white-space:nowrap} .ovnieuw:hover{box-shadow:var(--papier-2)} #ovbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .ovzoekwrap{display:flex;align-items:center;gap:8px;flex:1 1 260px;max-width:420px; background:#FDF8F0;border:1px solid rgba(55,55,55,.2);border-radius:var(--rond-s);padding:0 12px;height:38px} .ovzoekwrap .ovzoekic{color:#7a6f5c;flex:none} #ovzoek{flex:1 1 auto;min-width:0;border:0;background:none;font:inherit;font-size:var(--tekst-xl);color:#373737;outline:none} .ovbarrrecht{display:flex;align-items:center;gap:10px} .ovtxtknop{background:none;border:0;font:inherit;font-size:var(--tekst-l);color:#6f6659;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:6px 2px} .ovtxtknop.aan{color:#b4551f;font-weight:600} #ovweergave{display:inline-flex;background:#EEE7DE;border:1px solid rgba(55,55,55,.2);border-radius:var(--rond-s);overflow:hidden} #ovweergave button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:#7a6f5c;cursor:pointer} #ovweergave button+button{border-left:1px solid rgba(55,55,55,.2)} #ovweergave button.aan{background:#FDF8F0;color:#373737} /* mappenstrook: chips per klant/map */ #ovmappen{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #ovmappen:empty{display:none} .ovmapchip{ display:inline-flex;align-items:center;gap:7px;padding:6px 12px;background:#EEE7DE; border:1px solid rgba(55,55,55,.2);border-radius:var(--rond-vol);cursor:pointer;font:inherit;font-size:var(--tekst-l);color:#373737; } .ovmapchip:hover{background:#FDF8F0} .ovmapchip.aan{background:#212121;color:#FDF8F0;border-color:#212121} .ovmapchip .tel{font:400 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;opacity:.7} .ovmapchip.nieuw{border-style:dashed;color:#6f6659} /* de detailbalk van een geopende map: klant, adres, bijlagen */ #ovmapdetail{background:#EEE7DE;border:1px solid rgba(55,55,55,.18);border-radius:var(--rond-s);padding:16px 18px;box-shadow:var(--papier-1)} #ovmapdetail[hidden]{display:none} #ovmapdetail .kop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap} #ovmapdetail h2{margin:0 0 4px;font-size:var(--tekst-3xl);font-weight:700} #ovmapdetail .klantregel{font-size:var(--tekst-l);color:#6f6659;line-height:1.5} #ovmapdetail .mapacties{display:flex;gap:8px;flex-wrap:wrap} #ovmapdetail .huidig{margin-top:14px;border-top:1px solid rgba(55,55,55,.16);padding-top:12px} #ovmapdetail .huidig .oog{font-family:ui-monospace,monospace;font-size:var(--tekst-s);letter-spacing:.06em;text-transform:uppercase;color:#7a6f5c;display:block;margin-bottom:8px} #ovmapdetail .fotos{display:flex;gap:10px;flex-wrap:wrap} #ovmapdetail .foto{position:relative;width:110px;height:82px;border-radius:var(--rond-s);overflow:hidden;border:1px solid rgba(55,55,55,.2);background:#DDD} #ovmapdetail .foto img{width:100%;height:100%;object-fit:cover;display:block} #ovmapdetail .foto .weg{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(20,20,20,.62);color:#fff;font-size:var(--tekst-l);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center} #ovmapdetail .fotoadd{min-width:110px;height:82px;padding:0 16px;white-space:nowrap;border:1px dashed rgba(55,55,55,.4);border-radius:var(--rond-s);background:#FDF8F0;color:#6f6659;cursor:pointer;font:inherit;font-size:var(--tekst-m);display:flex;align-items:center;justify-content:center} #overzicht .ovladen{margin:2px 0;font:400 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#7a6f5c} #overzicht .ovladen:empty{display:none} /* rasterweergave: max 4 kolommen */ #ovlijst.raster{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .ovcard{position:relative;display:flex;flex-direction:column;background:#EEE7DE;border:1px solid rgba(55,55,55,.18);border-radius:var(--rond-s);overflow:hidden;box-shadow:var(--papier-1)} .ovcard:hover{box-shadow:var(--papier-2)} .ovcard .ovthumb{position:relative;display:block;width:100%;aspect-ratio:4/3;border:0;padding:0;background:#E4DAC8;cursor:pointer;overflow:hidden} .ovcard .ovthumb img{width:100%;height:100%;object-fit:cover;display:block} /* de draai-reeks ligt als filmstrip over het stilstaande beeld; alleen zichtbaar tijdens hover (zie spinStart) */ .ovcard .ovthumb .spin{position:absolute;inset:0;display:none;background-repeat:no-repeat;pointer-events:none} .ovcard .ovthumb .leeg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#a89a80} .ovcard .ovcardft{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;border-top:1px solid rgba(55,55,55,.14)} .ovcard .ovnaam{font-weight:600;font-size:var(--tekst-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#373737} .ovcard .ovsub{display:flex;align-items:center;gap:8px;font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#7a6f5c;flex-wrap:wrap} /* lijstweergave: compacte rijen */ /* max-height expliciet uit: `#overzicht .lijst` hierboven (uit de oude overzichtskaart) zet 46vh op alles met class "lijst" binnen #overzicht, en dat is sinds de fullscreen catalogus alleen nog dit element. Met de overflow:hidden hieronder kapte dat de lijst af rond de zesde regel, zonder schuifbalk. De catalogus paginaeert zelf; hij hoort niet in een eigen venstertje te zitten. */ #ovlijst.lijst{display:flex;flex-direction:column;background:#EEE7DE;border:1px solid rgba(55,55,55,.18);border-radius:var(--rond-s);overflow:hidden;max-height:none} #ovlijst.lijst .ovrow{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid rgba(55,55,55,.14)} #ovlijst.lijst .ovrow:last-child{border-bottom:0} #ovlijst.lijst .ovrow:hover{background:rgba(253,248,240,.6)} #ovlijst.lijst .ovthumb{flex:none;width:64px;height:48px;border:0;padding:0;border-radius:var(--rond-s);overflow:hidden;background:#E4DAC8;cursor:pointer} #ovlijst.lijst .ovthumb img{width:100%;height:100%;object-fit:cover;display:block} #ovlijst.lijst .ovthumb .leeg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#a89a80} #ovlijst.lijst .ovthumb .spin{display:none} /* in de lijst draait niets: te klein om iets te lezen */ #ovlijst.lijst .ovnaam{flex:1 1 auto;min-width:0;text-align:left;background:none;border:0;font:inherit;font-weight:600;font-size:var(--tekst-xl);color:#373737;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #ovlijst.lijst .ovdt{flex:none;width:96px;font:400 12px/1.4 ui-monospace,monospace;color:#7a6f5c} #ovlijst.lijst .ovprijs{flex:none;width:96px;text-align:right;font:400 12.5px/1.4 ui-monospace,monospace;color:#5a5145} #ovlijst.lijst .ovstatus{flex:none;width:104px} @media (max-width:720px){ #ovlijst.lijst .ovdt,#ovlijst.lijst .ovprijs{display:none} } /* de sterknop en het kebab-menu, gedeeld tussen kaart en rij */ .ovster{background:none;border:0;cursor:pointer;color:#b7ab93;padding:4px;line-height:0} .ovster.aan{color:#EC633D} .ovkebab{background:none;border:0;cursor:pointer;color:#7a6f5c;padding:4px;line-height:0;border-radius:var(--rond-s)} .ovkebab:hover{background:rgba(55,55,55,.08)} .ovcard .ovhoek{position:absolute;top:6px;right:6px;display:flex;gap:2px;background:rgba(238,231,222,.82);border-radius:var(--rond-s);backdrop-filter:blur(2px)} .ovcard .ovster{color:#8a7d64} .ovcard .ovster.aan{color:#EC633D} /* statuspil */ .ovpil{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--rond-vol);font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.01em} .ovpil::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9} .ovpil.concept{background:#e7ded0;color:#6f6659} .ovpil.gedeeld{background:#e2ecec;color:#3f7070} .ovpil.goedgekeurd{background:#e2ecdc;color:#4a7a3a} .ovpil.besteld{background:#f3e0d4;color:#b4551f} /* het zwevende kebab-menu */ #ovpop{position:fixed;z-index:100011;min-width:186px;background:#FDF8F0;border:1px solid rgba(55,55,55,.2);border-radius:var(--rond-s);box-shadow:4px 6px 0 rgba(0,0,0,.14);padding:5px;font:14px/1.4 system-ui,sans-serif} #ovpop button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border:0;background:none;font:inherit;color:#373737;cursor:pointer;border-radius:var(--rond-s)} #ovpop button:hover{background:rgba(55,55,55,.08)} #ovpop button.rood{color:#b42318} #ovpop .streep{height:1px;background:rgba(55,55,55,.14);margin:5px 6px} #ovpag{display:flex;align-items:center;justify-content:center;gap:6px} #ovpag:empty{display:none} #ovpag button{min-width:34px;height:34px;padding:0 9px;background:#EEE7DE;border:1px solid rgba(55,55,55,.2);border-radius:var(--rond-s);font:inherit;font-size:var(--tekst-l);color:#373737;cursor:pointer} #ovpag button.aan{background:#212121;color:#FDF8F0;border-color:#212121} #ovpag button:disabled{opacity:.4;cursor:default} #overzicht .ovvoet{margin:2px 0 0;font-size:var(--tekst-m);line-height:1.55;color:#6f6659} #overzicht .ovvoet:empty{display:none} .ovuitweg{margin:6px 0 0;align-self:flex-start;background:none;border:0;padding:0;font:inherit;font-size:var(--tekst-m);color:#212121;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .ovuitweg[hidden]{display:none} .ovleeg{padding:40px 8px;text-align:center;color:#7a6f5c;font-size:var(--tekst-xl)} /* Het scherm dat er staat als de ontwerpen niet opgehaald konden worden. De titel staat op de plek van "Ontwerpen laden…"; dit is de uitleg eronder, met de ene knop die de klant verder helpt. Zelfde papier als de rest van het overzicht, dus dezelfde beige knop met de harde schaduw. */ .ovmis{padding:56px 8px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px} .ovmis h2{margin:0;font-size:var(--tekst-4xl);line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#373737} .ovmis p{margin:0 0 6px;max-width:44ch;color:#4b4741;font-size:var(--tekst-xl);line-height:1.55} .ovmisknop{ font:inherit;font-size:var(--tekst-l);font-weight:600;color:#212121;cursor:pointer; background:#FDF8F0;border:0;border-radius:var(--rond-s);padding:10px 18px; box-shadow:var(--papier-1); } .ovmisknop:hover{box-shadow:var(--papier-2)} .ovmisknop:focus-visible{outline:2px solid #212121;outline-offset:2px} /* een klein papieren formuliervenster (details, map bewerken, deellinks) */ #ovform{position:fixed;inset:0;z-index:100012;background:rgba(33,33,33,.42);display:none;align-items:center;justify-content:center;padding:18px} #ovform.open{display:flex} #ovform .box{width:100%;max-width:440px;max-height:88vh;overflow:auto;background:#EEE7DE;border-radius:var(--rond-s);box-shadow:var(--papier-3);color:#212121} #ovform .box h2{margin:0;padding:16px 18px;font-size:var(--tekst-3xl);font-weight:700;border-bottom:1px solid rgba(55,55,55,.18)} #ovform .body{padding:16px 18px;display:flex;flex-direction:column;gap:13px} #ovform label{display:flex;flex-direction:column;gap:5px;font-size:var(--tekst-m);color:#6f6659} #ovform input,#ovform textarea,#ovform select{font:inherit;font-size:var(--tekst-xl);color:#212121;background:#FDF8F0;border:1px solid rgba(55,55,55,.24);border-radius:var(--rond-s);padding:9px 11px} #ovform textarea{resize:vertical;min-height:66px} #ovform .foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px} #ovform .foot button{font:inherit;font-size:var(--tekst-xl);padding:9px 16px;border-radius:var(--rond-s);cursor:pointer;border:1px solid rgba(55,55,55,.24);background:#FDF8F0;color:#212121} #ovform .foot button.dark{background:#212121;color:#FDF8F0;border-color:#212121} #ovform .deellink{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(55,55,55,.14);font-size:var(--tekst-l)} #ovform .deellink:last-child{border-bottom:0} #ovform .deellink .info{flex:1 1 auto;min-width:0} #ovform .deellink .kort{font:400 12px/1.4 ui-monospace,monospace;color:#7a6f5c;word-break:break-all} #ovform .deellink .knopjes{display:flex;gap:6px;flex:none} #ovform .deelkop{margin:16px 0 0;font-size:var(--tekst-s);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7a6f5c} /* Het logo stond als los met alleen max-height in een label dat een flexkolom is: die rekt zijn kinderen op de volle breedte uit, en met alleen een hoogtegrens werd het logo daardoor uitgetrokken. Vandaar de vaste hoogte met vrije breedte, object-fit als vangnet en align-self zodat de kolom hem niet meer oprekt. */ #ovform .logoprev{display:block;align-self:flex-start;max-width:100%} #ovform .logoprev:empty{display:none} #ovform .logoprev img{display:block;height:44px;width:auto;max-width:100%;object-fit:contain;margin-top:4px;border-radius:var(--rond-s)} #ovform .mini{font:inherit;font-size:var(--tekst-m);padding:6px 10px;border-radius:var(--rond-s);cursor:pointer;border:1px solid rgba(55,55,55,.24);background:#FDF8F0;color:#212121} #ovform .mini.rood{color:#b42318;border-color:rgba(180,35,24,.4)} /* Het adresblok: straat, huisnummer, postcode en plaats in plaats van een vrij tekstveld, met het lijstje van de adressendienst onder de straat. Zie planner/adres.js. De kleuren staan als var() met de oude beige waarde erachter, zodat dit blok in het thema van overzicht.css meeloopt zonder dat daar een regel bij hoeft (en klopt als dat blad er niet is). Zes kolommen: vier voor de straat en twee voor het nummer, daaronder twee voor de postcode en vier voor de plaats. Zo staat de postcode links van de plaats, zoals een adres in Nederland geschreven wordt. */ #ovform .ovadres{display:flex;flex-direction:column;gap:6px} #ovform .ovadreskop{font-size:var(--tekst-m);color:var(--ov-zacht,#6f6659)} #ovform .ovadresnet{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px} #ovform .ovadresnet > label{gap:4px;min-width:0} #ovform .ovadresnet > label > span{font-size:var(--tekst-s)} #ovform .ovadresnet > label input{width:100%;box-sizing:border-box} /* Postcode en huisnummer bovenaan, want daar begint een Nederlandse verkoper; straat en plaats eronder, allebei over de volle breedte, want die worden gevuld maar blijven gewoon aanpasbaar. */ #ovform .ovadresnet > .pc{grid-column:1/4} #ovform .ovadresnet > .nr{grid-column:4/7} #ovform .ovadresnet > .straat{grid-column:1/7} #ovform .ovadresnet > .plaats{grid-column:1/7} #ovform .ovadresmelding{font-size:var(--tekst-m);line-height:1.4;color:var(--ov-zacht,#6f6659)} #ovform .ovadresmelding[hidden]{display:none} #ovform .ovadresvak{position:relative;display:block} #ovform .ovadreslijst{ position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:3; margin:0;padding:4px;list-style:none;max-height:206px;overflow-y:auto; background:var(--ov-vlak,#FDF8F0);border:1px solid var(--ov-lijn,rgba(55,55,55,.24)); border-radius:var(--rond-s);box-shadow:var(--papier-2); } #ovform .ovadreslijst[hidden]{display:none} #ovform .ovadreslijst li{ padding:8px 9px;border-radius:var(--rond-s);font-size:var(--tekst-l);line-height:1.3; color:var(--ov-inkt,#212121);cursor:pointer; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #ovform .ovadreslijst li:hover{background:var(--ov-vlak2,#EEE7DE)} #ovform .ovadreslijst li.aan{background:var(--ov-vlak2,#EEE7DE);font-weight:600} /* Op een telefoon is er geen ruimte voor zes kolommen naast elkaar: dan staan de vier velden onder elkaar over de volle breedte. */ @media (max-width:420px){ #ovform .ovadresnet{grid-template-columns:minmax(0,1fr)} #ovform .ovadresnet > .straat, #ovform .ovadresnet > .nr, #ovform .ovadresnet > .pc, #ovform .ovadresnet > .plaats{grid-column:1} } @media (max-width:900px){ #ovlijst.raster{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ #ovlijst.raster{grid-template-columns:1fr} #ovtop .ovchip .nm{display:none} } /* ---------- de profielstap: volledige naam en telefoonnummer ---------- Clerk kan dit niet voor ons vragen. Het kent alleen voornaam en achternaam als aparte velden en geen enkel veld voor een volledige naam, en telefoonnummers zijn daar een betaalde functie die op onze omgeving geen Nederlandse nummers accepteert. Dus vragen we het zelf, eenmalig, en bewaren we het bij ons (api/profiel.js). Dit scherm stond in de papieren beige stijl en was daarmee, na de donkere poort van 17 september, het enige beige vlak dat een ingelogde bezoeker nog zag: precies tussen de donkere poort en het bijna witte overzicht in. Sinds 18 september draagt het dezelfde taal als de poort. Niet "ook donker", maar letterlijk dezelfde onderdelen: de grond, het donkere glasvlak, de haarlijnen, het mono-oogje en EEN oranje knop als hoofdhandeling. De grond is dezelfde als die van de poort, inclusief hetzelfde beeld eronder. Dat is met opzet GEEN tweede film: er staat alleen het posterbeeld, en dat is op dit moment altijd al opgehaald (de poort gebruikt het als achtergrond van .beeld, ook bij databesparing en bij uitgezette beweging). Het kost dus geen extra verzoek en houdt deze stap geen milliseconde op, terwijl je wel in dezelfde ruimte blijft. Een echte film hier zou een tweede videobron betekenen bovenop een stap die zo kort mogelijk moet duren, en dat is het niet waard. Hij ligt boven alles (100002). Dat is expres: dit is de enige stap waar je niet omheen kunt klikken, en dus mag er ook niets overheen. Hij verschijnt alleen voor iemand die AANTOONBAAR ingelogd is en van wie de server zegt dat het profiel nog niet compleet is; valt Clerk uit of komt de server niet door, dan komt hij dus nooit in beeld en sluit hij niemand op. */ #profielpoort{ display:none;position:fixed;inset:0;z-index:100002; background:#0B0E10 url("../assets/poort-editor.webp") center center / cover no-repeat; align-items:flex-start;justify-content:center;padding:44px 20px 40px;overflow:auto; font:14px/1.45 system-ui,-apple-system,'Archivo',sans-serif;color:#E9EDEF; } html.profielstap #profielpoort{display:flex} /* de sluier over het beeld. Zwaarder dan bij de poort: daar staat de kaart aan de zijkant en mag het beeld ernaast ademen, hier staat hij MIDDEN op het scherm en is het beeld alleen nog de ruimte waar je net was. */ #profielpoort::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: linear-gradient(to bottom,rgba(8,11,13,.88) 0%,rgba(8,11,13,.72) 42%,rgba(8,11,13,.86) 100%); } /* het donkere glasvlak, dezelfde kaart als in de poort: rechte hoeken van 4 px en een harde verschoven schaduw. z-index 1, anders schildert de sluier hierboven er overheen (allebei positioned, dus de laatste wint). */ #profielpoort .kaart{ position:relative;z-index:1;width:100%;max-width:520px;margin:auto 0; display:flex;flex-direction:column; padding:32px clamp(22px,2.4vw,30px) 28px; background:rgba(16,20,23,.90); border:1px solid rgba(255,255,255,.10); border-radius:var(--rond-s); box-shadow:6px 6px 0 rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.06) inset; } @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #profielpoort .kaart{ background:rgba(14,18,21,.80); -webkit-backdrop-filter:blur(26px) saturate(115%); backdrop-filter:blur(26px) saturate(115%); } } /* een keer opkomen, net als de kaart in de poort. Zo is de overgang van het ene donkere scherm naar het andere een beweging en geen knipper. */ #profielpoort .kaart>*{animation:wkPoortIn .46s cubic-bezier(.2,.7,.3,1) both} #profielpoort .kaart>*:nth-child(2){animation-delay:.05s} #profielpoort .kaart>*:nth-child(3){animation-delay:.10s} #profielpoort .kaart>*:nth-child(n+4){animation-delay:.15s} @media (prefers-reduced-motion:reduce){ #profielpoort .kaart>*{animation:none} } #profielpoort .merk{display:flex;align-items:center;gap:12px;margin:0 0 24px} #profielpoort .merk .wk-merk{height:76px;width:auto;display:block;color:#FFFFFF} #profielpoort .oog{ display:block;margin:0 0 8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--tekst-s);letter-spacing:.09em;text-transform:uppercase;color:#8FA0A8; } #profielpoort h1{ margin:0 0 8px;font-size:clamp(23px,2.1vw,27px);line-height:1.15; font-weight:600;letter-spacing:-.02em;color:#F4F7F8; } #profielpoort p.uitleg{margin:0 0 20px;color:#9FACB3;font-size:var(--tekst-l);line-height:1.55} /* de twee velden. Het label staat in dezelfde monospace als het oogje en de maten op de tekening; dat is het schrijfschrift van dit product. */ #profielpoort .veld{display:flex;flex-direction:column;margin:0 0 16px} #profielpoort .veld label{ margin:0 0 6px; font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.05em;text-transform:uppercase;color:#8FA0A8; } /* hetzelfde veld als in de inlogkaart: een lichte waas op het glas met een haarlijn eromheen, want wit in wit leest niet als een veld en zwart in zwart evenmin */ #profielpoort .veld input{ width:100%;padding:11px 12px; background:rgba(255,255,255,.06);color:#F4F7F8; border:1px solid rgba(255,255,255,.16);border-radius:var(--rond-s); font:inherit;font-size:var(--tekst-2xl); } #profielpoort .veld input::placeholder{color:#7C8A91} #profielpoort .veld input:focus{outline:0;border-color:#EC633D} /* rood op donker moet lichter zijn dan rood op papier, anders valt het weg in plaats van op */ #profielpoort .veld input[aria-invalid="true"]{border-color:#FF8A7A} #profielpoort .veld .hulp{ margin:6px 0 0;font-size:var(--tekst-m);line-height:1.5;color:#9FACB3; } #profielpoort .veld .hulp.fout{color:#FF8A7A} /* de hoofdhandeling: dezelfde oranje knop als in de poort en in elk venster van de app, met het pijlblokje ervoor */ #profielpoort .knop{ margin:6px 0 0;align-self:flex-start; display:inline-flex;align-items:stretch;overflow:hidden;height:46px;padding:5px; background:#EC633D;color:#fff;border:0;border-radius:var(--rond-s); box-shadow:var(--papier-1); font:inherit;font-weight:600;font-size:var(--tekst-xl);cursor:pointer;text-decoration:none; transition:background .16s,box-shadow .16s; } #profielpoort .knop .pijl{ flex:none;width:36px;display:flex;align-items:center;justify-content:center; border-radius:var(--rond-s);background:rgba(0,0,0,.22);color:#fff; } #profielpoort .knop .lbl{display:flex;align-items:center;padding:0 18px;white-space:nowrap} #profielpoort .knop:hover{background:#E05428;box-shadow:var(--papier-2)} #profielpoort .knop:focus-visible{outline:2px solid #F4F7F8;outline-offset:2px} #profielpoort .knop[disabled]{opacity:.55;cursor:default;box-shadow:var(--papier-1)} #profielpoort .status{ margin:14px 0 0;font:400 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#8FA0A8; } #profielpoort .status:empty{display:none} #profielpoort .status.fout{color:#FF8A7A} #profielpoort .voet{margin:16px 0 0;font-size:var(--tekst-m);line-height:1.55;color:#9FACB3} @media (max-width:860px){ #profielpoort{padding:26px 16px calc(30px + env(safe-area-inset-bottom))} #profielpoort .kaart{padding:26px 22px 24px} #profielpoort .merk{margin:0 0 18px} #profielpoort .merk .wk-merk{height:64px} #profielpoort h1{font-size:var(--tekst-4xl)} } /* ---------- het keuzescherm voor het abonnement ---------- Dezelfde poort, andere vraag. Wie moet kiezen tussen Starter en Business hoort niet door een half doorschijnend venster naar zijn eigen planner te kijken: dat leidt af en het laat zien wat je nog niet hebt. Dus precies de vormen van #poort hierboven: een dicht, opaak vlak in --bg, een witte kaart met het merk erboven, en op de telefoon geen zwevende kaart maar gewoon de pagina. Alleen de kaart is breder, want er staan twee pakketten naast elkaar. Verschil met de poort: dit scherm MOET weg te klikken zijn zolang de gratis demo bestaat. Daarom een eigen knop onderaan, een kruisje rechtsboven en Escape. Drie uitwegen, geen doodlopende deur. */ #abopoort{ display:flex;position:fixed;inset:0;z-index:100001; background:#DDCDAF; align-items:flex-start;justify-content:center;padding:26px 20px 30px;overflow:auto; font:14px/1.45 system-ui,-apple-system,'Archivo',sans-serif;color:#373737; } #abopoort .kaart{ position:relative;width:100%;max-width:1080px;margin:auto; } #abopoort .merk{display:flex;align-items:center;gap:12px;margin-bottom:20px} #abopoort .merk .wk-merk{height:88px;width:auto;display:block;color:#1A1A1A} /* de kop van de prijzensectie: een klein mono-oogje boven een grote regel */ #abopoort .oog{ display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--tekst-m);letter-spacing:.06em;text-transform:uppercase;color:#7a6f5c;margin:0 0 8px; } #abopoort h1{margin:0 0 6px;font-size:27px;line-height:1.15;font-weight:600;letter-spacing:-.02em} #abopoort p.uitleg{margin:0 0 18px;color:#6f6659;font-size:var(--tekst-l);line-height:1.55} #abopoort .kruis{ position:absolute;top:-6px;right:-4px;border:0;background:none;cursor:pointer; font-size:27px;line-height:1;color:#6f6659;padding:2px 6px;border-radius:var(--rond-m); } #abopoort .kruis:hover{color:#373737} #abopoort .kruis:focus-visible{outline:2px solid var(--acc);outline-offset:2px} #abopoort .test{ margin:0 0 16px;padding:8px 12px;background:#fff7ed;border:1px solid #fed7aa; border-radius:var(--rond-m);color:#9a3412;font-size:var(--tekst-m);line-height:1.5; } /* de termijnschakelaar in dezelfde papieren tonen als de kaarten */ #abopoort .term{ display:inline-flex;background:rgba(255,255,255,.45);border:1px solid rgba(55,55,55,.16); border-radius:var(--rond-m);padding:3px;margin:0 0 18px; } #abopoort .term button{ border:0;border-radius:var(--rond-m);padding:7px 14px;font:inherit;font-weight:600;font-size:var(--tekst-l); cursor:pointer;background:none;color:#6f6659; } #abopoort .term button.aan{background:#FDF8F0;color:#212121;box-shadow:var(--papier-1)} #abopoort .term button:focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* ---------- de drie pakketkaarten, in de vormen van de landingpage ---------- Sander zag het keuzescherm naast woonklasse3d.com/#pricing staan en wilde dat het hetzelfde product is: papieren beige voor Starter, oranje voor de verhoogde Business, blauw voor Enterprise, met de papieren knop met het gekleurde pijlblokje ervoor. De drie texturen komen letterlijk van die sectie (images/pricing-1..3.jpg, hier verkleind als assets/pakket-1..3.jpg), dus het is dezelfde korrel en niet een nagemaakte kleur. De kleuren zijn afgelezen van de live sectie: paneel #DDCDAF, Starter #EEE7DE, Business #DB512A, Enterprise #2B4EB2, knoppapier #FDF8F0 met inkt #212121 en het pijlblok #EC633D (blauw #3B60C5 op de oranje kaart). */ #abopoort .pakketten{ display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px; align-items:stretch; } #abopoort .pak{ position:relative;display:flex;flex-direction:column;text-align:center; padding:30px 24px 26px;color:#373737; background:#EEE7DE url(../assets/pakket-1.jpg) center/cover; border:1px solid rgba(55,55,55,.18); box-shadow:var(--papier-2); transform:rotate(-.35deg); } #abopoort .pak--business{ background-color:#DB512A;background-image:url(../assets/pakket-2.jpg); color:#FEF9F1;border-color:rgba(255,255,255,.22);transform:rotate(.45deg); } #abopoort .pak--enterprise{ background-color:#2B4EB2;background-image:url(../assets/pakket-3.jpg); color:#FEF9F1;border-color:rgba(255,255,255,.22);transform:rotate(-.3deg); } #abopoort .pak .naam{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-bottom:10px} #abopoort .pak .wat{font-size:var(--tekst-m);line-height:1.25;opacity:.72;margin-bottom:22px} #abopoort .pak .prijs{display:flex;flex-direction:column;align-items:center;gap:4px} #abopoort .pak .prijs b{font-size:34px;font-weight:600;line-height:1;letter-spacing:-.02em} /* Enterprise heeft geen bedrag maar een uitnodiging; die hoort niet zo groot te staan als € 39 en € 89, want dan lijkt het een prijs */ #abopoort .pak--enterprise .prijs b{font-size:var(--tekst-4xl);font-weight:600;opacity:.85} #abopoort .pak .prijs span{font-size:var(--tekst-l);font-weight:500;opacity:.75} /* color:inherit is nodig, niet netjes: de planner heeft elders al een .hint met een eigen grijsgroen, en die won hier. Op de oranje kaart werd de jaarregel daardoor onleesbaar. */ #abopoort .pak .hint{font-size:var(--tekst-l);font-weight:500;opacity:.62;margin-top:2px;color:inherit} /* op de oranje en de blauwe kaart valt .62 weg tegen de ondergrond */ #abopoort .pak--business .hint, #abopoort .pak--enterprise .hint{opacity:.8} /* het randje om het jaarvoordeel: currentColor, want dezelfde regel staat op een lichte en op twee donkere kaarten */ #abopoort .pak .voordeel{ align-self:center;margin-top:8px;padding:3px 11px;border:1px solid currentColor; border-radius:var(--rond-vol);font-size:var(--tekst-m);font-weight:500;opacity:.8; } #abopoort .pak ul{list-style:none;padding:0;margin:24px 0 0;text-align:left} #abopoort .pak li{ position:relative;padding:7px 0 7px 20px;font-size:var(--tekst-m);font-weight:500;line-height:1.3; border-bottom:1px dashed currentColor; } #abopoort .pak li:last-child{border-bottom:0} #abopoort .pak li i{position:absolute;left:0;top:7px;font-style:normal;opacity:.85} /* de knoprij staat onderaan, zodat de drie knoppen op ÉÉN lijn staan. Dat is een uitdrukkelijke wens: "Neem contact op" hing eerst midden in de kaart. */ #abopoort .pak .knoprij{display:flex;justify-content:center;margin-top:auto;padding-top:30px} #abopoort .pak .knop{ display:inline-flex;align-items:stretch;overflow:hidden;height:46px;padding:5px; background:#FDF8F0;color:#212121;border:0;border-radius:var(--rond-s); box-shadow:var(--papier-1); font:inherit;font-weight:600;font-size:var(--tekst-xl);cursor:pointer;text-decoration:none; } #abopoort .pak .knop .pijl{ flex:none;width:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--rond-s); background:#EC633D; } #abopoort .pak--business .knop .pijl{background:#3B60C5} #abopoort .pak .knop .lbl{display:flex;align-items:center;padding:0 18px;white-space:nowrap} #abopoort .pak .knop:hover{box-shadow:var(--papier-2)} #abopoort .pak .knop:focus-visible{outline:2px solid #212121;outline-offset:2px} /* Business staat verhoogd, zoals op de landing. De extra ruimte wordt onderaan teruggegeven, anders zou de kaart zijn knop 26 px mee omhoog trekken en stond juist die ene knop weer uit de lijn. */ /* Business steekt bovenaan uit; onderaan lopen de drie gelijk, want de rij rekt ze uit tot dezelfde onderkant. Daardoor staan de drie knoppen vanzelf op één lijn. Eerder stond hier ook extra padding onder Business, en die duwde juist die ene knop 26 px omhoog. */ @media (min-width:720px){ #abopoort .pak--business{margin-top:-26px} } /* de uitweg. Geen tweede hoofdknop, maar ook geen weggemoffeld linkje: een volwaardige knop in de rustige variant, over de volle breedte. */ #abopoort .uitweg{ display:flex;align-items:center;justify-content:center;width:100%; margin:20px 0 0;padding:12px 16px;border-radius:var(--rond-m);border:1px solid rgba(55,55,55,.24); background:rgba(255,255,255,.45);color:#373737;font:inherit;font-weight:600;font-size:var(--tekst-xl);cursor:pointer; } #abopoort .uitweg:hover{border-color:#373737} #abopoort .uitweg:focus-visible{outline:2px solid var(--acc);outline-offset:2px} #abopoort .voet{margin:10px 0 0;font-size:var(--tekst-m);color:#6f6659;text-align:center;line-height:1.5} /* gestapeld heeft scheefstand geen zin: dan staat elke kaart los en leest een halve graad als een fout in plaats van als handwerk */ @media (max-width:719px){ #abopoort{padding:20px 14px 26px} #abopoort .pak{transform:none} #abopoort h1{font-size:24px} } /* ---------- wat in Business zit ---------- De rij of de stap blijft staan en blijft leesbaar. Een knop die verdwijnt leest als een defect ("waar is mijn dxf gebleven?"); een knop die zegt waar hij heen is leest als een pakketverschil. Vandaar geen display:none maar een label en een rustiger kleur. Deze klassen staan op en komen uit pasRechtenToe(). Ze zijn de schil, niet het slot: alleen de deellink wordt op de server geweigerd. */ body:not(.magpro) .optrow[data-pro]::after{ content:"Business";font-size:var(--tekst-s);line-height:1.3;font-weight:600;letter-spacing:.02em; color:#0B1941;background:#EEF1F8;border-radius:var(--rond-vol);padding:3px 9px; } body:not(.magpro) .optrow[data-pro] .bd .ax{color:var(--mid)} /* stap 4 in de rail: de tooltip zegt erbij dat het Business is */ body:not(.magpro) #rail button[data-stap="4"] .tip::after{content:" \00B7\00A0Business"} /* de deelknoppen: alleen zachter, de klik wordt in JS afgevangen */ body:not(.magdelen) #deel, body:not(.magdelen) #deeltop{opacity:.62} /* zelfde keuze als bij de poort: op een telefoon is dit gewoon de pagina */ @media (max-width:520px){ #abopoort .merk .wk-merk{height:74px} #abopoort .pak{padding:26px 20px 22px} } /* ================= stap 4: een maat op de tekening intypen ================= Elk getal op het wandaanzicht dat ergens vandaan gemeten wordt is een invoerveld in vermomming. Aanraken opent dit doosje op de plek van het getal, met het label erboven dat zegt WAARVANDAAN er gemeten wordt: "Hoogte b.a.v.", "Uit hoek A", "Uit de binnenwand". Een kaal getal op een bouwtekening is een raadsel met twee antwoorden, en dat is precies wat deze stap eerder had. */ #instmaat{position:absolute;z-index:34;display:none;background:#fff; border:1px solid var(--line);border-radius:var(--rond-m);padding:7px 9px; box-shadow:var(--schaduw-3);width:128px} #instmaat label{display:block;font-size:var(--tekst-xs);letter-spacing:.02em;color:var(--mid);margin-bottom:3px} #instmaat input{font:inherit;font-size:var(--tekst-xl);font-weight:600;width:100%;min-height:34px; padding:5px 7px;border:1px solid var(--line);border-radius:var(--rond-m);color:var(--ink)} #instmaat input:focus{outline:2px solid #2f7d4f;outline-offset:1px;border-color:#2f7d4f} /* ---- het maatveld van de live maten (planner/livemaat.js) ---- Dezelfde kaart als #instmaat: een regel die zegt waar de maat naartoe loopt, en een groot veld. Op een aanraakscherm ligt hij bovenaan het beeld, boven het toetsenbord, met 16 px tekst zodat iOS niet inzoomt. In 3D bestaat hij niet. */ #maatveld{position:absolute;z-index:35;display:none;background:#fff; border:1px solid var(--line);border-radius:var(--rond-m);padding:7px 9px; box-shadow:var(--schaduw-3);width:160px} #maatveld.open{display:block} #maatveld label{display:block;font-size:var(--tekst-xs);letter-spacing:.02em;color:var(--mid); margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #maatveld .rij{display:flex;align-items:center;gap:6px} #maatveld input{font:inherit;font-size:var(--tekst-xl);font-weight:600;width:100%;min-width:0;min-height:34px; padding:5px 7px;border:1px solid var(--line);border-radius:var(--rond-m);color:var(--ink)} #maatveld input:focus{outline:2px solid #2f7d4f;outline-offset:1px;border-color:#2f7d4f} #maatveld input.fout{border-color:#d92b1f;outline-color:#d92b1f} #maatveld .eenheid{color:var(--mid);font-size:var(--tekst-xs)} #maatveld.dock{position:fixed;left:50%;transform:translateX(-50%);width:min(260px,calc(100vw - 32px))} @media (pointer:coarse){ #maatveld input,#vrijpop .row input{font-size:16px;min-height:44px} } body.mode3d #maatveld{display:none!important} #sheet .lmhit{cursor:text} /* de 3D-maatlabels horen bij het 3D-beeld: in 2D nooit over de tekening (B-07) */ body:not(.mode3d) #maatlabels{display:none} /* de titel van het maatkaartje op een telefoon: gewone letters, hooguit twee regels (A-09) */ @media (max-width:600px){ #vrijpop .kop h3{text-transform:none;letter-spacing:0;font-size:var(--tekst-s); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} } /* het blad dat de aandacht terugkrijgt na een veld: geen kader om de tekening (maatBladFocus) */ svg#sheet.lmstil:focus{outline:none} /* ================= de installatielaag over het 3D-beeld ================= Stap Installatie tekent in de ruimte zelf: de camera staat haaks op een wand, de vloer of het plafond, en deze laag ligt er in beeldpunten overheen. Hij is standaard DOORLATEND - draaien, zoomen en selecteren gaan er gewoon doorheen - en alleen wat je echt kunt aanraken (.iraak) vangt de aanraking. Zonder die regel zou de laag het hele 3D-beeld afdekken. */ #instlaag{position:absolute;inset:0;width:100%;height:100%;z-index:6;display:none; pointer-events:none;overflow:visible} #instlaag .iraak{pointer-events:auto;cursor:pointer} /* de leiding die je op dit moment tekent. Hij ligt OVER het beeld, dus hij blijft ook zichtbaar waar hij achter een wand langs loopt: je tekent in de wand, en je moet zien wat je tekent. */ #instlaag .itek3{fill:none;stroke:#2F7D4F;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} #instlaag .itekvoor3{fill:none;stroke:#2F7D4F;stroke-width:2;stroke-dasharray:7 5;opacity:.8} #instlaag .itekpunt{fill:#fff;stroke:#2F7D4F;stroke-width:2} #instlaag .itekcursor{fill:#2F7D4F;stroke:#fff;stroke-width:1.6} #instlaag .itel3{fill:#1f3d2c;font:600 14px/1 system-ui,sans-serif; paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round} /* het lopende verval van een afvoer die de norm niet haalt */ #instlaag .itelrood3{fill:#c0392b} /* de toetsen tijdens het tekenen, klein onderin het beeld (instLaagHtml) */ #instlaag .itoets3vlak{fill:rgba(23,37,30,.72)} #instlaag .itoets3{fill:#fff;font:500 11px/1 system-ui,sans-serif} #instlaag .ioverlijn{stroke:#2F7D4F;stroke-width:1.4;stroke-dasharray:4 3} #instlaag .ikaartlijn{stroke:#2F7D4F;stroke-width:1;stroke-dasharray:3 3;opacity:.55} /* de knikpunten van de aangewezen leiding, en het plusje ertussen */ #instlaag .igrip3{fill:#fff;stroke:#2F7D4F;stroke-width:2} #instlaag .igripaan3{fill:#2F7D4F;stroke:#fff;stroke-width:2} #instlaag .igripplus{stroke:#2F7D4F;stroke-width:1.8;stroke-linecap:round} #instlaag .iaans{fill:rgba(255,255,255,.9);stroke:#2F7D4F;stroke-width:2} #instlaag .iaansaan{fill:#2F7D4F;stroke:#fff;stroke-width:2.4} /* een aansluiting waar nog geen leiding naartoe loopt: HOL. Een kleurwissel op het punt zelf, geen tekst en geen icoon, leesbaar op armlengte in een showroom. Zo zie je tijdens het tekenen wat er nog open staat. */ /* fill blijft staan, ook al hoort de ring HOL te lezen: een SVG-cirkel met fill:none vangt geen tik meer en dan kun je een open aansluiting niet meer aanwijzen om hem te tekenen. Bijna doorzichtig doet allebei. */ #instlaag .iaansopen{fill:rgba(255,255,255,.22);stroke:#2F7D4F;stroke-width:2;stroke-dasharray:4 3} /* het kaartje bij een aangewezen punt */ #instlaag .ikaart{fill:#fff;stroke:rgba(15,23,42,.18);stroke-width:1; filter:drop-shadow(0 6px 18px rgba(15,23,42,.18))} #instlaag .ikaartkop{fill:#1f3d2c;font:600 12px/1 system-ui,sans-serif} #instlaag .ikaartlbl{fill:#64748b;font:11px/1 system-ui,sans-serif} /* een getal dat je kunt overtypen: het leest als invoerveld, want dat is het */ #instlaag .imaatvlak3{fill:#f1f5f3;stroke:#cbd5cf;stroke-width:1} #instlaag .iraak:hover .imaatvlak3{fill:#e2efe7;stroke:#2F7D4F} #instlaag .imaat3{fill:#0f172a;font:600 13px/1 system-ui,sans-serif;pointer-events:none} /* de knoppen: dezelfde donkere pil als de knoppen van de app zelf */ #instlaag .iknop3{fill:#1f2937;stroke:none;filter:drop-shadow(0 4px 12px rgba(15,23,42,.28))} #instlaag .iknop3.over{fill:#2F7D4F} #instlaag .iknop3.weg{fill:#8a3b3b} #instlaag .iknop3.haaks{fill:rgba(31,41,55,.86)} #instlaag .iraak:hover .iknop3{fill:#0f172a} #instlaag .iraak:hover .iknop3.over{fill:#276841} #instlaag .iknoptxt3{fill:#fff;font:600 13px/1 system-ui,sans-serif;pointer-events:none} @media (max-width:760px){ #instlaag .iknoptxt3{font-size:var(--tekst-m)} #instlaag .imaat3{font-size:var(--tekst-m)} } /* ---- de terugpijl in de kop van een kaartpaneel (15 september) ---- Er WAS een weg terug: het woord voor je in het pad. Alleen zag niemand dat, dus dit is puur zichtbaarheid en geen tweede mechaniek (zie kruimelPijlZet in planner/paneel.js). Twee dingen. Ten eerste de pijl: dezelfde chevron, dezelfde maat en dezelfde plek als de terugknop die Inrichten al had (.popterug), links voor de kop. De klasse erft die opmaak volledig; hier staat alleen de ruimte tot de kop. Ten tweede het woord zelf: een klikbaar deel van het pad stond in dezelfde grijze inkt als de rest en las daarmee als tekst. Het krijgt de accentkleur van de app, zodat je ziet dat er iets te klikken valt. Het handje stond er al. */ .pophead>.kruimelpijl{margin-right:2px} .pophead h2 .kruimel{color:var(--wk)} .pophead h2 .kruimel:hover{color:var(--wk-ink)} /* ---- het uitlegvenster per stap (15 september) ---- De eerste keer dat je een stap opent komt er een venster met een paar zinnen over die stap en een kort filmpje dat laat zien hoe het werkt. Gebouwd in stapUitlegToon (planner/vragen.js), in #stage gezet. WAAROM HET GROOT EN GECENTREERD IS, EN NIET MEER KLEIN EN OPZIJ. Hier stond tot vanavond een kaartje van 360 px naast het werkblad, met de reden erbij dat het uitleg was die je NAAST je werk leest en dat het daarom de rail, de pil Verder, de loep en de kijkstanden vrij moest houden. Die reden is vervallen; zet hem niet terug omdat dit commentaar ooit iets anders zei. Wat er gebeurde: toen de filmpjes er kwamen bleek dat een opname van 1280 x 800 in zo'n kaartje 262 x 164 groot is. Je ziet de beweging, maar geen enkel opschrift in de app is dan te lezen, dus je hebt er niets aan. Sander heeft het live gezien en gevraagd het venster te centreren en zo goed als schermvullend te maken. Dit is dus geen uitleg meer die naast je werk ligt, maar een moment waarop je even kijkt hoe een stap werkt en daarna verder gaat. WAT ER WEL VRIJ BLIJFT: niet het scherm, maar het TEKENVLAK. Sander tekende zijn rechthoek van de rail tot net voor de zoomknoppen, en van onder de topbalk tot net boven de kijkstandbalk. Het venster hangt daarom in #stage met een inzet die precies die bediening buiten de deur houdt: links de rail (72 + 10), rechts de loep (16 + 42 + 10), onder de kijkstandbalk en de pil Verder (16 + 40 + 10), en boven een marge van 16. De topbalk valt sowieso buiten #stage. Zo blijf je zien waar je bent en waar je heen kunt, terwijl het filmpje alle ruimte krijgt die er is. Het werkblad van de stap valt er wel onder; dat is de bedoeling, je kijkt eerst en werkt daarna. GEEN DONKERE WAAS, MAAR EEN LICHTE VERVAGING. Elk ander venster in deze app legt er rgba(30,41,59,.45) achter. Hier niet: Sander wil de tekening kunnen blijven zien, alleen wat minder scherp, zodat het venster naar voren komt zonder dat er een grijze deken over zijn werk ligt. Dus 5 px blur op de ACHTERGROND (backdrop-filter, dus niet op het venster zelf) en een heel lichte toon van 12 procent wit, net genoeg om de witte kaart van de tekening los te trekken. De vervaging ligt binnen dezelfde inzet als het venster, dus ook zij raakt de bediening niet. De kaart houdt de 20 px rondom die .ovl van zichzelf heeft, en niet zonder reden: vult de kaart het hele vervaagde vlak, dan is er van die vervaging niets meer te zien. Nu loopt er een smalle rand vervaagde tekening omheen en leest het als een venster dat boven je werk hangt. EN DE 3D-SCENE ERONDER. Een vervaagde achtergrond kost rekenkracht, en in 3D draait daar een levende scene. Gemeten met de opzet van tests/proef-baksteen-meting.mjs: 60 fps met het venster open boven een draaiende scene, gelijk aan de 60 zonder venster, en de tekenbeurt zelf blijft even lang. De browser vervaagt namelijk een momentopname van wat er achter ligt en niet elk beeld opnieuw. Gaat dat op een tragere machine wel knellen, dan is `backdrop-filter` in de regel hieronder het enige dat weg hoeft; de rest blijft dan staan. VERDER IS DE OPMAAK DIE VAN DE ANDERE VENSTERS: dezelfde .ovl met .ovlbox als het vraag- en het bevestigingsvenster (zie boven in dit bestand), dezelfde witte kaart met kopregel en kruisje, dezelfde opkomst. Hieronder staat alleen waar hij hangt, hoe zijn achtergrond eruitziet en hoe zijn inhoud verdeeld is. WAT HET FILMPJE ERAAN HEEFT, gemeten: 1168 x 730 op 1920 x 1080, dus zo goed als ware grootte, en 720 x 450 op 1280 x 800. Daar was het om begonnen. */ /* De linkerkant staat op 154 en niet op de 82 van de panelen. Daar staat sinds 18 september de pil Verder, boven de rail, en die is breder dan die rail: gemeten 88 px voor "Verder", 112 voor "Opleveren", 95 voor "Afronden" en 128 voor "Ruimte sluiten", vanaf x=16, dus tot 144. Met 10 px lucht is dat 154. Waarom links en niet de bovenkant omlaag: dit venster is HOOG begrensd, niet breed. Een band van 50 px van de bovenkant af kostte het filmpje 80 px breedte (1034 werd 954 op 1920 px, onder de ondergrens van blok 10f hieronder in tests/uitest-stapuitleg.mjs); 72 px van de linkerkant af kost het niets, want het filmpje raakt die kant nergens. */ #stapuitleg{ /* links nooit over #stapnav heen: --su-links is de rechterrand van #stapnav plus 10 px, gezet door stapUitlegRand (planner/vragen.js). Sinds de knop #vorige (26 september) is #stapnav breder dan de 154 hierboven (30 september, red stapuitleg 10g). */ position:absolute;z-index:40;inset:16px 68px 66px max(154px,var(--su-links,0px)); background:rgba(255,255,255,.12);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px); } /* zonder filmpje valt er niets te vullen: dan is het een kaart met tekst en die wordt zo groot als hij moet zijn, midden in hetzelfde vlak */ #stapuitleg .ovlbox{max-width:560px} /* met filmpje vult de kaart het tekenvlak, precies de rechthoek hierboven */ #stapuitleg.film .ovlbox{max-width:none;width:100%;height:100%} #stapuitleg .subody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px; min-height:0;overflow:auto} #stapuitleg .subody h3{margin:0;font-size:var(--tekst-2xl);font-weight:700;line-height:1.25} #stapuitleg .sutekst{margin:0;font-size:var(--tekst-l);line-height:1.55;color:var(--mid)} /* de titel en de tekst samen in een kolom. Onder een breed filmpje zou een regel anders 1700 px lang worden; 880 is ongeveer 100 tekens en dat leest nog. Zie stapUitlegToon in planner/vragen.js. */ #stapuitleg .sukol{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:880px;flex:0 0 auto} /* het vak voor het filmpje. Staat er geen bestand bij deze stap, dan blijft het hidden en is er geen leeg vlak en geen speler: zie stapUitlegVideo. */ #stapuitleg .suvideo{border-radius:var(--rond-m);overflow:hidden;background:var(--bg);line-height:0} #stapuitleg .suvideo video{width:100%;height:auto;display:block} /* MET filmpje is het vak de hoofdzaak: het krijgt alles wat de tekst en de twee balken overlaten, en de opname staat daar zo groot in als er past, gecentreerd en op zijn eigen verhoudingen. Nooit bijgesneden en nooit opgerekt: een opname van 1280 x 800 die je uitrekt is meteen te zien. */ #stapuitleg.film .subody{overflow:hidden} #stapuitleg.film .suvideo{flex:1 1 auto;min-height:0;display:flex;align-items:center; justify-content:center;background:transparent;border-radius:0;overflow:visible} #stapuitleg.film .suvideo video{width:auto;height:100%;max-width:100%;max-height:100%; border-radius:var(--rond-m);background:var(--bg)} /* de regel dat een stap nog in ontwikkeling is. Amber en niet rood: er is niets stuk, het is nog niet af. */ #stapuitleg .subouw{ margin:0;padding:8px 10px;border-radius:var(--rond-m);font-size:var(--tekst-m);line-height:1.5; background:rgba(180,120,20,.10);color:#7A5314;border:1px solid rgba(180,120,20,.24); flex:0 0 auto; } /* de regel bovenaan het stappaneel van Installatie en Opleveren (stapBouwRegel in planner/vragen.js), in hetzelfde amber als .subouw */ #stapbody .stapbouw{ margin:0 0 12px;padding:8px 10px;border-radius:var(--rond-m);font-size:var(--tekst-m);line-height:1.5; background:rgba(180,120,20,.10);color:#7A5314;border:1px solid rgba(180,120,20,.24); } #stapuitleg .sufoot{ display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap; padding:10px 14px 12px;border-top:1px solid var(--line);background:var(--bg); } @media (max-width:900px){ /* Onder de 900 px stapelt de bediening zich op: de pil Verder en de loep schuiven boven de kijkstandbalk (zie de regels daar) en het werkblad komt van onderen omhoog. Er blijft dan geen tekenvlak over dat je apart kunt vrijhouden. Hier geldt dus wat Sander voor de telefoon vroeg: schermvullend met een kleine marge. De topbalk blijft staan, want die valt buiten #stage. */ #stapuitleg{inset:8px;padding:10px} /* height:auto hoort bij max-width:none en staat er niet voor de sier. Onder de 600 px maakt "op een telefoon wordt elk kiesvenster een volledig scherm" er `.ovlbox{height:100%}` van (zie dat blok hierboven). Dat is bedoeld voor de catalogus en de fotokiezers, waar alle ruimte naar de foto's moet - maar dit venster leent diezelfde .ovlbox en is geen kiesvenster. Gemeten op 390 x 844, stap 2 en 3, zonder filmpje: de kaart werd 756 px hoog terwijl zijn inhoud er 257 nodig had, dus lag er 500 px leeg karton over de hele tekening. Met filmpje viel het niet op, want daarvoor stond de uitzondering hieronder er al. */ #stapuitleg .ovlbox{max-width:none;height:auto} /* De kaart loopt hier van rand tot rand maar niet van boven naar beneden. Het filmpje wordt op een smal scherm door de BREEDTE begrensd (350 x 219 op 390 px), dus een kaart die ook de hoogte volmaakt zou er alleen wit onder plakken. Hij staat gecentreerd, zoals elk ander venster in de app. En daarmee kan het filmpje op een telefoon weer wel mee: in de oude vorm bleef er 115 px over en werd de opname door zijn eigen vak doormidden gesneden, nu staat hij er heel op en is hij bijna drie keer zo breed. */ #stapuitleg.film .ovlbox{height:auto} /* Een kaart die zo hoog wordt als hij wil, kan zijn filmpje niet meer laten krimpen: height en max-height in procenten hebben dan niets om zich toe te verhouden. Op een liggend scherm van 900 x 700 liep de opname daardoor onder de onderrand van zijn vak door. Vandaar een plafond in schermhoogte (de helft) plus een uitweg: past het toch niet, dan scrolt de tekst en blijft de voet gewoon staan. */ #stapuitleg.film .subody{overflow:auto} #stapuitleg.film .suvideo video{max-height:50vh} } @media (max-width:600px){ #stapuitleg .subody{padding:10px 12px 12px} #stapuitleg .sufoot{padding:9px 12px 11px} } /* ---------- raakdoelen op een telefoon ---------- Een vinger is geen muisaanwijzer. Apple houdt 44 bij 44 punten aan als ondergrens, Google 48; onder die maat raak je er regelmatig naast, en dat is in deze app duur: naast een knop ligt de tekening, en een tik op de tekening verplaatst iets. GEMETEN op 390 bij 844, over zeven schermen (de ontwerpenpagina, de vijf stappen en het productenpaneel), alleen op knoppen die je ECHT kunt raken (het midden van de knop moet de knop zelf opleveren, anders staat er iets overheen): 115 van de 157 knoppen waren kleiner dan 44 px. review/schermen4/meet-raakdoelen.mjs meet het opnieuw. Alleen ONDER 600 px. De desktopopmaak blijft precies zoals hij is: daar stuur je met een muis en zijn de balken bewust compact. Het pictogram blijft in beide gevallen even groot; alleen het raakvlak groeit mee. Dit blok staat achteraan omdat de telefoonregels erboven (de rail op 700 px, de loep en de kijkstandbalk op 900 px) dezelfde selectors dragen; de laatste regel wint. */ @media (max-width:600px){ /* de rail links, de stappen */ #rail button{width:44px;height:44px} /* het gereedschap linksonder en de loep rechtsonder */ #hudtools button{flex:0 0 44px;width:44px;height:44px} #loep button{width:44px;height:44px} /* DE KIJKSTANDBALK. Negen knoppen van 44 px zijn 396 en de balk heeft er op 390 px maar 370. Ze stonden daarom op 40 breed, met de aantekening dat de echte keuze aan Sander was. Die keuze is er: "hamburger menu button for the phone buttons" (22 september). Er blijven hier dus twee knoppen staan en de andere acht verhuizen naar #kijkmenu. Welke twee is niet gekozen maar gemeten: Standaard zicht is de ENIGE van de negen die buiten 3D nog iets doet (hudStand in planner/uitvoer.js zet alle andere grijs, en resetCam past in 2D het blad opnieuw in). Achter een menu zetten zou de enige werkende 2D-kijkknop op een telefoon wegnemen, en een menu met acht grijze regels opleveren. De tweede is de menuknop zelf. Twee van 44 plus drie stukken gereedschap van 44 is 226 px op een balk van 370: alles past, alles is een volwaardig raakdoel en er schuift nog steeds niets weg. De knoppen worden VERBORGEN en niet verplaatst. Ze houden hun plek in de DOM, hun id, hun luisteraars en hun standklassen; het menu leest ze uit en klikt ze aan. Daarmee doet geen van de negen een letter anders dan hij deed. Dat de selector op ALLE knoppen in de groep staat is met opzet: #muislookbtn wordt er door planner/scene3d.js later bij gezet, en die hoort hier net zo goed niet op de balk. */ #hudviews button{display:none} #hudviews #cam_reset,#hudviews #kijkmenubtn{display:flex;flex:0 0 44px;width:44px;height:44px} /* de twee scheidingsstreepjes scheidden groepen die hier niet meer staan */ #hudviews .hudsplit{display:none} #kijkmenu.open{display:block} /* 2D/3D bovenin, de pil Verder, het huismerk, het kruisje van elk venster */ #modes button{min-width:44px;min-height:44px} #volgende{height:44px} #vorige{height:44px;width:44px} #top .merkvak{flex:0 0 44px;width:44px;height:44px} .popx{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} /* de tabbladen in een paneel (Controle, Meenemen, Video) */ .poptabs button{min-height:44px} /* de catalogus: de categorieen, het zoekveld en de sorteerkeuze */ #cats button{min-height:44px} #panelside #q,#panelkop #sorteersel{min-height:44px} } /* ---- tegels leggen (planner/tegels-catalogus.js) ---- De balk die zegt dat de stand aanstaat: welke tegel, wat je moet doen, en een knop om te stoppen. Onderaan in het midden, boven de tekening en het 3D-beeld, onder de vensters. */ #tegelmodus{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40; display:flex;align-items:center;gap:12px;max-width:min(640px,calc(100vw - 32px)); background:rgba(30,41,59,.95);color:#fff;padding:8px 10px 8px 8px;border-radius:var(--rond-m); box-shadow:var(--schaduw-2);font-size:var(--tekst-m);line-height:1.35} #tegelmodus .tm-tegel{flex:none;width:48px;height:48px;padding:0;border:2px solid #fff;border-radius:6px; overflow:hidden;background:#fff;cursor:pointer} #tegelmodus .tm-tegel img,#tegelmodus .tm-tegel span{display:block;width:100%;height:100%;object-fit:cover} #tegelmodus .tm-tekst{display:flex;flex-direction:column;min-width:0} #tegelmodus .tm-naam{opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #tegelmodus .tm-klaar{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:var(--rond-m); background:#fff;color:var(--ink);font-weight:600;cursor:pointer} html.tegelmodus #sheet,html.tegelmodus #stage canvas{cursor:copy} .tegelfilter{margin:0 0 12px} /* P4-7 (30 september): het maatkaartje (#vrijpop) staat vast rechtsboven in het tekenvak (p47Dock in planner/kern.js). Een melding komt daar ook langs; die blijft erboven leesbaar. Ze laat de klik door (pointer-events:none), dus de velden eronder blijven bereikbaar. */ #main:has(#vrijpop.p47dock.open) #melding{z-index:10} /* P4-7b (30 september): in 3D staat het maatkaartje ook vast rechtsboven (vrijDoel en p47Dock in planner/kern.js). Daar wijkt het balkje bij het element (#elpop) er WEL voor: elpopPanelen ontwijkt alles in #stage boven z-index 9, net als de ruimtekiezer. Het balkje zoekt dan de dichtstbijzijnde vrije plek bij het product, en in 3D hangt het vaak juist bovenin het beeld. Op de plattegrond blijft het bij P4-7 (daar wijkt het balkje niet: een deur op de bovenwand was op een telefoon dan niet meer te slepen). Een melding blijft ook in 3D boven het kaartje leesbaar. */ body.mode3d #vrijpop.p47dock{z-index:10} body.mode3d #main:has(#vrijpop.p47dock.open) #melding{z-index:11} /* ---- bug 2 (30 september): de aandachtskaart en de opslagstatus op een telefoon ---- Op 390 px lag de rode kaart over het bovenste deel van het 3D-beeld en over de pijlen naar de buurwand in Installatie, en zijn knoppen waren 22 px hoog. Op een telefoon is hij daarom eerst een knopje van 44 px (het teken en het aantal, in de kleuren van de kaart) dat op een tik uitklapt (aandachtUpdate in planner/conflicten.js). Uitgeklapt is elke knop erin 44 px hoog en schuift wat niet past binnen de kaart. De opslagstatus bovenin was 16 px breed omdat de balk vol zat: op een telefoon wordt hij 44 bij 44 (het teken blijft 14 px), en tot 430 px maakt de balk daar ruimte voor met 2 px tussen de knoppen in plaats van 6. Breder dan 600 px verandert er niets. */ #aandacht .aandklein{display:none} @media (max-width:600px){ #aandacht.klein{padding:0} #aandacht.klein > :not(.aandklein){display:none} #aandacht.klein .aandklein{ display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 12px 0 10px; border:0;border-radius:var(--rond-m);background:none;color:#d92b1f;font:inherit;font-size:var(--tekst-m);font-weight:700; line-height:1;cursor:pointer; } #aandacht.klein.rustig .aandklein{color:#64748b} #aandacht .aandklein svg{flex:0 0 16px} #aandacht.tel:not(.klein){overflow-y:auto;overscroll-behavior:contain;padding-right:48px} #aandacht.tel .sluit{top:0;right:0;width:44px;height:44px} /* het raakvlak is 44 px, de knop zelf blijft 30: de rand is doorzichtig en de lijn staat erbinnen */ #aandacht.tel .okbtn{display:flex;align-items:center;width:max-content;min-width:44px;min-height:44px;margin:0 0 0 -7px;padding:0 12px; border:7px solid transparent;border-radius:11px;background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--line)} #aandacht.tel .oktoggle{min-height:44px} #top #opslagstatus{flex:0 1 44px;height:44px;padding:0;justify-content:center} } @media (max-width:430px){ #top{gap:2px} #top .grow{display:none} #top #modes{margin-left:auto} }