/* VG Studio — Website 5 Light-mode SaaS-site met één donkere hero-band (dot-effect) en een donkere afsluiter. Palet sluit aan op de echte Atlas-huisstijl. */ :root { /* Atlas */ --atlas-ink: #14324b; --atlas-deep: #06304f; --atlas-blue: #2d7ff0; --atlas-teal: #1f5e7a; --atlas-green: #1f8f5f; --atlas-amber: #c97a1b; /* site */ --page: #f6f9fc; --surface: #ffffff; --surface-soft: #eef3f8; --line: #e2eaf2; --line-soft: #edf2f8; --text: #14324b; --text-2: #4c6076; --muted: #7b8ea3; --accent: #2d7ff0; /* donkere banden */ --dark-top: #061020; --dark-mid: #0d2f5c; --dark-glow: #2b7fd4; /* Manrope voor titels én tekst: één stem, strak en zakelijk. Wil u een ander font? Enkel deze twee regels en de in de aanpassen; de rest van de stylesheet volgt automatisch. */ --font-display: "Manrope", system-ui, -apple-system, sans-serif; --font-body: "Manrope", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --radius: 16px; --shadow-lg: 0 30px 70px -30px rgba(11, 40, 74, .38), 0 8px 24px -12px rgba(11, 40, 74, .2); --shadow-sm: 0 2px 8px rgba(20, 50, 75, .06), 0 12px 30px -18px rgba(20, 50, 75, .25); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* een ankerlink (#atlas, #diensten, #contact) stopt onder de vaste navigatiebalk in plaats van eronder te verdwijnen */ scroll-padding-top: 84px; /* Safari op de iPhone vergroot anders zelf de tekst in liggende stand */ -webkit-text-size-adjust: 100%; } body { position: relative; font-family: var(--font-body); color: var(--text); background: var(--dark-top); /* zichtbaar waar secties transparant zijn */ -webkit-font-smoothing: antialiased; overflow-x: hidden; } .container { max-width: 1180px; margin: 0 auto; padding: 0 32px; } /* ---------- nooit horizontaal scrollen ---------- De pagina heeft een paar lagen die met opzet buiten hun blok komen: het donkere schild om de herotekst en de gloed achter het app-venster. Op een breed scherm valt dat binnen het venster, op een telefoon stak er rechts een lege strook uit en werd de hele pagina horizontaal scrollbaar. `clip` en niet `hidden`: clip maakt van main géén scrollcontainer, dus position: sticky (het meescrollende venster op de Atlas-pagina) blijft gewoon werken en er kan ook nooit ergens anders een scrolbalk verschijnen. De vaste navigatiebalk en het cursorspoor staan buiten main en worden niet geraakt. */ main { overflow-x: clip; } /* ---------- schermvoorbeelden: kleiner, niet anders ---------- Elk voorbeeld van de toepassing (het dashboard, de planner, de beelden in de dienstenkaarten) houdt op élk scherm dezelfde opbouw, dezelfde verhouding en dezelfde stand. Wordt het scherm smaller, dan wordt het beeld gewoon in zijn geheel kleiner — het herschikt zich niet en er valt niets weg. Daarvoor is telkens één getal nodig: hoeveel keer past de beschikbare breedte in de bureaubladbreedte van het voorbeeld. CSS kan een lengte niet door een lengte delen, maar `tan(atan2(a, b))` geeft precies dat getal: a / b. Dat getal gaat dan in `zoom` (het hele voorbeeld, inclusief zijn hoogte) of in een `scale()`. Elke regel die dit gebruikt, zet erboven eerst de gewone waarde als terugval voor een browser die atan2 nog niet kent. */ /* ---------- effectlagen ---------- */ .bg-glows { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .glow { position: absolute; left: 50%; top: 0; transform: translateX(-50%); border-radius: 50%; } .glow-hero { width: 170vw; height: 155vh; background: radial-gradient(ellipse 32% 28% at 50% 50%, rgba(104, 180, 255, .55) 0%, rgba(64, 132, 220, .28) 45%, rgba(16, 44, 84, 0) 72%), radial-gradient(ellipse 60% 46% at 50% 56%, rgba(40, 100, 180, .40) 0%, rgba(12, 34, 66, 0) 70%); } /* Het canvas hoort alleen bij de hero en blijft daar permanent staan. */ .fx-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* De ruimte-achtergrond bestaat uit drie lagen die elk één taak hebben. De regel erachter: wat elk frame verandert blijft zo groot als het venster, wat nooit verandert mag zo groot zijn als het document. Zo hoeft er tijdens het scrollen niets hertekend te worden. Zie assets/space-fx.js. 1. het statische beeld: de ringen. JS zet top en height — het canvas ligt alleen over de band waar de achtergrond echt zichtbaar is. */ .space-canvas { position: absolute; left: 0; top: 0; z-index: 0; display: block; width: 100%; pointer-events: none; user-select: none; } /* 2. de sterren. Losse elementjes met een animatie op opacity: die draait op de compositor, dus ze flikkeren zonder dat er iets hertekend wordt, en ze scrollen gewoon mee met het document. */ .space-stars { position: absolute; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: hidden; } .space-stars i { position: absolute; border-radius: 50%; background: #dbecfb; opacity: .18; animation: star-twinkle var(--dur, 8s) ease-in-out var(--delay, 0s) infinite; } @keyframes star-twinkle { 0%, 100% { opacity: .14; } 50% { opacity: .82; } } .space-stars.is-still i { animation: none; opacity: .42; } @media (prefers-reduced-motion: reduce) { .space-stars i { animation: none; opacity: .42; } } /* 3. het cursorspoor. Hangt aan het VENSTER, niet aan het document: de cursor doet dat ook, dus er komt geen scrollpositie aan te pas en het spoor kan nooit achterlopen. Blijft met z-index 1 onder de lichte secties, zodat het enkel zichtbaar is waar de achtergrond doorkomt. */ .space-trail { position: fixed; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; } main, .closing { position: relative; z-index: 2; } /* donker schild achter tekst op de donkere banden */ .fx-shield { position: relative; } /* closest-side: de ovaal raakt alle vier de randen van het blok, dus is de gloed op elke rand al op nul. Met de standaard farthest-corner bleef er op het midden van de zijkanten kleur over, en die werd hard afgesneden door de rechte rand van het blok — dat was de zichtbare kader. Ruime negatieve inset + een lagere dekking houden hem zacht in plaats van zwart. */ .fx-shield::before { content: ""; position: absolute; inset: -42% -26%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side ellipse at center, rgba(6, 16, 30, .52) 0%, rgba(6, 16, 30, .42) 38%, rgba(6, 16, 30, .22) 64%, rgba(6, 16, 30, .07) 84%, rgba(6, 16, 30, 0) 100%); } /* ---------- navigatie ---------- */ /* De balk staat vast bovenaan en is op elke scrollpositie zichtbaar. Ze heeft dáárom twee achtergronden, die over elkaar heen vervagen: ::before het donkere schild voor de hero. De herotekst en de planeet schuiven onder de balk door; zonder dit schild verdween de witte navigatietekst gewoon in dat licht. Het loopt naar onder toe naar nul, zodat er geen rand dwars door de hero staat. ::after de lichte balk voor de rest van de pagina. Er is er altijd precies één zichtbaar; fx.js zet de klasse .scrolled zodra de eerste lichte inhoud onder de balk schuift en de twee wisselen dan van plaats. Ze staan allebei als eigen laag zodat de wissel een echte overvloeiing is en niet even een grijze tussenkleur oplevert. */ .site-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; } .site-nav::before, .site-nav::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .32s ease; } /* Het donkere schild boven de hero. Het loopt bewust een stuk ONDER de balk door: zo blijft het achter de tekst zelf goed dekkend en heeft het verloop daaronder ruimte om rustig naar nul te gaan. Zou het op de onderrand van de balk stoppen, dan stond er een streep dwars over de hero zodra er iets lichts onder de balk schuift — de planeet bijvoorbeeld. */ .site-nav::before { inset: 0 0 -44px 0; opacity: 1; background: linear-gradient(180deg, rgba(6, 16, 31, .84) 0%, rgba(6, 16, 31, .80) 34%, rgba(6, 16, 31, .66) 52%, rgba(6, 16, 31, .40) 70%, rgba(6, 16, 31, .16) 86%, rgba(6, 16, 31, 0) 100%); } /* de lichte balk voor het witte deel. Geen backdrop-filter: die balk staat vast bovenaan, dus de browser moest bij elke scrollstap de vervaging opnieuw uitrekenen over alles wat eronder voorbijkwam. Een iets dichtere achtergrond geeft hetzelfde beeld en kost niets. */ .site-nav::after { opacity: 0; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 0 var(--line), 0 8px 24px -20px rgba(20, 50, 75, .5); } .site-nav.scrolled::before { opacity: 0; } .site-nav.scrolled::after { opacity: 1; } .nav-shell { position: relative; /* de inhoud blijft boven beide lagen */ z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1180px; margin: 0 auto; padding: 18px 32px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: #eef5fc; text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: .01em; /* de naam blijft op één regel: op een smalle telefoon brak "VG Studio" anders in tweeën en werd de hele balk twee regels hoog */ white-space: nowrap; transition: color .3s ease; } .brand-symbol { display: inline-flex; width: 27px; height: 27px; } .brand-symbol svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; opacity: .85; } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { color: rgba(238, 245, 252, .78); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .2s ease; } .nav-links a:hover { color: #fff; } /* de pagina waar u nu op staat */ .nav-links a[aria-current="page"] { color: #fff; } /* Contact is bewust een knop, geen link */ .nav-links .nav-cta { padding: 10px 20px; border-radius: 999px; background: #fff; border: 1px solid #fff; color: var(--atlas-ink); font-weight: 600; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s ease; } .nav-links .nav-cta:hover { background: #e9f2fb; border-color: #e9f2fb; color: var(--atlas-ink); transform: translateY(-1px); } /* zodra we in het lichte deel zitten: de tekst gaat mee van licht naar donker */ .site-nav.scrolled .brand { color: var(--atlas-ink); } .site-nav.scrolled .nav-links a { color: var(--text-2); } .site-nav.scrolled .nav-links a:hover, .site-nav.scrolled .nav-links a[aria-current="page"] { color: var(--atlas-ink); } .site-nav.scrolled .nav-links .nav-cta { background: var(--atlas-ink); border-color: var(--atlas-ink); color: #fff; } .site-nav.scrolled .nav-links .nav-cta:hover { background: #1c4468; border-color: #1c4468; color: #fff; } /* ---------- hero ---------- */ .hero { position: relative; min-height: 96vh; display: flex; flex-direction: column; align-items: center; /* de tekst staat verticaal in het midden van de band; de padding-top compenseert de vaste navigatie zodat het optisch klopt */ justify-content: center; padding-top: 64px; text-align: left; padding-bottom: 6vh; } .hero-shell { position: relative; z-index: 2; } /* Onderaan vloeit de donkere band over in de lichte pagina. Let op de laatste twee kleurstops: het verloop is al volledig --page op 84%, en blijft dat tot 100%. Dat is niet overbodig. Liep het verloop tot precies de onderrand door, dan houdt de kleurverandering daar plots op — en zo'n knik in het verloop ziet het oog als een streep, ook al is de kleur aan beide kanten van de rand exact dezelfde --page. Dat was de zichtbare horizontale lijn onder de hero. Laat die vlakke staart dus staan; hetzelfde geldt voor de gloed achter het app-venster. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; /* twee pixels ONDER de band. De hoogte van de hero is zelden een rond aantal beeldpunten, en dan valt de onderrand van dit verloop midden in een fysieke pixel. Die pixelrij wordt maar half bedekt, de donkere pagina-achtergrond schemert erdoor en dat leest als een haarlijn dwars over de pagina. Door het verloop een paar pixels te laten overlappen met de sectie eronder — die exact dezelfde kleur heeft — kan er geen halve rij meer overblijven. */ bottom: -2px; height: 34%; pointer-events: none; /* Zelfde verloop als voordien — de dekking op 34%, 66% en 100% is ongewijzigd, zodat de donkere band en de planeet er precies hetzelfde uitzien. De tussenliggende stops maken de reeks alleen gelijkmatiger, zodat er in het verloop zelf geen band meer te zien is. Maak dit verloop niet hoger: dan komt het over de planeet te liggen. */ background: linear-gradient(180deg, rgba(246, 249, 252, 0) 0%, rgba(246, 249, 252, .07) 17%, rgba(246, 249, 252, .18) 34%, rgba(246, 249, 252, .38) 50%, rgba(246, 249, 252, .62) 66%, rgba(246, 249, 252, .82) 80%, rgba(246, 249, 252, .94) 90%, var(--page) 100%); } /* de shell houdt dezelfde breedte en marges aan als .container, zodat de herotekst exact uitlijnt met de secties eronder */ .hero-shell { width: 100%; max-width: 1180px; padding: 0 32px; } /* het smalle tekstblok zelf: links in de shell. Hierop zit ook het donkere schild (.fx-shield), dus het blijft bewust strak om de tekst. */ .hero-inner { position: relative; z-index: 2; max-width: 640px; } .hero-title { margin: 0 0 24px; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6.2vw, 74px); line-height: 1.04; letter-spacing: -.035em; color: #f4f8fd; text-wrap: balance; text-shadow: 0 2px 40px rgba(4, 12, 24, .6); } .hero-title em { font-style: normal; color: #8ec2f7; } .hero-lead { margin: 0; max-width: 560px; font-size: clamp(16.5px, 1.7vw, 19px); line-height: 1.62; color: rgba(206, 224, 243, .92); } .hero-actions { display: flex; justify-content: flex-start; gap: 14px; margin-top: 32px; flex-wrap: wrap; } /* ---------- knoppen ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 999px; font-size: 15.5px; font-weight: 600; text-decoration: none; letter-spacing: .005em; transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; } .btn:active { transform: scale(.98); } .btn-primary { background: var(--atlas-blue); color: #fff; box-shadow: 0 10px 28px -12px rgba(45, 127, 240, .8); } .btn-primary:hover { background: #1c6fe0; box-shadow: 0 14px 34px -12px rgba(45, 127, 240, .9); } .btn-light { background: #fff; color: var(--atlas-ink); } .btn-light:hover { background: #eaf2fb; } /* donkere knop, voor lichte of licht-blauwe vlakken */ .btn-dark { background: var(--atlas-ink); color: #fff; box-shadow: 0 12px 30px -14px rgba(13, 40, 72, .75); } .btn-dark:hover { background: #0f2942; box-shadow: 0 16px 36px -14px rgba(13, 40, 72, .85); } .btn-ghost { border: 1px solid rgba(186, 212, 236, .4); color: #eef5fc; } .btn-ghost:hover { border-color: rgba(186, 212, 236, .75); background: rgba(186, 212, 236, .12); } /* stille knop op lichte achtergrond, bv. de aanmeldlink van Atlas */ .btn-quiet { padding: 13px 22px; border: 1px solid var(--line); background: #fff; color: var(--text-2); font-weight: 500; } .btn-quiet:hover { border-color: #cfe0f2; color: var(--atlas-ink); } /* het pijltje bij een link die de site verlaat en in een nieuw tabblad opent */ .btn-ext { width: 16px; height: 16px; flex: 0 0 auto; margin-left: 9px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .72; transition: opacity .2s ease, transform .2s ease; } .btn:hover .btn-ext { opacity: 1; transform: translate(1px, -1px); } /* ---------- app-preview ---------- */ .showcase { position: relative; display: flow-root; /* houdt de negatieve marge van het venster binnen */ background: var(--page); padding: 0 0 44px; } .showcase .container { position: relative; } /* Het venster staat schuin in de ruimte met precies TWEE draaiingen: rotateZ draait het vlak in het beeld, rotateX kantelt datzelfde vlak naar achter. Daardoor gaat de rechterhoek vanzelf naar achter — een aparte rotateY erbij maakt de draai scheef en hoort er niet in. .app-stage draagt het perspectief en breekt uit de container, zodat het scherm breder mag zijn dan de tekst eronder. Het venster zelf beweegt niet bij hover — alleen de onderdelen erin komen omhoog. De draaiingen staan in variabelen zodat ze in één keer bij te stellen zijn. --frame-ry staat standaard op 0: dat is de derde draai, die er volgens de afspraak niet in hoort. */ .app-stage { --frame-persp: 1980px; /* BREEDTE EN OPTISCHE UITLIJNING. Het venster staat gedraaid: de linkerkant komt naar voor en wordt groter, de rechterkant gaat naar achter en krimpt. Een blok dat rekenkundig precies in het midden van de pagina staat, oogt daardoor naar links geschoven — links liep het zelfs buiten beeld terwijl er rechts een strook leeg bleef. --stage-shift duwt het blok zoveel naar rechts dat het zwaartepunt van het ZICHTBARE beeld (alles boven de vervaging) weer op het midden van de pagina valt. Het is een deel van de eigen breedte, zodat het meeschaalt. Wordt de draaiing verderop in de media queries kleiner, of valt ze weg, dan gaat deze waarde mee omlaag — anders staat het scherm dáár te ver naar rechts. */ --stage-w: min(1320px, 90vw); --stage-shift: .04; /* De verkleining op smallere schermen (zie de media query onderaan). Op een breed scherm staat ze op 1 en verandert er niets. */ --fit: 1; position: relative; /* houvast voor het effect erachter */ zoom: var(--fit); width: var(--stage-w); /* HOOGTE IN HET PAGINAVERLOOP — niet de hoogte van het venster. Het dashboard in het venster is een volledige pagina en dus veel hoger dan wat er zichtbaar van is: alles onder de vervaging is gewoon wit. Zou .app-stage de volle hoogte van dat dashboard innemen, dan stond er een leeg wit vlak van honderden pixels tussen het beeld en de tekst eronder. Deze hoogte is daarom de hoogte tot waar het beeld te zien is; het venster zelf loopt er gewoon buiten door (geen overflow: hidden). Wilt u meer of minder van het venster laten zien, dan verzet u deze waarde SAMEN met de top van .app-stage::after hieronder. */ height: 520px; margin: -19vh 0 0 calc(50% - var(--stage-w) / 2 + var(--stage-w) * var(--stage-shift)); perspective: var(--frame-persp); perspective-origin: 50% 30%; } /* De onderkant van het venster lost op in de pagina. Het verloop heeft dezelfde kleur als de sectie eronder, zodat er geen naad ontstaat, en het is ruim genomen zodat het niet als een harde snede oogt. Twee dingen zijn hier van belang. 1. De vervaging is in PIXELS gezet, niet in procenten. Ze hoort bij het beeld, niet bij de hoogte van het venster: het venster is hoog en die hoogte mag niets aan de overgang veranderen. Vandaar `top` in pixels en een verloop met een vaste hoogte (background-size), met daaronder een tweede laag effen --page die de rest dekt. 2. Het venster staat gekanteld, dus zijn onderste hoek ligt honderden pixels LAGER dan de onderrand van .app-stage. De effen laag loopt daarom door tot onder dat punt; anders blijft er onderaan een dun lijntje van het venster zichtbaar. Maar **niet verder dan de sectie eronder begint.** Deze laag heeft de kleur --page en is opaak; ze is alleen onzichtbaar zolang er een dichte sectie overheen valt. Vroeger stond ze op -880 px, ruim voorbij de onderste hoek van het venster. Toen de Atlas-sectie korter werd, stak ze onderaan uit en verfde ze een lichte balk met een harde rand over de bovenkant van het donkere dienstensegment. Daarom is het venster op de homepagina afgekapt (zie .insight-app-frame hieronder): zijn onderste hoek ligt nu altijd op ongeveer dezelfde plaats, of het venster nu breed of smal staat. 360 px dekt dat af met marge, en dat is ruim binnen de Atlas-sectie. */ .app-stage::after { position: absolute; z-index: 2; top: 305px; bottom: -360px; left: 50%; /* De vervaging moet de volle vensterbreedte dekken. Staat het venster verkleind (--fit), dan telt hier de breedte VÓÓR die verkleining: delen door --fit maakt er weer precies één vensterbreedte van. */ width: calc(100vw / var(--fit)); transform: translateX(-50%); background-image: linear-gradient(180deg, rgba(246, 249, 252, 0) 0%, rgba(246, 249, 252, .08) 12%, rgba(246, 249, 252, .24) 26%, rgba(246, 249, 252, .46) 40%, rgba(246, 249, 252, .70) 54%, rgba(246, 249, 252, .88) 68%, rgba(246, 249, 252, .97) 82%, var(--page) 93%, var(--page) 100%), linear-gradient(var(--page), var(--page)); background-repeat: no-repeat, no-repeat; background-size: 100% 195px, 100% 100%; background-position: 0 0, 0 193px; content: ''; pointer-events: none; } .app-frame { --frame-rx: 30deg; --frame-rz: -15deg; --frame-ry: 15deg; /* hoe ver een onderdeel bij hover uit het scherm komt, en in welke richting. De richting is de normaal van het vlak, uitgedrukt in de eigen assen van het venster; site.js rekent ze uit de 3D-matrix. De waarden hier zijn de terugval als er geen 3D is (telefoon): recht omhoog. */ --lift: 11px; --lift-x: 0; --lift-y: -1; position: relative; z-index: 1; /* het venster ligt vóór het effect */ transform-origin: 50% 42%; transform: rotateX(var(--frame-rx)) rotateZ(var(--frame-rz)) rotateY(var(--frame-ry)); border-radius: 20px; border: 1px solid rgba(214, 226, 238, .45); background: var(--surface); /* het is een afbeelding van de app, geen echte app: niets selecteerbaar en overal dezelfde cursor */ user-select: none; -webkit-user-select: none; cursor: default; /* zachte, brede schaduw: het venster zweeft boven de pagina in plaats van als een kaart tegen de achtergrond geplakt te staan */ box-shadow: 0 90px 150px -80px rgba(8, 32, 60, .45), 0 30px 80px -55px rgba(8, 32, 60, .25); overflow: hidden; /* De onderkant lost op: het venster is volledig weg tegen dat de drie korte feiten beginnen. Door de kanteling ligt de zichtbare onderrand lager dan de onderrand van het blok, vandaar dat het verloop ruim vóór 100% al op nul staat. */ } /* HET DASHBOARDVENSTER WORDT AFGEKAPT — en dat is met opzet. Het dashboard is een volledige pagina en werd op een smal scherm veel hoger dan op een breed scherm (de kolommen gaan onder elkaar). Het venster staat gekanteld, dus die extra hoogte duwde de onderste hoek honderden pixels naar beneden — op 1024 px stak ze zelfs onder de Atlas-sectie uit, tot in het donkere dienstensegment. De laag die dat moet afdekken (.app-stage::after) kon dat niet volgen zonder zelf een lichte balk over dat segment te verven. Met een vaste hoogte ligt die onderste hoek altijd op ongeveer dezelfde plaats. De snede zelf zit ruim onder de plek waar het verloop al volledig ondoorzichtig is, dus u ziet er niets van. Verzet u deze hoogte, kijk dan de bottom van .app-stage::after opnieuw na. */ .insight-app-frame { height: 700px; } /* ---------- de gloed achter het app-venster ---------- Een laag die in hetzelfde vlak ligt als het venster maar er verder naar achter staat (translateZ), zodat het licht er echt van achter uit komt. Het venster licht daarmee de pagina eronder op. */ .app-aura { position: absolute; /* de gloed dekt de zone waar het venster nog te zien is; onder de vervaging is alles wit en heeft ze geen zin meer */ inset: -26% -18% -34% -18%; z-index: 0; pointer-events: none; transform-origin: 50% 42%; transform: rotateX(var(--frame-rx, 30deg)) rotateZ(var(--frame-rz, -15deg)) rotateY(var(--frame-ry, 15deg)) translateZ(-90px); /* Geen filter: blur() meer. Deze laag is groot en staat in 3D, dus die vervaging moest bij elk scrollframe opnieuw berekend worden. De verlopen zelf lopen nu wat vroeger en zachter uit — hetzelfde beeld, zonder de extra bewerking. closest-side is hier de kern van de zaak. Met een vaste ellipsmaat (ellipse 76% 64%) zat er op de zijkanten en onderaan nog kleur in de laag op het moment dat het blok ophield: die kleur werd dan hard afgesneden door de rand van het blok — of, bij een breed venster, door de rand van het scherm. Dat waren de zichtbare randen links en rechts van het venster en de rand waar de gloed onderaan onder het venster uit kwam. Met closest-side raakt elke ovaal alle vier de randen van het blok, dus staat het verloop dáár al op nul en is er geen rand meer om te zien. Verander die waarde niet terug naar een vaste maat. */ background: radial-gradient(closest-side ellipse at 50% 40%, rgba(120, 180, 245, .60) 0%, rgba(98, 160, 232, .42) 22%, rgba(78, 140, 216, .20) 44%, rgba(61, 124, 201, .05) 66%, rgba(61, 124, 201, 0) 84%, rgba(61, 124, 201, 0) 100%), radial-gradient(closest-side ellipse at 50% 46%, rgba(46, 96, 158, .32) 0%, rgba(38, 76, 126, .19) 28%, rgba(30, 58, 95, .06) 56%, rgba(30, 58, 95, 0) 82%, rgba(30, 58, 95, 0) 100%); } /* ---------- inzichtenoverzicht op home ---------- Dit scherm bewijst de brede belofte van de studio: data wordt pas nuttig wanneer ze toont wat er gebeurt, waar iets afwijkt en wat aandacht vraagt. Het is bewust geen Atlas-scherm. Atlas krijgt verderop zijn eigen plek. */ .insight-app-frame { background: #f4f7fa; } .insight-app { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 690px; background: #f4f7fa; color: #1b2b3d; } .insight-app svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .insight-nav { display: flex; flex-direction: column; min-width: 0; padding: 18px 14px 14px; border-right: 1px solid #dfe7ef; background: #fff; } .insight-brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 20px; border-bottom: 1px solid #edf1f5; color: #14324b; font-size: 13px; } .insight-brand-mark { display: inline-flex; width: 27px; height: 27px; align-items: center; justify-content: center; border-radius: 9px; background: #14324b; color: #fff; } .insight-brand-mark svg { width: 17px; height: 17px; } .insight-nav-group { display: flex; flex-direction: column; gap: 4px; padding: 18px 0 0; } .insight-nav-label { padding: 0 10px 6px; color: #8998a8; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .insight-nav-item { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 10px; border-radius: 9px; color: #607286; font-size: 11px; font-weight: 700; } .insight-nav-item.is-active { background: #eaf2fd; color: #175ea8; } .insight-nav-foot { display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; align-items: center; margin-top: auto; padding: 12px 9px 0; border-top: 1px solid #edf1f5; color: #7b8b9c; font-size: 9.5px; } .insight-nav-foot strong { grid-column: 2; color: #42576c; font-size: 10px; } .insight-live-dot { grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%; background: #1f8f5f; box-shadow: 0 0 0 3px rgba(31, 143, 95, .12); } .insight-main { min-width: 0; padding: 20px; } .insight-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; } .insight-kicker { display: block; margin-bottom: 3px; color: #75879a; font-size: 10px; font-weight: 700; } .insight-topbar h3 { color: #14324b; font-size: 22px; font-weight: 750; letter-spacing: -.025em; } .insight-tools { display: inline-flex; align-items: center; gap: 8px; } .insight-period { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 11px; border: 1px solid #d8e1ea; border-radius: 9px; background: #fff; color: #52677c; font-size: 10.5px; font-weight: 700; } /* de keuzeschakelaar voor de periode: één pil met vier vakjes */ .insight-seg { display: inline-flex; min-height: 32px; border: 1px solid #d8e1ea; border-radius: 9px; background: #fff; overflow: hidden; } .insight-seg b { display: inline-flex; align-items: center; padding: 0 10px; color: #6b7d90; font-size: 10.5px; font-weight: 700; } .insight-seg b + b { border-left: 1px solid #e7edf3; } .insight-seg b.is-on { background: #14324b; color: #fff; } .insight-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 9px; background: var(--atlas-blue); color: #fff; font-size: 10.5px; font-weight: 700; } .insight-btn svg { width: 13px; height: 13px; } .insight-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } /* Elk kerncijfer krijgt zijn eigen verloopje over de laatste zes maanden. Dat verloopje ligt tegen de onderrand van de kaart, vandaar de extra padding onderaan en overflow: hidden. --sp is de kleur van de reeks. */ .insight-metric { position: relative; min-width: 0; padding: 13px 14px 30px; border: 1px solid #e0e7ee; border-radius: 12px; background: #fff; overflow: hidden; } .insight-metric > span, .insight-metric em { display: block; overflow: hidden; color: #75879a; font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .insight-metric em { display: flex; align-items: center; gap: 3px; } .insight-metric em svg { width: 11px; height: 11px; stroke-width: 2.6; } .insight-metric strong { display: block; margin: 5px 0 4px; color: #14324b; font-size: 18px; letter-spacing: -.02em; } .insight-metric .is-positive, .insight-table-row .is-positive { color: #18774e; } .insight-metric .is-attention { color: #a56113; } /* .insight-app svg zet alle iconen op 16 bij 16; de grafieken hebben een eigen maat nodig en moeten die regel dus in soortelijk gewicht verslaan — vandaar het voorvoegsel .insight-app hier en bij de ring en het staafje. */ .insight-app .insight-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; } .insight-spark .sp-area { fill: var(--sp, #2d7ff0); fill-opacity: .14; stroke: none; } .insight-spark .sp-line { fill: none; stroke: var(--sp, #2d7ff0); stroke-width: 2.4; } /* De drie rijen van het dashboard. Rij 1 staat scherp in beeld en krijgt daarom de grafieken die het meest moeten opvallen; rij 2 en 3 verdwijnen geleidelijk in de vervaging onderaan het venster. */ .insight-row { display: grid; gap: 10px; margin-bottom: 10px; } .insight-row-top { grid-template-columns: minmax(0, 1.5fr) minmax(190px, .72fr) minmax(210px, .92fr); } .insight-row-mid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .insight-row-low { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); margin-bottom: 0; } .insight-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid #e0e7ee; border-radius: 12px; background: #fff; overflow: hidden; } .insight-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 13px 14px 11px; border-bottom: 1px solid #edf1f5; } .insight-card-head strong { display: block; color: #22374c; font-size: 11.5px; } .insight-card-head div > span { display: block; margin-top: 3px; color: #8392a2; font-size: 9.5px; } .insight-legend { display: flex; align-items: center; gap: 5px; color: #77899b; font-size: 8.5px; white-space: nowrap; } .insight-legend i { width: 7px; height: 7px; margin-left: 4px; border-radius: 2px; background: #cfd9e4; } .insight-legend i:nth-child(2) { background: #2d7ff0; } /* een reeks die als lijn getekend wordt in plaats van als staaf */ .insight-legend i.is-line { height: 3px; width: 13px; border-radius: 2px; background: var(--atlas-green); } .insight-chart-body { display: grid; grid-template-columns: 30px minmax(0, 1fr); height: 164px; padding: 15px 14px 4px; } .insight-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 24px; color: #94a2b1; font-size: 8px; } .insight-bars { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 0 8px; background: repeating-linear-gradient(to bottom, #edf1f5 0 1px, transparent 1px 34px); } .insight-week { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-bottom: 24px; } .insight-week span, .insight-week > i { width: 17px; height: var(--h); max-height: 118px; border-radius: 4px 4px 2px 2px; background: #ccd7e3; } .insight-week > i { background: #2d7ff0; } .insight-week b { position: absolute; bottom: 4px; color: #75879a; font-size: 8px; font-weight: 700; white-space: nowrap; } .insight-week.is-current::after { position: absolute; inset: -4px -6px 20px; z-index: -1; border-radius: 7px; background: #f4f8fd; content: ""; } .insight-chart-foot { display: flex; justify-content: space-between; gap: 12px; /* margin-top: auto duwt de voetregel tegen de onderrand van de kaart, ook als de kaart hoger is dan haar inhoud (de kaarten in een rij zijn even hoog) */ margin-top: auto; padding: 10px 14px; border-top: 1px solid #edf1f5; color: #687b8e; font-size: 9px; } .insight-chart-foot strong { color: #14324b; } /* ---------- omzet en marge: staven met een lijn erover ---------- */ /* De kaarten in een rij zijn even hoog. De grafiek is het rekbare deel: zo vult ze de ruimte die de hoogste kaart in de rij bepaalt, in plaats van een gat onderaan te laten. */ .insight-plot { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; flex: 1 1 auto; min-height: 128px; padding: 14px 14px 0; } /* de labels staan met hun midden op de hulplijnen: de negatieve marge haalt de halve regelhoogte er bovenaan en onderaan af */ .insight-plot .insight-axis { margin: -5px 0; padding-bottom: 0; text-align: right; } .insight-app .insight-plot-svg { width: 100%; height: 100%; } .insight-plot-svg .pl-grid path { stroke: #edf1f5; stroke-width: 1; } .insight-plot-svg .pl-base path, .insight-plot-svg .pl-base { stroke: #dde5ed; stroke-width: 1; } .insight-plot-svg .pl-bars rect { fill: #bcd4f2; stroke: none; } .insight-plot-svg .pl-bars rect.is-current { fill: var(--atlas-blue); } .insight-plot-svg .pl-line { fill: none; stroke: var(--atlas-green); stroke-width: 2; } .insight-plot-svg .pl-dot { fill: #fff; stroke: var(--atlas-green); stroke-width: 2.4; } /* de maandnamen onder de staven; dezelfde binnenmarges als het raster zodat elk label onder zijn eigen staaf valt */ .insight-plot-x { display: grid; grid-template-columns: repeat(12, 1fr); padding: 6px 14px 0 56px; color: #94a2b1; font-size: 8px; font-weight: 700; text-align: center; } .insight-plot-x span:last-child { color: var(--atlas-blue); } /* ---------- verdeling per type werk: ring met legende ---------- */ .insight-donut { position: relative; display: flex; align-items: center; justify-content: center; padding: 16px 14px 10px; } .insight-app .insight-donut-svg { width: 104px; height: 104px; transform: rotate(-90deg); /* eerste segment begint bovenaan */ } .insight-donut-svg circle { fill: none; stroke-width: 5; } .insight-donut-svg .dn-track { stroke: #eef2f7; } .insight-donut-svg .dn-seg { stroke: var(--c); stroke-linecap: butt; } .insight-donut-mid { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1.2; } .insight-donut-mid strong { color: #14324b; font-size: 15px; letter-spacing: -.02em; } .insight-donut-mid em { color: #8392a2; font-size: 8.5px; font-style: normal; } .insight-mix-list { list-style: none; margin-top: auto; padding: 0 14px 13px; } .insight-mix-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; color: #5c7085; font-size: 9.5px; } .insight-mix-list i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); } .insight-mix-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insight-mix-list b { color: #14324b; font-size: 10px; font-weight: 800; } /* ---------- bezetting per medewerker: een warmtekaart ---------- */ .insight-heat { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; padding: 12px 14px 10px; } .insight-heat-head, .insight-heat-row { display: grid; grid-template-columns: 52px repeat(8, minmax(0, 1fr)); align-items: center; gap: 3px; } .insight-heat-head { margin-bottom: 4px; color: #94a2b1; font-size: 7.5px; font-weight: 700; text-align: center; } .insight-heat-row { margin-top: 3px; } .insight-heat-row span { overflow: hidden; color: #64768a; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } /* één vakje per medewerker per week; --v is de bezetting van 0 tot 1 */ .insight-heat-row i { height: 15px; border-radius: 4px; background: rgba(45, 127, 240, calc(.06 + var(--v) * .94)); } .insight-scale { display: inline-flex; align-items: center; gap: 3px; color: #94a2b1; font-size: 7.5px; white-space: nowrap; } .insight-scale em { font-style: normal; } .insight-scale i { width: 11px; height: 8px; border-radius: 2px; background: rgba(45, 127, 240, calc(.06 + var(--v) * .94)); } /* ---------- grootste klanten: een balkenlijst ---------- */ .insight-ranks { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; list-style: none; padding: 10px 14px 12px; } .insight-ranks li { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 0; color: #5c7085; font-size: 9.5px; } .insight-ranks span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insight-ranks i { height: 8px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #7fb2f5, var(--atlas-blue)); } .insight-ranks b { color: #14324b; font-size: 10px; font-weight: 800; } .insight-count { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 7px; background: #edf3f9; color: #526a80; font-size: 10px; font-weight: 800; } .insight-signal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 12px 13px; border-bottom: 1px solid #edf1f5; } .insight-signal:last-child { border-bottom: 0; } /* de meldingen verdelen de hoogte van de kaart onder elkaar, zodat er onderaan geen gat blijft wanneer de buurkaart in de rij hoger is */ .insight-attention .insight-signal { flex: 1 1 auto; } .insight-signal-icon { display: inline-flex; width: 29px; height: 29px; align-items: center; justify-content: center; border-radius: 9px; background: #edf3f9; color: #4f6a83; } .insight-signal.is-urgent .insight-signal-icon { background: #fdf1e8; color: #b06018; } .insight-signal span > strong, .insight-signal span > em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insight-signal span > strong { color: #2a3e52; font-size: 10px; } .insight-signal span > em { margin-top: 3px; color: #7d8d9d; font-size: 8.5px; font-style: normal; } .insight-signal > b { color: #2d6fb6; font-size: 8.5px; } .insight-link { color: #2d6fb6; font-size: 9px; font-weight: 750; } /* dezelfde reden als bij de meldingen: de rijen rekken mee met de hoogte van de rij kaarten waarin de tabel staat */ .insight-table { display: flex; flex-direction: column; flex: 1 1 auto; } .insight-table-head, .insight-table-row { display: grid; grid-template-columns: minmax(190px, 1.4fr) .75fr .55fr .55fr .5fr; align-items: center; gap: 12px; padding: 8px 14px; } .insight-table-row { flex: 1 1 auto; } .insight-table-head { background: #f9fbfd; color: #8a98a7; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .insight-table-row { min-height: 36px; border-top: 1px solid #edf1f5; color: #62768a; font-size: 9.5px; } .insight-table-row > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; } .insight-table-row > span:first-child i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 2px; background: var(--c); } .insight-table-row strong { overflow: hidden; color: #2a3e52; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .insight-table-row b { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: #edf2f7; color: #607489; font-size: 8px; white-space: nowrap; } .insight-table-row b.is-warning { background: #fdf1e8; color: #a75c18; } .insight-table-row b.is-good { background: #e8f5ee; color: #18774e; } .insight-table-row .is-negative { color: #b44a3b; } /* De zin onder het dashboard. Ze volgt gewoon op .app-stage; dat die stage maar zo hoog is als het zichtbare deel van het venster doet de rest. Kijk bij een aanpassing na dat er boven de haarlijn niets van het venster meer doorschemert. */ .insight-statement { position: relative; z-index: 3; max-width: 850px; margin: 18px auto 0; padding: 28px 18px 0; border-top: 1px solid var(--line); background: var(--page); color: var(--atlas-ink); font-size: clamp(18px, 2.1vw, 24px); font-weight: 650; line-height: 1.5; letter-spacing: -.02em; text-align: center; text-wrap: balance; } /* ---------- de Planning-pagina van Atlas ---------- Nagebouwd naar de echte pagina: twee afgeronde panelen naast elkaar op een lichte achtergrond — links "In te plannen", rechts de werkbalk met het maandraster. Geen browservenster en geen navigatie eromheen. De kleuren volgen de tokens van Atlas zelf. */ .pl-page { --pl-ink: #14324b; /* primary-dark */ --pl-line: #d7e1ea; /* border */ --pl-line-soft: #e7edf3; /* border-soft */ --pl-muted-bg: #f3f7fb; /* surface-muted */ --pl-t-dark: #132033; --pl-t-1: #21344b; --pl-t-2: #64758b; --pl-t-3: #8795a7; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 8px; padding: 8px; background: #f5f7fa; color: var(--pl-t-1); } .pl-backlog, .pl-workbench { min-width: 0; border: 1px solid rgba(188, 202, 216, .72); border-radius: 14px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 14px rgba(20, 50, 75, .06); overflow: hidden; } .pl-page svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* -- zijbalk "In te plannen" -- */ .pl-backlog { display: flex; flex-direction: column; } .pl-backlog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid var(--pl-line-soft); background: var(--pl-muted-bg); } .pl-backlog-head h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--pl-t-dark); } /* de kleine vierkante knopjes: inklappen, vorige/volgende, vandaag */ .pl-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pl-line); border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--pl-t-1); box-shadow: 0 1px 2px rgba(20, 50, 75, .08); } .pl-icon-btn-sm { width: 26px; height: 26px; } .pl-icon-btn-sm svg { width: 13px; height: 13px; } .pl-search { display: flex; align-items: center; gap: 7px; margin: 10px 10px 0; padding: 7px 10px; border: 1px solid var(--pl-line); border-radius: 9px; background: #fff; color: var(--pl-t-3); font-size: 12.5px; } .pl-types { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--pl-line-soft); } .pl-type { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px 0 10px; border: 1px solid var(--pl-line); border-radius: 999px; background: #fff; color: var(--pl-t-2); font-size: 11px; font-weight: 800; opacity: .78; } .pl-type i { width: 8px; height: 8px; border-radius: 3px; } .pl-type.is-on { opacity: 1; border-color: var(--pl-ink); background: var(--pl-ink); color: #fff; } .pl-sort { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-bottom: 1px solid var(--pl-line-soft); color: var(--pl-t-3); } .pl-sort-label { font-size: 10.5px; font-weight: 800; } .pl-seg { display: inline-flex; margin-left: auto; border: 1px solid var(--pl-line); border-radius: 8px; overflow: hidden; } .pl-seg b { padding: 5px 10px; font-size: 10.5px; font-weight: 800; color: var(--pl-t-2); } .pl-seg b + b { border-left: 1px solid var(--pl-line); } .pl-seg b.is-on { background: var(--pl-ink); color: #fff; } .pl-list { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-height: 0; } .pl-card { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--pl-line-soft); border-left: 4px solid var(--task-color, #8795a7); border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(20, 50, 75, .05); } .pl-card-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px; } .pl-card strong { min-width: 0; font-size: 12px; font-weight: 700; color: var(--pl-t-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* het prioriteitsblokje links van de titel */ .pl-prio { width: 22px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #eef1f5; color: var(--pl-t-2); } .pl-prio svg { width: 13px; height: 13px; } .pl-prio.is-high { background: #fdeceb; color: #c8412f; } .pl-prio.is-low { background: #eaf2fd; color: #3f7cc4; } .pl-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: #eef1f5; color: var(--pl-t-2); font-size: 9.5px; font-weight: 800; white-space: nowrap; } .pl-badge i { width: 7px; height: 7px; border-radius: 3px; } .pl-badge svg { width: 10px; height: 10px; } .pl-card-sub { display: flex; align-items: center; gap: 5px; margin-left: 28px; color: var(--pl-t-3); font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-card-sub i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 3px; } /* -- werkblad: werkbalk + maandraster -- */ .pl-workbench { display: flex; flex-direction: column; } .pl-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--pl-line-soft); background: linear-gradient(180deg, rgba(248, 251, 253, .98), rgba(243, 247, 251, .98)); } /* dag / week / maand / jaar */ .pl-views { justify-self: start; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid rgba(188, 202, 216, .74); border-radius: 10px; background: rgba(255, 255, 255, .78); } .pl-views b { padding: 6px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: var(--pl-t-2); } .pl-views b.is-on { background: var(--pl-ink); color: #fff; } .pl-period { display: inline-flex; align-items: center; gap: 7px; } .pl-period strong { min-width: 150px; text-align: center; font-size: 13px; font-weight: 800; color: var(--pl-t-dark); } .pl-actions { justify-self: end; display: inline-flex; align-items: center; gap: 7px; } .pl-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--pl-line); border-radius: 9px; background: rgba(255, 255, 255, .92); color: var(--pl-t-1); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 2px rgba(20, 50, 75, .08); } .pl-btn-primary { border-color: var(--pl-ink); background: var(--pl-ink); color: #fff; } .pl-caret { width: 13px; height: 13px; opacity: .8; } /* de kleine onderdelen komen alle even ver en loodrecht uit het scherm bij hover; de richting komt uit --lift-x / --lift-y (zie .app-frame) */ .pl-btn, .pl-icon-btn, .pl-views b, .pl-type, .pl-card, .pl-seg b { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, background .35s; } .pl-btn:hover, .pl-icon-btn:hover, .pl-views b:hover, .pl-type:hover, .pl-card:hover, .pl-seg b:hover { transform: translate(calc(var(--lift) * var(--lift-x)), calc(var(--lift) * var(--lift-y))); box-shadow: 0 9px 16px -8px rgba(9, 32, 58, .35); } /* ---------- maandplanning (Atlas-pagina) ---------- Links de medewerkers, rechts één kolom per werkdag van de maand. Weekends staan niet in het raster: zo blijven de kolommen breed genoeg om elke titel volledig te tonen. De balken worden geplaatst met --s (hoeveelste werkdag) en --n (aantal werkdagen); .is-lane2 zet een balk op de tweede rij wanneer twee taken elkaar overlappen. */ .mp { --days: 23; --row-h: 62px; display: flex; min-width: 0; } .mp-roster { flex: 0 0 200px; border-right: 1px solid var(--pl-line); background: rgba(249, 251, 253, .82); } /* in Atlas staat het zoekveld voor medewerkers in de hoek boven de namen */ .mp-corner { height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-bottom: 1px solid var(--pl-line); background: #fff; color: var(--pl-t-3); font-size: 11.5px; } .mp-corner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-person { position: relative; height: var(--row-h); display: flex; align-items: center; gap: 9px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--line-soft); transition: transform .35s cubic-bezier(.2,.7,.3,1), background .35s; } .mp-person:last-child { border-bottom: 0; } .mp-person:hover { background: #fff; transform: translate(calc(var(--lift) * var(--lift-x)), calc(var(--lift) * var(--lift-y))); } /* het gekleurde streepje van het bedrijf, links tegen de rand */ .mp-stripe { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--atlas-teal); } .mp-ava { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--atlas-blue); } .mp-ava[data-c="2"] { background: #0f8fa8; } .mp-ava[data-c="3"] { background: #7c5cfc; } .mp-ava[data-c="4"] { background: #1f8f5f; } .mp-ava[data-c="5"] { background: #e08c1a; } .mp-ava[data-c="6"] { background: #d4557a; } .mp-ava[data-c="7"] { background: #5b7086; } .mp-person > span:last-child { display: flex; flex-direction: column; min-width: 0; } .mp-person strong { font-size: 12.5px; font-weight: 600; color: var(--atlas-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-person em { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* op smalle schermen wordt de maand rechts gewoon afgesneden */ .mp-scroll { flex: 1 1 auto; min-width: 0; overflow: hidden; } .mp-track { min-width: 900px; } .mp-axis { display: grid; grid-template-columns: repeat(var(--days), 1fr); height: 44px; border-bottom: 1px solid var(--line); } .mp-axis > b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-left: 1px solid var(--line-soft); font-size: 12px; font-weight: 700; color: var(--text-2); } .mp-axis > b > i { font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* een iets sterkere lijn bij het begin van elke week */ .mp-axis > b.wk, .mp-cols > i.wk { border-left-color: #cdd8e3; } .mp-axis > b.today { background: #eaf3fe; color: var(--atlas-blue); box-shadow: inset 0 -2px 0 var(--atlas-blue); } .mp-axis > b.today > i { color: var(--atlas-blue); } .mp-body { position: relative; } .mp-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--days), 1fr); pointer-events: none; } .mp-cols > i { border-left: 1px solid var(--line-soft); } .mp-cols > i.today { background: #f2f8fe; box-shadow: inset 1px 0 0 rgba(45, 127, 240, .3), inset -1px 0 0 rgba(45, 127, 240, .3); } .mp-row { position: relative; display: grid; grid-template-columns: repeat(var(--days), 1fr); grid-auto-rows: 23px; row-gap: 5px; align-content: center; height: var(--row-h); border-bottom: 1px solid var(--line-soft); } .mp-row:last-child { border-bottom: 0; } /* de rij waarin u hangt komt boven de rij eronder te liggen */ .mp-row:has(.mp-bar:hover) { z-index: 3; } .mp-bar { position: relative; grid-column: var(--s) / span var(--n); grid-row: 1; margin: 0 1px; display: flex; align-items: center; padding: 0 9px; border-radius: 6px; background: var(--atlas-blue); border: 1px solid rgba(15, 35, 52, .18); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(9, 32, 58, .18); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s cubic-bezier(.2,.7,.3,1); } .mp-bar.is-lane2 { grid-row: 2; } /* elke balk komt precies even ver en loodrecht uit het scherm */ .mp-bar:hover { transform: translate(calc(var(--lift) * var(--lift-x)), calc(var(--lift) * var(--lift-y))); box-shadow: 0 9px 16px -7px rgba(9, 32, 58, .45); z-index: 4; } .mp-teal { background: #0f8fa8; } .mp-green { background: var(--atlas-green); } .mp-amber { background: #e08c1a; } .mp-violet { background: #7c5cfc; } .mp-slate { background: #6b7c92; } /* afwezigheid: gearceerd in plaats van vol, zoals in Atlas zelf */ .mp-leave { background: repeating-linear-gradient(135deg, rgba(135, 149, 167, .14) 0 5px, rgba(135, 149, 167, .42) 5px 10px); border-color: rgba(135, 149, 167, .5); color: #46586d; box-shadow: none; } /* korte feiten onder het venster: drie kolommen met een lijn erboven, in dezelfde taal als de dienstensectie. Het venster faded er net boven weg. */ .quick-facts { /* eigen achtergrond: zo dekken de feiten af wat er van het gekantelde venster nog onder het verloop uitsteekt */ position: relative; z-index: 3; background: var(--page); list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 46px; margin: 10px auto 0; max-width: 1000px; } .quick-facts li { position: relative; padding-top: 26px; border-top: 1px solid var(--line); transition: transform .4s cubic-bezier(.2,.7,.3,1); } /* het blauwe streepje links op de lijn */ .quick-facts li::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--atlas-blue); } .quick-facts li:hover { transform: translateY(-4px); } .quick-facts strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.025em; color: var(--atlas-ink); margin-bottom: 9px; } .quick-facts span { display: block; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 30ch; } /* ---------- lichte secties ---------- */ .section { background: var(--page); padding: 110px 0; } /* het dienstensegment is doorzichtig: de ruimte-achtergrond loopt erdoor */ .section-services { background: #fff; } /* ---------- Atlas: de eerste échte sectie ---------- Alles erboven (de hero en de app-preview) is de introductie van de pagina en staat op dezelfde --page-kleur. Atlas moet daar duidelijk van losstaan, dus krijgt hij een eigen band: een wit vlak met een haarlijn boven en onder. Die haarlijn is de scheiding — zonder die band liep de app-preview gewoon door in de sectie en leek het één geheel. */ .section-atlas { /* z-index 3: het verloop onder de app-preview (.app-stage::after) loopt bewust ver door, zodat de onderste hoek van het gekantelde venster zeker bedekt is. Die staart mag deze sectie niet overschilderen — anders verdwijnt precies de haarlijn die haar afbakent. */ position: relative; z-index: 3; padding: 104px 0 118px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* de productnaam mag groter staan dan een gewone sectietitel */ .section-atlas h2 { font-size: clamp(40px, 5vw, 58px); margin-bottom: 20px; } /* Tekst links, het scherm rechts. Het scherm heeft een vaste, bescheiden breedte en past volledig binnen de container: het loopt niet meer over de rand van het venster. Daarom staat er ook de weekweergave in en niet de maand — met vijf werkdagen blijven de kolommen breed genoeg om een taak leesbaar te tonen, terwijl een maand op deze breedte in streepjes van een paar pixels zou vervallen. Week is bovendien de weergave waarin Atlas zelf opent. De tekstkolom krijgt gewoon wat overblijft. */ .atlas-split { --atlas-gap: 56px; --atlas-screen: 640px; /* de breedte van het planningsscherm */ display: grid; /* de tekstkolom krijgt wat overblijft, maar zakt nooit onder 300 px; wordt het venster smaller, dan is het scherm wat er inlevert */ grid-template-columns: minmax(300px, 1fr) minmax(0, var(--atlas-screen)); gap: var(--atlas-gap); align-items: center; } .atlas-copy .section-lead { max-width: 460px; } .atlas-copy .tick-list { margin: 26px 0 28px; } .atlas-copy .btn-row { gap: 14px; } /* Het kader om het scherm: een smalle rand lichtblauw rond het venster, zoals de pagina waarop de planner in Atlas zelf staat. Zonder die rand stond een wit venster op een wit vlak en las het niet als een scherm. Het is een afbeelding van de toepassing, dus niets is selecteerbaar en de cursor verandert nergens. De --lift-variabelen horen normaal bij het gekantelde venster op atlas.html; hier staat het scherm recht, dus komt een onderdeel bij hover gewoon loodrecht omhoog. Zonder deze drie regels zou dat hover-effect helemaal wegvallen (de waarden zijn dan niet gedefinieerd). */ .atlas-screen { --lift: 3px; --lift-x: 0; --lift-y: -1; position: relative; /* het kader is de maatstaf voor de verkleining van .pw hieronder */ container-type: inline-size; width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, #eef4fa, #e5eef7); /* De laatste laag is een zachte blauwe gloed, zodat het scherm niet als een losse kaart op het witte vlak plakt maar in de sectie zakt. Bewust een schaduw en geen pseudo-element: `overflow: hidden` hieronder zou een pseudo-element wegknippen, een eigen schaduw niet. */ box-shadow: 0 36px 72px -40px rgba(11, 40, 74, .40), 0 6px 18px -10px rgba(11, 40, 74, .16), 0 26px 70px -30px rgba(45, 127, 240, .22); /* het venster binnen mag nooit buiten het kader steken: onder ±960 px houdt .pw zijn minimumbreedte aan en wordt de vrijdagkolom rechts afgesneden, zoals bij een venster dat te smal staat */ overflow: hidden; user-select: none; -webkit-user-select: none; cursor: default; } /* ---------- de planner van Atlas in weekweergave (.pw) ---------- Alleen de planner: geen navigatie, geen zijbalk "In te plannen". Boven de werkbalk (dag/week/maand/jaar, de periode, Filters en Nieuw), daaronder het raster met links de medewerkers en één kolom per werkdag. **Het is een verkleinde versie van de toepassing, geen eigen ontwerp.** Alle maten hieronder staan op ware grootte, exact zoals in Atlas zelf (zie `Planning.css` in `Atlas Preview/`): personenkolom 180 px, werkbalk 60 px, dagenbalk 44 px, rij 44 px, balk 38 px met 4 px ertussen. De `zoom` op .pw schaalt dat geheel naar ongeveer 74 %. Dat is met opzet: de preview hoort er mooi en duidelijk uit te zien, niet per se leesbaar te zijn. Wilt u het groter of kleiner? **Verzet alleen de zoom** — laat de maten met rust, anders klopt de verhouding met de toepassing niet meer. Eén ding is anders dan in Atlas: het bezettingsbalkje onderaan elke cel (de dagindeling) staat er niet op. Dat is uitdrukkelijk gevraagd. Let op: door de zoom staan alle waarden hier in **logische** pixels. Wat u op het scherm ziet is er 74 % van; ook `min-width` en de containervragen rekenen in logische pixels. Deze opmaak staat los van de oudere .pl-/.mp-opmaak van atlas.html. */ .pw { --pw-ink: #14324b; /* primary-dark */ --pw-border: #d7e1ea; --pw-border-soft: #e7edf3; --pw-line: #c7d3de; /* rasterlijn */ --pw-line-soft: #dce5ed; --pw-t-dark: #132033; --pw-t-1: #21344b; --pw-t-2: #64758b; --pw-t-3: #8795a7; --pw-roster: 180px; /* de personenkolom, zoals in Atlas */ --pw-days: 5; /* maandag tot en met vrijdag */ --pw-axis: 44px; /* de dagenbalk */ --pw-row-h: 44px; /* --planning-row-base-height */ --pw-bar-h: 38px; /* --planning-bar-height */ --pw-item-top: 3px; --pw-lane2-top: 45px; /* 3 + 38 + 4 (de balkafstand in Atlas) */ /* DE VERKLEINING — hier, en alleen hier, regelt u hoe groot het scherm oogt. Het scherm is altijd 840 logische pixels breed: de maat waarop de werkbalk, de personenkolom en de vijf dagen precies staan zoals in Atlas zelf. De zoom deelt de beschikbare breedte van het kader (100cqw) door die 840, dus het scherm past altijd exact en ziet er op elk toestel hetzelfde uit — alleen kleiner. Op een breed scherm komt daar .74 uit, de waarde van vroeger; de eerste regel is de terugval voor een browser zonder atan2. */ zoom: .74; zoom: min(.74, tan(atan2(100cqw, 840px))); /* de ondergrens is enkel nog nodig voor die terugval: met de zoom hierboven staat de breedte al vast */ min-width: 760px; /* de werkbalk regelt zichzelf naar de breedte van het scherm, niet naar die van het venster: het scherm krimpt sneller dan de pagina */ container: pw / inline-size; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--pw-border); border-radius: 14px; background: #fff; color: var(--pw-t-1); box-shadow: 0 2px 8px rgba(16, 34, 53, .07); } .pw svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* -- de werkbalk (.planning-toolbar in Atlas) -- */ .pw-toolbar { min-height: 60px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--pw-border-soft); background: linear-gradient(180deg, rgba(248, 251, 253, .98), rgba(243, 247, 251, .98)); } /* dag / week / maand / jaar: een pillengroep waarin de actieve knop donker is, precies zoals de toggle-group in Atlas */ .pw-views { justify-self: start; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid rgba(188, 202, 216, .74); border-radius: 10px; background: rgba(255, 255, 255, .78); } .pw-views b { min-width: 34px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: var(--pw-t-2); } .pw-views b.is-on { background: var(--pw-ink); color: #fff; } /* de periode met vorige / volgende / vandaag */ .pw-period { display: flex; align-items: center; justify-content: center; gap: 7px; } .pw-period-label { min-width: 170px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .pw-period-label strong { font-size: 13px; font-weight: 850; color: var(--pw-t-dark); white-space: nowrap; } /* het weeknummer */ .pw-period-label i { min-width: 26px; height: 22px; display: inline-grid; place-items: center; padding: 0 7px; border: 1px solid var(--pw-border); border-radius: 7px; background: #fff; color: var(--pw-ink); font-style: normal; font-size: 11.8px; font-weight: 850; line-height: 1; box-shadow: 0 1px 2px rgba(11, 30, 48, .04); } .pw-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pw-border); border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--pw-t-1); box-shadow: 0 1px 2px rgba(11, 30, 48, .06); } .pw-icon-btn svg { width: 15px; height: 15px; } /* "vandaag" staat uit zolang we naar de huidige week kijken */ .pw-icon-btn.is-off { color: var(--pw-t-3); opacity: .52; } .pw-actions { justify-self: end; display: inline-flex; align-items: center; gap: 7px; } .pw-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 1px solid var(--pw-border); border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--pw-t-1); font-size: 12.6px; font-weight: 750; white-space: nowrap; box-shadow: 0 1px 2px rgba(11, 30, 48, .06); } .pw-btn-primary { min-width: 100px; justify-content: flex-start; border-color: var(--pw-ink); background: var(--pw-ink); color: #fff; } .pw-btn-primary .pw-caret { width: 14px; height: 14px; margin-left: auto; opacity: .85; } /* Wordt het scherm smaller, dan wordt de werkbalk compacter in plaats van te overlappen: het weeknummer valt weg en alles krijgt wat minder lucht. */ @container pw (max-width: 800px) { .pw-period-label { min-width: 0; } .pw-period-label i { display: none; } .pw-period { gap: 5px; } .pw-views b { min-width: 30px; padding: 0 7px; } .pw-btn { padding: 0 9px; } .pw-btn-primary { min-width: 0; } .pw-icon-btn { width: 30px; height: 30px; } .pw-toolbar { gap: 8px; padding: 9px 8px; } } /* de knopjes komen bij hover loodrecht uit het scherm, alle even ver */ .pw-btn, .pw-icon-btn, .pw-views b { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, background .35s; } .pw-btn:hover, .pw-icon-btn:not(.is-off):hover, .pw-views b:hover { transform: translate(calc(var(--lift) * var(--lift-x)), calc(var(--lift) * var(--lift-y))); box-shadow: 0 9px 16px -8px rgba(9, 32, 58, .35); } /* -- het raster -- */ .pw-grid { display: grid; grid-template-columns: var(--pw-roster) repeat(var(--pw-days), minmax(0, 1fr)); align-items: stretch; } .pw-head { min-height: var(--pw-axis); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 8px; border-right: 1px solid var(--pw-line); border-bottom: 1px solid var(--pw-line); background: #fff; color: var(--pw-t-2); font-size: 12.5px; font-weight: 800; } .pw-head-people { align-items: stretch; justify-content: center; padding: 5px 8px; } .pw-head.is-today { background: #edf5fb; color: var(--pw-ink); } .pw-day { display: flex; align-items: baseline; gap: 6px; text-transform: lowercase; } .pw-day i { font-style: normal; font-weight: 700; } /* het zoekveld voor medewerkers staat in de hoek boven de namen */ .pw-search { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--pw-border); border-radius: 8px; background: #fff; color: var(--pw-t-3); font-size: 12.5px; font-weight: 600; } .pw-search svg { width: 14px; height: 14px; } /* Elke rij is zelf een raster met dezelfde kolommen. De balken liggen in een aparte laag erboven (.pw-runs), zodat ze de cellen niet uit hun kolom duwen: cellen worden automatisch geplaatst, balken staan vast op --s. */ .pw-row { position: relative; grid-column: 1 / -1; min-height: var(--pw-row-h); display: grid; grid-template-columns: var(--pw-roster) repeat(var(--pw-days), minmax(0, 1fr)); border-bottom: 1px solid var(--pw-line-soft); } .pw-row:last-child { border-bottom: 0; } /* twee taken die elkaar overlappen: de rij wordt hoger, de tweede balk zakt */ .pw-row.has-lane2 { --pw-row-h: 86px; } /* 3 + 38 + 4 + 38 + 3 */ .pw-user { position: relative; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-right: 1px solid var(--pw-line); background: #f9fbfd; transition: transform .35s cubic-bezier(.2,.7,.3,1), background .35s; } .pw-user:hover { background: #fff; transform: translate(calc(var(--lift) * var(--lift-x)), calc(var(--lift) * var(--lift-y))); } /* het gekleurde streepje van het bedrijf, links tegen de rand */ .pw-strip { position: absolute; inset: 8px auto 8px 0; width: 4px; border-radius: 0 2px 2px 0; background: #0f8c82; } /* de avatar met de witte ring eromheen, zoals Atlas hem tekent */ .pw-ava { flex: 0 0 auto; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-size: 11.5px; font-weight: 850; line-height: 1; box-shadow: 0 0 0 2px #fff; } .pw-user-text { min-width: 0; } .pw-user-text strong, .pw-user-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pw-user-text strong { color: var(--pw-t-dark); font-size: 12.5px; font-weight: 850; line-height: 1.25; } .pw-user-text small { color: var(--pw-t-3); font-size: 11px; font-weight: 700; line-height: 1.25; } .pw-cell { position: relative; overflow: hidden; border-right: 1px solid var(--pw-line-soft); background: rgba(255, 255, 255, .62); } /* een dag waarop iemand afwezig is, staat vlak */ .pw-cell.is-absent { background: #f7f9fb; } /* de laag met de balken, precies over het dagdeel van de rij */ .pw-runs { position: absolute; inset: 0 0 0 var(--pw-roster); display: grid; grid-template-columns: repeat(var(--pw-days), minmax(0, 1fr)); align-content: start; pointer-events: none; } .pw-seg { grid-row: 1; grid-column: var(--s) / span var(--n); height: var(--pw-bar-h); margin-top: var(--pw-item-top); padding: 0 3px; pointer-events: auto; container: pwseg / inline-size; } .pw-seg.is-lane2 { margin-top: var(--pw-lane2-top); } /* Eén balk, opgebouwd zoals .planning-week-run in Atlas: de titel bovenaan, en onderaan het bolletje van de status, het beginuur en de klant. */ .pw-run { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--task-color) 80%, #102235); border-radius: 8px; background: var(--task-color); color: #fff; box-shadow: 0 2px 5px rgba(16, 34, 53, .11); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s cubic-bezier(.2,.7,.3,1); } .pw-run:hover { transform: translate(calc(var(--lift) * var(--lift-x)), calc(var(--lift) * var(--lift-y))); box-shadow: 0 8px 14px -7px rgba(9, 32, 58, .45); } .pw-run strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.2px; font-weight: 850; line-height: 1.1; } /* de onderregel van een balk (.planning-cell-meta) */ .pw-meta { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; color: rgba(255, 255, 255, .9); font-size: 9.8px; font-weight: 800; line-height: 1; white-space: nowrap; } .pw-meta em { flex: 0 0 auto; font-style: normal; font-variant-numeric: tabular-nums; } .pw-meta small { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .78); font-size: 9.8px; font-weight: 750; } .pw-status { width: 9px; height: 9px; flex: 0 0 9px; border: 1.5px solid rgba(255, 255, 255, .88); border-radius: 50%; } /* Wordt een balk smaller, dan vallen de kleine gegevens als eerste weg — zoals in de toepassing. De titel blijft het langst staan. */ @container pwseg (max-width: 150px) { .pw-meta small { display: none; } } @container pwseg (max-width: 92px) { .pw-meta em { display: none; } } @container pwseg (max-width: 62px) { .pw-meta { display: none; } .pw-run { justify-content: center; } } /* afwezigheid: gearceerd in plaats van vol, zoals in Atlas */ .pw-run.is-absence { justify-content: center; border-color: color-mix(in srgb, var(--absence-color) 28%, #fff); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--absence-color) 22%, #fff) 0 5px, color-mix(in srgb, var(--absence-color) 10%, #fff) 5px 10px); color: #334155; box-shadow: none; } .pw-run.is-absence strong { font-size: 10.9px; font-weight: 800; color: #334155; } h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(29px, 3.7vw, 42px); line-height: 1.12; letter-spacing: -.03em; color: var(--atlas-ink); margin-bottom: 18px; text-wrap: balance; } .section-lead { max-width: 620px; font-size: 17px; line-height: 1.66; color: var(--text-2); } .section-head { max-width: 700px; margin-bottom: 54px; } /* ---------- donker segment midden op de pagina ---------- Een gewoon segment met RECHTE randen boven en onder — geen verloop. De pagina heeft maar twee overgangen: de hero bovenaan en de voettekst onderaan. Alles daartussen zijn afgebakende secties. De globale documentcanvas schijnt door de transparante sectie heen. */ .section-dark { position: relative; z-index: 0; isolation: isolate; overflow: hidden; padding: 150px 0 190px; background: transparent; } .section-dark > .container { position: relative; z-index: 1; } /* Boven en onder vervaagt het segment in de paginakleur. Zo staat er nergens een harde rand tussen donker en licht — dat was de laatste sprong die nog opviel. De onderste vervaging is langer dan de bovenste, omdat het slot er met een verloop op verder gaat. */ .section-dark::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, var(--page) 0%, rgba(246, 249, 252, 0) 100%) top / 100% 130px no-repeat, /* De vlakke staart op het einde is nodig: zonder die herhaling van var(--page) op 88% én 100% stopt de kleurverandering plots op de rand van het blok, en dat leest als een streep. Zie "Drie regels voor overgangen" in README.md. */ linear-gradient(180deg, rgba(246, 249, 252, 0) 0%, rgba(246, 249, 252, .38) 44%, var(--page) 88%, var(--page) 100%) bottom / 100% 200px no-repeat; } /* zachte blauwe gloed, zodat het segment niet bijna zwart oogt */ .section-dark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 130vw; height: 130%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: radial-gradient(ellipse 44% 48% at 50% 50%, rgba(64, 132, 220, .26) 0%, rgba(24, 68, 128, .12) 48%, rgba(10, 26, 48, 0) 74%); } /* tekstkleuren op het donkere segment */ .section-dark h2 { color: #ffffff; } .section-dark .section-lead { color: #c3d8ef; font-size: 17.5px; } /* ---------- de vier diensten ---------- Een raster van 2 x 2 lichte kaarten op het donkere segment. Elke kaart bestaat uit twee delen: .service-visual — het beeld: een echt scherm, een workflow, een gesprek of een adviesnota, lichtjes gedraaid en over de rand .service-body — icoon + titel + één zin De kaarten zijn licht en niet donker: op het blauwe segment leest dat als een schermafbeelding op een rustig vlak, zoals op de voorbeelden die de opdrachtgever aanleverde. Belangrijk: **elke dienst krijgt een ander soort beeld.** Vier keer hetzelfde venster was te eentonig. Wat er nu staat: 1 procesautomatisering — een workflow op een raster (.sv-flow) 2 AI-integratie — chaos in, structuur uit (.sv-mess → .sv-record) 3 software op maat — code achteraan, het scherm ervoor (.sv-code) 4 softwareadvies — drie opties, één komt eruit (.sv-options) */ .services { display: grid; grid-template-columns: repeat(2, 1fr); /* alle vier de kaarten even hoog, ook als de ene zin op één regel past en de andere op twee */ grid-auto-rows: 1fr; gap: 26px; margin-top: 10px; } .service { position: relative; /* de kaart is de maatstaf voor de verkleining van het beeld erin */ container-type: inline-size; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--surface); box-shadow: 0 30px 60px -34px rgba(2, 12, 28, .7); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; } .service:hover { transform: translateY(-4px); box-shadow: 0 44px 74px -34px rgba(2, 12, 28, .8); } /* het vlak waarin het beeld staat: een rustige lichtgrijze bak, net als op de voorbeelden. Wat erin ligt mag over de randen lopen. */ .service-visual { position: relative; /* Het beeld is een vast vlak van 545 x 236 dat als geheel geschaald wordt (zie .sv-stage). Wordt de kaart smaller, dan verkleint het mee in plaats van uit elkaar te vallen of afgesneden te worden. --sv-scale is precies hoeveel keer de kaart (100cqw) in dat vlak van 545 past, nooit meer dan 1. Zo hoeven de onderdelen zelf nooit verplaatst te worden. De eerste regel is de terugval voor een browser zonder atan2. */ --sv-scale: 1; --sv-scale: min(1, tan(atan2(100cqw, 545px))); height: calc(236px * var(--sv-scale, 1)); overflow: hidden; background: linear-gradient(165deg, #eef3f9 0%, #e7eef7 100%); } .service-visual::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line); } /* enkel bij de workflow: een raster, zoals op een tekenvlak */ .sv-grid { background-image: radial-gradient(circle, #c6d3e3 1.2px, transparent 1.6px), linear-gradient(165deg, #eef3f9 0%, #e7eef7 100%); background-size: 17px 17px, 100% 100%; } .service-body { padding: 24px 26px 28px; } .service-head { display: flex; align-items: center; gap: 13px; margin-bottom: 10px; } .service-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(45, 127, 240, .10); color: var(--accent); } .service-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .service h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--atlas-ink); text-wrap: balance; } .service p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); } /* ---------- de beelden in de kaarten ---------- Geen afbeeldingen maar echte opmaak, in dezelfde stijl als de Atlas-planning bovenaan de pagina: witte panelen, dunne lijnen, echte labels. Alles staat een paar graden gedraaid, zodat het oogt als iets dat op de kaart ligt. Niets beweegt uit zichzelf en niets is selecteerbaar. Alles binnen .sv-stage staat in vaste pixels op een vlak van 545 x 236. Dat vlak staat gecentreerd in de kaart en wordt in zijn geheel geschaald met --sv-scale. Daardoor blijven de draden, de pijlen en de vensters op elke schermbreedte exact op elkaar aansluiten. */ .sv-stage { position: absolute; left: 50%; top: 0; width: 545px; height: 236px; margin-left: -272.5px; transform: scale(var(--sv-scale, 1)); transform-origin: top center; font-size: 11.5px; line-height: 1.35; color: var(--text); user-select: none; pointer-events: none; } .sv-stage svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* -- 1. procesautomatisering: een workflow op het raster -- De knopen staan op vaste plaatsen; de draden ertussen zijn gewone lijntjes en één elleboog. Zo hoeft er geen SVG bij en klopt alles ook als het lettertype nog laadt. */ .sv-flow { position: absolute; inset: 0; } .sv-node { position: absolute; display: flex; align-items: center; gap: 8px; width: 150px; padding: 8px 10px; border-radius: 11px; background: var(--surface); border: 1px solid #dbe4f0; box-shadow: 0 12px 24px -14px rgba(13, 40, 74, .34); transition: transform .45s cubic-bezier(.2,.7,.3,1); } .sv-node-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--surface-soft); color: var(--text-2); } .sv-node-ico svg { width: 13px; height: 13px; } .sv-node-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sv-node-body strong { font-size: 11.5px; font-weight: 600; color: var(--atlas-ink); white-space: nowrap; } .sv-node-body em { font-style: normal; font-size: 10px; color: var(--muted); } /* de eerste knoop is de aanleiding en krijgt de accentkleur */ .sv-node.is-trigger { border-color: rgba(45, 127, 240, .4); } .sv-node.is-trigger .sv-node-ico { background: rgba(45, 127, 240, .12); color: var(--accent); } /* de laatste stap van een spoor: daar eindigt het, groen afgevinkt */ .sv-node.is-done .sv-node-ico { background: rgba(31, 143, 95, .12); color: var(--atlas-green); } /* De aanleiding staat links; daarna splitst het in twee sporen die elk nog een stap verder lopen. Elke knoop is 50px hoog, dus het midden ligt telkens 25px onder zijn top: A (trigger) ─┬─ B ── C └─ D ── E */ .sv-node-a { left: 18px; top: 88px; } .sv-node-b { left: 200px; top: 30px; } .sv-node-c { left: 380px; top: 30px; } .sv-node-d { left: 200px; top: 146px; } .sv-node-e { left: 380px; top: 146px; } /* de draden: één lijn naar de verdeellijn, en van daar drie takken met een pijlpunt naar elke stap */ .sv-wire { position: absolute; height: 1.5px; background: #c3d2e4; } .sv-wire-in { left: 168px; top: 112px; width: 18px; } .sv-wire-1 { left: 187px; top: 54px; width: 13px; } /* verdeellijn → B */ .sv-wire-2 { left: 187px; top: 170px; width: 13px; } /* verdeellijn → D */ .sv-wire-3 { left: 350px; top: 54px; width: 30px; } /* B → C */ .sv-wire-4 { left: 350px; top: 170px; width: 30px; } /* D → E */ .sv-wire-1::after, .sv-wire-2::after, .sv-wire-3::after, .sv-wire-4::after { content: ""; position: absolute; right: -1px; top: -3px; border-left: 6px solid #c3d2e4; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } /* de verticale verdeellijn waar de drie takken op staan */ .sv-bus { position: absolute; left: 186px; top: 54px; width: 1.5px; height: 117px; border-radius: 1px; background: #c3d2e4; } .service:hover .sv-node { transform: translateY(-4px); } /* -- 2. AI-integratie: van chaos naar orde -- Links de rommel die vandaag binnenkomt: losse e-mails, PDF's, foto's, berichten en een spreadsheet, kriskras over elkaar en deels buiten beeld. In het midden de drie modellen waar wij mee werken, als drie losse kaartjes die tegen elkaar leunen — Claude vooraan in het midden. Rechts het resultaat: drie kaarsrecht uitgelijnde fiches op elkaar. Zonder één woord te lezen: chaos in, structuur uit. */ .sv-mess { position: absolute; inset: 0; } .sv-scrap { position: absolute; display: flex; align-items: center; gap: 8px; width: 168px; padding: 8px 10px; border-radius: 9px; background: var(--surface); border: 1px solid #dde5ef; box-shadow: 0 10px 20px -13px rgba(13, 40, 74, .5); transition: transform .45s cubic-bezier(.2,.7,.3,1); } .sv-scrap-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-soft); color: #8ba0b6; } .sv-scrap-ico svg { width: 12px; height: 12px; } .sv-scrap-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sv-scrap-body strong { font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-scrap-body em { font-style: normal; font-size: 9.5px; color: var(--muted); } /* Kriskras: sterk wisselende hoeken, flink overlappend, en een paar die links buiten de kaart lopen. Dat is net de bedoeling — hier moet het rommelig ogen. */ .sv-scrap-1 { left: -14px; top: 6px; transform: rotate(-13deg); z-index: 2; } .sv-scrap-2 { left: 42px; top: 40px; transform: rotate(8deg); z-index: 4; } .sv-scrap-3 { left: -18px; top: 76px; transform: rotate(-5deg); z-index: 3; } .sv-scrap-4 { left: 38px; top: 116px; transform: rotate(11deg); z-index: 5; } .sv-scrap-5 { left: -10px; top: 152px; transform: rotate(-9deg); z-index: 2; } .sv-scrap-6 { left: 34px; top: 192px; transform: rotate(5deg); z-index: 4; } .service:hover .sv-scrap-1 { transform: rotate(-13deg) translateY(-4px); } .service:hover .sv-scrap-2 { transform: rotate(8deg) translateY(-4px); } .service:hover .sv-scrap-3 { transform: rotate(-5deg) translateY(-4px); } .service:hover .sv-scrap-4 { transform: rotate(11deg) translateY(-4px); } .service:hover .sv-scrap-5 { transform: rotate(-9deg) translateY(-4px); } .service:hover .sv-scrap-6 { transform: rotate(5deg) translateY(-4px); } /* de drie modellen: drie losse kaartjes die tegen elkaar leunen */ .sv-stack { position: absolute; left: 0; top: 0; } .sv-chip { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 15px; background: var(--surface); border: 1px solid #dde5ef; transition: transform .45s cubic-bezier(.2,.7,.3,1); } .sv-chip img { display: block; } /* de buitenste twee staan gedraaid, kleiner en erachter */ .sv-chip-left, .sv-chip-right { width: 56px; height: 56px; top: 104px; z-index: 1; box-shadow: 0 10px 20px -14px rgba(13, 40, 74, .5); } /* ver genoeg uit elkaar zodat hun logo naast Claude uitkomt en niet erachter verdwijnt */ .sv-chip-left { left: 190px; transform: rotate(-15deg); } .sv-chip-right { left: 286px; transform: rotate(15deg); } .sv-chip-left img, .sv-chip-right img { width: 25px; height: 25px; opacity: .8; } /* Claude staat vooraan in het midden: groter, rechter en volledig zichtbaar */ .sv-chip-front { left: 230px; top: 86px; width: 72px; height: 72px; z-index: 3; border-color: #cfdcea; transform: rotate(-2deg); box-shadow: 0 20px 34px -14px rgba(13, 40, 74, .5); } .sv-chip-front img { width: 36px; height: 36px; } .service:hover .sv-chip-left { transform: rotate(-15deg) translateY(-4px); } .service:hover .sv-chip-right { transform: rotate(15deg) translateY(-4px); } .service:hover .sv-chip-front { transform: rotate(-2deg) translateY(-5px); } /* de pijl van de modellen naar het resultaat */ .sv-arrow { position: absolute; left: 348px; top: 123px; width: 28px; height: 1.5px; background: #c3d2e4; } .sv-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid #c3d2e4; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } /* rechts: de orde. Drie identieke fiches, kaarsrecht en netjes op elkaar. */ .sv-record { position: absolute; left: 382px; top: 52px; width: 152px; transition: transform .45s cubic-bezier(.2,.7,.3,1); } .service:hover .sv-record { transform: translateY(-5px); } /* de twee fiches eronder: exact evenwijdig, alleen wat verschoven */ .sv-record-under { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 12px; background: var(--surface); border: 1px solid #dde6f0; } .sv-record-under-1 { transform: translate(8px, 8px); } .sv-record-under-2 { transform: translate(16px, 16px); opacity: .62; } .sv-record-card { position: relative; display: block; border-radius: 12px; background: var(--surface); border: 1px solid rgba(45, 127, 240, .35); box-shadow: 0 20px 36px -18px rgba(13, 40, 74, .45); overflow: hidden; } .sv-record-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line-soft); background: #f7fbff; } .sv-record-head strong { font-size: 11.5px; font-weight: 700; color: var(--atlas-ink); } .sv-record-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--atlas-green); color: #fff; } .sv-record-check svg { width: 10px; height: 10px; stroke-width: 3; } .sv-record-rows { display: block; padding: 3px 11px 9px; } .sv-record-rows > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); } .sv-record-rows > span:last-child { border-bottom: 0; } .sv-record-rows i { font-style: normal; font-size: 10.5px; color: var(--muted); } .sv-record-rows b { font-size: 11px; font-weight: 600; color: var(--atlas-ink); white-space: nowrap; } /* -- 3. software op maat: de code achteraan, het scherm ervoor -- */ .sv-code { position: absolute; left: -30px; top: 22px; width: 340px; border-radius: 12px; overflow: hidden; background: #0f2740; box-shadow: 0 24px 44px -20px rgba(6, 22, 44, .6); transform: rotate(-2.4deg); transition: transform .45s cubic-bezier(.2,.7,.3,1); } .service:hover .sv-code { transform: rotate(-2.4deg) translateY(-5px); } .sv-code-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .08); } .sv-code-bar .sv-dots i { background: rgba(255, 255, 255, .22); } .sv-code-tab { font-size: 11px; color: #9fb6d0; } .sv-code-body { padding: 10px 12px 14px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.75; color: #d6e4f4; white-space: pre; } .sv-code-body .l { display: block; } .sv-code-body b { display: inline-block; width: 16px; font-weight: 400; color: #4d6a89; } .sv-code-body .c { color: #6f8caa; } /* commentaar */ .sv-code-body .k { color: #7fb2ff; } /* sleutelwoord */ .sv-code-body .f { color: #8ddcc0; } /* functie */ .sv-code-body .s { color: #f0b878; } /* tekst */ /* het scherm dat uit die code komt, half over de code heen */ .sv-win { position: absolute; border-radius: 12px; background: var(--surface); border: 1px solid #dde6f0; box-shadow: 0 22px 44px -18px rgba(13, 40, 74, .34); overflow: hidden; transition: transform .45s cubic-bezier(.2,.7,.3,1); } .sv-app { right: 14px; bottom: -26px; width: 264px; transform: rotate(2deg); } .service:hover .sv-app { transform: rotate(2deg) translateY(-5px); } .sv-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); background: #f9fbfd; } .sv-dots { display: flex; gap: 4px; flex: none; } .sv-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d7e0ea; } .sv-bar-title { flex: 1; font-weight: 600; font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-pad { padding: 12px; display: flex; flex-direction: column; gap: 9px; } .sv-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .sv-field span { font-size: 10.5px; font-weight: 600; color: var(--muted); } .sv-field i { font-style: normal; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 11.5px; color: var(--atlas-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-field-row { display: flex; gap: 9px; } .sv-btn { display: inline-block; align-self: flex-start; margin-top: 2px; padding: 7px 13px; border-radius: 8px; background: var(--surface-soft); color: var(--text-2); font-size: 11.5px; font-weight: 600; } .sv-btn-primary { background: var(--accent); color: #fff; } /* -- 4. onafhankelijk softwareadvies: drie opties naast elkaar -- Drie kaartjes met dezelfde drie punten, telkens afgevinkt of niet. Eén kaartje staat hoger, heeft de accentkleur en draagt "Ons advies". Zo ziet u zonder lezen dat er vergeleken is en dat er één uit komt. */ .sv-options { position: absolute; left: 22px; top: 58px; display: flex; align-items: flex-start; gap: 13px; } .sv-opt { position: relative; width: 158px; padding: 13px 13px 12px; border-radius: 12px; background: var(--surface); border: 1px solid #dbe4f0; box-shadow: 0 16px 30px -20px rgba(13, 40, 74, .4); transition: transform .45s cubic-bezier(.2,.7,.3,1); } .sv-opt-name { display: block; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft); font-size: 13px; font-weight: 700; color: var(--atlas-ink); } .sv-opt-marks { list-style: none; display: flex; flex-direction: column; gap: 7px; } .sv-opt-marks li { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-2); white-space: nowrap; } .sv-opt-marks svg { flex: none; width: 15px; height: 15px; padding: 3px; border-radius: 50%; stroke-width: 3; box-sizing: content-box; } .sv-opt-marks .ok svg { background: rgba(31, 143, 95, .13); color: var(--atlas-green); } .sv-opt-marks .no svg { background: var(--surface-soft); color: #a9b7c8; } .sv-opt-marks .no { color: var(--muted); } /* de optie die eruit komt: hoger, met de accentkleur en een label erboven */ .sv-opt.is-pick { margin-top: -18px; padding-top: 22px; border-color: var(--accent); box-shadow: 0 22px 40px -18px rgba(13, 40, 74, .5); } .sv-opt-badge { position: absolute; left: 13px; top: -11px; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .01em; } .sv-opt.is-pick .sv-opt-name { border-bottom-color: rgba(45, 127, 240, .25); } .service:hover .sv-opt { transform: translateY(-4px); } /* De afsluitende balk onder de kaarten: links één zin, rechts de knop. De balk is even breed als het raster, met een haarlijn erboven, zodat de knop ergens aan hangt in plaats van los op de achtergrond te zweven. */ .services-more { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-top: 38px; padding-top: 30px; border-top: 1px solid rgba(141, 196, 255, .22); } .services-more p { max-width: 46ch; font-size: 16px; line-height: 1.55; color: #c3d8ef; } .services-more .btn { flex: none; display: inline-flex; align-items: center; gap: 9px; } .services-more .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; } .services-more .btn:hover svg { transform: translateX(3px); } .btn-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .tick-list { list-style: none; margin: 24px 0 30px; } .tick-list li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); } .tick-list li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(45, 127, 240, .14); } /* ============================================================ ATLAS-PAGINA (atlas.html) ============================================================ */ /* de hero is hier korter dan op de homepagina; de maandplanning valt er direct onder over de overgang */ .hero-sub { min-height: 78vh; padding-bottom: 4vh; } .hero-sub .hero-title { font-size: clamp(36px, 5.2vw, 62px); } /* Het venster bevat hier de Planning-pagina, en die is een stuk lager dan het dashboard op de homepagina. De stage en de vervaging mogen dus vroeger ophouden; anders blijft er onder het scherm te veel wit staan. */ .atlas-showcase .app-stage { height: 480px; } /* Hier volgt geen dicht wit vlak op het venster maar .section-intro, die dezelfde --page-kleur heeft en geen z-index draagt. De effen laag moet de onderste hoek van het gekantelde venster dus zélf helemaal afdekken — op de homepagina neemt de Atlas-sectie dat over vanaf haar bovenrand. */ .atlas-showcase .app-stage::after { top: 265px; bottom: -250px; } .atlas-showcase { padding-bottom: 0; } .atlas-showcase + .section-intro { padding-top: 72px; } .section-intro { background: var(--page); padding: 96px 0 104px; } .intro-head { max-width: 720px; margin-bottom: 46px; } .section-intro .quick-facts { margin-top: 0; } /* De drie feiten staan op de homepagina in een smallere, gecentreerde rij, want daar hangen ze onder een venster dat breder is dan de container. Hier staan ze tussen kop, kaarten en kolommen die állemaal op de container zijn uitgelijnd; die 58 px inspringing viel op als een fout. */ .atlas-showcase .quick-facts { max-width: none; margin-left: 0; margin-right: 0; } /* ---------- drie functies: tekst scrolt, scherm blijft staan ---------- HOE HET WERKT — en waarom net zo. De tekstkolom links scrolt gewoon door. De schermkolom rechts blijft staan en moet daarbij twee dingen doen die niet vanzelf samengaan: 1. VERTICAAL IN HET MIDDEN VAN HET VENSTER STAAN, op elk scherm. Een `position: sticky` met een vaste `top` plakt het blok altijd op diezelfde afstand van de bovenrand. Op een hoog scherm bleef er dan honderden pixels leeg onder het scherm. Daarom is .feature-stage zelf precies één vensterhoogte hoog en staat de inhoud daarbinnen gecentreerd: waar de bezoeker ook kijkt, het scherm staat in het midden. De navigatiebalk telt niet mee voor dat midden — vandaar de padding-top ter grootte van de balk. 2. BLIJVEN STAAN TOT DE LAATSTE TEKST GELEZEN IS. Een sticky blok laat los zodra de onderkant van zijn container in beeld komt. Met een blok van één vensterhoogte valt dat moment precies samen met het einde van de tekstkolom. Elke stap is daarom óók één vensterhoogte hoog: de derde tekst staat exact in het midden op het moment dat het scherm loslaat, en daarna schuiven tekst en scherm samen weg. Verzet u die hoogtes, verzet ze dan samen — anders verdwijnt het scherm voordat de laatste tekst gelezen is (dat was de fout in de vorige versie). Onder 900 px staat het scherm boven de tekst; zie de media query. */ .features { background: #fff; /* een wit vlak tussen twee lichte secties: zonder haarlijn was de kleurovergang een streep die eruitzag als een fout */ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); /* onderaan geen ruimte: de laatste stap draagt die zelf al */ padding: 100px 0 0; /* de hoogte van de vaste navigatiebalk; die telt niet mee voor het midden */ --stick-top: 78px; } /* flexbox, niet grid: zo is de flexcontainer het houvast voor position: sticky en blijft het scherm de hele sectie lang staan */ .feature-grid { display: flex; align-items: flex-start; gap: 72px; } .feature-copy { flex: 1 1 44%; min-width: 0; } .feature-stage { flex: 1 1 56%; min-width: 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--stick-top); } /* elke stap is één vensterhoog, met de tekst in het midden — zo staat de tekst altijd naast het scherm */ .feature-step { min-height: 100vh; padding-top: var(--stick-top); display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .5s ease; } .feature-step.is-on { opacity: 1; } /* De laatste stap is een stukje hoger dan de andere. Zonder die extra ruimte valt het moment waarop de derde tekst in het midden komt precies samen met het moment waarop het scherm loslaat, en begint het scherm dus meteen weg te schuiven. Nu blijft het eerst nog even staan. */ .feature-step:last-child { min-height: 116vh; } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: #e8f1fd; color: var(--atlas-blue); margin-bottom: 22px; } .feature-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .feature-num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .feature-step h3 { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--atlas-ink); margin-bottom: 16px; } .feature-text { font-size: 16.5px; line-height: 1.68; color: var(--text-2); max-width: 480px; } .feature-list { list-style: none; margin-top: 22px; } .feature-list li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 15px; line-height: 1.55; color: var(--text-2); } .feature-list li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(45, 127, 240, .14); } /* ---------- het venster rechts ---------- De drie schermen liggen op elkaar; alleen het actieve is zichtbaar. De hoogte volgt het venster van de bezoeker, met een boven- en ondergrens. Elk scherm vult die hoogte helemaal: de rijen erin rekken mee. Zo staat er nooit een leeg stuk onder het scherm en wordt er nooit een rij half afgesneden. */ .shot-deck { position: relative; height: clamp(390px, calc(100vh - 270px), 520px); /* Het kader is zelf een containervraag-context. Het projectscherm hieronder heeft namelijk vaste onderdelen (kop, voortgang, vier cijfers, fases) die op een laag venster niet meer samen passen; met deze context kan het zich daarnaar schikken in plaats van onderaan afgesneden te worden. */ container: deck / size; /* hoe ver een onderdeel bij hover uit het scherm komt: hier staat het scherm recht, dus gewoon een klein stukje omhoog */ --lift: 3px; --lift-x: 0; --lift-y: -1; } /* De wissel: het vertrekkende scherm gaat er snel af, het nieuwe komt er net daarna op. Twee volledige schermen die tegelijk half doorzichtig zijn geven een onleesbare brij; een korte overlap van een fractie van een seconde is genoeg om te vermijden dat het kader even leeg staat. */ .shot { position: absolute; inset: 0; opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .22s ease, transform .22s ease; pointer-events: none; } .shot.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s ease .14s, transform .5s cubic-bezier(.2,.7,.3,1) .14s; } /* elk scherm vult het hele kader */ .shot > .pw, .shot > .sc { height: 100%; box-shadow: var(--shadow-lg); } /* ---------- scherm 1: de weekplanner ---------- Exact dezelfde opmaak als op de homepagina (.pw). Twee dingen zijn hier anders, allebei omdat dit kader smaller is en een vaste hoogte heeft: - een andere verkleining. De maten binnen .pw staan op ware grootte; de zoom bepaalt hoe groot het geheel oogt. Op .85 is de kolom van een dag binnen het scherm even breed als op de homepagina, en passen de namen en de titels van de taken er dus gewoon op. Zet u de zoom hoger, dan worden de kolommen smaller en beginnen de titels af te kappen. - de rijen rekken mee tot het kader gevuld is, in plaats van een vaste rijhoogte aan te houden. Zo blijft er nooit een leeg stuk onder de laatste rij staan en wordt er nooit een rij half afgesneden. Met tien medewerkers komt de uitgerekte rijhoogte ongeveer op die van Atlas zelf uit; haalt u er rijen weg, dan worden de balken hoger. */ .shot .pw { zoom: .85; min-width: 0; --pw-roster: 170px; border-radius: 18px; } .shot .pw-grid { flex: 1 1 auto; min-height: 0; /* de dagenbalk houdt zijn eigen hoogte, alle rijen erna delen de rest */ grid-template-rows: auto; grid-auto-rows: minmax(0, 1fr); } .shot .pw-row { min-height: 0; } /* de balk vult de rij, in plaats van bovenaan te blijven hangen */ .shot .pw-runs { align-content: stretch; grid-template-rows: minmax(0, 1fr); } .shot .pw-seg { height: auto; margin-top: 0; padding: 4px 3px; } /* ---------- scherm 2 en 3: dezelfde huisstijl als de planner ---------- .sc is hetzelfde vensterkader als .pw: dezelfde kleuren, dezelfde randen, dezelfde werkbalk. Alleen de inhoud verschilt. */ .sc { --sc-ink: #14324b; --sc-border: #d7e1ea; --sc-border-soft: #e7edf3; --sc-line: #dce5ed; --sc-t-dark: #132033; --sc-t-1: #21344b; --sc-t-2: #64758b; --sc-t-3: #8795a7; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--sc-border); border-radius: 16px; background: #fff; color: var(--sc-t-1); user-select: none; -webkit-user-select: none; cursor: default; } .sc svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* -- de werkbalk, gelijk aan die van de planner -- */ .sc-bar { min-height: 60px; flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--sc-border-soft); background: linear-gradient(180deg, rgba(248, 251, 253, .98), rgba(243, 247, 251, .98)); } .sc-search { min-width: 0; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--sc-border); border-radius: 8px; background: #fff; color: var(--sc-t-3); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; } .sc-filters { display: inline-flex; align-items: center; gap: 7px; } .sc-pill { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 9px 0 11px; border: 1px solid var(--sc-border); border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--sc-t-2); font-size: 12px; font-weight: 750; white-space: nowrap; box-shadow: 0 1px 2px rgba(11, 30, 48, .06); } .sc-pill svg { width: 13px; height: 13px; opacity: .7; } .sc-actions { justify-self: end; display: inline-flex; align-items: center; gap: 7px; } .sc-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 1px solid var(--sc-border); border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--sc-t-1); font-size: 12.6px; font-weight: 750; white-space: nowrap; box-shadow: 0 1px 2px rgba(11, 30, 48, .06); } .sc-btn-primary { border-color: var(--sc-ink); background: var(--sc-ink); color: #fff; } /* het broodkruimelpad van het projectdossier */ .sc-crumbs { min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--sc-t-3); font-size: 12.5px; font-weight: 750; white-space: nowrap; overflow: hidden; } .sc-crumbs svg { width: 13px; height: 13px; } .sc-crumbs b { color: var(--sc-t-dark); font-weight: 850; overflow: hidden; text-overflow: ellipsis; } /* dezelfde loodrechte beweging bij hover als in de planner */ .sc-btn, .sc-pill, .sc-tr, .sc-pj-phase { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, background .35s; } .sc-btn:hover, .sc-pill:hover, .sc-tr:hover, .sc-pj-phase:hover { transform: translate(calc(var(--lift) * var(--lift-x)), calc(var(--lift) * var(--lift-y))); } .sc-btn:hover, .sc-pill:hover { box-shadow: 0 9px 16px -8px rgba(9, 32, 58, .35); } .sc-tr:hover, .sc-pj-phase:hover { background: #f7fafd; } /* -- de voettekst van een scherm -- */ .sc-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 14px; border-top: 1px solid var(--sc-border-soft); background: #f8fbfd; color: var(--sc-t-2); font-size: 12px; font-weight: 700; } .sc-foot strong { color: var(--sc-t-dark); font-weight: 850; } .sc-foot-sep { flex: 1 1 auto; } /* -- scherm 2: de takenlijst -- */ .sc-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .sc-thead, .sc-tr { display: grid; grid-template-columns: minmax(0, 1fr) 108px 52px 118px; align-items: center; gap: 12px; padding: 0 14px; } .sc-thead { flex: 0 0 auto; min-height: 34px; border-bottom: 1px solid var(--sc-border); background: #fbfdff; color: var(--sc-t-3); font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .sc-tbody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .sc-tr { flex: 1 1 0; min-height: 0; border-bottom: 1px solid var(--sc-line); } .sc-tr:last-child { border-bottom: 0; } .sc-task { min-width: 0; display: flex; align-items: center; gap: 10px; } /* het kleurblokje van het taaktype, zoals in Atlas */ .sc-task > i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 3px; } .sc-task > span { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sc-task strong { font-size: 13px; font-weight: 800; color: var(--sc-t-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-task em { font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--sc-t-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-who { min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 750; color: var(--sc-t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-ava { width: 24px; height: 24px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-style: normal; font-size: 10px; font-weight: 850; line-height: 1; box-shadow: 0 0 0 2px #fff; } .sc-hours { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 800; color: var(--sc-t-2); } /* de statuspil */ .sc-state { justify-self: start; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: #eef1f5; color: var(--sc-t-2); font-size: 11px; font-weight: 800; white-space: nowrap; } .sc-state.is-busy { background: #e8f1fd; color: var(--atlas-blue); } .sc-state.is-done { background: #e6f5ed; color: var(--atlas-green); } .sc-state.is-wait { background: #fdf3e5; color: var(--atlas-amber); } .sc-state.is-check { background: #eef1f7; color: #4a5d86; } /* -- scherm 3: het projectdossier -- */ .sc-project { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 18px; /* vangnet: blijft er ondanks de regels hieronder toch een paar beeldpunten over, dan worden die weggeknipt in plaats van over de voettekst te lopen */ overflow: hidden; } .sc-pj-head { display: flex; align-items: center; gap: 12px; } .sc-pj-mark { width: 40px; height: 40px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 11px; background: linear-gradient(160deg, #2d7ff0, #14324b); color: #fff; font-size: 13px; font-weight: 850; } .sc-pj-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sc-pj-title strong { font-size: 16px; font-weight: 850; letter-spacing: -.02em; color: var(--sc-t-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-pj-title em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--sc-t-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-pj-head .sc-state { margin-left: auto; } .sc-pj-progress { display: flex; flex-direction: column; gap: 7px; } .sc-pj-track { height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden; } .sc-pj-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--atlas-deep), var(--atlas-blue)); } .sc-pj-legend { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--sc-t-3); } .sc-pj-legend b { font-size: 13px; font-weight: 850; color: var(--sc-t-dark); } .sc-pj-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .sc-pj-stats span { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 10px; border: 1px solid var(--sc-border-soft); border-radius: 10px; background: #f8fbfd; } .sc-pj-stats em { font-style: normal; font-size: 10.5px; font-weight: 750; color: var(--sc-t-3); } .sc-pj-stats b { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--sc-t-dark); } .sc-pj-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-t-3); } .sc-pj-phases { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; } .sc-pj-phase { flex: 1 1 0; min-height: 38px; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--sc-border-soft); border-radius: 10px; background: #fbfdff; } .sc-pj-phase > i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #cfdae6; } .sc-pj-phase strong { font-size: 13px; font-weight: 800; color: var(--sc-t-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-pj-phase em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--sc-t-3); } .sc-pj-phase.is-done > i { background: var(--atlas-green); border-color: var(--atlas-green); } .sc-pj-phase.is-busy > i { background: var(--atlas-blue); border-color: var(--atlas-blue); box-shadow: 0 0 0 4px rgba(45, 127, 240, .14); } /* Op een laag kader passen de kop, de voortgang, de vier cijfers én vier fases niet meer samen. In twee stappen wordt het scherm dan compacter en houdt de lijst eerder op — precies zoals een lijst in de toepassing zelf ophoudt waar het scherm ophoudt. Zonder dit liep de onderste fase over de voettekst van het venster heen. */ @container deck (max-height: 505px) { .sc-bar { min-height: 50px; } .sc-foot { min-height: 36px; } .sc-project { gap: 9px; padding: 12px 13px 14px; } .sc-pj-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; } .sc-pj-title strong { font-size: 15px; } .sc-pj-stats span { padding: 7px 9px 8px; } .sc-pj-stats b { font-size: 16px; } .sc-pj-label { display: none; } .sc-pj-phases { gap: 5px; } .sc-pj-phase { min-height: 30px; } .sc-pj-phase:nth-child(n+4) { display: none; } } @container deck (max-height: 400px) { .sc-bar { min-height: 44px; } .sc-foot { min-height: 32px; } .sc-project { gap: 8px; padding: 10px 12px 12px; } .sc-pj-stats span:nth-child(n+4) { display: none; } .sc-pj-phase:nth-child(n+3) { display: none; } } /* ---------- waar zit u in de drie functies ---------- Drie streepjes in plaats van bolletjes: het actieve streepje is breder, zo is de voortgang door de sectie in één oogopslag duidelijk. */ .shot-dots { flex: 0 0 auto; display: flex; justify-content: center; gap: 7px; margin-top: 20px; } .shot-dots span { width: 18px; height: 4px; border-radius: 999px; background: #d3dfeb; transition: background .35s ease, width .35s cubic-bezier(.2,.7,.3,1); } .shot-dots span.is-on { width: 34px; background: var(--accent); } /* ---------- slot: de uitnodiging + de voettekst ---------- Contact en voettekst zitten samen in .closing. Ze horen bij elkaar: het is de afsluiting van de pagina. De opbouw van de onderkant is bewust simpel gehouden: - het dienstensegment vervaagt aan beide kanten in de paginakleur, dus er staat nergens nog een harde rand tussen donker en licht; - de uitnodiging staat op het licht; - daaronder loopt één verloop van licht naar de ruimte, dat gewoon doorloopt tot achter de voettekst; - de pagina stopt op de regel met het BTW-nummer. Daaronder komt niets meer: geen eindstrook, geen lijn, geen extra ruimte. Er waren hier vijf uitwerkingen om uit te kiezen; deze is gekozen en de rest is weg. Eén weg is makkelijker te onderhouden dan vijf. */ .closing { position: relative; z-index: 2; overflow: hidden; isolation: isolate; /* Twee pixels overlap met het segment erboven. De hoogte van dat segment is zelden een rond aantal beeldpunten; valt de rand midden in een fysieke pixel, dan wordt die rij maar half bedekt en schemert de donkere pagina-achtergrond erdoor als een zwarte haarlijn over de volle breedte — precies boven "Contacteer ons". .closing ligt op z-index 2 en verft die naad dus over. Zie "Drie regels voor overgangen" in README.md. */ margin-top: -2px; padding-top: 98px; /* Van de paginakleur naar de ruimte. De lege eindstrook geeft de voettekst ademruimte, waarna de pagina in de ruimte uitloopt. */ background: linear-gradient(180deg, var(--page) 0%, rgba(231, 239, 248, .98) 10%, rgba(198, 218, 241, .92) 22%, rgba(141, 179, 224, .82) 34%, rgba(74, 124, 187, .65) 46%, rgba(35, 79, 136, .48) 56%, rgba(16, 44, 82, .32) 66%, rgba(10, 28, 53, .14) 78%, rgba(7, 20, 39, 0) 100%); } .site-foot { position: relative; z-index: 1; } .site-foot > * { position: relative; z-index: 1; } /* -- de uitnodiging -- */ .closing-cta { position: relative; z-index: 1; text-align: center; padding-bottom: 140px; } .cta-inner { max-width: 720px; margin: 0 auto; } .closing-cta h2 { font-size: clamp(36px, 4.8vw, 56px); margin-bottom: 20px; } .cta-lead { max-width: 620px; margin: 0 auto 34px; font-size: 18px; line-height: 1.65; color: var(--text); /* donkerder dan de gewone lopende tekst: hier moet het duidelijk staan */ } .cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .btn-lg { padding: 16px 30px; font-size: 16px; } /* -- de voettekst -- De onderste padding is klein met opzet: de pagina stopt net onder de regel met het BTW-nummer. Alles wat daar ooit nog onder stond is weg. */ .site-foot { padding: 40px 0 26px; } /* een zacht donker vlak achter de voettekst, zodat de sterren en de ringen de tekst nooit onleesbaar maken */ .site-foot::before { content: ""; position: absolute; inset: -60px 0 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 15, 30, 0) 0, rgba(5, 15, 30, .40) 70px, rgba(5, 15, 30, .52) 100%); } .foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1.3fr 1fr; gap: 44px; padding-bottom: 46px; border-bottom: 1px solid rgba(186, 212, 236, .18); } .foot-brand .brand { color: #ffffff; margin-bottom: 16px; } .foot-brand p { max-width: 300px; font-size: 14.5px; line-height: 1.6; color: rgba(226, 238, 250, .82); } .foot-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } /* Geen hoofdletters in de voettekst: gewone schrijfwijze leest rustiger en het was uitdrukkelijk gevraagd. De koppen blijven wel herkenbaar door het gewicht en de lichtere kleur. */ .foot-title { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: rgba(214, 230, 246, .72); margin-bottom: 3px; } .foot-links a { font-size: 14.5px; line-height: 1.35; color: rgba(233, 243, 253, .94); text-decoration: none; transition: color .2s ease; } .foot-links a:hover { color: #fff; } .foot-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; letter-spacing: .01em; color: rgba(198, 220, 240, .62); } .foot-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(186, 212, 236, .4); } /* ---------- reveal ---------- */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: .08s; } [data-reveal-delay="2"] { transition-delay: .16s; } [data-reveal-delay="3"] { transition-delay: .24s; } /* ---------- responsief ---------- */ /* Het beeld in de dienstenkaarten schaalt niet meer in stappen: het volgt de breedte van de kaart (zie --sv-scale bij .service-visual). */ @media (max-width: 1080px) { /* HET GEKANTELDE VENSTER WORDT ALLEEN NOG KLEINER. Vanaf hier herschikt het zich niet meer. Het houdt de breedte, de draaiing en de opbouw die het op 1080 px had — 90vw is daar 972 px — en het geheel wordt verkleind met --fit: hoeveel keer 90vw in die 972 px past. Zo staat het scherm op een telefoon nog altijd even schuin, even ver naar rechts en even ver over de donkere band als op een breed scherm, alleen kleiner. De eerste regel is de terugval voor een browser zonder atan2. */ .app-stage { --stage-w: 972px; --fit: tan(atan2(90vw, 972px)); /* de overlap met de donkere band zit binnen de verkleining, dus ze krimpt netjes mee met het venster */ margin-top: -16vh; } .insight-app { grid-template-columns: 170px minmax(0, 1fr); } .insight-main { padding: 16px; } /* het venster is hier smaller: drie kolommen naast elkaar worden te smal. De omzetgrafiek gaat over de volle breedte, de ring en de aandachtslijst komen eronder naast elkaar. */ .insight-row-top { grid-template-columns: minmax(0, 1fr) minmax(200px, .62fr); } .insight-row-top .insight-revenue { grid-column: 1 / -1; } .insight-row-mid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); } .insight-row-low { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); } /* de kaarten worden smaller; het beeld schaalt als geheel mee */ .services { gap: 22px; } .service-body { padding: 22px 22px 24px; } .feature-grid { gap: 48px; } .feature-copy { flex-basis: 42%; } } @media (max-width: 1100px) { /* minder ruimte tussen de tekst en het scherm, zodat de tekstkolom leesbaar blijft voor de secties onder elkaar gaan staan */ .atlas-split { --atlas-gap: 40px; } } @media (max-width: 900px) { /* de Atlas-sectie gaat onder elkaar staan: eerst de tekst, dan het scherm. Het scherm loopt hier niet meer over de vensterrand — daar is de breedte te kostbaar voor. */ .atlas-split { grid-template-columns: 1fr; gap: 40px; } .atlas-copy .section-lead { max-width: none; } .atlas-screen { width: 100%; } .section { padding: 88px 0; } /* twee kolommen worden hier te smal voor de beelden: de kaarten gaan onder elkaar. Het beeld volgt vanzelf de nieuwe kaartbreedte. */ .services { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: repeat(3, 1fr); gap: 34px; } .foot-brand { grid-column: 1 / -1; } /* Atlas: naast elkaar past niet meer, dus gaat het scherm bóven de tekst staan en blijft het daar plakken; de drie teksten scrollen er onderdoor. Het scherm staat hier dus niet meer in het midden van het venster maar onder de navigatiebalk — dat is de enige plek waar het niet in de weg staat van de tekst die eronder doorschuift. */ .features { padding: 80px 0 90px; } .feature-grid { flex-direction: column; gap: 0; } .feature-stage { order: -1; flex: 0 0 auto; width: 100%; /* niet meer één vensterhoogte: het blok is hier zo hoog als het scherm */ height: auto; justify-content: flex-start; top: 62px; z-index: 3; padding: 10px 0 14px; background: #fff; } /* zachte rand, zodat de tekst er netjes onder verdwijnt */ .feature-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px; pointer-events: none; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%); } .shot-deck { height: min(420px, 52vh); } .shot-dots { margin-top: 14px; } /* Ook deze drie vensters herschikken zich niet op een smal scherm: ze houden de opbouw die ze op een tablet hebben (640 px breed) en worden in hun geheel kleiner. Zonder dit kruipt de werkbalk van de planner op een telefoon in elkaar en lopen de datum en de knoppen over elkaar. */ .feature-stage { container-type: inline-size; } .shot > .pw, .shot > .sc { zoom: min(1, tan(atan2(100cqw, 640px))); } .feature-step { min-height: 0; padding: 34px 0 6px; opacity: .45; } .feature-copy { width: 100%; } .feature-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; } } @media (max-width: 760px) { .container, .nav-shell { padding-left: 20px; padding-right: 20px; } /* de ruimte gaat van de balk naar de links zelf (zie hieronder), zodat de balk even hoog blijft maar de aanraakvlakken groter worden */ .nav-shell { padding-top: 14px; padding-bottom: 14px; } /* drie korte links + de knop passen ook op telefoon */ .nav-links { gap: 15px; } /* De ruimte boven en onder de links is er om met een vinger te raken: de tekst is klein, het aanraakvlak niet. De balk wordt er niet hoger van — de knop Contact is nog altijd het hoogste onderdeel. */ .nav-links a { font-size: 14px; padding: 9px 0; } .nav-links .nav-cta { padding-top: 9px; padding-bottom: 9px; } .nav-links .nav-cta { padding: 9px 15px; } .hero { min-height: 92vh; } .hero-shell { padding: 0 20px; } .quick-facts { grid-template-columns: 1fr; gap: 26px 0; margin-top: 24px; } .insight-statement { margin-top: 16px; padding: 24px 0 0; font-size: 18px; text-align: left; } .services { gap: 18px; } .service h3 { font-size: 19px; } .service:hover { transform: none; } /* op telefoon komt er niets omhoog bij aanraking; alles houdt gewoon zijn eigen draaiing */ .service:hover .sv-node, .service:hover .sv-opt, .service:hover .sv-record { transform: none; } .service:hover .sv-scrap-1 { transform: rotate(-13deg); } .service:hover .sv-scrap-2 { transform: rotate(8deg); } .service:hover .sv-scrap-3 { transform: rotate(-5deg); } .service:hover .sv-scrap-4 { transform: rotate(11deg); } .service:hover .sv-scrap-5 { transform: rotate(-9deg); } .service:hover .sv-scrap-6 { transform: rotate(5deg); } .service:hover .sv-chip-left { transform: rotate(-15deg); } .service:hover .sv-chip-right { transform: rotate(15deg); } .service:hover .sv-chip-front { transform: rotate(-2deg); } .service:hover .sv-code { transform: rotate(-2.4deg); } .service:hover .sv-app { transform: rotate(2deg); } .section-dark { padding: 84px 0; } /* het slot: minder ruimte, de knoppen onder elkaar */ .closing-cta { padding-left: 0; padding-right: 0; } .closing { padding-top: 64px; } .closing-cta { padding-bottom: 90px; } .site-foot { padding-bottom: 22px; } .cta-actions { flex-direction: column; align-items: stretch; } .services-more { flex-direction: column; align-items: stretch; gap: 20px; } .services-more .btn { width: 100%; justify-content: center; } .btn-lg { padding: 14px 24px; font-size: 15px; } .btn-row { gap: 14px; } .btn { padding: 12px 20px; font-size: 15px; } .pl-toolbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; } .pl-period { grid-column: 1 / -1; justify-content: center; } /* Atlas op telefoon */ .hero-sub { min-height: 74vh; } .section-intro { padding: 76px 0 82px; } .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 470px) { /* op de smalste toestellen valt de link naar de huidige pagina weg; het logo brengt u toch al terug naar Home */ .nav-links a[aria-current="page"]:not(.nav-cta) { display: none; } .brand span:not(.brand-symbol) { font-size: 16px; } .foot-grid { grid-template-columns: 1fr; } /* Een woord als "Procesautomatisering" past hier niet meer op één regel. Met afbreking (de pagina staat op lang="nl") valt het netjes uiteen in plaats van tegen de rand van de kaart te lopen. Op een breder scherm gebeurt er niets: er valt dan niets af te breken. */ h1, h2, h3 { hyphens: auto; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } /* de vensters in de dienstenkaarten blijven gedraaid staan, maar komen niet meer omhoog bij hover */ .sv-node, .sv-scrap, .sv-chip, .sv-record, .sv-opt, .sv-code, .sv-win { transition: none; } .service:hover .sv-node, .service:hover .sv-opt, .service:hover .sv-record { transform: none; } .service:hover .sv-scrap-1 { transform: rotate(-13deg); } .service:hover .sv-scrap-2 { transform: rotate(8deg); } .service:hover .sv-scrap-3 { transform: rotate(-5deg); } .service:hover .sv-scrap-4 { transform: rotate(11deg); } .service:hover .sv-scrap-5 { transform: rotate(-9deg); } .service:hover .sv-scrap-6 { transform: rotate(5deg); } .service:hover .sv-chip-left { transform: rotate(-15deg); } .service:hover .sv-chip-right { transform: rotate(15deg); } .service:hover .sv-chip-front { transform: rotate(-2deg); } .service:hover .sv-code { transform: rotate(-2.4deg); } .service:hover .sv-app { transform: rotate(2deg); } /* het venster blijft schuin staan, maar draait en beweegt niet meer */ .mp-bar, .mp-person, .pl-btn, .pl-icon-btn, .pl-views b, .pl-type, .pl-card, .pl-seg b, .quick-facts li { transition: none; } .mp-bar:hover, .mp-person:hover, .pl-btn:hover, .pl-icon-btn:hover, .pl-views b:hover, .pl-type:hover, .pl-card:hover, .pl-seg b:hover, .quick-facts li:hover { transform: none; } } /* ================================================================== DE DIENSTENPAGINA (diensten.html) ------------------------------------------------------------------ Eén sectie per dienst: aan de ene kant de tekst, aan de andere het beeld, en elke volgende sectie draait van kant. Dat was uitdrukkelijk gevraagd. De beelden zijn dezelfde als in de kaarten op de homepagina (de .sv-klassen hierboven). Er verandert niets aan die opmaak; ze staan hier alleen in een breder kader en wat lager in het vlak, zodat er ruimte omheen zit. De kaart eromheen draagt bewust de klasse .service: daar hangen de hover-effecten van de onderdelen aan. ================================================================== */ .dienst { position: relative; z-index: 3; background: var(--page); padding: 104px 0; } .dienst + .dienst { border-top: 1px solid var(--line-soft); } .dienst-split { display: grid; /* De beeldkolom heeft een VASTE breedte, geen breukdeel. Het vlak in de kaart is 545 px breed en wordt afgesneden door de rand van de kaart; met een breukdeel hangt die breedte aan het venster en valt er bij elke tussenmaat een stuk van het beeld weg. Nu past het altijd, en de tekst neemt gewoon wat overblijft. */ grid-template-columns: minmax(0, 1fr) minmax(0, 553px); gap: 56px; align-items: center; } /* De kolommen liggen vast; .is-flip wisselt ze om. Met order alleen zou de tekst in de kolom van het beeld belanden en dus de verkeerde breedte krijgen. */ .dienst-copy { grid-column: 1; grid-row: 1; } .dienst-visual { grid-column: 2; grid-row: 1; } /* Bij een omgekeerde sectie wisselen niet alleen de kolommen van plaats maar ook hun breedtes: de vaste maat hoort altijd bij het beeld. */ .dienst.is-flip .dienst-split { grid-template-columns: minmax(0, 553px) minmax(0, 1fr); } .dienst.is-flip .dienst-copy { grid-column: 2; } .dienst.is-flip .dienst-visual { grid-column: 1; } .dienst-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 14px; background: rgba(45, 127, 240, .10); color: var(--accent); } .dienst-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dienst-copy h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.032em; color: var(--atlas-ink); margin-bottom: 18px; } .dienst-text { font-size: 17px; line-height: 1.68; color: var(--text-2); margin-bottom: 26px; } .dienst-copy .tick-list { margin-bottom: 32px; } /* Het beeld: dezelfde kaart als op de homepagina, maar met ruimte rond het vlak zodat het niet tegen de randen plakt. */ .dienst-shot { box-shadow: 0 34px 70px -40px rgba(2, 12, 28, .45), 0 2px 10px -4px rgba(2, 12, 28, .1); border: 1px solid var(--line); } /* de ruimte rond het vlak schaalt mee, zodat het beeld op elke breedte dezelfde marge houdt */ .dienst-shot .service-visual { height: calc((236px + 72px) * var(--sv-scale, 1)); border-radius: 19px; } .dienst-shot .service-visual::after { display: none; } .dienst-shot .sv-stage { top: calc(36px * var(--sv-scale, 1)); } /* ================================================================== DE CONTACTPAGINA (contact.html) ------------------------------------------------------------------ Deze pagina heeft geen enkele lichte sectie: van boven tot onder de ruimte-achtergrond. Het formulier is een kaart die daar bovenop ligt, zoals in de aangeleverde referentie — dus wél een witte kaart, geen wit vlak dat de hele breedte inneemt. Daarom ook: geen overgang naar de paginakleur onder de hero, en de navigatiebalk blijft overal donker (data-nav="dark", zie site.js). ================================================================== */ .hero-contact { min-height: 100vh; align-items: center; padding-top: 132px; padding-bottom: 96px; } /* geen verloop naar wit: er komt geen lichte sectie meer */ .hero-contact::after { display: none; } .contact-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 505px); gap: 72px; align-items: center; } .contact-copy { max-width: 520px; } .contact-copy .hero-title { margin-bottom: 20px; } .contact-copy .hero-lead { max-width: 490px; } /* -- de gegevens -- */ .contact-lines { list-style: none; margin: 38px 0 30px; display: grid; gap: 18px; } .contact-lines li { display: flex; align-items: flex-start; gap: 14px; } .contact-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(186, 212, 236, .12); border: 1px solid rgba(186, 212, 236, .22); color: #a8ccf2; } .contact-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .contact-line-body { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; } .contact-line-body em { font-family: var(--font-mono); font-style: normal; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(186, 212, 236, .66); } .contact-line-body a, .contact-line-body > span { font-size: 16.5px; font-weight: 600; color: #eaf3fd; text-decoration: none; transition: color .2s ease; } .contact-line-body a:hover { color: #8ec2f7; } .contact-client { font-size: 15px; color: rgba(206, 224, 243, .82); } .contact-client a { display: inline-flex; align-items: center; color: #8ec2f7; font-weight: 600; text-decoration: none; } .contact-client a:hover { color: #b7d9fc; } .contact-client .btn-ext { width: 14px; height: 14px; margin-left: 6px; opacity: .8; } .contact-legal { margin-top: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(186, 212, 236, .48); } /* -- de kaart met het formulier -- */ .contact-card { background: var(--surface); border-radius: 24px; padding: 34px 32px 30px; /* een diepe schaduw: de kaart moet duidelijk bóven de ruimte liggen */ box-shadow: 0 50px 100px -40px rgba(2, 10, 26, .85), 0 12px 34px -18px rgba(2, 10, 26, .6); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .field-wide { grid-column: 1 / -1; } .field-label { font-size: 13px; font-weight: 600; color: var(--atlas-ink); } .required-mark { color: #c93f3f; } .field-label i { font-style: normal; font-weight: 500; color: var(--muted); } .contact-card input, .contact-card select, .contact-card textarea { width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--text); background: #f5f8fc; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .contact-card textarea { resize: vertical; min-height: 118px; line-height: 1.55; } .contact-card input::placeholder, .contact-card textarea::placeholder { color: #9fb0c3; } .contact-card input:focus, .contact-card select:focus, .contact-card textarea:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 127, 240, .16); } /* De keuzelijst krijgt een eigen pijltje, zodat ze er op elk systeem hetzelfde uitziet als de andere velden. */ .field-select { position: relative; display: block; } .contact-card select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; } .field-select svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .form-send { width: 100%; margin-top: 24px; border: 0; cursor: pointer; font-family: var(--font-body); } .form-send:disabled { cursor: wait; opacity: .68; } .form-botcheck { display: none; } /* De regel die na het versturen verschijnt: er is nog geen adres om het formulier naartoe te sturen. */ .form-note { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(45, 127, 240, .07); border: 1px solid rgba(45, 127, 240, .18); font-size: 14px; line-height: 1.55; color: var(--text-2); } .form-note a { color: var(--accent); font-weight: 600; } .form-note.is-success { background: rgba(31, 143, 95, .08); border-color: rgba(31, 143, 95, .24); color: #176b49; } .form-note.is-error { background: rgba(190, 54, 54, .07); border-color: rgba(190, 54, 54, .22); color: #8f2f2f; } /* -- het slot zonder uitnodiging -- Op de contactpagina staat alleen de voettekst. Geen verloop van licht naar de ruimte: er ís geen licht om vandaan te komen. */ .closing-bare { background: none; margin-top: 0; padding-top: 24px; } /* Eén achtergrond op deze pagina, niet twee. Elders ligt er een donker vlak achter de voettekst omdat die op een lichte pagina staat en de tekst wit is. Hier staat de hele pagina al op de ruimte: datzelfde vlak tekende dan een tweede, donkerdere band onder het formulier — met een harde bovenrand, want .closing snijdt met overflow: hidden het bovenste stuk van de vervaging weg. Zonder dat vlak loopt de ruimte gewoon door tot onderaan. */ .closing-bare .site-foot::before { display: none; } /* ---------- breedtes voor de twee nieuwe pagina's ---------- */ @media (max-width: 1120px) { /* de tekstkolom wordt hier te smal naast een vast vlak van 553 px; vanaf hier krimpt het beeld mee */ .dienst-split { gap: 44px; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); } .dienst.is-flip .dienst-split { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); } .contact-shell { gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); } } @media (max-width: 960px) { /* Onder elkaar: eerst de tekst, dan het beeld — ook in de omgekeerde secties, anders begint een sectie met een beeld zonder uitleg. Het beeld heeft dan de volle containerbreedte en past weer op ware grootte. */ .dienst-split, .dienst.is-flip .dienst-split { grid-template-columns: 1fr; gap: 40px; } .dienst-copy, .dienst.is-flip .dienst-copy { grid-column: 1; grid-row: 1; } .dienst-visual, .dienst.is-flip .dienst-visual { grid-column: 1; grid-row: 2; } .dienst-visual { max-width: 640px; } .dienst { padding: 82px 0; } .contact-shell { grid-template-columns: 1fr; gap: 44px; } .contact-copy { max-width: 640px; } .hero-contact { min-height: 0; padding-top: 124px; padding-bottom: 72px; } } @media (max-width: 620px) { .contact-card { padding: 26px 22px 24px; } .form-grid { grid-template-columns: 1fr; } .contact-lines { margin: 30px 0 26px; } } /* ================================================================== HET ATLAS-MERK OP DE SITE ------------------------------------------------------------------ De logobestanden komen uit de Atlas-huisstijl zelf (assets/logos/). Twee versies, en welke u gebruikt hangt af van de ondergrond: atlas-logo-full.svg kompasroos + woordmerk in blauw verloop, voor lichte vlakken atlas-logo-full-white.svg dezelfde vorm in wit, voor de donkere band atlas-appicon.svg het icoon in een afgerond vierkant Het bestand is 4059 x 1296; de hoogte wordt gezet, de breedte volgt. ================================================================== */ .atlas-wordmark { display: block; height: 46px; width: auto; max-width: 100%; } /* in de donkere hero staat het merk boven de titel */ .hero-inner .atlas-wordmark { height: 40px; margin-bottom: 26px; } /* In de Atlas-sectie op de homepagina vervángt het logo de tekst "Atlas". De h2 blijft staan voor de opbouw van de pagina; de alt-tekst van de afbeelding levert het woord. */ .atlas-title { margin-bottom: 20px; line-height: 0; } .atlas-title .atlas-wordmark { height: 52px; } /* ================================================================== DE ATLAS-PAGINA: voor wie, en de afsluitende balk ================================================================== */ /* -- voor wie Atlas gemaakt is -- */ .who-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 8px; } .who { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 20px 44px -34px rgba(2, 12, 28, .4); } .who-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; background: rgba(45, 127, 240, .10); color: var(--accent); } .who-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .who strong { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; color: var(--atlas-ink); } .who > span:last-child { font-size: 14.5px; line-height: 1.6; color: var(--text-2); } /* -- de afsluitende balk van het productverhaal -- De kaart stond met padding-top: 0 tegen de onderrand van het witte scrollgedeelte aan geplakt; de kleurwissel liep dan pal langs de bovenrand van de kaart. Ze krijgt weer gewone ruimte boven zich. */ .atlas-strip { padding-top: 96px; } .strip-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 30px; padding: 34px 38px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(135deg, #ffffff 0%, #eef4fb 100%); box-shadow: 0 30px 60px -40px rgba(2, 12, 28, .45); } .strip-mark { width: 62px; height: 62px; border-radius: 14px; box-shadow: 0 12px 26px -14px rgba(6, 48, 79, .7); } .strip-copy h2 { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.028em; color: var(--atlas-ink); margin-bottom: 8px; } .strip-copy p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 620px; } .strip-actions { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 1080px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip-card { grid-template-columns: auto minmax(0, 1fr); row-gap: 24px; } .strip-actions { grid-column: 1 / -1; } } @media (max-width: 620px) { .who-grid { grid-template-columns: 1fr; } .strip-card { grid-template-columns: 1fr; padding: 28px 24px; text-align: left; } .strip-actions { grid-column: auto; } .atlas-title .atlas-wordmark { height: 40px; } .hero-inner .atlas-wordmark { height: 32px; margin-bottom: 20px; } } /* De Contact-knop op de contactpagina zelf. Zonder deze regel wint de kleur van a[aria-current="page"] (wit) van die van .nav-cta, en staat er witte tekst op een witte knop. */ .nav-links .nav-cta[aria-current="page"] { color: var(--atlas-ink); } .site-nav.scrolled .nav-links .nav-cta[aria-current="page"] { color: #fff; } /* Op de contactpagina is de huidige pagina de knop zelf, dus daar valt de link naar de huidige pagina niet weg en blijft de balk één item langer dan elders. Vandaar een compactere balk. Er is geen hamburgermenu: alle bestemmingen blijven gewoon zichtbaar. */ @media (max-width: 470px) { .nav-shell { padding: 16px 14px; gap: 12px; } .nav-links { gap: 11px; } .nav-links a { font-size: 13px; } .nav-links .nav-cta { padding: 8px 12px; } .brand { gap: 8px; } /* Staat de knop Contact op de huidige pagina, dan valt in plaats daarvan Home weg — het logo brengt u daar toch al naartoe. Zonder dit stonden er op de contactpagina vier items naast het woordmerk en brak de balk. */ .nav-links:has(.nav-cta[aria-current="page"]) a[href="index.html"] { display: none; } } /* De smalste toestellen (320 px). Alles blijft staan — het woordmerk, de twee links en de knop — maar alles wordt een maat krapper, zodat de knop Contact niet meer tegen de rand loopt. */ @media (max-width: 360px) { .nav-shell { padding: 15px 12px; gap: 8px; } .brand { gap: 7px; } .brand span:not(.brand-symbol) { font-size: 15.5px; } .brand-symbol { width: 24px; height: 24px; } .nav-links { gap: 9px; } .nav-links a { font-size: 12.5px; } .nav-links .nav-cta { padding: 8px 11px; } /* naast het icoon blijft er te weinig over voor "Procesautomatisering" */ .service h3 { font-size: 17px; } }