.shop-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 1199px) {
.shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.shop-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
.cape-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
container-type: inline-size;
transition:
opacity var(--t-slow) var(--e-out),
transform var(--t-slow) var(--e-out),
border-color var(--t) var(--e-out);
transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s;
}
.cape-card-canvas,
.cape-card-bloom {
transition:
transform var(--t-slow) var(--e-out),
opacity var(--t) var(--e-out);
}
@media (hover: hover) {
.cape-card:hover { border-color: var(--accent); }
.cape-card:hover .cape-card-canvas { transform: translateY(-6px) rotate(-4deg) scale(1.06); }
.cape-card:hover .cape-card-bloom { transform: translateY(-6px) rotate(-5deg) scale(1.12); opacity: 1; }
}
.cape-card:has(:focus-visible) { border-color: var(--accent); }
.cape-card:has(:focus-visible) .cape-card-canvas { transform: translateY(-6px) rotate(-4deg) scale(1.06); }
.cape-card:has(:focus-visible) .cape-card-bloom { transform: translateY(-6px) rotate(-5deg) scale(1.12); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.cape-card-canvas,
.cape-card-bloom { transition: none; }
.cape-card:hover .cape-card-canvas,
.cape-card:hover .cape-card-bloom,
.cape-card:has(:focus-visible) .cape-card-canvas,
.cape-card:has(:focus-visible) .cape-card-bloom { transform: none; }
}
.cape-card-stage {
--texel: 16px;
position: relative;
display: flex;
flex-direction: column;
aspect-ratio: 1 / 1;
background-color: var(--base-deep);
background-image: radial-gradient(115% 85% at 50% 42%,
color-mix(in srgb, var(--cape-tint, var(--base-deep)) 56%, var(--base-deep)),
color-mix(in srgb, var(--cape-tint, var(--base-deep)) 30%, var(--base-deep)) 78%);
border-bottom: 2px solid var(--night-ink);
box-shadow: inset 0 4px 0 var(--slab-inset);
isolation: isolate;
}
@supports (width: round(down, 1cqw, 1px)) {
.cape-card-stage { --texel: clamp(10px, round(down, min(6cqw, (100cqw - 52px) / 17), 1px), 18px); }
}
.cape-card-chips {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 14px 12px 0;
min-height: 42px;
}
.cape-card-chips .cape-card-stock { margin-left: auto; }
@container (max-width: 259px) {
.cape-card-chips { flex-direction: column; align-items: flex-start; min-height: 78px; }
.cape-card-chips .cape-card-stock { align-self: flex-end; }
}
.cape-card-art {
position: relative;
flex: 1 1 auto;
display: grid;
place-items: center;
width: 100%;
padding: 16px 0 20px;
cursor: pointer;
background: none;
border: 0;
}
.cape-card-art:focus-visible { outline-offset: -6px; }
.cape-card-canvas,
.cape-card-bloom {
grid-area: 1 / 1;
width: calc(10 * var(--texel));
height: calc(16 * var(--texel));
}
.cape-card-canvas {
position: relative;
z-index: 1;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
}
.cape-card-bloom {
z-index: 0;
filter: blur(6px) saturate(1.4);
opacity: .85;
mix-blend-mode: screen;
pointer-events: none;
}
.cape-card-zoom {
position: absolute;
z-index: 2;
right: 12px;
bottom: 14px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--r-px-sm);
border: 2px solid var(--night-ink);
background: linear-gradient(180deg, var(--slab-icon-top), var(--slab-icon-bot));
box-shadow: 0 2px 0 var(--night-ink);
color: var(--text-dim);
opacity: 0;
transform: translateY(4px);
transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-out), color var(--t-fast);
pointer-events: none;
}
.cape-card-zoom svg { width: 16px; height: 16px; }
.cape-card:hover .cape-card-zoom,
.cape-card-art:focus-visible .cape-card-zoom {
opacity: 1;
transform: none;
}
.cape-card-art:hover .cape-card-zoom { color: var(--accent); }
@media (hover: none) {
.cape-card-zoom { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.cape-card-zoom { transition: opacity var(--t-fast); transform: none; }
}
.cape-card-rarity,
.cape-zoom-rarity {
--tip-ink: var(--mc-common);
--tip-shadow: var(--mc-common-shadow);
display: inline-flex;
align-items: center;
padding: 0 8px 4px;
border: 2px solid var(--mc-tip-line-top);
border-image: linear-gradient(180deg, var(--mc-tip-line-top), var(--mc-tip-line-bot)) 1;
background: var(--mc-tip-bg);
box-shadow:
0 -2px 0 var(--mc-tip-bg),
0 2px 0 var(--mc-tip-bg),
-2px 0 0 var(--mc-tip-bg),
2px 0 0 var(--mc-tip-bg);
color: var(--tip-ink);
font-family: var(--font-pixel);
font-size: 16px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
text-shadow: 2px 2px 0 var(--tip-shadow);
white-space: nowrap;
font-synthesis: none;
}
:is(.cape-card-rarity, .cape-zoom-rarity).rarity-uncommon { --tip-ink: var(--mc-uncommon); --tip-shadow: var(--mc-uncommon-shadow); }
:is(.cape-card-rarity, .cape-zoom-rarity).rarity-rare { --tip-ink: var(--mc-rare); --tip-shadow: var(--mc-rare-shadow); }
:is(.cape-card-rarity, .cape-zoom-rarity).rarity-ultra { --tip-ink: var(--mc-epic); --tip-shadow: var(--mc-epic-shadow); }
html:lang(hi) :is(.cape-card-rarity, .cape-zoom-rarity),
html:lang(zh) :is(.cape-card-rarity, .cape-zoom-rarity) { line-height: 24px; padding-bottom: 2px; }
.cape-card-stock {
--tip-ink: var(--stock-out);
--tip-shadow: var(--stock-out-shadow);
--tip-top: var(--stock-out-line-top);
--tip-bot: var(--stock-out-line-bot);
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 7px 1px;
border: 2px solid var(--tip-bot);
border-image: linear-gradient(180deg, var(--tip-top), var(--tip-bot)) 1;
background: var(--stock-tip-bg);
box-shadow:
0 -2px 0 var(--stock-tip-bg),
0 2px 0 var(--stock-tip-bg),
-2px 0 0 var(--stock-tip-bg),
2px 0 0 var(--stock-tip-bg);
color: var(--tip-ink);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: .03em;
text-transform: uppercase;
text-shadow: 1px 1px 0 var(--tip-shadow);
white-space: nowrap;
flex: 0 0 auto;
}
.cape-card-stock[hidden] { display: none; }
.cape-card-stock-warn {
--tip-ink: var(--stock-low);
--tip-shadow: var(--stock-low-shadow);
--tip-top: var(--stock-low-line-top);
--tip-bot: var(--stock-low-line-bot);
}
.cape-card-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 16px 18px 18px;
}
.cape-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 8px;
margin-bottom: 8px;
}
.cape-card-name {
font-family: var(--font-clean);
font-size: 18px;
font-weight: 700;
letter-spacing: -.005em;
text-transform: none;
line-height: 23px;
overflow-wrap: break-word;
min-width: 0;
}
.cape-card-name-link {
text-decoration: none;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
transition: color var(--t-fast);
}
.cape-card-name-link:hover {
color: var(--accent);
text-decoration-line: underline;
}
.cape-card-foot {
margin-top: auto;
padding-top: 6px;
}
.cape-card-price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.cape-card-price {
font-family: var(--font-mono);
font-weight: 700;
font-size: 21px;
line-height: 1.2;
font-variant-numeric: tabular-nums;
color: var(--text);
white-space: nowrap;
min-width: 0;
}
.cape-card-cart.btn {
--slab-depth: 4px;
width: 48px;
height: 44px;
min-height: 44px;
padding: 0 0 2px;
border-radius: 10px;
flex: 0 0 auto;
}
.cape-cart-ic {
width: 20px;
height: 20px;
}
.cape-card-cart .cape-cart-tick { display: none; width: 18px; height: 18px; }
.cape-card-cart.is-added .cape-cart-ic { display: none; }
.cape-card-cart.is-added .cape-cart-tick { display: block; }
.cape-card-skel-badge {
width: 112px;
height: 28px;
background: var(--surface);
box-shadow: 0 0 0 2px var(--surface);
animation: cape-skel-pulse 1.4s ease-in-out infinite;
}
.cape-card-skel-thumb {
width: calc(10 * var(--texel));
height: calc(16 * var(--texel));
background: var(--surface);
animation: cape-skel-pulse 1.4s ease-in-out infinite;
}
.cape-card-skel-line {
--bar: linear-gradient(var(--surface-2), var(--surface-2));
background-repeat: no-repeat;
animation: cape-skel-pulse 1.4s ease-in-out infinite;
}
.cape-card-skel-name {
font-size: 16px;
line-height: 20px;
height: 20px;
height: 1lh;
margin-bottom: 8px;
background-image: var(--bar);
background-size: 62% 16px;
background-position: 0 50%;
}
.cape-card-skel-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: auto;
padding-top: 6px;
}
.cape-card-skel-price {
width: 38%;
height: 22px;
background: var(--surface-2);
animation: cape-skel-pulse 1.4s ease-in-out infinite;
}
.cape-card-skel-cart {
width: 48px;
height: 44px;
border-radius: var(--r-px-sm);
background: var(--surface-2);
box-shadow: 0 4px 0 var(--night-ink);
animation: cape-skel-pulse 1.4s ease-in-out infinite;
flex: 0 0 auto;
}
@keyframes cape-skel-pulse {
0%, 100% { opacity: .5; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.cape-card-skel-thumb, .cape-card-skel-line, .cape-card-skel-badge,
.cape-card-skel-price, .cape-card-skel-cart { animation: none; opacity: .7; }
}
.shop-error {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 48px 24px;
text-align: center;
}
.shop-error p { color: var(--text-dim); font-size: 14.5px; max-width: 46ch; }
@media (max-width: 520px) {
.cape-card-chips { padding: 12px 12px 0; min-height: 40px; }
.cape-card-art { padding: 14px 0 18px; }
.cape-card-body { padding: 14px 16px 16px; }
}
.cape-zoom-overlay {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: flex-start;
justify-content: center;
padding: var(--gutter);
overflow-y: auto;
overscroll-behavior: contain;
background: color-mix(in srgb, var(--base-deep) 82%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
opacity: 0;
transition: opacity var(--t) var(--e-out);
}
.cape-zoom-overlay.is-open { opacity: 1; }
.cape-zoom-overlay[hidden] { display: none; }
.cape-zoom-overlay:not(.is-open) { pointer-events: none; }
.has-modal, .has-modal body { overflow: hidden; }
.cape-zoom-dialog {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: clamp(20px, 3.4vw, 40px);
width: 100%;
max-width: var(--maxw-mid);
margin: auto 0;
padding: clamp(18px, 2.4vw, 28px);
background: var(--surface);
border: 2px solid var(--night-ink);
border-radius: var(--r-px-lg);
box-shadow: 0 6px 0 var(--night-ink);
transform: translateY(10px) scale(.985);
opacity: 0;
transition: transform var(--t) var(--e-out), opacity var(--t) var(--e-out);
}
.cape-zoom-overlay.is-open .cape-zoom-dialog { transform: none; opacity: 1; }
.cape-zoom-stage {
--ztexel: 22px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background: var(--base-deep);
border: 2px solid var(--night-ink);
border-radius: var(--r-px);
box-shadow: inset 0 4px 0 var(--slab-inset);
}
@supports (width: round(down, 1vw, 1px)) {
.cape-zoom-stage { --ztexel: clamp(16px, round(down, 2.6vw, 1px), 26px); }
}
.cape-zoom-art {
position: relative;
display: grid;
place-items: center;
padding: 24px;
background: var(--base-deep);
isolation: isolate;
transition: transform .34s var(--e-out);
will-change: transform;
}
.cape-zoom-canvas,
.cape-zoom-bloom {
grid-area: 1 / 1;
width: calc(10 * var(--ztexel));
height: calc(16 * var(--ztexel));
}
.cape-zoom-canvas {
position: relative;
z-index: 1;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
}
.cape-zoom-bloom {
z-index: 0;
transform: scale(1.06);
filter: blur(16px) saturate(1.45);
opacity: .9;
mix-blend-mode: screen;
pointer-events: none;
}
.cape-zoom-info { min-width: 0; padding-top: 4px; }
.cape-zoom-rarity { margin: 2px 0 18px; }
.cape-zoom-name {
font-size: 32px;
line-height: 1.25;
margin-bottom: 10px;
overflow-wrap: break-word;
}
.cape-zoom-price {
font-family: var(--font-mono);
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--accent);
margin-bottom: 14px;
}
.cape-zoom-blurb {
color: var(--text-dim);
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.65;
max-width: 52ch;
margin-bottom: 24px;
}
.cape-zoom-actions { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.cape-zoom-close {
position: absolute;
z-index: 3;
top: 12px;
right: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--r-px-sm);
border: 2px solid var(--night-ink);
background: linear-gradient(180deg, var(--slab-icon-top), var(--slab-icon-bot));
box-shadow: 0 3px 0 var(--night-ink);
color: var(--text-dim);
transition: color var(--t-fast), transform .13s cubic-bezier(.16, 1, .3, 1), box-shadow .13s cubic-bezier(.16, 1, .3, 1);
}
.cape-zoom-close:hover { color: var(--text); transform: translateY(-2px); box-shadow: 0 5px 0 var(--night-ink); }
.cape-zoom-close:active { transform: translateY(3px); box-shadow: 0 0 0 var(--night-ink); }
.cape-zoom-close svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
.cape-zoom-dialog {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
text-align: center;
padding-top: 62px;
}
.cape-zoom-name { font-size: 24px; }
.cape-zoom-blurb { margin-left: auto; margin-right: auto; }
.cape-zoom-actions { justify-content: center; }
}
@media (max-width: 760px) {
.cape-zoom-stage { --ztexel: 14px; }
}
@media (max-width: 760px) {
@supports (width: round(down, 1vw, 1px)) {
.cape-zoom-stage { --ztexel: clamp(12px, round(down, 3.6vw, 1px), 20px); }
}
}
@media (prefers-reduced-motion: reduce) {
.cape-zoom-overlay,
.cape-zoom-dialog,
.cape-zoom-art,
.cape-zoom-close { transition: none; }
}
.shop-more { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px); }
.shop-more[hidden] { display: none; }
.cape-zoom-rarity, .tryon-cape-rarity, .cape-grid .cape-card-rarity { display: none; }
.cape-card {
border: 1px solid var(--btn-hairline);
border-radius: 16px;
box-shadow: 0 1px 0 var(--btn-top-light-lo) inset, 0 2px 4px var(--btn-shadow-near), 0 12px 28px var(--btn-shadow-far);
}
.cape-card .cape-card-stage {
border-bottom: 1px solid var(--btn-hairline);
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.cape-card:hover { border-color: var(--btn-hairline-hi); }
}
.shop-grid { max-width: 1200px; margin-left: auto; margin-right: auto; }
.cape-card-stock {
height: 26px;
padding: 0 11px;
border: 0;
border-image: none;
border-radius: 999px;
background: var(--pill-low);
color: var(--pill-low-ink);
box-shadow: 0 2px 0 var(--pill-edge), 0 4px 10px var(--btn-shadow-far);
font-family: var(--font-clean);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
text-shadow: none;
}
.cape-card-stock-few { background: var(--pill-few); color: var(--pill-few-ink); }
.cape-card-stock-warn { background: var(--pill-low); color: var(--pill-low-ink); }
.cape-card-stock-last { background: var(--pill-last); color: var(--pill-last-ink); }
.cape-card-stock-danger { background: var(--pill-out); color: var(--pill-out-ink); }
.cape-card-chips .cape-card-stock { margin-left: 0; }
@container (max-width: 259px) {
.cape-card-chips .cape-card-stock { align-self: flex-start; }
}
.cape-card-crop {
position: relative;
display: block;
width: calc(10 * var(--texel));
height: calc(16 * var(--texel));
overflow: hidden;
}
.cape-card-crop img {
position: absolute;
left: -10%;
top: -6.25%;
width: 640%;
max-width: none;
height: auto;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
}
.cape-card-blurb { display: none; }
@media (scripting: none) {
.cape-card-blurb { display: block; margin: 6px 0 0; color: var(--text-mute); font-size: 13px; line-height: 1.5; }
}
.cape-card-stage {
--texel: 5cqw;
background-color: var(--base-deep);
background-image:
radial-gradient(ellipse 58% 52% at 50% 46%, color-mix(in srgb, var(--cape-tint, var(--accent)) 52%, var(--base-deep)) 0%, transparent 72%),
repeating-conic-gradient(color-mix(in srgb, var(--text) 3%, transparent) 0 25%, transparent 0 50%),
linear-gradient(180deg, color-mix(in srgb, var(--cape-tint, var(--base-deep)) 24%, var(--base-deep)), color-mix(in srgb, var(--cape-tint, var(--base-deep)) 14%, var(--base-deep)));
background-size: auto, 12.5% 12.5%, auto;
}
@supports (width: round(down, 1cqw, 1px)) {
.cape-card-stage { --texel: clamp(6px, round(down, 5cqw, 1px), 18px); }
}
.cape-card-3d {
position: relative;
display: block;
width: calc(10 * var(--texel));
height: calc(16 * var(--texel));
margin-top: calc(-1 * var(--texel));
perspective: calc(80 * var(--texel));
}
.cape-card-3d::after {
content: '';
position: absolute;
top: calc(17.2 * var(--texel));
left: calc(.4 * var(--texel));
width: calc(9.2 * var(--texel));
height: calc(.9 * var(--texel));
background: color-mix(in srgb, var(--night-ink) 55%, transparent);
clip-path: polygon(8% 0, 92% 0, 92% 33%, 100% 33%, 100% 67%, 92% 67%, 92% 100%, 8% 100%, 8% 67%, 0 67%, 0 33%, 8% 33%);
pointer-events: none;
}
.cc3d-box {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transform: rotateX(6deg) rotateY(26deg);
transition: transform .46s var(--e-out);
}
.cc3d-face {
position: absolute;
left: 0;
top: 0;
background-image: var(--tex);
background-repeat: no-repeat;
background-size: calc(64 * var(--texel)) calc(32 * var(--texel));
image-rendering: pixelated;
backface-visibility: hidden;
}
.cc3d-front {
width: calc(10 * var(--texel));
height: calc(16 * var(--texel));
background-position: calc(-1 * var(--texel)) calc(-1 * var(--texel));
transform: translateZ(calc(var(--texel) / 2));
}
.cc3d-left {
width: var(--texel);
height: calc(16 * var(--texel));
background-position: 0 calc(-1 * var(--texel));
transform: translateX(calc(var(--texel) / -2)) rotateY(-90deg);
}
.cc3d-top {
width: calc(10 * var(--texel));
height: var(--texel);
background-position: calc(-1 * var(--texel)) 0;
transform: translateY(calc(var(--texel) / -2)) rotateX(90deg);
}
.cc3d-left::after, .cc3d-top::after { content: ''; position: absolute; inset: 0; }
.cc3d-left::after { background: color-mix(in srgb, var(--night-ink) 42%, transparent); }
.cc3d-top::after { background: color-mix(in srgb, var(--star) 16%, transparent); }
@media (hover: hover) {
.cape-card:hover { transform: translateY(-4px); }
.cape-card:hover .cc3d-box { transform: rotateX(4deg) rotateY(14deg) translateY(calc(-.4 * var(--texel))); }
}
.cape-card:has(:focus-visible) .cc3d-box { transform: rotateX(4deg) rotateY(14deg) translateY(calc(-.4 * var(--texel))); }
@media (prefers-reduced-motion: reduce) {
.cc3d-box { transition: none; }
}
.container-wide .shop-grid { max-width: none; }
.cape-card { border-radius: 14px; }
.cape-card-stage { --texel: 4.2cqw; }
@supports (width: round(down, 1cqw, 1px)) {
.cape-card-stage { --texel: clamp(6px, round(down, 4.2cqw, 1px), 18px); }
}
.cape-card-name {
font-size: 17px;
font-weight: 650;
line-height: 22px;
}
.cape-card-top { margin-bottom: 0; }
.cape-card-foot { padding-top: 10px; }
.cape-card-cart.btn {
width: 46px;
height: 46px;
min-height: 46px;
border-radius: 12px;
}
.cape-card-chips {
position: absolute;
z-index: 3;
top: 10px;
left: 10px;
right: 10px;
min-height: 0;
padding: 0;
flex-direction: row;
align-items: flex-start;
gap: 6px;
pointer-events: none;
}
@container (max-width: 259px) {
.cape-card-chips { flex-direction: row; min-height: 0; }
}
.cape-card-chips .cape-card-stock {
height: 26px;
padding: 0 10px;
border: 2px solid var(--night-ink);
box-shadow: 0 2px 0 var(--night-ink);
font-size: 12px;
font-weight: 650;
line-height: 1;
}
.cape-card-chips .cape-card-stock-last { color: var(--text); }
.cape-card-art { padding: 34px 0 10px; }