/* ========================================================================== LH BARBERSHOP — THE BARBER POLE CURSOR Implements 07-operations/decisions/2026-09-14-the-barber-pole-cursor.md Construction + the scan it is measured from: 05-design/assets/barber-pole/ Behaviour: assets/js/barber-pole-cursor.js ONE NUMBER SETS THE OBJECT. --bpc-w is the width of the pole's widest band, and every other dimension is a span measured off the supplied photograph's own alpha silhouette, carried in the SVG's viewBox rather than restated here. The pole is 1 : 4.111 because the photograph is. --bpc-w 12px -> the pole stands 49px. A native arrow is ~12 x 19, so this is a tall object and it is kept NARROW for that reason: 12px of width is what a line of type can carry beside it. It is 12 and not 11 so that the drawn pole and the native one in § THE TWO POLES are the SAME SIZE — 12 x 49 both, hotspot on a whole pixel at 6 0 — and the handoff between them is a swap rather than a resize. --bpc-tilt 0deg the pole stands UPRIGHT, which is how a barber pole stands. It is an ORIENTATION and it never animates — the brief rules out rotating the whole cursor around the hotspot, and the turn belongs to the spiral alone. It was leaned 16deg in the first cut so its mass fell down-and-right out of the reading line; upright it hangs straight down from the hotspot instead, and the 45px directly under the pointer is the cost. The token is kept so the lean is one number away. THE HOTSPOT IS THE TOP FINIAL'S APEX, viewBox (179.5, 0) — the horizontal centre of the box and its very top edge. So the layer is offset by half of --bpc-w and nothing vertically, and the same point is the origin of both the tilt and every scale: the pole grows and presses AROUND the hotspot, which is the only way a scale can be applied to a cursor without moving the place the click will land. TWO THINGS CHANGE AND NOTHING ELSE. Scale, and the rate of the turn. NOTHING IN THIS FILE READS THE GROUND. A barber pole is red, white and blue on any ground in the world, and one that recoloured itself per section would stop reading as an object and start reading as a UI state. The keyline used to be the exception — paper on a dark chapter, ink on a light one — and it is not any more: see § THE KEYLINE. With it went the script's per-frame luminance test, which had no other consumer. ========================================================================== */ :root{ --bpc-w:12px; /* the pole's widest band */ --bpc-tilt:0deg; /* upright. orientation, never animated */ --bpc-dur:180ms; /* the state response: quick and smooth */ --bpc-fade:80ms; /* show/hide: a swap, not a dissolve */ --bpc-press:90ms; /* the click: briefer still */ --bpc-ease:cubic-bezier(.22,1,.36,1); /* THE PALETTE, MEASURED OFF THE PHOTOGRAPH AND THEN SPENT ON THE SITE. Its stripe means are (186,42,44), (34,68,122) and (223,222,223); its brass mean is (179,150,98). Two of the four move, and both move ONTO a token the site already owns — the white becomes --paper and the brass anchor becomes --gold — which is the whole of "integrate with the brand environment". The red and the navy are the photograph's, untouched: they are the trade's colours, not LH's, and they are why the object reads. */ --bpc-red:#B0282B; --bpc-navy:#22447A; --bpc-white:var(--paper,#F3F1EC); } /* ── THE TWO POLES ─────────────────────────────────────────────────────── There are two cursors in this file and they are the SAME OBJECT: the drawn pole in the layer below, and a native SVG cursor that is the same measured silhouette flattened to flat fills — plus the two dark glass rims, which are the one piece of the material pass doing structural work at 12px — hotspot on the finial apex at 6 0. THE READER ALWAYS HOLDS A BARBER POLE. That is the contract, and the three rules below are the whole of it. The native pole is the ground state, on everything, always. `bpc-on` — which barber-pole-cursor.js puts on the root only while the drawn pole is actually showing — swaps it for `cursor:none` so the drawn one can do the job. The moment the drawn one is down, the native one is back. There is no third state and no gap between them. WHY THE GROUND STATE IS !important, WHICH IS THE BUG THIS FIXES. It used to be a plain `html{cursor:url(...)}` — inherited, and therefore beaten by every `cursor:pointer` and `cursor:grab` on the site: § 14's buttons, the CTA knob, .canvas, .wall, .proof, .acc__trigger. So in any moment when the drawn pole was down and `cursor:none` was not applying, the reader got the SYSTEM HAND over exactly the things they were most likely to be pointing at — a CTA — and LH's pole everywhere else. Reported as "the barber pole disappears and the default cursor takes over", and that is precisely what it was. Held in a custom property so the 5.3KB of path data is written once. It is GENERATED, never typed — dev/gen-bpc-fallback.mjs reads the pole the script actually built and prints this declaration, which is the only way two objects that must stay identical can be kept identical by hand. THE CARET IS THE ONE THING THAT BEATS BOTH, and it is last and least specific-but-most-specific on purpose: `html input` is (0,0,2) against the (0,0,1) of the two rules above it, so it wins over both without needing to know which of them is live. `:where()` keeps `.bpc-on` at zero specificity for exactly that reason. Over a field the reader is about to type or select in, the caret's own I-beam is better information than any object could be. */ :root{ --bpc-cursor:url("data:image/svg+xml;utf8,") 6 0, default; } @media (hover:hover) and (pointer:fine){ /* 1 · the ground state: LH's pole, over everything, beating the site's own pointer/grab affordances — which `cursor:none` was already taking away in the other state, so nothing is lost that was not lost. */ html, html *{cursor:var(--bpc-cursor) !important} /* 2 · …and out of the way while the drawn pole is up. `bpc-on` is added and removed in lockstep with the pole's own visibility; see `show()` in barber-pole-cursor.js. `bpc-live` no longer gates this — it is set once at mount and never cleared, so gating on it meant every moment the pole was hidden was a moment with no cursor at all. */ html:where(.bpc-on), html:where(.bpc-on) *{cursor:none !important} /* 3 · the caret, over both. */ html input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]), html textarea, html [contenteditable=""], html [contenteditable="true"]{cursor:text !important} } /* ── THE LAYER ─────────────────────────────────────────────────────────── Above everything, inert, and positioned ONLY by transform — the two custom properties written per move are consumed inside a translate3d, so a pointer move costs a composite and never a layout. */ .bpc{ position:fixed; left:0; top:0; z-index:2147483000; pointer-events:none; opacity:0; transform:translate3d(calc(var(--bpc-x,0px) - var(--bpc-w) / 2), var(--bpc-y,0px), 0); transition:opacity var(--bpc-fade) linear; will-change:transform; } .bpc.is-in{opacity:1} /* the object. width is the token; height is the token times the photograph's own aspect, so the two can never drift apart. */ .bpc__pole{ display:block; overflow:visible; width:var(--bpc-w); height:calc(var(--bpc-w) * 4.1114); transform-origin:50% 0; /* = the hotspot, always */ rotate:var(--bpc-tilt); scale:calc(var(--bpc-scale,1) * var(--bpc-squash,1)); transition:scale var(--bpc-dur) var(--bpc-ease); } /* ── THE KEYLINE ───────────────────────────────────────────────────────── The whole object, one ink, dilated by half a stroke — the masses drawn a second time underneath themselves, so the silhouette never has to be written as one outline and no internal edge can leak. IT IS ALWAYS INK. It used to flip to paper on a dark chapter, on the argument that a rim must be the ground's opposite to survive a photograph. What that actually produced was a white halo round the pole on every dark plate on the site, and a haloed object reads as a sticker laid on the page rather than as a thing standing on it. Ink on both grounds is also the site's OWN answer to the same question: § 23c frames every photograph on this site with a 1px keyline and system.css says of it, in as many words, "Ink, not --rule". The pole is framed the way the photographs beside it are framed. WHAT CARRIES THE POLE ON A DARK GROUND, now that nothing outlines it: its own paper. The white band of the spiral IS --paper, so on ink the object is mostly its own brightest colour and needs no help. The keyline is doing its work in the other direction — on PAPER, where that same white band is the page's exact colour and without an ink edge the spiral would read as holes cut in the pole. That is why it is not simply deleted. non-scaling-stroke, so the keyline is 1px on a 1px screen and STAYS 1px when the pole grows on a link. One that scaled with the object would read as a second, thicker outline rather than as the same keyline. */ .bpc__rim .bpc__mass{ fill:var(--bpc-rim); stroke:var(--bpc-rim); stroke-width:1.4; stroke-linejoin:round; vector-effect:non-scaling-stroke; } .bpc{--bpc-rim:var(--ink,#101011)} /* ── THE THREE MATERIALS ───────────────────────────────────────────────── Every fill in the object is one of these fifteen, and they are grouped the way the object is: painted metal, glass, brass. The gradients themselves are built in the script — see § THE STUDIO there for the lamp they all answer to, and for why each ink is the colour it is. This file only says which surface gets which. WHAT MAKES THREE MATERIALS OUT OF ONE DRAWING is not the colours; it is that each one answers the same lamp DIFFERENTLY: the spiral is PAINT — matte, it takes the cylinder's form and gives back no specular of its own. It is also the only thing here that moves. the casing is GLASS — two thin, bright, COOL edges and one narrow specular, over a body that is clear through a third of its width and near-opaque at both rims. It does not move, and that is what puts it in front of the spiral. the caps are BRASS — a broad WARM key, a core shadow, a bounce, and the turned steps. No edge is ever as bright as the glass's, and no highlight is ever as narrow. ------------------------------------------------------------------------ */ /* 1 · the paint. The well is the white band of the spiral, so only the red and the navy are drawn over it: two paths per turn instead of four, and the white can be the site's own --paper rather than a fourth colour nobody chose. */ .bpc__well{fill:var(--bpc-white)} .bpc__red{fill:var(--bpc-red)} .bpc__navy{fill:var(--bpc-navy)} /* 2 · the glass. Four layers, and none of them turns — see § 2 in the script's render tree for why that is the whole trick. */ .bpc__sock-t{fill:url(#bpcSockT)} .bpc__sock-b{fill:url(#bpcSockB)} .bpc__cyl{fill:url(#bpcGlassShade)} .bpc__spec{fill:url(#bpcGlassLight)} /* 3 · the brass. Five surfaces, five gradients, one alloy: the caps take the object-wide ramp because they span it, the rails take their own because they are 22 units wide and a 6% slice of a 359-unit ramp is a taper and not a tube, and the finials take radials because they are the only two spheres in the object. */ .bpc__brass{fill:url(#bpcBrass)} .bpc__rail-l{fill:url(#bpcRailL)} .bpc__rail-r{fill:url(#bpcRailR)} .bpc__ball-t{fill:url(#bpcBallT)} .bpc__ball-b{fill:url(#bpcBallB)} .bpc__turn-t{fill:url(#bpcVT)} .bpc__turn-b{fill:url(#bpcVB)} .bpc__dome{fill:url(#bpcDome)} .bpc__ogee{fill:url(#bpcOgee)} /* the two seams share one gradient and differ only in weight: the base finial is the bigger mass, sits under everything, and has to stay legible as its own turned piece at 3px. */ .bpc__groove{fill:url(#bpcGroove); opacity:.8} .bpc__groove--b{opacity:1} /* and its history. Six marks, restrained on purpose: see the note above them in the script. Above ~.09 they stop reading as a surface and start reading as dirt, which is a different object entirely. */ .bpc__mark-l{fill:url(#bpcStreakL); opacity:.075} .bpc__mark-d{fill:url(#bpcStreakD); opacity:.085} .bpc__speck{fill:url(#bpcSpeck); opacity:.13} /* THE TURN, AND WHY NOTHING HERE TRANSITIONS IT. The helix is translated in the SVG's own units by a number the script writes every frame. A CSS transition racing a per-frame write would give the hand's momentum the transition's easing instead of its own, which is the same trap the mark-pointer's slot documented. The script owns the number outright. */ .bpc__helix{ transform:translateY(calc(var(--bpc-spin,0) * 1px)); will-change:transform; } /* ── THE FOUR STATES ───────────────────────────────────────────────────── Scale is stated here; the rate of the turn is stated in the script's GAIN table, because it is a rate and not a look. Between them they are the whole state machine — there is nothing else to change. 1 · default 1.00 the pole, turning once every 3.4s 2 · link 1.14 it comes forward and the turn gains (GAIN 2.4) 3 · picture 1.06 scale ONLY. the brief is explicit, and a photograph is the one ground where extra motion competes with the thing the reader came to look at. 4 · text — the pole stands down and the I-beam comes back 5 · pressed x.86 a compression, not a transition: it seats and lets go inside --bpc-press, well under the 180ms of every other response, which is what makes it read as touch rather than as another state. */ .bpc{--bpc-scale:1} .bpc.is-image{--bpc-scale:1.06} .bpc.is-link{--bpc-scale:1.14} .bpc.is-text{opacity:0} .bpc.is-down .bpc__pole{--bpc-squash:.86; transition-duration:var(--bpc-press)} /* ── § 6 — REDUCED MOTION ──────────────────────────────────────────────── The turn is off at the source (the script stops writing --bpc-spin), so the spiral is simply a still spiral — which is what a barber pole with its motor off is, and it stays perfectly recognisable. What is left to do here is take the easing out of the state responses so the pole reports what is under the hand without ever animating, and hold the scale at rest: a cursor that changes size under a reader who has asked for less motion is the change they asked to not have. The cursor itself STAYS. It does not impair usability — it tracks the pointer exactly, it never lags, and the native I-beam still appears over every field. Nothing on this site depends on it to know what is clickable; § 5's link underlines and § 14's buttons are unchanged either way. */ @media (prefers-reduced-motion:reduce){ .bpc,.bpc__pole,.bpc__rim .bpc__mass{transition-duration:1ms !important} .bpc__helix{transform:none !important} .bpc{--bpc-scale:1 !important} .bpc.is-down .bpc__pole{--bpc-squash:1} }