@font-face {
font-family: "Inter";
font-weight: 100 900;
font-display: swap;
src: url(//demo.mokudzo.kz/wp-content/plugins/mokudzo-catalog/assets/fonts/inter-cyrillic-wght-normal.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Inter";
font-weight: 100 900;
font-display: swap;
src: url(//demo.mokudzo.kz/wp-content/plugins/mokudzo-catalog/assets/fonts/inter-latin-wght-normal.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-weight: 100 800;
font-display: swap;
src: url(//demo.mokudzo.kz/wp-content/plugins/mokudzo-catalog/assets/fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "JetBrains Mono";
font-weight: 100 800;
font-display: swap;
src: url(//demo.mokudzo.kz/wp-content/plugins/mokudzo-catalog/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.mk-catalog {
--mk-bg: #000;
--mk-text: #fff;
--mk-text-2: rgba(255, 255, 255, 0.92);
--mk-text-3: rgba(255, 255, 255, 0.72);
--mk-fill: rgba(255, 255, 255, 0.06);
--mk-fill-2: rgba(255, 255, 255, 0.11);
--mk-fill-3: rgba(255, 255, 255, 0.18);
--mk-radius: 26px;
--mk-ease: cubic-bezier(0.16, 1, 0.3, 1);
--mk-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--mk-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --mk-h: 100vh;
}
@supports (height: 100dvh) {
.mk-catalog {
--mk-h: 100dvh;
}
}
.mk-catalog,
.mk-catalog *,
.mk-catalog *::before,
.mk-catalog *::after {
box-sizing: border-box;
}
.mk-catalog {
position: relative;
display: grid;
grid-template-columns: clamp(250px, 20vw, 310px) minmax(0, 1fr);
width: 100%;
height: var(--mk-h);
min-height: 540px;
overflow: hidden;
isolation: isolate;
font-family: var(--mk-font);
color: var(--mk-text);
background: var(--mk-bg);
line-height: 1.45;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
.mk-catalog [hidden] {
display: none !important;
}
.mk-catalog button {
font-family: inherit;
-webkit-appearance: none;
appearance: none;
}
.mk-catalog .mk-i {
flex: 0 0 auto;
width: 1.25em;
height: 1.25em;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.mk-catalog :focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
} .mk-catalog .mk-ambient {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.mk-catalog .mk-ambient i {
position: absolute;
inset: -12%;
background-size: cover;
background-position: center;
filter: blur(90px) saturate(1.5);
opacity: 0;
transform: scale(1.1);
transition: opacity 1.2s var(--mk-ease), transform 6s ease-out;
}
.mk-catalog .mk-ambient i.is-on {
opacity: 0.22;
transform: scale(1);
}
.mk-catalog .mk-ambient::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 60% 50%, transparent 20%, rgba(0, 0, 0, 0.75) 100%),
linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.55) 22%, transparent 45%);
} .mk-catalog .mk-side {
display: flex;
flex-direction: column;
gap: 30px;
min-width: 0;
min-height: 0;
padding: 34px 22px 28px 32px;
overflow: hidden;
} .mk-catalog .mk-side.is-open {
overflow-y: auto;
scrollbar-width: none;
}
.mk-catalog .mk-side.is-open::-webkit-scrollbar {
display: none;
} .mk-catalog .mk-ico {
position: relative;
display: grid;
flex: 0 0 auto;
place-items: center;
width: 36px;
height: 36px;
margin-left: -8px;
color: inherit;
border-radius: 50%;
transition: background 0.5s var(--mk-ease), color 0.5s var(--mk-ease), box-shadow 0.6s var(--mk-ease);
}
.mk-catalog .mk-ico .mk-i {
font-size: 20px;
overflow: visible;
} .mk-catalog .mk-search {
position: relative;
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 12px;
height: 46px;
color: #fff;
}
.mk-catalog .mk-search:focus-within .mk-ico {
color: #000;
background: #fff;
box-shadow: 0 0 28px rgba(255, 255, 255, 0.35);
}
.mk-catalog .mk-search:focus-within .mk-ico::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
animation: mk-ripple 1s var(--mk-ease) 1;
}
.mk-catalog .mk-search__field {
position: relative;
flex: 1;
min-width: 0;
height: 100%;
}
.mk-catalog .mk-search__ghost,
.mk-catalog .mk-search__input,
.mk-catalog .mk-search__idle {
position: absolute;
inset: 0;
display: flex;
align-items: center;
width: 100%;
padding: 0;
font: 600 16px/1 var(--mk-font);
letter-spacing: -0.01em;
white-space: pre;
overflow: hidden;
}
.mk-catalog .mk-search__ghost {
color: transparent;
pointer-events: none;
}
.mk-catalog .mk-search__ghost i {
font-style: normal;
}
.mk-catalog .mk-search__ghost span {
color: rgba(255, 255, 255, 0.55);
}
.mk-catalog .mk-search__input {
margin: 0;
font-weight: 500;
color: #fff;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
outline: none;
}
.mk-catalog .mk-search__input::-webkit-search-cancel-button {
display: none;
} .mk-catalog .mk-search__idle {
gap: 8px;
color: rgba(255, 255, 255, 0.92);
pointer-events: none;
transition: color 0.4s var(--mk-ease);
}
.mk-catalog .mk-search__input:not(:placeholder-shown) ~ .mk-search__idle {
opacity: 0;
}
.mk-catalog .mk-search:focus-within .mk-search__idle {
color: rgba(255, 255, 255, 0.5);
}
.mk-catalog .mk-search__word {
display: inline-block;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
animation: mk-word 0.8s var(--mk-ease) backwards;
transition: opacity 0.4s var(--mk-ease);
}
.mk-catalog .mk-search__word::before {
content: "— ";
}
.mk-catalog .mk-search:focus-within .mk-search__word {
opacity: 0;
}
.mk-catalog .mk-search__clear {
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin: 0;
padding: 0;
color: rgba(255, 255, 255, 0.8);
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: color 0.4s var(--mk-ease), filter 0.4s var(--mk-ease);
}
.mk-catalog .mk-search__clear .mk-i {
font-size: 16px;
}
.mk-catalog .mk-search__clear:hover {
color: #fff;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
} .mk-catalog .mk-nav {
display: flex;
flex: 0 0 auto;
flex-direction: column;
gap: 4px;
}
.mk-catalog .mk-nav__list {
display: flex;
flex-direction: column;
gap: 4px;
} .mk-catalog .mk-nav__toggle {
display: none;
}
.mk-catalog .mk-nav__item,
.mk-catalog .mk-saved {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 46px;
margin: 0;
padding: 0;
font: 600 16px/1 var(--mk-font);
letter-spacing: -0.01em;
text-align: left;
color: rgba(255, 255, 255, 0.9);
background: transparent;
border: 0;
border-radius: 0;
cursor: pointer;
transition: color 0.5s var(--mk-ease);
}
.mk-catalog .mk-nav__label,
.mk-catalog .mk-saved__label {
flex: 1;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
transition: text-shadow 0.6s var(--mk-ease);
}
.mk-catalog .mk-nav__item:hover,
.mk-catalog .mk-saved:hover {
color: #fff;
}
.mk-catalog .mk-nav__item:hover .mk-nav__label,
.mk-catalog .mk-saved:hover .mk-saved__label {
text-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
} .mk-catalog .mk-nav__item.is-active {
color: #fff;
}
.mk-catalog .mk-nav__item.is-active .mk-ico {
color: #000;
background: #fff;
box-shadow: 0 0 28px rgba(255, 255, 255, 0.35);
}
.mk-catalog .mk-nav__item.is-active .mk-nav__label {
animation: mk-bloom 1.6s var(--mk-ease) forwards;
} .mk-catalog .mk-i--all rect,
.mk-catalog .mk-i--search circle,
.mk-catalog .mk-i--search path,
.mk-catalog .mk-i--landing .rk,
.mk-catalog .mk-i--business .hd,
.mk-catalog .mk-i--catalog .bag,
.mk-catalog .mk-i--popular .fl,
.mk-catalog .mk-i--random g,
.mk-catalog .mk-i--tag .tg,
.mk-catalog .mk-i--bookmark {
transform-box: fill-box;
transform-origin: center;
} .mk-catalog .mk-nav__item:hover .mk-i--all rect {
animation: mk-tile 1.3s ease-in-out infinite;
}
.mk-catalog .mk-nav__item:hover .mk-i--all .a2 { animation-delay: 0.16s; }
.mk-catalog .mk-nav__item:hover .mk-i--all .a4 { animation-delay: 0.32s; }
.mk-catalog .mk-nav__item:hover .mk-i--all .a3 { animation-delay: 0.48s; } .mk-catalog .mk-nav__item:hover .mk-i--landing .rk {
animation: mk-rocket 1.2s ease-in-out infinite;
}
@keyframes mk-rocket {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(1.6px, -1.6px); }
} .mk-catalog .mk-nav__item:hover .mk-i--business .hd {
animation: mk-lift 1.2s ease-in-out infinite;
} .mk-catalog .mk-i--catalog .bag {
transform-origin: 50% 0;
}
.mk-catalog .mk-nav__item:hover .mk-i--catalog .bag {
animation: mk-swing 1.5s ease-in-out infinite;
} .mk-catalog .mk-i--popular .fl {
transform-origin: 50% 100%;
}
.mk-catalog .mk-nav__item:hover .mk-i--popular {
filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.85));
}
.mk-catalog .mk-nav__item:hover .mk-i--popular .fl {
animation: mk-ignite 0.6s var(--mk-ease), mk-flame 1.1s ease-in-out 0.6s infinite;
} .mk-catalog .mk-nav__item:hover .mk-i--random .sh1 {
animation: mk-shuf 1.3s ease-in-out infinite;
}
.mk-catalog .mk-nav__item:hover .mk-i--random .sh2 {
animation: mk-shuf 1.3s ease-in-out infinite reverse;
} .mk-catalog .mk-search:hover .mk-i--search circle {
animation: mk-lens 1.4s ease-in-out infinite;
}
.mk-catalog .mk-search:hover .mk-i--search path {
animation: mk-handle 1.4s ease-in-out infinite;
} .mk-catalog .mk-i--bookmark .bk {
stroke-dasharray: 100;
}
.mk-catalog .mk-saved:hover .mk-i--bookmark .bk {
animation: mk-trace 1.1s var(--mk-ease);
} .mk-catalog .mk-tags {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 14px;
min-height: 0;
}
.mk-catalog .mk-tags.is-open {
flex: 0 0 auto;
}
.mk-catalog .mk-label {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 9px;
height: 18px;
font: 600 11.5px/1 var(--mk-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fff;
}
.mk-catalog .mk-label .mk-i {
font-size: 15px;
overflow: visible;
} .mk-catalog .mk-i--tag .tg {
transform-box: view-box;
transform-origin: 7px 7px;
}
.mk-catalog .mk-label:hover .mk-i--tag .tg {
animation: mk-tag 1.2s ease-in-out;
}
.mk-catalog .mk-label button {
margin: 0 0 0 auto;
padding: 5px 9px;
font: 600 10.5px/1 var(--mk-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
background: transparent;
border: 0;
cursor: pointer;
transition: text-shadow 0.4s var(--mk-ease);
}
.mk-catalog .mk-label button:hover {
text-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
} .mk-catalog .mk-tags__list {
position: relative;
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
align-content: flex-start;
gap: 8px;
min-height: 0;
margin: -8px;
padding: 8px;
overflow: hidden;
}
.mk-catalog .mk-tags.is-open .mk-tags__list {
flex: 0 0 auto;
overflow: visible;
} .mk-catalog .mk-tag {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
height: 36px;
margin: 0;
padding: 0 14px 0 11px;
overflow: hidden;
font: 500 13.5px/1 var(--mk-font);
color: rgba(255, 255, 255, 0.88);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
cursor: pointer;
transition: color 0.6s var(--mk-ease), background 0.6s var(--mk-ease), border-color 0.6s var(--mk-ease), box-shadow 0.7s var(--mk-ease), transform 0.5s var(--mk-ease);
} .mk-catalog .mk-tag .mk-i {
position: relative;
font-size: 14px;
stroke-width: 2.2;
opacity: 0.7;
transition: opacity 0.6s var(--mk-ease);
}
.mk-catalog .mk-tag span {
position: relative;
} .mk-catalog .mk-tag::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 55%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.24), transparent);
transform: translateX(-130%) skewX(-18deg);
pointer-events: none;
}
.mk-catalog .mk-tag:hover::before {
transform: translateX(260%) skewX(-18deg);
transition: transform 0.9s var(--mk-ease);
} .mk-catalog .mk-tag:hover {
color: #fff;
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.32);
box-shadow: 0 0 22px -8px rgba(255, 255, 255, 0.4);
transform: scale(1.045);
}
.mk-catalog .mk-tag:hover .mk-i {
opacity: 1;
}
.mk-catalog .mk-tag.is-active {
color: #000;
background: #fff;
border-color: #fff;
}
.mk-catalog .mk-tag.is-active .mk-i {
opacity: 1;
} .mk-catalog .mk-tag.is-pulse {
animation: mk-ring 0.9s var(--mk-ease) 1;
}
.mk-catalog .mk-tag.is-new {
animation: mk-pop-in 0.7s var(--mk-ease) backwards;
animation-delay: calc(var(--i, 0) * 28ms);
} .mk-catalog .mk-tags__more {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
align-self: flex-start;
gap: 8px;
height: 28px;
margin: 0;
padding: 0;
font: 600 13.5px/1 var(--mk-font);
color: rgba(255, 255, 255, 0.92);
background: transparent;
border: 0;
cursor: pointer;
transition: color 0.4s var(--mk-ease), text-shadow 0.5s var(--mk-ease);
}
.mk-catalog .mk-tags__more .mk-i {
font-size: 15px;
stroke-width: 2;
transition: transform 0.6s var(--mk-ease);
}
.mk-catalog .mk-tags__more:hover {
color: #fff;
text-shadow: 0 0 16px rgba(255, 255, 255, 0.55);
}
.mk-catalog .mk-tags__more:hover .mk-i {
transform: translateY(2px);
}
.mk-catalog .mk-tags.is-open .mk-tags__more .mk-i {
transform: rotate(180deg);
}
.mk-catalog .mk-tags.is-open .mk-tags__more:hover .mk-i {
transform: rotate(180deg) translateY(2px);
} .mk-catalog .mk-saved {
flex: 0 0 auto;
margin-top: -26px;
} .mk-catalog .mk-saved .mk-ico {
margin-left: -8px;
}
.mk-catalog .mk-saved .mk-ico .mk-i {
transform: translateX(-2px);
}
.mk-catalog .mk-saved em {
display: block;
min-width: 0;
padding: 0;
font: inherit;
font-style: normal;
font-variant-numeric: tabular-nums;
text-align: right;
color: #fff;
background: none;
}
.mk-catalog .mk-saved.is-bump em {
animation: mk-bump 0.6s var(--mk-ease);
} .mk-catalog .mk-stage {
position: relative;
min-width: 0;
min-height: 0;
}
.mk-catalog .mk-feed {
position: relative;
height: 100%;
overflow: hidden;
touch-action: none;
outline: none;
transition: opacity 0.25s ease;
}
.mk-catalog .mk-feed.is-swap {
opacity: 0;
} .mk-catalog .mk-post {
--ease-page: cubic-bezier(0.65, 0, 0.2, 1);
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 22px clamp(18px, 6vw, 110px) 32px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate3d(0, calc((var(--k, 0) - var(--cur, 0)) * 100% + var(--drag, 0px)), 0);
transition: transform 1.1s var(--ease-page), opacity 0.6s ease, visibility 0s 1.1s;
}
.mk-catalog .mk-post.is-near,
.mk-catalog .mk-post.is-active {
visibility: visible;
will-change: transform;
transition: transform 1.1s var(--ease-page), opacity 0.9s ease, visibility 0s;
}
.mk-catalog .mk-post.is-active {
opacity: 1;
pointer-events: auto;
} .mk-catalog .mk-post .mk-card {
transform: translate3d(0, calc((var(--k, 0) - var(--cur, 0)) * 9vh), 0);
transition: transform 1.3s var(--ease-page);
} .mk-catalog .mk-feed.is-drag .mk-post,
.mk-catalog .mk-feed.is-drag .mk-post .mk-card,
.mk-catalog .mk-feed.is-instant .mk-post,
.mk-catalog .mk-feed.is-instant .mk-post .mk-card {
transition: none;
}
.mk-catalog .mk-feed.is-drag .mk-post.is-near {
opacity: 1;
} .mk-catalog .mk-card {
display: flex;
flex-direction: column;
gap: 22px;
width: min(100%, 1040px);
height: min(100%, 900px);
} .mk-catalog .mk-media {
position: relative;
flex: 1 1 0;
min-height: 160px;
overflow: hidden;
border-radius: var(--mk-radius);
background: #0a0a0a;
box-shadow: none;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
} .mk-catalog .mk-track {
position: absolute;
z-index: 0;
inset: 0;
}
.mk-catalog .mk-shot {
position: absolute;
inset: 0;
margin: 0;
overflow: hidden;
visibility: hidden;
z-index: 1;
}
.mk-catalog .mk-shot.is-out {
visibility: visible;
}
.mk-catalog .mk-shot.is-cur {
visibility: visible;
z-index: 2;
}
.mk-catalog .mk-media[data-dir] .mk-shot.is-cur {
animation: mk-wipe-next 1.1s cubic-bezier(.65, 0, .2, 1) both;
}
.mk-catalog .mk-media[data-dir="prev"] .mk-shot.is-cur {
animation-name: mk-wipe-prev;
}
.mk-catalog .mk-media[data-dir] .mk-shot.is-cur img {
animation: mk-in-next 1.3s cubic-bezier(.16, 1, .3, 1) both;
}
.mk-catalog .mk-media[data-dir="prev"] .mk-shot.is-cur img {
animation-name: mk-in-prev;
}
.mk-catalog .mk-media[data-dir] .mk-shot.is-out img {
animation: mk-away-next 1.1s cubic-bezier(.65, 0, .2, 1) both;
}
.mk-catalog .mk-media[data-dir="prev"] .mk-shot.is-out img {
animation-name: mk-away-prev;
}
.mk-catalog .mk-shot img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
object-fit: cover;
object-position: center top;
border: 0;
border-radius: 0;
-webkit-user-drag: none;
} .mk-catalog .mk-media::before,
.mk-catalog .mk-media::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
}
.mk-catalog .mk-media::before {
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 28%, transparent 58%);
}
.mk-catalog .mk-media::after {
background: linear-gradient(to top, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.84) 55%, rgba(0, 0, 0, 0.4) 100%);
opacity: 0;
transition: opacity 0.8s ease;
}
.mk-catalog .mk-media.is-open::after {
opacity: 1;
}
.mk-catalog .mk-arrow {
position: absolute;
z-index: 2;
top: 50%;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
color: #fff;
background: rgba(0, 0, 0, 0.62);
border: 0;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: all 0.5s var(--mk-ease);
}
.mk-catalog .mk-arrow {
transform: translateY(-50%);
}
.mk-catalog .mk-arrow--prev {
left: 16px;
}
.mk-catalog .mk-arrow--next {
right: 16px;
}
.mk-catalog .mk-media:hover .mk-arrow {
opacity: 1;
}
.mk-catalog .mk-arrow:hover {
color: #000;
background: #fff;
}
.mk-catalog .mk-dots {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 18px;
display: flex;
justify-content: center;
gap: 6px;
pointer-events: none;
}
.mk-catalog .mk-dots i {
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.45);
transition: all 0.5s var(--mk-ease);
}
.mk-catalog .mk-dots i.is-on {
width: 22px;
background: #fff;
} .mk-catalog .mk-panel {
position: absolute;
z-index: 3;
left: 0;
right: 0;
bottom: 0;
display: grid;
padding: 0 clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 30px);
pointer-events: none;
}
.mk-catalog .mk-panel > * {
grid-area: 1 / 1;
align-self: end;
}
.mk-catalog .mk-panel__front,
.mk-catalog .mk-panel__back {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding-right: 132px;
transition: opacity 0.7s ease, transform 0.9s var(--mk-ease), visibility 0s;
}
.mk-catalog .mk-panel__back {
opacity: 0;
visibility: hidden;
transform: translateY(28px);
transition: opacity 0.6s ease, transform 0.8s var(--mk-ease), visibility 0s 0.6s;
}
.mk-catalog .mk-media.is-open .mk-panel__front {
opacity: 0;
transform: translateY(-34px);
}
.mk-catalog .mk-media.is-open .mk-panel__back {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
transition: opacity 0.7s ease 0.1s, transform 0.9s var(--mk-ease) 0.1s, visibility 0s;
} .mk-catalog .mk-panel__back > * {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.8s var(--mk-ease);
}
.mk-catalog .mk-media.is-open .mk-panel__back > * {
opacity: 1;
transform: none;
transition-delay: 0.18s;
}
.mk-catalog .mk-card__tags li {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.6s ease, transform 0.8s var(--mk-ease);
}
.mk-catalog .mk-media.is-open .mk-card__tags li {
opacity: 1;
transform: none;
transition-delay: calc(0.3s + var(--i, 0) * 0.045s);
} .mk-catalog .mk-cat {
display: inline-flex;
align-items: center;
gap: 12px;
height: 26px;
padding: 0;
font: 600 15px/1 var(--mk-mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
background: none;
text-shadow: 0 1px 16px rgba(0, 0, 0, 0.75);
}
.mk-catalog .mk-cat::before {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16), 0 0 16px rgba(255, 255, 255, 0.9);
}
.mk-catalog .mk-title {
margin: 0;
padding: 0;
font: 700 clamp(28px, 3.2vw, 48px)/1.04 var(--mk-font);
letter-spacing: -0.04em;
text-transform: none;
color: #fff;
}
.mk-catalog .mk-desc {
max-width: 54ch;
margin: 0;
font: 400 clamp(19px, 1.75vw, 24px)/1.7 var(--mk-font);
letter-spacing: 0.01em;
color: #fff;
text-shadow: 0 1px 18px rgba(0, 0, 0, 0.6);
}
.mk-catalog .mk-card__tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
.mk-catalog .mk-card__tags button {
display: inline-flex;
align-items: center;
height: 36px;
margin: 0;
padding: 0 14px;
font: 500 15px/1 var(--mk-font);
color: #fff;
background: transparent;
border: 0;
border-radius: 999px;
cursor: pointer;
transition: background 0.6s var(--mk-ease), text-shadow 0.6s var(--mk-ease);
}
.mk-catalog .mk-card__tags button::before {
content: "#";
margin-right: 3px;
opacity: 0.7;
transition: opacity 0.6s var(--mk-ease);
} .mk-catalog .mk-card__tags button:hover,
.mk-catalog .mk-card__tags button:focus-visible {
text-shadow: 0 0 14px rgba(255, 255, 255, 0.85);
}
.mk-catalog .mk-card__tags button:hover::before {
opacity: 1;
} .mk-catalog .mk-more {
position: relative;
z-index: 1;
grid-area: 1 / 1;
align-self: end;
justify-self: end;
display: inline-flex;
align-items: center;
gap: 10px;
height: 46px;
margin: 0;
padding: 0 6px 0 18px;
overflow: hidden;
font: 600 14px/1 var(--mk-font);
color: #fff;
background: rgba(0, 0, 0, 0.55);
border: 0;
border-radius: 999px;
cursor: pointer;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
transition: background 0.7s var(--mk-ease), box-shadow 0.7s var(--mk-ease);
}
.mk-catalog .mk-more__i {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
transition: background 0.7s var(--mk-ease), color 0.7s var(--mk-ease);
}
.mk-catalog .mk-more__i .mk-i {
font-size: 17px;
stroke-width: 2;
transition: transform 0.9s var(--mk-ease);
}
.mk-catalog .mk-more:hover,
.mk-catalog .mk-more:focus-visible {
background: rgba(0, 0, 0, 0.7);
box-shadow: 0 0 50px -10px rgba(255, 255, 255, 0.4);
}
.mk-catalog .mk-more:hover .mk-more__i,
.mk-catalog .mk-more:focus-visible .mk-more__i,
.mk-catalog .mk-media.is-open .mk-more__i {
color: #000;
background: #fff;
}
.mk-catalog .mk-media.is-open .mk-more__i .mk-i {
transform: rotate(180deg);
} .mk-catalog .mk-more--out {
display: none;
}
.mk-catalog .mk-post.is-more .mk-more__i {
color: #000;
background: #fff;
}
.mk-catalog .mk-post.is-more .mk-more__i .mk-i {
transform: rotate(180deg);
} .mk-catalog .mk-actions {
display: flex;
align-items: center;
gap: 10px;
padding: 0 0 0 10px;
} .mk-catalog .mk-actions .mk-price {
margin-left: auto;
}
.mk-catalog .mk-btn,
.mk-catalog .mk-bm,
.mk-catalog .mk-more {
--mk-sheen: rgba(255, 255, 255, 0.18);
} .mk-catalog .mk-btn::after,
.mk-catalog .mk-bm::after,
.mk-catalog .mk-more::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), var(--mk-sheen), transparent 70%);
opacity: 0;
pointer-events: none;
transition: opacity 0.8s var(--mk-ease);
}
.mk-catalog .mk-btn:hover::after,
.mk-catalog .mk-btn:focus-visible::after,
.mk-catalog .mk-bm:hover::after,
.mk-catalog .mk-bm:focus-visible::after,
.mk-catalog .mk-more:hover::after,
.mk-catalog .mk-more:focus-visible::after {
opacity: 1;
}
.mk-catalog .mk-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
height: 52px;
margin: 0;
padding: 0 28px;
overflow: hidden;
font: 650 15px/1 var(--mk-font);
letter-spacing: -0.005em;
text-decoration: none;
white-space: nowrap;
color: #fff;
background: #141414;
border: 0;
border-radius: 999px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.7s var(--mk-ease), box-shadow 0.7s var(--mk-ease), color 0.7s var(--mk-ease);
}
.mk-catalog .mk-btn:hover,
.mk-catalog .mk-btn:focus-visible {
background: #1c1c1c;
box-shadow: 0 0 60px -12px rgba(255, 255, 255, 0.35);
}
.mk-catalog .mk-btn--solid {
--mk-sheen: rgba(0, 0, 0, 0.16);
color: #000;
background: #fff;
}
.mk-catalog .mk-btn--solid:hover,
.mk-catalog .mk-btn--solid:focus-visible {
background: #fff;
box-shadow: 0 0 70px -8px rgba(255, 255, 255, 0.6);
}
.mk-catalog .mk-btn .mk-i {
font-size: 18px;
} .mk-catalog .mk-btn--solid {
padding: 0 32px 0 26px;
background: linear-gradient(135deg, #fff 0%, #e4e4e4 100%);
}
.mk-catalog .mk-btn--solid:hover,
.mk-catalog .mk-btn--solid:focus-visible {
background: linear-gradient(135deg, #fff 0%, #efefef 100%);
}
.mk-catalog .mk-btn--solid .mk-i {
font-size: 20px;
stroke-width: 1.8;
fill: currentColor;
transition: transform 1s var(--mk-ease);
}
.mk-catalog .mk-btn--solid:hover .mk-i {
transform: rotate(90deg);
}
.mk-catalog .mk-price {
margin: 0 0 0 6px;
font: 700 clamp(24px, 2.3vw, 32px)/1 var(--mk-font);
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
color: #fff;
-webkit-text-fill-color: #fff;
opacity: 1;
white-space: nowrap;
} .mk-catalog .mk-bm {
position: relative;
display: grid;
place-items: center;
flex: none;
width: 52px;
height: 52px;
margin: 0;
padding: 0;
overflow: hidden;
color: #fff;
background: #0c0c0c;
border: 0;
border-radius: 50%;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.7s var(--mk-ease), color 0.7s var(--mk-ease), box-shadow 0.7s var(--mk-ease);
}
.mk-catalog .mk-bm .mk-i {
font-size: 22px;
}
.mk-catalog .mk-bm:hover,
.mk-catalog .mk-bm:focus-visible {
background: #1a1a1a;
box-shadow: 0 0 60px -10px rgba(255, 255, 255, 0.4);
}
.mk-catalog .mk-bm[aria-pressed="true"] {
--mk-sheen: rgba(0, 0, 0, 0.16);
color: #000;
background: #fff;
box-shadow: 0 0 60px -8px rgba(255, 255, 255, 0.6);
}
.mk-catalog .mk-bm[aria-pressed="true"] .mk-i {
fill: currentColor;
}
.mk-catalog .mk-bm.is-pop {
animation: mk-bump 0.6s var(--mk-ease);
} .mk-catalog .mk-empty {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
width: min(100%, 560px);
padding: 0 8px;
opacity: 0;
transform: translateY(24px) scale(0.97);
transition: opacity 0.9s ease, transform 0.9s var(--mk-ease);
}
.mk-catalog .mk-post.is-active .mk-empty {
opacity: 1;
transform: none;
} .mk-catalog .mk-empty::before,
.mk-catalog .mk-empty::after {
content: "";
position: absolute;
z-index: -1;
inset: -200px -260px;
pointer-events: none;
}
.mk-catalog .mk-empty::before {
background:
radial-gradient(34% 42% at 30% 42%, rgba(255, 255, 255, 0.1), transparent 72%),
radial-gradient(28% 36% at 80% 70%, rgba(255, 255, 255, 0.06), transparent 72%);
animation: mk-aura 16s ease-in-out infinite alternate;
}
.mk-catalog .mk-empty::after {
background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1.4px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(220px circle at calc(var(--bx, 45%) + 260px) calc(var(--by, 45%) + 200px), #000, transparent);
mask-image: radial-gradient(220px circle at calc(var(--bx, 45%) + 260px) calc(var(--by, 45%) + 200px), #000, transparent);
opacity: 0.55;
transition: opacity 0.8s var(--mk-ease);
}
.mk-catalog .mk-post:hover .mk-empty::after {
opacity: 1;
}
@keyframes mk-aura {
0% { opacity: 0.7; transform: translate3d(-3%, -2%, 0); }
100% { opacity: 1; transform: translate3d(3%, 3%, 0); }
}
.mk-catalog .mk-empty__icon {
display: grid;
place-items: center;
margin-bottom: 6px;
}
.mk-catalog .mk-empty__icon .mk-i {
font-size: 40px;
stroke-width: 1.4;
animation: mk-glow 4.5s ease-in-out infinite;
}
.mk-catalog .mk-empty__label {
font: 600 11.5px/1 var(--mk-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.mk-catalog .mk-empty h3 {
margin: 0;
font: 700 clamp(24px, 2.4vw, 32px)/1.12 var(--mk-font);
letter-spacing: -0.035em;
color: #fff;
}
.mk-catalog .mk-empty p {
max-width: 44ch;
margin: 0;
font: 400 16px/1.55 var(--mk-font);
color: rgba(255, 255, 255, 0.88);
}
.mk-catalog .mk-empty__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
} .mk-catalog .mk-empty__actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mk-catalog .mk-cta {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
height: 58px;
margin: 0;
padding: 0 9px 0 24px;
overflow: hidden;
font: 600 15px/1 var(--mk-font);
letter-spacing: -0.005em;
white-space: nowrap;
border: 0;
border-radius: 999px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.8s var(--mk-ease), color 0.8s var(--mk-ease), box-shadow 0.8s var(--mk-ease);
}
.mk-catalog .mk-cta > * {
position: relative;
} .mk-catalog .mk-cta::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 50%), var(--mk-sheen), transparent 70%);
opacity: 0;
pointer-events: none;
transition: opacity 0.8s var(--mk-ease);
}
.mk-catalog .mk-cta:hover::after,
.mk-catalog .mk-cta:focus-visible::after,
.mk-catalog .mk-cta:active::after {
opacity: 1;
}
.mk-catalog .mk-cta i {
flex: none;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
transition: background 0.8s var(--mk-ease), color 0.8s var(--mk-ease);
}
.mk-catalog .mk-cta i .mk-i {
font-size: 18px;
stroke-width: 2;
transition: transform 1s var(--mk-ease);
} .mk-catalog .mk-cta {
--mk-sheen: rgba(255, 255, 255, 0.2);
color: #fff;
background: transparent;
}
.mk-catalog .mk-cta i {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.mk-catalog .mk-cta--solid i {
color: #000;
background: #fff;
}
.mk-catalog .mk-cta:hover,
.mk-catalog .mk-cta:focus-visible {
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 70px -12px rgba(255, 255, 255, 0.35);
}
.mk-catalog .mk-cta:hover i,
.mk-catalog .mk-cta:focus-visible i {
color: #000;
background: #fff;
}
.mk-catalog .mk-cta--solid:hover i .mk-i {
transform: rotate(-45deg);
}
.mk-catalog .mk-cta--dark:hover i .mk-i {
transform: rotate(180deg);
}
.mk-catalog .mk-cta:active {
opacity: 0.85;
} .mk-catalog .mk-pager {
position: absolute;
z-index: 3;
right: clamp(14px, 2vw, 34px);
top: 50%;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
transform: translateY(-50%);
}
.mk-catalog .mk-pager button {
display: grid;
place-items: center;
width: 54px;
height: 54px;
margin: 0;
padding: 0;
color: #fff;
background: #080808;
border: 0;
border-radius: 50%;
box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.9);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.7s var(--mk-ease), color 0.7s var(--mk-ease), box-shadow 0.7s var(--mk-ease), opacity 0.7s var(--mk-ease);
}
.mk-catalog .mk-pager button .mk-i {
font-size: 22px;
stroke-width: 2;
}
.mk-catalog .mk-pager button:hover:not(:disabled) {
color: #000;
background: #fff;
box-shadow: 0 0 60px -8px rgba(255, 255, 255, 0.55);
}
.mk-catalog .mk-pager button:disabled {
opacity: 0.25;
cursor: default;
} .mk-catalog .mk-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: 18px;
background: rgba(0, 0, 0, 0.62);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
animation: mk-fade 0.5s var(--mk-ease);
}
.mk-catalog .mk-modal.is-closing {
opacity: 0;
transition: opacity 0.3s ease;
}
.mk-catalog .mk-modal__box {
display: flex;
flex-direction: column;
width: min(560px, 100%);
max-height: min(640px, 82vh);
background: #0b0b0c;
border-radius: 28px;
box-shadow: 0 60px 160px -30px rgba(0, 0, 0, 1);
animation: mk-rise 0.7s var(--mk-ease);
}
.mk-catalog .mk-modal.is-closing .mk-modal__box {
transform: translateY(16px) scale(0.97);
transition: transform 0.3s ease;
}
.mk-catalog .mk-modal__head {
display: flex;
align-items: center;
gap: 12px;
padding: 22px 22px 14px 28px;
}
.mk-catalog .mk-modal__head h3 {
display: flex;
flex: 1;
align-items: baseline;
gap: 10px;
margin: 0;
font: 700 22px/1.2 var(--mk-font);
letter-spacing: -0.03em;
color: #fff;
} .mk-catalog .mk-modal__head h3 em {
font: inherit;
font-style: normal;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
color: #fff;
}
.mk-catalog .mk-modal__close {
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
color: #fff;
background: transparent;
border: 0;
cursor: pointer;
transition: filter 0.5s var(--mk-ease);
}
.mk-catalog .mk-modal__close .mk-i {
font-size: 22px;
}
.mk-catalog .mk-modal__close:hover {
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}
.mk-catalog .mk-modal__list {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 6px 14px 18px;
overflow-y: auto;
list-style: none;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.mk-catalog .mk-saved-item {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
margin: 0;
padding: 10px 10px 10px 10px;
font: inherit;
text-align: left;
color: #fff;
background: transparent;
border: 0;
border-radius: 18px;
cursor: pointer;
transition: background 0.4s var(--mk-ease);
animation: mk-pop-in 0.6s var(--mk-ease) backwards;
animation-delay: calc(var(--i, 0) * 50ms);
}
.mk-catalog .mk-saved-item:hover {
background: #131313;
}
.mk-catalog .mk-saved-item img {
flex: 0 0 auto;
width: 92px;
height: 62px;
object-fit: cover;
border-radius: 12px;
transition: transform 0.6s var(--mk-ease);
}
.mk-catalog .mk-saved-item:hover img {
opacity: 0.9;
}
.mk-catalog .mk-saved-item__text {
display: flex;
flex: 1;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.mk-catalog .mk-saved-item__text b {
font: 650 16px/1.2 var(--mk-font);
letter-spacing: -0.02em;
}
.mk-catalog .mk-saved-item__text small {
font: 500 11px/1 var(--mk-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mk-text-3);
}
.mk-catalog .mk-saved-item__rm {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
color: #fff;
background: transparent;
border: 0;
cursor: pointer;
transition: filter 0.5s var(--mk-ease);
}
.mk-catalog .mk-saved-item__rm .mk-i {
fill: currentColor;
font-size: 18px;
}
.mk-catalog .mk-saved-item__rm:hover {
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}
.mk-catalog .mk-modal__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 44px 30px 54px;
text-align: center;
font: 400 15px/1.55 var(--mk-font);
color: var(--mk-text-2);
}
.mk-catalog .mk-modal__empty .mk-i {
width: 44px;
height: 44px;
color: var(--mk-text-3);
} .mk-catalog .mk-toast {
position: fixed;
z-index: 1100;
left: 50%;
bottom: 28px;
padding: 14px 22px;
font: 600 14px/1 var(--mk-font);
color: #000;
background: #fff;
border-radius: 999px;
box-shadow: 0 20px 60px -10px rgba(255, 255, 255, 0.4);
transform: translate(-50%, 0);
animation: mk-toast 0.7s var(--mk-ease);
} .mk-catalog .mk-order__box {
position: relative;
width: min(480px, 100%);
padding: 30px 22px 22px;
overflow: hidden;
text-align: left;
isolation: isolate;
background: #000;
border-radius: 32px;
box-shadow: 0 60px 160px -30px #000;
animation: mk-rise 0.8s var(--mk-ease);
} .mk-catalog .mk-order__box::before {
content: "";
position: absolute;
z-index: 3;
inset: 0;
padding: 1px;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(260px circle at var(--bx, 50%) var(--by, 0%), rgba(255, 255, 255, 0.9), transparent 70%),
linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
} .mk-catalog .mk-order__aura {
position: absolute;
z-index: -2;
top: -150px;
left: -120px;
width: 440px;
height: 320px;
background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.2), transparent 68%);
animation: mk-ord-drift 11s ease-in-out infinite;
}
.mk-catalog .mk-order__stars {
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
}
.mk-catalog .mk-order__stars i {
position: absolute;
left: var(--x);
top: var(--y);
width: var(--s);
height: var(--s);
background: #fff;
border-radius: 50%;
box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.8);
opacity: 0;
animation: mk-ord-star var(--t) ease-in-out var(--d) infinite;
}
.mk-catalog .mk-modal.is-closing .mk-order__box {
transform: translateY(16px) scale(0.97);
transition: transform 0.3s ease;
}
.mk-catalog .mk-order__close {
position: absolute;
z-index: 4;
top: 14px;
right: 14px;
}
.mk-catalog .mk-order__spark {
display: inline-grid;
place-items: center;
margin-bottom: 18px;
color: #fff;
animation: mk-glow 3.2s ease-in-out infinite;
}
.mk-catalog .mk-order__spark .mk-i {
font-size: 28px;
animation: mk-ord-turn 16s linear infinite;
}
.mk-catalog .mk-order__title {
margin: 0;
padding-right: 48px;
font: 700 34px/1.08 var(--mk-font);
letter-spacing: -0.04em;
color: #fff;
animation: mk-bloom 1.8s var(--mk-ease) forwards;
} .mk-catalog .mk-order__tpl {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 20px 0 0;
}
.mk-catalog .mk-order__tpl span {
display: inline-flex;
align-items: center;
gap: 8px;
font: 500 13px/1 var(--mk-font);
color: var(--mk-text-2);
}
.mk-catalog .mk-order__tpl span i {
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
animation: mk-ord-pulse 2.4s ease-in-out infinite;
}
.mk-catalog .mk-order__tpl b {
font: 700 22px/1.2 var(--mk-font);
letter-spacing: -0.025em;
color: #fff;
text-shadow: 0 0 24px rgba(255, 255, 255, 0.3);
} .mk-catalog .mk-order__grid {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 26px;
}
.mk-catalog .mk-order__opt {
position: relative;
display: flex;
align-items: center;
gap: 18px;
height: 88px;
padding: 0 16px;
overflow: hidden;
color: #fff;
text-decoration: none;
background: #0a0a0a;
border-radius: 28px;
outline: none;
-webkit-tap-highlight-color: transparent;
transition: background 0.8s var(--mk-ease), box-shadow 1s var(--mk-ease);
} .mk-catalog .mk-order__opt::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.15), transparent 65%);
opacity: 0;
transition: opacity 0.7s var(--mk-ease);
} .mk-catalog .mk-order__opt::after {
content: "";
position: absolute;
inset: 0;
padding: 1px;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.95), transparent 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: 0;
transition: opacity 0.7s var(--mk-ease);
}
.mk-catalog .mk-order__opt:hover,
.mk-catalog .mk-order__opt:focus-visible {
background: #0f0f10;
box-shadow: 0 0 60px -20px rgba(255, 255, 255, 0.45);
}
.mk-catalog .mk-order__opt:hover::before,
.mk-catalog .mk-order__opt:focus-visible::before,
.mk-catalog .mk-order__opt:hover::after,
.mk-catalog .mk-order__opt:focus-visible::after {
opacity: 1;
} .mk-catalog .mk-order__ico {
position: relative;
z-index: 1;
display: grid;
place-items: center;
flex: 0 0 auto;
width: 56px;
height: 56px;
color: #fff;
background: #19191a;
border-radius: 50%;
transition: background 0.6s var(--mk-ease), color 0.6s var(--mk-ease), box-shadow 0.8s var(--mk-ease);
}
.mk-catalog .mk-order__ico::before,
.mk-catalog .mk-order__ico::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
opacity: 0;
}
.mk-catalog .mk-order__ico .mk-i {
font-size: 26px;
}
.mk-catalog .mk-order__opt:hover .mk-order__ico,
.mk-catalog .mk-order__opt:focus-visible .mk-order__ico {
color: #000;
background: #fff;
box-shadow: 0 0 36px rgba(255, 255, 255, 0.5);
}
.mk-catalog .mk-order__opt:hover .mk-order__ico::before,
.mk-catalog .mk-order__opt:focus-visible .mk-order__ico::before {
animation: mk-wave 1.8s var(--mk-ease) infinite;
}
.mk-catalog .mk-order__opt:hover .mk-order__ico::after,
.mk-catalog .mk-order__opt:focus-visible .mk-order__ico::after {
animation: mk-wave 1.8s var(--mk-ease) 0.6s infinite;
}
.mk-catalog .mk-order__name {
position: relative;
z-index: 1;
flex: 1 1 auto;
font: 700 22px/1 var(--mk-font);
letter-spacing: -0.03em;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
transition: text-shadow 0.7s var(--mk-ease);
}
.mk-catalog .mk-order__opt:hover .mk-order__name,
.mk-catalog .mk-order__opt:focus-visible .mk-order__name {
text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
} .mk-catalog .mk-order__go {
position: relative;
z-index: 1;
display: grid;
place-items: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
color: #fff;
background: #19191a;
border-radius: 50%;
transition: background 0.6s var(--mk-ease), color 0.6s var(--mk-ease);
}
.mk-catalog .mk-order__go .mk-i {
font-size: 18px;
stroke-width: 2.2;
}
.mk-catalog .mk-order__opt:hover .mk-order__go,
.mk-catalog .mk-order__opt:focus-visible .mk-order__go {
color: #000;
background: #fff;
}
@keyframes mk-ord-turn {
to { transform: rotate(360deg); }
}
@keyframes mk-ord-drift {
0%, 100% { transform: translate(0, 0); opacity: 0.7; }
50% { transform: translate(120px, 60px); opacity: 1; }
}
@keyframes mk-ord-star {
0%, 100% { opacity: 0; }
50% { opacity: 0.9; }
}
@keyframes mk-ord-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
.mk-catalog .mk-order__aura,
.mk-catalog .mk-order__stars i,
.mk-catalog .mk-order__spark .mk-i,
.mk-catalog .mk-order__tpl span i { animation: none; }
}
@media (max-width: 520px) {
.mk-catalog .mk-order__box { padding: 26px 14px 14px; border-radius: 28px; }
.mk-catalog .mk-order__title { font-size: 27px; }
.mk-catalog .mk-order__tpl b { font-size: 19px; }
.mk-catalog .mk-order__opt { height: 78px; gap: 14px; border-radius: 24px; }
.mk-catalog .mk-order__ico { width: 50px; height: 50px; }
.mk-catalog .mk-order__ico .mk-i { font-size: 24px; }
.mk-catalog .mk-order__name { font-size: 20px; }
} @media (max-width: 1100px) {
.mk-catalog {
grid-template-columns: 230px minmax(0, 1fr);
}
.mk-catalog .mk-side {
padding-left: 18px;
}
.mk-catalog .mk-post {
padding-left: 18px;
padding-right: 84px;
}
} @media (max-height: 780px) {
.mk-catalog .mk-card {
gap: 14px;
}
.mk-catalog .mk-title {
font-size: clamp(24px, 2.6vw, 38px);
}
.mk-catalog .mk-desc {
font-size: 18px;
}
.mk-catalog .mk-btn,
.mk-catalog .mk-bm {
height: 48px;
}
.mk-catalog .mk-bm {
width: 48px;
}
.mk-catalog .mk-side {
gap: 20px;
padding-top: 22px;
padding-bottom: 20px;
}
.mk-catalog .mk-nav__item,
.mk-catalog .mk-search,
.mk-catalog .mk-saved {
height: 42px;
} .mk-catalog .mk-saved { margin-top: -16px; }
} @media (min-width: 761px) and (max-height: 640px) {
.mk-catalog .mk-side {
overflow-y: auto;
scrollbar-width: none;
}
.mk-catalog .mk-tags {
flex: 0 0 auto;
}
} @media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
.mk-catalog {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
}
.mk-catalog .mk-ambient::after {
background: radial-gradient(ellipse at 50% 55%, transparent 20%, rgba(0, 0, 0, 0.8) 100%);
}
.mk-catalog .mk-side,
.mk-catalog .mk-side.is-open {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "search saved" "nav nav" "tags tags";
gap: 14px 12px;
padding: 14px 14px 6px;
overflow: visible;
}
.mk-catalog .mk-search { grid-area: search; height: 44px; }
.mk-catalog .mk-search::before,
.mk-catalog .mk-search::after { bottom: -5px; }
.mk-catalog .mk-ico,
.mk-catalog .mk-saved .mk-ico { margin-left: 0; }
.mk-catalog .mk-saved {
position: relative;
grid-area: saved;
justify-content: center;
width: 44px;
height: 44px;
margin: 0;
}
.mk-catalog .mk-saved .mk-ico { background: rgba(255, 255, 255, 0.12); }
.mk-catalog .mk-saved__label { display: none; }
.mk-catalog .mk-saved em {
position: absolute;
top: -3px;
right: -3px;
display: grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 10px;
color: #000;
background: #fff;
border-radius: 999px;
}
.mk-catalog .mk-nav { grid-area: nav; position: relative; }
.mk-catalog .mk-nav__list {
flex-direction: row;
gap: 8px;
margin: 0 -14px;
padding: 0 14px;
overflow-x: auto;
scrollbar-width: none;
}
.mk-catalog .mk-nav__list::-webkit-scrollbar { display: none; }
.mk-catalog .mk-nav__item {
flex: 0 0 auto;
width: auto;
height: 40px;
padding: 0 16px 0 6px;
gap: 4px;
font-size: 14px;
background: rgba(255, 255, 255, 0.1);
border-radius: 999px;
}
.mk-catalog .mk-nav__item .mk-ico {
width: 30px;
height: 30px;
background: none;
box-shadow: none;
}
.mk-catalog .mk-nav__item .mk-ico .mk-i { font-size: 18px; }
.mk-catalog .mk-nav__label { flex: 0 0 auto; }
.mk-catalog .mk-nav__item.is-active { color: #000; background: #fff; }
.mk-catalog .mk-nav__item.is-active .mk-ico { background: none; box-shadow: none; }
.mk-catalog .mk-tags {
grid-area: tags;
flex: none;
margin: 0 -14px;
}
.mk-catalog .mk-tags .mk-label,
.mk-catalog .mk-tags__more { display: none; }
.mk-catalog .mk-tags__list {
flex: none;
flex-wrap: nowrap;
padding: 0 14px;
overflow-x: auto;
scrollbar-width: none;
}
.mk-catalog .mk-tags__list::-webkit-scrollbar { display: none; }
.mk-catalog .mk-tag { flex: 0 0 auto; }
.mk-catalog .mk-tag[hidden] { display: inline-flex !important; }
.mk-catalog .mk-stage { margin-top: 6px; } .mk-catalog .mk-feed {
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.mk-catalog .mk-post { padding: 20px 14px 22px; }
.mk-catalog .mk-post .mk-card { transform: translate3d(0, calc((var(--k, 0) - var(--cur, 0)) * 4vh), 0); }
.mk-catalog .mk-card { gap: 14px; }
.mk-catalog .mk-media { border-radius: 20px; }
.mk-catalog .mk-pager { display: none; }
.mk-catalog .mk-arrow { opacity: 1; width: 38px; height: 38px; }
.mk-catalog .mk-panel { padding: 0 14px 14px; }
.mk-catalog .mk-panel__front,
.mk-catalog .mk-panel__back { gap: 10px; padding-right: 0; }
.mk-catalog .mk-panel__front { padding-bottom: 54px; }
.mk-catalog .mk-panel__back { padding-bottom: 54px; }
.mk-catalog .mk-more { height: 42px; padding: 0 5px 0 16px; font-size: 13px; }
.mk-catalog .mk-more__i { width: 32px; height: 32px; }
.mk-catalog .mk-cat { height: 28px; padding: 0 12px 0 11px; font-size: 11px; }
.mk-catalog .mk-title { font-size: 25px; }
.mk-catalog .mk-desc { font-size: 17px; line-height: 1.6; }
.mk-catalog .mk-card__tags button { height: 30px; padding: 0 12px; font-size: 12.5px; }
.mk-catalog .mk-dots { top: 14px; } .mk-catalog .mk-actions {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "price bm" "order demo";
gap: 12px 8px;
}
.mk-catalog .mk-btn { height: 50px; padding: 0 14px; font-size: 14px; }
.mk-catalog .mk-btn--solid { grid-area: order; padding: 0 14px; gap: 8px; }
.mk-catalog .mk-cat { height: 38px; padding: 0 16px 0 14px; font-size: 12.5px; }
.mk-catalog .mk-demo { grid-area: demo; }
.mk-catalog .mk-actions .mk-price { grid-area: price; justify-self: start; margin: 0; font-size: 30px; }
.mk-catalog .mk-bm { grid-area: bm; justify-self: end; margin: 0; width: 50px; height: 50px; }
.mk-catalog .mk-actions { padding: 0 0 0 6px; }
} @media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
.mk-catalog .mk-side,
.mk-catalog .mk-side.is-open {
gap: 16px 14px;
padding: 20px 28px 8px;
}
.mk-catalog .mk-search,
.mk-catalog .mk-saved { height: 50px; }
.mk-catalog .mk-saved { width: 50px; }
.mk-catalog .mk-nav__list { margin: 0 -28px; padding: 0 28px; gap: 10px; }
.mk-catalog .mk-nav__item { height: 44px; font-size: 15px; }
.mk-catalog .mk-tags { margin: 0 -28px; }
.mk-catalog .mk-tags__list { padding: 0 28px; }
.mk-catalog .mk-post { padding: 24px 28px 28px; }
.mk-catalog .mk-card { width: min(100%, 760px); gap: 18px; }
.mk-catalog .mk-pager { display: none; }
.mk-catalog .mk-media { border-radius: var(--mk-radius); }
.mk-catalog .mk-panel { padding: 0 24px 22px; }
.mk-catalog .mk-panel__front,
.mk-catalog .mk-panel__back { padding-right: 120px; }
.mk-catalog .mk-panel__front,
.mk-catalog .mk-panel__back { padding-bottom: 0; }
.mk-catalog .mk-more { height: 46px; font-size: 14px; }
.mk-catalog .mk-more__i { width: 36px; height: 36px; }
.mk-catalog .mk-title { font-size: 34px; }
.mk-catalog .mk-desc { font-size: 19px; }
.mk-catalog .mk-card__tags button { height: 34px; padding: 0 15px; font-size: 14px; }
.mk-catalog .mk-arrow { width: 44px; height: 44px; }
.mk-catalog .mk-dots { top: 18px; }
.mk-catalog .mk-actions {
display: flex;
gap: 10px;
padding: 0 0 0 8px;
}
.mk-catalog .mk-btn { height: 54px; padding: 0 20px; font-size: 15px; }
.mk-catalog .mk-actions .mk-price { margin-left: auto; font-size: 34px; }
.mk-catalog .mk-bm { width: 54px; height: 54px; }
.mk-catalog .mk-empty { width: min(100%, 560px); }
} @media (max-width: 760px) { .mk-catalog .mk-side { position: relative; z-index: 20; }
.mk-catalog .mk-nav__toggle {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
height: 44px;
margin: 0;
padding: 0 14px 0 6px;
font: 600 15px/1 var(--mk-font);
letter-spacing: -0.01em;
color: #fff;
background: #0d0d0d;
border: 0;
border-radius: 999px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.5s var(--mk-ease);
}
.mk-catalog .mk-nav__toggle .mk-ico {
width: 32px;
height: 32px;
margin: 0;
background: none;
}
.mk-catalog .mk-nav__toggle .mk-ico .mk-i { font-size: 18px; }
.mk-catalog .mk-nav__current { flex: 1; padding-left: 6px; text-align: left; }
.mk-catalog .mk-nav__chev { display: grid; place-items: center; }
.mk-catalog .mk-nav__chev .mk-i {
font-size: 18px;
transition: transform 0.6s var(--mk-ease);
}
.mk-catalog .mk-nav.is-drop .mk-nav__toggle { background: #151515; }
.mk-catalog .mk-nav.is-drop .mk-nav__chev .mk-i { transform: rotate(180deg); }
.mk-catalog .mk-nav__list {
position: absolute;
z-index: 30;
left: 0;
right: 0;
top: calc(100% + 8px);
flex-direction: column;
gap: 2px;
margin: 0;
padding: 8px;
overflow: hidden;
background: #050505;
border-radius: 26px;
box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 1), 0 0 60px -20px rgba(255, 255, 255, 0.25);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.5s var(--mk-ease), transform 0.6s var(--mk-ease), visibility 0s 0.6s;
}
.mk-catalog .mk-nav.is-drop .mk-nav__list {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.5s var(--mk-ease), transform 0.6s var(--mk-ease), visibility 0s;
}
.mk-catalog .mk-nav__item {
flex: 0 0 auto;
width: 100%;
height: 48px;
padding: 0 14px 0 6px;
gap: 6px;
font-size: 16px;
background: none;
border-radius: 18px;
}
.mk-catalog .mk-nav__item .mk-ico { width: 34px; height: 34px; background: none; }
.mk-catalog .mk-nav__label { flex: 1; }
.mk-catalog .mk-nav__item.is-active { color: #fff; background: none; }
.mk-catalog .mk-nav__item.is-active .mk-ico { color: #fff; background: none; box-shadow: none; } .mk-catalog .mk-nav__item.is-active::after {
content: "";
width: 7px;
height: 7px;
margin-right: 6px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
} .mk-catalog .mk-side,
.mk-catalog .mk-side.is-open { padding-left: 3px; padding-right: 3px; }
.mk-catalog .mk-search {
padding: 0 14px 0 6px;
background: #0d0d0d;
border-radius: 999px;
}
.mk-catalog .mk-saved { background: #0d0d0d; border-radius: 50%; }
.mk-catalog .mk-saved .mk-ico { background: none; }
.mk-catalog .mk-tags { margin: 9px -3px 0; }
.mk-catalog .mk-post { padding-left: 3px; padding-right: 3px; }
.mk-catalog .mk-arrow { display: none; }
.mk-catalog .mk-panel .mk-more { display: none; }
.mk-catalog .mk-actions .mk-more--out {
display: inline-flex;
grid-area: bm;
justify-self: end;
align-self: center;
margin: 0 60px 0 0;
height: 50px;
padding: 0 7px 0 18px;
font-size: 14px;
background: rgba(255, 255, 255, 0.1);
}
.mk-catalog .mk-actions .mk-more--out:hover,
.mk-catalog .mk-actions .mk-more--out:focus-visible { background: rgba(255, 255, 255, 0.16); }
.mk-catalog .mk-actions .mk-more--out .mk-more__i { width: 36px; height: 36px; }
.mk-catalog .mk-panel__front,
.mk-catalog .mk-panel__back { padding-bottom: 0; }
}
@keyframes mk-ripple {
from { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
to { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}
@keyframes mk-ring {
from { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
to { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
}
@keyframes mk-word {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: none; }
}
@keyframes mk-bloom {
0% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
35% { text-shadow: 0 0 26px rgba(255, 255, 255, 0.95); }
100% { text-shadow: 0 0 18px rgba(255, 255, 255, 0.4); }
}
@keyframes mk-tile {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.62); }
}
@keyframes mk-draw {
0% { stroke-dashoffset: 8; }
55%, 100% { stroke-dashoffset: 0; }
}
@keyframes mk-lift {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-1.8px); }
}
@keyframes mk-swing {
0%, 100% { transform: rotate(0); }
25% { transform: rotate(-8deg); }
75% { transform: rotate(8deg); }
}
@keyframes mk-ignite {
0% { transform: scale(0.55, 0.4); opacity: 0.3; }
60% { transform: scale(1.12, 1.25); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes mk-flame {
0%, 100% { transform: scale(1) rotate(0); }
30% { transform: scale(1.07, 1.16) rotate(-2.5deg); }
65% { transform: scale(0.96, 1.05) rotate(2.5deg); }
}
@keyframes mk-shuf {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(2.4px); }
}
@keyframes mk-lens {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.14); }
}
@keyframes mk-handle {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(1.3px, 1.3px); }
}
@keyframes mk-trace {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
@keyframes mk-tag {
0% { transform: rotate(0); }
25% { transform: rotate(-16deg); }
55% { transform: rotate(11deg); }
80% { transform: rotate(-4deg); }
100% { transform: rotate(0); }
}
@keyframes mk-pop-in {
from { opacity: 0; transform: translateY(10px) scale(0.92); }
to { opacity: 1; transform: none; }
}
@keyframes mk-bump {
0% { transform: scale(1); }
35% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes mk-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes mk-rise {
from { opacity: 0; transform: translateY(28px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes mk-breathe {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
@keyframes mk-wave {
0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
100% { opacity: 0; box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); }
}
@keyframes mk-wipe-next {
from { clip-path: inset(0 0 0 100%); }
to { clip-path: inset(0 0 0 0); }
}
@keyframes mk-wipe-prev {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
@keyframes mk-in-next {
from { transform: translateX(16%) scale(1.14); }
to { transform: none; }
}
@keyframes mk-in-prev {
from { transform: translateX(-16%) scale(1.14); }
to { transform: none; }
}
@keyframes mk-away-next {
from { transform: none; filter: brightness(1); }
to { transform: translateX(-22%) scale(1.04); filter: brightness(0.35); }
}
@keyframes mk-away-prev {
from { transform: none; filter: brightness(1); }
to { transform: translateX(22%) scale(1.04); filter: brightness(0.35); }
}
@keyframes mk-toast {
from { opacity: 0; transform: translate(-50%, 24px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.mk-catalog *,
.mk-catalog *::before,
.mk-catalog *::after {
animation: none !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
}
}
@keyframes mk-glow {
0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
50% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7)); }
}
@media (max-width: 760px) {
.mk-catalog .mk-empty { width: 100%; padding: 0 4px; gap: 12px; }
.mk-catalog .mk-empty h3 { font-size: 24px; }
.mk-catalog .mk-empty p { font-size: 15px; }
.mk-catalog .mk-empty__actions { gap: 8px; margin-top: 10px; }
.mk-catalog .mk-cta { height: 54px; gap: 6px; padding: 0 6px 0 16px; font-size: 14px; }
.mk-catalog .mk-cta i { width: 34px; height: 34px; }
} @media (max-width: 380px) {
.mk-catalog .mk-cta { height: 50px; gap: 4px; padding: 0 5px 0 13px; font-size: 13px; letter-spacing: -0.02em; }
.mk-catalog .mk-cta i { width: 30px; height: 30px; }
.mk-catalog .mk-cta i .mk-i { font-size: 15px; }
}  @media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
.mk-catalog .mk-side,
.mk-catalog .mk-side.is-open {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "saved search" "nav nav" "tags tags";
}
.mk-catalog .mk-tags__list {
margin-top: -10px;
margin-bottom: -10px;
padding-top: 10px;
padding-bottom: 10px;
}
}
@media (max-width: 760px) { .mk-catalog .mk-tag,
.mk-catalog .mk-tag:hover {
color: #fff;
background: #0d0d0d;
border-color: transparent;
box-shadow: none;
transform: none;
}
.mk-catalog .mk-tag::before { display: none; }
.mk-catalog .mk-tag.is-pulse { animation: none; }
.mk-catalog .mk-tag.is-active,
.mk-catalog .mk-tag.is-active:hover {
color: #fff;
background: #0d0d0d;
border-color: #fff;
} .mk-catalog .mk-modal { padding: 5px; }
.mk-catalog .mk-order__box {
width: 100%;
max-height: calc(100vh - 10px);
max-height: calc(100dvh - 10px);
padding: 24px 16px 16px;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
border-radius: 28px;
}
.mk-catalog .mk-order__box::-webkit-scrollbar { display: none; }
.mk-catalog .mk-order__title { font-size: clamp(24px, 8vw, 32px); padding-right: 44px; }
.mk-catalog .mk-order__tpl { margin-top: 16px; }
.mk-catalog .mk-order__tpl b { font-size: clamp(18px, 5.6vw, 22px); }
.mk-catalog .mk-order__grid { gap: 8px; margin-top: 22px; }
.mk-catalog .mk-order__opt { height: clamp(72px, 20vw, 88px); gap: 14px; padding: 0 12px; border-radius: 24px; }
.mk-catalog .mk-order__ico { width: 50px; height: 50px; }
.mk-catalog .mk-order__ico .mk-i { font-size: 24px; }
.mk-catalog .mk-order__name { font-size: 20px; }
.mk-catalog .mk-order__go { width: 38px; height: 38px; } .mk-catalog .mk-empty { padding: 0 2px; }
.mk-catalog .mk-empty h3 { font-size: clamp(24px, 7vw, 28px); } .mk-catalog .mk-modal__box {
width: 100%;
max-height: calc(100vh - 10px);
max-height: calc(100dvh - 10px);
border-radius: 26px;
}
.mk-catalog .mk-modal__head { padding: 18px 10px 10px 20px; }
.mk-catalog .mk-modal__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding: 4px 8px 10px;
}
.mk-catalog .mk-saved-item,
.mk-catalog .mk-saved-item:hover {
position: relative;
flex-direction: column;
align-items: stretch;
gap: 10px;
height: 100%;
padding: 0 0 14px;
overflow: hidden;
background: #000;
border-radius: 20px;
}
.mk-catalog .mk-saved-item img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-radius: 0;
}
.mk-catalog .mk-saved-item__text { flex: 0 0 auto; gap: 7px; padding: 0 12px; }
.mk-catalog .mk-saved-item__text b { font-size: 15px; overflow-wrap: anywhere; }
.mk-catalog .mk-saved-item__rm {
position: absolute;
top: 8px;
right: 8px;
width: 34px;
height: 34px;
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
}
.mk-catalog .mk-saved-item__rm .mk-i { font-size: 16px; }
} .mk-catalog .mk-toast {
width: max-content;
max-width: calc(100vw - 24px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 760px) {
.mk-catalog .mk-toast { bottom: 18px; padding: 11px 18px; font-size: 13px; } .mk-catalog .mk-bm,
.mk-catalog .mk-bm:hover,
.mk-catalog .mk-bm:focus-visible,
.mk-catalog .mk-bm[aria-pressed="true"] {
overflow: visible;
color: #fff;
background: none;
box-shadow: none;
}
.mk-catalog .mk-bm::after { display: none; }
.mk-catalog .mk-bm .mk-i { font-size: 27px; transition: filter 0.6s var(--mk-ease); }
.mk-catalog .mk-bm[aria-pressed="true"] .mk-i { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)); } .mk-catalog .mk-actions .mk-more--out {
background: rgba(0, 0, 0, 0.45);
}
.mk-catalog .mk-actions .mk-more--out:hover,
.mk-catalog .mk-actions .mk-more--out:focus-visible { background: rgba(0, 0, 0, 0.6); }
} @media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) { .mk-catalog .mk-ambient i {
inset: auto;
left: -12%;
top: -12%;
width: 31%;
height: 31%;
transform-origin: 0 0;
transform: scale(4.4);
filter: blur(22px) saturate(1.5);
}
.mk-catalog .mk-ambient i.is-on { transform: scale(4); } .mk-catalog .mk-feed {
-webkit-mask-image: none;
mask-image: none;
}
.mk-catalog .mk-stage::before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
height: 22px;
pointer-events: none;
background: linear-gradient(to bottom, #000, transparent);
} .mk-catalog .mk-modal {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: rgba(0, 0, 0, 0.86);
} .mk-catalog .mk-order__spark,
.mk-catalog .mk-empty__icon .mk-i { animation: none; }
.mk-catalog .mk-order__spark,
.mk-catalog .mk-empty__icon { position: relative; }
.mk-catalog .mk-order__spark::before,
.mk-catalog .mk-empty__icon::before {
content: "";
position: absolute;
inset: -14px;
pointer-events: none;
background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 68%);
opacity: 0.3;
animation: mk-ord-pulse 3.2s ease-in-out infinite;
} .mk-catalog .mk-order__stars i:nth-child(n+13) { display: none; } .mk-catalog .mk-empty::before,
.mk-catalog .mk-empty::after { inset: -80px -20px; }
.mk-catalog .mk-empty::after {
-webkit-mask-image: radial-gradient(220px circle at calc(var(--bx, 45%) + 20px) calc(var(--by, 45%) + 80px), #000, transparent);
mask-image: radial-gradient(220px circle at calc(var(--bx, 45%) + 20px) calc(var(--by, 45%) + 80px), #000, transparent);
}
} .mk-catalog .mk-feed.is-snap:not(.is-drag) .mk-post {
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, visibility 0s 0.6s;
}
.mk-catalog .mk-feed.is-snap:not(.is-drag) .mk-post.is-near,
.mk-catalog .mk-feed.is-snap:not(.is-drag) .mk-post.is-active {
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, visibility 0s;
}
.mk-catalog .mk-feed.is-snap:not(.is-drag) .mk-post .mk-card {
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
} .mk-catalog.is-modal .mk-empty::before { animation-play-state: paused; } .mk-catalog .mk-order:not(.is-ready) .mk-order__aura,
.mk-catalog .mk-order:not(.is-ready) .mk-order__stars i,
.mk-catalog .mk-order:not(.is-ready) .mk-order__spark .mk-i,
.mk-catalog .mk-order:not(.is-ready) .mk-order__tpl span i { animation-play-state: paused; }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) { .mk-catalog .mk-order__stars i {
width: calc(var(--s) * 5);
height: calc(var(--s) * 5);
margin: calc(var(--s) * -2.5) 0 0 calc(var(--s) * -2.5);
background: radial-gradient(circle, #fff 0 18%, rgba(255, 255, 255, 0.35) 38%, transparent 62%);
box-shadow: none;
}
.mk-catalog .mk-order__stars i:nth-child(n+9) { display: none; } .mk-catalog .mk-order__title {
animation: none;
text-shadow: 0 0 18px rgba(255, 255, 255, 0.4);
}
} .mk-catalog .mk-modal.is-closing,
.mk-catalog .mk-modal.is-closing * ,
.mk-catalog .mk-modal.is-closing *::before,
.mk-catalog .mk-modal.is-closing *::after {
animation: none !important;
}
.mk-catalog .mk-modal.is-closing .mk-order__stars,
.mk-catalog .mk-modal.is-closing .mk-order__aura {
display: none;
}
.mk-catalog .mk-modal.is-closing {
transition: opacity 0.22s ease;
}
.mk-catalog .mk-modal.is-closing .mk-modal__box,
.mk-catalog .mk-modal.is-closing .mk-order__box {
transition: transform 0.22s ease;
} @media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
.mk-catalog .mk-side,
.mk-catalog .mk-side.is-open { background: #000; }
}
@media (max-width: 760px) {
.mk-catalog .mk-search,
.mk-catalog .mk-nav__toggle,
.mk-catalog .mk-saved,
.mk-catalog .mk-tag,
.mk-catalog .mk-tag:hover,
.mk-catalog .mk-tag.is-active,
.mk-catalog .mk-tag.is-active:hover { background: #131313; }
.mk-catalog .mk-nav.is-drop .mk-nav__toggle { background: #1a1a1a; }
} .mk-catalog .mk-modal__list {
scrollbar-width: none;
}
.mk-catalog .mk-modal__list::-webkit-scrollbar {
display: none;
} @media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
.mk-catalog .mk-stage::before {
top: -8px;
height: 32px;
}
}  .mk-catalog .mk-logo {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
text-decoration: none;
font: 700 18px/1 var(--mk-font);
letter-spacing: -0.03em;
-webkit-tap-highlight-color: transparent;
}
.mk-catalog .mk-logo .mk-i {
font-size: 28px;
stroke-width: 1.5;
}
.mk-catalog .mk-logo span {
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
transition: text-shadow 0.6s var(--mk-ease);
}
.mk-catalog .mk-logo:hover span {
text-shadow: 0 0 18px rgba(255, 255, 255, 0.5);
}
.mk-catalog .mk-logo:hover .mk-i {
animation: mk-glow 2.4s ease-in-out infinite;
} .mk-catalog .mk-filterrow {
display: none;
} .mk-catalog .mk-brand {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 12px;
min-height: 44px;
margin-top: auto;
}
.mk-catalog .mk-brand .mk-logo {
flex: 0 0 auto;
gap: 0;
}
.mk-catalog .mk-mark {
display: block;
width: 34px;
height: 34px;
fill: currentColor;
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
transition: filter 0.6s var(--mk-ease);
}
.mk-catalog .mk-logo:hover .mk-mark,
.mk-catalog .mk-logo:focus-visible .mk-mark {
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.7));
} .mk-catalog .mk-online {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
font: 700 10px/normal var(--mk-mono);
letter-spacing: 0.1em;
color: #fff;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
user-select: none;
} .mk-catalog .mk-brand__div {
display: none;
flex: 0 0 auto;
width: 1px;
height: 20px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0));
} .mk-catalog .mk-online__dot {
position: relative;
flex: 0 0 auto;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 8px #fff;
}
.mk-catalog .mk-online__dot::after {
content: "";
position: absolute;
inset: -4px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: mk-status-ring 2s ease-out infinite;
}
@keyframes mk-status-ring {
0% { transform: scale(0.3); opacity: 1; }
100% { transform: scale(1.6); opacity: 0; }
}
.mk-catalog .mk-menuopen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
flex: 0 0 auto;
width: 44px;
height: 44px;
margin: 0 -9px 0 auto;
padding: 0;
color: #fff;
background: none;
border: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: filter 0.5s var(--mk-ease);
} .mk-catalog .mk-menuopen__line {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
}
.mk-catalog .mk-menuopen:hover,
.mk-catalog .mk-menuopen:focus-visible {
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}
.mk-catalog .mk-saved:focus-visible {
outline: none;
} @media (min-width: 1101px), (min-width: 761px) and (orientation: landscape) {
.mk-catalog .mk-saved__label {
flex: 0 0 auto;
}
.mk-catalog .mk-saved em {
margin-left: -4px;
padding-top: 1px;
font: 600 12px/1 var(--mk-mono);
text-align: left;
}
} .mk-catalog .mk-menu__logo {
margin-bottom: 20px;
}
.mk-catalog .mk-menu .mk-order__grid {
margin-top: 0;
}
.mk-catalog .mk-menu .mk-order__opt {
height: 74px;
width: 100%;
font-family: inherit;
text-align: left;
border: 0;
cursor: pointer;
}
.mk-catalog .mk-menu .mk-order__ico {
width: 46px;
height: 46px;
font: 600 13px/1 var(--mk-mono);
letter-spacing: 0.04em;
}
.mk-catalog .mk-menu .mk-order__ico .mk-i {
font-size: 22px;
}
.mk-catalog .mk-menu .mk-order__name {
font-size: 20px;
}
@keyframes mk-sheet {
from { transform: translateY(60px); opacity: 0; }
to { transform: none; opacity: 1; }
} .mk-catalog .mk-fbox {
display: flex;
flex-direction: column;
width: min(560px, 100%);
max-height: min(720px, 86vh);
background: #0b0b0c;
border-radius: 28px;
box-shadow: 0 60px 160px -30px #000;
animation: mk-rise 0.7s var(--mk-ease);
}
.mk-catalog .mk-fbody {
flex: 1 1 auto;
min-height: 0;
padding: 0 18px 8px 28px;
overflow-y: auto;
scrollbar-width: none;
}
.mk-catalog .mk-fbody::-webkit-scrollbar {
display: none;
}
.mk-catalog .mk-fgroup h4 {
margin: 18px 0 12px;
font: 600 11.5px/1 var(--mk-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fff;
}
.mk-catalog .mk-fopts {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mk-catalog .mk-fopt {
display: inline-flex;
align-items: center;
gap: 8px;
height: 44px;
margin: 0;
padding: 0 18px 0 14px;
font: 600 15px/1 var(--mk-font);
letter-spacing: -0.01em;
color: #fff;
background: #161616;
border: 0;
border-radius: 999px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.5s var(--mk-ease), color 0.5s var(--mk-ease);
}
.mk-catalog .mk-fopt .mk-i {
font-size: 19px;
overflow: visible;
transition: transform 0.6s var(--mk-ease);
}
.mk-catalog .mk-fopt:hover {
background: #222;
} .mk-catalog .mk-fopt.is-active,
.mk-catalog .mk-fopt.is-active:hover {
color: #000;
background: #fff;
}
.mk-catalog .mk-fopt.is-active .mk-i--plus {
transform: rotate(45deg);
}
.mk-catalog .mk-ffoot {
display: flex;
gap: 8px;
padding: 14px 18px 18px;
}
.mk-catalog .mk-ffoot button {
height: 54px;
margin: 0;
font: 700 16px/1 var(--mk-font);
letter-spacing: -0.01em;
border: 0;
border-radius: 999px;
cursor: pointer;
transition: background 0.5s var(--mk-ease), box-shadow 0.6s var(--mk-ease);
}
.mk-catalog .mk-freset {
flex: 0 0 auto;
padding: 0 24px;
color: #fff;
background: #161616;
}
.mk-catalog .mk-freset:hover {
background: #222;
}
.mk-catalog .mk-fshow {
flex: 1;
color: #000;
background: #fff;
}
.mk-catalog .mk-fshow:hover {
box-shadow: 0 0 40px -6px rgba(255, 255, 255, 0.6);
} .mk-catalog .mk-filter.mk-modal {
align-items: end;
padding: 5px;
}
.mk-catalog .mk-filter .mk-fbox {
width: 100%;
max-width: 760px;
margin: 0 auto;
animation: mk-sheet 0.7s var(--mk-ease);
} @media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
.mk-catalog .mk-side,
.mk-catalog .mk-side.is-open {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "top top" "saved search" "filter filter";
gap: 10px 8px;
}
.mk-catalog .mk-nav,
.mk-catalog .mk-tags { display: none; } .mk-catalog .mk-side,
.mk-catalog .mk-side.is-open { padding-top: 0; }
.mk-catalog .mk-brand {
grid-area: top;
gap: 12px;
height: 72px;
min-height: 0;
margin: 0 -3px;
padding: 0 20px;
background: #030303;
}
.mk-catalog .mk-brand .mk-mark {
width: 30px;
height: 30px;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}
.mk-catalog .mk-brand__div { display: block; margin: 0 18px; }
.mk-catalog .mk-menuopen {
margin: 0 0 0 auto;
background: #000;
border-radius: 12px;
}
.mk-catalog .mk-saved .mk-ico .mk-i { transform: none; }
.mk-catalog .mk-filterrow {
grid-area: filter;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.mk-catalog .mk-filterbtn {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 4px;
height: 44px;
margin: 0;
padding: 0 16px 0 6px;
font: 600 15px/1 var(--mk-font);
letter-spacing: -0.01em;
color: #fff;
background: #131313;
border: 0;
border-radius: 999px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.5s var(--mk-ease), color 0.5s var(--mk-ease);
}
.mk-catalog .mk-filterbtn .mk-ico { width: 32px; height: 32px; margin: 0; background: none; }
.mk-catalog .mk-filterbtn .mk-ico .mk-i { font-size: 19px; }
.mk-catalog .mk-filterbtn.is-on { color: #000; background: #fff; } .mk-catalog .mk-fchips {
display: flex;
flex: 1 1 auto;
gap: 8px;
min-width: 0;
margin-right: -3px;
overflow-x: auto;
scrollbar-width: none;
}
.mk-catalog .mk-fchips::-webkit-scrollbar { display: none; }
.mk-catalog .mk-achip {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 6px;
height: 44px;
margin: 0;
padding: 0 12px 0 16px;
font: 600 14px/1 var(--mk-font);
color: #fff;
background: #131313;
border: 0;
border-radius: 999px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mk-catalog .mk-achip .mk-i { font-size: 16px; }
.mk-catalog .mk-fbody { padding: 0 10px 6px 18px; }
} .mk-catalog .mk-modal.is-closing .mk-fbox {
animation: none;
transition: transform 0.22s ease;
} @media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
.mk-catalog .mk-brand { margin: 0 -28px; }
}