/* JA4 directory cursor: a reader bracket trailing hex that resolves. Same idea as the background — most of a fingerprint is opaque hash, and occasionally a piece of it becomes readable. */ .ja4-cursor { position: fixed; top: 0; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 9999; pointer-events: none; /* Corner brackets, not a ring: this cursor reads things. */ border: 1px solid rgba(0, 229, 176, 0.75); border-radius: 2px; clip-path: polygon( 0 0, 34% 0, 34% 8%, 8% 8%, 8% 34%, 0 34%, 0 66%, 8% 66%, 8% 92%, 34% 92%, 34% 100%, 0 100%, 100% 100%, 66% 100%, 66% 92%, 92% 92%, 92% 66%, 100% 66%, 100% 34%, 92% 34%, 92% 8%, 66% 8%, 66% 0, 100% 0 ); transition: transform 0.12s ease-out, border-color 0.2s ease; will-change: transform; } .ja4-cursor-active { transform: scale(1.45); border-color: rgba(185, 168, 255, 0.95); } .ja4-cursor-glyph { position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none; font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1; color: rgba(124, 92, 255, 0.5); will-change: transform, opacity; } /* A glyph that has "resolved" into a readable JA4_a character. */ .ja4-cursor-glyph-resolved { color: rgba(0, 229, 176, 0.85); } /* ── Hiding the native pointer ──────────────────────────────────────── */ /* * Gated behind a class the cursor script adds to once its elements are * in the DOM, never applied from CSS alone. If the script fails to load or * throws, the class is never set and the real pointer stays — a page that hides * the system cursor and then does not draw a replacement is unusable, and CSS * has no way to know whether the replacement arrived. * * The universal selector is deliberate: `cursor` is not inherited in the way * that matters here — links, buttons and resizable edges all set their own, so * hiding it on `body` alone leaves the arrow reappearing over exactly the * elements people move toward. */ .ja4-cursor-on, .ja4-cursor-on * { cursor: none; } /* * Text entry keeps the real caret. A custom dot gives no indication of where a * character will land, and these are fields people actually type into. */ .ja4-cursor-on input[type="text"], .ja4-cursor-on input[type="search"], .ja4-cursor-on input[type="email"], .ja4-cursor-on input[type="password"], .ja4-cursor-on textarea { cursor: text; } @media (pointer: coarse) { .ja4-cursor, .ja4-cursor-glyph { display: none; } }