/* ================================================================== cursor.css — the designed cursor. One engine, a design per page. Injected on every page by scripts/site-chrome.mjs (SITE:CURSOR). The design is chosen by : ink every blog page reading caret over text, "Read" on links orbit home ring with an orbiting satellite scope TagSpy crosshair reticle signal MCP server rotating dashed data ring node automations dot with a trail of workflow nodes spark Marketer Companion gradient ring plain legal pages quiet dot and ring Only active for a fine pointer without reduced motion (html.jcur-on). ================================================================== */ html.jcur-on,html.jcur-on body,html.jcur-on a,html.jcur-on button,html.jcur-on [role="button"],html.jcur-on label,html.jcur-on summary,html.jcur-on select{cursor:none} /* typing keeps the native text cursor */ html.jcur-on input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),html.jcur-on textarea,html.jcur-on [contenteditable="true"]{cursor:text} .jcur{--c:#059669;--c2:#10b981;--soft:rgba(16,185,129,.14);--ring:34px;position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none; opacity:0;transition:opacity .25s} .jcur.-on{opacity:1} .jcur i,.jcur b{position:absolute;left:0;top:0;display:block;pointer-events:none;will-change:transform} .jcur__dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.85); transition:width .25s,height .25s,margin .25s,opacity .2s,background .25s} .jcur__ring{width:var(--ring);height:var(--ring);margin:calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--c) 55%,transparent); box-shadow:0 0 0 1px rgba(255,255,255,.35);display:grid!important;place-items:center; transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),border-radius .35s,background .3s,border-color .3s,opacity .2s} .jcur__lbl{position:static!important;opacity:0;transform:scale(.6);font:700 11px/1 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap; transition:opacity .2s,transform .3s cubic-bezier(.2,.8,.2,1)} /* hover on anything clickable */ .jcur.-link{--ring:64px} .jcur.-link .jcur__ring{background:var(--c);border-color:var(--c)} .jcur.-link .jcur__dot{opacity:0} .jcur.-link.-lbl .jcur__lbl{opacity:1;transform:none} .jcur.-link:not(.-lbl){--ring:46px} .jcur.-link:not(.-lbl) .jcur__ring{background:var(--soft);border-color:var(--c)} /* pressed */ .jcur.-down .jcur__ring{transform:scale(.82)} .jcur.-down .jcur__dot{transform:scale(1.4)} /* over form fields the custom cursor steps aside */ .jcur.-field{opacity:0} /* ---------------- ink: every blog page ---------------- */ html[data-jcur="ink"] .jcur{--ring:30px} /* over the article text the ring becomes a reading caret */ html[data-jcur="ink"] .jcur.-text .jcur__ring{width:3px;height:26px;margin:-13px 0 0 -1.5px;border-radius:3px;border:0;background:var(--c);box-shadow:0 0 12px color-mix(in srgb,var(--c) 45%,transparent)} html[data-jcur="ink"] .jcur.-text .jcur__dot{opacity:0} html[data-theme="dark"][data-jcur="ink"] .jcur{--c:#34d399;--soft:rgba(52,211,153,.16)} html[data-theme="dark"] .jcur__dot{box-shadow:0 0 0 2px rgba(0,0,0,.5)} /* ---------------- orbit: home ---------------- */ html[data-jcur="orbit"] .jcur__ring::after{content:"";position:absolute;left:50%;top:-3.5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--c2); box-shadow:0 0 8px var(--c2);transform-origin:3px calc(var(--ring) / 2 + 2px);animation:curOrbit 2.4s linear infinite} html[data-jcur="orbit"] .jcur.-link .jcur__ring::after{background:#fff;box-shadow:0 0 8px #fff} @keyframes curOrbit{to{transform:rotate(360deg)}} /* ---------------- scope: TagSpy ---------------- */ html[data-jcur="scope"] .jcur{--c:#6d6bff;--c2:#a5a4ff;--soft:rgba(109,107,255,.16);--ring:40px} html[data-jcur="scope"] .jcur__ring{border-radius:10px;border-style:solid;border-color:transparent;box-shadow:none; background: linear-gradient(var(--c),var(--c)) 0 0/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1.5px 10px no-repeat, linear-gradient(var(--c),var(--c)) 100% 0/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1.5px 10px no-repeat, linear-gradient(var(--c),var(--c)) 0 100%/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1.5px 10px no-repeat, linear-gradient(var(--c),var(--c)) 100% 100%/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px 10px no-repeat} html[data-jcur="scope"] .jcur__dot{width:4px;height:4px;margin:-2px 0 0 -2px;box-shadow:none} html[data-jcur="scope"] .jcur__ring::before,html[data-jcur="scope"] .jcur__ring::after{content:"";position:absolute;background:color-mix(in srgb,var(--c) 45%,transparent)} html[data-jcur="scope"] .jcur__ring::before{left:50%;top:6px;bottom:6px;width:1px;margin-left:-.5px;-webkit-mask:linear-gradient(#000 30%,transparent 30% 70%,#000 70%);mask:linear-gradient(#000 30%,transparent 30% 70%,#000 70%)} html[data-jcur="scope"] .jcur__ring::after{top:50%;left:6px;right:6px;height:1px;margin-top:-.5px;-webkit-mask:linear-gradient(90deg,#000 30%,transparent 30% 70%,#000 70%);mask:linear-gradient(90deg,#000 30%,transparent 30% 70%,#000 70%)} html[data-jcur="scope"] .jcur.-link{--ring:70px} html[data-jcur="scope"] .jcur.-link .jcur__ring{border-radius:14px;background-color:var(--c);transform:rotate(0)} html[data-jcur="scope"] .jcur.-link .jcur__ring::before,html[data-jcur="scope"] .jcur.-link .jcur__ring::after{opacity:0} html[data-jcur="scope"] .jcur.-link:not(.-lbl) .jcur__ring{background-color:var(--soft)} /* ---------------- signal: MCP server ---------------- */ html[data-jcur="signal"] .jcur{--c:#0284c7;--c2:#38bdf8;--soft:rgba(14,165,233,.14);--ring:38px} html[data-jcur="signal"] .jcur__ring{border:1.5px dashed var(--c);animation:curSpin 6s linear infinite} html[data-jcur="signal"] .jcur__ring::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid color-mix(in srgb,var(--c2) 50%,transparent);animation:curPing 1.8s ease-out infinite} html[data-jcur="signal"] .jcur.-link .jcur__ring{border-style:solid;animation:none} html[data-jcur="signal"] .jcur.-link .jcur__ring::after{animation-duration:1s} @keyframes curSpin{to{rotate:360deg}} @keyframes curPing{from{transform:scale(.8);opacity:.9}to{transform:scale(1.35);opacity:0}} /* ---------------- node: automation pages ---------------- */ html[data-jcur="node"] .jcur{--c:#7c3aed;--c2:#a78bfa;--soft:rgba(124,58,237,.12);--ring:30px} html[data-jcur="node"] .jcur__ring{border-radius:9px;rotate:45deg} html[data-jcur="node"] .jcur.-link .jcur__ring{border-radius:18px;rotate:0deg} .jcur__trail{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--c2);opacity:.55} .jcur__trail:nth-of-type(odd){opacity:.35} /* ---------------- spark: Marketer Companion ---------------- */ html[data-jcur="spark"] .jcur{--c:#db2777;--c2:#f59e0b;--soft:rgba(219,39,119,.12);--ring:36px} html[data-jcur="spark"] .jcur__ring{border:0;background:conic-gradient(from 0deg,var(--c),var(--c2),#10b981,var(--c)); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px)); animation:curSpin 3s linear infinite} html[data-jcur="spark"] .jcur.-link .jcur__ring{-webkit-mask:none;mask:none;animation-duration:1.4s} html[data-jcur="spark"] .jcur__dot{background:linear-gradient(135deg,var(--c),var(--c2))} /* ---------------- plain: legal pages ---------------- */ html[data-jcur="plain"] .jcur{--c:#475569;--soft:rgba(71,85,105,.1)} /* no labels on plain and while text-reading */ html[data-jcur="plain"] .jcur__lbl{display:none} @media (hover:none),(pointer:coarse){.jcur{display:none!important}} @media print{.jcur{display:none!important}}