Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330@reference "../../../../app.css";
/* ---------- Designed for humans and agents: a person's profile and an agent's, each with the profile page's activity chart, linked by a vouch, in iso (AgentCard.svelte) ---------- */.landing { .ag { position: relative; width: 100%; /* Its width comes from the stage, its height from that width, so scaling the group never resizes the box (and re-runs the observer that sets the scale). */ contain: inline-size; aspect-ratio: 460 / 400; max-height: 400px; font-size: 10px; font-weight: 450; line-height: 1; letter-spacing: -0.01em; color: var(--text); } @media (width < 64rem) { .ag { max-width: 380px; margin-inline: auto; } } .ag-frame { position: absolute; top: 0; left: 50%; width: 460px; height: 400px; transform-origin: 50% 0; translate: -50% 0; scale: var(--z, 1); }
/* Both plates, the thread and its knot on the feature plane, laid out on 300 × 360. */ .ag-plane { position: absolute; top: 20px; left: 92px; width: 300px; height: 360px; transform: var(--iso-plane); }
/* A profile: the same plate for either, its thickness a second silhouette 4px down the screen — local (2.12, 3.86). */ .ag-p { position: absolute; left: 0; top: calc(var(--p) * 190px); box-sizing: border-box; width: 300px; height: 170px; padding: 0 14px; border: 1px solid var(--ag-edge, var(--hl-edge)); border-radius: 16px; background: var(--hl-solid); box-shadow: 2.12px 3.86px 0 -1px var(--hl-side), 2.12px 3.86px 0 0 var(--ag-edge, var(--hl-edge)); /* Held a little down the plane and clear until it turns on, then each rises in. */ opacity: 0; translate: 0 14px; transition: opacity 0.7s var(--ease-out), translate 1s var(--ease-glide); transition-delay: calc(0.1s + var(--p) * 0.25s); } .ag-p.is-agent { --ag-edge: var(--hl-mid); --ag-sel: var(--hl-side); background: var(--hl-sheen), var(--color-background-subtle); } .ag-plane.on .ag-p { opacity: 1; translate: 0 0; }
.ag-head { display: flex; align-items: center; gap: 10px; height: 50px; } .ag-av { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 6%, var(--av-gap)); box-shadow: inset 0 0 0 1px var(--hl-mid); color: color-mix(in srgb, var(--ink) 70%, var(--muted));
svg { width: 14px; height: 14px; } } /* The name and handle, as bars. */ .ag-who { display: flex; flex-direction: column; gap: 5px;
i { display: block; width: 58px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 25%, transparent); } i + i { width: 38px; background: color-mix(in srgb, var(--ink) 12%, transparent); } } .ag-title { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--muted); }
/* The chart, the profile page's in little: four months, each a column, the selected one tinted; a stat per metric per month, joined month to month by curves. */ .ag-chart { position: relative; height: 106px; border: 1px solid var(--hl-mid); border-radius: 8px; overflow: hidden; } /* One tint for both charts, at --t columns: it follows the pointer on a spring (AgentCard), so no transition here. */ .ag-sel { position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--ag-sel, var(--glass-solid-hover)); translate: calc(var(--t) * 100%) 0; } .ag-col { position: absolute; top: 0; bottom: 0; left: calc(var(--c) * 25%); width: 25%; padding: 0; border: 0; border-left: 1px solid var(--hl-mid); background: none; font: inherit; color: var(--muted); cursor: pointer; } .ag-col:first-of-type { border-left: 0; } .ag-col:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .ag-month { position: absolute; bottom: 7px; left: 7px; }
.ag-curves { position: absolute; top: 0; left: 0; width: 100%; height: 84px; overflow: visible; fill: none; pointer-events: none;
path { stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.45; transition: stroke-dashoffset 0.5s var(--ease-in-out); transition-delay: calc(0.55s + var(--p) * 0.25s + var(--s) * 0.09s); } .up { stroke: var(--color-foreground-success); } .down { stroke: var(--color-foreground-danger); } } .ag-plane.on .ag-curves path { stroke-dashoffset: 0; }
/* A stat: icon, count, the arrow of its month — the selected month's lit, the rest muted, as on the profile page. A change of month spreads out from the chosen one, 45ms a column (--d, its distance from it). */ .ag-stat { position: absolute; display: flex; align-items: center; gap: 3px; height: 17px; padding: 0 4px; border-radius: 5px; background: var(--hl-plate); color: var(--muted); white-space: nowrap; pointer-events: none; translate: 0 -50%; opacity: 0; transition: opacity 0.5s var(--ease-out), color 0.25s ease, background-color 0.25s ease; transition-delay: calc(0.75s + var(--p) * 0.25s + var(--c) * 0.12s), calc(var(--d) * 45ms), calc(var(--d) * 45ms);
svg { flex: none; width: 10px; height: 10px; } .ag-up, .ag-down { width: 9px; height: 9px; transition: color 0.25s ease calc(var(--d) * 45ms); } } .ag-plane.on .ag-stat { opacity: 1; } .ag-stat.is-current { background: color-mix(in srgb, var(--ink) 6%, var(--hl-plate)); color: var(--text);
.ag-up { color: var(--color-foreground-success); } .ag-down { color: var(--color-foreground-danger); } }
/* The thread from one plate to the other, round the left of the pair: drawn in once the plates are up, with the vouch knotted on it. */ .ag-thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none;
path { stroke: var(--hl-edge); stroke-width: 1.5; stroke-linecap: round; } .ag-dash { stroke-dasharray: 4 4; } .ag-tie, .ag-reveal { stroke-dasharray: 1; stroke-dashoffset: 1; } .ag-tie { transition: stroke-dashoffset 0.55s ease-in 0.9s; } .ag-reveal { stroke: white; transition: stroke-dashoffset 0.55s ease-out 1.45s; } } .ag-plane.on .ag-thread :is(.ag-tie, .ag-reveal) { stroke-dashoffset: 0; } .ag-knot { position: absolute; top: 180px; left: -30px; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--hl-plate); box-shadow: 0 0 0 1px var(--hl-edge), 1.06px 1.93px 0 0 var(--hl-edge); color: var(--accent-text); opacity: 0; scale: 0.6; transition: opacity 0.5s var(--ease-out) 1.5s, scale 0.7s var(--ease-glide) 1.5s;
svg { width: 14px; height: 14px; } } .ag-plane.on .ag-knot { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) { .ag-p, .ag-curves path, .ag-stat, .ag-thread :is(.ag-tie, .ag-reveal), .ag-knot { transition-delay: 0s; } }}