…
…
…
(polaroid lean) */
.px-card {
position: relative;
display: block;
background: var(--px-color-paper);
border: 12px solid transparent;
border-image: var(--px-sketch-border-ink) 45 / 12px stretch;
padding: 8px 12px;
box-shadow: var(--px-shadow-ink);
}
.px-card--screen {
background: var(--px-color-screen-card);
border-image-source: var(--px-sketch-border-screen);
color: var(--px-color-screen-headline);
box-shadow: var(--px-shadow-ink);
}
/* slight hand-placed lean; set --px-card-rot to vary per card */
.px-card--tilt {
transform: rotate(var(--px-card-rot, -0.8deg));
}
/* px-chip — the HUD chip: coin/stat readouts and level tags.
Wrap the value in to pull it back to ink from a coloured label.
COINS 12
LEVEL 5
HP 3
Theme with: --px-chip-bg, --px-chip-fg. */
.px-chip {
display: inline-flex;
align-items: center;
gap: 0.5em;
height: 44px;
padding: 0 16px;
font-family: var(--px-font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--px-chip-fg, var(--px-color-sketch-yellow-stroke));
background: var(--px-chip-bg, var(--px-color-paper));
border: 2px solid var(--px-color-ink);
border-radius: 999px;
box-shadow: var(--px-shadow-ink);
}
.px-chip b {
font-weight: 500;
color: var(--px-color-ink);
}
/* level tag: squarer, filled, sits on the edge of a panel */
.px-chip--tag {
height: auto;
padding: 3px 12px;
font-size: 0.6rem;
letter-spacing: 0.16em;
border-radius: 8px;
color: var(--px-color-ink);
background: var(--px-chip-bg, var(--px-color-sketch-yellow-fill));
}
.px-chip--screen {
--px-chip-bg: var(--px-color-screen-card);
--px-chip-fg: var(--px-color-amber);
border-color: var(--px-color-screen-frame);
}
.px-chip--screen b {
color: var(--px-color-screen-frame);
}
/* px-coin — a collectible coin backed by a shared wallet.
The sprite is baked from an 8x8 pixel map at build time into
--px-coin-sprite. Clicking flips the coin up and away; the running
total lands in any element carrying data-px-coins.
IT'S DANGEROUS TO SHIP ALONE. TAKE THIS.
Parth Anand
class: product designer · lvl 5+
response time
< 24h
recruit this unit ✏
hover me — meet the real one ✏
Tune per instance with --px-note-rot, --px-note-color, --px-arrow-w/h. */ .px-note { display: inline-block; font-family: var(--px-font-hand); font-size: 1.35rem; line-height: 1.3; color: var(--px-note-color, var(--px-color-accent)); transform: rotate(var(--px-note-rot, -2deg)); } .px-arrow { display: inline-block; width: var(--px-arrow-w, 120px); height: var(--px-arrow-h, 46px); vertical-align: middle; background-color: currentColor; -webkit-mask: var(--px-doodle-arrow) no-repeat center / contain; mask: var(--px-doodle-arrow) no-repeat center / contain; } .px-arrow--flip { transform: scaleX(-1); } /* on the dark screen, amber reads where accent violet does not */ .px-screen .px-note, .px-note--screen { --px-note-color: var(--px-color-amber); } /* px-quest — the quest-select list (level tabs). Each item is a real