:root {
--lc-display: 'Geist', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--lc-body: 'Geist', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--lc-top-h: 84px;
--lc-bar-h: 52px;
--lc-ease: cubic-bezier(.4, 0, .2, 1);
--lc-ease-menu: cubic-bezier(.77, .2, .05, 1);
--night-page: var(--lc-page);
--night-deep: var(--lc-deep);
--night-surface: var(--lc-panel);
--night-surface-2: var(--lc-tile);
--night-surface-3: var(--lc-raised);
--night-nav-top: var(--lc-top);
--night-nav-bot: var(--lc-top);
--night-ink: var(--lc-ink-deep);
--night-hairline: var(--lc-w7);
--night-hairline-strong: var(--lc-w12);
--night-text: var(--lc-text);
--night-text-dim: var(--lc-muted);
--night-text-mute: var(--lc-mute);
--night-text-faint: var(--lc-faint);
--slab-dark: var(--lc-tile);
--slab-dark-hi: var(--lc-raised);
--slab-dark-edge: var(--lc-border);
--slab-icon-top: var(--lc-tile);
--slab-icon-bot: var(--lc-tile);
--base: var(--lc-page);
--base-deep: var(--lc-deep);
--nav-fill: var(--lc-top);
--surface: var(--lc-panel);
--surface-2: var(--lc-tile);
--surface-3: var(--lc-raised);
--hairline: var(--night-hairline);
--hairline-strong: var(--night-hairline-strong);
--text: var(--lc-text);
--text-dim: var(--lc-muted);
--text-mute: var(--lc-mute);
--shadow-sm: 0 2px 10px var(--lc-k20);
--shadow-md: 0 10px 30px -12px var(--lc-k60);
--shadow-lg: 0 24px 60px -24px var(--lc-k80);
--font-pixel: var(--lc-display);
--font-brand: var(--lc-display);
--font-body: var(--lc-body);
--font-clean: var(--lc-body);
--r-px: 14px;
--r-px-sm: 8px;
--r-px-lg: 14px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 18px;
--nav-h: 0px;
--nav-top: 0px;
--nav-top-rest: 0px;
}
html { background: var(--lc-page); color-scheme: dark; }
body { font-family: var(--lc-body); color: var(--lc-text); }
h1, h2, h3, h4, h5, h6 { font-family: var(--lc-display); letter-spacing: -.01em; }
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.nav.lc-header {
position: sticky;
top: calc(-1 * var(--lc-top-h));
left: auto; right: auto;
z-index: 1000;
display: block;
padding: 0;
pointer-events: auto;
transition: none;
}
.nav.lc-header.scrolled { padding: 0; }
.lc-top {
position: relative;
z-index: 2;
height: var(--lc-top-h);
display: flex;
align-items: stretch;
justify-content: space-between;
background: var(--lc-top);
}
.nav-brand.lc-brand {
flex: none;
position: relative;
display: flex;
align-items: center;
gap: 18px;
padding: 0 28px 0 30px;
min-width: 300px;
color: var(--lc-white);
text-decoration: none;
}
.lc-mark { width: 46px; height: 46px; border-radius: 11px; flex: none; }
.lc-title {
font-family: var(--lc-display);
font-size: 30px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1;
transition: transform .25s ease-in-out;
}
.lc-subtitle {
position: absolute;
left: 95px;
top: calc(50% + 10px);
font-size: 10px;
font-style: italic;
font-weight: 600;
letter-spacing: 5.5px;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
transition: opacity .25s ease-in-out .1s;
}
.lc-brand:hover .lc-title,
.lc-brand:focus-visible .lc-title { transform: translateY(-7px); }
.lc-brand:hover .lc-subtitle,
.lc-brand:focus-visible .lc-subtitle { opacity: .75; }
.lc-top-right { display: flex; align-items: stretch; }
.lc-top-right > .lc-live,
.lc-top-right > .nav-currency,
.lc-top-right > .lc-icon { align-self: center; }
.lc-top-right > .nav-currency { margin: 0 6px; }
.lc-live {
display: inline-flex;
align-items: center;
gap: 9px;
margin-right: 10px;
font-size: 15px;
font-weight: 500;
color: var(--lc-white);
white-space: nowrap;
}
.lc-live[hidden] { display: none; }
.lc-live-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--lc-green);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--lc-green) 70%, transparent);
animation: lc-pulse 2s infinite;
flex: none;
}
@keyframes lc-pulse {
0% { transform: scale(.95); box-shadow: 0 0 0 0 color-mix(in srgb, var(--lc-green) 70%, transparent); }
70% { transform: scale(1); box-shadow: 0 0 0 10px transparent; }
100% { transform: scale(.95); box-shadow: 0 0 0 0 transparent; }
}
.lc-icon.nav-discord,
.lc-icon.nav-basket {
position: relative;
width: 44px;
height: 44px;
display: inline-grid;
place-items: center;
border: 0;
border-radius: 10px;
background: none;
box-shadow: none;
color: var(--lc-white);
transition: background-color .2s, color .2s, transform .2s;
}
.lc-icon.nav-discord:hover,
.lc-icon.nav-basket:hover { background: var(--lc-hover); color: var(--accent); transform: none; box-shadow: none; }
.lc-icon.nav-discord svg { width: 22px; height: 22px; }
.lc-icon.nav-basket svg { width: 24px; height: 24px; }
.lc-icon.nav-discord:active,
.lc-icon.nav-basket:active { transform: translateY(1px); box-shadow: none; }
.nav-basket-count {
position: absolute;
top: 3px;
right: 1px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
border: 0;
background: var(--lc-amber);
color: var(--lc-ink);
font-family: var(--lc-body);
font-size: 11px;
font-weight: 800;
line-height: 18px;
text-align: center;
box-shadow: none;
}
.lc-shop {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-left: 18px;
padding: 0 44px;
background: var(--accent);
color: var(--lc-ink);
text-decoration: none;
transition: background-color .35s;
}
.lc-shop-label {
font-family: var(--lc-display);
font-size: 24px;
font-weight: 900;
letter-spacing: .15rem;
text-transform: uppercase;
white-space: nowrap;
transition: transform .2s ease-in-out;
}
.lc-shop:hover { background: var(--lc-mint-hi); }
.lc-shop:hover .lc-shop-label { transform: scale(1.05); }
.lc-shine {
position: absolute;
top: -30%;
bottom: -30%;
left: 0;
width: 26%;
background: linear-gradient(90deg, transparent, var(--lc-shine), transparent);
transform: translateX(-400%) rotate(-20deg);
pointer-events: none;
}
.lc-shop:hover .lc-shine,
.lc-btn:hover .lc-shine { animation: lc-shine .6s cubic-bezier(.25, .46, .45, .94) both; }
@keyframes lc-shine {
from { transform: translateX(-400%) rotate(-20deg); }
to { transform: translateX(430%) rotate(-20deg); }
}
.nav.lc-header .nav-toggle.lc-menu {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: auto;
height: auto;
min-width: 230px;
padding: 0 40px;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--lc-white);
cursor: pointer;
transition: background-color .35s;
}
.nav.lc-header .nav-toggle.lc-menu:hover { background: var(--lc-hover); }
.nav.lc-header .nav-toggle.lc-menu:active { transform: none; box-shadow: none; }
.lc-burger { position: relative; width: 30px; height: 22px; flex: none; }
.lc-burger i {
position: absolute;
left: 0;
width: 100%;
height: 4px;
border-radius: 2px;
background: currentColor;
transition: transform .5s var(--lc-ease-menu), opacity .55s;
}
.lc-burger i:nth-child(1) { top: 0; }
.lc-burger i:nth-child(2) { top: 9px; }
.lc-burger i:nth-child(3) { top: 18px; }
.lc-menu[aria-expanded="true"] .lc-burger i:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.lc-menu[aria-expanded="true"] .lc-burger i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.lc-menu[aria-expanded="true"] .lc-burger i:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.lc-menu-label {
font-family: var(--lc-display);
font-size: 24px;
font-weight: 900;
letter-spacing: .1rem;
text-transform: uppercase;
}
.lc-menu-close { display: none; }
.lc-menu[aria-expanded="true"] .lc-menu-open { display: none; }
.lc-menu[aria-expanded="true"] .lc-menu-close { display: inline; }
.nav.lc-header .nav-inner.lc-bar {
position: relative;
width: auto;
max-width: none;
height: var(--lc-bar-h);
margin: 0;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
border: 0;
border-radius: 0;
border-bottom: 1px solid var(--lc-w5);
background: var(--lc-glass);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
box-shadow: none;
transition: background-color .4s ease-in-out;
}
.nav.lc-header.is-stuck .nav-inner.lc-bar { background: var(--lc-glass-solid); }
.nav.lc-header .nav-links { display: flex; align-items: center; gap: 6px; }
.nav.lc-header .nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
height: var(--lc-bar-h);
padding: 0 22px;
border-radius: 0;
background: none;
font-family: var(--lc-display);
font-size: 15.5px;
font-weight: 800;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--lc-white);
text-decoration: none;
transition: color .2s, opacity .2s;
}
.nav.lc-header .nav-link:hover { background: none; opacity: .9; color: var(--accent); }
.nav.lc-header .nav-link.is-active { color: var(--accent); }
.nav.lc-header .nav-link.is-active::after {
content: '';
position: absolute;
left: 22px;
right: 22px;
bottom: 9px;
width: auto;
height: 3px;
border-radius: 2px;
background: var(--accent);
transform: none;
}
.nav.lc-header .lc-dd-trigger.is-active::after { right: 38px; }
.lc-chev { width: 12px; height: 12px; transition: transform .2s ease-in-out; }
.lc-dd.is-open .lc-chev { transform: rotate(-180deg); }
.lc-dd.is-open > .nav-link { color: var(--accent); }
.lc-bar-mark,
.lc-bar-basket {
position: absolute;
top: 50%;
display: grid;
place-items: center;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) scale(.9);
transition: opacity .3s, transform .3s var(--e-out);
}
.lc-bar-mark { left: 22px; }
.lc-bar-mark img { width: 30px; height: 30px; border-radius: 8px; }
.lc-bar-basket { right: 22px; width: 40px; height: 40px; color: var(--lc-white); border-radius: 10px; }
.lc-bar-basket svg { width: 22px; height: 22px; }
.lc-bar-basket .nav-basket-count { top: -2px; right: -4px; }
.lc-bar-basket:hover { color: var(--accent); background: var(--lc-hover); }
.nav.lc-header.is-stuck .lc-bar-mark,
.nav.lc-header.is-stuck .lc-bar-basket { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.lc-panel {
position: absolute;
top: calc(100% + 12px);
left: 0;
z-index: 5;
width: var(--lc-w, 600px);
height: var(--lc-h, 300px);
transform: translate3d(var(--lc-x, 0px), -10px, 0);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s var(--lc-ease), transform .2s var(--lc-ease), visibility 0s linear .2s;
}
.lc-panel.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate3d(var(--lc-x, 0px), 0, 0);
transition: opacity .2s var(--lc-ease), transform .2s var(--lc-ease), visibility 0s;
}
.lc-panel.is-moving {
transition: opacity .2s var(--lc-ease), transform .35s var(--lc-ease), width .35s var(--lc-ease), height .35s var(--lc-ease), visibility 0s;
}
.lc-panel.is-moving .lc-panel-box { transition: none; }
.lc-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.lc-panel-box {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 14px;
border: 1px solid var(--lc-border);
background: var(--lc-panel);
box-shadow: 0 20px 50px -12px var(--lc-k70), 0 2px 10px var(--lc-k20);
}
.lc-pane {
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template-columns: auto auto;
gap: 28px;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: opacity .3s var(--lc-ease), visibility 0s linear .3s;
}
.lc-pane.is-active { opacity: 1; visibility: visible; transition: opacity .3s var(--lc-ease) .05s, visibility 0s; }
.lc-pane-main { min-width: 0; }
.lc-pane-side {
width: 330px;
padding-left: 28px;
border-left: 1px solid var(--lc-border);
}
.lc-pane[data-pane="capes"] .lc-pane-main { width: 640px; }
.lc-pane[data-pane="help"] .lc-pane-main { width: 400px; }
.lc-pane[data-pane="help"] .lc-pane-side { width: 280px; }
.lc-pane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lc-eyebrow {
margin: 0 0 12px;
font-size: 11px;
font-weight: 700;
font-style: italic;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--lc-subtle);
}
.lc-pane-head .lc-eyebrow { margin: 0; }
.lc-pane-all {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
color: var(--lc-muted);
transition: background-color .15s, color .15s;
}
.lc-pane-all svg { width: 12px; height: 12px; }
.lc-pane-all:hover { background: var(--lc-hover); color: var(--lc-white); }
.lc-pane-capes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.lc-pane-cape {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 8px;
color: var(--lc-text);
text-decoration: none;
transition: background-color .15s;
}
.lc-pane-cape:hover, .lc-pane-cape:focus-visible { background: var(--lc-tile); }
.lc-pane-thumb {
position: relative;
flex: none;
width: 36px;
height: 56px;
border-radius: 4px;
overflow: hidden;
background-image: var(--tex);
background-size: 230.4px 115.2px;
background-position: -3.6px -3.6px;
image-rendering: pixelated;
box-shadow: 0 4px 10px -4px var(--lc-k70);
transition: transform .25s ease-in-out;
}
.lc-pane-cape:hover .lc-pane-thumb { transform: scale(1.08) rotate(-3deg); }
.lc-pane-cape-txt { display: flex; flex-direction: column; min-width: 0; }
.lc-pane-cape-txt b { font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-pane-cape-txt small { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--lc-muted); }
.lc-pane-cape-txt small.is-out { color: var(--lc-subtle); }
.lc-pane-list { display: grid; gap: 2px; }
.lc-pane-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 10px;
border-radius: 8px;
color: var(--lc-text);
text-decoration: none;
transition: background-color .15s;
}
.lc-pane-item:hover, .lc-pane-item:focus-visible { background: var(--lc-tile); }
.lc-pane-ic {
flex: none;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 9px;
background: var(--lc-tile);
color: var(--accent);
transition: background-color .15s;
}
.lc-pane-item:hover .lc-pane-ic { background: var(--lc-raised); }
.lc-pane-ic svg { width: 20px; height: 20px; }
.lc-pane-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lc-pane-txt b { font-size: 16px; font-weight: 600; }
.lc-pane-txt small { font-size: 14px; line-height: 1.45; color: var(--lc-muted); }
.lc-pane-discord {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
border-radius: 12px;
background: var(--discord-tint);
color: var(--lc-text);
transition: transform .2s, background-color .2s;
}
.lc-pane-discord:hover { transform: scale(1.02); background: color-mix(in srgb, var(--discord-tint) 100%, var(--lc-discord-hi)); }
.lc-pane-discord svg { width: 30px; height: 30px; color: var(--discord); flex: none; }
.lc-pane-discord span { display: flex; flex-direction: column; gap: 3px; }
.lc-pane-discord b { font-size: 16px; font-weight: 700; }
.lc-pane-discord small { font-size: 13.5px; color: var(--lc-muted); }
.nav-mobile.lc-menu-wall {
position: fixed;
z-index: 999;
top: var(--lc-top-h);
left: 0;
right: 0;
bottom: 0;
display: block;
padding: 0;
gap: 0;
border: 0;
border-radius: 0;
background: var(--lc-black);
box-shadow: none;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: none;
transition: opacity .4s ease-in-out, visibility 0s linear .4s;
}
.nav-mobile.lc-menu-wall.open {
display: block;
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .4s ease-in-out, visibility 0s;
}
.lc-tiles {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-auto-rows: max(260px, calc((100vh - var(--lc-top-h)) / 2));
min-height: 100%;
}
.nav-mobile .lc-tile {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 15px;
border-radius: 0;
color: var(--lc-white);
text-align: center;
text-decoration: none;
text-transform: uppercase;
filter: grayscale(75%);
transition: filter .5s;
}
.nav-mobile .lc-tile:hover,
.nav-mobile .lc-tile:focus-visible { background: none; filter: grayscale(0%); color: var(--lc-white); }
.lc-tile-bg {
position: absolute;
inset: -40px;
background-color: color-mix(in srgb, var(--tile-tint, var(--lc-tile)) 30%, var(--lc-tile));
background-image: var(--tile-tex, none), radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--tile-tint, var(--lc-tile)) 45%, transparent), transparent);
background-size: var(--tile-size, 900px 450px), 100% 100%;
background-position: var(--tile-pos, center), center;
background-repeat: no-repeat;
image-rendering: pixelated;
filter: blur(5px) brightness(.8) saturate(1.2);
transition: transform .5s;
}
.lc-tile-bg::after { content: ''; position: absolute; inset: 0; background: var(--lc-scrim); }
.lc-tile:hover .lc-tile-bg { transform: scale(1.05); }
.lc-tile-copy {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
transition: transform .5s;
}
.lc-tile:hover .lc-tile-copy { transform: scale(1.05); }
.lc-tile-title {
font-family: var(--lc-display);
font-size: clamp(28px, 2.6vw, 40px);
font-weight: 900;
line-height: 1;
text-shadow: 0 2px 0 var(--lc-k25);
}
.lc-tile-sub {
margin-top: 6px;
font-size: clamp(12px, 1.1vw, 17px);
font-weight: 700;
font-style: italic;
letter-spacing: .32em;
text-shadow: 0 2px 0 var(--lc-k25);
}
.lc-tile-pill {
margin-top: 14px;
padding: 5px 16px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 55%, transparent);
font-size: 11px;
font-weight: 800;
font-style: italic;
letter-spacing: .2em;
}
.lc-tile-pill[hidden] { display: none; }
.nav-mobile.open .lc-tile { animation: lc-rise .55s var(--e-out) both; }
.nav-mobile.open .lc-tile:nth-child(2) { animation-delay: .04s; }
.nav-mobile.open .lc-tile:nth-child(3) { animation-delay: .08s; }
.nav-mobile.open .lc-tile:nth-child(4) { animation-delay: .12s; }
.nav-mobile.open .lc-tile:nth-child(5) { animation-delay: .16s; }
.nav-mobile.open .lc-tile:nth-child(6) { animation-delay: .2s; }
@keyframes lc-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.lc-menu-foot { display: none; }
.nav.lc-header:has(.lc-menu[aria-expanded="true"]) .lc-bar { visibility: hidden; }
.nav.lc-header:has(.lc-menu[aria-expanded="true"]) ~ .lc-menu-wall { top: var(--lc-top-h); }
.nav-mobile .lc-menu-foot a {
padding: 14px 16px;
border-radius: 10px;
background: var(--lc-tile);
font-family: var(--lc-display);
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
color: var(--lc-white);
}
.nav-mobile .lc-menu-foot .nav-m-currency { padding: 8px 4px; color: var(--lc-muted); }
@media (max-width: 1280px) {
.lc-live { display: none; }
.lc-shop { padding: 0 30px; }
.lc-shop-label, .lc-menu-label { font-size: 20px; }
.nav.lc-header .nav-toggle.lc-menu { min-width: 0; padding: 0 30px; }
.nav.lc-header .nav-link { padding: 0 16px; }
.nav.lc-header .nav-link.is-active::after { left: 16px; right: 16px; }
.nav.lc-header .lc-dd-trigger.is-active::after { right: 32px; }
}
@media (max-width: 1060px) {
.lc-pane[data-pane="capes"] .lc-pane-main { width: 470px; }
.lc-pane-capes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
:root { --lc-top-h: 64px; --lc-bar-h: 0px; }
.nav.lc-header { top: 0; }
.nav.lc-header .nav-inner.lc-bar { display: none; }
.lc-brand { min-width: 0; padding: 0 12px 0 16px; gap: 12px; }
.lc-mark { width: 36px; height: 36px; }
.lc-title { font-size: 22px; }
.lc-subtitle { display: none; }
.lc-top-right > .nav-currency,
.lc-top-right > .nav-discord { display: none; }
.lc-shop { margin-left: 6px; padding: 0 18px; }
.lc-shop-label { font-size: 15px; letter-spacing: .08rem; }
.nav.lc-header .nav-toggle.lc-menu { padding: 0 18px; gap: 10px; }
.lc-menu-label { display: none; }
.lc-burger { width: 24px; height: 18px; }
.lc-burger i { height: 3px; }
.lc-burger i:nth-child(2) { top: 7.5px; }
.lc-burger i:nth-child(3) { top: 15px; }
.lc-menu[aria-expanded="true"] .lc-burger i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.lc-menu[aria-expanded="true"] .lc-burger i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.lc-tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
.lc-tile-big { grid-column: span 2; }
.lc-menu-foot { display: grid; gap: 8px; padding: 16px; }
}
@media (max-width: 480px) {
.lc-shop { display: none; }
.lc-tiles { grid-auto-rows: 150px; }
}
.lc-btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 0 34px;
border-radius: 6px;
font-family: var(--lc-display);
font-size: 16px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: var(--lc-ink);
box-shadow: 0 6px 18px -8px var(--lc-k60);
transition: transform .2s var(--e-out), background-color .2s, box-shadow .2s;
}
.lc-btn svg { width: 18px; height: 18px; flex: none; }
.lc-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px var(--lc-k70); }
.lc-btn:active { transform: translateY(0); }
.lc-btn-mint { background: var(--accent); }
.lc-btn-mint:hover { background: var(--lc-mint-hi); }
.lc-btn-amber { background: var(--lc-amber); }
.lc-btn-amber:hover { background: var(--lc-amber-hi); }
.btn,
.btn.btn-clean {
border-radius: 6px;
font-family: var(--lc-display);
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.btn-primary,
.btn-primary:hover {
border: 0;
background: var(--accent);
color: var(--lc-ink);
box-shadow: 0 6px 18px -8px var(--lc-k60);
}
.btn-primary:hover { background: var(--lc-mint-hi); transform: translateY(-2px); }
.btn-primary:active { transform: none; box-shadow: none; }
.btn-ghost {
border: 1px solid var(--lc-border-hi);
background: var(--lc-tile);
color: var(--lc-white);
box-shadow: none;
}
.btn-ghost:hover { background: var(--lc-raised); border-color: var(--lc-border-hi); color: var(--lc-white); transform: translateY(-2px); box-shadow: none; }
.btn-ghost:active { transform: none; box-shadow: none; }
.btn-lg { min-height: 50px; padding: 0 30px; font-size: 15px; }
.section { padding: clamp(48px, 6vw, 88px) 0; }
.lc-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin: 0 0 22px;
}
.lc-kicker {
margin: 0 0 8px;
font-size: 12px;
font-weight: 700;
font-style: italic;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--lc-subtle);
}
.section-head h2.section-title.lc-h2,
.lc-h2 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin: 0;
font-family: var(--lc-display);
font-size: clamp(26px, 2.6vw, 36px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -.005em;
text-transform: uppercase;
color: var(--lc-white);
text-shadow: none;
}
.lc-h2-ic { width: 28px; height: 28px; color: var(--accent); flex: none; }
.lc-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 8px;
background: var(--lc-green-bg);
color: var(--lc-green);
font-family: var(--lc-body);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.lc-badge i {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
animation: lc-pulse 2s infinite;
}
.lc-head-link {
display: inline-flex;
align-items: center;
gap: 4px;
flex: none;
padding: 6px 10px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: var(--lc-muted);
transition: background-color .15s, color .15s;
}
.lc-head-link svg { width: 12px; height: 12px; transition: transform .2s ease-in-out; }
.lc-head-link:hover { background: var(--lc-hover); color: var(--lc-white); }
.lc-head-link:hover svg { transform: translateX(3px); }
@media (max-width: 640px) {
.lc-head { flex-direction: column; align-items: flex-start; }
}
.cape-card,
.cape-card.card {
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
@media (hover: hover) {
.cape-card:hover { transform: none; box-shadow: none; }
}
.cape-card { overflow: visible; }
.cape-card-stage {
overflow: hidden;
border: 0;
border-radius: 10px;
background-color: var(--lc-tile);
background-image:
radial-gradient(90% 75% at 50% 45%,
color-mix(in srgb, var(--cape-tint, var(--lc-tile)) 42%, var(--lc-tile)),
color-mix(in srgb, var(--cape-tint, var(--lc-tile)) 10%, var(--lc-tile)) 80%);
box-shadow: inset 0 0 0 1px var(--lc-w5);
}
.cape-card-art { background: none; transition: transform .25s ease-in-out; }
@media (hover: hover) {
.cape-card:hover .cape-card-art { transform: scale(1.05); }
}
.cape-card:has(:focus-visible) .cape-card-stage { box-shadow: inset 0 0 0 2px var(--accent); }
.cape-card-top { margin: 0; padding: 0; background: none; border: 0; }
.cape-card-body { padding: 14px 2px 4px; background: none; border: 0; }
.cape-card-foot { padding-top: 6px; }
.cape-card-name {
font-family: var(--lc-body);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: var(--lc-text);
}
.cape-card-price {
font-family: var(--lc-body);
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
color: var(--lc-muted);
}
.cape-card-cart.btn {
width: 42px;
height: 42px;
min-height: 42px;
padding: 0;
border: 1px solid var(--lc-border-hi);
border-radius: 8px;
background: var(--lc-tile);
color: var(--lc-white);
box-shadow: none;
}
.cape-card-cart.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--lc-ink); transform: none; }
.cape-card-chips .cape-card-stock {
height: 24px;
border: 0;
border-radius: 8px;
box-shadow: none;
font-family: var(--lc-body);
font-size: 12px;
font-weight: 600;
}
.cape-card-blurb { color: var(--lc-muted); }
.shop-grid { gap: 28px 20px; }
.shop-more { margin-top: 34px; }
.tryon-card.card {
border: 1px solid var(--lc-border);
border-radius: 14px;
background: var(--lc-panel);
box-shadow: none;
overflow: hidden;
}
#creators .creators-grid { max-width: none; gap: 20px; }
.creator {
border: 1px solid var(--lc-border);
border-radius: 14px;
background: var(--lc-panel);
padding: 26px 18px 22px;
transition: transform .25s ease-in-out, border-color .2s, background-color .2s;
}
.creator:hover { transform: translateY(-4px); background: var(--lc-tile); border-color: var(--lc-border-hi); }
.creator-avatar { border: 0; box-shadow: 0 0 0 4px var(--lc-tile), 0 12px 24px -10px var(--lc-k80); }
.creator-name { font-family: var(--lc-display); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.creator-subs { border: 0; border-radius: 8px; background: var(--lc-green-bg); color: var(--lc-green); box-shadow: none; font-family: var(--lc-body); font-weight: 600; }
.trust-stat { border: 1px solid var(--lc-border); border-radius: 14px; background: var(--lc-panel); box-shadow: none; }
.trust-stat-figure { font-family: var(--lc-display); font-weight: 900; }
.acc-item {
border: 1px solid var(--lc-border);
border-radius: 14px;
background: var(--lc-panel);
box-shadow: none;
transition: background-color .2s, border-color .2s;
}
.acc-item + .acc-item { margin-top: 10px; }
.acc-item:hover { border-color: var(--lc-border-hi); }
.acc-item.open { background: var(--lc-tile); }
.acc-head { font-family: var(--lc-body); font-size: 17px; font-weight: 700; padding: 20px 22px; }
.acc-ic { color: var(--accent); }
.acc-body-inner { color: var(--lc-muted); }
.lc-cta { position: relative; z-index: 2; margin-top: 40px; margin-bottom: -96px; }
.lc-cta-box {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 32px;
padding: 34px 48px;
border-radius: 22px;
background:
linear-gradient(115deg, color-mix(in srgb, var(--accent) 80%, transparent), color-mix(in srgb, var(--mint-700) 92%, transparent)),
url('../assets/scene/hills-far.png') 0 100% / 1440px 210px repeat-x,
var(--mint-600);
image-rendering: pixelated;
box-shadow: 0 30px 60px -30px var(--lc-k80);
}
.lc-cta-mark {
flex: none;
width: 96px;
height: 96px;
border-radius: 22px;
box-shadow: 0 10px 24px -8px var(--lc-k50);
image-rendering: auto;
}
.lc-cta-text {
flex: 1 1 auto;
max-width: 560px;
margin: 0;
font-size: 19px;
font-weight: 300;
line-height: 1.45;
color: var(--lc-white);
text-shadow: 0 1px 2px var(--lc-k25);
}
.lc-cta-text b { font-weight: 600; }
.lc-cta-btn {
flex: none;
display: inline-flex;
align-items: center;
gap: 12px;
margin-left: auto;
padding: 16px 40px;
border: 2px solid var(--lc-w55);
border-radius: 999px;
background: var(--lc-w12);
color: var(--lc-white);
font-family: var(--lc-display);
font-size: 26px;
font-weight: 900;
text-transform: uppercase;
text-shadow: 0 2px 0 var(--lc-k20);
transition: background-color .2s, transform .2s;
}
.lc-cta-btn svg { width: 24px; height: 24px; }
.lc-cta-btn:hover { background: var(--lc-w22); transform: scale(1.03); }
@media (max-width: 900px) {
.lc-cta-box { flex-direction: column; text-align: center; padding: 30px 24px; }
.lc-cta-btn { margin: 0; font-size: 20px; padding: 14px 30px; }
}
.footer.lc-footer {
margin-top: 0;
padding: 150px 0 34px;
background: var(--lc-deep);
border-top: 0;
}
.footer.lc-footer::before { display: none; }
.lc-foot-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
padding-bottom: 34px;
border-bottom: 1px solid var(--lc-border);
}
.lc-foot-h {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--lc-muted);
}
.lc-foot-h svg { width: 16px; height: 16px; color: var(--accent); }
.lc-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lc-foot-col a { font-size: 14.5px; color: var(--lc-text); transition: color .2s, opacity .2s; }
.lc-foot-col a:hover { color: var(--accent); }
.lc-foot-mid {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
padding: 30px 0;
border-bottom: 1px solid var(--lc-border);
}
.lc-foot-brand .footer-mark { width: 54px; height: 54px; border-radius: 13px; }
.lc-foot-about { margin: 0; max-width: 560px; font-size: 14.5px; line-height: 1.6; color: var(--lc-muted); }
.lc-footer .footer-pay { margin-top: 0; justify-content: flex-end; }
.lc-footer .footer-pay li { border: 0; border-radius: 6px; box-shadow: none; }
.lc-foot-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 24px;
font-size: 13px;
color: var(--lc-subtle);
}
.lc-foot-legal { display: flex; flex-direction: column; gap: 4px; }
.lc-foot-status {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--lc-green) 25%, transparent);
background: var(--lc-green-bg);
color: var(--lc-green);
font-size: 13px;
}
.lc-foot-status b { font-weight: 700; }
.lc-foot-status .lc-live-dot { width: 9px; height: 9px; }
@media (max-width: 900px) {
.lc-foot-cols { grid-template-columns: 1fr 1fr; }
.lc-foot-mid { grid-template-columns: 1fr; }
.lc-footer .footer-pay { justify-content: flex-start; }
.lc-foot-bottom { flex-direction: column; align-items: flex-start; }
}
.currency-trigger {
border: 1px solid var(--lc-border-hi);
border-radius: 10px;
background: var(--lc-tile);
box-shadow: none;
font-family: var(--lc-body);
font-weight: 700;
}
.currency-trigger:hover { transform: none; box-shadow: none; background: var(--lc-raised); }
.currency-menu {
border: 1px solid var(--lc-border);
border-radius: 14px;
background: var(--lc-panel);
box-shadow: 0 20px 50px -12px var(--lc-k70);
}
.currency-option { border-radius: 8px; font-family: var(--lc-body); }
.cart-toast { border: 1px solid var(--lc-border); border-radius: 12px; background: var(--lc-panel); box-shadow: 0 20px 50px -12px var(--lc-k70); }
.promo-bar { border-radius: 0; border: 0; box-shadow: none; }
.back-link { font-family: var(--lc-body); font-weight: 600; }
.card {
border: 1px solid var(--lc-border);
border-radius: 14px;
background: var(--lc-panel);
box-shadow: none;
}
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px var(--lc-k80); }
.eyebrow {
font-family: var(--lc-body);
font-style: italic;
font-weight: 700;
letter-spacing: .3em;
color: var(--lc-subtle);
}
@media (prefers-reduced-motion: reduce) {
.lc-live-dot, .lc-badge i { animation: none; }
.lc-title, .lc-subtitle, .lc-shop-label, .lc-burger i, .lc-panel, .lc-pane,
.lc-tile, .lc-tile-bg, .lc-tile-copy, .cape-card-art, .lc-btn { transition: none; }
.lc-shop:hover .lc-shine, .lc-btn:hover .lc-shine, .nav-mobile.open .lc-tile { animation: none; }
}
:root {
--lc-max: 1440px;
--lc-gutter: clamp(20px, 3vw, 40px);
--lc-section: clamp(56px, 5vw, 88px);
}
@media (min-width: 901px) {
:root { --lc-top-h: 76px; }
}
.container-wide,
.lc-footer > .container,
.lc-cta > .container {
max-width: calc(var(--lc-max) + 2 * var(--lc-gutter));
padding-left: var(--lc-gutter);
padding-right: var(--lc-gutter);
}
.lc-top { justify-content: center; }
.lc-top-in {
width: 100%;
max-width: calc(var(--lc-max) + 2 * var(--lc-gutter));
padding: 0 var(--lc-gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.nav-brand.lc-brand { min-width: 0; padding: 0; gap: 14px; height: 100%; }
.lc-mark { width: 40px; height: 40px; border-radius: 10px; }
.lc-title { font-size: 25px; letter-spacing: .1em; }
.lc-subtitle { left: 54px; top: calc(50% + 7px); font-size: 9px; letter-spacing: 4.6px; }
.lc-brand:hover .lc-title,
.lc-brand:focus-visible .lc-title { transform: translateY(-6px); }
.lc-top-right { align-items: center; gap: 6px; height: 100%; }
.lc-live {
height: 36px;
margin-right: 8px;
padding: 0 14px 0 12px;
border: 1px solid var(--lc-border);
border-radius: 999px;
background: var(--lc-panel);
font-size: 13px;
font-weight: 600;
color: var(--lc-muted);
}
.lc-live-dot { width: 8px; height: 8px; }
.lc-top-right > .nav-currency { margin: 0 2px; }
.lc-icon.nav-discord,
.lc-icon.nav-basket { width: 40px; height: 40px; }
.lc-icon.nav-discord svg { width: 20px; height: 20px; }
.lc-icon.nav-basket svg { width: 21px; height: 21px; }
.lc-shop {
height: 42px;
margin-left: 10px;
padding: 0 22px;
border-radius: 8px;
box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.lc-shop-label { font-size: 14.5px; letter-spacing: .12em; }
.nav.lc-header .nav-toggle.lc-menu {
height: 42px;
min-width: 0;
margin-left: 6px;
padding: 0 16px;
gap: 12px;
border: 1px solid var(--lc-border-hi);
border-radius: 8px;
background: var(--lc-tile);
}
.nav.lc-header .nav-toggle.lc-menu:hover { background: var(--lc-raised); }
.lc-burger { width: 18px; height: 14px; }
.lc-burger i { height: 2px; }
.lc-burger i:nth-child(2) { top: 6px; }
.lc-burger i:nth-child(3) { top: 12px; }
.lc-menu[aria-expanded="true"] .lc-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lc-menu[aria-expanded="true"] .lc-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.lc-menu-label { font-size: 14.5px; letter-spacing: .12em; }
.nav.lc-header .nav-links { gap: 2px; }
.nav.lc-header .nav-link { padding: 0 18px; font-size: 14px; letter-spacing: .07em; color: var(--lc-muted); }
.nav.lc-header .nav-link:hover,
.nav.lc-header .nav-link.is-active,
.lc-dd.is-open > .nav-link { color: var(--lc-white); opacity: 1; }
.nav.lc-header .nav-link.is-active::after { left: 18px; right: 18px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; }
.nav.lc-header .lc-dd-trigger.is-active::after { right: 36px; }
.lc-bar-mark { left: max(var(--lc-gutter), calc((100% - var(--lc-max)) / 2)); }
.lc-bar-basket { right: max(var(--lc-gutter), calc((100% - var(--lc-max)) / 2)); }
.section { padding: var(--lc-section) 0; }
.section.hero-section { padding-bottom: 0; }
.section + .section:not(.hero-section) { padding-top: 0; }
.lc-head { margin-bottom: 32px; align-items: flex-end; }
.lc-h2-ic { display: none; }
.lc-kicker { margin-bottom: 10px; font-size: 12px; letter-spacing: .26em; color: var(--accent); opacity: .85; }
.section-head h2.section-title.lc-h2,
.lc-h2 { font-size: clamp(28px, 2.8vw, 42px); gap: 14px; }
.lc-badge { padding: 4px 10px; font-size: 12px; }
.lc-head-link { padding: 8px 12px; margin-bottom: -4px; }
.shop-more { margin-top: 40px; }
.cape-card-body { position: relative; padding: 16px 56px 0 2px; }
.cape-card-name { font-size: 16.5px; line-height: 22px; }
.cape-card-foot { padding-top: 4px; }
.cape-card-price { font-size: 15px; color: var(--lc-white); }
.cape-card-price-row { min-height: 0; }
.cape-card-cart.btn {
position: absolute;
right: 0;
top: 50%;
margin-top: 8px;
transform: translateY(-50%);
width: 44px;
height: 44px;
min-height: 44px;
}
.cape-card-cart.btn:hover,
.cape-card-cart.btn:active { transform: translateY(-50%); }
.shop-grid { gap: 36px 24px; }
.tryon-card.card { max-width: none; width: 100%; }
#reviews .trust-stats { justify-content: flex-start; margin: 0 0 20px; }
.lc-faq {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(0, 1.9fr);
gap: clamp(32px, 5vw, 96px);
align-items: start;
}
.lc-faq-side { position: sticky; top: calc(var(--lc-bar-h) + 32px); }
.lc-faq-side .lc-head { margin-bottom: 16px; }
.lc-faq-lede { margin: 0 0 22px; max-width: 34ch; font-size: 16px; line-height: 1.6; color: var(--lc-muted); }
.lc-faq-list .acc-item:first-child { margin-top: 0; }
@media (max-width: 900px) {
.lc-faq { grid-template-columns: 1fr; }
.lc-faq-side { position: static; }
}
.lc-cta { margin-top: 0; }
.lc-cta-box {
gap: 28px;
padding: 36px 44px;
border-radius: 20px;
background:
radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--lc-mint-hi) 55%, transparent), transparent 60%),
linear-gradient(120deg, var(--mint-500), var(--mint-700));
}
.lc-cta-mark { width: 76px; height: 76px; border-radius: 18px; }
.lc-cta-text { font-size: 18px; }
.lc-cta-btn {
padding: 0 30px;
height: 52px;
border: 0;
border-radius: 10px;
background: var(--lc-white);
color: var(--lc-ink);
font-size: 15px;
letter-spacing: .1em;
text-shadow: none;
}
.lc-cta-btn svg { width: 19px; height: 19px; }
.lc-cta-btn:hover { background: var(--lc-white); transform: translateY(-2px); }
.footer.lc-footer { padding-top: 140px; }
.lc-foot-top {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
gap: 48px;
padding-bottom: 40px;
border-bottom: 1px solid var(--lc-border);
}
.lc-foot-brand { display: inline-flex; align-items: center; gap: 12px; }
.lc-foot-brand .footer-mark { width: 44px; height: 44px; border-radius: 11px; }
.lc-foot-word {
font-family: var(--lc-display);
font-size: 22px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--lc-white);
}
.lc-foot-about { margin: 16px 0 20px; max-width: 40ch; }
.lc-foot-discord {
display: inline-flex;
align-items: center;
gap: 10px;
height: 42px;
padding: 0 16px;
border-radius: 8px;
background: var(--discord-tint);
color: var(--lc-white);
font-size: 14px;
font-weight: 600;
transition: transform .2s;
}
.lc-foot-discord svg { width: 20px; height: 20px; color: var(--discord); }
.lc-foot-discord:hover { transform: translateY(-2px); }
.lc-foot-cols { grid-template-columns: repeat(3, 1fr); padding-bottom: 0; border-bottom: 0; }
.lc-foot-h { color: var(--lc-white); font-size: 12.5px; letter-spacing: .12em; margin-bottom: 16px; }
.lc-foot-col a { color: var(--lc-muted); }
.lc-foot-col a:hover { color: var(--lc-white); }
.lc-foot-pay { padding: 24px 0; border-bottom: 1px solid var(--lc-border); }
.lc-foot-pay .footer-pay { justify-content: flex-start; margin: 0; }
.lc-foot-bottom { padding-top: 22px; }
.lc-foot-legal { flex-direction: row; flex-wrap: wrap; gap: 6px 20px; }
@media (max-width: 900px) {
.lc-foot-top { grid-template-columns: 1fr; }
.lc-foot-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1280px) {
.lc-live { display: none; }
}
@media (max-width: 900px) {
.lc-top-in { gap: 8px; }
.nav.lc-header .nav-toggle.lc-menu { padding: 0 12px; }
.lc-shop { height: 38px; padding: 0 14px; margin-left: 4px; }
.lc-shop-label { font-size: 13px; }
}
.tryon-swatches { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.tryon-swatch {
padding: 4px;
border: 1px solid var(--lc-border-hi);
border-radius: 8px;
background: var(--lc-tile);
box-shadow: none;
}
.tryon-swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@media (hover: hover) and (pointer: fine) {
.tryon-swatch:hover { transform: translateY(-2px); box-shadow: none; background: var(--lc-raised); }
}
.tryon-swatch:active { transform: none; box-shadow: none; }
.review-cape, .review-date, .review-source, .reviews-summary-text strong { font-family: var(--lc-body); }
.review-meta { border-top: 1px solid var(--lc-border); }
@media (max-width: 520px) {
.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.cape-card-body { padding: 12px 0 0 2px; }
.cape-card-name { font-size: 14px; line-height: 19px; }
.cape-card-price { font-size: 13.5px; }
.cape-card-cart.btn { position: static; transform: none; margin: 10px 0 0; width: 100%; height: 38px; min-height: 38px; }
.cape-card-cart.btn:hover, .cape-card-cart.btn:active { transform: none; }
.cape-card-price-row { display: block; }
}
.lc-pane-side > .lc-eyebrow:first-child { margin-top: 6px; }
:root { --lc-top-h: 0px; --lc-bar-h: 68px; }
@media (max-width: 900px) { :root { --lc-top-h: 0px; --lc-bar-h: 60px; } }
.nav.lc-header.lc-one { top: 0; }
.nav.lc-header.lc-one .nav-inner.lc-bar {
display: block;
height: var(--lc-bar-h);
padding: 0;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: 1px solid transparent;
transition: background-color .3s ease, border-color .3s ease;
}
.nav.lc-header.lc-one.is-stuck .nav-inner.lc-bar {
background: var(--lc-glass-solid);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
border-bottom-color: var(--lc-border);
}
body:not(:has(.hero-section)) .nav.lc-header.lc-one .nav-inner.lc-bar {
background: var(--lc-glass-solid);
border-bottom-color: var(--lc-border);
}
.lc-bar-in {
height: 100%;
max-width: calc(var(--lc-max) + 2 * var(--lc-gutter));
margin: 0 auto;
padding: 0 var(--lc-gutter);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
.lc-one .nav-brand.lc-brand { justify-self: start; height: auto; gap: 10px; }
.lc-one .lc-mark { width: 32px; height: 32px; border-radius: 8px; }
.lc-one .lc-title { font-size: 18px; font-weight: 800; letter-spacing: .08em; }
.lc-one .lc-brand:hover .lc-title { transform: none; opacity: .85; }
.nav.lc-header.lc-one .nav-links { justify-self: center; gap: 4px; }
.nav.lc-header.lc-one .nav-link {
height: 38px;
padding: 0 14px;
border-radius: 8px;
font-family: var(--lc-body);
font-size: 14.5px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--lc-muted);
transition: color .15s, background-color .15s;
}
.nav.lc-header.lc-one .nav-link:hover,
.lc-one .lc-dd.is-open > .nav-link { color: var(--lc-white); background: var(--lc-hover); }
.nav.lc-header.lc-one .nav-link.is-active { color: var(--lc-white); }
.nav.lc-header.lc-one .nav-link.is-active::after { display: none; }
.lc-one .lc-chev { width: 10px; height: 10px; opacity: .7; }
.lc-one .lc-top-right { justify-self: end; height: auto; gap: 8px; }
.lc-one .lc-icon.nav-basket { width: 38px; height: 38px; border-radius: 8px; }
.lc-one .lc-icon.nav-basket svg { width: 19px; height: 19px; }
.lc-one .currency-trigger { height: 38px; }
.lc-one .lc-shop {
height: 38px;
margin-left: 4px;
padding: 0 16px;
border-radius: 8px;
box-shadow: none;
}
.lc-one .lc-shop-label {
font-family: var(--lc-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.lc-one .lc-shop:hover .lc-shop-label { transform: none; }
.nav.lc-header.lc-one .nav-toggle.lc-menu { display: none; }
.lc-one .lc-menu-label { display: none; }
.lc-one .lc-panel { top: calc(100% + 4px); }
@media (max-width: 1100px) {
.nav.lc-header.lc-one .nav-link { padding: 0 10px; }
}
@media (max-width: 900px) {
.lc-bar-in { grid-template-columns: 1fr auto; gap: 8px; }
.nav.lc-header.lc-one .nav-links,
.lc-one .lc-top-right > .nav-currency { display: none; }
.nav.lc-header.lc-one .nav-toggle.lc-menu {
display: flex;
width: 38px;
height: 38px;
margin: 0;
padding: 0;
justify-content: center;
}
.lc-one .lc-shop { display: none; }
.nav-mobile.lc-menu-wall { top: var(--lc-bar-h); }
}
main h1, main h2, main h3,
.section-head h2.section-title.lc-h2, .lc-h2 {
text-transform: none !important;
letter-spacing: -.02em !important;
}
.section-head h2.section-title.lc-h2,
.lc-h2 { font-size: clamp(26px, 2.3vw, 34px); font-weight: 750; }
.lc-kicker {
margin-bottom: 8px;
font-size: 12.5px;
font-weight: 600;
font-style: normal;
letter-spacing: .02em;
text-transform: none;
color: var(--accent);
opacity: 1;
}
.lc-badge { font-size: 12px; }
.creator-name { text-transform: none; letter-spacing: 0; font-weight: 700; font-family: var(--lc-body); }
.acc-head { font-size: 16px; font-weight: 600; }
.btn, .btn.btn-clean, .btn-lg, .lc-btn, .lc-cta-btn {
font-family: var(--lc-body);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.lc-btn { min-height: 46px; padding: 0 24px; font-size: 15px; border-radius: 10px; box-shadow: none; }
.lc-btn:hover { box-shadow: none; }
.btn { border-radius: 10px; }
.lc-cta-btn { font-size: 15px; }
.hero-section { --cape-t: 13px; }
@media (min-width: 1600px) { .hero-section { --cape-t: 15px; } }
.lc-hero-inner { padding: 48px var(--gutter) 56px; }
.lc-hero-bg { bottom: 0; }
.lc-hero-glow { opacity: .7; }
.hero-feature-name {
font-weight: 800;
font-size: clamp(34px, 3.6vw, 60px);
letter-spacing: -.03em;
text-transform: none;
text-shadow: none;
min-height: calc(20px + 10px + 1.05em);
line-height: 1.05;
margin-bottom: 12px;
}
.hero-name-pre {
margin-bottom: 10px;
font-size: 13px;
font-style: normal;
font-weight: 600;
letter-spacing: .02em;
text-transform: none;
text-shadow: none;
color: var(--lc-muted);
}
.hero-feature-price { font-size: 22px; font-weight: 700; text-shadow: none; }
.hero-subcopy { margin: 8px 0 26px; font-size: 16.5px; font-weight: 400; letter-spacing: 0; color: var(--lc-muted); text-shadow: none; }
.hero-actions { gap: 12px; }
.lc-btn-amber { background: var(--lc-tile); color: var(--lc-white); box-shadow: inset 0 0 0 1px var(--lc-border-hi); }
.lc-btn-amber:hover { background: var(--lc-raised); }
.lc-perks {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-bottom: 8px;
border: 1px solid var(--lc-border);
border-radius: 14px;
background: var(--lc-glass-solid);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
overflow: hidden;
}
.lc-perk {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
color: var(--lc-text);
transition: background-color .2s;
}
.lc-perk + .lc-perk { border-left: 1px solid var(--lc-border); }
.lc-perk:hover { background: var(--lc-hover); }
.lc-perk-ic {
flex: none;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
}
.lc-perk-ic svg { width: 20px; height: 20px; }
.lc-perk-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-perk-txt b { font-size: 15px; font-weight: 600; }
.lc-perk-txt small { font-size: 13px; color: var(--lc-muted); }
@media (max-width: 1100px) {
.lc-perks { grid-template-columns: repeat(2, 1fr); }
.lc-perk:nth-child(3) { border-left: 0; }
.lc-perk:nth-child(n+3) { border-top: 1px solid var(--lc-border); }
}
@media (max-width: 520px) {
.lc-perks { grid-template-columns: 1fr; }
.lc-perk + .lc-perk { border-left: 0; border-top: 1px solid var(--lc-border); }
.lc-perk { padding: 14px 16px; }
}
.hero-section + #capes { padding-top: clamp(48px, 5vw, 72px); }
.lc-eyebrow { font-size: 12.5px; font-weight: 600; font-style: normal; letter-spacing: .02em; text-transform: none; color: var(--lc-subtle); }
.hero-name-pre { display: inline; flex-basis: auto; margin: 0; font: inherit; color: var(--lc-white); letter-spacing: inherit; min-height: 0; }
.hero-feature-name { min-height: 1.05em; }
main :is(a, button, summary, label) { text-transform: none !important; letter-spacing: normal !important; }
@media (max-width: 900px) {
.lc-one .lc-panel { display: none; }
}
.hero-section { --cape-t: 20px; }
@media (min-width: 1600px) { .hero-section { --cape-t: 23px; } }
@media (min-width: 2200px) { .hero-section { --cape-t: 27px; } }
@media (max-width: 900px) { .hero-section { --cape-t: 16px; } }
@media (max-width: 640px) { .hero-section { --cape-t: 13px; } }
.lc-hero-glow { width: calc(36 * var(--cape-t)); height: calc(28 * var(--cape-t)); }
.hero-section {
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
}
.lc-hero-inner { flex: 1 0 auto; justify-content: center; padding-top: 32px; padding-bottom: 72px; }
.lc-hero-grade {
background:
linear-gradient(180deg, var(--lc-hero-grade-1) 0%, var(--lc-hero-grade-2) 38%, var(--lc-hero-grade-3) 80%, var(--lc-hero-fade) 100%),
radial-gradient(120% 80% at 50% 30%, transparent 40%, var(--lc-hero-vignette) 100%);
}
.lc-hs-ground { bottom: 0; filter: brightness(.7); }
.lc-pane[data-pane="capes"] { grid-template-columns: auto; }
.lc-pane[data-pane="capes"] { padding: 28px; }
.lc-pane[data-pane="capes"] .lc-pane-main { width: 820px; }
.lc-pane[data-pane="capes"] .lc-pane-head { margin-bottom: 18px; }
.lc-pane-capes { gap: 8px 10px; }
.lc-pane-cape { gap: 16px; padding: 12px; border-radius: 10px; }
.lc-pane-thumb {
width: 48px;
height: 76.8px;
border-radius: 5px;
background-size: 307.2px 153.6px;
background-position: -4.8px -4.8px;
}
.lc-pane-cape-txt b { font-size: 16.5px; }
.lc-pane-cape-txt small { margin-top: 4px; font-size: 14px; }
@media (max-width: 1100px) {
.lc-pane[data-pane="capes"] .lc-pane-main { width: 600px; }
}
.lc-hs-ground { bottom: 0; height: 180px; filter: brightness(.75); }
.lc-hs-near { bottom: 120px; height: 288px; }
.lc-hs-far { bottom: 168px; height: 420px; }
#reviews .trust-stats { justify-content: center; }
#tryon .lc-head { justify-content: center; text-align: center; }
#tryon .lc-h2 { justify-content: center; }
#creators .lc-head { position: relative; justify-content: center; text-align: center; }
#creators .lc-h2 { justify-content: center; }
#creators .lc-head-link { position: absolute; right: 0; bottom: 0; }
@media (max-width: 640px) {
#creators .lc-head { align-items: center; }
#creators .lc-head-link { position: static; }
}
#reviews .lc-head { justify-content: center; text-align: center; }
#reviews .lc-h2 { justify-content: center; }
.footer.lc-footer.lc-foot-simple { position: relative; margin-top: 96px; padding: 26px 0 22px; background: var(--lc-deep); }
.lc-foot-simple::before {
content: '';
display: block;
position: absolute;
left: 0; right: 0;
top: -36px;
height: 36px;
background: url('../assets/scene/footer-edge.png') 0 100% / 1440px 36px repeat-x;
image-rendering: pixelated;
}
.lc-fs-main { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--lc-border); }
.lc-fs-brand { display: inline-flex; align-items: center; gap: 12px; }
.lc-fs-brand .footer-mark { width: 40px; height: 40px; border-radius: 10px; }
.lc-fs-word { font-family: var(--lc-display); font-size: 17px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lc-white); }
.lc-fs-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.lc-fs-nav a { padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--lc-muted); transition: color .15s, background-color .15s; }
.lc-fs-nav a:hover { color: var(--lc-white); background: var(--lc-hover); }
.footer-bottom.lc-fs-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding-top: 16px; }
.lc-fs-meta .footer-pay { margin: 0; justify-content: flex-start; }
.lc-fs-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--lc-subtle); }
@media (max-width: 900px) {
.lc-fs-main { flex-direction: column; align-items: flex-start; }
.lc-fs-nav { justify-content: flex-start; margin-left: -10px; }
.footer-bottom.lc-fs-meta { flex-direction: column; align-items: flex-start; }
}
.cape-page-more .cape-card-stage { --texel: 5.4cqw; }
@supports (width: round(down, 1cqw, 1px)) {
.cape-page-more .cape-card-stage { --texel: clamp(8px, round(down, 5.4cqw, 1px), 20px); }
}
.cape-page-more .cape-card-art { padding: 20px 0 8px; }
.cape-card-body { padding-top: 22px; }
@media (max-width: 520px) { .cape-card-body { padding-top: 16px; } }
.cape-page-detail,
.cape-page-about { display: none !important; }
.shop-page-head + .section { padding-top: 36px; }
.hero-feature-money { position: relative; justify-content: center; }
.hero-feature-price { font-size: 28px; text-align: center; }
.hero-feature-stock { position: absolute; left: calc(100% + 12px); top: 50%; translate: 0 -50%; white-space: nowrap; }
.hero-feature-money:has(.hero-feature-stock:not([hidden])) { margin-right: 0; }
@media (max-width: 640px) {
.hero-feature-price { font-size: 24px; }
.hero-feature-stock { position: static; translate: none; }
.hero-feature-money { flex-direction: column; gap: 6px; }
}
.lc-one .currency-trigger {
height: 38px;
padding: 0 10px;
gap: 8px;
border: 0;
border-radius: 8px;
background: transparent;
box-shadow: none;
color: var(--lc-muted);
font-family: var(--lc-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
}
.lc-one .currency-trigger:hover,
.lc-one .is-open .currency-trigger { color: var(--lc-white); background: var(--lc-hover); transform: none; box-shadow: none; }
.lc-one .locale-flag { width: 20px; height: 14px; border-radius: 3px; box-shadow: none; }
.lc-one .locale-divider { display: none; }
.lc-one .currency-chevron { width: 10px; height: 10px; opacity: .7; }
.lc-btn-mint, .btn-primary, .lc-shop, .lc-shop-label, .lc-pane-cape-cta,
.tryon-card .btn-primary, .cape-card-cart.btn:hover, .lc-tile-pill {
color: var(--lc-on-mint) !important;
}
.lc-btn-mint, .btn-primary, .lc-one .lc-shop-label {
font-weight: 700 !important;
letter-spacing: .005em !important;
-webkit-font-smoothing: antialiased;
}
.cape-card-body { justify-content: flex-start; }
.cape-card-foot { margin-top: 0 !important; }
.tryon-stage { border-right: 1px solid var(--lc-border); }
@media (max-width: 860px) {
.tryon-stage { border-right: 0; border-bottom: 1px solid var(--lc-border); }
}
.reviews-page .section-head { max-width: none; text-align: center !important; }
.reviews-page .section-head .eyebrow { display: none; }
.reviews-page .section-head h1 { text-transform: none !important; font-weight: 800 !important; letter-spacing: -.02em; }
.reviews-page .trust-stats { justify-content: center !important; }
.cape-card,
.cape-card.card {
padding: 10px;
border: 1px solid var(--lc-border);
border-radius: 16px;
background: var(--lc-panel);
transition: border-color .2s, transform .25s var(--e-out), box-shadow .25s;
}
@media (hover: hover) {
.cape-card:hover { border-color: var(--lc-border-hi); transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .8); }
}
.cape-card-stage { border-radius: 10px; }
.cape-card-body { padding: 16px 64px 8px 6px; }
.cape-card-cart.btn {
right: 4px;
margin-top: -2px;
border: 0;
background: var(--accent);
color: var(--lc-on-mint);
}
.cape-card-cart.btn:hover { background: var(--lc-mint-hi); color: var(--lc-on-mint); }
@media (max-width: 520px) {
.cape-card, .cape-card.card { padding: 8px; border-radius: 14px; }
.cape-card-body { padding: 12px 4px 4px; }
}
.cape-card-3d::after { content: none !important; }
.lc-stage-shadow { display: none !important; }
.hero-section { --hero-bob: calc(1 * var(--cape-t)); }
.hero-stage-col { height: calc(16 * var(--cape-t) + var(--hero-bob)); }
.hero-rig, .hero-stage-fallback { top: var(--hero-bob); }
.lc-hero-inner { padding-top: 40px; padding-bottom: calc(40px + var(--hero-bob)); }
.container-wide .shop-grid,
.shop-grid { gap: 16px; }
.cape-card,
.cape-card.card { padding: 0; overflow: hidden; border-radius: 14px; }
.cape-card-stage { border-radius: 0; box-shadow: none; }
.cape-card-body { position: static; padding: 16px 18px 18px; }
.cape-card-name { font-size: 17px; font-weight: 650; line-height: 22px; }
.cape-card-foot { padding-top: 10px; }
.cape-card-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; }
.cape-card-price { font-size: 21px; font-weight: 700; line-height: 1; color: var(--lc-white); }
.cape-card-cart.btn,
.cape-card-cart.btn:hover,
.cape-card-cart.btn:active {
position: static;
transform: none;
margin: 0;
flex: none;
width: 46px;
height: 46px;
min-height: 46px;
border-radius: 12px;
}
@media (hover: hover) {
.cape-card-cart.btn:hover { transform: translateY(-1px); }
}
@media (max-width: 520px) {
.shop-grid { gap: 12px; }
.cape-card-body { padding: 12px 12px 12px; }
.cape-card-name { font-size: 15px; line-height: 20px; }
.cape-card-price { font-size: 17px; }
.cape-card-price-row { display: block; min-height: 0; }
.cape-card-cart.btn, .cape-card-cart.btn:hover { width: 100%; height: 38px; min-height: 38px; margin-top: 10px; }
}
@media (max-width: 640px) { .shop-page-head + .section { padding-top: 24px !important; } }
.lc-fs-meta .footer-pay :is(.coin-eth, .coin-usdt, .coin-ltc) { display: none; }
.partners-page .section-head { max-width: none; text-align: center; margin-left: 0; margin-right: 0; }
.partners-page .section-head h1 { text-transform: none !important; font-weight: 800 !important; letter-spacing: -.02em; }
.partners-page { min-height: 60vh; }
.eyebrow, .state-head .eyebrow, .cart-section .back-link, .back-link,
.cape-page-facts dt, .success-steps-label, .lc-eyebrow {
font-style: normal !important;
letter-spacing: .01em !important;
text-transform: none !important;
}
.eyebrow, .state-head .eyebrow { font-size: 13px !important; font-weight: 600 !important; color: var(--accent) !important; }
.back-link, .cart-section .back-link { font-size: 14px !important; font-weight: 500 !important; color: var(--lc-muted) !important; }
.back-link:hover { color: var(--lc-white) !important; }
.summary-list dt, .code-index { font-style: normal !important; letter-spacing: .01em !important; font-size: 12.5px !important; font-weight: 600 !important; }
.codes-block h2, .redeem-block h2 { font-weight: 750 !important; }
.nav.lc-header.lc-one:has(.lc-menu[aria-expanded="true"]) .lc-bar { visibility: visible; }
.nav.lc-header.lc-one:has(.lc-menu[aria-expanded="true"]) ~ .lc-menu-wall,
.lc-one ~ .nav-mobile.lc-menu-wall { top: var(--lc-bar-h); }
.lc-one ~ .nav-mobile.lc-menu-wall { background: var(--lc-deep); }
.lc-tile-title { font-family: var(--lc-body); font-weight: 750; text-transform: none; letter-spacing: -.02em; }
.lc-tile-sub { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .85; }
.nav-mobile .lc-tile { text-transform: none; }
.lc-tile-pill { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--lc-on-mint); background: var(--accent); }
.nav-mobile .lc-menu-foot a { font-family: var(--lc-body); font-weight: 600; text-transform: none; }
@media (max-width: 900px) {
.lc-tiles { min-height: 0; grid-auto-rows: 140px; gap: 1px; }
.lc-tile-title { font-size: 24px; }
.lc-tile-sub { font-size: 13px; }
.lc-menu-foot { display: grid; }
}
@media (max-width: 640px) {
.lc-head { align-items: flex-start; }
#tryon .lc-head, #reviews .lc-head, #creators .lc-head { align-items: center; }
}
.lc-fs-meta .footer-pay { width: 100%; flex-wrap: wrap; }
@media (min-width: 901px) { .lc-fs-meta .footer-pay { width: auto; } }
@media (max-width: 520px) {
.cart-like-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
.lc-one .promo { height: auto; margin: 0; max-width: none; width: 100%; }
.lc-one .promo-bar {
min-height: 38px;
padding: 6px 46px;
border: 0;
border-radius: 0;
box-shadow: none;
background-image: none;
background-color: var(--accent);
color: var(--lc-on-mint);
}
.lc-one .promo-text { font-family: var(--lc-body); font-size: 14px; font-weight: 700; color: var(--lc-on-mint); }
.lc-one .promo-close { color: var(--lc-on-mint); top: calc(50% - 19px); height: 38px; }
.lc-one .promo-timer { height: 24px; background: var(--lc-on-mint); color: var(--accent); }
html.has-promo .hero-section { margin-top: calc(-1 * var(--lc-bar-h)); }
html.has-promo .lc-one ~ .nav-mobile.lc-menu-wall { top: calc(var(--lc-bar-h) + 38px); }
html.has-promo .nav.lc-header.lc-one:has(.lc-menu[aria-expanded="true"]) ~ .lc-menu-wall { top: calc(var(--lc-bar-h) + 38px); }
@media (max-width: 900px) {
.lc-tiles { grid-auto-rows: clamp(88px, calc((100svh - var(--lc-bar-h) - 290px) / 4), 140px); }
html.has-promo .lc-tiles { grid-auto-rows: clamp(84px, calc((100svh - var(--lc-bar-h) - 330px) / 4), 140px); }
}
.nav-mobile.lc-menu-wall:not(.open) { display: none; }
.nav-mobile.lc-menu-wall.open { animation: lc-wall-in .35s ease-out; }
@keyframes lc-wall-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nav-mobile.lc-menu-wall.open { animation: none; } }
.bk-menu {
position: fixed; z-index: 1300; min-width: 232px; padding: 6px;
background: var(--lc-panel); border: 1px solid var(--lc-border); border-radius: 12px;
box-shadow: 0 18px 40px -12px var(--lc-k70);
opacity: 0; transform: translateY(-4px);
transition: opacity .16s ease, transform .16s ease;
}
.bk-menu[hidden] { display: none; }
.bk-menu.is-open { opacity: 1; transform: none; }
.bk-menu-item {
display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px;
border: 0; border-radius: 8px; background: none; cursor: pointer;
font-family: var(--lc-body); font-size: 14.5px; font-weight: 600; color: var(--lc-text); text-align: left;
transition: background-color .15s ease, color .15s ease;
}
.bk-menu-item svg { flex: 0 0 auto; color: var(--lc-muted); }
.bk-menu-item:hover, .bk-menu-item:focus-visible { background: var(--lc-hover); color: var(--lc-white); }
.bk-menu-item:hover svg { color: var(--accent); }
.bk-art {
flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px;
background:
radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cape-tint, var(--accent)) 38%, transparent) 0%, transparent 68%),
var(--lc-tile);
border: 1px solid color-mix(in srgb, var(--cape-tint, var(--accent)) 26%, var(--lc-border));
}
.bk-art canvas { width: 24px; height: 38px; image-rendering: pixelated; }
.bk-pop { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 16px; }
.bk-pop[hidden] { display: none; }
.bk-pop-backdrop { position: absolute; inset: 0; background: var(--lc-k50); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s ease; }
.bk-pop.is-open .bk-pop-backdrop { opacity: 1; }
.bk-pop-panel {
position: relative; display: flex; flex-direction: column;
width: min(540px, 100%); max-height: min(720px, calc(100dvh - 32px));
background: var(--lc-panel); border: 1px solid var(--lc-border); border-radius: 16px;
box-shadow: 0 30px 70px -20px var(--lc-k80);
opacity: 0; transform: translateY(10px) scale(.985);
transition: opacity .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}
.bk-pop.is-open .bk-pop-panel { opacity: 1; transform: none; }
.bk-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 14px 22px; border-bottom: 1px solid var(--lc-border); }
.bk-pop-title { margin: 0; font-family: var(--lc-body); font-size: 19px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--lc-white); }
.bk-pop-count { font-weight: 500; color: var(--lc-muted); }
.bk-pop-close {
display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px;
background: none; color: var(--lc-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.bk-pop-close:hover { background: var(--lc-hover); color: var(--lc-white); }
.bk-pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 22px; }
.bk-lines { list-style: none; margin: 0; padding: 0; }
.bk-line { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.bk-line + .bk-line { border-top: 1px solid var(--lc-border); }
.bk-line-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.bk-line-name { font-family: var(--font-clean); font-size: 15.5px; font-weight: 650; color: var(--lc-white); overflow-wrap: anywhere; }
.bk-line-name:hover { color: var(--accent); }
.bk-qty { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--lc-border-hi); border-radius: 999px; }
.bk-qty button {
display: grid; place-items: center; width: 30px; height: 100%; border: 0; border-radius: 999px;
background: none; color: var(--lc-muted); cursor: pointer;
}
.bk-qty button:hover:not(:disabled) { color: var(--accent); background: var(--lc-hover); }
.bk-qty button:disabled { color: var(--lc-faint); cursor: default; }
.bk-qty span { min-width: 22px; text-align: center; font-family: var(--lc-body); font-size: 13.5px; font-weight: 700; color: var(--lc-white); font-variant-numeric: tabular-nums; }
.bk-line-end { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bk-line-price { font-family: var(--lc-body); font-size: 16px; font-weight: 800; color: var(--lc-white); font-variant-numeric: tabular-nums; }
.bk-line-remove {
min-height: 28px; padding: 0 2px; border: 0; background: none; cursor: pointer;
font-family: var(--lc-body); font-size: 12.5px; font-weight: 600; color: var(--lc-subtle);
text-decoration: underline; text-underline-offset: 3px;
}
.bk-line-remove:hover { color: var(--lc-white); }
.bk-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px 20px; border-top: 1px solid var(--lc-border); }
.bk-pop-foot[hidden] { display: none; }
.bk-pop-total { display: flex; flex-direction: column; gap: 2px; margin: 0; font-family: var(--lc-body); font-size: 12.5px; color: var(--lc-muted); }
.bk-pop-sum { font-size: 22px; font-weight: 800; color: var(--lc-white); font-variant-numeric: tabular-nums; }
.bk-pop-go {
display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px;
border-radius: 10px; background: var(--accent); color: var(--lc-on-mint);
font-family: var(--lc-body); font-size: 14.5px; font-weight: 800; white-space: nowrap;
transition: filter .15s ease;
}
.bk-pop-go:hover { filter: brightness(1.08); }
.bk-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 0 24px; }
.bk-empty-ico { color: var(--accent); margin-bottom: 10px; }
.bk-empty-title { margin: 0; font-family: var(--lc-body); font-size: 16.5px; font-weight: 800; color: var(--lc-white); }
.bk-empty-sub { margin: 6px 0 20px; font-family: var(--lc-body); font-size: 13.5px; color: var(--lc-muted); }
.bk-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.bk-pick {
display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 6px 12px;
border: 1px solid var(--lc-border); border-radius: 12px; background: var(--lc-deep);
transition: border-color .15s ease, background-color .15s ease;
}
.bk-pick:hover { border-color: var(--lc-border-hi); background: var(--lc-tile); }
.bk-pick .bk-art { width: 100%; height: auto; aspect-ratio: 1; }
.bk-pick .bk-art canvas { width: 34%; height: auto; aspect-ratio: 10 / 16; }
.bk-pick-name { width: 100%; font-family: var(--font-clean); font-size: 13px; font-weight: 650; color: var(--lc-white); line-height: 1.25; overflow-wrap: anywhere; }
.bk-pick-price { font-family: var(--lc-body); font-size: 13px; font-weight: 700; color: var(--lc-muted); }
@media (max-width: 480px) {
.bk-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-pop-foot { flex-direction: column; align-items: stretch; }
.bk-pop-total { flex-direction: row; justify-content: space-between; align-items: baseline; }
}
@media (prefers-reduced-motion: reduce) {
.bk-menu, .bk-pop-backdrop, .bk-pop-panel { transition: none; }
}
.cart-toast-wrap { justify-content: flex-end; padding: 0 24px; }
.cart-toast { gap: 12px; min-height: 60px; padding: 8px 16px 8px 8px; max-width: min(420px, 100%); }
.cart-toast-art { flex: 0 0 auto; display: flex; }
.cart-toast-art .bk-art { width: 44px; height: 44px; border-radius: 9px; }
.cart-toast-art .bk-art canvas { width: 20px; height: 32px; }
.cart-toast-text { font-weight: 600; color: var(--lc-white); }
@media (max-width: 640px) {
.cart-toast-wrap { justify-content: center; padding: 0 var(--gutter); }
}
.nav-mobile.lc-menu-wall { background: var(--lc-page); }
.lc-mlist {
display: flex; flex-direction: column; gap: 8px;
width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 16px 8px;
}
.lc-mfeature {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 18px 18px; border-radius: 14px;
background:
radial-gradient(120% 140% at 100% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
var(--lc-panel);
border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--lc-border));
color: var(--lc-white);
}
.lc-mfeature-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.lc-mfeature-txt b { font-family: var(--lc-body); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.lc-mfeature-txt small { font-family: var(--lc-body); font-size: 13.5px; color: var(--lc-muted); }
.lc-mfeature .lc-mfeature-pill {
position: static; margin-top: 8px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent);
color: var(--accent); font-family: var(--lc-body); font-size: 12px; font-weight: 700; letter-spacing: 0;
text-transform: none; transform: none; box-shadow: none;
}
.lc-mfeature .lc-mfeature-pill[hidden] { display: none; }
.lc-mfeature-capes { flex: 0 0 auto; display: flex; gap: 6px; }
.lc-mfeature-capes .bk-art { width: 48px; height: 58px; border-radius: 10px; }
.lc-mfeature-capes .bk-art canvas { width: 24px; height: 38px; }
.lc-mrow {
display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px 10px 10px;
border-radius: 12px; background: var(--lc-panel); border: 1px solid var(--lc-border);
color: var(--lc-white); transition: background-color .15s ease, border-color .15s ease;
}
.lc-mrow:hover, .lc-mrow:focus-visible { background: var(--lc-tile); border-color: var(--lc-border-hi); }
.lc-mrow-ic { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--lc-tile); color: var(--accent); }
.lc-mrow-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lc-mrow-txt b { font-family: var(--lc-body); font-size: 15.5px; font-weight: 700; }
.lc-mrow-txt small { font-family: var(--lc-body); font-size: 13px; color: var(--lc-muted); }
.lc-mrow-chev { flex: 0 0 auto; color: var(--lc-subtle); }
.lc-menu-foot { display: grid; gap: 8px; width: 100%; max-width: 560px; margin: 0 auto; padding: 8px 16px 24px; }
.nav-mobile .lc-menu-foot a.nav-m-basket {
padding: 10px 14px 10px 10px; background: var(--lc-panel); border: 1px solid var(--lc-border);
font-family: var(--lc-body); font-size: inherit; font-weight: inherit; text-transform: none;
}
.nav-mobile .lc-menu-foot a.nav-m-basket .nav-basket-count {
position: static; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
border-radius: 999px; background: var(--accent); color: var(--lc-on-mint); font-size: 12px; font-weight: 800;
}
.nav-mobile .lc-menu-foot a.nav-m-basket .nav-basket-count[hidden] { display: none; }
.nav-mobile .lc-menu-foot a.nav-m-discord {
display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 16px;
border-radius: 12px; background: var(--lc-discord-hi); border: 1px solid color-mix(in srgb, var(--lc-white) 8%, transparent);
font-family: var(--lc-body); font-size: 15px; font-weight: 700; text-transform: none; color: var(--lc-white);
}
.nav-mobile .lc-menu-foot .nav-m-currency {
display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px;
font-family: var(--lc-body); font-size: 14px; color: var(--lc-muted);
}
@media (min-width: 901px) { .lc-mlist { padding-top: 32px; } }
.nav-mobile.open .lc-mfeature, .nav-mobile.open .lc-mrow { animation: lc-rise .45s var(--e-out) both; }
.nav-mobile.open .lc-mlist > :nth-child(2) { animation-delay: .03s; }
.nav-mobile.open .lc-mlist > :nth-child(3) { animation-delay: .06s; }
.nav-mobile.open .lc-mlist > :nth-child(4) { animation-delay: .09s; }
.nav-mobile.open .lc-mlist > :nth-child(5) { animation-delay: .12s; }
.nav-mobile.open .lc-mlist > :nth-child(6) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .nav-mobile.open .lc-mfeature, .nav-mobile.open .lc-mrow { animation: none; } }
.nav-mobile .lc-mfeature .lc-mfeature-pill { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.nav-mobile .lc-mrow-txt b, .nav-mobile .lc-mfeature-txt b { color: var(--lc-white); }
.nav-mobile .lc-mrow-txt small, .nav-mobile .lc-mfeature-txt small { color: var(--lc-muted); }
.lc-fs-meta .footer-pay { display: flex; flex-wrap: wrap; gap: 8px; }
.cape-card { display: flex; flex-direction: column; }
.cape-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
@media (max-width: 520px) {
.cape-card-cart.btn { margin-top: auto; }
.cape-card-foot { flex: 1 1 auto; display: flex; flex-direction: column; }
.cape-card-price-row { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; }
}
.bk-line { align-items: flex-start; }
.bk-line-name { line-height: 1.3; }
.bk-line-end { padding-top: 1px; }
.bk-line-remove { color: var(--lc-muted); }
.hero-swipe-hint { color: var(--lc-w70); font-size: 12.5px; }
.cart-line-remove, .cart-remove { color: var(--lc-muted); }