/* 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; } 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; } /* ---------- 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; 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 bij te regelen zijn met het instellingenpaneel (assets/fx-lab.js). --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; position: relative; /* houvast voor het effect erachter */ 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%; width: 100vw; 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; } /* planning-raster (nog in gebruik op de Atlas-pagina, .plan-shot) */ .plan { --cols: 14; font-size: 12px; overflow: hidden; } .plan-head, .plan-row { display: grid; grid-template-columns: 190px 96px 1fr; align-items: center; } .plan-head { padding: 0 0 0 0; border-bottom: 1px solid var(--line); background: #fbfdff; } .plan-col-task, .plan-col-person { padding: 9px 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .plan-col-person { border-left: 1px solid var(--line-soft); } .plan-days { display: grid; grid-template-columns: repeat(var(--cols), 1fr); } .plan-days > b { position: relative; min-height: 30px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--line-soft); font-weight: 600; font-size: 11.5px; color: var(--text-2); } .plan-head .plan-days > b { flex-direction: column; gap: 1px; padding: 6px 0; } .plan-days > b > i { font-style: normal; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .plan-days > b.we { background: #fdfbf4; } .plan-days > b.today { background: #eef5fe; } .plan-head .plan-days > b.today { box-shadow: inset 0 -2px 0 var(--atlas-blue); color: var(--atlas-blue); } .plan-group { border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 190px 1fr; } .plan-group:last-child { border-bottom: 0; } .plan-task { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line-soft); } .plan-task strong { font-size: 13px; font-weight: 600; color: var(--atlas-ink); } .plan-task em { font-style: normal; font-size: 11.5px; color: var(--muted); } .tag { width: 9px; height: 9px; border-radius: 3px; margin-bottom: 4px; display: inline-block; } .tag-blue { background: var(--atlas-blue); } .tag-green { background: var(--atlas-green); } .tag-amber { background: var(--atlas-amber); } .plan-rows { min-width: 0; } .plan-row { grid-template-columns: 96px 1fr; border-top: 1px solid var(--line-soft); } .plan-rows .plan-row:first-child { border-top: 0; } .who { padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--text-2); } .bar { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--atlas-blue); color: #fff; font-size: 10.5px; font-weight: 600; text-decoration: none; box-shadow: 0 1px 3px rgba(45, 127, 240, .35); } .bar-green { background: var(--atlas-green); box-shadow: 0 1px 3px rgba(31, 143, 95, .35); } .bar-amber { background: #fdf3e5; color: var(--atlas-amber); box-shadow: none; border: 1px solid #f0dcc0; } /* 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; 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 */ zoom: .74; /* Onder deze breedte past de werkbalk niet meer op één regel — ook niet in de compacte vorm hieronder. Het scherm wordt dan niet verder smaller: het kader (overflow: hidden) snijdt rechts een stuk van de vrijdagkolom af, zoals bij een venster dat te smal staat. */ 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; 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; --sv-scale wordt onderaan per schermbreedte gezet. Zo hoeven de onderdelen zelf nooit verplaatst te worden. */ 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); } /* statuspil, nog in gebruik in de taakschermen op de Atlas-pagina */ .mini-state { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-soft); color: var(--text-2); white-space: nowrap; } .mini-state.is-done { background: #e6f5ed; color: var(--atlas-green); } .mini-state.is-busy { background: #e8f1fd; color: var(--atlas-blue); } .mini-state.is-wait { background: #fdf3e5; color: var(--atlas-amber); } /* ============================================================ 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; } /* ---------- drie functies: tekst scrolt, scherm blijft plakken ---------- */ .features { background: #fff; padding: 104px 0 80px; } /* 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: 104px; } /* elke stap is zo hoog dat er rustig doorheen gescrold kan worden */ .feature-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: .32; transition: opacity .45s ease; } .feature-step.is-on { opacity: 1; } /* de laatste stap mag korter: eronder komt het slot al */ .feature-step:last-child { min-height: 64vh; padding-bottom: 0; } .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 vaste scherm rechts: alle drie de opnames liggen op elkaar, alleen de actieve is zichtbaar */ /* het kader krijgt de hoogte van het grootste scherm, en krimpt mee met lage vensters tot er niets meer weggesneden wordt */ .shot-deck { position: relative; height: clamp(530px, calc(100vh - 200px), 560px); } /* het vertrekkende scherm verdwijnt eerst, het nieuwe komt er net na: zo staan er nooit twee schermen half over elkaar */ .shot { position: absolute; inset: 0; opacity: 0; transform: translateY(12px) scale(.99); transition: opacity .18s ease, transform .18s ease; pointer-events: none; } .shot.is-on { opacity: 1; transform: none; transition: opacity .34s ease .16s, transform .42s cubic-bezier(.2,.7,.3,1) .16s; } .shot-frame { height: 100%; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid rgba(215, 225, 234, .9); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; } .shot-bar { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); flex: 0 0 auto; } .shot-body { flex: 1 1 auto; min-height: 0; overflow: hidden; } .shot-body-pad { padding: 20px 22px; } .shot-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fbfdff; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--text-2); flex: 0 0 auto; } .shot-foot strong { color: var(--atlas-ink); } /* het planningsraster staat hier in een smallere kolom */ .plan-shot { --cols: 10; font-size: 11.5px; } .plan-shot .plan-head, .plan-shot .plan-row { grid-template-columns: 158px 82px 1fr; } .plan-shot .plan-group { grid-template-columns: 158px 1fr; } .plan-shot .plan-row { grid-template-columns: 82px 1fr; } .plan-shot .plan-task { padding: 10px 12px; } .plan-shot .plan-task strong { font-size: 12.5px; } /* takenlijst */ .tl { font-size: 12.5px; } .tl-head, .tl-row { display: grid; grid-template-columns: 1fr 78px 40px 108px; align-items: center; gap: 10px; padding: 11px 16px; } .tl-head { padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--line); background: #fbfdff; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .tl-head, .tl-row { padding-top: 10px; padding-bottom: 10px; } .tl-row { border-bottom: 1px solid var(--line-soft); } .tl-row:last-child { border-bottom: 0; } .tl-main { display: flex; align-items: center; gap: 10px; min-width: 0; } .tl-main .tag { margin: 0; flex: 0 0 auto; } .tl-main strong { display: block; font-size: 13px; font-weight: 600; color: var(--atlas-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-main em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-who { font-size: 12.5px; font-weight: 600; color: var(--text-2); } .tl-hours { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); } .tl-row .mini-state { justify-self: start; } .mini-state.is-check { background: #eef1f7; color: #4a5d86; } /* projectdossier */ .pr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); } .pr-client { font-size: 12px; color: var(--muted); margin-bottom: 4px; } .pr-head h4 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.025em; color: var(--atlas-ink); } .pr-bar { margin: 16px 0 17px; } .pr-bar-line { height: 8px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; } .pr-bar-line span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--atlas-deep), var(--atlas-blue)); } .pr-bar-legend { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); } .pr-bar-legend strong { font-size: 13px; color: var(--atlas-ink); } .pr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; } .pr-stats div { padding: 12px 12px 11px; border-radius: 12px; background: #f7fafd; border: 1px solid var(--line-soft); } .pr-stats span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; } .pr-stats strong { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--atlas-ink); } .pr-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .pr-phases { display: flex; flex-direction: column; gap: 2px; } .pr-phase { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; background: #fbfdff; border: 1px solid var(--line-soft); } .pr-phase strong { font-size: 13px; font-weight: 600; color: var(--atlas-ink); } .pr-phase em { font-style: normal; font-size: 11.5px; color: var(--muted); } .pr-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #cfdae6; } .pr-phase.is-done .pr-dot { background: var(--atlas-green); border-color: var(--atlas-green); } .pr-phase.is-busy .pr-dot { background: var(--atlas-blue); border-color: var(--atlas-blue); box-shadow: 0 0 0 4px rgba(45, 127, 240, .14); } .pr-foot { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line-soft); } .pr-files { font-size: 12px; color: var(--muted); } /* bolletjes onder het scherm */ .shot-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .shot-dots span { width: 7px; height: 7px; border-radius: 50%; background: #d3dfeb; transition: background .35s ease, transform .35s ease; } .shot-dots span.is-on { background: var(--accent); transform: scale(1.25); } /* ---------- 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; - onder de voettekst zorgt een lege eindstrook voor ademruimte, met daarin een dunne lichte lijn; daaronder loopt de pagina gewoon door in de ruimte, zonder lichte rand aan de onderkant. 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 { --closing-end-height: 104px; 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 -- */ .site-foot { padding: 40px 0 30px; } /* 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; } .foot-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; 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: 26px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(198, 220, 240, .62); } .foot-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(186, 212, 236, .4); } /* -- het eindpunt -- De lege strook laat de voettekst uitademen voor de lichte onderrand van het volledige slot het contactsegment definitief afsluit. */ .closing-end { position: relative; z-index: 1; height: var(--closing-end-height); display: flex; align-items: center; } .closing-end span { display: block; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(186, 212, 236, 0) 0%, rgba(186, 212, 236, .20) 14%, rgba(220, 235, 248, .62) 50%, rgba(186, 212, 236, .20) 86%, rgba(186, 212, 236, 0) 100%); } /* ---------- 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 in stappen mee met de kaart. De waarde is telkens net iets kleiner dan kaartbreedte / 545, zodat er niets afgesneden wordt. Onder 900px staan de kaarten onder elkaar en is er weer ruimte zat; pas op een telefoon wordt er links en rechts wat weggesneden. */ @media (max-width: 1179px) { .service-visual { --sv-scale: .90; } } @media (max-width: 1080px) { /* minder scheef (zie hieronder), dus ook minder scheeftrekking om te compenseren */ .app-stage { margin-top: -16vh; --stage-shift: .015; } /* minder scheef: het venster is hier al smaller */ .app-frame { --frame-rx: 16deg; --frame-rz: -6deg; } .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; } .service-visual { --sv-scale: .82; } .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: 1010px) { /* Vanaf hier wordt de kolom van het scherm smaller dan de minimumbreedte van de planner. Een smallere personenkolom en een lagere ondergrens houden de vrijdagkolom volledig in beeld tot de secties bij 900 px onder elkaar gaan staan. */ .pw { --pw-roster: 150px; min-width: 640px; } } @media (max-width: 984px) { .service-visual { --sv-scale: .74; } } @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%; } /* een smallere personenkolom laat meer van de week zien */ .pw { --pw-roster: 148px; } .section { padding: 88px 0; } /* twee kolommen worden hier te smal voor de beelden: de kaarten gaan onder elkaar en het beeld mag weer op ware grootte */ .services { grid-template-columns: 1fr; } .service-visual { --sv-scale: 1; } .foot-grid { grid-template-columns: repeat(3, 1fr); gap: 34px; } .foot-brand { grid-column: 1 / -1; } /* de zijbalk In te plannen valt weg; enkel het maandraster blijft */ .pl-page { grid-template-columns: minmax(0, 1fr); } .pl-backlog { display: none; } .insight-app { grid-template-columns: minmax(0, 1fr); } .insight-nav { display: none; } /* op een smal scherm is alleen het bovenste deel van het dashboard nog zichtbaar; de onderste rij laten staan zou het venster (en dus de hele sectie) alleen maar onnodig hoger maken */ .insight-row-low { display: none; } .insight-row-mid { margin-bottom: 0; } /* vanaf hier staat het venster recht: schuin zetten kost te veel breedte. Zonder draaiing is er ook niets meer scheef te trekken. */ .app-stage { perspective: none; --stage-shift: 0; } .app-frame, .app-stage:hover .app-frame { transform: none; } .app-aura { transform: none; } .mp-roster { flex-basis: 158px; } .plan-head, .plan-row { grid-template-columns: 150px 84px 1fr; } .plan-group { grid-template-columns: 150px 1fr; } .plan-row { grid-template-columns: 84px 1fr; } /* Atlas: het scherm gaat boven de tekst staan en blijft daar plakken, de drie teksten scrollen er onderdoor. */ .features { padding: 80px 0 90px; } .feature-grid { flex-direction: column; gap: 0; } .feature-stage { order: -1; flex: 0 0 auto; width: 100%; 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; } /* op een smal scherm tonen we een kortere versie van elk venster, zodat het kader onderaan niet halverwege een rij afgesneden wordt */ .plan-shot > .plan-group:nth-child(n+5) { display: none; } .tl > .tl-row:nth-child(n+6) { display: none; } .pr-foot { display: none; } .pr-head { padding-bottom: 13px; } .pr-bar { margin: 13px 0 14px; } .pr-stats { gap: 7px; margin-bottom: 15px; } .pr-stats div { padding: 9px 9px 8px; } .pr-stats strong { font-size: 17px; } .pr-title { margin-bottom: 8px; } .pr-phase { padding: 8px 11px; } .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; } .plan-shot .plan-head, .plan-shot .plan-row { grid-template-columns: 132px 76px 1fr; } .plan-shot .plan-group { grid-template-columns: 132px 1fr; } .plan-shot .plan-row { grid-template-columns: 76px 1fr; } } @media (max-width: 760px) { .container, .nav-shell { padding-left: 20px; padding-right: 20px; } /* drie korte links + de knop passen ook op telefoon */ .nav-links { gap: 15px; } .nav-links a { font-size: 14px; } .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; } .app-stage { margin-top: -12vh; } .app-frame { border-radius: 14px; } /* De preview blijft een datadicht desktopscherm. Op telefoon wordt de minst belangrijke rechterrand rustig afgesneden, zoals bij Atlas. */ .insight-app { min-width: 690px; min-height: 650px; } .insight-main { padding: 14px; } .insight-metrics { gap: 8px; } .insight-row { gap: 8px; } .insight-statement { margin-top: 16px; padding: 24px 0 0; font-size: 18px; text-align: left; } /* op telefoon een smallere namenkolom; de maand loopt rechts uit beeld */ .mp-roster { flex-basis: 124px; } .mp-person { padding-left: 10px; gap: 7px; } .mp-person .mp-ava { display: none; } .mp-corner { padding: 0 10px; font-size: 9.5px; } /* op telefoon: het beeld verkleint mee, maar niet eindeloos — anders wordt de tekst erin onleesbaar. Links en rechts valt er dan wat weg. */ .services { gap: 18px; } .service-visual { --sv-scale: .88; } .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 { --closing-end-height: 76px; padding-top: 64px; } .closing-cta { padding-bottom: 90px; } .site-foot { padding-bottom: 26px; } .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; } /* op telefoon tonen we een kortere week, anders worden de dagen te smal */ .plan { font-size: 11px; --cols: 8; } .plan-days > b:nth-child(n+9) { display: none; } .plan-head, .plan-row, .plan-group { grid-template-columns: 118px 1fr; } .plan-col-person, .who { display: none; } .bar { min-width: 22px; height: 17px; padding: 0 5px; font-size: 9.5px; } .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; } .plan-shot .plan-head, .plan-shot .plan-row, .plan-shot .plan-group { grid-template-columns: 112px 1fr; } .plan-shot .plan-row { grid-template-columns: 1fr; } .tl-head, .tl-row { grid-template-columns: 1fr 44px 96px; padding-left: 12px; padding-right: 12px; } .tl-head span:nth-child(2), .tl-who { display: none; } .plan-shot > .plan-group:nth-child(n+4) { display: none; } .tl > .tl-row:nth-child(n+5) { display: none; } .tl-row { padding-top: 8px; padding-bottom: 8px; } /* de vier cijfers blijven naast elkaar, maar compacter */ .pr-head { padding-bottom: 12px; } .pr-head h4 { font-size: 18px; } .pr-bar { margin: 12px 0 12px; } .pr-stats { gap: 5px; margin-bottom: 14px; } .pr-stats div { padding: 8px 7px 7px; border-radius: 9px; } .pr-stats span { font-size: 10px; margin-bottom: 2px; } .pr-stats strong { font-size: 15px; } .pr-title { margin-bottom: 8px; } .pr-phase { padding: 7px 10px; } .shot-body-pad { padding: 15px; } .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .service-visual { --sv-scale: .78; } } @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; } .service-visual { --sv-scale: .66; } } @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); } .dienst-shot .service-visual { height: calc(236px * var(--sv-scale, 1) + 72px); border-radius: 19px; } .dienst-shot .service-visual::after { display: none; } .dienst-shot .sv-stage { top: 36px; } /* ================================================================== 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; } /* ---------- 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); } .dienst-shot .service-visual { --sv-scale: .90; } .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-shot .service-visual { --sv-scale: 1; } .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; } } /* gestapeld krimpt het beeld pas mee zodra de container zelf te smal wordt voor het vlak van 545 px */ @media (max-width: 700px) { .dienst-shot .service-visual { --sv-scale: .84; } } @media (max-width: 620px) { .contact-card { padding: 26px 22px 24px; } .form-grid { grid-template-columns: 1fr; } .contact-lines { margin: 30px 0 26px; } } @media (max-width: 560px) { .dienst-shot .service-visual { --sv-scale: .72; } } @media (max-width: 470px) { .dienst-shot .service-visual { --sv-scale: .60; } } @media (max-width: 400px) { .dienst-shot .service-visual { --sv-scale: .50; } } /* ================================================================== 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 -- */ .atlas-strip { padding-top: 0; } .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 er onder 470 px geen link weg en blijft de balk één item langer dan elders. Vandaar een compactere balk in plaats van nog een link verbergen: alle vier de bestemmingen blijven bereikbaar. */ @media (max-width: 470px) { .nav-shell { padding: 16px 14px; } .nav-links { gap: 11px; } .nav-links a { font-size: 13px; } .nav-links .nav-cta { padding: 8px 12px; } .brand { gap: 8px; } }