/* =========================================================================== badge.css — the badge's frames, backdrops and rings. Loaded after effects.css. Same one-way dependency as skins.css and effects.css: nothing in styles.css may reference anything in here, so the app draws a perfectly good plain avatar with this file absent. If you find styles.css depending on a selector below, that's the bug. --------------------------------------------------------------------------- KEYED OFF THE ELEMENT, NOT OFF . This is the one structural difference from effects.css and it is not a style choice. Every rule in effects.css hangs off `html[data-slot-*]`, because an effect is something the VIEWER is wearing and there is one viewer per document. A badge is something its OWNER is wearing, and a friends list draws six of them at once — so the parts key off `.bdg[data-bdg-*]` on each badge in turn. Putting these on would mean everyone on the page wore your backdrop. The layout rule still holds and holds more easily: every part is drawn on an absolutely-positioned child that is always present, so a badge with nothing equipped occupies exactly the same box as one wearing the lot. --------------------------------------------------------------------------- EVERYTHING SCALES FROM --bdg-size. The same badge is drawn at 22px in the top bar and 96px in the compositor. Nothing here may use a bare px length for a band, a tick or a gap — at one end it disappears and at the other it reads as a stripe. `--bdg-ringw` is the derived unit; use it or a percentage. IMAGE-FREE BY CONTRACT, like the page backgrounds. Gradients and geometry only. There is an assertion for it. =========================================================================== */ .bdg { /* Derived once so a frame, a ring and a tick can't drift apart. */ --bdg-ringw: max(1px, calc(var(--bdg-size, 24px) * 0.045)); } /* =========================================================================== BACKDROPS — what fills the disc behind your icon. Drawn on .bdg-bg, which is clipped to the circle, so nothing here needs to worry about spilling. Opacity is set per backdrop rather than baked into the colour, because the fill is `--cls-color` — a palette hex that has to work at sixteen different hues without any of them fighting the icon on top. =========================================================================== */ .bdg[data-bdg-bg="bd-none"] .bdg-bg { display: none; } /* Level bands, lightest at the top. */ .bdg[data-bdg-bg="bd-strata"] .bdg-bg { opacity: 0.30; background: repeating-linear-gradient( 180deg, var(--cls-color, #888) 0, var(--cls-color, #888) calc(var(--bdg-size, 24px) * 0.055), transparent calc(var(--bdg-size, 24px) * 0.055), transparent calc(var(--bdg-size, 24px) * 0.13)); -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent); } /* A close technical grid. */ .bdg[data-bdg-bg="bd-mesh"] .bdg-bg { opacity: 0.26; background: repeating-linear-gradient(0deg, var(--cls-color, #888) 0, var(--cls-color, #888) 1px, transparent 1px, transparent calc(var(--bdg-size, 24px) * 0.11)), repeating-linear-gradient(90deg, var(--cls-color, #888) 0, var(--cls-color, #888) 1px, transparent 1px, transparent calc(var(--bdg-size, 24px) * 0.11)); } /* Rays out of the centre. */ .bdg[data-bdg-bg="bd-rays"] .bdg-bg { opacity: 0.32; background: repeating-conic-gradient(from 0deg, var(--cls-color, #888) 0deg 7deg, transparent 7deg 24deg); -webkit-mask: radial-gradient(closest-side, transparent 18%, #000 55%, #000 100%); mask: radial-gradient(closest-side, transparent 18%, #000 55%, #000 100%); } /* Lit from the middle, so the icon reads as backlit. */ .bdg[data-bdg-bg="bd-orb"] .bdg-bg { opacity: 0.55; background: radial-gradient(closest-side, var(--cls-color, #888) 0%, transparent 72%); } /* An eight-point star. `from 22.5deg` puts the points on the diagonals rather than under the icon's own verticals, where they'd read as a smear. */ .bdg[data-bdg-bg="bd-sigil"] .bdg-bg { opacity: 0.34; background: repeating-conic-gradient(from 22.5deg, var(--cls-color, #888) 0deg 5deg, transparent 5deg 45deg); -webkit-mask: radial-gradient(closest-side, #000 10%, #000 62%, transparent 88%); mask: radial-gradient(closest-side, #000 10%, #000 62%, transparent 88%); } /* A slow spiral. */ .bdg[data-bdg-bg="bd-vortex"] .bdg-bg { opacity: 0.36; background: conic-gradient(from 0deg, transparent 0deg, var(--cls-color, #888) 90deg, transparent 200deg, var(--cls-color, #888) 300deg, transparent 360deg); -webkit-mask: radial-gradient(closest-side, transparent 14%, #000 60%, transparent 100%); mask: radial-gradient(closest-side, transparent 14%, #000 60%, transparent 100%); animation: bdg-turn 14s linear infinite; } /* Layered fields that never resolve into a shape — the same idea as the Ether backgrounds, at badge scale. Two gradients drifting at different rates is what stops it reading as one rotating texture. */ .bdg[data-bdg-bg="bd-astral"] .bdg-bg { opacity: 0.5; background: radial-gradient(closest-side at 30% 35%, var(--cls-color, #888) 0%, transparent 62%), radial-gradient(closest-side at 72% 68%, #8ab6e2 0%, transparent 58%), radial-gradient(closest-side at 55% 20%, #b388e8 0%, transparent 52%); animation: bdg-astral 18s ease-in-out infinite alternate; } @keyframes bdg-astral { 0% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1.15) rotate(24deg); } } /* =========================================================================== FRAMES — derived from account level, never bought. All six are a ring cut out of a background with a radial mask, which is the one technique that gives an even band at any size without a border's corner artefacts. `closest-side` resolves against the inscribed circle, so the band width is always --bdg-ringw regardless of how big the badge is. =========================================================================== */ .bdg-frame { color: var(--cls-color, var(--text-secondary)); } /* Shared ring mask. Each frame paints a background and this cuts the middle out of it. */ .bdg[data-bdg-frame] .bdg-frame { -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--bdg-ringw)), #000 calc(100% - var(--bdg-ringw))); mask: radial-gradient(closest-side, transparent calc(100% - var(--bdg-ringw)), #000 calc(100% - var(--bdg-ringw))); } /* Unranked — one hairline in your own colour. */ .bdg[data-bdg-frame="f-plain"] .bdg-frame { background: currentColor; opacity: 0.45; } /* Bound — two hairlines with a breath between them. The mask above cuts the outer one; the inner is a plain bordered element that needs no mask, so it opts out with `mask:none`. */ .bdg[data-bdg-frame="f-bound"] .bdg-frame { background: currentColor; opacity: 0.6; } .bdg[data-bdg-frame="f-bound"] .bdg-frame::after { content: ""; position: absolute; inset: calc(var(--bdg-ringw) * 2.2); border-radius: 50%; box-shadow: 0 0 0 var(--bdg-ringw) currentColor; } /* Notched — a ring cut by four gaps on the diagonals. */ .bdg[data-bdg-frame="f-notched"] .bdg-frame { background: repeating-conic-gradient(from 20deg, currentColor 0deg 70deg, transparent 70deg 90deg); opacity: 0.75; } /* Laurelled — crescents to either side, open at top and bottom. */ .bdg[data-bdg-frame="f-laurel"] .bdg-frame { background: conic-gradient(from 0deg, transparent 0deg 22deg, currentColor 22deg 158deg, transparent 158deg 202deg, currentColor 202deg 338deg, transparent 338deg 360deg); opacity: 0.85; } /* The inner hairline that makes it read as a wreath rather than two stripes. */ .bdg[data-bdg-frame="f-laurel"] .bdg-frame::after { content: ""; position: absolute; inset: calc(var(--bdg-ringw) * 2); border-radius: 50%; box-shadow: 0 0 0 max(0.5px, calc(var(--bdg-ringw) * 0.4)) currentColor; opacity: 0.5; } /* Runed — tick marks all the way round, like a dial. */ .bdg[data-bdg-frame="f-runed"] .bdg-frame { background: repeating-conic-gradient(from 0deg, currentColor 0deg 4deg, transparent 4deg 15deg); opacity: 0.9; } .bdg[data-bdg-frame="f-runed"] .bdg-frame::after { content: ""; position: absolute; inset: calc(var(--bdg-ringw) * 1.6); border-radius: 50%; box-shadow: 0 0 0 max(0.5px, calc(var(--bdg-ringw) * 0.45)) currentColor; opacity: 0.6; } /* Gilded — the top rung. Gold is gold here rather than your own colour: it's the one frame that means the same thing on everybody's badge, and tinting it sixteen ways would make it just another ring. */ .bdg[data-bdg-frame="f-gilded"] .bdg-frame { background: conic-gradient(from 210deg, #7a5c1e 0deg, #e0bd52 60deg, #fff3c4 96deg, #e0bd52 140deg, #8a6a24 210deg, #e0bd52 300deg, #7a5c1e 360deg); } .bdg[data-bdg-frame="f-gilded"] .bdg-frame::after { content: ""; position: absolute; inset: calc(var(--bdg-ringw) * -0.5); border-radius: 50%; box-shadow: 0 0 calc(var(--bdg-size, 24px) * 0.14) rgba(224, 189, 82, 0.55); } /* =========================================================================== RINGS — the chosen layer, drawn OUTSIDE the disc. .bdg-ring is inset negatively so it overhangs the badge. Nothing here may grow the element's box — the overhang is on an absolutely-positioned child, so it paints outside without taking any space, which is what lets a ring sit on a 24px chip in a top bar with fixed spacers. =========================================================================== */ .bdg[data-bdg-ring="rg-none"] .bdg-ring { display: none; } /* Short marks around the outside. */ .bdg[data-bdg-ring="rg-ticks"] .bdg-ring { background: repeating-conic-gradient(from 0deg, var(--cls-color, #888) 0deg 3deg, transparent 3deg 18deg); -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 82%); mask: radial-gradient(closest-side, transparent 82%, #000 82%); opacity: 0.7; } /* Beads — the same technique with fatter, fewer marks, which is what makes it read as beads rather than as a dial. */ .bdg[data-bdg-ring="rg-dots"] .bdg-ring { background: repeating-conic-gradient(from 0deg, var(--cls-color, #888) 0deg 9deg, transparent 9deg 30deg); -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 86%, #000 96%, transparent 98%); mask: radial-gradient(closest-side, transparent 84%, #000 86%, #000 96%, transparent 98%); opacity: 0.8; } /* A halo that breathes. Scale on an absolutely-positioned overlay changes no layout — see the rule at the top of effects.css about never animating a property that affects flow. */ .bdg[data-bdg-ring="rg-pulse"] .bdg-ring { background: radial-gradient(closest-side, transparent 74%, var(--cls-color, #888) 88%, transparent 100%); animation: bdg-pulse 3.4s ease-in-out infinite; } @keyframes bdg-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.96); } 50% { opacity: 0.85; transform: scale(1.06); } } /* A bright arc sweeping round. */ .bdg[data-bdg-ring="rg-spin"] .bdg-ring { background: conic-gradient(from 0deg, transparent 0deg 250deg, var(--cls-color, #888) 330deg, transparent 360deg); -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 84%); mask: radial-gradient(closest-side, transparent 82%, #000 84%); animation: bdg-turn 4s linear infinite; } /* One mote circling. The dot is a pseudo-element pinned to the top of a ring that rotates, which is cheaper and rounder than animating an offset path. */ .bdg[data-bdg-ring="rg-orbit"] .bdg-ring { animation: bdg-turn 6s linear infinite; } .bdg[data-bdg-ring="rg-orbit"] .bdg-ring::after { content: ""; position: absolute; top: 0; left: 50%; width: calc(var(--bdg-size, 24px) * 0.13); height: calc(var(--bdg-size, 24px) * 0.13); margin-left: calc(var(--bdg-size, 24px) * -0.065); border-radius: 50%; background: var(--cls-color, #888); box-shadow: 0 0 calc(var(--bdg-size, 24px) * 0.1) var(--cls-color, #888); } /* Two counter-turning arcs, one gold one pale. */ .bdg[data-bdg-ring="rg-crown"] .bdg-ring { background: conic-gradient(from 0deg, transparent 0deg 260deg, #e0bd52 340deg, transparent 360deg); -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 86%); mask: radial-gradient(closest-side, transparent 84%, #000 86%); animation: bdg-turn 5s linear infinite; } .bdg[data-bdg-ring="rg-crown"] .bdg-ring::after { content: ""; position: absolute; inset: calc(var(--bdg-size, 24px) * 0.04); border-radius: 50%; background: conic-gradient(from 180deg, transparent 0deg 280deg, #eeece6 350deg, transparent 360deg); -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 85%); mask: radial-gradient(closest-side, transparent 82%, #000 85%); animation: bdg-turn 7s linear infinite reverse; } @keyframes bdg-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* =========================================================================== THE COMPOSITOR'S OWN PREVIEW TILES A tile shows one part on a real badge, because a swatch of a backdrop tells you nothing about how it sits under an icon. Unlike the Market's effect mocks — which must NOT use the app's real class names, or they'd pick up whatever the viewer is wearing — these deliberately DO use `.bdg`: a badge part is drawn per element, so a preview badge shows exactly the part it names and can't inherit anything from the one in the top bar. =========================================================================== */ .bdg-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 8px 9px; border-radius: var(--radius-sm); border: 0.5px solid var(--border); background: var(--surface-2); cursor: pointer; text-align: center; position: relative; transition: border-color 0.14s ease, background 0.14s ease; } .bdg-tile:hover { border-color: var(--border-strong); background: var(--surface-3); } .bdg-tile.is-on { border-color: var(--rar, var(--text-accent)); background: var(--surface-3); } .bdg-tile.is-locked { cursor: default; opacity: 0.72; } .bdg-tile-name { font-size: 11px; color: var(--text-secondary); line-height: 1.25; } .bdg-tile.is-on .bdg-tile-name { color: var(--text-primary); } .bdg-tile-sub { font-size: 10px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; } .bdg-tile-buy { font-size: 10px; border: 0.5px solid var(--border-strong); background: var(--surface-1); color: var(--text-secondary); border-radius: var(--radius-pill); padding: 2px 9px; cursor: pointer; } .bdg-tile-buy:hover { color: var(--text-primary); border-color: var(--text-accent); } .bdg-tile-rar { position: absolute; top: 5px; left: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--rar, #8a8a8a); } /* The profile's way into the compositor. Styled like a shop button rather than a link because that's what it is — the profile no longer edits the avatar, it points at the one place that does. */ .bdg-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 12px; padding: 6px 13px; border-radius: var(--radius-pill); border: 0.5px solid var(--border-strong); background: var(--surface-2); color: var(--text-secondary); } .bdg-link:hover { color: var(--text-primary); border-color: var(--text-accent); } /* The face's icon grid is the app's shared `.icon-picker-grid`, which is a fixed six columns — right in the narrow editors it was built for, wrong here where it gets the full page width and every cell inflates to 180px of empty square around a 15px glyph. Scoped rather than changed at source: the Codex and the taxonomy editors still want six. */ .icon-picker-grid.bdg-icons { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); max-height: 214px; } .bdg-sub { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 12px 0 6px; } .bdg-rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; margin-top: 10px; } /* The live preview at the head of the tab. */ .bdg-stage { display: flex; align-items: center; gap: 20px; padding: 20px; border-radius: var(--radius, 8px); border: 0.5px solid var(--border); background: var(--surface-2); flex-wrap: wrap; } .bdg-stage-facts { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .bdg-stage-name { font-size: 15px; color: var(--text-primary); } .bdg-stage-line { font-size: 11px; color: var(--text-secondary); } .bdg-stage-line b { color: var(--text-primary); font-weight: 600; } .bdg-stage-note { font-size: 11px; color: var(--text-muted); line-height: 1.5; } /* The derived frame ladder — a record, not a picker, so it must not look clickable. Rungs you've passed are lit; the one you wear is marked. */ .bdg-ladder { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; } .bdg-rung { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px 8px; border-radius: var(--radius-sm); border: 0.5px solid var(--border); background: var(--surface-2); min-width: 92px; } .bdg-rung.is-worn { border-color: var(--text-accent); } .bdg-rung.is-locked { opacity: 0.5; } .bdg-rung-name { font-size: 11px; color: var(--text-secondary); } .bdg-rung.is-worn .bdg-rung-name { color: var(--text-primary); } .bdg-rung-cond { font-size: 10px; color: var(--text-muted); } /* =========================================================================== MOTION — the same two guards as effects.css, for the same reason. `data-intensity` is the VIEWER's setting and lives on , so it reaches every badge on the page including other people's. That's the right way round: the dial exists so someone who finds this much motion tiring can turn it down, and a friends list of six spinning badges is exactly the case it was added for. =========================================================================== */ 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; } } /* ---------- profession-gated parts ---------- The first content on the `{ kind: 'profession' }` unlock, which the gate has supported and asserted since the cosmetic system shipped without anything ever using it. Everything else in the app gates on account level or a price — both of which say "I played a lot". These say "I did THIS work". Same rules as every other part: drawn with maths only — image-free by contract — coloured from --cls-color so the wearer's own colour still drives it, and no stacking context on .bdg. */ /* Herbalist — pressed leaf silhouettes. Five ellipses at different sizes and angles around the disc; overlapping soft edges is what stops it reading as a pattern of dots. */ .bdg[data-bdg-bg="bd-herbarium"] .bdg-bg { opacity: 0.34; background: radial-gradient(ellipse 34% 15% at 28% 30%, var(--cls-color, #888) 0 60%, transparent 62%), radial-gradient(ellipse 15% 32% at 70% 32%, var(--cls-color, #888) 0 60%, transparent 62%), radial-gradient(ellipse 30% 13% at 74% 68%, var(--cls-color, #888) 0 60%, transparent 62%), radial-gradient(ellipse 13% 28% at 32% 72%, var(--cls-color, #888) 0 60%, transparent 62%), radial-gradient(ellipse 22% 10% at 50% 50%, var(--cls-color, #888) 0 60%, transparent 62%); -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 92%); mask: radial-gradient(closest-side, #000 55%, transparent 92%); } /* Prospector — cut gem faces. A conic gradient with HARD, UNEVEN stops: even wedges read as a pie chart, uneven ones read as a stone that was cut. The alpha steps are the light catching different faces. */ .bdg[data-bdg-bg="bd-facet"] .bdg-bg { opacity: 0.5; background: conic-gradient(from 18deg, var(--cls-color, #888) 0deg 34deg, transparent 34deg 62deg, var(--cls-color, #888) 62deg 78deg, transparent 78deg 140deg, var(--cls-color, #888) 140deg 186deg, transparent 186deg 214deg, var(--cls-color, #888) 214deg 232deg, transparent 232deg 300deg, var(--cls-color, #888) 300deg 326deg, transparent 326deg 360deg); -webkit-mask: radial-gradient(closest-side, #000 20%, #000 70%, transparent 94%); mask: radial-gradient(closest-side, #000 20%, #000 70%, transparent 94%); } /* Tidecaller — a swell on the lower arc. It ROCKS rather than turning: a full rotation would read as the same spinner Turning and Satellite already are, and the point of a tide is that it comes back. */ .bdg[data-bdg-ring="rg-tideline"] .bdg-ring { background: conic-gradient(from 120deg, transparent 0deg, var(--cls-color, #888) 40deg, var(--cls-color, #888) 80deg, transparent 120deg, transparent 360deg); -webkit-mask: radial-gradient(closest-side, transparent 83%, #000 85%, #000 97%, transparent 99%); mask: radial-gradient(closest-side, transparent 83%, #000 85%, #000 97%, transparent 99%); opacity: 0.85; animation: bdg-swell 5.5s ease-in-out infinite; } @keyframes bdg-swell { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } } /* Woodwright — concentric growth rings, tightening outward. Three stacked repeating gradients rather than one, because a single repeating-radial has ONE period and evenly spaced rings read as a target, not as timber. Each layer is masked to its own band so the spacing closes toward the frame. */ .bdg[data-bdg-ring="rg-heartwood"] .bdg-ring { background: repeating-radial-gradient(closest-side, var(--cls-color, #888) 0 1px, transparent 1px 7px), repeating-radial-gradient(closest-side, var(--cls-color, #888) 0 1px, transparent 1px 5px), repeating-radial-gradient(closest-side, var(--cls-color, #888) 0 1px, transparent 1px 3px); -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%, #000 98%, transparent 100%); mask: radial-gradient(closest-side, transparent 78%, #000 80%, #000 98%, transparent 100%); opacity: 0.75; } /* ---- Herbalist ladder badge parts (Professions v3) ---- Both tint with --cls-color like every other part, so they take the wearer's badge colour (green on a Herbalist badge). */ .bdg[data-bdg-bg="bd-fernweave"] .bdg-bg { opacity: 0.32; background: radial-gradient(circle at 50% 62%, var(--cls-color, #888) 0 6%, transparent 46%), radial-gradient(ellipse 11% 40% at 33% 44%, var(--cls-color, #888) 0 55%, transparent 60%), radial-gradient(ellipse 11% 40% at 67% 44%, var(--cls-color, #888) 0 55%, transparent 60%), radial-gradient(ellipse 9% 34% at 50% 33%, var(--cls-color, #888) 0 55%, transparent 60%); -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 92%); mask: radial-gradient(closest-side, #000 55%, transparent 92%); } /* A wreath of small leaf-marks around the outside, turning slowly. */ .bdg[data-bdg-ring="rg-vinewreath"] .bdg-ring { background: repeating-conic-gradient(from 0deg, var(--cls-color, #888) 0 4deg, transparent 4deg 18deg); -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 82%, #000 96%, transparent 100%); mask: radial-gradient(closest-side, transparent 80%, #000 82%, #000 96%, transparent 100%); opacity: 0.8; animation: bdg-turn 26s linear infinite; }