/* /x/home-calm (5 Nov 2026): a calmer round of the homepage, loaded after every other stylesheet and scoped to body.home-calm, so the live homepage and the shared components stay as they are. Jantine: "het mag allemaal wat cleaner, wat meer ruimte, ergens een andere achtergrondkleur". What it does: more air (one larger section rhythm), the sections alternate paper, band and the one ink band, eyebrows lose their chip, boxes inside cells lose their own fill, and the Lab cells carry one simple visual each. Tokens only (the --b-* set of brand.css); no new colours. */ :root body.home-calm{--calm-sec:144px;--calm-gap:64px} @media (max-width:900px){:root body.home-calm{--calm-sec:104px;--calm-gap:48px}} @media (max-width:600px){:root body.home-calm{--calm-sec:80px;--calm-gap:36px}} /* ---------- rhythm: paper, band, paper, ink, paper, band, paper, band ---------- */ :root body.home-calm :is(.why,.layers,.ink,.home-flow-g,.plans,.lab){padding-block:var(--calm-sec)} :root body.home-calm :is(.why,.plans,.close){background:var(--b-band)} :root body.home-calm .close{padding-top:var(--calm-sec);padding-bottom:0} :root body.home-calm :is(.layers,.plans,.lab) > .wrap > .hy-sec-head{margin-bottom:var(--calm-gap)} :root body.home-calm .home-flow-g + .plans,:root body.home-calm .ink + .home-flow-g{margin-top:0} /* one quiet section head: the eyebrow is plain mono text, no chip */ :root body.home-calm .hy-eyebrow .hy-eyebrow__l{display:inline-flex;align-items:center;gap:10px;padding:0;background:none;border-radius:0;color:var(--b-ink-2)} :root body.home-calm .hy-eyebrow .hy-eyebrow__l::before{content:'';width:6px;height:6px;background:var(--b-accent);flex:none} :root body.home-calm :is(.ink,.hy-ink) .hy-eyebrow .hy-eyebrow__l{background:none;color:var(--b-ink-soft)} :root body.home-calm :is(.ink,.hy-ink) .hy-eyebrow .hy-eyebrow__l::before{background:var(--b-accent-light)} :root body.home-calm .hero .hy-eyebrow .hy-eyebrow__l::before{display:none} :root body.home-calm .hero .hy-eyebrow .hy-eyebrow__l{color:var(--b-muted)} :root body.home-calm .hy-eyebrow{gap:12px} :root body.home-calm .hy-sec-head .hy-eyebrow{margin-bottom:24px} /* ---------- hero: more air, one product window ---------- */ :root body.home-calm .hero{padding-top:64px} :root body.home-calm .hero__h1{margin-top:0;font-size:clamp(52px,6.8vw,98px)} :root body.home-calm .hero__sub{margin-top:26px} :root body.home-calm .hero__cta{margin-top:34px} :root body.home-calm .hero__small{margin-top:16px} :root body.home-calm .stage{margin-top:60px} :root body.home-calm .stage__mat{background-image:none;padding:16px 48px 0} :root body.home-calm .stage__bar{justify-content:center;margin-bottom:14px} /* ---------- logos: the two rows drift as on option C (c.css, c.js), names without chips ---------- */ :root body.home-calm .mq-wrap{padding:88px 0 var(--calm-sec)} :root body.home-calm .mq-wrap .hy-wrap{gap:4px} :root body.home-calm .home-mq ul{gap:28px;padding:0 28px 0 0} :root body.home-calm .home-mq li{height:36px;padding:0;background:none;border:0;font-size:15px;color:var(--b-ink-2)} /* ---------- why: one statement on the band, nothing moving ---------- */ :root body.home-calm .why__big{max-width:1000px;font-size:clamp(28px,3.4vw,46px);line-height:1.14} /* ---------- layers: the cells keep their card, what is inside loses its own box ---------- */ :root body.home-calm .hy-bento{gap:24px} :root body.home-calm .hy-also{gap:6px 18px} :root body.home-calm .hy-also > *,:root body.home-calm .hy-also > :has(> .home-logo){min-height:0;padding:0;border:0;background:none;font:400 12.5px/1.4 var(--b-mono);color:var(--b-muted)} :root body.home-calm :is(.cx__sheet,.pii){background:none;padding:0;border-radius:0} :root body.home-calm .cx{gap:16px} :root body.home-calm .cx__sheet{padding-top:16px;border-top:1px solid var(--b-line)} :root body.home-calm :is(.cx__rows dd,.cx__cmd){background:none;border:1px solid var(--b-line-2);border-radius:var(--b-r-ctl)} :root body.home-calm .mini-term{background:none;color:var(--b-ink);border-radius:0;padding:12px 0 0;border-top:1px solid var(--b-line);min-height:0} :root body.home-calm .mini-term .p{color:var(--b-accent)} :root body.home-calm .mini-term .d{color:var(--b-muted)} :root body.home-calm .pii{padding-bottom:16px;border-bottom:1px solid var(--b-line)} :root body.home-calm .pii__swap.is-out{background:var(--b-band)} /* ---------- plans on the band: one card each, the art without its own panel ---------- */ :root body.home-calm .plan{border-color:var(--b-line-2)} :root body.home-calm .plan__art{background:none;border-radius:0;margin:-4px 0 28px;padding:0;height:200px} :root body.home-calm .plan__art .pa-chip{border:0;background:var(--b-band)} :root body.home-calm .plan__art .pa-iso{justify-items:center;padding:0} :root body.home-calm .plan__art .pa-iso .pa-chip{color:var(--b-ink)} :root body.home-calm .plan__art .pa-iso__foot{text-align:center} :root body.home-calm .plan__art .pa-iso__gpus i{background:var(--b-band)} :root body.home-calm .plan__art .pa-iso__gpus i.on{background:var(--b-accent)} :root body.home-calm .plans__note{margin-top:32px} /* ---------- Lab: one simple visual per cell ---------- */ :root body.home-calm .lab__grid{gap:24px} :root body.home-calm .lab__vis{height:220px;padding:32px;justify-content:center} :root body.home-calm .lab__step h3{margin-top:28px} :root body.home-calm .lab__cta{margin-top:64px} :root body.home-calm .cl-bench{display:grid;gap:16px;margin:0;padding:0;list-style:none} :root body.home-calm .cl-bench li{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:12px;font:400 13px/1 var(--b-font);color:var(--b-ink-2)} :root body.home-calm .cl-bench i{display:block;height:6px;width:calc(var(--w) * 100%);background:var(--b-ink);border-radius:1px} :root body.home-calm .cl-bench li:first-child i{background:var(--b-accent)} :root body.home-calm .cl-ft{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;align-items:center} :root body.home-calm .cl-ft__src{display:grid;gap:40px} :root body.home-calm .cl-ft__k{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 8px;border:1px solid var(--b-line-2);border-radius:var(--b-r-ctl);background:var(--b-card);font:500 13px/1 var(--b-font);color:var(--b-ink);white-space:nowrap} :root body.home-calm .cl-ft__k .home-logo{display:block;width:16px;height:16px} :root body.home-calm .cl-ft__eu{display:grid;place-items:center;height:18px;padding:0 4px;border-radius:var(--b-r-px);background:var(--b-band);font:500 10px/1 var(--b-mono);font-style:normal;color:var(--b-ink)} :root body.home-calm .cl-ft__lines{width:100%;height:108px;overflow:visible} :root body.home-calm .cl-ft__lines path{fill:none;stroke:var(--b-line-2);stroke-width:1.5;vector-effect:non-scaling-stroke} :root body.home-calm .cl-ft__loes{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--b-line-2);border-radius:var(--b-r-ctl);font:800 19px/1 'Plus Jakarta Sans',var(--b-font);letter-spacing:-.02em;color:var(--b-ink)} :root body.home-calm .cl-ft__loes img{display:block;width:22px;height:22px} :root body.home-calm .cl-runs{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;font:400 12.5px/1.5 var(--b-mono);color:var(--b-muted)} :root body.home-calm .cl-runs a{color:var(--b-ink-2);text-decoration:underline;text-decoration-color:var(--b-line-2);text-underline-offset:3px} :root body.home-calm .cl-runs a:hover{text-decoration-color:currentColor} :root body.home-calm .cl-loss{display:block;width:100%;height:100%;overflow:visible} :root body.home-calm .cl-loss path{fill:none;vector-effect:non-scaling-stroke} :root body.home-calm .cl-loss__base{stroke:var(--b-line-2);stroke-width:1} :root body.home-calm .cl-loss__line{stroke:var(--b-accent);stroke-width:2} /* ---------- close on the band: the overview window rises from it, no panel of its own ---------- */ :root body.home-calm .close__shot{background:none;padding:0;margin-top:96px} @media (max-width:900px){ :root body.home-calm .stage__mat{padding:20px 24px 24px} } @media (max-width:600px){ :root body.home-calm .hero{padding-top:40px} :root body.home-calm .stage{margin-top:60px} :root body.home-calm .stage__mat{padding:10px 10px 12px} :root body.home-calm .stage__bar{margin-bottom:10px} :root body.home-calm .mq-wrap{padding-top:56px} :root body.home-calm .home-mq ul{gap:20px;padding-right:20px} :root body.home-calm .home-mq li{height:32px;font-size:14px} :root body.home-calm .lab__vis{height:200px;padding:24px} :root body.home-calm .close__shot{margin-top:64px} } /* ---------- one card, after langdock.com (Jantine 5 Nov 2026: "heel clean die cards") ---------- A card is a soft fill with no border: band on paper (layers, Lab), card white on the band (plans). Generous padding, the title and one line at the top, the visual low in the card with air around it. Controls inside a card keep their hairline, so they still read on the fill. */ :root body.home-calm{--calm-card-pad:40px} :root body.home-calm .layers .hy-cell, :root body.home-calm .lab__vis{background:var(--b-band);border:0;border-radius:var(--b-r-panel)} :root body.home-calm .plans .plan{background:var(--b-card);border:0;border-radius:var(--b-r-panel);padding:var(--calm-card-pad)} :root body.home-calm .layers .hy-cell__text{padding:var(--calm-card-pad) var(--calm-card-pad) 28px} :root body.home-calm .layers .hy-cell__vis{padding:8px var(--calm-card-pad) var(--calm-card-pad);gap:20px} :root body.home-calm .layers .hy-cell__p{color:var(--b-muted)} :root body.home-calm .lab__vis{padding:var(--calm-card-pad)} /* what sits on the band fill gets the card white, so nothing disappears into the fill */ :root body.home-calm .layers :is(.cx__rows dd,.cx__cmd,.pii__swap.is-out){background:var(--b-card)} :root body.home-calm .layers .hy-cell :is(input[type="search"],.hm-search,[class*="search"]):not(button){background:var(--b-card)} :root body.home-calm .layers .today__row img:not(.today__face){background:var(--b-card)} :root body.home-calm .lab__vis .cl-bench li i{border-radius:1px} /* inside a filled cell option C's own wells (bars, slider tracks, GPU cells) take the card white */ :root body.home-calm .layers .hy-cell{--band:var(--b-card)} :root body.home-calm .lab__vis .cl-ft__eu{background:var(--b-raised)} @media (max-width:600px){ :root body.home-calm{--calm-card-pad:24px} :root body.home-calm .layers .hy-cell,:root body.home-calm .lab__vis,:root body.home-calm .plans .plan{border-radius:var(--b-r-card)} } /* Train cell (5 Nov 2026, "mag iets mooier, is te calm"): a labelled chart, a soft area under the line and a square at today's point; still one visual. */ :root body.home-calm .cl-train{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;width:100%;height:100%} :root body.home-calm .cl-train p{display:flex;justify-content:space-between;margin:0;font:400 12px/1.2 var(--b-mono);color:var(--b-muted)} :root body.home-calm .cl-loss__area{fill:var(--b-accent);opacity:.08;stroke:none} :root body.home-calm .cl-train__now{position:absolute;right:-5px;bottom:calc(12px + 1.2em + 12px + 10.8%);width:10px;height:10px;border-radius:2px;background:var(--b-accent)} :root body.home-calm .cl-train__plot{position:relative;min-height:0} :root body.home-calm .cl-loss path.cl-loss__area{fill:var(--b-accent);opacity:.08} :root body.home-calm .cl-train__plot .cl-train__now{right:-5px;bottom:auto;top:calc(107 / 120 * 100% - 5px)} /* No eyebrow labels (5 Nov 2026, Jantine: "al die labels echt AI slop"): the heading carries each section on its own; the small labels left inside cards are plain sans, not mono chips. */ :root body.home-calm .hy-eyebrow{display:none} :root body.home-calm :is(.plan__layer, .today__k, .pii__k){font:500 14px/1.4 var(--b-font);letter-spacing:0;color:var(--b-muted)} /* ---------- round 3 (5 Nov 2026) ---------- Jantine: the mono micro labels read as "AI slop", the Code cell was "wat mucho", the console still had a border, and the plan price line "loopt niet lekker". So: no outlined boxes anywhere (a soft fill separates, never a border), mono only for real code and commands, plain sans for every label. */ /* sans for every label and value; mono stays on code, pre and the command line */ :root body.home-calm main :is(.hy-cell__tag,.hy-also > *,.home-models__n,.cfg output,.cfg small,.pa-chip small,.pa-iso__foot,.plan__price,.cl-ft__eu,.cl-runs,.cl-train p,.pii__swap,.flw-br__tag), :root body.home-calm main .hy-cell dt{font-family:var(--b-font);letter-spacing:0} :root body.home-calm .hy-cell__tag{font-size:14px;font-weight:500;color:var(--b-muted)} :root body.home-calm .hy-cell__tag > span{display:none} :root body.home-calm .hy-also > *,:root body.home-calm .hy-also > :has(> .home-logo){font-size:13.5px;color:var(--b-muted)} :root body.home-calm .cl-runs{font-size:13.5px} :root body.home-calm .cl-train p{font-size:13px} :root body.home-calm .pii__swap{font-size:inherit} /* the Code cell: the tool tabs and one command */ :root body.home-calm .cx{gap:12px;padding-top:20px;border-top:1px solid var(--b-line)} :root body.home-calm .layers .cx__cmd{height:44px;padding:0 8px 0 16px;border:0;background:var(--b-card)} :root body.home-calm .cx__cmd code{font-size:14px} :root body.home-calm .cx__copy{padding:6px 10px;border-radius:var(--b-r-tag)} :root body.home-calm .cx__copy:hover{background:var(--b-band)} /* no outlined boxes: soft fills only */ :root body.home-calm :is(.stage__shot,.close__clip){border:0} :root body.home-calm .stage__tabs{border:0} :root body.home-calm .cl-ft__k,:root body.home-calm .cl-ft__loes{border:0;background:var(--b-card)} :root body.home-calm .home-mq li img,:root body.home-calm main img{border:0} :root body.home-calm .ink .term{border:0;background:var(--b-ink-fill, #221C15)} :root body.home-calm .ink .term__bar{border-bottom:0;padding:16px 16px 4px} :root body.home-calm .ink .term__body{padding-top:16px} /* plan cards: list fills the card, then one aligned divider, price row of two lines, button */ :root body.home-calm .plan__list{flex:1;align-content:start;margin-bottom:28px} :root body.home-calm .plan__price{margin-top:0;padding:20px 0 0;min-height:calc(2 * 1.45em + 20px);margin-bottom:20px;font:500 15px/1.45 var(--b-font);color:var(--b-ink);text-wrap:balance} /* the Code cell, install then run (Jantine: "alles dezelfde breedte"): the tab bar spans the same width as the command block under it, the tabs share it evenly */ :root body.home-calm .cx__tools{display:flex;flex-wrap:wrap;width:100%;box-sizing:border-box} :root body.home-calm .cx__tools > button{flex:1 1 0;justify-content:center;white-space:nowrap} :root body.home-calm .cx__lines{display:grid;padding:6px 8px 6px 16px;border-radius:var(--b-r-ctl);background:var(--b-card)} :root body.home-calm .layers .cx__lines .cx__cmd{height:40px;padding:0;background:none;border-radius:0} :root body.home-calm .cx__lines .cx__cmd + .cx__cmd{border-top:1px solid var(--b-line)} :root body.home-calm .cx__cmd code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root body.home-calm main .flw-br__lv{font-family:var(--b-font)} @media (max-width:600px){ :root body.home-calm .cx__tools > button{flex:1 1 30%} } :root body.home-calm .cx__tools{align-self:stretch} /* ---------- the live Logs screen in the hero (x-site.live-logs, public/js/live-logs.js) ---------- Laid out on the capture's own 1355 x 800 grid: --u is one capture pixel, so the screen scales with the frame exactly as the image did. Under reduced motion it is the same screen, standing still. */ :root body.home-calm .stage__shot{container-type:inline-size} :root body.home-calm .ll{--u:calc(100cqw / 1355);position:absolute;left:0;top:0;width:calc(1355 * var(--u));height:calc(800 * var(--u));overflow:hidden;opacity:0;transition:opacity .6s var(--ease);background:var(--b-card);color:var(--b-ink);font:400 calc(14 * var(--u))/1.3 var(--b-font);letter-spacing:-.005em;font-variant-numeric:tabular-nums} :root body.home-calm .ll.on{opacity:1} :root body.home-calm .ll *{box-sizing:border-box} :root body.home-calm .stage__shot .ll img{position:static;opacity:1;transition:none;max-width:none;left:auto} :root body.home-calm .ll__app{display:flex;height:100%} :root body.home-calm .ll svg{flex:none;width:calc(16 * var(--u));height:calc(16 * var(--u))} :root body.home-calm .ll__side{width:calc(204 * var(--u));flex:none;padding:calc(24 * var(--u)) calc(22 * var(--u)) 0;color:var(--b-ink-2)} :root body.home-calm .ll__brand{display:flex;align-items:center;gap:calc(9 * var(--u));margin:0 0 calc(32 * var(--u)) calc(2 * var(--u));font-size:calc(15 * var(--u));font-weight:600;letter-spacing:-.02em;color:var(--b-ink)} :root body.home-calm .ll__brand i{display:grid;place-items:center;width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:calc(6 * var(--u));background:var(--b-accent)} :root body.home-calm .ll__brand i svg{width:calc(13 * var(--u));height:calc(9 * var(--u))} :root body.home-calm .ll__nav{margin:0;padding:0;list-style:none;display:grid;gap:calc(2.5 * var(--u))} :root body.home-calm .ll__nav li{display:flex;align-items:center;gap:calc(11 * var(--u));height:calc(33 * var(--u));padding:0 calc(11 * var(--u));border-radius:calc(8 * var(--u));font-size:calc(14.5 * var(--u))} :root body.home-calm .ll__nav li.on{background:var(--b-band);color:var(--b-ink)} :root body.home-calm .ll__group{margin:calc(26 * var(--u)) 0 calc(6 * var(--u)) calc(10 * var(--u));font-size:calc(11.5 * var(--u));color:var(--b-muted)} :root body.home-calm .ll__main{flex:1;min-width:0;padding:calc(28 * var(--u)) calc(37 * var(--u)) 0 calc(24 * var(--u))} :root body.home-calm .ll__head{display:flex;justify-content:space-between;gap:calc(20 * var(--u))} :root body.home-calm .ll__title{margin:0;font-size:calc(24 * var(--u));font-weight:600;letter-spacing:-.03em;line-height:1.1} :root body.home-calm .ll__sub{margin:calc(8 * var(--u)) 0 0;color:var(--b-muted);white-space:nowrap} :root body.home-calm .ll__tools{display:flex;gap:calc(9 * var(--u));flex:none} :root body.home-calm .ll__seg{display:flex;align-items:center;height:calc(34 * var(--u));padding:calc(3 * var(--u));border-radius:calc(8 * var(--u));background:var(--b-band)} :root body.home-calm .ll__seg i{font-style:normal;padding:0 calc(13 * var(--u));line-height:calc(28 * var(--u));border-radius:calc(6 * var(--u));color:var(--b-ink-2)} :root body.home-calm .ll__seg i.on{background:var(--b-card);color:var(--b-ink)} :root body.home-calm .ll__tail{display:flex;align-items:center;gap:calc(8 * var(--u));height:calc(34 * var(--u));padding:0 calc(13 * var(--u));border-radius:calc(8 * var(--u));background:var(--b-band);font-size:calc(14.5 * var(--u));font-weight:500} :root body.home-calm .ll__live{display:none;width:calc(7 * var(--u));height:calc(7 * var(--u));margin:0 calc(3 * var(--u));border-radius:1px;background:var(--b-accent)} :root body.home-calm .ll.is-live .ll__live{display:block;animation:ll-live 2.4s ease-in-out infinite} :root body.home-calm .ll.is-live .ll__pulse{display:none} @keyframes ll-live{0%,100%{opacity:1}50%{opacity:.25}} :root body.home-calm .ll__filters{display:flex;align-items:center;gap:calc(8 * var(--u));margin-top:calc(19 * var(--u));height:calc(34 * var(--u))} :root body.home-calm .ll__search,:root body.home-calm .ll__pick{display:flex;align-items:center;gap:calc(8 * var(--u));height:100%;padding:0 calc(12 * var(--u));border-radius:calc(8 * var(--u));background:var(--b-band);color:var(--b-muted);white-space:nowrap} :root body.home-calm .ll__search{width:calc(280 * var(--u))} :root body.home-calm .ll__pick b{font-weight:400;color:var(--b-ink-2)} :root body.home-calm .ll__pick svg{width:calc(13 * var(--u));height:calc(13 * var(--u))} :root body.home-calm .ll__link{color:var(--b-ink-2);font-weight:500;margin-left:calc(26 * var(--u))} :root body.home-calm .ll__link:first-of-type{margin-left:auto} :root body.home-calm .ll__row{display:grid;grid-template-columns:calc(87 * var(--u)) calc(113 * var(--u)) calc(173 * var(--u)) calc(182 * var(--u)) calc(97 * var(--u)) calc(123 * var(--u)) calc(71 * var(--u)) calc(112 * var(--u)) calc(132 * var(--u));align-items:center;height:calc(50 * var(--u));border-bottom:1px solid var(--b-line);white-space:nowrap} :root body.home-calm .ll__row > *{min-width:0;overflow:hidden;text-overflow:ellipsis} :root body.home-calm .ll__row .r{text-align:right} :root body.home-calm .ll__row--head{margin-top:calc(14 * var(--u));height:calc(38 * var(--u));color:var(--b-muted);font-size:calc(13 * var(--u));font-weight:500;border-bottom-color:var(--b-line-2)} :root body.home-calm .ll__rows{transition:transform .6s var(--ease);will-change:transform} :root body.home-calm .ll__time{justify-self:start;padding:calc(2 * var(--u)) calc(4 * var(--u));margin-left:calc(-4 * var(--u));border-radius:calc(4 * var(--u));color:var(--b-ink-2)} :root body.home-calm .ll__ok{display:flex;align-items:center;gap:calc(9 * var(--u));color:var(--b-ink-2)} :root body.home-calm .ll__ok i{width:calc(5 * var(--u));height:calc(5 * var(--u));background:var(--b-ok)} :root body.home-calm .ll__model{display:flex;flex-direction:column;gap:calc(3 * var(--u))} :root body.home-calm .ll__model b,:root body.home-calm .ll__key b{display:flex;align-items:center;gap:calc(9 * var(--u));font-weight:400;color:var(--b-ink)} :root body.home-calm .ll__model img{width:calc(16 * var(--u));height:calc(16 * var(--u));flex:none} :root body.home-calm .ll__model em{display:flex;gap:calc(4 * var(--u));font-style:normal} :root body.home-calm .ll__model em i{font-style:normal;padding:calc(1 * var(--u)) calc(5 * var(--u));border-radius:calc(4 * var(--u));background:var(--b-band);font-size:calc(11.5 * var(--u));color:var(--b-ink-2)} :root body.home-calm .ll__key{display:flex;align-items:center;gap:calc(10 * var(--u))} :root body.home-calm .ll__key img{width:calc(28 * var(--u));height:calc(28 * var(--u));flex:none;image-rendering:pixelated} :root body.home-calm .ll__key img.face{border-radius:calc(6 * var(--u));object-fit:cover;image-rendering:auto} :root body.home-calm .ll__key b{flex-direction:column;align-items:flex-start;gap:calc(2 * var(--u))} :root body.home-calm .ll small{display:block;font-size:calc(12 * var(--u));color:var(--b-muted)} :root body.home-calm .ll__tok{display:flex;flex-direction:column;align-items:flex-end;gap:calc(2 * var(--u))} :root body.home-calm .ll__mut{color:var(--b-muted)} /* a new request: it slides in, its time carries an accent wash for a moment; the oldest fades out */ :root body.home-calm .ll__row{transition:opacity .6s var(--ease)} :root body.home-calm .ll__row.is-out{opacity:0} :root body.home-calm .ll__row.is-new{animation:ll-in .6s var(--ease)} :root body.home-calm .ll__row.is-new .ll__time{animation:ll-wash 1s ease-out} @keyframes ll-in{from{opacity:0}to{opacity:1}} @keyframes ll-wash{from{background:rgb(79 70 229 / .16);color:var(--b-accent)}to{background:transparent}} @media (max-width:600px){ :root body.home-calm .ll{--u:calc(860px / 1355);left:-128px} } @media (prefers-reduced-motion:reduce){ :root body.home-calm .ll,:root body.home-calm .ll__rows,:root body.home-calm .ll__row{transition:none;animation:none} } :root body.home-calm .cx__lines{grid-template-columns:minmax(0,1fr);min-width:0} :root body.home-calm .cx__lines .cx__cmd{display:flex;align-items:center;gap:12px;min-width:0} :root body.home-calm .cx__lines .cx__copy{flex:none} :root body.home-calm .ll__brand i{color:var(--b-on-accent)} /* ---------- one radius scale (Jantine: "vierkante hoeken en afgeronde hoeken, trek alles recht") ---------- bars half their height, tiny marks 2px, chips --b-r-tag, controls --b-r-ctl, cards --b-r-panel */ :root body.home-calm .lab__vis .cl-bench li i{border-radius:3px} :root body.home-calm .cl-ft__eu{border-radius:var(--b-r-tag)} :root body.home-calm :is(.cl-ft__k,.cl-ft__loes,.cx__lines,.cx__copy){border-radius:var(--b-r-ctl)} :root body.home-calm .cl-train__now{border-radius:2px} :root body.home-calm :is(.ll__ok i,.ll__live){border-radius:2px} :root body.home-calm :is(.ll__nav li,.ll__seg,.ll__tail,.ll__search,.ll__pick){border-radius:var(--b-r-ctl)} :root body.home-calm .ll__seg i{border-radius:var(--b-r-tag)} :root body.home-calm :is(.ll__model em i,.ll__time,.ll__brand i,.ll__key img.face){border-radius:var(--b-r-tag)} /* ---------- calls to action (Jantine: "ik mis CTA knoppen", "hyai code iets of get your API key") ---------- */ /* the install line outside the Code cell: the same soft block, on paper or band */ :root body.home-calm .cl-install{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;padding:4px 8px 4px 16px;border-radius:var(--b-r-ctl);background:var(--b-card)} :root body.home-calm .cl-install .cx__cmd{display:flex;align-items:center;gap:12px;height:40px;padding:0;background:none;border:0;border-radius:0;min-width:0} :root body.home-calm .cl-install .cx__copy{flex:none} /* the closing block: the install line under the buttons */ :root body.home-calm .cl-close-cmd{width:min(480px,100%);margin-top:24px} :root body.home-calm .cl-close-cmd{width:min(580px,100%)} :root body.home-calm :is(.ll__ok i,.ll__live){border-radius:calc(1.5 * var(--u))} /* short screens (1280 x 800 and the like): the window shows on arrival */ @media (min-width:601px) and (max-height:860px){:root body.home-calm .hero__h1{font-size:clamp(52px,6vw,80px)}:root body.home-calm .hero{padding-top:44px}:root body.home-calm .stage{margin-top:44px}} /* no divider lines between list rows (Jantine 5 Nov 2026: "streepjes zijn lelijk"): rows sit on spacing alone, and a hovered row gets a soft fill instead of a line */ :root body.home-calm .home-models--cell .home-mc, :root body.home-calm .home-models--cell .home-mc:first-child{border-top:0;border-bottom:0;padding:10px 12px;margin:0 -12px;border-radius:var(--b-r-ctl)} :root body.home-calm .home-models--cell .home-mc:hover{background:var(--b-card)} :root body.home-calm :is(.today__row,.cx__rows > *,.ctl-row,.team-row){border-top:0!important;border-bottom:0!important} /* same rule for every other divider in the cells and plans; the live Logs window keeps its table lines because it shows the real product */ :root body.home-calm :is(.cx,.cx__cmd,.pii,.bud__head,.colhead,.boxes__city,.cfg__out,.plan__list,.plan__price,.layers li,.layers th,.layers td,main li:not(.ll *),main th:not(.ll *),main td:not(.ll *)){border-top-color:transparent!important;border-bottom-color:transparent!important}