/* =========================================================================== professions-badge-parts.css — the badge half of each profession's ladder. Loaded after badge.css. Same contract, no exceptions: · keyed off the ELEMENT (.bdg[data-bdg-bg] / [data-bdg-ring]), never , because a friends list draws six badges at once and a backdrop belongs to its OWNER, not to the viewer. · IMAGE-FREE. Gradients and geometry only. There is an assertion for it. · every length scales from --bdg-size or --bdg-ringw. No bare px for a band, a tick or a gap: at 22px it disappears, at 96px it reads as a stripe. · fills come from --cls-color, so a part takes the wearer's own colour and works at sixteen hues without any of them fighting the icon. · NOTHING here creates a stacking context on .bdg — no transform, filter, opacity or z-index on the badge root. That is the trap that eats rank rings; the overhang lives on .bdg-ring, which is absolutely positioned. ALREADY SHIPPED in badge.css and not repeated: bd-facet (Prospector), bd-herbarium + bd-fernweave + rg-vinewreath (Herbalist), rg-tideline (Tidecaller), rg-heartwood (Woodwright). =========================================================================== */ /* ---- Prospector — the lantern. A single warm arc low on the ring, steady: the lamp on your helmet does not spin. ---- */ .bdg[data-bdg-ring="rg-lantern"] .bdg-ring { background: conic-gradient(from 132deg, transparent 0deg, var(--cls-color, #888) 32deg, var(--cls-color, #888) 76deg, transparent 108deg, transparent 360deg); -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 82%, #000 98%, transparent 100%); mask: radial-gradient(closest-side, transparent 80%, #000 82%, #000 98%, transparent 100%); opacity: 0.8; } /* ---- Woodwright — cut grain across the disc. Uneven periods; even ones read as corduroy rather than as timber. ---- */ .bdg[data-bdg-bg="bd-grain"] .bdg-bg { opacity: 0.30; background: repeating-linear-gradient(84deg, var(--cls-color, #888) 0 1px, transparent 1px calc(var(--bdg-size, 24px) * 0.115)), repeating-linear-gradient(84deg, var(--cls-color, #888) 0 1px, transparent 1px calc(var(--bdg-size, 24px) * 0.062)); -webkit-mask: radial-gradient(closest-side, #000 40%, transparent 96%); mask: radial-gradient(closest-side, #000 40%, transparent 96%); } /* ---- Tidecaller — a swell filling the lower disc, rocking. Matches the tideline ring's motion so the two can be worn together. ---- */ .bdg[data-bdg-bg="bd-swell"] .bdg-bg { opacity: 0.42; background: radial-gradient(closest-side at 50% 108%, var(--cls-color, #888) 0 46%, transparent 74%), repeating-linear-gradient(172deg, var(--cls-color, #888) 0 1px, transparent 1px calc(var(--bdg-size, 24px) * 0.13)); animation: bdg-swell 6.5s ease-in-out infinite; } /* ---- Bone-hunter ---- */ /* Long bones stacked — vertical staves with one cross-band, the ossuary read. */ .bdg[data-bdg-bg="bd-ossuary"] .bdg-bg { opacity: 0.32; background: repeating-linear-gradient(90deg, var(--cls-color, #888) 0 calc(var(--bdg-size, 24px) * 0.05), transparent calc(var(--bdg-size, 24px) * 0.05) calc(var(--bdg-size, 24px) * 0.15)), linear-gradient(0deg, transparent 44%, var(--cls-color, #888) 46% 54%, transparent 56%); -webkit-mask: radial-gradient(closest-side, #000 52%, transparent 94%); mask: radial-gradient(closest-side, #000 52%, transparent 94%); } /* Tracks — a broken trail round the outside. BROKEN is the point: a continuous line is a fence, a gapped one is a print. Turns once a minute; a stalk is slow. */ .bdg[data-bdg-ring="rg-tracks"] .bdg-ring { background: repeating-conic-gradient(from 0deg, var(--cls-color, #888) 0deg 5deg, transparent 5deg 11deg, var(--cls-color, #888) 11deg 15deg, transparent 15deg 46deg); -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 84%, #000 97%, transparent 99%); mask: radial-gradient(closest-side, transparent 82%, #000 84%, #000 97%, transparent 99%); opacity: 0.75; animation: bdg-turn 58s linear infinite; } /* ---- Beastmaster ---- */ /* Pelt — dense soft strokes lying one way, warmest of the backdrops. */ .bdg[data-bdg-bg="bd-pelt"] .bdg-bg { opacity: 0.28; background: repeating-linear-gradient(62deg, var(--cls-color, #888) 0 1px, transparent 1px calc(var(--bdg-size, 24px) * 0.055)), repeating-linear-gradient(62deg, var(--cls-color, #888) 0 1px, transparent 1px calc(var(--bdg-size, 24px) * 0.17)); -webkit-mask: radial-gradient(closest-side, #000 46%, transparent 96%); mask: radial-gradient(closest-side, #000 46%, transparent 96%); } /* Fangs — four long marks on the diagonals, still. Four is the tell: three reads as hatching, five as a comb. */ .bdg[data-bdg-ring="rg-fangs"] .bdg-ring { background: repeating-conic-gradient(from 34deg, var(--cls-color, #888) 0deg 6deg, transparent 6deg 90deg); -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 78%, #000 100%); mask: radial-gradient(closest-side, transparent 76%, #000 78%, #000 100%); opacity: 0.85; } /* ---- Homesteader ---- */ /* Furrow — ploughed bands, the flattest and calmest backdrop here on purpose. */ .bdg[data-bdg-bg="bd-furrow"] .bdg-bg { opacity: 0.26; background: repeating-linear-gradient(96deg, var(--cls-color, #888) 0 calc(var(--bdg-size, 24px) * 0.035), transparent calc(var(--bdg-size, 24px) * 0.035) calc(var(--bdg-size, 24px) * 0.105)); -webkit-mask: radial-gradient(closest-side, #000 60%, transparent 96%); mask: radial-gradient(closest-side, #000 60%, transparent 96%); } /* Fence — posts and two rails around the outside. Static, and deliberately so: this is the element that stays put. */ .bdg[data-bdg-ring="rg-fence"] .bdg-ring { background: repeating-conic-gradient(from 0deg, var(--cls-color, #888) 0deg 3deg, transparent 3deg 30deg); -webkit-mask: radial-gradient(closest-side, transparent 79%, #000 81%, #000 84%, transparent 85%, transparent 89%, #000 90%, #000 93%, transparent 95%); mask: radial-gradient(closest-side, transparent 79%, #000 81%, #000 84%, transparent 85%, transparent 89%, #000 90%, #000 93%, transparent 95%); opacity: 0.8; } /* ---- Apiarist ---- */ /* Comb — a true hex lattice from three rakes at 60 degrees, the only way to get one without an image. */ .bdg[data-bdg-bg="bd-comb"] .bdg-bg { opacity: 0.34; background: repeating-linear-gradient(0deg, var(--cls-color, #888) 0 1px, transparent 1px calc(var(--bdg-size, 24px) * 0.16)), repeating-linear-gradient(60deg, var(--cls-color, #888) 0 1px, transparent 1px calc(var(--bdg-size, 24px) * 0.16)), repeating-linear-gradient(120deg, var(--cls-color, #888) 0 1px, transparent 1px calc(var(--bdg-size, 24px) * 0.16)); -webkit-mask: radial-gradient(closest-side, #000 58%, transparent 94%); mask: radial-gradient(closest-side, #000 58%, transparent 94%); } /* Swarm — many small marks circling fast enough to blur into one body, which is the hive reading: not one bee, one swarm. */ .bdg[data-bdg-ring="rg-swarm"] .bdg-ring { background: repeating-conic-gradient(from 0deg, var(--cls-color, #888) 0deg 2deg, transparent 2deg 9deg); -webkit-mask: radial-gradient(closest-side, transparent 81%, #000 83%, #000 97%, transparent 100%); mask: radial-gradient(closest-side, transparent 81%, #000 83%, #000 97%, transparent 100%); opacity: 0.7; animation: bdg-turn 3.2s linear infinite; } /* ---- Mycologist ---- */ /* Gills — radial blades under the cap, crowded at the stem. */ .bdg[data-bdg-bg="bd-gills"] .bdg-bg { opacity: 0.36; background: repeating-conic-gradient(from 0deg, var(--cls-color, #888) 0deg 2.5deg, transparent 2.5deg 9deg); -webkit-mask: radial-gradient(closest-side, transparent 14%, #000 40%, #000 88%, transparent 98%); mask: radial-gradient(closest-side, transparent 14%, #000 40%, #000 88%, transparent 98%); } /* Spore crown — a soft halo that swells and thins, like a cap releasing. Uses the shared bdg-pulse so it breathes in step with the Halo ring. */ .bdg[data-bdg-ring="rg-sporecrown"] .bdg-ring { background: radial-gradient(closest-side, transparent 72%, var(--cls-color, #888) 86%, transparent 100%), repeating-conic-gradient(from 12deg, var(--cls-color, #888) 0deg 1.5deg, transparent 1.5deg 22deg); -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 78%, #000 100%); mask: radial-gradient(closest-side, transparent 74%, #000 78%, #000 100%); animation: bdg-pulse 4.6s ease-in-out infinite; } /* ---- Alchemist ---- */ /* Alembic — the vessel's shoulders and the fluid line across it. */ .bdg[data-bdg-bg="bd-alembic"] .bdg-bg { opacity: 0.44; background: linear-gradient(0deg, var(--cls-color, #888) 0 34%, transparent 36%), radial-gradient(closest-side at 50% 34%, var(--cls-color, #888) 0 22%, transparent 52%), repeating-linear-gradient(90deg, var(--cls-color, #888) 0 1px, transparent 1px calc(var(--bdg-size, 24px) * 0.2)); -webkit-mask: radial-gradient(closest-side, #000 66%, transparent 96%); mask: radial-gradient(closest-side, #000 66%, transparent 96%); } /* Sigil ring — the drawn circle with its quarter marks, turning against itself. Two counter-turning arcs, like rg-crown but in your own colour. */ .bdg[data-bdg-ring="rg-sigilring"] .bdg-ring { background: repeating-conic-gradient(from 45deg, var(--cls-color, #888) 0deg 8deg, transparent 8deg 90deg); -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 86%); mask: radial-gradient(closest-side, transparent 84%, #000 86%); animation: bdg-turn 19s linear infinite; } .bdg[data-bdg-ring="rg-sigilring"] .bdg-ring::after { content: ""; position: absolute; inset: calc(var(--bdg-size, 24px) * 0.05); border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 268deg, var(--cls-color, #888) 344deg, transparent 360deg); -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 85%); mask: radial-gradient(closest-side, transparent 82%, #000 85%); animation: bdg-turn 11s linear infinite reverse; } /* ---- Glassworker ---- */ /* Prism — the fan of split light. Wedges of UNEQUAL width, because refraction spreads unevenly and equal wedges are bd-rays again. */ .bdg[data-bdg-bg="bd-prism"] .bdg-bg { opacity: 0.46; background: conic-gradient(from 196deg, transparent 0deg 8deg, var(--cls-color, #888) 8deg 15deg, transparent 15deg 21deg, var(--cls-color, #888) 21deg 26deg, transparent 26deg 34deg, var(--cls-color, #888) 34deg 41deg, transparent 41deg 360deg); -webkit-mask: radial-gradient(closest-side, #000 12%, #000 82%, transparent 98%); mask: radial-gradient(closest-side, #000 12%, #000 82%, transparent 98%); } /* Lens flare — one bright point on the ring with a long tail, sweeping. Reads as light catching a ground edge rather than as a spinner. */ .bdg[data-bdg-ring="rg-lensflare"] .bdg-ring { background: conic-gradient(from 0deg, transparent 0deg 210deg, var(--cls-color, #888) 348deg, #fff 356deg, transparent 360deg); -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 84%); mask: radial-gradient(closest-side, transparent 82%, #000 84%); animation: bdg-turn 7s linear infinite; } /* ---- Forgewright ---- */ /* Quench — the heat gradient in cooling steel: hot at the bottom edge, dark at the top, with the hammer marks still in it. */ .bdg[data-bdg-bg="bd-quench"] .bdg-bg { opacity: 0.5; background: radial-gradient(closest-side at 50% 104%, #fff 0 8%, var(--cls-color, #888) 14% 44%, transparent 76%), repeating-linear-gradient(112deg, var(--cls-color, #888) 0 1px, transparent 1px calc(var(--bdg-size, 24px) * 0.09)); -webkit-mask: radial-gradient(closest-side, #000 62%, transparent 96%); mask: radial-gradient(closest-side, #000 62%, transparent 96%); } /* Sparks — short marks thrown off the ring at uneven spacing, flickering rather than turning: sparks do not orbit. */ .bdg[data-bdg-ring="rg-sparks"] .bdg-ring { background: repeating-conic-gradient(from 8deg, var(--cls-color, #888) 0deg 2deg, transparent 2deg 13deg, var(--cls-color, #888) 13deg 14deg, transparent 14deg 37deg); -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 83%, #000 100%); mask: radial-gradient(closest-side, transparent 80%, #000 83%, #000 100%); animation: bdg-sparks 1.9s steps(3, end) infinite; } /* steps() rather than a smooth ease: a spark shower is discrete events, and an eased opacity curve reads as a pulse. */ @keyframes bdg-sparks { 0% { opacity: 0.9; transform: rotate(0deg); } 33% { opacity: 0.5; transform: rotate(7deg); } 66% { opacity: 0.85; transform: rotate(-5deg); } 100% { opacity: 0.9; transform: rotate(0deg); } } /* ---- Weaver ---- */ /* Weave — warp and weft at equal period. The most regular backdrop in the set, and that regularity IS the material. */ .bdg[data-bdg-bg="bd-weave"] .bdg-bg { opacity: 0.30; background: repeating-linear-gradient(0deg, var(--cls-color, #888) 0 calc(var(--bdg-size, 24px) * 0.03), transparent calc(var(--bdg-size, 24px) * 0.03) calc(var(--bdg-size, 24px) * 0.075)), repeating-linear-gradient(90deg, var(--cls-color, #888) 0 calc(var(--bdg-size, 24px) * 0.03), transparent calc(var(--bdg-size, 24px) * 0.03) calc(var(--bdg-size, 24px) * 0.075)); -webkit-mask: radial-gradient(closest-side, #000 62%, transparent 96%); mask: radial-gradient(closest-side, #000 62%, transparent 96%); } /* Threadwind — one continuous thread wound round the badge. A single long arc turning slowly, so it reads as being wound rather than as spinning. */ .bdg[data-bdg-ring="rg-threadwind"] .bdg-ring { background: conic-gradient(from 0deg, transparent 0deg 10deg, var(--cls-color, #888) 40deg 300deg, transparent 344deg 360deg); -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85%, #000 89%, transparent 90%, transparent 92%, #000 93%, #000 96%, transparent 98%); mask: radial-gradient(closest-side, transparent 84%, #000 85%, #000 89%, transparent 90%, transparent 92%, #000 93%, #000 96%, transparent 98%); opacity: 0.8; animation: bdg-turn 32s linear infinite; } /* ---- Cook ---- */ /* Hearth — the fire in the range: warm at the base, and the grate above it. */ .bdg[data-bdg-bg="bd-hearth"] .bdg-bg { opacity: 0.46; background: radial-gradient(closest-side at 50% 96%, var(--cls-color, #888) 0 30%, transparent 66%), repeating-linear-gradient(0deg, var(--cls-color, #888) 0 1px, transparent 1px calc(var(--bdg-size, 24px) * 0.14)); -webkit-mask: radial-gradient(closest-side, #000 58%, transparent 94%); mask: radial-gradient(closest-side, #000 58%, transparent 94%); } /* Spice wheel — the rack seen from above: even segments with a gap where the hand reaches in. Still, because a kitchen tool is not a toy. */ .bdg[data-bdg-ring="rg-spicewheel"] .bdg-ring { background: conic-gradient(from 12deg, var(--cls-color, #888) 0deg 6deg, transparent 6deg 45deg, var(--cls-color, #888) 45deg 51deg, transparent 51deg 90deg, var(--cls-color, #888) 90deg 96deg, transparent 96deg 135deg, var(--cls-color, #888) 135deg 141deg, transparent 141deg 260deg, var(--cls-color, #888) 260deg 266deg, transparent 266deg 305deg, var(--cls-color, #888) 305deg 311deg, transparent 311deg 360deg); -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 82%, #000 98%, transparent 100%); mask: radial-gradient(closest-side, transparent 80%, #000 82%, #000 98%, transparent 100%); opacity: 0.82; } /* ---- Scribe ---- */ /* Ruled — the page behind the glyph. Feint lines and one margin rule; the quietest backdrop in the app, which is the point of the element. */ .bdg[data-bdg-bg="bd-ruled"] .bdg-bg { opacity: 0.28; background: repeating-linear-gradient(0deg, transparent 0 calc(var(--bdg-size, 24px) * 0.085), var(--cls-color, #888) calc(var(--bdg-size, 24px) * 0.085) calc(var(--bdg-size, 24px) * 0.1)), linear-gradient(90deg, transparent 0 26%, var(--cls-color, #888) 26% 29%, transparent 29%); -webkit-mask: radial-gradient(closest-side, #000 64%, transparent 96%); mask: radial-gradient(closest-side, #000 64%, transparent 96%); } /* Marginalia — short hands of writing in the margin, all round. Reads as text at 22px and as tick marks at 96px, which is the right way round for a badge that is usually small. */ .bdg[data-bdg-ring="rg-marginalia"] .bdg-ring { background: repeating-conic-gradient(from 0deg, var(--cls-color, #888) 0deg 4deg, transparent 4deg 6deg, var(--cls-color, #888) 6deg 12deg, transparent 12deg 14deg, var(--cls-color, #888) 14deg 17deg, transparent 17deg 40deg); -webkit-mask: radial-gradient(closest-side, transparent 83%, #000 85%, #000 95%, transparent 97%); mask: radial-gradient(closest-side, transparent 83%, #000 85%, #000 95%, transparent 97%); opacity: 0.7; } /* ---- motion guards, matching badge.css ---- */ html[data-intensity="calm"] .bdg-ring, html[data-intensity="calm"] .bdg-bg { animation: none !important; } @media (prefers-reduced-motion: reduce) { .bdg-ring, .bdg-ring::after, .bdg-bg { animation: none !important; } }