/* ============================================================ AImplement.io, design system PP Editorial New (display) / PP Neue Montreal (UI & body) Ink / bone, hairline rules, mono system labels. ============================================================ */ /* Urbanist, single family carries display + UI + body (RonDesignLab direction) */ @font-face{ font-family:"Urbanist"; src:url("../fonts/Urbanist-Light.woff2") format("woff2"); font-weight:300;font-style:normal;font-display:swap; } @font-face{ font-family:"Urbanist"; src:url("../fonts/Urbanist-Regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Urbanist"; src:url("../fonts/Urbanist-Medium.woff2") format("woff2"); font-weight:500;font-style:normal;font-display:swap; } @font-face{ font-family:"Urbanist"; src:url("../fonts/Urbanist-SemiBold.woff2") format("woff2"); font-weight:600;font-style:normal;font-display:swap; } /* Geist Mono, de tweede stem: alleen microtypografie (eyebrows, labels, metadata, sectienummers, statussen, afleeswaarden). Urbanist is een zachte geometrische letter; een mono met eigen karakter (DM Mono, Space Mono) gaat daar mee wedijveren in plaats van hem aanvullen. Geist Mono is een neutrale grotesk-mono met egale kleur, dus het contrast zit in de functie en niet in de vorm. Variabel bestand, latin en latin-ext apart zodat de browser de tweede alleen haalt als de pagina hem nodig heeft. */ @font-face{ font-family:"Geist Mono"; src:url("../fonts/geistmono-latin.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Geist Mono"; src:url("../fonts/geistmono-latin-ext.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* DM Sans draagt display, UI en body. Eén variabel bestand draagt alle gewichten, dus dit kost twee requests van samen 55 kB. De unicode-range laat de browser het latin-ext-bestand alleen halen als de pagina het nodig heeft. */ @font-face{ font-family:"DM Sans"; src:url("../fonts/DMSans-Variable.woff2") format("woff2"); font-weight:100 1000;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"DM Sans"; src:url("../fonts/DMSans-Variable-ext.woff2") format("woff2"); font-weight:100 1000;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ --ink-0:#09090b; --ink-1:#0f0f13; --ink-2:#15151b; --line-d:rgba(255,255,255,.09); --line-d2:rgba(255,255,255,.16); --bone-0:#f4f3ef; --bone-1:#fbfaf7; --line-l:rgba(15,15,19,.10); --line-l2:rgba(15,15,19,.18); --tx-hi:#f2f1ed; --tx-mid:#a3a3ac; /* #6d6d76 gaf contrast 3,88 op --ink-0, onder de WCAG-AA-norm van 4,5. Dat raakte elke eyebrow, elk bijschrift en elke kleine noot op de hele site. #82828d geeft 5,24 en houdt dezelfde koele tint. */ --tx-dim:#82828d; --tx-ink:#141418; /* Was #585862: bedoeld voor lichte secties, maar die bestaan sinds de reskin nergens meer in de HTML. Hij landde dus altijd op zwart, met contrast 2,83. #9a9aa4 geeft 7,08 en blijft net onder --tx-mid, dus de hiërarchie blijft. */ --tx-ink-mid:#9a9aa4; /* --- Sakura vervangt amber (#d8a866). Eén tint, twee dieptes: de lichte voor inkt-vlakken (contrast 7,0), de diepe voor bone-vlakken (5,5), want sakura zelf haalt op bone maar 2,5 en mag daar dus geen tekst dragen. --accent blijft bestaan als alias, zodat de 82 bestaande verwijzingen op alle 30 pagina's meebewegen zonder search-and-replace. --- */ --sakura:#d97f97; --sakura-deep:#ad3454; --sakura-soft:rgba(217,127,151,.14); --sakura-line:rgba(217,127,151,.45); --sakura-glow:rgba(217,127,151,.34); --accent:var(--sakura); --accent-soft:var(--sakura-soft); --live:#3ecf8e; --warn:#e4b45c; /* Twee stemmen. Urbanist draagt koppen én lopende tekst, Geist Mono alleen de labels. */ --font-display:"Urbanist","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif; --font-sans:"Urbanist","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif; /* Microtypografie. --font-mono is de historische naam en blijft als alias staan; alles wat eyebrow/label/metadata is hangt eraan, dus dit ene token draagt DM Mono over de hele site. Zet je hem terug op DM Sans, dan is de hele site één familie en verdwijnt het verschil tussen de grote en de kleine stem; dat is precies wat deze regel voorkomt. */ --font-micro:"Geist Mono","SFMono-Regular",ui-monospace,Menlo,monospace; --font-mono:var(--font-micro); --micro-track:.08em; /* getrackte kapitalen; een mono zet zelf al ruimte tussen de letters, dus 0,13 liep de kolom uit */ --micro-track-sm:.09em; --w-max:1240px; --w-copy:660px; --pad-x:clamp(20px,5.5vw,56px); --sec-y:clamp(100px,14vw,190px); /* Straal omlaag: 20/14/8 leest als SaaS-kaart, 10/6/3 leest als paneel op een instrument. Knoppen blijven bewust pill (999px), dat is de warme kant. */ --r-sm:3px; --r-md:6px; --r-lg:10px; --r-plate:4px; --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); /* DE LIJN, bewegingstokens. Werk reist met één snelheid door het systeem; alles wat sneller is dan --t-travel is een reactie, niet een verplaatsing. */ --ease-line:cubic-bezier(.4,0,.2,1); --t-fast:.18s; --t-mid:.34s; --t-slow:.7s; --t-travel:9s; /* DE LIJN, vormtokens */ --hair:1px; --lane-gap:44px; --node-r:7px; --gate-r:9px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} body{ font-family:var(--font-sans); background:var(--ink-0); color:var(--tx-hi); font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } ::selection{background:var(--accent);color:#fff} img,svg,canvas{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{list-style:none} strong{font-weight:600} /* --- grain overlay (subtle, static, cheap) --- */ .grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:2000;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); } /* --- typography --- */ .display{ font-family:var(--font-display);font-weight:300;letter-spacing:-.022em;line-height:1.08; font-size:clamp(2.1rem,4.6vw,4rem); text-wrap:balance; } h1.display{font-size:clamp(2.3rem,5vw,4.5rem)} .h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.012em;line-height:1.1;font-size:clamp(1.65rem,3.2vw,2.6rem);text-wrap:balance} .h3{font-family:var(--font-sans);font-weight:500;letter-spacing:-.01em;line-height:1.25;font-size:clamp(1.2rem,2.1vw,1.5rem)} .lede{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.62;color:var(--tx-mid);max-width:var(--w-copy);text-wrap:pretty} .sec-light .lede{color:var(--tx-ink-mid)} p{max-width:var(--w-copy)} .eyebrow{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--tx-dim);display:flex;align-items:center;gap:.7em;margin-bottom:1.7rem; } .sec-light .eyebrow{color:var(--tx-ink-mid)} .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.5} .eyebrow .idx{color:var(--accent)} .mono{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em} .dot-live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 8px rgba(62,207,142,.7);margin-right:.5em;vertical-align:1px} /* --- layout --- */ .wrap{max-width:var(--w-max);margin:0 auto;padding-inline:var(--pad-x)} section{position:relative} .sec-dark,.sec-dark-1,.page-hero,.footer,.hero{position:relative;overflow:hidden} section>.wrap,.footer>.wrap{position:relative;z-index:2} .stars{position:absolute;inset:0;z-index:0;pointer-events:none;display:none} .sec{padding-block:var(--sec-y)} .sec-dark{background:var(--ink-0);color:var(--tx-hi)} .sec-dark-1{background:var(--ink-0);color:var(--tx-hi)} .sec-light{background:var(--bone-0);color:var(--tx-ink)} .sec-light-1{background:var(--bone-1);color:var(--tx-ink)} .rule{height:1px;background:var(--line-d);border:0} .sec-light .rule,.sec-light-1 .rule{background:var(--line-l)} .sec-head{margin-bottom:clamp(52px,7vw,96px)} .sec-head .h2{margin-bottom:1.3rem;max-width:17ch} #what-h{max-width:var(--w-copy)} .sec-head--row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between} /* --- buttons --- */ .btn{ display:inline-flex;align-items:center;gap:.6em; font-weight:500;font-size:.95rem;letter-spacing:.01em; padding:.95em 1.6em;border-radius:999px; transition:transform .35s var(--ease-out),background .25s,color .25s,border-color .25s,box-shadow .35s; will-change:transform;white-space:nowrap; } .btn .arr{transition:transform .3s var(--ease-out)} .btn:hover .arr{transform:translateX(3px)} .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .btn-primary{background:var(--tx-hi);color:var(--ink-0)} .btn-primary:hover{background:#fff;box-shadow:0 8px 32px rgba(255,255,255,.12)} .sec-light .btn-primary,.sec-light-1 .btn-primary{background:var(--tx-ink);color:#fff} .sec-light .btn-primary:hover,.sec-light-1 .btn-primary:hover{box-shadow:0 10px 30px rgba(15,15,19,.22)} .btn-ghost{border:1px solid var(--line-d2);color:var(--tx-hi)} .btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)} .sec-light .btn-ghost,.sec-light-1 .btn-ghost{border-color:var(--line-l2);color:var(--tx-ink)} .sec-light .btn-ghost:hover,.sec-light-1 .btn-ghost:hover{background:rgba(15,15,19,.05);border-color:rgba(15,15,19,.4)} .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .cta-note{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--tx-dim);margin-top:14px} .sec-light .cta-note{color:var(--tx-ink-mid)} /* --- text link --- */ .tlink{position:relative;font-weight:500;color:inherit} .tlink::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(.35);transform-origin:left;opacity:.4;transition:transform .35s var(--ease-out),opacity .3s} .tlink:hover::after{transform:scaleX(1);opacity:1} /* ============================================================ NAV ============================================================ */ .nav{ position:fixed;inset:0 0 auto 0;z-index:1200; transition:transform .4s var(--ease-out),background .3s,border-color .3s,backdrop-filter .3s; border-bottom:1px solid transparent; } /* Dekking van .20 naar .82: op 20% schemerde displaytekst die eronderdoor scrolde er als geblurde smeer doorheen, dat las als een renderfout, niet als glas. Met .82 verdwijnt inhoud netjes onder de balk terwijl de blur het glasgevoel houdt. */ /* Matglas op 7 augustus. Stond op 82% zwart met een lichte blur, en dan wint het zwart van het glas: je zag een balk, geen ruit. Nu andersom, weinig zwart en veel blur, met een haarlijn licht bovenop zodat de rand van de ruit leest. De header ín de hero blijft ongemoeid, die heeft geen .scrolled. */ .nav.scrolled{background:rgba(9,9,11,.40); backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5); border-color:rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.07)} .nav.on-light.scrolled{background:rgba(247,246,242,.8);border-color:var(--line-l)} .nav-inner{max-width:var(--w-max);margin:0 auto;padding:0 var(--pad-x);height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px} .nav,.nav a,.nav button{color:var(--tx-hi)} .nav.on-light,.nav.on-light a,.nav.on-light button{color:var(--tx-ink)} .nav.on-light .btn-primary{background:var(--tx-ink);color:#fff} .nav.on-light .btn-primary:hover{box-shadow:0 8px 24px rgba(15,15,19,.22)} .nav.on-light .btn-ghost{border-color:var(--line-l2)} .nav.on-light .btn-ghost:hover{background:rgba(15,15,19,.05)} .logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px} .logo img{height:21px;width:auto;display:block} .logo-tag{font-size:.6rem;font-weight:400;letter-spacing:.03em;opacity:.55;line-height:1;white-space:nowrap} .logo .logo-dark{display:none} .nav.on-light .logo .logo-light{display:none} .nav.on-light .logo .logo-dark{display:block} @media (max-width:480px){.logo img{height:19px}} .nav-links{display:flex;gap:6px;align-items:center} .nav-links a{font-size:.9rem;font-weight:500;padding:.5em .85em;border-radius:8px;opacity:.82;transition:opacity .2s,background .2s;white-space:nowrap} /* Met About erbij past de Nederlandse nav (langere labels) net niet meer op 1440. Iets krapper i.p.v. labels afkorten: 'Digitale medewerkers' is de duidelijkste term die we hebben, die willen we niet inkorten om ruimte. */ @media (max-width:1380px){.nav-links a{font-size:.85rem;padding:.5em .6em}} @media (max-width:1180px){.nav-links{gap:2px}.nav-links a{font-size:.82rem;padding:.5em .45em}} .nav-links a:hover{opacity:1;background:rgba(128,128,140,.12)} .nav-links a[aria-current="page"]{opacity:1;position:relative} .nav-links a[aria-current="page"]::after{content:"";position:absolute;left:.85em;right:.85em;bottom:2px;height:2px;background:var(--accent);border-radius:2px} .nav-cta{display:flex;align-items:center;gap:10px} .nav .btn{padding:.62em 1.2em;font-size:.88rem} .nav-burger{display:none;width:44px;height:44px;border-radius:10px;position:relative;z-index:1102} .nav-burger span{position:absolute;left:11px;right:11px;height:1.6px;background:currentColor;transition:transform .35s var(--ease-out),opacity .25s} .nav-burger span:nth-child(1){top:17px} .nav-burger span:nth-child(2){top:22px} .nav-burger span:nth-child(3){top:27px} body.menu-open .nav-burger span:nth-child(1){transform:translateY(5px) rotate(45deg)} body.menu-open .nav-burger span:nth-child(2){opacity:0} body.menu-open .nav-burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} .mnav{position:fixed;inset:0;z-index:1100;background:var(--ink-0);color:var(--tx-hi); display:flex;flex-direction:column;padding:100px var(--pad-x) 40px; overflow-y:auto;-webkit-overflow-scrolling:touch; transform:translateY(-100%);transition:transform .55s var(--ease-io);visibility:hidden} body.menu-open .mnav{transform:translateY(0);visibility:visible} body.menu-open{overflow:hidden} .mnav a.mnav-link{font-family:var(--font-display);font-size:clamp(1.7rem,6.5vw,2.4rem);font-weight:400;letter-spacing:-.02em;padding:.32em 0;border-bottom:1px solid var(--line-d);display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .5s var(--ease-out)} body.menu-open .mnav a.mnav-link{opacity:1;transform:none} .mnav a.mnav-link .mono{color:var(--tx-dim)} .mnav-foot{margin-top:auto;display:flex;flex-direction:column;gap:16px;padding-top:28px} /* ---------- mobiele nav: vier groepen, gelijk aan het megamenu ---------- Stond op 10 platte links terwijl desktop naar 4 groepen ging. De accordeon houdt het aantal keuzes op vier en zet de diepte eronder. */ .mnav-top{width:100%;text-align:left;background:none;border:0;cursor:pointer; font-family:var(--font-display);font-size:clamp(1.7rem,6.5vw,2.4rem);font-weight:400; letter-spacing:-.02em;color:var(--tx-hi);padding:.32em 0; border-bottom:1px solid var(--line-d);display:flex;justify-content:space-between;align-items:center; opacity:0;transform:translateY(16px);transition:opacity .4s,transform .5s var(--ease-out)} body.menu-open .mnav-top{opacity:1;transform:none} .mnav-top .mono{color:var(--tx-dim);transition:color .25s} .mnav-group[open] .mnav-top .mono,.mnav-top[aria-expanded="true"] .mono{color:var(--accent)} .mnav-panel{display:grid;grid-template-rows:0fr;visibility:hidden; transition:grid-template-rows .42s var(--ease-out),visibility .42s} .mnav-panel>div{overflow:hidden;min-height:0} .mnav-top[aria-expanded="true"]+.mnav-panel{grid-template-rows:1fr;visibility:visible} .mnav-h{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--tx-dim);margin:20px 0 10px} .mnav-sub{display:block;font-size:1.02rem;color:var(--tx-mid);padding:.44em 0; border-bottom:1px solid var(--line-d)} .mnav-sub:last-child{border-bottom:0} .mnav-sub:hover,.mnav-sub:focus-visible{color:var(--tx-hi)} .mnav-all{color:var(--accent)} .mnav-all:hover,.mnav-all:focus-visible{color:var(--accent)} @media (prefers-reduced-motion:reduce){ .mnav-panel{transition:none} .mnav-top{transition:none}} @media (max-width:960px){ .nav-links{display:none} .nav-burger{display:block} .nav-cta .btn-ghost{display:none} } @media (min-width:961px){.mnav{display:none}} /* skip link */ .skip{position:fixed;top:-60px;left:16px;z-index:2001;background:var(--accent);color:#fff;padding:.7em 1.2em;border-radius:8px;transition:top .2s} .skip:focus{top:16px} /* breadcrumbs */ .crumbs{display:flex;gap:.7em;align-items:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-dim);margin-bottom:2rem} .crumbs a:hover{color:var(--tx-hi)} .sec-light .crumbs a:hover{color:var(--tx-ink)} .crumbs .sep{opacity:.4} /* ============================================================ HERO (home) ============================================================ */ /* Beeld op 122% van de hoogte i.p.v. cover: bij cover is dit beeld hoogte-beperkt (1,78 tegen 1,6) en is er verticaal geen speling, dus background-position deed niets. Met 122% is er 200px om mee te schuiven en staat de figuur lager in beeld. Hero: onscherpe figuur rechts, tekst links. Het beeld stond er al maar was zo donker gemaakt dat je het niet zag. De horizontale gradiënt houdt de linkerhelft leesbaar; de figuur mag rechts wél licht zijn. */ .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(56px,8vh,96px);overflow:hidden; background: linear-gradient(96deg, rgba(9,9,11,.93) 0%, rgba(9,9,11,.66) 13%, rgba(9,9,11,.30) 30%, rgba(9,9,11,.06) 52%, rgba(9,9,11,.18) 100%), linear-gradient(180deg, rgba(9,9,11,.50) 0%, rgba(9,9,11,.04) 28%, rgba(9,9,11,.16) 58%, rgba(9,9,11,.70) 86%, var(--ink-0) 100%), /* Positie en maat herzien op 7 augustus. De oude 26% 18%/auto 122% was ingesteld op een sfeerfoto zonder onderwerp; met een kop erin blies dat het onderwerp op tot buiten beeld. Het bestand is links opgerekt met zijn eigen verloop, zodat de kop op ongeveer 74% van de breedte staat en de tekstkolom links vrij blijft. */ url("../img/atmos/kolomrek-kop.webp") left center/cover no-repeat, var(--ink-0); } /* reskin: figure photography replaces the starfield in the hero */ /* Smal scherm: het herobeeld is links opgerekt met zijn eigen verloop zodat de kop op desktop rechts van de tekstkolom valt. Op mobiel is er geen tekstkolom naast, en dan toont left center juist alleen dat lege doek. Daarom hier het beeld verschoven zodat de kop in beeld staat. De vier waarden horen bij de vier lagen van de achtergrond; alleen de derde is het beeld. */ @media (max-width:820px){ .hero{background-position:0% 0%, 0% 0%, 52% center, 0% 0%} } .hero .stars{display:none} .hero-canvas-wrap{position:absolute;inset:0;z-index:0} #heroCanvas{width:100%;height:100%} .hero::after{content:"";position:absolute;inset:0;background: radial-gradient(120% 90% at 50% 110%, rgba(9,9,11,.92) 20%, rgba(9,9,11,.25) 55%, transparent 75%); z-index:1;pointer-events:none} .hero .wrap{position:relative;z-index:2;width:100%} .hero-status{display:flex;gap:1.6em;flex-wrap:wrap;margin-bottom:2.2rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim)} .hero h1{margin-bottom:2rem;max-width:15ch;font-size:clamp(1.9rem,3.7vw,3.3rem)} .hero .lede{margin-bottom:3rem} .hero-scroll{position:absolute;right:var(--pad-x);bottom:clamp(56px,8vh,96px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-dim);writing-mode:vertical-rl} .hero-scroll .line{width:1px;height:52px;background:var(--line-d2);position:relative;overflow:hidden} .hero-scroll .line::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--tx-hi);animation:scrollhint 2.2s var(--ease-io) infinite} @keyframes scrollhint{to{top:110%}} @media (max-width:720px){.hero-scroll{display:none}} .hero-phase{position:absolute;left:var(--pad-x);top:96px;z-index:2;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dim)} .hero-phase b{color:var(--tx-hi);font-weight:500} /* word reveal */ .words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em} .words .w>span{display:inline-block;transform:translateY(110%);will-change:transform} .words.in .w>span{transform:none;transition:transform .9s var(--ease-out)} .words.in .w:nth-child(2)>span{transition-delay:.06s} .words.in .w:nth-child(3)>span{transition-delay:.12s} .words.in .w:nth-child(4)>span{transition-delay:.18s} .words.in .w:nth-child(5)>span{transition-delay:.24s} .words.in .w:nth-child(6)>span{transition-delay:.3s} .words.in .w:nth-child(7)>span{transition-delay:.36s} /* reveal on scroll */ .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .9s var(--ease-out)} .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ .rv,.words .w>span{opacity:1!important;transform:none!important;transition:none!important} .hero-scroll .line::after{animation:none} *{scroll-behavior:auto!important} } /* ============================================================ CARDS & GRIDS ============================================================ */ .grid{display:grid;gap:24px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} /* Vijf kolommen voor de tien domeinen. Tien deelt op vijf, twee en een, dus alleen die drie stappen: bij elk ander aantal kolommen blijft er een gat onderaan staan en dat was precies de scheve rij die er eerst stond. */ .grid-5{grid-template-columns:repeat(5,1fr)} @media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:1100px){.grid-5{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}} /* Compacte kaart: alleen label en naam. Een register, geen kaartje met tekst, zodat vijf naast elkaar leesbaar blijven en alle tien even hoog zijn. */ .card-compact{display:flex;flex-direction:column;justify-content:space-between;min-height:150px} .card-compact .h3{font-size:clamp(1rem,1.15vw,1.18rem);line-height:1.25;margin:0} /* Op één kolom is die minimumhoogte er teveel aan: de kaart draagt dan één regel en de rest is leegte, tien keer onder elkaar. Laat hem hier krimpen naar zijn inhoud. */ @media (max-width:640px){ /* .card zet verderop padding 32 en .card .mono-top een marge van 18. Die staan later in het bestand, dus deze regels winnen op specificiteit. */ .card.card-compact{min-height:0;gap:10px;padding:20px 22px} .card.card-compact .mono-top{margin-bottom:0} } /* Kaarten in dezelfde glastaal als de homepage: near-clear, lichtrand boven, vrijwel geen rand onder. Op een sectie zonder beeld leest dat als een rustig paneel; staat er wel beeld achter, dan schijnt dat er doorheen. Eén systeem in plaats van twee. */ .card{ position:relative;border-radius:var(--r-lg);padding:32px; background:linear-gradient(180deg,rgba(236,240,243,.055),rgba(236,240,243,.025)); backdrop-filter:blur(14px) saturate(108%);-webkit-backdrop-filter:blur(14px) saturate(108%); border:1px solid rgba(255,255,255,.07); border-top-color:rgba(255,255,255,.22); border-left-color:rgba(255,255,255,.11); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.2); transition:transform .5s var(--ease-out),border-color .3s,background .3s; } .card:hover{transform:translateY(-4px);border-top-color:rgba(255,255,255,.34); background:linear-gradient(180deg,rgba(236,240,243,.075),rgba(236,240,243,.035))} .sec-light .card,.sec-light-1 .card{background:var(--bone-1);border-color:var(--line-l);box-shadow:0 1px 2px rgba(15,15,19,.04)} .sec-light .card:hover{box-shadow:0 16px 40px rgba(15,15,19,.08);border-color:var(--line-l2)} .card .mono-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim);margin-bottom:18px} .sec-light .card .mono-top{color:var(--tx-ink-mid)} .card h3{margin-bottom:.5rem} .card p{font-size:.95rem;color:var(--tx-mid)} .sec-light .card p,.sec-light-1 .card p{color:var(--tx-ink-mid)} /* ============================================================ ATMOSPHERE SECTIONS, gedempte foto-wash + near-clear glass blocks Add class "sec-atmos" to a dark section and set --wash:url(...). The repeating blocks (.card / .gates) become glass wherever they sit here. ============================================================ */ .sec-atmos{position:relative;background:var(--ink-0)} /* De sluierbeelden zijn sinds de beeldtaal van 7 augustus vooraf geblurde varianten (*-wash.jpg), geen hero-bestanden. Reden: --wash staat op center/cover in secties die veel hoger zijn dan 16:9, dus een 16:9-beeld wordt ruwweg vier keer uitvergroot. Bij de oude sfeerfoto's zonder onderwerp gaf dat textuur; bij beelden mét een onderwerp wordt dat onderwerp een reus die de sectie overneemt. Blurren in CSS kon niet: de filter van deze ::before wordt op zeven plekken overschreven met eigen gemeten helderheidswaarden, en elke override vervangt de hele filter. Vandaar in het bestand zelf. */ .sec-atmos::before{content:"";position:absolute;inset:0;z-index:0; background:var(--wash) center/cover no-repeat; filter:saturate(.92) brightness(.85)} .sec-atmos::after{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(180deg, var(--ink-0) 0%, rgba(9,9,11,.88) 7%, rgba(9,9,11,.66) 15%, rgba(9,9,11,.48) 26%, rgba(9,9,11,.44) 40%, rgba(9,9,11,.36) 52%, rgba(9,9,11,.33) 64%, rgba(9,9,11,.62) 74%, rgba(9,9,11,.90) 86%, var(--ink-0) 95%)} /* Zwarte marge boven en onder elke sfeersectie. De sluier hierboven werkt in procenten van de sectiehoogte, en die secties zijn duizend tot tweeduizend pixels hoog. Gemeten leverde dat onderaan 55 tot 81 pixels zwart op en bovenaan drie, en bij de framed variant onderaan helemaal niets: daar schemerde het beeld nog voor vier procent door. Drie sfeersecties achter elkaar (het team, de nacht, de domeinen) liepen zo als een aaneengesloten veeg beeld in elkaar over. Hier eindigt het beeld zelf, met een masker op een vaste pixelmaat in plaats van een sluier eroverheen. Onder het masker staat de sectie-achtergrond, --ink-0, precies hetzelfde zwart als een gewone donkere sectie. Twee secties naast elkaar geven dus ruim tweehonderd pixels echt zwart, ongeacht hoe hoog ze zijn. De min() houdt het veilig bij een korte sectie: hoogstens 44 procent van de hoogte doet mee, de rest is altijd vol beeld. De footer doet niet mee, die heeft een eigen, met de hand afgestelde overgang waar de waterkringen doorheen moeten blijven. */ .sec-atmos:not(.footer)::before{ --rand:min(120px,9%); --loop:min(170px,13%); -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent var(--rand), #000 calc(var(--rand) + var(--loop)), #000 calc(100% - var(--rand) - var(--loop)), transparent calc(100% - var(--rand)), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, transparent var(--rand), #000 calc(var(--rand) + var(--loop)), #000 calc(100% - var(--rand) - var(--loop)), transparent calc(100% - var(--rand)), transparent 100%)} .sec-atmos>.wrap{position:relative;z-index:2} .sec-atmos .stars{display:none} /* very-soft variant (e.g. pricing): image barely present, extra muted */ .sec-atmos.soft::before{filter:saturate(.7) brightness(.5)} .sec-atmos.soft::after{background:linear-gradient(180deg, var(--ink-0) 0%, rgba(9,9,11,.82) 12%, rgba(9,9,11,.74) 50%, rgba(9,9,11,.82) 88%, var(--ink-0) 100%)} /* framed: for a LIGHTER image, darken it and vignette all edges to black so it floats as a glowing window */ /* Feller op verzoek. 0.60 is gemeten het plafond: bij 0.68 zakt het eerste element onder AA, bij 0.84 zeven. Hier is de marge nog +7%. */ .sec-atmos.framed::before{filter:saturate(.88) brightness(.60) contrast(1.06)} .sec-atmos.framed::after{background: radial-gradient(135% 108% at 50% 40%, rgba(9,9,11,0) 0%, rgba(9,9,11,.34) 40%, rgba(9,9,11,.72) 68%, var(--ink-0) 90%), linear-gradient(180deg, var(--ink-0) 0%, rgba(9,9,11,.30) 13%, rgba(9,9,11,.30) 55%, rgba(9,9,11,.72) 84%, var(--ink-0) 100%)} /* near-clear see-through glass (artifact look): crisp low blur so the wash shimmers through */ .sec-atmos .card{ background:rgba(255,255,255,.045); -webkit-backdrop-filter:blur(3px) saturate(110%);backdrop-filter:blur(3px) saturate(110%); border-color:rgba(255,255,255,.16)} .sec-atmos .card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)} .sec-atmos .gates{background:rgba(255,255,255,.04); -webkit-backdrop-filter:blur(3px) saturate(110%);backdrop-filter:blur(3px) saturate(110%); border-color:rgba(255,255,255,.16)} .sec-atmos .gates>div{background:transparent;border-color:rgba(255,255,255,.12)} .sec-atmos .integ-chip{background:rgba(255,255,255,.06); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.14)} /* glass metric widgets (dashboard showcase), near-clear glass, image shimmers through */ .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(40px,5vw,64px)} @media(max-width:900px){.metric-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.metric-grid{grid-template-columns:1fr}} .metric{position:relative;border-radius:var(--r-lg);padding:22px 22px 20px;min-height:186px;display:flex;flex-direction:column; background:rgba(255,255,255,.045);-webkit-backdrop-filter:blur(3px) saturate(110%);backdrop-filter:blur(3px) saturate(110%); border:1px solid rgba(255,255,255,.16)} .metric .m-top{display:flex;align-items:flex-start;gap:13px} .metric .m-ring{flex:0 0 auto;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center} .metric .m-ring svg{width:20px;height:20px;display:block} .metric .m-label{margin:3px 0 0;font-weight:500;font-size:.92rem;line-height:1.18;color:var(--tx-hi)} .metric .m-bot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:20px} .metric .m-val{font-family:var(--font-display);font-weight:300;letter-spacing:-.02em;line-height:.85;font-variant-numeric:tabular-nums;color:var(--tx-hi)} .metric .m-val .num{font-size:2.5rem} .metric .m-val .unit{font-size:.95rem;font-weight:400;color:var(--tx-mid);margin-left:5px;letter-spacing:0} .metric .m-viz{flex:0 0 auto;opacity:.92} .metric .m-viz svg{height:30px;width:76px;display:block;overflow:visible} .metric-note{margin-top:22px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim)} /* Light atmosphere: pale grain-noisy image behind + frosted-WHITE glass cards */ .sec-atmos-l{position:relative} .sec-atmos-l::before{content:"";position:absolute;inset:0;z-index:0; background:var(--wash) center/cover no-repeat;filter:saturate(.55) brightness(1.02) contrast(.96)} .sec-atmos-l::after{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(180deg, rgba(244,243,239,.58) 0%, rgba(244,243,239,.70) 100%)} .sec-atmos-l>.wrap{position:relative;z-index:2} .sec-atmos-l .card{background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(16px) saturate(115%);backdrop-filter:blur(16px) saturate(115%); border-color:rgba(255,255,255,.7);box-shadow:0 10px 34px rgba(15,15,19,.07)} /* glass agent card */ .agent-card{overflow:hidden;display:flex;flex-direction:column;min-height:380px} .agent-card .viz{height:130px;margin:-32px -32px 24px;border-bottom:1px solid var(--line-d);position:relative;overflow:hidden;background:rgba(255,255,255,.015)} .sec-light .agent-card .viz{border-color:var(--line-l);background:rgba(15,15,19,.028)} .agent-card .tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:20px} .chip{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;padding:.45em .8em;border:1px solid var(--line-d);border-radius:999px;color:var(--tx-mid)} .sec-light .chip,.sec-light-1 .chip{border-color:var(--line-l);color:var(--tx-ink-mid)} .agent-card .card-link{position:absolute;inset:0;z-index:3} .agent-card .go{position:absolute;top:22px;right:22px;z-index:2;width:34px;height:34px;border:1px solid var(--line-d2);border-radius:50%;display:grid;place-items:center;font-size:.85rem;transition:transform .4s var(--ease-out),background .25s,color .25s} .agent-card:hover .go{transform:rotate(45deg);background:var(--tx-hi);color:var(--ink-0)} .sec-light .agent-card:hover .go{background:var(--tx-ink);color:#fff} /* viz variants appended at end of file */ /* ============================================================ STEPS / PROCESS ============================================================ */ .steps{counter-reset:step;display:grid;gap:0} .step{display:grid;grid-template-columns:130px 1fr;gap:32px;padding:42px 0;border-top:1px solid var(--line-l);align-items:start} .sec-dark .step,.sec-dark-1 .step{border-color:var(--line-d)} .step:last-child{border-bottom:1px solid var(--line-l)} .sec-dark .step:last-child{border-color:var(--line-d)} .step .num{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--tx-ink-mid);padding-top:6px} .sec-dark .step .num{color:var(--tx-dim)} .step .num b{display:block;font-family:var(--font-display);font-size:1.8rem;font-weight:400;color:var(--tx-ink);letter-spacing:0} .sec-dark .step .num b{color:var(--tx-hi)} .step h3{margin-bottom:.4rem} .step p{color:var(--tx-ink-mid);font-size:.98rem} .sec-dark .step p{color:var(--tx-mid)} .step .meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-ink-mid);margin-top:.9rem;display:flex;gap:1.4em;flex-wrap:wrap} @media (max-width:640px){.step{grid-template-columns:1fr;gap:8px}} /* ============================================================ TABLES / COMPARE ============================================================ */ .cmp{width:100%;border-collapse:collapse;font-size:.94rem} .cmp th,.cmp td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line-l);vertical-align:top} .cmp th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-ink-mid);font-weight:500} .cmp td{color:var(--tx-ink)} .cmp td:first-child{font-weight:500} .cmp .hl{background:rgba(217,127,151,.06)} .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .cmp-scroll table{min-width:640px} /* ============================================================ PRICING ============================================================ */ .price-card{display:flex;flex-direction:column;padding:34px 30px;min-height:520px} .price-card .tier{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-ink-mid);margin-bottom:14px;display:flex;justify-content:space-between} .price-card .amount{font-family:var(--font-display);font-size:2.3rem;font-weight:400;letter-spacing:-.01em;line-height:1.1} .price-card .amount small{font-size:.9rem;font-weight:400;color:var(--tx-ink-mid);letter-spacing:0} .price-card .sub-amount{color:var(--tx-ink);font-size:.95rem;margin:.3rem 0 1.4rem} .price-card ul{display:grid;gap:10px;margin:0 0 26px;font-size:.93rem;color:var(--tx-ink)} .price-card ul li{padding-left:22px;position:relative} .price-card ul li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:1.5px;background:var(--accent)} .price-card .btn{margin-top:auto;justify-content:center} .price-card.featured{border-color:var(--tx-ink);box-shadow:0 24px 60px rgba(15,15,19,.10);position:relative} .price-card.featured::before{content:"Most chosen";position:absolute;top:-11px;left:28px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;background:var(--tx-ink);color:#fff;padding:.45em .9em;border-radius:999px} /* ============================================================ FAQ ============================================================ */ .faq{border-top:1px solid var(--line-l)} .sec-dark .faq{border-color:var(--line-d)} .faq details{border-bottom:1px solid var(--line-l);display:grid;grid-template-rows:auto minmax(0,0fr);transition:grid-template-rows .45s cubic-bezier(.65,0,.35,1)} .faq details.is-open{grid-template-rows:auto minmax(0,1fr)} .sec-dark .faq details{border-color:var(--line-d)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-weight:500;font-size:1.02rem} .faq summary::-webkit-details-marker{display:none} .faq summary .pm{font-family:var(--font-mono);font-size:1rem;color:var(--tx-ink-mid);transition:transform .3s var(--ease-out);flex-shrink:0} .faq details.is-open summary .pm{transform:rotate(45deg)} .faq .a{display:block;overflow:hidden;min-height:0;height:100%;align-self:stretch;padding:0 4px 24px;color:var(--tx-ink-mid);max-width:62ch;font-size:.97rem;opacity:0;transition:opacity .3s ease;box-sizing:border-box} .faq details.is-open .a{opacity:1;transition:opacity .35s ease .1s} .sec-dark .faq .a{color:var(--tx-mid)} .sec-dark .faq summary .pm,.sec-dark-1 .faq summary .pm{color:var(--tx-mid)} .faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} @media (prefers-reduced-motion:reduce){.faq details,.faq .a{transition:none}} /* ============================================================ BEFORE / AFTER (cases) ============================================================ */ .ba{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;background:var(--bone-1)} .ba>div{padding:28px} .ba .before{border-right:1px solid var(--line-l);background:repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(15,15,19,.014) 10px,rgba(15,15,19,.014) 11px)} .ba .tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:inline-flex;align-items:center;gap:.6em} .ba .before .tag{color:var(--tx-ink-mid)} .ba .after .tag{color:var(--accent)} .ba ul{display:grid;gap:9px;font-size:.92rem;color:var(--tx-ink-mid)} .ba ul li{padding-left:20px;position:relative} .ba .before li::before{content:"×";position:absolute;left:0;color:var(--tx-ink-mid);opacity:.6} .ba .after li::before{content:"→";position:absolute;left:0;color:var(--accent)} @media (max-width:720px){.ba{grid-template-columns:1fr}.ba .before{border-right:0;border-bottom:1px solid var(--line-l)}} .case-metrics{display:flex;gap:clamp(20px,4vw,48px);flex-wrap:wrap;margin-top:22px} .case-metrics .m b{display:block;font-family:var(--font-display);font-size:1.9rem;font-weight:400;letter-spacing:-.01em} .case-metrics .m span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-ink-mid)} .placeholder-note{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--tx-ink-mid);border:1px dashed var(--line-l2);border-radius:var(--r-sm);padding:12px 16px;display:inline-block} .sec-dark .placeholder-note{color:var(--tx-dim);border-color:var(--line-d2)} /* ============================================================ INTEGRATIONS VISUAL ============================================================ */ .integ-visual{position:relative;height:420px;border:1px solid var(--line-d);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-1)} #integCanvas{position:absolute;inset:0;width:100%;height:100%} .integ-visual .node{position:absolute;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mid);background:rgba(21,21,27,.85);border:1px solid var(--line-d2);border-radius:999px;padding:.55em 1em;backdrop-filter:blur(4px)} .integ-visual .core-node{color:var(--tx-hi);border-color:var(--accent);box-shadow:0 0 24px rgba(217,127,151,.35);background:rgba(217,127,151,.14)} @media (max-width:720px){.integ-visual{height:340px}.integ-visual .node{font-size:.58rem;padding:.5em .8em}} /* ============================================================ CONTROL LAYER VISUAL (security) ============================================================ */ /* Poorten: van één dicht blok met scheidingslijnen naar losse glasvlakken, zodat ze bij de kaarten passen. */ .gates{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border:0;border-radius:0;overflow:visible} .gates>div{padding:24px 20px;position:relative;border-radius:var(--r-md); background:linear-gradient(180deg,rgba(236,240,243,.055),rgba(236,240,243,.025)); backdrop-filter:blur(14px) saturate(108%);-webkit-backdrop-filter:blur(14px) saturate(108%); border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} .gates .g-num{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;color:var(--tx-dim);text-transform:uppercase;margin-bottom:12px;display:block} .gates h3{font-size:1.02rem;margin-bottom:.4rem} .gates p{font-size:.86rem;color:var(--tx-mid)} .gates>div::after{content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);z-index:2;background:var(--ink-0) url('data:image/svg+xml;utf8,') center/10px 10px no-repeat;border:1px solid var(--line-d2);border-radius:50%;width:22px;height:22px} .gates>div:last-child::after{display:none} @media (max-width:960px){.gates{grid-template-columns:1fr 1fr}.gates>div:nth-child(2)::after{display:none}.gates>div:nth-child(-n+2){border-bottom:1px solid var(--line-d)}} @media (max-width:560px){.gates{grid-template-columns:1fr}.gates>div{border-right:0;border-bottom:1px solid var(--line-d)}.gates>div::after{display:none}.gates>div:last-child{border-bottom:0}} /* ============================================================ AI SCAN ============================================================ */ .scan-shell{max-width:760px;margin:0 auto;border:1px solid var(--line-d);border-radius:var(--r-lg);background:var(--ink-1);overflow:hidden} .scan-top{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;border-bottom:1px solid var(--line-d);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim)} .scan-progress{height:2px;background:var(--line-d)} .scan-progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .5s var(--ease-out)} .scan-body{padding:clamp(26px,5vw,44px)} .scan-q h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.01em;margin-bottom:.6rem} .scan-q .hint{color:var(--tx-mid);font-size:.92rem;margin-bottom:1.6rem} .scan-opts{display:grid;gap:10px} .scan-opts.cols{grid-template-columns:1fr 1fr} @media (max-width:600px){.scan-opts.cols{grid-template-columns:1fr}} .scan-opt{display:flex;align-items:center;gap:14px;text-align:left;border:1px solid var(--line-d);border-radius:var(--r-md);padding:15px 18px;font-size:.95rem;color:var(--tx-hi);transition:border-color .2s,background .2s,transform .3s var(--ease-out);width:100%} .scan-opt:hover{border-color:var(--line-d2);background:rgba(255,255,255,.03)} .scan-opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)} .scan-opt .k{font-family:var(--font-mono);font-size:.66rem;color:var(--tx-dim);border:1px solid var(--line-d);border-radius:5px;width:22px;height:22px;display:grid;place-items:center;flex-shrink:0} .scan-opt[aria-pressed="true"] .k{border-color:var(--accent);color:var(--accent)} .scan-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:14px} .scan-nav .back{color:var(--tx-dim);font-size:.9rem} .scan-nav .back:hover{color:var(--tx-hi)} .scan-nav .back:disabled{opacity:.3;cursor:default} /* scan result */ .scan-result{display:none} .scan-result.show{display:block} .res-head{display:flex;align-items:center;gap:.8em;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--live);margin-bottom:18px} .res-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 28px} @media (max-width:600px){.res-grid{grid-template-columns:1fr}} .res-item{border:1px solid var(--line-d);border-radius:var(--r-md);padding:18px} .res-item .k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-dim);display:block;margin-bottom:8px} .res-item .v{font-weight:500;font-size:1.02rem} .res-item.wide{grid-column:1/-1} /* ============================================================ FORMS ============================================================ */ .form{display:grid;gap:16px} .form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:600px){.form .row2{grid-template-columns:1fr}} .field label{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-ink-mid);margin-bottom:8px} .sec-dark .field label{color:var(--tx-dim)} .field input,.field select,.field textarea{ width:100%;font:inherit;font-size:.96rem;padding:.85em 1em;border-radius:var(--r-sm); border:1px solid var(--line-l2);background:#fff;color:var(--tx-ink);transition:border-color .2s,box-shadow .2s; } .sec-dark .field input,.sec-dark .field select,.sec-dark .field textarea{background:var(--ink-2);border-color:var(--line-d2);color:var(--tx-hi)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .field textarea{min-height:120px;resize:vertical} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--ink-0);color:var(--tx-hi);border-top:1px solid var(--line-d);padding:96px 0 40px} .footer.sec-atmos{border-top:0} .footer-cta{padding-bottom:84px;border-bottom:1px solid var(--line-d);margin-bottom:72px;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:center} .footer-cta .h2{max-width:15ch} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:56px} @media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr}} .footer h3,.footer h4{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-hi);font-weight:500;margin-bottom:16px} .footer ul{display:grid;gap:10px;font-size:.92rem} .footer ul a{color:var(--tx-mid);transition:color .2s} .footer ul a:hover{color:var(--tx-hi)} .footer .fnote{color:var(--tx-hi);font-size:.9rem;max-width:34ch;margin-top:14px} .footer-bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--tx-dim);border-top:1px solid var(--line-d);padding-top:28px} /* page hero (subpages) */ .page-hero{padding:180px 0 96px;background:var(--ink-0)} /* Subpagina-hero's leunden op .display (clamp 2.1-4rem) terwijl de homepage-hero op clamp 1.9-3.3rem staat. Daardoor schreeuwden de subpagina's harder dan de homepage. Nu gelijkgetrokken met .hero h1. */ .page-hero h1{margin-bottom:1.6rem;max-width:17ch;font-size:clamp(1.9rem,3.7vw,3.3rem)} .page-hero.light{background:var(--bone-0);color:var(--tx-ink)} /* sub-page hero with an atmospheric image: text-left darkened, figure-right visible, blended top/bottom */ .page-hero.atmos{ background: linear-gradient(94deg, rgba(9,9,11,.88) 0%, rgba(9,9,11,.55) 38%, rgba(9,9,11,.14) 66%, rgba(9,9,11,0) 100%), linear-gradient(180deg, rgba(9,9,11,.55) 0%, rgba(9,9,11,.10) 34%, rgba(9,9,11,.58) 78%, var(--ink-0) 100%), var(--wash) center 42%/cover no-repeat, var(--ink-0); } .page-hero.atmos .stars{display:none} /* stat band */ .stat-band{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line-d)} .stat-band>div{padding:34px 26px;border-right:1px solid var(--line-d)} .stat-band>div:last-child{border-right:0} .stat-band b{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:400;letter-spacing:-.01em;margin-bottom:8px} .stat-band span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim)} @media (max-width:860px){.stat-band{grid-template-columns:1fr 1fr}.stat-band>div:nth-child(2){border-right:0}.stat-band>div:nth-child(-n+2){border-bottom:1px solid var(--line-d)}} @media (max-width:480px){.stat-band>div{padding:26px 20px}} /* detail block (agent pages / use cases) */ .detail{border:1px solid var(--line-l);border-radius:var(--r-lg);background:var(--bone-1);overflow:hidden} .detail-head{padding:26px 28px;border-bottom:1px solid var(--line-l);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-start} .detail-body{display:grid;grid-template-columns:1fr 1fr;gap:0} .detail-body>div{padding:22px 28px;border-top:1px solid var(--line-l)} .detail-body>div:nth-child(odd){border-right:1px solid var(--line-l)} .detail-body h4{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-ink-mid);font-weight:500;margin-bottom:12px} .detail-body ul{display:grid;gap:8px;font-size:.92rem;color:var(--tx-ink-mid)} .detail-body ul li{padding-left:18px;position:relative} .detail-body ul li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1.5px;background:var(--accent)} .detail-foot{padding:24px 30px;border-top:1px solid var(--line-l);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;background:rgba(15,15,19,.02)} .detail-foot .meta{display:flex;gap:1.8em;flex-wrap:wrap;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-ink-mid)} .detail-foot .meta b{color:var(--tx-ink);font-weight:500} /* employee detail blocks on dark sections: glass card + light text */ .sec-dark .detail,.sec-dark-1 .detail{background:rgba(255,255,255,.035);border-color:var(--line-d)} .sec-dark .detail-head,.sec-dark-1 .detail-head{border-bottom-color:var(--line-d)} .sec-dark .detail-body>div,.sec-dark-1 .detail-body>div{border-top-color:var(--line-d)} .sec-dark .detail-body>div:nth-child(odd),.sec-dark-1 .detail-body>div:nth-child(odd){border-right-color:var(--line-d)} .sec-dark .detail-body h4,.sec-dark-1 .detail-body h4{color:var(--tx-mid)} .sec-dark .detail-body ul,.sec-dark-1 .detail-body ul{color:var(--tx-mid)} .sec-dark .detail-foot,.sec-dark-1 .detail-foot{border-top-color:var(--line-d);background:rgba(255,255,255,.02)} .sec-dark .detail-foot .meta,.sec-dark-1 .detail-foot .meta{color:var(--tx-mid)} .sec-dark .detail-foot .meta b,.sec-dark-1 .detail-foot .meta b{color:var(--tx-hi)} @media (max-width:760px){.detail-body{grid-template-columns:1fr}.detail-body>div:nth-child(odd){border-right:0}} /* custom cursor */ .cursor{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--tx-hi);mix-blend-mode:difference;pointer-events:none;z-index:3000;transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .3s;opacity:0} body.has-cursor .cursor{opacity:1} @media (hover:hover) and (pointer:fine){ body.has-cursor, body.has-cursor *{cursor:none!important} } .cursor.grow{width:42px;height:42px} @media (hover:none),(pointer:coarse){.cursor{display:none}} /* progress bar */ .scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0;z-index:1500;transform-origin:left} /* utility */ .mt-1{margin-top:14px}.mt-2{margin-top:28px}.mt-3{margin-top:48px}.mt-4{margin-top:72px} .mb-2{margin-bottom:28px} .center{text-align:center} .center .lede,.center p{margin-inline:auto} .center .btn-row{justify-content:center} .maxc{max-width:var(--w-copy)} /* ---------- Editorial (blog-index) ---------- Eén featured bovenaan, daaronder rijen van drie op datum. De GEO-schrijver vult deze structuur; is er nog niets, dan draagt .blog-empty de pagina. Rustige leessfeer ('stil'): geen beeld, alleen tint en typografie. */ .blog-date{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.11em; text-transform:uppercase;color:var(--tx-dim)} /* Featured, het nieuwste stuk, groot */ .blog-featured{display:block;padding:38px 40px 40px;margin-bottom:56px; border:1px solid var(--line-d);border-radius:var(--r-lg); background:linear-gradient(180deg,rgba(255,255,255,.03),transparent); transition:border-color .3s,background .3s} .blog-featured:hover{border-color:var(--line-d2); background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)} .blog-featured .blog-kicker{display:flex;gap:14px;align-items:center;margin-bottom:22px} .blog-featured .blog-kicker .tag{font-family:var(--font-mono);font-size:.66rem; letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} .blog-featured h2{font-family:var(--font-display);font-weight:300;letter-spacing:-.02em; line-height:1.1;font-size:clamp(1.7rem,3.4vw,2.7rem);max-width:20ch;margin-bottom:1rem} .blog-featured p{color:var(--tx-mid);font-size:1.02rem;line-height:1.6;max-width:62ch} .blog-featured .go{display:inline-flex;align-items:center;gap:.5em;margin-top:1.6rem; color:var(--tx-hi);font-size:.9rem} .blog-featured:hover h2{color:var(--accent)} /* De rijen, drie per rij op brede schermen */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px} .blog-card{display:block;padding:26px 0 28px;border-top:1px solid var(--line-d)} .blog-card .blog-date{display:block;margin-bottom:12px} .blog-card h3{font-size:1.14rem;line-height:1.28;margin:0 0 .5rem;font-weight:500} .blog-card p{color:var(--tx-mid);font-size:.94rem;line-height:1.55;margin:0} .blog-card:hover h3{color:var(--accent)} @media (max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;gap:0 28px}} @media (max-width:560px){.blog-grid{grid-template-columns:1fr} .blog-featured{padding:28px 22px 30px}} /* empty-state: alleen tonen als er geen featured/grid is */ .blog-empty{padding:8px 0 4px} .blog-featured~.blog-empty,.blog-grid~.blog-empty{display:none} /* ============================================================ AGENT VIZ VARIANTS, one distinct hover animation per role Pure CSS transforms/opacity; disabled under reduced motion. ============================================================ */ .viz{--vt:.75s} .viz .el{position:absolute;transition:transform var(--vt) var(--ease-io),opacity .5s,background .5s,border-color .5s,height var(--vt) var(--ease-io)} .viz .dot{width:7px;height:7px;border-radius:2px;background:var(--tx-dim);opacity:.8} .sec-dark .viz .dot,.sec-dark-1 .viz .dot{background:var(--tx-mid)} .viz .ln{background:var(--line-l2);opacity:0} .sec-dark .viz .ln,.sec-dark-1 .viz .ln{background:var(--line-d2)} .viz .ring{border:1px dashed var(--line-l2);border-radius:50%;opacity:0} .sec-dark .viz .ring{border-color:var(--line-d2)} .agent-card:hover .viz .ln,.agent-card:hover .viz .ring{opacity:1} @media (prefers-reduced-motion:reduce){.viz .el{transition:none!important}} /* --- 01 sort (Data-Triage): scatter → three lanes + core --- */ .viz--sort .ln{height:1px;left:12%;right:16%} .viz--sort .ln:nth-child(7){top:31%}.viz--sort .ln:nth-child(8){top:50%}.viz--sort .ln:nth-child(9){top:69%} .viz--sort .core{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--accent);right:8%;top:calc(50% - 7px);opacity:0;box-shadow:0 0 14px rgba(217,127,151,.45)} .agent-card:hover .viz--sort .core{opacity:1} .viz--sort .dot:nth-child(1){left:14%;top:20%}.viz--sort .dot:nth-child(2){left:30%;top:66%} .viz--sort .dot:nth-child(3){left:48%;top:28%}.viz--sort .dot:nth-child(4){left:22%;top:46%} .viz--sort .dot:nth-child(5){left:40%;top:78%}.viz--sort .dot:nth-child(6){left:56%;top:56%} .agent-card:hover .viz--sort .dot{background:var(--accent);opacity:1} .agent-card:hover .viz--sort .dot:nth-child(1){transform:translate(44px,12px)} .agent-card:hover .viz--sort .dot:nth-child(2){transform:translate(58px,-24px)} .agent-card:hover .viz--sort .dot:nth-child(3){transform:translate(36px,26px)} .agent-card:hover .viz--sort .dot:nth-child(4){transform:translate(70px,4px)} .agent-card:hover .viz--sort .dot:nth-child(5){transform:translate(48px,-38px)} .agent-card:hover .viz--sort .dot:nth-child(6){transform:translate(32px,-8px)} /* --- 02 route (Customer Success): tickets align, urgent one routes out --- */ .viz--route .bar{height:8px;width:26%;border-radius:3px;background:var(--line-l2);left:14%} .sec-dark .viz--route .bar{background:var(--line-d2)} .viz--route .bar:nth-child(1){top:18%;transform:rotate(-4deg) translateX(6px)} .viz--route .bar:nth-child(2){top:38%;transform:rotate(3deg) translateX(-4px)} .viz--route .bar:nth-child(3){top:58%;transform:rotate(-2deg) translateX(10px)} .viz--route .bar:nth-child(4){top:78%;transform:rotate(5deg)} .agent-card:hover .viz--route .bar{transform:rotate(0) translateX(0)} .agent-card:hover .viz--route .bar:nth-child(1){background:var(--accent);transform:translateX(96px)} .viz--route .ln{width:1px;top:16%;bottom:16%;left:58%} .viz--route .target{width:18px;height:18px;border:1.5px solid var(--accent);border-radius:50%;right:10%;top:calc(18% - 5px);opacity:0} .agent-card:hover .viz--route .target{opacity:1} .viz--route .bar{transition-delay:.05s} .viz--route .bar:nth-child(2){transition-delay:.12s}.viz--route .bar:nth-child(3){transition-delay:.18s}.viz--route .bar:nth-child(4){transition-delay:.24s} /* --- 03 balance (Stock Planner): uneven bars level to threshold --- */ .viz--balance .bar{width:9px;bottom:22%;border-radius:3px 3px 0 0;background:var(--line-l2)} .sec-dark .viz--balance .bar{background:var(--line-d2)} .viz--balance .bar:nth-child(1){left:16%;height:44%} .viz--balance .bar:nth-child(2){left:26%;height:16%;background:var(--warn)} .viz--balance .bar:nth-child(3){left:36%;height:58%} .viz--balance .bar:nth-child(4){left:46%;height:28%} .viz--balance .bar:nth-child(5){left:56%;height:62%} .viz--balance .bar:nth-child(6){left:66%;height:12%;background:var(--warn)} .viz--balance .bar:nth-child(7){left:76%;height:40%} .agent-card:hover .viz--balance .bar{height:42%;background:var(--accent)} .viz--balance .ln{height:1px;left:12%;right:12%;top:36%;border-top:1px dashed var(--line-l2);background:none} .sec-dark .viz--balance .ln{border-color:var(--line-d2)} .viz--balance .bar:nth-child(2){transition-delay:.08s}.viz--balance .bar:nth-child(4){transition-delay:.14s}.viz--balance .bar:nth-child(6){transition-delay:.2s} /* --- 04 cluster (SEO): keywords converge into three clusters --- */ .viz--cluster .dot{border-radius:50%} .viz--cluster .dot:nth-child(1){left:12%;top:24%}.viz--cluster .dot:nth-child(2){left:34%;top:14%} .viz--cluster .dot:nth-child(3){left:56%;top:30%}.viz--cluster .dot:nth-child(4){left:20%;top:60%} .viz--cluster .dot:nth-child(5){left:44%;top:74%}.viz--cluster .dot:nth-child(6){left:66%;top:60%} .viz--cluster .dot:nth-child(7){left:80%;top:22%}.viz--cluster .dot:nth-child(8){left:78%;top:76%} .viz--cluster .dot:nth-child(9){left:8%;top:82%} .agent-card:hover .viz--cluster .dot{background:var(--accent)} .agent-card:hover .viz--cluster .dot:nth-child(1){transform:translate(28px,14px)} .agent-card:hover .viz--cluster .dot:nth-child(2){transform:translate(-4px,26px)} .agent-card:hover .viz--cluster .dot:nth-child(9){transform:translate(64px,-46px)} .agent-card:hover .viz--cluster .dot:nth-child(4){transform:translate(96px,14px)} .agent-card:hover .viz--cluster .dot:nth-child(5){transform:translate(28px,-4px)} .agent-card:hover .viz--cluster .dot:nth-child(8){transform:translate(-56px,-10px)} .agent-card:hover .viz--cluster .dot:nth-child(3){transform:translate(76px,-8px)} .agent-card:hover .viz--cluster .dot:nth-child(6){transform:translate(38px,-42px)} .agent-card:hover .viz--cluster .dot:nth-child(7){transform:translate(4px,6px)} .viz--cluster .ring:nth-child(10){width:44px;height:44px;left:24%;top:26%} .viz--cluster .ring:nth-child(11){width:44px;height:44px;left:52%;top:52%} .viz--cluster .ring:nth-child(12){width:44px;height:44px;left:74%;top:16%} /* --- 05 merge (Reporting): scatter → mini bar chart --- */ .viz--merge .ln{height:1px;left:16%;right:16%;bottom:24%} .viz--merge .dot:nth-child(1){left:14%;top:18%}.viz--merge .dot:nth-child(2){left:40%;top:12%} .viz--merge .dot:nth-child(3){left:70%;top:20%}.viz--merge .dot:nth-child(4){left:24%;top:48%} .viz--merge .dot:nth-child(5){left:58%;top:44%}.viz--merge .dot:nth-child(6){left:84%;top:40%} .viz--merge .dot:nth-child(7){left:34%;top:70%}.viz--merge .dot:nth-child(8){left:66%;top:66%} .agent-card:hover .viz--merge .dot{background:var(--accent)} /* columns at 24% / 42% / 60% / 78%, stacking up from baseline (bottom 24% ≈ top 69%) */ .agent-card:hover .viz--merge .dot:nth-child(1){transform:translate(24px,60px)} .agent-card:hover .viz--merge .dot:nth-child(4){transform:translate(0,14px)} .agent-card:hover .viz--merge .dot:nth-child(2){transform:translate(5px,58px)} .agent-card:hover .viz--merge .dot:nth-child(7){transform:translate(19px,-12px)} .agent-card:hover .viz--merge .dot:nth-child(5){transform:translate(5px,22px)} .agent-card:hover .viz--merge .dot:nth-child(8){transform:translate(-14px,-8px)} .agent-card:hover .viz--merge .dot:nth-child(3){transform:translate(20px,48px)} .agent-card:hover .viz--merge .dot:nth-child(6){transform:translate(-14px,18px)} /* --- 06 pipeline (Sales): leads flow right through gates --- */ .viz--pipeline .ln{height:1px;left:12%;right:12%;top:50%} .viz--pipeline .gate{width:1px;height:22px;top:calc(50% - 11px);background:var(--line-l2);opacity:0} .sec-dark .viz--pipeline .gate{background:var(--line-d2)} .viz--pipeline .gate:nth-child(6){left:38%}.viz--pipeline .gate:nth-child(7){left:58%}.viz--pipeline .gate:nth-child(8){left:78%} .agent-card:hover .viz--pipeline .gate{opacity:1} .viz--pipeline .dot{border-radius:50%} .viz--pipeline .dot:nth-child(1){left:14%;top:26%} .viz--pipeline .dot:nth-child(2){left:10%;top:48%} .viz--pipeline .dot:nth-child(3){left:16%;top:70%} .viz--pipeline .dot:nth-child(4){left:8%;top:60%} .agent-card:hover .viz--pipeline .dot{background:var(--accent);top:calc(50% - 3.5px)} .agent-card:hover .viz--pipeline .dot:nth-child(1){transform:translateX(150px)} .agent-card:hover .viz--pipeline .dot:nth-child(2){transform:translateX(112px);transition-delay:.08s} .agent-card:hover .viz--pipeline .dot:nth-child(3){transform:translateX(70px);transition-delay:.16s} .agent-card:hover .viz--pipeline .dot:nth-child(4){transform:translateX(34px);transition-delay:.24s} .viz--pipeline .dot{transition-property:transform,background,top} /* --- 07 stamp (Admin): documents align and get approved --- */ .viz--stamp .doc{width:34px;height:44px;border:1.5px solid var(--line-l2);border-radius:4px;background:transparent} .sec-dark .viz--stamp .doc{border-color:var(--line-d2)} .viz--stamp .doc::before,.viz--stamp .doc::after{content:"";position:absolute;left:6px;right:6px;height:1.5px;background:currentColor;opacity:.3;color:inherit} .viz--stamp .doc::before{top:10px}.viz--stamp .doc::after{top:17px} .viz--stamp .doc:nth-child(1){left:16%;top:30%;transform:rotate(-7deg)} .viz--stamp .doc:nth-child(2){left:42%;top:24%;transform:rotate(4deg)} .viz--stamp .doc:nth-child(3){left:68%;top:32%;transform:rotate(-3deg)} .agent-card:hover .viz--stamp .doc{transform:rotate(0) translateY(-4px);border-color:var(--accent)} .viz--stamp .ok{width:9px;height:9px;border-radius:50%;background:var(--live);opacity:0;box-shadow:0 0 8px rgba(62,207,142,.6)} .viz--stamp .ok:nth-child(4){left:calc(16% + 26px);top:26%} .viz--stamp .ok:nth-child(5){left:calc(42% + 26px);top:20%} .viz--stamp .ok:nth-child(6){left:calc(68% + 26px);top:28%} .agent-card:hover .viz--stamp .ok{opacity:1;transform:translateY(-4px)} .agent-card:hover .viz--stamp .ok:nth-child(4){transition-delay:.15s} .agent-card:hover .viz--stamp .ok:nth-child(5){transition-delay:.3s} .agent-card:hover .viz--stamp .ok:nth-child(6){transition-delay:.45s} .viz--stamp .doc:nth-child(2){transition-delay:.06s}.viz--stamp .doc:nth-child(3){transition-delay:.12s} /* ============================================================ V3, brand refinements ============================================================ */ /* De labellaag. Sinds 7 augustus staat die voluit in kapitalen: het is de kleine stem van het merk en die moet als label lezen, niet als zinnetje. Geist Mono zet zelf al ruimte tussen de letters, dus de tracking blijft laag (--micro-track-sm), anders lopen de kolommen uit. */ .mono,.eyebrow,.chip,.card .mono-top,.hero-status,.cta-note,.crumbs,.scan-top, .footer h4,.stat-band span,.ba .tag,.detail-body h4,.detail-foot .meta,.gates .g-num, .step .num,.price-card .tier,.placeholder-note,.res-head,.res-item .k,.field label, .cmp th,.footer-bottom,.hero-scroll,.badge{font-weight:500;text-transform:uppercase; letter-spacing:var(--micro-track-sm)} /* nav button contrast fix (was white-on-white) */ .nav .btn-primary{color:var(--ink-0)} .nav.on-light .btn-primary{color:#fff} .nav .lang{font-size:.78rem;font-weight:500;letter-spacing:.08em;opacity:.6;padding:.5em .6em} .nav .lang:hover{opacity:1} /* ---------- crossfade section transitions (scroll-linked veil) ---------- */ .fade-veil{position:absolute;top:0;left:0;right:0;height:34vh;z-index:1;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,#000,#000 calc(var(--veil,1)*100% - 60px),transparent calc(var(--veil,1)*100%)); mask-image:linear-gradient(180deg,#000,#000 calc(var(--veil,1)*100% - 60px),transparent calc(var(--veil,1)*100%))} .fade-veil.from-dark{background:var(--ink-0)} .fade-veil.from-light{background:var(--bone-0)} @media (prefers-reduced-motion:reduce){.fade-veil{display:none}} /* ---------- marquees ---------- */ .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .marquee-track{display:flex;align-items:center;gap:clamp(44px,6vw,88px);width:max-content;animation:marq var(--dur,46s) linear infinite;will-change:transform} .marquee-track.rev{animation-direction:reverse} @keyframes marq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}} .marquee-label{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-dim);text-align:center;margin-bottom:26px} .integ-chip{font-size:.8rem;font-weight:500;letter-spacing:.03em;padding:.65em 1.25em;border:1px solid var(--line-d);border-radius:999px;color:var(--tx-mid);white-space:nowrap} .marquee + .marquee{margin-top:12px} .marquee.tools .marquee-track{gap:12px} /* ---------- clickable case + reviews ---------- */ a.case-link{display:block;color:inherit} a.case-link .ba{transition:border-color .25s,box-shadow .35s var(--ease-out),transform .45s var(--ease-out)} a.case-link:hover .ba{border-color:var(--line-l2);box-shadow:0 22px 54px rgba(15,15,19,.09);transform:translateY(-3px)} a.case-link .case-open{display:inline-flex;align-items:center;gap:.5em;font-weight:500;font-size:.88rem;margin-top:18px} a.case-link .case-open .arr{transition:transform .3s var(--ease-out)} a.case-link:hover .case-open .arr{transform:translateX(4px)} .reviews-line{display:flex;align-items:center;gap:.8em;margin-top:26px;font-weight:500;font-size:.95rem} .reviews-line .stars-row{color:var(--accent);letter-spacing:.15em;font-size:1rem} .reviews-line span{color:var(--tx-ink-mid);font-weight:400} .sec-dark .reviews-line span{color:var(--tx-mid)} .sec-dark .reviews-line .stars-row,.sec-dark-1 .reviews-line .stars-row{color:var(--accent)} /* proof-of-work BEFORE/AFTER card on dark sections */ .sec-dark .ba,.sec-dark-1 .ba{background:rgba(255,255,255,.03);border-color:var(--line-d)} .sec-dark .ba .before,.sec-dark-1 .ba .before{border-right-color:var(--line-d); background:repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(255,255,255,.022) 10px,rgba(255,255,255,.022) 11px)} .sec-dark .ba .before .tag,.sec-dark-1 .ba .before .tag{color:var(--tx-mid)} .sec-dark .ba ul,.sec-dark-1 .ba ul{color:var(--tx-mid)} .sec-dark .ba .before li::before,.sec-dark-1 .ba .before li::before{color:var(--tx-mid)} .sec-dark a.case-link:hover .ba,.sec-dark-1 a.case-link:hover .ba{border-color:var(--line-d2);box-shadow:0 22px 54px rgba(0,0,0,.45)} .sec-dark .case-metrics .m span,.sec-dark-1 .case-metrics .m span{color:var(--tx-mid)} @media(max-width:720px){.sec-dark .ba .before,.sec-dark-1 .ba .before{border-bottom-color:var(--line-d)}} /* ---------- how-it-works animated diagram ---------- */ .flow-diagram{display:grid;grid-template-columns:repeat(7,1fr);gap:12px} .flow-node{position:relative;border:1px solid var(--line-d2);border-radius:12px;padding:18px 12px 16px;background:rgba(255,255,255,.02);text-align:left} .flow-node .fnum{display:block;font-size:.64rem;font-weight:500;letter-spacing:.14em;color:var(--tx-dim);margin-bottom:10px} .flow-node .fname{font-size:.86rem;font-weight:500;line-height:1.3} .flow-node::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--tx-dim);font-size:.8rem;z-index:2} .flow-node:last-child::after{display:none} @keyframes nodeglow{0%,16%,100%{border-color:var(--line-d2);box-shadow:none}6%{border-color:var(--accent);box-shadow:0 0 26px rgba(217,127,151,.4)}} .flow-node{animation:nodeglow 9.1s infinite} .flow-node:nth-child(1){animation-delay:0s}.flow-node:nth-child(2){animation-delay:1.3s} .flow-node:nth-child(3){animation-delay:2.6s}.flow-node:nth-child(4){animation-delay:3.9s} .flow-node:nth-child(5){animation-delay:5.2s}.flow-node:nth-child(6){animation-delay:6.5s} .flow-node:nth-child(7){animation-delay:7.8s} @media (max-width:1080px){.flow-diagram{grid-template-columns:repeat(4,1fr)}.flow-node:nth-child(4)::after{display:none}} @media (max-width:640px){.flow-diagram{grid-template-columns:repeat(2,1fr)}.flow-node::after{display:none}} @media (prefers-reduced-motion:reduce){.flow-node{animation:none}} /* ---------- werkcyclus, de negen stappen als ring ---------- Los van .flow-diagram: die staat hard op 7 kolommen met een gloedanimatie die op 7 getimed is. En een rij zegt "begin, dan einde", terwijl de negende stap juist de eerste voedt. Een ring zegt dat zonder één woord extra. Het accent markeert precies één ding: de stap die nu aan staat. De poort (stap 07) draagt daarom een gestippelde tweede ring en geen kleur, anders vechten er twee markeringen om dezelfde aandacht. */ .cyc-wrap{display:grid;gap:36px;align-items:center} /* Pas twee kolommen als er ook echt plek is voor allebei. Bij 900px hield de ring 510 over en zakte de tekstkolom naar 251: dertig tekens per regel. Ring 510 + tussenruimte + minstens 380 voor de tekst = rond de 1060. */ @media(min-width:1060px){.cyc-wrap{grid-template-columns:minmax(0,510px) minmax(0,1fr);gap:clamp(36px,4.5vw,64px)}} /* Plafond, want gestapeld zou de ring de volle containerbreedte pakken en dan is hij bijna een meter breed op een laptop. */ .cyc-ring{width:100%;max-width:520px;height:auto;overflow:visible;display:block;margin:0 auto} .cyc-ring .arc{fill:none;stroke:var(--line-d);stroke-width:1} .cyc-ring .gate{fill:none;stroke:var(--line-d2);stroke-width:1;stroke-dasharray:2 4} .cyc-ring .node{cursor:pointer} .cyc-ring .node circle{fill:rgba(255,255,255,.025);stroke:var(--line-d2);stroke-width:1; transition:stroke .55s var(--ease-out),fill .55s var(--ease-out)} .cyc-ring .node text{font-family:var(--font-mono);text-anchor:middle; transition:fill .55s var(--ease-out);pointer-events:none} .cyc-ring .node .num{font-size:10px;font-weight:500;letter-spacing:.06em;fill:var(--tx-dim)} .cyc-ring .node .nm{font-size:9.5px;font-weight:500;letter-spacing:.03em;fill:var(--tx-mid)} .cyc-ring .node:hover circle,.cyc-ring .node:focus-visible circle{stroke:var(--tx-mid)} .cyc-ring .node:focus{outline:none} .cyc-ring .node.on circle{stroke:var(--accent);fill:var(--accent-soft)} .cyc-ring .node.on .num{fill:var(--accent)} .cyc-ring .node.on .nm{fill:var(--tx-hi)} .cyc-cap{margin-top:18px;font-size:.8rem;color:var(--tx-dim);text-align:center;max-width:46ch; margin-left:auto;margin-right:auto} /* Alle negen panelen liggen op elkaar in dezelfde rastercel. Daardoor is de hoogte die van het langste paneel en springt er niets bij het wisselen; dat springen was het hakkelen. Wisselen is dan puur een overvloeiing. */ .cyc-panel{display:grid} .cyc-p{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),visibility .55s} .cyc-p.on{opacity:1;visibility:visible;transform:none} .cyc-p .k{display:block;font-family:var(--font-mono);font-size:.66rem;font-weight:500; letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px} .cyc-p h3{font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:400;letter-spacing:-.015em; margin:0 0 .85rem;max-width:19ch;text-wrap:balance} .cyc-p p{color:var(--tx-mid);max-width:52ch;margin:0} .cyc-p .ex{margin-top:20px;border-left:1px solid var(--line-d2);padding:2px 0 2px 16px; color:var(--tx-dim);font-size:.9rem} .cyc-p .ex b{color:var(--tx-mid);font-weight:500} .cyc-more{display:inline-flex;align-items:center;gap:.5em;margin-top:22px;font-size:.86rem; color:var(--tx-mid);border-bottom:1px solid var(--line-d2);padding-bottom:2px; transition:color .2s,border-color .2s} .cyc-more:hover{color:var(--tx-hi);border-color:var(--tx-mid)} /* De hint hangt aan .js, die cycle.js zelf zet. Valt alleen dat script uit terwijl de rest laadt, dan staat er geen "klik een stap aan" boven iets dat niet klikt. Een echte no-JS-terugval heeft geen zin: .rv zet de hele pagina op opacity 0 tot main.js hem aanzet, dus zonder JS is er niets te zien. */ .cyc-hint{display:none} .js .cyc-hint{display:block;margin-top:26px;font-size:.76rem;color:var(--tx-dim)} @media (prefers-reduced-motion:reduce){ .cyc-ring .node circle,.cyc-ring .node text{transition:none} .cyc-p{transition:none;transform:none} } /* ---------- dept jump nav (use cases) ---------- */ .dept-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px} .dept-chip{display:inline-flex;align-items:center;gap:.55em;border:1px solid var(--line-d2);border-radius:999px;padding:.55em 1.05em;font-size:.76rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-mid);transition:border-color .2s,color .2s,background .2s} .dept-chip:hover{border-color:rgba(255,255,255,.4);color:var(--tx-hi);background:rgba(255,255,255,.04)} .cat-dot{width:7px;height:7px;border-radius:50%;background:var(--c,#8a8a94);flex-shrink:0} .detail .cat-dot{display:inline-block;margin-right:.55em;vertical-align:1px} /* ---------- agent library ---------- */ .agent-toolbar{display:grid;gap:16px;margin-bottom:40px} .agent-search input{width:100%;max-width:520px;font:inherit;font-size:.95rem;padding:.9em 1.1em;border-radius:var(--r-md);border:1px solid var(--line-l2);background:#fff;color:var(--tx-ink)} .agent-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .cat-chips{display:flex;flex-wrap:wrap;gap:8px} .cat-chip{display:inline-flex;align-items:center;gap:.55em;border:1px solid var(--line-l);border-radius:999px;padding:.55em 1.05em;font-size:.74rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-ink-mid);background:var(--bone-1);transition:border-color .2s,color .2s;cursor:pointer} .cat-chip:hover{border-color:var(--line-l2)} .cat-chip[aria-pressed="true"]{border-color:var(--tx-ink);color:var(--tx-ink)} .agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:960px){.agent-grid{grid-template-columns:1fr 1fr}} @media (max-width:620px){.agent-grid{grid-template-columns:1fr}} .agent-card.mini{min-height:auto;padding:24px} .agent-card.mini .viz{height:96px;margin:-24px -24px 18px} .agent-card.mini h3{font-size:1.06rem} .agent-card.mini p{font-size:.88rem} .badge{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-l);border-radius:999px;padding:.35em .8em;color:var(--tx-ink-mid)} .badge.new{border-color:var(--accent);color:var(--accent)} .agent-empty{color:var(--tx-ink-mid);padding:40px 0;text-align:center;grid-column:1/-1} .agent-count{font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-ink-mid)} /* roster toolbar on dark: glass search + filter chips (translucent, no blur, nothing behind to blur) */ .sec-dark .agent-search input,.sec-dark-1 .agent-search input{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--tx-hi)} .sec-dark .agent-search input::placeholder,.sec-dark-1 .agent-search input::placeholder{color:var(--tx-dim)} .sec-dark .cat-chip,.sec-dark-1 .cat-chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--tx-mid)} .sec-dark .cat-chip:hover,.sec-dark-1 .cat-chip:hover{border-color:rgba(255,255,255,.32);color:var(--tx-hi)} .sec-dark .cat-chip[aria-pressed="true"],.sec-dark-1 .cat-chip[aria-pressed="true"]{border-color:rgba(255,255,255,.55);color:var(--tx-hi);background:rgba(255,255,255,.12)} .sec-dark .agent-count,.sec-dark-1 .agent-count{color:var(--tx-mid)} /* ---------- bibliotheek: de kleur draagt de chip (B), gedrag (C) ---------- Het grijze vlak met de lichtgrijze rand is eruit. Elke chip krijgt een fluistering van zijn eigen categoriekleur, vulling en hairline uit dezelfde tint, zodat de kleur de vorm draagt in plaats van als bolletje op grijs te liggen. Actief = diezelfde kleur, alleen luider. */ .sec-dark .cat-chip,.sec-dark-1 .cat-chip{ background:color-mix(in srgb,var(--c,#8a8a94) 9%,transparent); border-color:color-mix(in srgb,var(--c,#8a8a94) 26%,transparent); color:var(--tx-hi)} .sec-dark .cat-chip:hover,.sec-dark-1 .cat-chip:hover{ background:color-mix(in srgb,var(--c,#8a8a94) 16%,transparent); border-color:color-mix(in srgb,var(--c,#8a8a94) 45%,transparent); color:var(--tx-hi)} .sec-dark .cat-chip[aria-pressed="true"],.sec-dark-1 .cat-chip[aria-pressed="true"]{ background:color-mix(in srgb,var(--c,#8a8a94) 22%,transparent); border-color:color-mix(in srgb,var(--c,#8a8a94) 72%,transparent); color:#fff;box-shadow:0 0 0 1px color-mix(in srgb,var(--c,#8a8a94) 22%,transparent)} /* "All" heeft geen categoriekleur: die leunt op het merkaccent */ .sec-dark .cat-chip[data-cat="all"],.sec-dark-1 .cat-chip[data-cat="all"]{--c:var(--accent)} .cat-chip{transition:border-color .2s,color .2s,background .2s,box-shadow .2s} /* het getal telt mee: tabular-nums voorkomt breedtespring tijdens het tellen */ .agent-count .cnum{font-variant-numeric:tabular-nums;color:var(--tx-hi);font-weight:600} /* zoekveld: rustiger rand, amber pas bij focus (bestond al via --accent) */ .sec-dark .agent-search input:focus,.sec-dark-1 .agent-search input:focus{ border-color:color-mix(in srgb,var(--accent) 60%,transparent); box-shadow:0 0 0 3px var(--accent-soft)} @keyframes agentCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .agent-grid.restagger>.agent-card{ animation:agentCardIn .42s var(--ease-out) both; animation-delay:calc(var(--i,0) * 26ms)} @media (prefers-reduced-motion:reduce){ .agent-grid.restagger>.agent-card{animation:none}} /* ---------- extra viz variants (9 new) ---------- */ /* radar: rotating sweep inside a ring */ .viz--radar .ring{width:64px;height:64px;left:calc(50% - 32px);top:calc(50% - 32px);opacity:.6;border-style:solid;border-color:var(--line-l2)} .sec-dark .viz--radar .ring{border-color:var(--line-d2)} .viz--radar .sweep{width:32px;height:1.5px;background:linear-gradient(90deg,transparent,var(--accent));left:50%;top:50%;transform-origin:left center;opacity:0} .viz--radar .dot{border-radius:50%;opacity:0} .viz--radar .dot:nth-child(3){left:36%;top:32%}.viz--radar .dot:nth-child(4){left:60%;top:62%}.viz--radar .dot:nth-child(5){left:58%;top:34%} .agent-card:hover .viz--radar .sweep{opacity:1;animation:vsweep 1.8s linear infinite} .agent-card:hover .viz--radar .dot{opacity:1;background:var(--accent);transition-delay:.4s} @keyframes vsweep{to{transform:rotate(360deg)}} /* rise: bars grow into ascending staircase */ .viz--rise .bar{width:10px;bottom:24%;height:12%;border-radius:3px 3px 0 0;background:var(--line-l2)} .sec-dark .viz--rise .bar{background:var(--line-d2)} .viz--rise .bar:nth-child(1){left:22%}.viz--rise .bar:nth-child(2){left:34%} .viz--rise .bar:nth-child(3){left:46%}.viz--rise .bar:nth-child(4){left:58%} .viz--rise .bar:nth-child(5){left:70%} .agent-card:hover .viz--rise .bar{background:var(--accent)} .agent-card:hover .viz--rise .bar:nth-child(1){height:20%} .agent-card:hover .viz--rise .bar:nth-child(2){height:30%;transition-delay:.06s} .agent-card:hover .viz--rise .bar:nth-child(3){height:40%;transition-delay:.12s} .agent-card:hover .viz--rise .bar:nth-child(4){height:50%;transition-delay:.18s} .agent-card:hover .viz--rise .bar:nth-child(5){height:60%;transition-delay:.24s} .viz--rise .ln{height:1px;left:16%;right:16%;bottom:24%;opacity:1;background:var(--line-l2)} /* stars5: rating fills */ .viz--stars5 .st{font-size:17px;line-height:1;color:var(--line-l2);top:calc(50% - 9px);transition:color .35s,transform .45s var(--ease-out)} .sec-dark .viz--stars5 .st{color:var(--line-d2)} .viz--stars5 .st:nth-child(1){left:24%}.viz--stars5 .st:nth-child(2){left:35%} .viz--stars5 .st:nth-child(3){left:46%}.viz--stars5 .st:nth-child(4){left:57%} .viz--stars5 .st:nth-child(5){left:68%} .agent-card:hover .viz--stars5 .st{color:var(--warn);transform:translateY(-3px)} .agent-card:hover .viz--stars5 .st:nth-child(2){transition-delay:.08s} .agent-card:hover .viz--stars5 .st:nth-child(3){transition-delay:.16s} .agent-card:hover .viz--stars5 .st:nth-child(4){transition-delay:.24s} .agent-card:hover .viz--stars5 .st:nth-child(5){transition-delay:.32s} /* orbit: dots circle a core */ .viz--orbit .core{width:12px;height:12px;border-radius:4px;border:1.5px solid var(--accent);left:calc(50% - 6px);top:calc(50% - 6px);box-shadow:0 0 12px rgba(217,127,151,.4)} .viz--orbit .orb{width:60px;height:60px;left:calc(50% - 30px);top:calc(50% - 30px);border-radius:50%} .viz--orbit .orb i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--tx-dim);top:-3.5px;left:calc(50% - 3.5px)} .viz--orbit .orb:nth-child(3){width:88px;height:88px;left:calc(50% - 44px);top:calc(50% - 44px)} .agent-card:hover .viz--orbit .orb{animation:vorbit 3.4s linear infinite} .agent-card:hover .viz--orbit .orb:nth-child(3){animation-duration:5.2s;animation-direction:reverse} .agent-card:hover .viz--orbit .orb i{background:var(--accent)} @keyframes vorbit{to{transform:rotate(360deg)}} /* pulse: monitoring rings */ .viz--pulse .core{width:9px;height:9px;border-radius:50%;background:var(--accent);left:calc(50% - 4.5px);top:calc(50% - 4.5px);box-shadow:0 0 12px rgba(217,127,151,.6)} .viz--pulse .ring{width:20px;height:20px;left:calc(50% - 10px);top:calc(50% - 10px);border-style:solid;opacity:0} .agent-card:hover .viz--pulse .ring{animation:vpulse 2s ease-out infinite} .agent-card:hover .viz--pulse .ring:nth-child(3){animation-delay:.65s} .agent-card:hover .viz--pulse .ring:nth-child(4){animation-delay:1.3s} @keyframes vpulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(3.4);opacity:0}} /* grid: planner cells fill */ .viz--grid .cell{width:12px;height:12px;border-radius:3px;border:1px solid var(--line-l2)} .sec-dark .viz--grid .cell{border-color:var(--line-d2)} .viz--grid .cell:nth-child(1){left:30%;top:26%}.viz--grid .cell:nth-child(2){left:44%;top:26%} .viz--grid .cell:nth-child(3){left:58%;top:26%}.viz--grid .cell:nth-child(4){left:30%;top:46%} .viz--grid .cell:nth-child(5){left:44%;top:46%}.viz--grid .cell:nth-child(6){left:58%;top:46%} .viz--grid .cell:nth-child(7){left:30%;top:66%}.viz--grid .cell:nth-child(8){left:44%;top:66%} .viz--grid .cell:nth-child(9){left:58%;top:66%} .agent-card:hover .viz--grid .cell{background:var(--accent);border-color:var(--accent)} .agent-card:hover .viz--grid .cell:nth-child(2){transition-delay:.05s} .agent-card:hover .viz--grid .cell:nth-child(3){transition-delay:.1s} .agent-card:hover .viz--grid .cell:nth-child(4){transition-delay:.15s} .agent-card:hover .viz--grid .cell:nth-child(5){transition-delay:.2s} .agent-card:hover .viz--grid .cell:nth-child(6){transition-delay:.25s} .agent-card:hover .viz--grid .cell:nth-child(7){transition-delay:.3s} .agent-card:hover .viz--grid .cell:nth-child(8){transition-delay:.35s} .agent-card:hover .viz--grid .cell:nth-child(9){transition-delay:.4s} /* chat: bubbles pop in */ .viz--chat .bub{border:1px solid var(--line-l2);border-radius:10px;width:34%;height:16px;opacity:.45;transform:scale(.85);transform-origin:left bottom} .sec-dark .viz--chat .bub{border-color:var(--line-d2)} .viz--chat .bub:nth-child(1){left:16%;top:22%} .viz--chat .bub:nth-child(2){left:48%;top:44%;transform-origin:right bottom;border-color:var(--accent);opacity:.3} .viz--chat .bub:nth-child(3){left:16%;top:66%} .agent-card:hover .viz--chat .bub{opacity:1;transform:scale(1)} .agent-card:hover .viz--chat .bub:nth-child(2){transition-delay:.14s;background:var(--accent-soft)} .agent-card:hover .viz--chat .bub:nth-child(3){transition-delay:.28s} /* shield: check inside guarded ring */ .viz--shield .ring{width:46px;height:46px;left:calc(50% - 23px);top:calc(50% - 23px);border-style:solid;opacity:.7;border-color:var(--line-l2)} .sec-dark .viz--shield .ring{border-color:var(--line-d2)} .viz--shield .chk{width:14px;height:8px;border-left:2px solid var(--live);border-bottom:2px solid var(--live);left:calc(50% - 7px);top:calc(50% - 6px);transform:rotate(-45deg) scale(0);opacity:0} .viz--shield .blk{width:7px;height:7px;border-radius:50%;background:var(--tx-dim);left:12%;top:calc(50% - 3.5px)} .agent-card:hover .viz--shield .ring{border-color:var(--accent);box-shadow:0 0 18px rgba(217,127,151,.35)} .agent-card:hover .viz--shield .chk{transform:rotate(-45deg) scale(1);opacity:1;transition-delay:.25s} .agent-card:hover .viz--shield .blk{transform:translateX(26px);opacity:0;transition-delay:.05s} /* weave: two streams merge into one */ .viz--weave .ln{height:1px;opacity:1;background:var(--line-l2)} .sec-dark .viz--weave .ln{background:var(--line-d2)} .viz--weave .ln:nth-child(1){left:14%;width:30%;top:32%} .viz--weave .ln:nth-child(2){left:14%;width:30%;top:68%} .viz--weave .ln:nth-child(3){left:52%;width:34%;top:50%} .viz--weave .dot{border-radius:50%} .viz--weave .dot:nth-child(4){left:16%;top:calc(32% - 3.5px)} .viz--weave .dot:nth-child(5){left:26%;top:calc(68% - 3.5px)} .viz--weave .dot:nth-child(6){left:34%;top:calc(32% - 3.5px)} .agent-card:hover .viz--weave .dot{background:var(--accent)} .agent-card:hover .viz--weave .dot:nth-child(4){transform:translate(96px,23px)} .agent-card:hover .viz--weave .dot:nth-child(5){transform:translate(72px,-23px);transition-delay:.1s} .agent-card:hover .viz--weave .dot:nth-child(6){transform:translate(56px,23px);transition-delay:.2s} @media (prefers-reduced-motion:reduce){ .agent-card:hover .viz--radar .sweep,.agent-card:hover .viz--orbit .orb,.agent-card:hover .viz--pulse .ring{animation:none} } /* ---------- v4 refinements ---------- */ .price-card{color:var(--tx-ink)} .sec-light .price-card p.sub-amount{color:var(--tx-ink)} .sec-light .price-card ul{color:var(--tx-ink)} .price-card p.amount, .sec-light .price-card p.amount{color:var(--tx-ink)} .price-card .tier{color:var(--tx-ink-mid)} .sec-tight{--sec-y:clamp(64px,8vw,104px)} /* pricing USP trio */ .win-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0 8px} @media (max-width:860px){.win-trio{grid-template-columns:1fr}} .win-trio .win{border:1px solid var(--line-l);border-radius:var(--r-md);padding:24px;background:var(--bone-1)} .win-trio .win b{display:block;font-weight:500;margin-bottom:8px} .win-trio .win p{font-size:.92rem;color:var(--tx-ink-mid);margin:0} .win-trio .win .vs{display:block;font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px} /* USP band replaces stat band semantics (reuse .stat-band) */ .stat-band span{max-width:26ch} /* marquee label aligned with hero text */ .marquee-label.left{text-align:left;max-width:var(--w-max);margin-left:auto;margin-right:auto;padding:0 var(--pad-x)} /* client logo lockups */ .cm-nm{font-weight:500;font-size:1.05rem;letter-spacing:-.01em} .cm-nm i{font-style:normal;color:var(--accent)} .cm-tr{font-weight:500;font-size:.98rem;letter-spacing:.22em;text-transform:uppercase} .cm-gr{font-family:var(--font-display);font-size:1.08rem;letter-spacing:.14em} .cm-vc{font-family:var(--font-display);font-size:1rem;letter-spacing:.24em} .cm-sn{font-family:var(--font-display);font-style:italic;font-size:1.14rem;letter-spacing:.01em} .cm-bx{font-weight:500;font-size:1.16rem;letter-spacing:-.03em} /* tool chips with real logos */ .integ-chip{display:inline-flex;align-items:center;gap:.6em;transition:border-color .25s,color .25s,box-shadow .3s} .integ-chip:hover{border-color:var(--accent);color:var(--tx-hi);box-shadow:0 0 18px rgba(217,127,151,.35)} .tool-row .integ-chip:hover{color:var(--tx-ink);box-shadow:0 0 14px rgba(217,127,151,.25)} .integ-chip img{width:16px;height:16px;display:block} .sec-dark .integ-chip{background:rgba(255,255,255,.03)} /* integration category rows with logos (integrations page) */ .tool-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .tool-row .integ-chip{border-color:var(--line-l);color:var(--tx-ink-mid);background:#fff} .tool-row .integ-chip.more{border-style:dashed;border-color:var(--line-l2);color:var(--tx-dim);background:transparent} .tool-row .integ-chip.more:hover{border-color:var(--line-l2);color:var(--tx-dim);box-shadow:none} /* home process timeline */ .timeline{position:relative;padding-left:44px;max-width:820px} .timeline::before{content:"";position:absolute;left:12px;top:6px;bottom:6px;width:1px;background:var(--line-l2)} .timeline .tl-progress{position:absolute;left:12px;top:6px;width:1px;background:var(--accent);height:calc(var(--tlp,0)*1%);max-height:calc(100% - 12px);box-shadow:0 0 12px rgba(217,127,151,.5);transition:height .15s linear} .tl-step{position:relative;padding:26px 0} .tl-step + .tl-step{border-top:1px solid var(--line-l)} .tl-step::before{content:"";position:absolute;left:-38px;top:34px;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--line-l2);background:var(--bone-0);transition:border-color .4s,box-shadow .4s,background .4s} .tl-step.on::before{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 14px rgba(217,127,151,.45)} .tl-step .tl-num{font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-ink-mid);display:block;margin-bottom:6px} .tl-step h3{margin-bottom:6px} .tl-step p{color:var(--tx-ink-mid);font-size:.95rem;margin:0;max-width:56ch} /* timeline on dark sections: light connector line, circles, labels & text */ .sec-dark .timeline::before,.sec-dark-1 .timeline::before{background:var(--line-d2)} .sec-dark .tl-step::before,.sec-dark-1 .tl-step::before{border-color:var(--line-d2);background:var(--ink-0)} .sec-dark .tl-step.on::before,.sec-dark-1 .tl-step.on::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 14px rgba(217,127,151,.5)} .sec-dark .tl-step+.tl-step,.sec-dark-1 .tl-step+.tl-step{border-color:var(--line-d)} .sec-dark .tl-step .tl-num,.sec-dark-1 .tl-step .tl-num{color:var(--tx-mid)} .sec-dark .tl-step p,.sec-dark-1 .tl-step p{color:var(--tx-mid)} @media (prefers-reduced-motion:reduce){.timeline .tl-progress{transition:none}} /* book-a-call: smaller heading, static form */ .bac-hero h1{font-size:clamp(2rem,4vw,3.4rem)} /* ---------- book-a-call: beeld achter, glas eroverheen ---------- De Cal-embed is een iframe: glas werkt daar alleen als Cal zijn eigen achtergrond doorzichtig maakt (zie cssVarsPerTheme in de pagina). Het glas zit dus op de KAART eromheen, niet op de iframe zelf. Beeld staat op 'gedempt': zwaar geblurd en gedimd, want hier staat een kalender met datums en tijden overheen, dichte data. */ .bac-hero{position:relative;isolation:isolate;overflow:hidden} .bac-hero::before{content:"";position:absolute;inset:0;z-index:-2; background:url('../img/atmos/book-wash.webp') center/cover no-repeat; filter:saturate(.9) brightness(.82)} .bac-hero::after{content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(96deg, rgba(9,9,11,.93) 0%, rgba(9,9,11,.80) 34%, rgba(9,9,11,.58) 58%, rgba(9,9,11,.62) 100%), linear-gradient(180deg, rgba(9,9,11,.55) 0%, rgba(9,9,11,.30) 30%, rgba(9,9,11,.55) 74%, var(--ink-0) 100%)} /* De stappenlijst gebruikt .sec-dark alleen voor de licht-op-donker tekstkleuren, maar die class schildert óók een dicht ink-0-vlak. Hier moet het beeld erdoorheen, dus de vulling eruit; de tekstregels blijven werken omdat ze op de .sec-dark-voorouder matchen. */ .bac-hero .steps.sec-dark{background:transparent} /* de kaart om de embed wordt het glas */ .bac-hero .form-card{ background:rgba(12,12,15,.58); -webkit-backdrop-filter:blur(26px) saturate(1.15); backdrop-filter:blur(26px) saturate(1.15); border:1px solid rgba(255,255,255,.15); box-shadow:0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10)} /* Geneste backdrop-filter stapelt niet: een kind ziet de al-gefilterde uitvoer van de ouder. De embed krijgt dus geen eigen filter, alleen doorschijnendheid. */ .bac-hero #cal-booking{background:transparent} @media (max-width:820px){ .bac-hero::after{background: linear-gradient(180deg, rgba(9,9,11,.80) 0%, rgba(9,9,11,.62) 34%, rgba(9,9,11,.72) 74%, var(--ink-0) 100%)}} .form-card,.form-card:hover{transform:none!important;box-shadow:none!important} .form-card:hover{border-color:var(--line-l2)} [id]{scroll-margin-top:96px} /* ---------- v5 ---------- */ /* horizontal timeline on desktop */ @media (min-width:980px){ .timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;padding-left:0;max-width:none} .timeline::before{left:6px;right:6px;top:6px;bottom:auto;width:auto;height:1px} .timeline .tl-progress{left:6px;top:6px;height:1px;max-height:none;width:calc(var(--tlp,0) * 1%);max-width:calc(100% - 12px);transition:width .15s linear} .tl-step{padding:36px 0 0} .tl-step + .tl-step{border-top:0} .tl-step::before{left:0;top:0} .tl-step p{max-width:none} } /* smooth FAQ */ .faq details{will-change:grid-template-rows} .faq .a{will-change:opacity} /* ---------- v6 ---------- */ html[lang="nl"] h1.display{font-size:clamp(2.1rem,4.3vw,4rem)} html[lang="nl"] .hero h1{max-width:16ch} /* per-agent viz uniqueness: category tint + mirrored/reversed modifiers */ .agent-card{--vizc:var(--accent)} .viz-flip{transform:scaleX(-1)} .viz-flipy{transform:scaleY(-1)} .agent-card:hover .viz--sort .dot, .agent-card:hover .viz--cluster .dot, .agent-card:hover .viz--merge .dot, .agent-card:hover .viz--pipeline .dot, .agent-card:hover .viz--weave .dot, .agent-card:hover .viz--rise .bar, .agent-card:hover .viz--balance .bar, .agent-card:hover .viz--grid .cell, .agent-card:hover .viz--radar .dot{background:var(--vizc)} .agent-card:hover .viz--grid .cell{border-color:var(--vizc)} .agent-card:hover .viz--route .bar:nth-child(1){background:var(--vizc)} .viz--route .target{border-color:var(--vizc)} .viz--sort .core, .viz--orbit .core{border-color:var(--vizc);box-shadow:0 0 14px color-mix(in srgb, var(--vizc) 45%, transparent)} .agent-card:hover .viz--orbit .orb i{background:var(--vizc)} .viz--pulse .core{background:var(--vizc);box-shadow:0 0 12px color-mix(in srgb, var(--vizc) 60%, transparent)} .agent-card:hover .viz--shield .ring{border-color:var(--vizc);box-shadow:0 0 18px color-mix(in srgb, var(--vizc) 35%, transparent)} .agent-card:hover .viz--radar .sweep{background:linear-gradient(90deg,transparent,var(--vizc))} .viz--chat .bub:nth-child(2){border-color:var(--vizc)} .agent-card:hover .viz--stars5 .st{color:var(--vizc)} .agent-card:hover .viz--stamp .doc{border-color:var(--vizc)} /* timing modifiers */ .viz-fast{--vt:.5s}.viz-slow{--vt:1.05s} /* six extra base variants */ /* mail: envelopes fly out right */ .viz--mail .env{width:26px;height:17px;border:1.5px solid var(--line-l2);border-radius:3px} .sec-dark .viz--mail .env{border-color:var(--line-d2)} .viz--mail .env::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 46%,currentColor 47%,transparent 54%),linear-gradient(to bottom left,transparent 46%,currentColor 47%,transparent 54%);opacity:.5} .viz--mail .env:nth-child(1){left:18%;top:26%} .viz--mail .env:nth-child(2){left:14%;top:52%} .viz--mail .env:nth-child(3){left:20%;top:74%} .agent-card:hover .viz--mail .env{border-color:var(--vizc)} .agent-card:hover .viz--mail .env:nth-child(1){transform:translate(120px,6px) rotate(6deg)} .agent-card:hover .viz--mail .env:nth-child(2){transform:translate(150px,-8px) rotate(-4deg);transition-delay:.1s} .agent-card:hover .viz--mail .env:nth-child(3){transform:translate(96px,-20px) rotate(3deg);transition-delay:.2s} /* target: dot arcs into a bullseye */ .viz--target .ring{opacity:.7;border-style:solid} .viz--target .ring:nth-child(1){width:56px;height:56px;right:14%;top:calc(50% - 28px)} .viz--target .ring:nth-child(2){width:30px;height:30px;right:calc(14% + 13px);top:calc(50% - 15px)} .viz--target .dot{border-radius:50%;left:12%;top:30%} .agent-card:hover .viz--target .dot{background:var(--vizc);transform:translate(150px,16px) scale(1.25)} .agent-card:hover .viz--target .ring{border-color:var(--vizc)} /* split: one stream fans out to three */ .viz--split .ln{height:1px;opacity:1;background:var(--line-l2)} .sec-dark .viz--split .ln{background:var(--line-d2)} .viz--split .ln:nth-child(1){left:12%;width:32%;top:50%} .viz--split .dot{border-radius:50%;left:14%;top:calc(50% - 3.5px)} .agent-card:hover .viz--split .dot{background:var(--vizc)} .agent-card:hover .viz--split .dot:nth-child(2){transform:translate(120px,-28px)} .agent-card:hover .viz--split .dot:nth-child(3){transform:translate(140px,0)} .agent-card:hover .viz--split .dot:nth-child(4){transform:translate(120px,28px)} .agent-card:hover .viz--split .dot:nth-child(3){transition-delay:.08s} .agent-card:hover .viz--split .dot:nth-child(4){transition-delay:.16s} /* wave: line of dots ripples upward */ .viz--wave .dot{border-radius:50%;top:58%} .viz--wave .dot:nth-child(1){left:18%}.viz--wave .dot:nth-child(2){left:29%} .viz--wave .dot:nth-child(3){left:40%}.viz--wave .dot:nth-child(4){left:51%} .viz--wave .dot:nth-child(5){left:62%}.viz--wave .dot:nth-child(6){left:73%} .agent-card:hover .viz--wave .dot{background:var(--vizc);transform:translateY(-22px)} .agent-card:hover .viz--wave .dot:nth-child(2){transition-delay:.07s} .agent-card:hover .viz--wave .dot:nth-child(3){transition-delay:.14s} .agent-card:hover .viz--wave .dot:nth-child(4){transition-delay:.21s} .agent-card:hover .viz--wave .dot:nth-child(5){transition-delay:.28s} .agent-card:hover .viz--wave .dot:nth-child(6){transition-delay:.35s} /* lock: shackle closes, body glows */ .viz--lock .body{width:30px;height:22px;border-radius:5px;background:var(--line-l2);left:calc(50% - 15px);top:48%} .sec-dark .viz--lock .body{background:var(--line-d2)} .viz--lock .shackle{width:20px;height:18px;border:2.5px solid var(--line-l2);border-bottom:0;border-radius:10px 10px 0 0;left:calc(50% - 10px);top:calc(48% - 14px);transform:translateY(-7px)} .sec-dark .viz--lock .shackle{border-color:var(--line-d2)} .agent-card:hover .viz--lock .shackle{transform:translateY(0);border-color:var(--vizc)} .agent-card:hover .viz--lock .body{background:var(--vizc);box-shadow:0 0 18px color-mix(in srgb,var(--vizc) 45%,transparent)} /* spark: line draws and peaks light up */ .viz--spark .seg{height:1.5px;background:var(--line-l2);transform:scaleX(0);transform-origin:left} .sec-dark .viz--spark .seg{background:var(--line-d2)} .viz--spark .seg:nth-child(1){left:14%;width:18%;top:62%;transform:scaleX(0) rotate(-14deg)} .viz--spark .seg:nth-child(2){left:31%;width:16%;top:54%;transform:scaleX(0) rotate(14deg)} .viz--spark .seg:nth-child(3){left:46%;width:18%;top:58%;transform:scaleX(0) rotate(-22deg)} .viz--spark .seg:nth-child(4){left:63%;width:20%;top:46%;transform:scaleX(0) rotate(-8deg)} .agent-card:hover .viz--spark .seg{transform:scaleX(1) rotate(var(--r,0deg));background:var(--vizc)} .viz--spark .seg:nth-child(1){--r:-14deg}.viz--spark .seg:nth-child(2){--r:14deg;transition-delay:.12s} .viz--spark .seg:nth-child(3){--r:-22deg;transition-delay:.24s}.viz--spark .seg:nth-child(4){--r:-8deg;transition-delay:.36s} .viz--spark .dot{border-radius:50%;right:12%;top:36%;opacity:0} .agent-card:hover .viz--spark .dot{opacity:1;background:var(--vizc);transition-delay:.45s;box-shadow:0 0 12px color-mix(in srgb,var(--vizc) 55%,transparent)} /* timeline steps pop in as the progress line reaches them */ @media (prefers-reduced-motion: no-preference){ .tl-step .tl-num, .tl-step h3, .tl-step p{opacity:0;transform:translateY(16px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out)} .tl-step.on .tl-num{opacity:1;transform:none} .tl-step.on h3{opacity:1;transform:none;transition-delay:.09s} .tl-step.on p{opacity:1;transform:none;transition-delay:.18s} } /* ---------- cookie consent banner ---------- */ .cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:80; padding:18px var(--pad-x); background:rgba(9,9,11,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line-d); } .cookie-banner[hidden]{display:none} .cookie-banner-inner{ max-width:var(--w-max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .cookie-banner-inner p{ margin:0; color:var(--tx-mid); font-size:.86rem; line-height:1.5; max-width:60ch; } .cookie-banner-inner a{color:var(--tx-hi); text-decoration:underline; text-underline-offset:2px} .cookie-banner-actions{display:flex; gap:10px; flex:none} .cookie-banner .btn{padding:10px 20px; font-size:.86rem} @media (max-width:640px){ .cookie-banner-inner{flex-direction:column; align-items:stretch} .cookie-banner-actions{justify-content:flex-end} } /* ============================================================ PRODUCT SHOT, real dashboard screenshots framed as a floating window over dark sections. "Laat zien wat ze krijgen." ============================================================ */ .shot-wrap{position:relative;margin-top:clamp(40px,5vw,66px)} .shot-wrap::before{content:"";position:absolute;left:50%;top:44%;width:74%;height:66%; transform:translate(-50%,-50%);z-index:0;pointer-events:none; background:radial-gradient(closest-side,rgba(70,110,120,.30),transparent 72%);filter:blur(70px)} .shot{position:relative;z-index:1;border-radius:var(--r-lg);overflow:hidden; border:1px solid rgba(255,255,255,.14);background:var(--ink-1); box-shadow:0 50px 130px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03)} .shot-bar{display:flex;align-items:center;gap:8px;padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)} .shot-bar i{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.15);display:block} .shot-bar b{margin-left:12px;font-family:var(--font-mono);font-weight:400; font-size:.7rem;letter-spacing:.08em;color:var(--tx-dim)} .shot img{display:block;width:100%;height:auto} .shot-cap{margin-top:20px;text-align:center;font-family:var(--font-mono); font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim)} /* inline product shot, smaller, left/right of copy in a 2-col split */ .split-shot{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center} @media(max-width:860px){.split-shot{grid-template-columns:1fr;gap:36px}} .split-shot .shot-wrap{margin-top:0} /* ============================================================ RESKIN: pricing components on DARK sections. These were authored for the light page (hardcoded --tx-ink) and go invisible on dark. Scope light-ink overrides to dark parents so text returns to light. ============================================================ */ .sec-dark .price-card, .sec-dark-1 .price-card, .sec-dark .price-card p.sub-amount, .sec-dark-1 .price-card p.sub-amount, .sec-dark .price-card p.amount, .sec-dark-1 .price-card p.amount, .sec-dark .price-card ul, .sec-dark-1 .price-card ul{color:var(--tx-hi)} .sec-dark .price-card .tier, .sec-dark-1 .price-card .tier, .sec-dark .price-card .amount small, .sec-dark-1 .price-card .amount small{color:var(--tx-mid)} .sec-dark .price-card.featured, .sec-dark-1 .price-card.featured{ border-color:rgba(255,255,255,.42);box-shadow:0 30px 70px rgba(0,0,0,.45)} .sec-dark .price-card.featured::before, .sec-dark-1 .price-card.featured::before{ background:var(--accent);color:#141418} /* win-trio comparison blocks → glass on dark */ .sec-dark .win-trio .win, .sec-dark-1 .win-trio .win, .sec-atmos .win-trio .win{ background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(3px) saturate(110%);backdrop-filter:blur(3px) saturate(110%)} .sec-dark .win-trio .win p, .sec-dark-1 .win-trio .win p, .sec-atmos .win-trio .win p{color:var(--tx-mid)} /* comparison table on dark */ .sec-dark .cmp td, .sec-dark-1 .cmp td, .sec-atmos .cmp td{color:var(--tx-hi)} .sec-dark .cmp th, .sec-dark-1 .cmp th, .sec-atmos .cmp th{color:var(--tx-mid)} .sec-dark .cmp th, .sec-dark .cmp td, .sec-dark-1 .cmp th, .sec-dark-1 .cmp td, .sec-atmos .cmp th, .sec-atmos .cmp td{border-bottom-color:var(--line-d)} .sec-dark .cmp .hl, .sec-dark-1 .cmp .hl, .sec-atmos .cmp .hl{background:rgba(217,127,151,.10)} /* ============================================================ RISE SHOT, het product doemt gekanteld op uit het zwart en komt recht tijdens het scrollen. Alleen `transform` en `opacity` animeren: dat draait op de GPU en veroorzaakt geen layout-herberekening. Nooit height/top animeren hier. ============================================================ */ .rise{position:relative;margin:clamp(48px,7vw,96px) auto 0;max-width:1180px; perspective:1400px;perspective-origin:50% 0%} /* De gloed die het scherm uit het zwart tilt. Staat er ALTIJD, ook zonder JS, anders zweeft de kaart in het niets bij reduced-motion. */ /* Moet RUIMER zijn dan de kaart, anders zit de gloed er volledig achter en zie je 'm nooit, de kaart is dekkend. Bleedt bewust naar buiten en naar onder door, want de drie principe-panelen eronder hebben iets nodig om glas tegen te zijn: backdrop-filter over puur zwart blijft zwart. */ .rise::before{content:"";position:absolute;left:50%;top:-6%;width:132%;height:118%; transform:translateX(-50%);z-index:0;pointer-events:none; background:radial-gradient(ellipse 58% 48% at 50% 44%,rgba(96,152,172,.62),transparent 68%); filter:blur(64px)} /* Tweede, bredere poel die onder de kaart doorloopt tot achter de kaarten. */ .rise::after{content:"";position:absolute;left:50%;bottom:-320px;width:120%;height:420px; transform:translateX(-50%);z-index:0;pointer-events:none; background:radial-gradient(ellipse 50% 58% at 50% 26%,rgba(84,134,152,.46),transparent 70%); filter:blur(64px)} .rise-card{position:relative;z-index:1;border-radius:var(--r-lg);overflow:hidden; border:1px solid rgba(255,255,255,.14);background:var(--ink-1); box-shadow:0 40px 90px -34px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.04); transform-origin:50% 0%; /* Beginstand = de eindstand. JS zet de gekantelde startpositie pas als ScrollTrigger er ook echt is, zonder JS zie je gewoon het scherm. */ will-change:transform} .rise-card img{display:block;width:100%;height:auto} .rise-bar{display:flex;align-items:center;gap:8px;padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)} .rise-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)} .rise-bar b{margin-left:8px;font-family:var(--font-mono);font-size:.7rem;font-weight:400; letter-spacing:.08em;color:var(--tx-dim)} .rise-cap{margin-top:18px;text-align:center;font-family:var(--font-mono); font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dim)} /* De drie principe-kaarten staan straks ónder dit scherm: geef ze de gloed als achtergrond zodat ze eindelijk écht glas zijn i.p.v. vlakke donkere blokken. */ .rise + .grid{position:relative;z-index:1} .rise + .grid .card{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-color:rgba(255,255,255,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} @media (max-width:720px){ .rise{perspective:none;margin-top:36px} .rise-card{transform:none!important} } @media (prefers-reduced-motion:reduce){ .rise-card{transform:none!important} } /* Metrics-balk onder de hero: dit zijn METERS, geen resultaten. De namen dragen de betekenis, dus ze krijgen de display-grootte die anders naar een getal ging. */ .stat-band b{font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.005em} .stat-note{margin-top:22px;font-family:var(--font-mono);font-size:.68rem; letter-spacing:.12em;text-transform:uppercase;color:var(--tx-dim)} /* ============================================================ LIVE DASHBOARD, de sectie ÍS het product, geen screenshot. Geen browser-chrome, geen afbeelding: echte HTML in exact de vormen uit het ontwerp. Dat scheelt niet alleen ~83KB en een LCP-last, het is ook scherp op elk scherm, herschikt op mobiel, en is selecteerbaar/leesbaar voor screenreaders, alles wat een screenshot van een dashboard niet is. ============================================================ */ transform:translateX(-50%);z-index:0;pointer-events:none; background:radial-gradient(ellipse 56% 46% at 50% 42%,rgba(96,152,172,.40),transparent 68%); background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); /* Onderste rij: twee panelen, zelfde glas. Verhouding zoals in het ontwerp. */ background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.03)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); .dash-panel .ptop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px} .dash-panel .ptop b{font-size:.9rem;font-weight:500} .dash-panel .ptop span{font-size:.74rem;color:var(--tx-dim)} /* Vormentaal uit het ontwerp: open ruit = wacht op jouw besluit, gevulde cirkel = afgerond. Diezelfde betekenis geldt straks in het product zelf. */ .shape{flex:0 0 auto;width:11px;height:11px} .shape.wait{stroke:var(--accent);fill:none;stroke-width:1.6} .shape.done{fill:#6ac08d} /* Ruim genoeg om de opgeschaalde kaart (scale 1.04 tijdens de kanteling) niet te laten overlappen: transform verandert de layout-hoogte niet, dus die 4% steekt over z'n eigen vak heen. */ @media (max-width:980px){ } @media (max-width:720px){ } @media (prefers-reduced-motion:reduce){.dash-inner{transform:none!important}} /* ============================================================ DOSSIER, het volledige personeelsdossier, als sectie. Sectie 3 toont meters, sectie 11 toont wat er op je bureau landt. Hier staat het scherm waar je mee méékijkt en bijstuurt: links wat hij oplevert, midden zijn dag en zijn grenzen, rechts het besluit dat op jou wacht plus het gesprek waarin hij zich verantwoordt. Drie kolommen i.p.v. de zevende identieke kaartenrij. Geen achtergrondbeeld: dat kan hier later achter voor contrast. ============================================================ */ /* Linkerkolom breed genoeg dat "Response time" en "Mails handled" op één regel passen, bij 262px braken die labels middenin het woord af. */ .dosx{display:grid;grid-template-columns:302px minmax(0,1fr) 318px;gap:12px; max-width:1260px;margin:0 auto;align-items:start} .dx-col{display:flex;flex-direction:column;gap:12px;min-width:0} .dx-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* Eén glassoort voor alles hierbinnen, de kaart oogt donker doordat de sectie donker is, niet doordat het glas dat is. */ .dxp{border-radius:14px;padding:15px 16px; background:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.028)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)} .dxp .ptop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px} .dxp .ptop b{font-size:.86rem;font-weight:500;color:var(--tx-hi)} .dxp .ptop span{font-size:.71rem;color:var(--tx-dim);text-align:right} /* Metertegel: icoonring, tweeregelig label, dun getal, mini-viz ernaast. */ .dx-tile .th{display:flex;align-items:flex-start;gap:8px;margin-bottom:16px} .dx-tile .ico{flex:0 0 auto;width:22px;height:22px;border-radius:50%; border:1px solid rgba(255,255,255,.2);display:grid;place-items:center} .dx-tile .ico svg{width:11px;height:11px;stroke:var(--tx-mid);fill:none;stroke-width:1.5} .dx-tile .lbl{display:block;font-size:.8rem;font-weight:500;color:var(--tx-hi);line-height:1.28} .dx-tile .sub{display:block;margin-top:2px;font-size:.68rem;color:var(--tx-dim);line-height:1.32} .dx-tile .val{display:flex;align-items:flex-end;justify-content:space-between;gap:8px} .dx-tile .num{font-family:var(--font-display);font-size:1.72rem;font-weight:400;line-height:1; letter-spacing:-.01em;white-space:nowrap} .dx-tile .unit{font-size:.7rem;color:var(--tx-dim);margin-left:3px} .dx-viz{height:20px;opacity:.75;flex:0 0 auto} .dx-viz rect{fill:rgba(255,255,255,.42)} .dx-viz polyline{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.3} /* Doelbalk: het enige groen hier, gehaald is een feit, geen sfeer. */ .dx-goal .gv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:2px} .dx-goal .num{font-family:var(--font-display);font-size:1.72rem;line-height:1} .dx-goal .unit{font-size:.7rem;color:var(--tx-dim);margin-left:3px} .dx-goal .tgt{font-size:.7rem;color:#6ac08d} .dx-goal .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.09);margin-top:11px;overflow:hidden} .dx-goal .bar i{display:block;height:100%;background:#6ac08d;border-radius:2px} .dx-acc{display:flex;flex-wrap:wrap;gap:7px} .dx-acc .ch{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:13px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:.73rem;color:var(--tx-mid)} .dx-acc .ch i{width:5px;height:5px;border-radius:50%;background:#6ac08d} /* Autonomie: hij vraagt om meer ruimte, jij geeft die of niet. Dit is het hele autonomie-idee in één kaart, daarom staat het hier en niet in tekst. */ .dx-auto .badge{padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);font-size:.58rem;color:var(--tx-mid)} .dx-auto p{font-size:.79rem;line-height:1.5;color:var(--tx-mid);margin:0 0 6px;max-width:none} .dx-auto .ask{color:var(--tx-hi)} .dx-btns{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px} .dx-b1,.dx-b2{padding:6px 13px;border-radius:14px;font-size:.74rem;font-weight:500;white-space:nowrap} .dx-b1{background:rgba(255,255,255,.9);color:#141418} .dx-b2{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);color:var(--tx-hi)} /* Instroom: waar 142 mails blijven. De pijlen zijn de vorm, dit is het enige plek op de pagina waar iets stroomt in plaats van stilstaat. */ .fun{display:flex;align-items:stretch;gap:6px} .fun-b{flex:1;min-width:0;border-radius:11px;padding:11px 12px; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)} .fun-b .n{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1.05} .fun-b .l{display:block;margin-top:5px;font-size:.68rem;color:var(--tx-dim);line-height:1.3} .fun-b.ok{border-color:rgba(106,192,141,.34)}.fun-b.ok .n{color:#6ac08d} .fun-b.hold{border-color:rgba(214,168,106,.36)}.fun-b.hold .n{color:var(--accent)} .fun-a{align-self:center;flex:0 0 auto;font-size:.8rem;color:var(--tx-dim)} .dr{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center; padding:9px 0;border-top:1px solid rgba(255,255,255,.06)} .dr:first-of-type{border-top:0} .dr .who{font-size:.8rem;color:var(--tx-hi);white-space:nowrap} .dr .what{font-size:.78rem;color:var(--tx-mid);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dr .tm{font-size:.7rem;color:var(--tx-dim);font-family:var(--font-mono)} .dr .pill{padding:4px 11px;border-radius:13px;background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);font-size:.71rem;color:var(--tx-hi)} /* Tijdlijn en regels: twee silhouetten die de pagina nergens anders heeft. */ .tl-row{display:grid;grid-template-columns:42px 13px 1fr;gap:9px;align-items:start; padding:9px 0;border-top:1px solid rgba(255,255,255,.06)} .tl-row:first-of-type{border-top:0} .tl-t{font-family:var(--font-mono);font-size:.69rem;color:var(--tx-dim);line-height:1.5;padding-top:1px} .tl-m{width:11px;height:11px;margin-top:3px} .tl-m circle{fill:rgba(255,255,255,.28)} .tl-x{font-size:.8rem;color:var(--tx-mid);line-height:1.5} .rul{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.06)} .rul:first-of-type{border-top:0} .rul .rx{flex:1;min-width:0} .rul .rn{display:block;font-size:.8rem;color:var(--tx-hi);line-height:1.4} .rul .ro{display:block;margin-top:2px;font-size:.69rem;color:var(--tx-dim)} .rul .redit{flex:0 0 auto;padding:4px 11px;border-radius:13px;background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);color:var(--tx-hi);font-size:.71rem} /* Besluit: de enige amber-omrande kaart in de sectie. Amber betekent hier consequent "dit wacht op jou", net als de ruit in de tijdlijn. */ .dec{border-radius:12px;padding:13px;background:rgba(214,168,106,.045); border:1px solid rgba(214,168,106,.3);margin-bottom:4px} .dec-top{display:flex;align-items:center;gap:8px;margin-bottom:8px} .dec-top .nm{flex:1;font-size:.82rem;font-weight:500;color:var(--tx-hi)} .dec-top .ago{font-size:.68rem;color:var(--tx-dim);white-space:nowrap} .dec p{font-size:.78rem;line-height:1.5;color:var(--tx-mid);margin:0;max-width:none} .dec .adv{display:flex;align-items:flex-start;gap:6px;margin-top:9px;font-size:.78rem;color:var(--accent)} .dec .adv svg{width:11px;height:11px;flex:0 0 auto;margin-top:4px;fill:var(--accent)} /* Eén regel per wachtende zaak, nooit afbreken. De status krimpt met een ellips als het krap wordt; naam en tijdstip blijven altijd heel. */ .wrow{display:flex;align-items:center;gap:8px;padding:10px 0; border-top:1px solid rgba(255,255,255,.06);white-space:nowrap} .wrow i{width:6px;height:6px;border-radius:50%;flex:0 0 auto} .wrow i.ok{background:#6ac08d}.wrow i.idle{border:1px solid var(--tx-dim)} .wrow .nm{flex:0 0 auto;font-size:.79rem;color:var(--tx-hi)} .wrow .st{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:.75rem;color:var(--tx-dim)} .wrow .ago{font-size:.68rem;color:var(--tx-dim);white-space:nowrap} /* Gesprek: jouw regels rechts en zonder bel, zijn antwoorden links mét. Dat asymmetrische ritme is precies waarom dit niet nóg een kaartenrij is. */ .ch-log{display:flex;flex-direction:column;gap:9px} .ch-m{display:flex;align-items:flex-start;gap:7px;max-width:92%} .ch-m.them .bub{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1); border-radius:13px;padding:9px 11px} .ch-m.me{margin-left:auto;flex-direction:row-reverse} .ch-m.me .bub{padding:5px 0;color:var(--tx-mid);text-align:right} .ch-m p{font-size:.78rem;line-height:1.5;margin:0;max-width:none;color:var(--tx-hi)} .ch-m.me p{color:var(--tx-mid)} .ch-av{flex:0 0 auto;width:21px;height:21px;border-radius:50%;display:grid;place-items:center; font-size:.6rem;letter-spacing:.02em;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);color:var(--tx-mid)} .ch-in{display:flex;align-items:center;gap:8px;margin-top:13px} .ch-in .plus{flex:0 0 auto;width:25px;height:25px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--tx-mid);font-size:.85rem} .ch-in .fld{flex:1;padding:8px 13px;border-radius:15px;background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.11);font-size:.75rem;color:var(--tx-dim)} .dx-note{max-width:1260px;margin:22px auto 0;padding-top:18px; border-top:1px solid rgba(255,255,255,.07); font-family:var(--font-mono);font-size:.67rem;letter-spacing:.12em; text-transform:uppercase;color:var(--tx-dim)} @media (max-width:1100px){ .dosx{grid-template-columns:1fr 318px} .dx-left{display:grid;grid-template-columns:1fr 1fr;gap:12px;grid-column:1/-1} .dx-left .dx-pair{display:contents} } @media (max-width:820px){ .dosx{grid-template-columns:1fr} .dx-left{grid-template-columns:1fr 1fr} .fun{flex-wrap:wrap}.fun-a{display:none}.fun-b{flex:1 1 44%} .dr{grid-template-columns:1fr auto;row-gap:2px} .dr .what{grid-column:1/-1;white-space:normal} } /* ============================================================ GROEI, wat ze vonden terwijl ze werkten. De rest van de pagina gaat over tijd terugkrijgen; dit is het enige stuk waar ze geld vínden. Derde kaart is bewust een 'dit kan ik niet', een medewerker die z'n eigen grens benoemt is geloofwaardiger dan drie die alles kunnen. ============================================================ */ .grw{max-width:1260px;margin:0 auto} .grw-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:12px} .grw-hd b{font-size:.86rem;font-weight:500;color:var(--tx-hi)} .grw-hd span{font-size:.74rem;color:var(--tx-dim)} .opp{display:grid;grid-template-columns:repeat(3,1fr);column-gap:12px;row-gap:0} .opp-c{display:flex;flex-direction:column;border-radius:14px;padding:28px 24px; background:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.028)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)} .opp-c h3{font-size:.98rem;font-weight:500;line-height:1.36;color:var(--tx-hi);margin:0 0 14px} .opp-c p{font-size:.83rem;line-height:1.55;color:var(--tx-mid);margin:0;max-width:none} .opp-src{display:block;margin-top:15px;font-size:.71rem;color:var(--tx-dim);line-height:1.45} /* De oordeelregel: groen = ik kan dit zelf, amber = dit is van jou. Zelfde betekenis als overal elders op de pagina, dus geen nieuwe code om te leren. */ .opp-c .opp-v{display:flex;align-items:flex-start;gap:7px;margin-top:22px; font-size:.81rem;line-height:1.5} .opp-v svg{width:11px;height:11px;flex:0 0 auto;margin-top:4px} .opp-v.can{color:var(--tx-mid)}.opp-v.can svg{stroke:#6ac08d;fill:none;stroke-width:1.8} .opp-v.cant{color:var(--accent)}.opp-v.cant svg{stroke:var(--accent);fill:none;stroke-width:1.8} .opp-foot{display:flex;flex-direction:column} .opp-c .foot{margin-top:auto;padding-top:24px} .opp-b{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:15px; background:rgba(255,255,255,.9);color:#141418;font-size:.76rem;font-weight:500} .opp-b.alt{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);color:var(--tx-hi)} .goals{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin-top:12px} .goal-c{border-radius:14px;padding:18px 19px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1)} .goal-c .gh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px} .goal-c .gn{font-size:.92rem;font-weight:500;color:var(--tx-hi)} .goal-c .gm{font-size:.72rem;color:var(--tx-dim);text-align:right;white-space:nowrap} .goal-c .gbig{font-family:var(--font-display);font-size:1.85rem;line-height:1} .goal-c .gbig em{font-style:normal;font-size:.72rem;color:var(--tx-dim);margin-left:4px} .goal-c .met{padding:4px 11px;border-radius:13px;background:rgba(106,192,141,.12); border:1px solid rgba(106,192,141,.3);color:#6ac08d;font-size:.72rem} .gchart{width:100%;height:86px;margin-top:12px;overflow:visible} .gchart .ln{fill:none;stroke:rgba(255,255,255,.62);stroke-width:1.5} .gchart .ln.ok{stroke:#6ac08d} .gchart .tgt{stroke:rgba(255,255,255,.24);stroke-width:1;stroke-dasharray:3 4} .gchart .pt{fill:#fff} .gchart .lbl{fill:var(--tx-dim);font-size:9px;font-family:var(--font-mono)} .goal-c .gfoot{display:block;margin-top:11px;font-size:.76rem;line-height:1.5;color:var(--tx-dim)} @media (max-width:980px){ .opp{grid-template-columns:1fr;row-gap:12px} .opp-c{display:flex;flex-direction:column;grid-row:auto} .opp-c .foot{margin-top:auto} .goals{grid-template-columns:1fr} } /* Doelgetal naast de waarde, de stippellijn alleen zegt "er is een doel", niet wélk. Zelfde plaatsing als .dx-goal in het dossier. */ .goal-c .gv{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .goal-c .gt{font-size:.72rem;color:var(--tx-dim);white-space:nowrap} /* Soortlabel boven elke kaart, dit was de kracht van de oude "wat landt er op je bureau"-sectie: niet drie kansen, maar drie verschillende soorten dingen. Die scheiding blijft, nu binnen één sectie i.p.v. twee die op elkaar leken. */ .opp-c .opp-k{display:flex;align-items:center;gap:7px;margin-bottom:10px; font-family:var(--font-mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase} .opp-k svg{width:11px;height:11px;flex:0 0 auto} .opp-k.wait{color:var(--accent)}.opp-k.wait svg{stroke:var(--accent);fill:none;stroke-width:1.6} .opp-k.find{color:#6ac08d}.opp-k.find svg{fill:#6ac08d} .opp-k.yours{color:var(--tx-dim)}.opp-k.yours svg{stroke:var(--tx-dim);fill:none;stroke-width:1.6} /* Maandafrekening: één brede strook, geen vierde kaart. De maand is een ander soort moment dan de dagelijkse stroom, dus krijgt 'ie een andere vorm. */ .mrep{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap; margin-top:12px;border-radius:14px;padding:18px 22px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1)} .mrep .mx{min-width:0} .mrep .mk{display:block;font-family:var(--font-mono);font-size:.63rem;letter-spacing:.13em; text-transform:uppercase;color:var(--tx-dim);margin-bottom:7px} .mrep .mt{display:block;font-size:.96rem;font-weight:500;color:var(--tx-hi);margin-bottom:5px} .mrep p{font-size:.83rem;line-height:1.55;color:var(--tx-mid);margin:0;max-width:none} .mrep .mv{flex:0 0 auto;text-align:right} .mrep .mv b{display:block;font-family:var(--font-display);font-size:1.85rem;font-weight:400;line-height:1} .mrep .mv span{display:block;margin-top:5px;font-size:.72rem;color:var(--tx-dim)} @media (max-width:720px){.mrep .mv{text-align:left}} .shape.wait{stroke:var(--accent);fill:none;stroke-width:1.6} /* ============================================================ BEWIJS, vervangt de klantenmarquee. Die toonde 3 klanten, 3× herhaald om breedte te vullen; wie oplet ziet dezelfde drie voorbijkomen. Vier namen als échte tekst is minder mooi en veel geloofwaardiger, en het is het enige harde bewijs op de pagina, dus het hoort op 900px en niet op 12.000. Bewust een smalle, luchtige band: na de hero moet de pagina even ademen voordat het dashboard komt. ============================================================ */ .proof{padding:56px 0 clamp(56px,7vw,90px);border-bottom:1px solid rgba(255,255,255,.06)} .proof-lbl{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em; text-transform:uppercase;color:var(--tx-dim);margin-bottom:18px} .proof-sub{font-size:.88rem;line-height:1.6;color:var(--tx-mid);max-width:60ch} /* ============================================================ DE REKENING, wat een medewerker kost, wat dit kost. Geen kaartenrij maar een grootboek: regels met bedragen rechts uitgelijnd en een streep boven het totaal. Weer een vorm die de pagina niet heeft. Elk bedrag hier is publiek narekenbaar; er wordt bewust geen enkel RESULTAAT beloofd, alleen twee rekeningen naast elkaar. ============================================================ */ .cost{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1000px;margin:0 auto} .cost-c{border-radius:16px;padding:26px 28px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1)} .cost-c.mine{border-color:rgba(214,168,106,.32);background:linear-gradient(180deg,rgba(214,168,106,.055),rgba(255,255,255,.022))} .cost-h{font-size:1.02rem;font-weight:500;color:var(--tx-hi);margin-bottom:3px} .cost-s{display:block;font-size:.76rem;color:var(--tx-dim);margin-bottom:20px} .cost-r{display:flex;align-items:baseline;gap:10px;padding:9px 0;font-size:.84rem} .cost-r .lb{color:var(--tx-mid)} .cost-r .dots{flex:1;border-bottom:1px dotted rgba(255,255,255,.14);transform:translateY(-3px)} .cost-r .am{color:var(--tx-hi);font-variant-numeric:tabular-nums;white-space:nowrap} .cost-tot{display:flex;align-items:baseline;gap:10px;margin-top:14px;padding-top:16px; border-top:1px solid rgba(255,255,255,.16)} .cost-tot .lb{flex:1;font-size:.84rem;color:var(--tx-hi)} .cost-tot .am{font-family:var(--font-display);font-size:1.65rem;line-height:1;white-space:nowrap} .cost-c.mine .cost-tot .am{color:var(--accent)} .cost-pm{display:block;margin-top:8px;text-align:right;font-size:.75rem;color:var(--tx-dim)} /* Uitlijnen met de kolommen erboven: die zijn 1180 breed, de noot stond op 1000 en werd dus gecentreerd ingesprongen. */ .cost-note{max-width:1180px;margin:20px auto 0;font-size:.83rem;line-height:1.65;color:var(--tx-dim)} .cost-note b{color:var(--tx-mid);font-weight:400} @media (max-width:820px){.cost{grid-template-columns:1fr}} /* Klantenlogo's in de marquee, teruggezet op verzoek. */ .client-mark{font-weight:500;font-size:1.02rem;letter-spacing:.01em;opacity:.45;white-space:nowrap;transition:opacity .25s} .client-mark:hover{opacity:.9} .client-mark{display:inline-flex;align-items:center;gap:10px;opacity:.55;filter:grayscale(1) brightness(1.4)} .client-mark:hover{opacity:.95} .client-mark svg{display:block} .client-mark img{height:26px;width:auto;display:block;filter:brightness(0) invert(1)} .client-mark.tall img{height:34px} /* Flem The Label is een breed, vet woordmerk: op 26px was het ~281px breed, bijna dubbel zo dominant als de andere drie. Kleiner gezet zodat de optische massa gelijk ligt met new media / trendata / New Grange. */ .client-mark.wordmark img{height:16px} .client-mark{opacity:.55;filter:none} .client-mark:hover{opacity:.95} /* Vandaag-lijst: wat JOU tijd kost, met de tijd die hij er al voor vond. Stond wel in het Overzicht-ontwerp maar nog niet op de site. Vervangt het doelenpaneel, dat woordelijk hetzelfde toonde als de doelkaarten verderop. */ /* Amber = hij heeft hier zelf ruimte voor gevonden in je agenda. */ /* ============================================================ AUTONOMIELADDER, vervangt de vier genummerde controlepoorten. Die poorten waren de vierde identieke tegelrij op rij én een uitrol van principe 03 erboven. Een ladder zegt hetzelfde, maar toont het ding dat de vier tegels niet konden: dat dit een schuif is die twee kanten op gaat en dat jij bepaalt waar hij staat. ============================================================ */ /* Meer lucht tussen de principe-kaarten en de ladder, die zaten tegen elkaar aan alsof ze bij elkaar hoorden. */ .lad{margin-top:clamp(64px,8vw,104px);padding-top:clamp(46px,5.5vw,64px); border-top:1px solid rgba(255,255,255,.08)} .lad-top{display:flex;align-items:baseline;justify-content:space-between;gap:18px; flex-wrap:wrap;margin-bottom:26px} .lad-top b{font-size:1.02rem;font-weight:500;color:var(--tx-hi)} .lad-top span{font-size:.83rem;color:var(--tx-dim)} .lad-rungs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative} /* De doorlopende lijn ónder de treden maakt het één schuif i.p.v. drie kaarten. */ .lad-rungs::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px; background:rgba(255,255,255,.13)} .rung{position:relative;padding:26px 26px 0 0} .rung:last-child{padding-right:0} .rung .dot{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%; background:var(--bg,#0e0e11);border:1px solid rgba(255,255,255,.32)} .rung.here .dot{border-color:var(--accent);background:var(--accent); box-shadow:0 0 0 4px rgba(214,168,106,.16)} .rung .rl{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.13em; text-transform:uppercase;color:var(--tx-dim);margin-bottom:9px} .rung.here .rl{color:var(--accent)} .rung .rn{display:block;font-size:.98rem;font-weight:500;color:var(--tx-hi); line-height:1.34;margin-bottom:7px} .rung p{font-size:.85rem;line-height:1.55;color:var(--tx-mid);margin:0;max-width:38ch} .lad-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px; padding-top:22px;border-top:1px solid rgba(255,255,255,.07)} .lad-foot p{flex:1;min-width:280px;font-size:.85rem;line-height:1.6;color:var(--tx-dim);margin:0;max-width:none} @media (max-width:860px){ .lad-rungs{grid-template-columns:1fr;gap:4px} .lad-rungs::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto} .rung{padding:0 0 26px 26px} .rung .dot{left:0;top:2px} .rung:last-child{padding-bottom:0} } /* ============================================================ TERWIJL JIJ WEG WAS, de enige sectie waar de gebruiker afwezig is. Elke tijdstempel elders op de pagina valt binnen kantooruren; "uren terug" werd wel als getal beweerd maar nooit als gevoel getoond. Dit is het blok dat zegt: er stond iemand op wacht. Drie lagen: de nacht als balk, hetzelfde besluit op drie plekken, en de ochtend. Bewust geen knop, deze sectie verkoopt niets. ============================================================ */ .night{max-width:1180px;margin:0 auto} /* Laag 1, de balk. Stippen staan op hun échte tijdpositie (18:00 = 0%, 09:00 = 100%), dus je ziet dat het werk zich naar de ochtend toe opstapelt. */ .nb{position:relative;height:62px;margin-bottom:6px} .nb-line{position:absolute;left:0;right:0;top:44px;height:1px;background:rgba(255,255,255,.14)} .nb-sleep{position:absolute;top:32px;bottom:0;border-radius:3px; background:rgba(255,255,255,.028);border-left:1px solid rgba(255,255,255,.09); border-right:1px solid rgba(255,255,255,.09)} /* Label bóven de balk, anders lopen de tijdlijn én de 02:40-stip er dwars doorheen, want die zit op precies dezelfde plek. */ .nb-sleep span{position:absolute;left:50%;top:-22px;transform:translateX(-50%); font-family:var(--font-mono);font-size:.63rem;letter-spacing:.14em; text-transform:uppercase;color:var(--tx-dim);white-space:nowrap} .nb-dot{position:absolute;top:40px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%; background:rgba(255,255,255,.5)} .nb-dot.last{background:var(--accent);box-shadow:0 0 0 4px rgba(214,168,106,.15)} .nb-end{position:absolute;top:30px;font-family:var(--font-mono);font-size:.66rem;color:var(--tx-dim)} .nb-end.l{left:0}.nb-end.r{right:0} .nb-evts{display:grid;grid-template-columns:repeat(5,1fr);gap:14px; padding-top:16px;border-top:1px solid rgba(255,255,255,.07)} .nb-e .t{display:block;font-family:var(--font-mono);font-size:.7rem;color:var(--tx-dim);margin-bottom:6px} .nb-e p{font-size:.82rem;line-height:1.5;color:var(--tx-mid);margin:0;max-width:none} .nb-e.hold .t{color:var(--accent)} .nb-e.hold p{color:var(--tx-hi)} /* Laag 2, hetzelfde besluit, drie bezorgingen. Gelijke breedte, want geen van de drie is de hoofdweg: de klant kiest. */ /* De telefoon is de held, Telegram en mail staan ernaast als bewijs dat het ook dáár landt. Drie gelijke kolommen maakten er drie kaartjes van waarvan er toevallig één een toestel was; nu draagt het toestel de sectie en zijn de andere twee smaller en kalmer. */ .deliv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,30px);align-items:stretch;margin-top:clamp(40px,5vw,60px)} .dv{display:flex;flex-direction:column;border-radius:16px;overflow:hidden; border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.022)} .dv-k{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.07); font-family:var(--font-mono);font-size:.63rem;letter-spacing:.13em; text-transform:uppercase;color:var(--tx-dim)} .dv-b{flex:1;padding:16px} /* Vergrendelscherm */ .lock{border-radius:12px;padding:16px 14px;background:rgba(255,255,255,.03);height:100%} .lock-t{text-align:center;font-family:var(--font-display);font-size:2.1rem;line-height:1; color:var(--tx-hi);margin-bottom:3px} .lock-d{text-align:center;font-size:.7rem;color:var(--tx-dim);margin-bottom:18px} .notif{border-radius:12px;padding:12px;background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.1)} .notif .ap{display:flex;align-items:center;gap:6px;font-family:var(--font-mono); font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-dim);margin-bottom:8px} .notif .ap b{flex:1;font-weight:400} .notif .nt{display:block;font-size:.82rem;font-weight:500;color:var(--tx-hi); line-height:1.35;margin-bottom:5px} .notif p{font-size:.76rem;line-height:1.45;color:var(--tx-mid);margin:0 0 11px;max-width:none} .notif-a{display:flex;gap:0;border-top:1px solid rgba(255,255,255,.1);margin:0 -12px -12px; padding-top:0} .notif-a span{flex:1;text-align:center;padding:9px 4px;font-size:.72rem;color:var(--tx-mid); border-right:1px solid rgba(255,255,255,.1)} .notif-a span:last-child{border-right:0} .notif-a span.ok{color:#6ac08d} /* Telegram */ .tg-bub{border-radius:14px;padding:13px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1)} .tg-k{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--accent);margin-bottom:8px} .tg-k svg{width:10px;height:10px;stroke:var(--accent);fill:none;stroke-width:1.6} .tg-bub .nt{display:block;font-size:.84rem;font-weight:500;color:var(--tx-hi);margin-bottom:6px} .tg-bub p{font-size:.77rem;line-height:1.5;color:var(--tx-mid);margin:0;max-width:none} .tg-bub .adv{margin-top:8px;font-size:.77rem;color:var(--accent)} .tg-btns{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .tg-btns span{flex:1;min-width:88px;text-align:center;padding:9px 6px;border-radius:9px; background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13); font-size:.75rem;color:var(--tx-hi)} .tg-btns span.wide{flex-basis:100%} /* Mail */ .ml-sub{font-size:.83rem;font-weight:500;color:var(--tx-hi);line-height:1.35;margin-bottom:3px} .ml-from{display:block;font-size:.71rem;color:var(--tx-dim);margin-bottom:14px} .ml-box{border-radius:12px;padding:13px;background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1)} .ml-box .nt{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--tx-hi);margin-bottom:7px} .ml-box .nt svg{width:10px;height:10px;fill:var(--accent);flex:0 0 auto} .ml-box p{font-size:.76rem;line-height:1.5;color:var(--tx-mid);margin:0 0 12px;max-width:none} .ml-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ml-btns .b1{padding:7px 13px;border-radius:15px;background:rgba(255,255,255,.9); color:#141418;font-size:.74rem;font-weight:500} .ml-btns .b2{padding:7px 13px;border-radius:15px;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);color:var(--tx-hi);font-size:.74rem} .ml-btns .b3{margin-left:auto;font-size:.74rem;color:var(--accent)} .ml-note{display:block;margin-top:12px;font-size:.72rem;line-height:1.5;color:var(--tx-dim)} .deliv-cap{margin-top:20px;font-size:.85rem;line-height:1.6;color:var(--tx-dim);max-width:62ch} /* Laag 3, de ochtend. */ .morning{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap; margin-top:clamp(38px,5vw,56px);padding-top:clamp(30px,4vw,40px); border-top:1px solid rgba(255,255,255,.08)} .morning b{font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:400; line-height:1.2;color:var(--tx-hi)} .morning b em{font-style:normal;color:var(--accent)} .morning span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--tx-dim)} @media (max-width:900px){ .deliv{grid-template-columns:1fr} .nb-evts{grid-template-columns:1fr 1fr;gap:16px 14px} } @media (max-width:560px){.nb-evts{grid-template-columns:1fr}} /* ============================================================ GLAS OVER DE WASH, zoals in het ontwerp. Eerdere poging met een LICHT beeld hierachter is teruggedraaid: gemeten zakte de lopende tekst dan naar contrast 2,2 (AA vraagt 4,5), en dat is niet te repareren zonder het licht weer weg te halen. Met een donker beeld kán het glas wél doorschijnend zijn, precies de vastgelegde glasstijl: near-clear, niet frosted, dunne asymmetrische rand, geen schaduw. ============================================================ */ .sec-atmos .dxp{ background:rgba(236,240,243,.055); backdrop-filter:blur(1.5px) saturate(104%);-webkit-backdrop-filter:blur(1.5px) saturate(104%); border:1px solid rgba(255,255,255,.13); border-top-color:rgba(255,255,255,.2);border-bottom-color:rgba(255,255,255,.08); box-shadow:none} .sec-atmos .dec{background:rgba(214,168,106,.06)} /* De wash iets naar links zodat de vogel binnen de crop valt. */ .sec-atmos.framed::before{background-position:38% center} /* Op een lichte wash moet secundaire tekst mee omhoog. Gemeten: de lede zakte naar contrast 3,1 (AA vraagt 4,5); de achtergrond daar heeft luminantie 0,089, dus tekst moet minstens grijswaarde ~200 zijn. #d0d0d6 geeft marge, ook als het beeld ooit vervangen wordt door een iets lichter exemplaar. */ .sec-atmos{--tx-mid:#d0d0d6;--tx-dim:#a9a9b2} /* Scheidingslabel tussen het grootboek en de pakketten in de prijssectie. */ .plans-lbl{margin:clamp(38px,5vw,54px) 0 18px;padding-top:clamp(30px,4vw,40px); border-top:1px solid rgba(255,255,255,.08); font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em; text-transform:uppercase;color:var(--tx-dim)} /* Het reizende bolletje. De vaste treden-stippen blijven staan als open markering; dit bolletje beweegt eroverheen. */ .lad-travel{position:absolute;width:11px;height:11px;border-radius:50%; background:var(--accent);box-shadow:0 0 0 4px rgba(214,168,106,.16); transition:left .85s cubic-bezier(.4,0,.2,1),top .85s cubic-bezier(.4,0,.2,1); pointer-events:none;z-index:2} /* Zodra JS het overneemt is de statische amber-trede niet meer nodig. */ .lad-rungs:has(.lad-travel) .rung.here .dot{border-color:rgba(255,255,255,.32); background:var(--bg,#0e0e11);box-shadow:none} /* De actieve trede licht op, dát is wat het bolletje aanwijst. */ .rung .rl,.rung .rn,.rung p{transition:color .5s ease,opacity .5s ease} .lad-rungs:has(.lad-travel) .rung{opacity:.5;transition:opacity .5s ease} .lad-rungs:has(.lad-travel) .rung.here{opacity:1} /* ============================================================ DRIE OPPERVLAKKEN, geen toestel meer. Vier pogingen lang stond hier een telefoon naast twee platte kaarten, en dat voelde elke keer scheef. De reden is structureel: een toestel is hoog en zwaar, een kaart is plat en licht, die horen niet in dezelfde familie. En de sectie gaat over KANALEN, niet over hardware. Dus: drie gelijkwaardige oppervlakken, gelijke hoogte, één taal. De app wordt nog steeds benoemd; alleen het chroom eromheen is weg. ============================================================ */ .dv.phone{background:transparent;border:0} .app-tag{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px; padding:5px 12px;border-radius:14px;background:rgba(214,168,106,.1); border:1px solid rgba(214,168,106,.3); font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em; text-transform:uppercase;color:var(--accent)} .app-tag svg{width:10px;height:10px;stroke:var(--accent);fill:none;stroke-width:1.4} .dv-time{margin-top:14px;font-family:var(--font-mono);font-size:.7rem;color:var(--tx-dim)} /* De meldingskaart is nu een oppervlak zoals de andere twee, niet een scherm. */ .dv.phone .notif{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12); border-radius:14px;padding:15px} .dv.phone .notif .ap{font-size:.58rem;margin-bottom:9px} .dv.phone .notif .nt{font-size:.86rem;line-height:1.35;margin-bottom:6px} .dv.phone .notif p{font-size:.79rem;line-height:1.5;margin-bottom:13px} .dv.phone .notif-a{margin:0 -15px -15px} .dv.phone .notif-a span{padding:10px 4px;font-size:.74rem} .dv.phone .dv-b{flex-direction:column;align-items:center;gap:2px} /* Het autonomie-label zat als enige onder de norm (3,93), het valt op een lichter stuk van de wash. Iets donkerder achter, tekst naar vol wit. */ .sec-atmos .dx-auto .badge{background:rgba(10,10,13,.45);color:var(--tx-hi); border-color:rgba(255,255,255,.2)} /* De doorlooptijd hing als "week 4" in de tijdlijn alsof het vaststond. Het hangt af van de systemen en de fiatteringen; die noot staat er nu bij. */ .tl-note{max-width:70ch;margin:clamp(28px,4vw,40px) auto 0;padding-top:22px; border-top:1px solid rgba(255,255,255,.07); font-size:.85rem;line-height:1.6;color:var(--tx-dim)} /* Drie kolommen: aannemen, losse tools, digitale medewerker. */ .cost-3{grid-template-columns:repeat(3,1fr);max-width:1180px} @media (max-width:980px){.cost-3{grid-template-columns:1fr}} /* Telegram en mail: geen kaderkaart meer maar een kalm vlak, zodat het oog eerst naar het toestel gaat en daarna pas naar de twee alternatieven. */ .dv:not(.phone){background:transparent;border:0} .dv:not(.phone) .dv-k{padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.09)} .dv:not(.phone) .dv-b{padding:16px 0 0} .dv.phone{position:relative} /* Zachte gloed achter het toestel, het enige lichtpunt in een nachtsectie. */ .dv.phone::before{content:"";position:absolute;left:50%;top:34%;width:340px;height:340px; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(150,170,190,.16),transparent 68%);filter:blur(38px)} .dv.phone .dv-k,.dv.phone .app-tag,.dv.phone .device{position:relative;z-index:1} @media (max-width:900px){ .deliv{grid-template-columns:1fr} .dv.phone::before{display:none} } /* Zonder kaartrand is de overflow-clip van .dv niet meer nodig, die knipte de eerste letter van "IN TELEGRAM" en "IN YOUR MAIL" eraf. */ .dv:not(.phone){overflow:visible} /* Het label + de divider van het toestel lijnen bovenaan uit met "in whatsapp" en "in your mail"; het toestel zelf blijft daaronder. */ .dv.phone{justify-content:flex-start} .dv.phone .dv-b{flex:0 0 auto} @media (max-width:900px){.deliv{grid-template-columns:1fr}} /* ============================================================ MEGAMENU, vier items, glazen sluier, spotlight met de scan. Zes losse links werden vier groepen. De sluier is dezelfde glasfamilie als de rest van de site: donker + blur, niet een dichte overlay, zodat je nog ziet waar je was. ============================================================ */ .nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)} .navtop{position:relative;display:inline-flex;align-items:center;gap:7px; background:none;border:0;padding:6px 0;cursor:pointer; font-family:inherit;font-size:.94rem;color:var(--tx-mid); transition:color .2s ease;white-space:nowrap} .navtop:hover,.navtop[aria-expanded="true"]{color:var(--tx-hi)} .navtop[aria-current="page"]{color:var(--tx-hi)} /* Plusje dat een streepje wordt zodra het paneel open is. */ .mmc{position:relative;width:9px;height:9px;flex:0 0 auto;opacity:.55} .mmc::before,.mmc::after{content:"";position:absolute;left:0;top:4px;width:9px;height:1px; background:currentColor;transition:transform .25s ease} .mmc::after{transform:rotate(90deg)} .navtop[aria-expanded="true"] .mmc{opacity:1} .navtop[aria-expanded="true"] .mmc::after{transform:rotate(0deg)} /* De sluier: verduistert én vervaagt de pagina eronder. */ .mm-veil{position:fixed;inset:0;z-index:80; background:rgba(6,6,9,.62); backdrop-filter:blur(14px) saturate(90%);-webkit-backdrop-filter:blur(14px) saturate(90%); opacity:0;transition:opacity .28s ease;pointer-events:none} .mm-veil.on{opacity:1;pointer-events:auto} .mm{position:absolute;left:0;right:0;top:100%;z-index:90; opacity:0;transform:translateY(-6px);pointer-events:none; transition:opacity .24s ease,transform .24s ease} .mm.on{opacity:1;transform:none;pointer-events:auto} .mm-inner{display:grid;grid-template-columns:1.05fr 1fr 1.15fr .9fr; gap:clamp(24px,3vw,52px); max-width:1280px;margin:0 auto; padding:clamp(30px,3.4vw,48px) 32px clamp(40px,4.5vw,64px); border-top:1px solid rgba(255,255,255,.1)} /* Een tweede kop binnen dezelfde kolom. Kolom 1 van Platform draagt twee blokken: het platform zelf, en daaronder een paar medewerkers met naam. Zonder marge erboven plakt de tweede kop aan de laatste link erboven. */ .mm-h2{margin-top:34px} .mm-h{display:flex;align-items:center;gap:8px;margin-bottom:22px; font-family:var(--font-mono);font-size:.63rem;letter-spacing:.15em; text-transform:uppercase;color:var(--tx-dim)} .mm-ast{font-size:.7rem;opacity:.7} .mm-big{display:block;margin-bottom:16px;font-family:var(--font-display); font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:400;line-height:1.2; color:var(--tx-hi);transition:opacity .2s ease} .mm-big:hover{opacity:.62} .mm-lnk{display:block;margin-bottom:13px;font-size:.94rem;color:var(--tx-mid); transition:color .2s ease} .mm-lnk:hover{color:var(--tx-hi)} /* Een medewerker met een regel eronder over wat hij voor je doet. De naam blijft staan, want een digitale medewerker heeft een naam en een dossier; de regel eronder maakt hem uitnodigend in plaats van een functietitel. */ .mm-lnk2{margin-bottom:17px;color:var(--tx-hi)} .mm-sub{display:block;margin-top:2px;font-size:.8rem;line-height:1.35; color:var(--tx-dim);transition:color .2s ease} .mm-lnk2:hover .mm-sub{color:var(--tx-mid)} .mnav-sub-b{display:block;margin-top:2px;font-size:.82rem;color:var(--tx-dim)} .mm-all{display:inline-block;margin-top:8px;font-size:.82rem;color:var(--tx-dim); border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:2px;transition:color .2s ease} .mm-all:hover{color:var(--tx-hi)} /* Spotlight: geen blogartikel, wij hebben de scan, dus die staat er. */ .mm-spot h3{font-size:1.05rem;font-weight:500;line-height:1.35;color:var(--tx-hi);margin-bottom:10px} .mm-spot p{font-size:.87rem;line-height:1.6;color:var(--tx-mid);margin:0 0 18px;max-width:none} .mm-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:19px; background:rgba(255,255,255,.92);color:#141418;font-size:.83rem;font-weight:500} .mm-note{border-left:1px solid rgba(255,255,255,.1);padding-left:clamp(20px,2.4vw,38px)} .mm-note p{font-size:.87rem;line-height:1.65;color:var(--tx-dim);margin:0;max-width:none} @media (max-width:1080px){ .mm-inner{grid-template-columns:1fr 1fr;gap:30px 24px} .mm-note{display:none} } /* Onder 900px draait de bestaande mobiele nav; het megamenu speelt daar niet. */ @media (max-width:900px){.nav-links,.mm,.mm-veil{display:none}} /* Hogere soortelijkheid: een algemenere link-regel maakte de knoptekst wit op wit, waardoor de pil leeg leek. */ .mm .mm-cta{color:#141418} .mm .mm-cta .arr{color:inherit} /* Maatvoering binnen het toestel. */ .device .lock{padding:0;background:none} .device .lock-t{font-size:2.2rem;margin-bottom:2px} .device .lock-d{font-size:.68rem;margin-bottom:22px} .device .notif{padding:11px;border-radius:13px} .device .notif .ap{font-size:.54rem;margin-bottom:7px} .device .notif .nt{font-size:.78rem;line-height:1.3;margin-bottom:5px} .device .notif p{font-size:.7rem;line-height:1.45;margin-bottom:10px} .device .notif-a{margin:0 -11px -11px} .device .notif-a span{padding:8px 3px;font-size:.66rem} /* Alle drie de oppervlakken dezelfde behandeling: label met streep, dan de inhoud. Gelijke hoogte zodat de onderkant één lijn is. */ .dv{display:flex;flex-direction:column;background:transparent;border:0;overflow:visible} .dv .dv-k{padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.09)} .dv .dv-b{flex:1;padding:18px 0 0;display:block} .dv.phone::before{display:none} @media (max-width:900px){.deliv{grid-template-columns:1fr}} /* Gemeten: de notitie onder de hero-knoppen zakte naar contrast 3,75 op het nieuwe beeld. Iets lichter dan --tx-dim, dan haalt 'ie het wel. */ .hero .cta-note{color:#b9b9c2} /* ============================================================ GLAS IN DE NACHT- EN BUREAU-SECTIE. Zelfde principe als het dossier: donker beeld eronder, near-clear glas erover. De drie bezorgoppervlakken en de drie kaarten krijgen hetzelfde glas, zodat de hele pagina één glassoort houdt. Per sectie een eigen helderheid, want de beelden verschillen sterk: de nacht mag donker blijven (dat is het punt), de drempel is van zichzelf al licht en moet juist getemperd. ============================================================ */ section[aria-labelledby="night-h"].sec-atmos.framed::before{filter:saturate(.9) brightness(1.15) contrast(1.16)} /* 0.46 is gemeten het plafond: bij 0.58 zakken twee elementen, bij 0.72 vier. Het glas laat dit beeld sterk door, dus hier kan minder dan bij de nacht. */ section[aria-labelledby="surf-h"].sec-atmos.framed::before{filter:saturate(.9) brightness(0.42) contrast(1.1)} /* De drie bezorgoppervlakken worden glas. */ .sec-atmos .dv .dv-b{padding:18px 16px 16px} .sec-atmos .dv:not(.phone) .dv-k,.sec-atmos .dv.phone .dv-k{padding:12px 16px 16px} .sec-atmos .dv{border-radius:14px; background:rgba(236,240,243,.05); backdrop-filter:blur(1.5px) saturate(104%);-webkit-backdrop-filter:blur(1.5px) saturate(104%); border:1px solid rgba(255,255,255,.12); border-top-color:rgba(255,255,255,.18)} .sec-atmos .dv .dv-k{border-bottom:1px solid rgba(255,255,255,.1)} /* De drie kansenkaarten worden glas. */ .sec-atmos .opp-c{background:rgba(236,240,243,.05); backdrop-filter:blur(1.5px) saturate(104%);-webkit-backdrop-filter:blur(1.5px) saturate(104%); border:1px solid rgba(255,255,255,.13); border-top-color:rgba(255,255,255,.2);box-shadow:none} .sec-atmos .goal-c,.sec-atmos .mrep{background:rgba(236,240,243,.04); backdrop-filter:blur(1.5px) saturate(104%);-webkit-backdrop-filter:blur(1.5px) saturate(104%); border:1px solid rgba(255,255,255,.11)} /* De "Gehaald"-badge zat op 4,09 tegen de norm van 4,5 op het nieuwe beeld, iets steviger dekkend achtergrondje, dan haalt 'ie het ruim. */ .sec-atmos .goal-c .met{background:rgba(8,18,13,.9);border-color:rgba(106,192,141,.45)} /* ============================================================ FOOTER, het beeld komt op uit het zwart. De standaard atmos-gradiënt verdonkert boven én onder, waardoor het beeld halverwege ineens aanwezig is. Hier moet het juist geleidelijk opkomen: volledig zwart waar de sectie erboven eindigt, en dan naar beneden toe steeds meer horizon. ============================================================ */ /* De horizon leeft in het midden, niet onderaan. Onderin staat de kleine tekst (legal, taalwissel) en die zakte naar contrast 1,22 op de lichte band. Nu piekt het beeld rond 60% en loopt het naar onderen weer dicht. */ /* Herzien op 7 augustus. De footer moet zijn beeld tonen, maar er staat veel kleine tekst. Gemeten waar die tekst zit, als percentage van de foothoogte: kop 18 tot 36, mono-regel 28 tot 30, logo en alinea 54 tot 69, linkkolommen 66 tot 68, onderste regel 93. Tekstvrij is alleen 38 tot 52, en precies daar valt de vallende figuur van het beeld. Dus: sluier open in dat venster en dicht op alle tekstbanden. Een vlakke lichte sluier haalde 2,8:1 op de links, tegen 4,5 als norm. */ .footer.sec-atmos::after{background:linear-gradient(180deg, var(--ink-0) 0%, rgba(9,9,11,.90) 4%, rgba(9,9,11,.80) 9%, rgba(9,9,11,.68) 15%, rgba(9,9,11,.55) 21%, rgba(9,9,11,.43) 28%, rgba(9,9,11,.33) 36%, rgba(9,9,11,.26) 44%, rgba(9,9,11,.24) 52%, rgba(9,9,11,.28) 60%, rgba(9,9,11,.36) 68%, rgba(9,9,11,.44) 78%, rgba(9,9,11,.52) 88%, rgba(9,9,11,.58) 96%, var(--ink-0) 100%)} /* Met een lichtere sluier moet de tekst mee omhoog, anders zakt hij door de norm. Gemeten bij een vlakke lichte sluier zonder deze ophoging: 2,8:1 op de linkkolommen, tegen 4,5 als eis. */ .footer.sec-atmos{--tx-mid:#eceae5;--tx-dim:#cfcdd4} .footer.sec-atmos a:not(.btn){color:#eceae5} /* Op mobiel is de footer 1559 hoog in plaats van 769, en staat de tekst heel anders: kop op 9 procent, knop 17, mono-regel 25, logo 39, alinea 42, de linkkolommen vanaf 55. Tekstvrij is alleen 29 tot 39. Die band is te smal om het beeld echt te tonen, dus hier geen venster maar een gelijkmatige sluier met een lichte opening; op een telefoon is die footer een lijst en niet een plaat. */ @media (max-width:820px){ .footer.sec-atmos::after{background:linear-gradient(180deg, var(--ink-0) 0%, rgba(9,9,11,.88) 6%, rgba(9,9,11,.84) 22%, rgba(9,9,11,.80) 29%, rgba(9,9,11,.58) 34%, rgba(9,9,11,.62) 38%, rgba(9,9,11,.82) 44%, rgba(9,9,11,.86) 62%, rgba(9,9,11,.88) 84%, rgba(9,9,11,.90) 95%, var(--ink-0) 100%)} } /* Omgekeerd op 7 augustus. Zwart over roze haalt niet alleen licht weg maar ook waargenomen verzadiging: bij lage luminantie leest kleur als grijs. De filter stond daar nog eens saturate(.9) overheen, dus de footer werd zwart-wit. Nu juist opgehaald, zodat de sakura door de sluier heen komt. */ .footer.sec-atmos::before{filter:saturate(1.35) brightness(1.05)} /* Nachtbeeld feller: de eerdere verlaging naar .62 was een reactie op een zakker die achteraf een meetartefact bleek (het streepje van de eyebrow). Meer definitie laat het glas beter uitkomen, dat was het hele punt. */ /* Geprobeerd het raampje weg te schuiven van de laatste tijdlijnregel, maar op 34% valt het achter een ándere regel en zakt het contrast daar naar 3,1. Op de standaardpositie haalt alles het met 16% marge, dus die blijft. */ /* ============================================================ EVEN, beeld over de HELE sectie, ook achter de kaarten. De framed-variant vignetteert de randen naar zwart, waardoor het beeld alleen in het midden leeft. Hier moet het overal doorkomen, dus een vlakke sluier in plaats van een radiaal. Dat kan alleen als het glas iets dekkender wordt: near-clear glas over een beeld met textuur overal levert onleesbare tekst op (gemeten: 2,2). Dit glas is nog steeds glas, je ziet het beeld eronder, geblurd en gedempt, maar het draagt de tekst. ============================================================ */ .sec-atmos.even::before{filter:saturate(.9) brightness(1) contrast(1.02)} /* 0.48: bij 0,55 nog 8% marge, bij 0,68 zakken er vijf. Dit beeld is helder en er liggen acht glaskaarten overheen, dus hier kan minder dan bij de nachtsectie (1,15). */ /* Teruggezet naar de eerste versie: het beeld zoals het was, met de oranje mist. De teal-correctie (koele tinten in het bronbeeld oplichten) is teruggedraaid op verzoek, die maakte het teal meetbaar sterker maar veranderde het karakter van het beeld. */ section[aria-labelledby="uc-h"].sec-atmos.even::before{filter:saturate(.9) brightness(0.48) contrast(1.04)} /* De hand staat in de linkerhelft van het beeld, maar cover toonde alleen 22%-78%, het midden. Je zag dus alleen vingertoppen. Uitsnede naar links. */ section[aria-labelledby="surf-h"].sec-atmos::before{background-position:8% center} /* De handpalm is lichter dan de nachtfoto; iets temperen zodat het label naast "Je doelen" (dat direct op het beeld staat) boven de norm blijft. */ /* 0.75 zodat de handpalm zichtbaar wordt. Gemeten: 0,85 haalt het nog maar met 6% marge, 0,75 met 18%. Stond op 0,42, daar zag je de hand niet. */ section[aria-labelledby="surf-h"].sec-atmos.even::before{filter:saturate(.9) brightness(0.75) contrast(1.04)} .sec-atmos.even::after{background:linear-gradient(180deg, var(--ink-0) 0%, rgba(9,9,11,.72) 9%, rgba(9,9,11,.58) 22%, rgba(9,9,11,.55) 50%, rgba(9,9,11,.66) 74%, rgba(9,9,11,.90) 86%, var(--ink-0) 95%)} /* Donker glas i.p.v. near-clear: het beeld schemert erdoorheen zonder de tekst mee te nemen. */ /* Brightness 0.85 i.p.v. 0.52, gemeten grens ligt op 0,88. Door de zware blur is de achtergrond zo egaal dat er bijna twee keer zoveel beeld door kan zonder dat de tekst zakt. Op 0.52 waren de kaarten gewoon zwart. ECHT GLAS boven een beeld met textuur: niet dekkender maken maar zwaarder BLURREN. Dat is ook hoe glas zich fysiek gedraagt, je ziet kleur en toon van wat erachter zit, maar geen detail. Zo blijft het beeld zichtbaar door de kaart heen terwijl de tekst op een glad veld staat. */ .sec-atmos.even .dv, .sec-atmos.even .opp-c, .sec-atmos.even .goal-c, .sec-atmos.even .mrep{ background:rgba(236,240,243,.055); backdrop-filter:blur(26px) saturate(112%) brightness(0.85); -webkit-backdrop-filter:blur(26px) saturate(112%) brightness(0.85); border:1px solid rgba(255,255,255,.14); border-top-color:rgba(255,255,255,.22);border-bottom-color:rgba(255,255,255,.08); box-shadow:none} /* De twee tijdlabels aan de uiteinden van de nachtbalk staan direct op het beeld, niet op een kaart. Op --tx-dim zakte "09:00" naar 3,96. */ .sec-atmos.even .nb-end{color:var(--tx-mid)} /* ============================================================ GENESTE KAARTEN OOK GLAS. De melding, de WhatsApp-bubbel en het mailvak zaten als dichte donkere vlakken binnen een glazen kolom, dat brak het effect precies daar waar je het meeste kijkt. Nu dezelfde near-clear behandeling, iets lichter dan de kolom eromheen zodat er nog hiërarchie is. ============================================================ */ /* GEEN backdrop-filter op geneste kaarten. Die stapelen niet: de binnenkaart filtert de al-gefilterde uitvoer van de kaart eromheen, niet het beeld eronder. Resultaat is een vlak grijs vlak, precies wat er misging. In plaats daarvan een lichte doorschijnende laag, zodat het glas van de ouderkaart, met het beeld erin, er gewoon doorheen blijft schijnen. */ .sec-atmos.even .notif, .sec-atmos.even .tg-bub, .sec-atmos.even .ml-box{ background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05)); backdrop-filter:none;-webkit-backdrop-filter:none; border:1px solid rgba(255,255,255,.14); border-top-color:rgba(255,255,255,.26)} /* Ook de knoppen binnen die kaarten: glas i.p.v. dichte vlakken. */ .sec-atmos.even .tg-btns span, .sec-atmos.even .ml-btns .b2, .sec-atmos.even .dx-b2{ background:rgba(255,255,255,.08); backdrop-filter:none;-webkit-backdrop-filter:none; border-color:rgba(255,255,255,.18)} /* De kansenkaarten iets luchtiger zodat de hand erdoorheen komt. */ .sec-atmos.even .opp-c{backdrop-filter:blur(22px) saturate(114%) brightness(0.85); -webkit-backdrop-filter:blur(22px) saturate(114%) brightness(0.85)} /* De randen van de glaskaarten waren nog een dunne harde lijn. Glas heeft geen getekende rand maar een lichtrand: helder waar het licht valt (boven), vrijwel weg aan de onderkant. Plus een binnenrand die de dikte suggereert. */ .sec-atmos.even .dv, .sec-atmos.even .opp-c, .sec-atmos.even .goal-c, .sec-atmos.even .mrep, .sec-atmos.even .notif, .sec-atmos.even .tg-bub, .sec-atmos.even .ml-box{ border-color:rgba(255,255,255,.06); border-top-color:rgba(255,255,255,.26); border-left-color:rgba(255,255,255,.13); border-right-color:rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.22)} /* Met het zwart verder teruggetrokken zakte de lede naar 4,06 (norm 4,5). In plaats van het beeld weer te verdonkeren: tekst iets lichter, dan blijft het blauw zichtbaar én is het leesbaar. */ .hero .lede{color:#c9c9d2} /* ============================================================ PAGINAKOP MET BEELD, gedeeld over alle subpagina's. De koppen waren vlak zwart met een lege rechterhelft: de h1 stond links en daarnaast gebeurde niets. Nu draagt een beeld die kant, met dezelfde behandeling als de homepage-hero: donker waar de tekst staat, open waar ruimte is. Elke pagina houdt z'n eigen beeld via --wash, zodat je merkt dat je ergens anders bent. ============================================================ */ .page-hero.has-img{position:relative;overflow:hidden; padding-top:clamp(150px,17vh,196px);padding-bottom:clamp(80px,10vh,120px)} .page-hero.has-img::before{content:"";position:absolute;inset:0;z-index:0; background:var(--wash) 60% center/cover no-repeat; filter:saturate(.88) brightness(.9) contrast(1.03)} .page-hero.has-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(96deg, rgba(9,9,11,.95) 0%, rgba(9,9,11,.86) 22%, rgba(9,9,11,.55) 44%, rgba(9,9,11,.22) 66%, rgba(9,9,11,.34) 100%), linear-gradient(180deg, rgba(9,9,11,.72) 0%, rgba(9,9,11,.18) 26%, rgba(9,9,11,.30) 62%, rgba(9,9,11,.86) 90%, var(--ink-0) 100%)} .page-hero.has-img>.wrap{position:relative;z-index:2} @media (max-width:820px){ .page-hero.has-img::after{background: linear-gradient(180deg, rgba(9,9,11,.80) 0%, rgba(9,9,11,.55) 30%, rgba(9,9,11,.62) 60%, rgba(9,9,11,.90) 88%, var(--ink-0) 100%)} } /* Beeld in de spotlight, dat is wat het bij Planhat beleving geeft: je krijgt iets te zien in plaats van alleen te lezen. Crop uit de bestaande atmos-set, dus geen extra gewicht aan nieuwe beelden. */ .mm-img{display:block;width:100%;aspect-ratio:16/10;border-radius:10px;margin:20px 0 14px; background:var(--shot) center/cover no-repeat; filter:saturate(.85) brightness(.92); border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} /* Het spotlight-vak blijft 16:10. De bron is 4:5 staand, dus cover toont de bovenste helft: op 15% zit het hoofd compleet in beeld mét lucht erboven, en de bloemen en gloed vallen er nog binnen. Op 0% raakt het hoofd de rand, vanaf 30% snijdt het aan. Filter zachter dan standaard, dat is bedoeld om drukke landschappen te temmen en zou deze gloed onnodig doven. */ .mm-img--email{background-position:center 15%; filter:saturate(.92) brightness(.96)} /* 'How it works'-spotlight: idem 4:5 staand in 16:10. Op 22% zit het hoofd compleet met lucht erboven en de gloed over het gezicht; hoger snijdt de kruin, lager verdwijnt het hoofd. */ .mm-img--how{background-position:center 22%; filter:saturate(.92) brightness(.96)} /* 'Explore'-spotlight: 4:5 staand in 16:10. Op 15% zit het hoofd compleet met lucht erboven en flankeren de twee duiven de figuur op vleugelhoogte. */ .mm-img--explore{background-position:center 15%; filter:saturate(.92) brightness(.96)} /* Ruimte onder het beeld: het bijschrift kreeg lucht en de knop staat niet meer tegen de regel eronder geplakt. */ .mm-foot{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.1em;line-height:1.5; text-transform:uppercase;color:var(--tx-dim);margin:0 0 22px} .mm-spot .mm-cta{margin-top:2px} .mm-spot>p{margin-bottom:0} /* .mm-spot p had hogere specificiteit dan .mm-foot en zette de marge op 0, waardoor de knop 2px onder het bijschrift plakte. */ .mm-spot .mm-foot{margin:0 0 24px} .mm-spot .mm-cta{margin-top:4px} /* ============================================================ PLATFORM, de uitlegpagina Figma hUWEUBvWiInzYExTLMOnnp, frame 722:2 "Platform — de uitleg V2". De pagina hergebruikt zoveel mogelijk van het bestaande stelsel; hier staat alleen wat er nog niet was. ============================================================ */ /* De twee beeldbanden. De wegval naar zwart zit in het bestand zelf, niet in css: het zijn uitsneden uit het productontwerp waar de overgang met de hand is afgesteld. Daarom géén .sec-atmos, die zou er een tweede sluier overheen leggen. De hero heeft een plafond van 58vh, want zonder dat werd die band op een breed scherm 1200 pixels hoog en vielen de titel en de knoppen onder de vouw. Let op: dat plafond snijdt de zwarte staart van het beeld eraf, en daarom schuift de tekst hier NIET met een negatieve marge de band in. Elke overlap landt dan op de kaarten van het dashboard. Wil je de kop toch over het beeld, dan moet de tekst ín de band komen te liggen in plaats van eronder. De slotband is niet afgetopt, daar werkt de negatieve marge wel. */ .pf-band{width:100%;background:var(--ink-0) top center/cover no-repeat} /* De hero draagt de hele band, onafgetopt. Twee andere opzetten zijn geprobeerd en allebei door Joost afgekeurd: een plafond van 58vh sneed het beeld dwars door de kaarten, en het beeld als achtergrond van de sectie met de tekst erin liet op een kort venster niets van het scherm over. Dit is de vorm die blijft: het volledige opdoemende dashboard, de tekst schuift er met een negatieve marge overheen. Dat je voor de kop moet scrollen is hier de prijs, en die is bewust betaald. Let op bij het vervangen van hero-overzicht.jpg: exporteer de schuine band NIET opnieuw uit de Figma. Die schuinstand is daar met tachtig horizontale plakken nagemaakt en zet om de 15 rijen een sprong van 4 px in het beeld, waardoor de tekst in de rechterkaarten uit elkaar valt. Bouw de band op uit het platte scherm met tools/hero_uit_plat.py. */ .pf-band--hero{aspect-ratio:1440/860; background-image:url('../img/product/hero-overzicht.jpg?v=20260817')} .pf-band--slot{aspect-ratio:1440/820; background-image:url('../img/product/slotband.jpg')} .pf-onder{position:relative;z-index:2;margin-top:-176px} .pf-onder--slot{margin-top:-330px} @media (max-width:860px){.pf-onder{margin-top:-96px}.pf-onder--slot{margin-top:-158px}} /* MOBIEL, DE TWEE BANDEN Op een telefoon van 390 px werd de hero 233 px hoog. Het hele dashboard van 1440 px werd dus op 390 px geperst: de kaarttekst kwam op 3 px uit en de ribbel die we net weghaalden deed daar niets meer toe, want er was niets te lezen. Daarbij landde de negatieve marge van 96 px middenin de kaarten, want op die hoogte is de zwarte staart van het beeld weg, en zat de koptekst bovenop het scherm. De band toont hier daarom een uitsnede in plaats van het hele scherm: de begroeting, de kaart Hours back met 18 hrs, en het begin van Today. Op zo'n schaal dat de kaarttitels op 14 px uitkomen en de getallen op 27 px. Voor een venster van 390 px: schaal 0,476 -> beeldvenster van 820 px breed, dus background-size 351% hoogte 350 px, dus aspect-ratio 39/35 background-position 7% 37%, zodat de header op de begroeting landt en niet op de kaarten; dat was de afweging, er moet iets onder de header liggen Het verloop bovenaan geeft de header een eigen grond, dat onderaan maakt de afsnijding zacht. */ @media (max-width:720px){ .pf-band{background-position:center} .pf-band--hero{ aspect-ratio:39/35; background-image: linear-gradient(180deg,rgba(9,9,11,.92) 0,rgba(9,9,11,.72) 58px,rgba(9,9,11,0) 128px), linear-gradient(0deg,var(--ink-0) 0,rgba(9,9,11,0) 72px), url('../img/product/hero-overzicht.jpg?v=20260817'); background-size:auto, auto, 351% auto; background-position:top center, bottom center, 7% 37%} .pf-band--slot{ aspect-ratio:39/34; background-image: linear-gradient(180deg,var(--ink-0) 0,rgba(9,9,11,.42) 56px,rgba(9,9,11,0) 128px), linear-gradient(0deg,var(--ink-0) 0,rgba(9,9,11,0) 70px), url('../img/product/slotband.jpg'); background-size:auto, auto, 232% auto; background-position:top center, bottom center, 58% 34%} /* geen overlap meer: op deze hoogte is er geen zwarte staart om op te landen */ .pf-onder,.pf-onder--slot{margin-top:28px} /* DE VIER PRODUCTBEELDEN Op 347 px kwam de kaarttekst van een scherm van 1248 px op 4 px uit. Een uitsnede helpt hier niet, want het onderwerp is het hele scherm. Ze staan daarom op ware grootte in een schuifbaar vak: wat je ziet is leesbaar, en de rest haal je erbij door te schuiven. De rechterrand vaagt uit, zodat te zien is dat er meer staat. */ .pf-scherm-rol{position:relative;overflow:auto;max-height:68vh; overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch; border-radius:14px;border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02)} /* --sw is de ontwerpbreedte uit het width-attribuut. De bestanden zijn 2x, dus zonder deze regel rendert het beeld op tweemaal de ontwerpmaat en is er nog meer geschuif nodig. */ .pf-scherm-rol .pf-scherm{width:var(--sw,1248px);max-width:none;height:auto; border:0;border-radius:0} .pf-naast .pf-scherm-rol{max-height:56vh} /* Een grid-kolom van 1fr krijgt als ondergrens de min-content van zijn inhoud. Zonder deze regel duwt het beeld van 1248 px in het schuifvak de kolom mee open en loopt de tekst ernaast het venster uit. */ .pf-naast>*,.pf-naast--breed>*{min-width:0} } /* Drie kengetallen onder de hero: getal, label in sakura, en eronder één regel die zegt wát voor werk het was. */ .pf-kern{display:grid;grid-template-columns:repeat(3,1fr);gap:32px; margin-top:56px;padding-top:36px;border-top:1px solid var(--line-d)} .pf-kern b{display:block;font-family:var(--font-display);font-weight:400; font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.01em;color:var(--tx-hi)} .pf-kern b span{font-family:var(--font-sans);font-size:.94rem;color:var(--sakura); margin-left:14px;letter-spacing:0} .pf-kern p{margin:10px 0 0;font-size:.94rem;color:var(--tx-mid);max-width:none} @media (max-width:720px){.pf-kern{grid-template-columns:1fr;gap:24px}} /* Een uitspraak uit het product, met een sakura-liniaal ervoor. De tweede regel is wat de medewerker zelf zegt, de derde waar het vandaan komt. */ .pf-cite{border-left:3px solid var(--sakura);padding-left:40px;margin-top:52px} .pf-cite>p{font-family:var(--font-display);font-weight:400; font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.42;color:var(--tx-hi); margin:0;max-width:62ch} .pf-cite .zegt{font-family:var(--font-sans);font-size:1rem;color:var(--sakura); margin-top:18px;line-height:1.5} .pf-cite .bron{font-size:.86rem;color:var(--tx-dim);margin-top:10px;line-height:1.5} @media (max-width:640px){.pf-cite{padding-left:24px}} /* De lus in vier stappen, op één liniaal met een stip per stap. */ .pf-loop{display:grid;grid-template-columns:repeat(4,1fr);gap:34px; border-top:1px solid var(--line-d);padding-top:36px;margin-top:8px} .pf-loop>div{position:relative} .pf-loop>div::before{content:"";position:absolute;top:-41px;left:0; width:11px;height:11px;border-radius:50%;background:var(--sakura)} .pf-loop .nr{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em; color:var(--tx-dim);display:block;margin-bottom:12px} .pf-loop h3{font-family:var(--font-display);font-weight:400;font-size:1.35rem; color:var(--tx-hi);margin:0 0 16px} .pf-loop p{font-size:.94rem;line-height:1.6;color:var(--tx-mid);margin:0;max-width:none} @media (max-width:900px){.pf-loop{grid-template-columns:1fr 1fr;gap:38px 34px}} @media (max-width:560px){.pf-loop{grid-template-columns:1fr}} /* De regel onder de lus, tussen twee haken. Zegt waarom het een lus is. */ .pf-haak{margin-top:48px;padding-top:22px;position:relative;max-width:820px; border-top:1px solid var(--line-d)} .pf-haak::before,.pf-haak::after{content:"";position:absolute;top:0; width:1px;height:12px;background:var(--line-d)} .pf-haak::before{left:0}.pf-haak::after{right:0} .pf-haak p{color:var(--sakura);font-size:.98rem;margin:0;max-width:none} /* Van signaal naar resultaat: vijf momenten onder elkaar op één lijn. */ .pf-tijd{position:relative;padding-left:44px;margin-top:8px} .pf-tijd::before{content:"";position:absolute;left:5px;top:6px;bottom:26px; width:1px;background:var(--line-d)} .pf-tijd>div{position:relative;padding-bottom:44px} .pf-tijd>div::before{content:"";position:absolute;left:-44px;top:4px; width:11px;height:11px;border-radius:50%;background:var(--sakura)} .pf-tijd .stap{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em; text-transform:uppercase;color:var(--sakura);display:block;margin-bottom:10px} .pf-tijd p{font-family:var(--font-display);font-weight:400; font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.45;color:var(--tx-hi); margin:0;max-width:none} /* Drie trappen van autonomie, elk met een stip. */ .pf-trap{margin-top:44px} .pf-trap>div{position:relative;padding-left:30px;margin-bottom:32px} .pf-trap>div::before{content:"";position:absolute;left:0;top:8px; width:9px;height:9px;border-radius:50%;background:var(--sakura)} .pf-trap h3{font-size:1.05rem;font-weight:500;color:var(--tx-hi);margin:0 0 8px} .pf-trap p{font-size:.94rem;color:var(--tx-mid);margin:0;max-width:none} /* Vijf dingen die altijd zichtbaar blijven, elk onder een eigen streepje. */ .pf-vijf{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:44px} .pf-vijf>div{border-top:1px solid var(--line-d);padding-top:18px; font-size:.94rem;color:var(--tx-mid)} @media (max-width:900px){.pf-vijf{grid-template-columns:1fr 1fr}} @media (max-width:520px){.pf-vijf{grid-template-columns:1fr}} /* Een rij met pijlen ertussen: rol, medewerker, team. En verderop het traject. */ .pf-pijl{display:grid;align-items:start;gap:22px;margin-top:52px; grid-template-columns:1fr 40px 1fr 40px 1fr} .pf-pijl--vier{grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr;margin-top:40px} .pf-pijl h3{font-family:var(--font-display);font-weight:400;font-size:1.3rem; color:var(--tx-hi);margin:0 0 12px} .pf-pijl .kl{font-size:1.05rem;color:var(--tx-hi);margin:0} .pf-pijl .kl.nu{color:var(--sakura)} .pf-pijl p{font-size:.94rem;color:var(--tx-mid);margin:0;max-width:none} .pf-pijl .arr{color:var(--sakura);font-size:1.1rem;line-height:1.5;text-align:center} @media (max-width:860px){ .pf-pijl,.pf-pijl--vier{grid-template-columns:1fr;gap:26px} .pf-pijl .arr{display:none}} /* Een productscherm als beeld. Zelfde randbehandeling als de glaskaarten. */ .pf-scherm{display:block;width:100%;height:auto;border-radius:14px; border:1px solid rgba(255,255,255,.10)} .pf-bij{font-size:.86rem;color:var(--tx-dim);margin:18px 0 0;max-width:none} /* Twee kolommen waarvan de rechter een scherm draagt. */ .pf-naast{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px); align-items:start} .pf-naast--breed{grid-template-columns:1fr 1.1fr} @media (max-width:900px){.pf-naast,.pf-naast--breed{grid-template-columns:1fr}} /* De verticale ritmiek op deze pagina. De site regelt afstand met losse mt-klassen en niet met marges op koppen, dus binnen .pf zetten we ze zelf. Alleen hier, zodat de rest van de site niet verschuift. */ .pf .display{margin-bottom:26px} .pf .sec-head .h2{margin-bottom:22px;font-size:clamp(1.5rem,2.5vw,2.05rem)} .pf .sec{--sec-y:clamp(56px,6vw,88px)} .pf .sec-head{margin-bottom:clamp(34px,4vw,58px)} .pf-band+.pf-onder .h1,.pf-band+.pf-onder .display{margin-top:0} .pf .grid-2 .h3{margin-bottom:22px} .pf .grid-2 p{max-width:54ch} .pf .sec-head .lede{margin-top:4px} /* ============================================================ EDITORIAL, ARTIKELPAGINA'S De generator zet elke sectie als een blok in een grid. Binnen zo'n blok stonden de alinea's zonder marge onder elkaar, dus liepen ze aan elkaar vast. Ruimte tussen de alinea's hoort bij de tekst zelf, niet bij het grid. ============================================================ */ .artikel .h3{margin-bottom:.55em} .artikel p{margin:0 0 1.05em;max-width:66ch} .artikel p:last-child{margin-bottom:0} .artikel>.eyebrow{margin-top:8px;padding-top:22px;border-top:1px solid var(--line-d);max-width:66ch}