/* ============================================================ ManekiNeko Design System — DLE Theme manekineko.cc · Cinemax template override Fonts loaded in via Google Fonts. ============================================================ */ /* ── 1. TOKENS ─────────────────────────────────────────────── */ :root { /* Fonts */ --mn-font-display: 'Unbounded', sans-serif; --mn-font-body: 'Nunito', sans-serif; --mn-font-mono: 'JetBrains Mono', monospace; --mn-font-jp: 'Shippori Mincho B1', serif; /* Surfaces */ --mn-paper: #FFFFFF; --mn-cream: #FBF3E1; --mn-bg: #F0E5D2; --mn-bg-soft: #E8DAC0; --mn-bg-deep: #D9C9A8; /* Ink (plum default) */ --mn-ink: #3D2563; --mn-ink-soft: #5B3A87; --mn-ink-mute: #8C70AE; --mn-ink-faint: #C3B0D6; /* Pink lacquer — CTA ONLY */ --mn-pink-50: #FFE7F0; --mn-pink-100: #FFC4DA; --mn-pink-300: #FF80AE; --mn-pink-500: #EC3D7E; --mn-pink-600: #C8275F; --mn-pink-700: #8A1A41; /* Gold koban */ --mn-gold-50: #FFF4D6; --mn-gold-300: #F2C94C; --mn-gold-500: #E6A832; --mn-gold-700: #A8731B; /* Plum */ --mn-plum-300: #B48CD6; --mn-plum-500: #6E4EA7; --mn-plum-700: #3D2563; /* Status */ --mn-good: #6FCFA0; --mn-warn: #F0B73E; --mn-bad: #DC2D4E; /* Effects — 2px ink outline + hard-offset shadow, no blur */ --mn-stroke-color: var(--mn-ink); --mn-shadow-color: var(--mn-ink); --mn-stroke: 2px solid var(--mn-stroke-color); --mn-stroke-thin: 1.5px solid var(--mn-stroke-color); --mn-shadow: 4px 4px 0 var(--mn-shadow-color); --mn-shadow-sm: 2px 2px 0 var(--mn-shadow-color); --mn-shadow-lg: 6px 6px 0 var(--mn-shadow-color); /* Radii */ --mn-r-sm: 6px; --mn-r-md: 12px; --mn-r-lg: 18px; --mn-r-xl: 24px; --mn-r-pill: 999px; /* Layout */ --mn-maxw: 1440px; --mn-gutter: clamp(16px, 4.5vw, 80px); --mn-header-h: 84px; --mn-header-flow-h: 132px; /* Cinemax variable overrides */ --bg: var(--mn-bg); --bg-brighter: var(--mn-bg-soft); --tt: var(--mn-ink); --tt-brighter: var(--mn-ink); --tt-fader: var(--mn-ink-soft); --tt-fader-gray: var(--mn-ink-mute); --bdc: var(--mn-ink); --bdc-lighter: var(--mn-ink-mute); --accent: var(--mn-pink-500); --accent-text: #fff; --btn-bg: var(--mn-pink-500); --btn-bg-hover: var(--mn-pink-600); --btn-tt: #fff; --ui-bg: var(--mn-paper); --ui-bg-darker: var(--mn-cream); --ui-bg-darkest: var(--mn-bg-soft); --ui-bg-accent: var(--mn-ink); --ui-text-color-on-accent: var(--mn-paper); --ui-bdc: var(--mn-ink-faint); --indent: var(--mn-gutter); --max-width: var(--mn-maxw); --gradient: none; --gradient-top: linear-gradient(to top, var(--mn-bg) 0%, transparent 100%); } /* dark theme support — ink/paper invert */ html[data-theme="dark"] { --mn-bg: #1F1430; --mn-bg-soft: #2A1A42; --mn-bg-deep: #140D24; --mn-cream: #2A1A42; --mn-paper: #2F1F4A; --mn-ink: #E8D5F5; --mn-ink-soft: #C9B0E0; --mn-ink-mute: #9A7CC0; --mn-ink-faint: #6A4E90; --mn-shadow-color: rgba(0,0,0,0.6); --bg: var(--mn-bg); --tt: var(--mn-ink); } /* ── 2. BASE RESET ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { background: var(--mn-bg) !important; color: var(--mn-ink) !important; font-family: var(--mn-font-body) !important; font-size: 15px !important; line-height: 1.55 !important; -webkit-font-smoothing: antialiased !important; letter-spacing: 0 !important; overflow-x: hidden; margin-bottom: 0 !important; padding-bottom: 0 !important; } a { color: var(--mn-ink); text-decoration: none; } a:hover, a:focus { color: var(--mn-pink-500); } h1, h2, h3, h4 { font-family: var(--mn-font-display); letter-spacing: -0.015em; color: var(--mn-ink); } img { max-width: 100%; display: block; } /* Remove Cinemax gradient overlay on .wrapper */ .wrapper::before { display: none !important; } .wrapper { background: var(--mn-bg) !important; min-width: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } .wrapper:has(.mn-collections-hub)::before { content: ''; display: block !important; position: fixed; inset: -18vh -12vw; z-index: 0; pointer-events: none; background: radial-gradient(circle at 16% 5%, color-mix(in srgb, var(--mn-pink-500) 42%, transparent) 0 12%, transparent 30%), radial-gradient(circle at 83% 11%, color-mix(in srgb, var(--mn-gold-300) 46%, transparent) 0 14%, transparent 34%), radial-gradient(circle at 24% 76%, color-mix(in srgb, #9fd6d2 44%, transparent) 0 16%, transparent 38%), radial-gradient(circle at 78% 82%, color-mix(in srgb, #9db8ff 38%, transparent) 0 14%, transparent 36%); filter: blur(46px) saturate(120%); opacity: .64; } .wrapper-container { max-width: var(--mn-maxw) !important; padding: 0 var(--mn-gutter) !important; } .content { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; position: relative; z-index: 2; /* Flex-колонка нужна чтобы order-last работал (site-desc → конец страницы) */ display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* DLE выводит site-desc через {info} в начале DOM, но класс order-last говорит «поставь меня последним». Работает только в flex-родителе. */ .order-last { order: 9999 !important; } /* Ресайл site-desc под ManekiNeko cream-тему (убираем тёмный фон) */ .site-desc { background: var(--mn-cream) !important; color: var(--mn-ink-soft) !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-lg) !important; padding: 32px 36px !important; box-shadow: var(--mn-shadow-sm) !important; margin: 40px 0 0 !important; line-height: 1.65 !important; } .site-desc h1 { color: var(--mn-ink) !important; font-family: var(--mn-font-display) !important; font-size: clamp(20px, 2.6vw, 30px) !important; font-weight: 700 !important; letter-spacing: -0.025em !important; border-left: 4px solid var(--mn-pink-500) !important; padding-left: 14px !important; margin-bottom: 18px !important; line-height: 1.15 !important; } .site-desc h2, .site-desc h3 { color: var(--mn-ink) !important; font-family: var(--mn-font-display) !important; font-weight: 600 !important; margin-top: 24px !important; margin-bottom: 10px !important; } .site-desc p, .site-desc li { color: var(--mn-ink-soft) !important; font-size: 14.5px !important; line-height: 1.65 !important; } .site-desc strong { color: var(--mn-ink) !important; } .site-desc a { color: var(--mn-pink-500) !important; } /* ── 3. LAYOUT WRAP ────────────────────────────────────────── */ .mn-wrap { max-width: var(--mn-maxw); margin: 0 auto; padding: var(--mn-header-flow-h) var(--mn-gutter) 0; } /* ── 4. BRAND ──────────────────────────────────────────────── */ .mn-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; } .mn-brand__mark { display: inline-flex; filter: drop-shadow(2px 2px 0 var(--mn-shadow-color)); flex-shrink: 0; } .mn-brand__mark img { display: block; width: var(--mn-mark-size, 40px); height: var(--mn-mark-size, 40px); object-fit: contain; flex-shrink: 0; } .mn-brand__words { display: flex; flex-direction: column; gap: 1px; line-height: 1; } .mn-brand__wordmark { font-family: var(--mn-font-display); font-weight: 700; font-size: calc(var(--mn-mark-size, 38px) * 0.46); letter-spacing: -0.015em; color: var(--mn-ink); } .mn-brand__dot { color: var(--mn-pink-500); } /* ── 5. HEADER ─────────────────────────────────────────────── */ .mn-header { position: fixed !important; left: 0; right: 0; top: 0; z-index: 100; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; /* декоративный кот выступает за нижний край */ /* border-bottom убран — лишняя линия между шапкой и сабнавом */ transition: background 0.3s ease, backdrop-filter 0.3s ease; } .infull .mn-wrap { padding-top: 0; } .mn-header.is-active { background: rgba(240, 229, 210, 0.58); backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); } .menu-is-opened .mn-header { background: rgba(240, 229, 210, 0.82); backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); } html[data-theme="dark"] .mn-header.is-active, html[data-theme="dark"] .menu-is-opened .mn-header { background: rgba(24, 29, 45, 0.68); } .mn-header__inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; padding: 14px var(--mn-gutter); max-width: var(--mn-maxw); margin: 0 auto; position: relative; /* для позиционирования кота */ } .mn-header__actions { display: flex; align-items: center; gap: 8px; } /* Декоративный кот в правом нижнем углу шапки */ .mn-header__cat-deco { position: absolute; bottom: 0; right: 0; height: 72px; width: auto; display: block; pointer-events: none; user-select: none; transform: translateY(30%); z-index: 2; opacity: 0.85; } /* Search */ .mn-search { position: relative; width: 100%; max-width: 520px; justify-self: center; } .mn-search__input { width: 100% !important; background: var(--mn-paper) !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-pill) !important; padding: 10px 16px 10px 44px !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--mn-font-body) !important; color: var(--mn-ink) !important; outline: none !important; box-shadow: var(--mn-shadow-sm) !important; transition: transform .08s, box-shadow .08s !important; height: auto !important; line-height: normal !important; } .mn-search__input::placeholder { color: var(--mn-ink-mute) !important; font-weight: 500 !important; } .mn-search__input:focus { transform: translate(-1px, -1px) !important; box-shadow: 3px 3px 0 var(--mn-shadow-color) !important; } .mn-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; pointer-events: none; z-index: 1; } .mn-search__kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--mn-font-mono); font-size: 10px; font-weight: 700; color: var(--mn-ink); background: var(--mn-bg-soft); border: 1px solid var(--mn-ink); border-radius: var(--mn-r-sm); padding: 2px 6px; letter-spacing: .06em; text-transform: uppercase; } /* Icon buttons */ .mn-icon-btn { width: 44px; height: 44px; background: var(--mn-paper); border: var(--mn-stroke); border-radius: var(--mn-r-md); box-shadow: var(--mn-shadow-sm); display: grid; place-items: center; transition: transform .08s, box-shadow .08s; cursor: pointer; flex-shrink: 0; } .mn-icon-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--mn-shadow-color); } .mn-icon-btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--mn-shadow-color); } .mn-icon-btn--gold { background: var(--mn-gold-300); } .mn-icon-btn--pink { background: var(--mn-pink-100); } .mn-menu-btn { width: 44px; height: 44px; display: grid; place-items: center; background: var(--mn-paper); border: var(--mn-stroke); border-radius: var(--mn-r-md); box-shadow: var(--mn-shadow-sm); transition: transform .08s, box-shadow .08s; cursor: pointer; flex-shrink: 0; } .mn-menu-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--mn-shadow-color); } .mn-menu-btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--mn-shadow-color); } /* DLE login area */ .mn-header__login-wrap { display: flex; align-items: center; } .mn-header__login-wrap a, .mn-header__login-wrap .header__login-btn--not-logged { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 18px !important; background: var(--mn-pink-500) !important; color: #fff !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-pill) !important; font-family: var(--mn-font-display) !important; font-weight: 600 !important; font-size: 13px !important; box-shadow: var(--mn-shadow-sm) !important; transition: transform .08s, box-shadow .08s !important; text-decoration: none !important; height: auto !important; white-space: nowrap !important; } .mn-header__login-wrap a:hover, .mn-header__login-wrap .header__login-btn--not-logged:hover { transform: translate(-1px,-1px) !important; box-shadow: 3px 3px 0 var(--mn-shadow-color) !important; color: #fff !important; } .mn-header__login-wrap img { border-radius: 50%; width: 36px; height: 36px; object-fit: cover; } /* Header dropdown menu */ .mn-header__menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--mn-bg); border-top: var(--mn-stroke); border-bottom: var(--mn-stroke); z-index: 99; display: none; max-height: calc(100vh - 80px); overflow-y: auto; } .menu-is-opened .mn-header__menu, .mn-header__menu.is-open { display: block; } .mn-header__menu-inner { max-width: var(--mn-maxw); margin: 0 auto; padding: 36px var(--mn-gutter) 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; } .mn-nav-col .mn-nav-title { font-family: var(--mn-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mn-ink-mute); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1.5px dashed var(--mn-ink); } .mn-nav-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .mn-nav-col a { font-family: var(--mn-font-display); font-size: 14px; font-weight: 500; color: var(--mn-ink); transition: color .12s; letter-spacing: -0.005em; } .mn-nav-col a:hover { color: var(--mn-pink-500); } .mn-nav-col .mn-nav-featured { font-weight: 700; color: var(--mn-pink-500) !important; } .mn-subnav { background: transparent; border-bottom: 1.5px solid transparent; position: sticky; top: 84px; /* высота шапки: логотип 56px + padding 14px*2 */ z-index: 90; transition: background 0.3s ease, border-color 0.3s ease; } .mn-header.is-active + .mn-subnav, #header.is-active ~ .content .mn-subnav, #header.is-active ~ .mn-wrap .mn-subnav, .menu-is-opened .mn-subnav { background: transparent; border-bottom-color: transparent; } .mn-subnav__inner { display: flex; align-items: center; gap: 4px; max-width: var(--mn-maxw); margin: 0 auto; padding: 8px var(--mn-gutter); padding-right: max(var(--mn-gutter), 16px); /* хватает места для последнего пункта */ overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mn-subnav__inner::-webkit-scrollbar { display: none; } .mn-subnav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-family: var(--mn-font-display); font-size: 13px; font-weight: 500; color: var(--mn-ink); white-space: nowrap; border-radius: var(--mn-r-md); transition: background .12s; letter-spacing: -0.005em; text-decoration: none !important; } .mn-subnav a:hover { background: var(--mn-pink-50); color: var(--mn-ink); } /* В тёмном режиме розово-прозрачный hover вместо бледного #FFE7F0 */ html[data-theme="dark"] .mn-subnav a:hover { background: rgba(236, 61, 126, 0.18); color: #f9a8d4; } .mn-subnav a.is-active { background: var(--mn-pink-500) !important; color: #fff !important; } .mn-subnav__dot { display: inline-block; width: 7px; height: 7px; background: var(--mn-pink-500); border-radius: 50%; animation: mn-rec-blink 1.6s infinite; flex-shrink: 0; } .mn-subnav a.is-active .mn-subnav__dot { background: #fff; } @keyframes mn-rec-blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.25; } } /* ── 7. SECTION HEADER ─────────────────────────────────────── */ .mn-section-catalog { padding: 40px 0; } .mn-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 2px solid var(--mn-ink); position: relative; } .mn-section__head::after { content: ''; position: absolute; left: 0; bottom: -7px; width: 60px; height: 8px; background: var(--mn-pink-500); border: 2px solid var(--mn-ink); } .mn-section__head h2 { font-family: var(--mn-font-display); font-weight: 700; font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.025em; margin: 0; line-height: 1; } .mn-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mn-font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.02em; text-transform: lowercase; color: var(--mn-pink-600); margin-bottom: 8px; } .mn-eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--mn-pink-500); transform: rotate(45deg); border: 1.5px solid var(--mn-ink); flex-shrink: 0; } /* ── 8. BUTTONS ────────────────────────────────────────────── */ .mn-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; font-family: var(--mn-font-display); font-weight: 600; font-size: 14px; background: var(--mn-pink-500); color: #fff; border: var(--mn-stroke); border-radius: var(--mn-r-pill); box-shadow: var(--mn-shadow-sm); letter-spacing: -0.005em; transition: transform .08s, box-shadow .08s; white-space: nowrap; cursor: pointer; text-decoration: none !important; } .mn-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--mn-shadow-color); color: #fff; } .mn-btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--mn-shadow-color); } .mn-btn:focus, .mn-btn:visited { color: #fff; } .mn-btn__label { display: inline-block; color: inherit; } .mn-btn--ghost { background: var(--mn-paper); color: var(--mn-ink); } .mn-btn--ghost:hover { color: var(--mn-ink); } .mn-btn--ghost:focus, .mn-btn--ghost:visited { color: var(--mn-ink); } .mn-btn--cream { background: var(--mn-cream); color: var(--mn-ink); } .mn-btn--gold { background: var(--mn-gold-300); color: var(--mn-ink); } .mn-btn--big { padding: 16px 26px; font-size: 16px; } .mn-btn--small { padding: 8px 14px; font-size: 12px; } /* Chip */ .mn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-family: var(--mn-font-display); font-size: 12px; font-weight: 600; background: var(--mn-paper); color: var(--mn-ink); border: var(--mn-stroke-thin); border-radius: var(--mn-r-pill); letter-spacing: -0.005em; white-space: nowrap; } .mn-chip--ink { background: var(--mn-ink); color: var(--mn-paper); } .mn-chip--gold { background: var(--mn-gold-300); color: var(--mn-ink); } .mn-chip--pink { background: var(--mn-pink-100); color: var(--mn-ink); } /* ── 9. CATALOG GRID ───────────────────────────────────────── */ .mn-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 22px; } @media (max-width: 1100px) { .mn-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 800px) { .mn-grid { grid-template-columns: repeat(3, 1fr); gap: 22px 14px; } } @media (max-width: 540px) { .mn-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } } /* Collection detail page */ .mn-collection-page { display: block; position: relative; z-index: 4; padding-bottom: clamp(12px, 2vw, 28px); } .mn-collection-page + .sect__content.grid-items { display: none !important; } body:has(.mn-collection-page) .mn-footer--poster, html.mn-collection-detail .mn-footer--poster { margin-top: 0; padding-top: clamp(40px, 5vw, 72px); } .mn-collection-section .js-collections-posts { display: flex; flex-direction: column; gap: 0; position: relative; z-index: 5; padding-bottom: clamp(16px, 3vw, 32px); } .mn-collection-section .js-collections-posts > .grid-items.js-collections-grid { width: 100%; } .mn-collection-section .js-collections-posts > .pagination { width: 100%; position: relative; z-index: 6; margin-top: clamp(12px, 2vw, 24px); padding-top: clamp(20px, 3vw, 40px) !important; padding-bottom: clamp(12px, 2vw, 24px) !important; pointer-events: auto; } .mn-coll-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 240px); gap: clamp(20px, 3vw, 40px); align-items: center; background: transparent; border: 0; padding: clamp(16px, 2.5vw, 36px) 0 clamp(20px, 3vw, 32px); margin: 0; width: 100%; max-width: 100%; } .mn-coll-hero__copy { min-width: 0; max-width: 860px; } .mn-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; color: var(--mn-ink-mute); font-family: var(--mn-font-display); font-size: 12px; font-weight: 700; } .mn-crumbs a { color: var(--mn-ink); text-decoration: none !important; } .mn-crumbs .sep { color: var(--mn-pink-500); } .mn-coll-hero h1 { margin: 0; max-width: 920px; color: var(--mn-ink); font-family: var(--mn-font-display); font-size: clamp(28px, 4.2vw, 48px); font-weight: 800; line-height: 1.05; letter-spacing: 0; } .mn-coll-hero__lead { max-width: 760px; margin-top: 12px; color: var(--mn-ink-soft); font-size: clamp(14px, 1.4vw, 17px); line-height: 1.5; } .mn-coll-hero__lead p { margin: 0; } .mn-coll-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .mn-coll-hero__visual { position: relative; justify-self: end; width: min(100%, 200px); aspect-ratio: 1; display: grid; place-items: center; background: var(--mn-paper); border: var(--mn-stroke); border-radius: 50%; box-shadow: var(--mn-shadow); } .mn-coll-hero__visual::before, .mn-coll-hero__visual::after { content: ''; position: absolute; border: var(--mn-stroke-thin); background: var(--mn-pink-100); box-shadow: var(--mn-shadow-sm); } .mn-coll-hero__visual::before { width: 72px; height: 72px; right: -14px; top: 18px; border-radius: var(--mn-r-md); transform: rotate(9deg); } .mn-coll-hero__visual::after { width: 48px; height: 48px; left: -10px; bottom: 32px; border-radius: 50%; background: var(--mn-gold-300); } .mn-coll-hero__visual img { position: relative; z-index: 1; display: block; width: min(72%, 190px); height: auto; } .mn-collection-section { padding: clamp(20px, 3vw, 40px) 0; position: relative; z-index: 4; } html.mn-collection-detail .mn-wrap { padding-top: calc(var(--mn-header-flow-h) + 2px); } html.mn-collection-detail .sect__content:empty, html.mn-collection-detail .sect__content:has(> script:only-child) { display: none !important; } .mn-collection-section .sect, .mn-collection-section .sect--bg { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .mn-collection-section #dle-content { display: block !important; position: relative; z-index: 4; } .mn-collection-section #dle-content > .grid-items { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 32px 22px !important; } .mn-collection-section .mn-card { position: relative; z-index: 5; pointer-events: auto; } .mn-collection-section .no-news { grid-column: 1 / -1; background: var(--mn-paper); border: var(--mn-stroke); border-radius: var(--mn-r-md); color: var(--mn-ink-soft) !important; box-shadow: var(--mn-shadow-sm); } @media (max-width: 1100px) { .mn-collection-section #dle-content > .grid-items { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 800px) { .mn-coll-hero { grid-template-columns: 1fr; gap: 14px; } .mn-coll-hero__visual { display: none; } .mn-collection-section #dle-content > .grid-items { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px 14px !important; } } @media (max-width: 540px) { html.mn-collection-detail .mn-coll-hero { padding: 8px 0 16px; gap: 10px; } html.mn-collection-detail .mn-crumbs { font-size: 10px; margin-bottom: 8px; } html.mn-collection-detail .mn-coll-hero h1 { font-size: clamp(24px, 6.8vw, 30px); } html.mn-collection-detail .mn-coll-hero__lead { font-size: 13px; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html.mn-collection-detail .mn-coll-hero__actions { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } html.mn-collection-detail .mn-coll-hero__actions .mn-btn { width: auto; justify-content: center; padding: 10px 12px; font-size: 13px; } html.mn-collection-detail .mn-collection-section .mn-section__head { display: none; } html.mn-collection-detail .mn-collection-section { padding-top: 8px; } .mn-coll-hero__actions { width: 100%; } .mn-collection-section #dle-content > .grid-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 12px !important; } } /* ── 10. CARDS ─────────────────────────────────────────────── */ .mn-card { position: relative; display: flex; flex-direction: column; cursor: pointer; text-decoration: none !important; color: var(--mn-ink) !important; } .mn-card__poster { position: relative; aspect-ratio: 2 / 3; border-radius: var(--mn-r-md); overflow: hidden; background: var(--mn-bg-soft); border: var(--mn-stroke); box-shadow: var(--mn-shadow); } .mn-card__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .mn-card:hover .mn-card__poster img, .mn-card:focus-visible .mn-card__poster img, .mn-card:focus-within .mn-card__poster img { transform: scale(1.035); } /* Rating badge (sticker) */ .mn-rating { position: absolute; top: 8px; left: 8px; background: var(--mn-gold-300); color: var(--mn-ink); font-family: var(--mn-font-display); font-weight: 800; font-size: 13px; padding: 4px 10px 4px 8px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 4px; z-index: 2; border: 1.5px solid var(--mn-ink); border-radius: var(--mn-r-sm); transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--mn-shadow-color); } .mn-rating a { color: inherit; text-decoration: none; } .mn-rating__star { color: var(--mn-pink-600); } .mn-rating--gold { background: var(--mn-gold-300); } .mn-rating--mint { background: #6FCFA0; } .mn-rating--pink { background: var(--mn-pink-100); } /* Kind tag (type badge) */ .mn-kindtag { position: absolute; top: 10px; right: 10px; background: var(--mn-paper); border: 1.5px solid var(--mn-ink); font-family: var(--mn-font-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mn-ink); padding: 3px 7px; border-radius: var(--mn-r-sm); z-index: 2; box-shadow: 1.5px 1.5px 0 var(--mn-shadow-color); } .mn-kindtag a { color: inherit; text-decoration: none; } .mn-kindtag--ongoing { background: var(--mn-pink-500); color: #fff; border-color: var(--mn-pink-700); } /* Hover play overlay */ .mn-card__hover { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .2s; z-index: 3; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35)); } .mn-card:hover .mn-card__hover { opacity: 1; } .mn-card__play { width: 56px; height: 56px; border-radius: 50%; background: var(--mn-pink-500); border: 2px solid var(--mn-ink); box-shadow: 3px 3px 0 var(--mn-shadow-color); display: grid; place-items: center; transition: transform .15s; } .mn-card:hover .mn-card__play { transform: scale(1.06); } .mn-card__info-btn { position: absolute; top: 10px; right: 10px; z-index: 4; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--mn-ink); border-radius: 50%; background: var(--mn-paper); color: var(--mn-ink); box-shadow: 2px 2px 0 var(--mn-shadow-color); opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, background .18s ease; } .mn-card:hover .mn-card__info-btn, .mn-card__info-btn:focus-visible { opacity: 1; transform: translateY(0); } .mn-card__info-btn:hover { background: var(--mn-pink-500); color: #fff; } /* Card meta */ .mn-card__meta { padding: 12px 2px 4px; display: flex; flex-direction: column; gap: 4px; } .mn-card__title { font-family: var(--mn-font-display); font-weight: 600; font-size: 13px; color: var(--mn-ink); letter-spacing: -0.01em; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mn-card__sub { font-family: var(--mn-font-mono); font-size: 10px; color: var(--mn-ink-mute); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; letter-spacing: 0.02em; } .mn-card__sub a { color: var(--mn-ink-mute); text-decoration: none; } .mn-card__dot { color: var(--mn-ink-faint); } .mn-card__genre { color: var(--mn-pink-600); text-transform: uppercase; font-size: 9px; letter-spacing: 0.1em; font-weight: 700; } .mn-card__genre a { color: var(--mn-pink-600); text-decoration: none; } /* Quick title drawer */ .poster-ext { top: 0 !important; width: min(430px, 100vw) !important; height: 100vh !important; padding: 34px 32px 42px !important; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68)), var(--mn-paper) !important; border-left: 3px solid var(--mn-ink) !important; color: var(--mn-ink) !important; box-shadow: -14px 0 0 rgba(53, 31, 89, .14), -22px 0 42px rgba(53, 31, 89, .22) !important; } .pop-left .poster-ext { border-left: 0 !important; border-right: 3px solid var(--mn-ink) !important; box-shadow: 14px 0 0 rgba(53, 31, 89, .14), 22px 0 42px rgba(53, 31, 89, .22) !important; } .poster-ext:not(.not-loaded)::after { display: none !important; } .poster-ext__close-btn { top: 22px !important; right: 22px !important; width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid var(--mn-ink); border-radius: var(--mn-r-md); background: var(--mn-paper); color: var(--mn-ink) !important; box-shadow: 2px 2px 0 var(--mn-shadow-color); opacity: 1 !important; font-size: 20px !important; } .poster-ext__close-btn:hover { background: var(--mn-pink-500); color: #fff !important; } .poster-ext .pmovie__header { margin: 0 46px 18px 0 !important; padding: 0 !important; background: transparent !important; } .poster-ext .pmovie__header-main { display: block !important; } .poster-ext .pmovie__header-main > .flex-grow-1 { font-family: var(--mn-font-display); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--mn-ink); padding-right: 4px; } .poster-ext .mn-rating-row { margin: 12px 0 0 !important; gap: 8px !important; } .poster-ext .mn-rating-pill { padding: 6px 10px !important; border-radius: var(--mn-r-sm) !important; } .poster-ext .pmovie__original { margin-top: 14px !important; color: var(--mn-ink-mute) !important; font-family: var(--mn-font-mono) !important; font-size: 11px !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .poster-ext .pmovie__main { display: block !important; margin: 0 !important; padding: 0 !important; } .poster-ext .pmovie__list { margin-top: 16px !important; row-gap: 10px !important; } .poster-ext .pmovie__list li > span:last-child { color: var(--mn-ink-soft) !important; } .poster-ext .pmovie__text { margin-top: 22px !important; padding-top: 18px; border-top: 2px solid rgba(53, 31, 89, .18); display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; } .poster-ext.not-loaded { color: var(--mn-ink) !important; background: var(--mn-paper) !important; } /* ── 11. FILTER BAR ────────────────────────────────────────── */ .mn-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0 24px; } .mn-dropdown { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 16px; background: var(--mn-paper); border: var(--mn-stroke); border-radius: var(--mn-r-md); box-shadow: var(--mn-shadow-sm); transition: transform .08s, box-shadow .08s; cursor: pointer; } .mn-dropdown:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--mn-shadow-color); } .mn-dropdown__label { display: block; font-family: var(--mn-font-mono); font-size: 10px; text-transform: uppercase; color: var(--mn-ink-mute); letter-spacing: 0.12em; margin-bottom: 1px; font-weight: 700; } .mn-dropdown__val { font-family: var(--mn-font-display); font-size: 13px; font-weight: 600; color: var(--mn-ink); } /* DLE nice-select overrides */ .filter-block { padding: 0; margin-top: 0 !important; position: relative; z-index: 20; width: 100%; } .filter-block__form { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; padding: 8px 0 24px; } .filter-block__cell { display: inline-flex; flex-direction: column; gap: 2px; background: var(--mn-paper); border: var(--mn-stroke); border-radius: var(--mn-r-md); box-shadow: var(--mn-shadow-sm); padding: 8px 14px 8px 16px; transition: transform .08s, box-shadow .08s; } .filter-block__cell:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--mn-shadow-color); } .filter-block__cell-caption { font-family: var(--mn-font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mn-ink-mute); } .filter-block__cell select { font-family: var(--mn-font-display) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--mn-ink) !important; background: transparent !important; border: none !important; box-shadow: none !important; height: auto !important; padding: 0 !important; cursor: pointer; width: auto !important; min-width: 120px; } .filter-block__cell select:focus { box-shadow: none !important; outline: none !important; } /* Nice-select (if loaded) */ .nice-select { border: none !important; background: transparent !important; padding: 0 !important; height: auto !important; line-height: normal !important; font-family: var(--mn-font-display) !important; font-weight: 600 !important; font-size: 13px !important; } /* ── 12. SEO BLOCK ─────────────────────────────────────────── */ .mn-seo { background: var(--mn-cream); border: var(--mn-stroke); border-radius: var(--mn-r-xl); padding: 40px 44px; box-shadow: var(--mn-shadow-lg); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin: 40px 0; position: relative; } .mn-seo h1, .mn-seo h2, .mn-seo h3 { font-family: var(--mn-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 12px; } .mn-seo p { color: var(--mn-ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; } .mn-seo strong { color: var(--mn-ink); font-weight: 700; } .mn-seo ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .mn-seo ul li { font-size: 14px; color: var(--mn-ink-soft); line-height: 1.55; padding-left: 32px; position: relative; } .mn-seo ul li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: var(--mn-pink-500); border: 1.5px solid var(--mn-ink); border-radius: 4px; box-shadow: 2px 2px 0 var(--mn-shadow-color); } @media (max-width: 800px) { .mn-seo { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; } } /* Category SEO block */ .mn-seo-cat { margin-top: 40px; padding: 28px 32px; background: var(--mn-cream); border: var(--mn-stroke); border-radius: var(--mn-r-lg); box-shadow: var(--mn-shadow-sm); font-size: 14.5px; color: var(--mn-ink-soft); line-height: 1.65; } .mn-seo-cat h1, .mn-seo-cat h2, .mn-seo-cat h3 { font-family: var(--mn-font-display); font-weight: 700; font-size: 18px; color: var(--mn-ink); margin-bottom: 10px; } /* ── 13. PAGINATION ────────────────────────────────────────── */ .mn-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 40px 0; flex-wrap: wrap; } .mn-pagination a, .mn-pagination span.current, .mn-pagination button { min-width: 40px; height: 40px; background: var(--mn-paper); border: var(--mn-stroke); border-radius: var(--mn-r-md); font-family: var(--mn-font-display); font-size: 14px; font-weight: 600; color: var(--mn-ink); display: grid; place-items: center; transition: transform .08s, box-shadow .08s; padding: 0 10px; font-variant-numeric: tabular-nums; box-shadow: var(--mn-shadow-sm); text-decoration: none !important; } .mn-pagination a:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--mn-shadow-color); color: var(--mn-ink); } .mn-pagination span.current, .mn-pagination a.is-active { background: var(--mn-pink-500) !important; color: #fff !important; } .mn-pagination .mn-pag-prev, .mn-pagination .mn-pag-next { background: var(--mn-paper); color: var(--mn-ink); } .mn-pagination .ellipsis { color: var(--mn-ink-mute); padding: 0 4px; font-family: var(--mn-font-mono); font-weight: 700; min-width: auto; background: none; border: none; box-shadow: none; font-size: 14px; } /* ── 14. FOOTER ────────────────────────────────────────────── */ .mn-footer { border-top: 0; background: transparent; padding: 28px 0 0; margin-top: 8px; margin-bottom: 0 !important; position: relative; overflow: visible; isolation: isolate; } .mn-footer--poster { padding: clamp(84px, 8vw, 128px) 0 0; margin-top: clamp(-72px, -4vw, -28px); } .mn-footer--poster::before { content: ''; position: absolute; left: 50%; right: auto; bottom: 0; width: 100vw; height: clamp(720px, 78vw, 1120px); z-index: 0; background-image: var(--mn-title-poster-bg, none); background-size: cover; background-repeat: no-repeat; background-position: center center; filter: blur(34px) saturate(145%) contrast(1.08); opacity: .16; -webkit-mask-image: linear-gradient( 180deg, transparent 0%, #000 18%, #000 82%, transparent 100% ); mask-image: linear-gradient( 180deg, transparent 0%, #000 18%, #000 82%, transparent 100% ); transform: translateX(-50%) scale(1.14); } .mn-footer--poster::after { content: none; } html[data-theme="dark"] .mn-footer--poster::before { opacity: .22; } html[data-theme="dark"] .mn-footer--poster::after { content: none; } .mn-footer__big-cat { position: absolute; right: -20px; top: 20px; width: 240px; opacity: 0.1; pointer-events: none; transform: rotate(8deg); z-index: 2; } .mn-footer__inner { max-width: var(--mn-maxw); margin: 0 auto; padding: 0 var(--mn-gutter); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; position: relative; z-index: 2; } .mn-footer__col h4 { font-family: var(--mn-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mn-ink-mute); margin: 0 0 16px; } .mn-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; } .mn-footer__col a { font-family: var(--mn-font-display); font-size: 13px; font-weight: 500; color: var(--mn-ink); transition: color .12s; } .mn-footer__col a:hover { color: var(--mn-pink-500); } .mn-footer__brand-text { font-size: 13px; color: var(--mn-ink-soft); line-height: 1.6; max-width: 36ch; margin-top: 14px; } .mn-footer__legal { max-width: var(--mn-maxw); margin: 24px auto 0; padding: 14px var(--mn-gutter) 10px; border-top: 0; display: flex; justify-content: space-between; font-family: var(--mn-font-mono); font-size: 11px; color: var(--mn-ink-mute); letter-spacing: 0.04em; position: relative; z-index: 2; } .mn-footer__legal .jp { font-family: var(--mn-font-jp); color: var(--mn-ink); font-size: 14px; } @media (max-width: 900px) { .mn-footer__inner { grid-template-columns: 1fr 1fr; } .mn-footer__legal { flex-direction: column; gap: 8px; } .mn-footer__big-cat { width: 140px; opacity: 0.08; } } /* ── 15. FLOATING SCROLL BUTTON ────────────────────────────── */ .mn-cat-float { position: fixed; bottom: 22px; right: 22px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--mn-gold-500); border: 2px solid var(--mn-ink); border-radius: 50%; box-shadow: 2px 3px 0 var(--mn-shadow-color); z-index: 60; cursor: pointer; transition: transform .18s ease, background .12s ease, box-shadow .12s ease; text-decoration: none !important; } .mn-cat-float img { display: none !important; } .mn-cat-float:hover { background: var(--mn-yellow-400); transform: translateY(-3px); box-shadow: 3px 4px 0 var(--mn-shadow-color); } .mn-cat-float::after { content: '↑'; position: static; width: auto; height: auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; font-family: var(--mn-font-mono); font-weight: 800; font-size: 24px; color: var(--mn-ink); line-height: 1; padding-bottom: 2px; transition: transform .2s; } .mn-cat-float:hover::after { transform: translateY(-1px); } /* ── 16. TITLE PAGE (FULLSTORY) ────────────────────────────── */ .mn-title-page { padding-bottom: 12px; } .mn-title-hero { background: transparent; border-bottom: 0; position: relative; overflow: visible; /* Full-bleed: выходим за padding mn-wrap И за авто-margin центрированного контейнера */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: -1px; } .mn-title-hero::after { content: none; } .mn-title-hero__bg { display: none; } .mn-title-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: blur(34px) saturate(158%) contrast(1.14) brightness(1.08); transform: scale(1.14); /* cover + запас под blur, чтобы не было краёв */ } html[data-theme="dark"] .mn-title-hero__bg { opacity: .46; } html[data-theme="dark"] .mn-title-hero::after { content: none; } .mn-title-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 300px 1fr; gap: 56px; padding: calc(var(--mn-header-h) + 56px) var(--mn-gutter) 56px; max-width: var(--mn-maxw); margin: 0 auto; } .mn-title-poster { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 2/3; border: var(--mn-stroke); box-shadow: var(--mn-shadow-lg); background: var(--mn-bg-soft); align-self: start; /* не растягивать до высоты грид-строки */ width: 100%; } .mn-title-poster img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Breadcrumbs */ .mn-crumbs { font-family: var(--mn-font-mono); font-size: 11px; color: var(--mn-ink-mute); letter-spacing: 0.06em; text-transform: uppercase; display: flex; gap: 10px; margin-bottom: 16px; align-items: center; font-weight: 600; flex-wrap: wrap; } .mn-crumbs a { color: var(--mn-ink-mute); } .mn-crumbs a:hover { color: var(--mn-pink-500); } .mn-crumbs .sep { color: var(--mn-ink-faint); } /* Title info */ .mn-title-info h1 { font-family: var(--mn-font-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 60px); letter-spacing: -0.035em; line-height: 1; margin: 0 0 6px; text-wrap: balance; } .mn-title-info__romaji { font-family: var(--mn-font-display); font-size: 16px; color: var(--mn-ink-mute); letter-spacing: -0.005em; margin-bottom: 22px; font-weight: 500; font-style: italic; display: inline-flex; align-items: center; gap: 10px; } .mn-title-info__romaji small { font-style: normal; font-family: var(--mn-font-mono); color: var(--mn-ink-faint); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; font-weight: 700; } /* Rating row */ .mn-rating-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .mn-rating-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--mn-paper); border: var(--mn-stroke); border-radius: var(--mn-r-md); box-shadow: var(--mn-shadow-sm); } .mn-rating-pill__label { font-family: var(--mn-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mn-ink-mute); font-weight: 700; } .mn-rating-pill__score { font-family: var(--mn-font-display); font-weight: 800; font-size: 20px; color: var(--mn-pink-600); letter-spacing: -0.02em; } .mn-rating-pill__score.gold { color: var(--mn-gold-700); } /* Meta dl/dt/dd */ .mn-title-meta { display: grid; grid-template-columns: max-content 1fr; column-gap: 18px; row-gap: 7px; margin-bottom: 20px; font-size: 14px; } .mn-title-meta dt { color: var(--mn-ink-mute); font-family: var(--mn-font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; } .mn-title-meta dd { margin: 0; color: var(--mn-ink); font-weight: 500; } .mn-title-meta dd a { color: var(--mn-ink-soft); } .mn-title-meta dd a:hover { color: var(--mn-pink-500); } .mn-title-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; } /* ── 17. PLAYER SECTION ────────────────────────────────────── */ .mn-player-section { /* находится внутри mn-wrap, горизонтальный gutter уже есть на родителе */ padding: 36px 0 0; position: relative; z-index: 3; } .mn-player-tabs { display: flex; align-items: center; justify-content: space-between; border: 0; order: 1; border-radius: 0; margin: -12px 0 -2px; padding: 0 0 0 24px; flex-wrap: wrap; gap: 8px; background: transparent; overflow: visible; } .mn-player-tabs__left { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .mn-player-tab { padding: 10px 18px 12px; font-family: var(--mn-font-display); font-size: 13px; font-weight: 600; color: var(--mn-ink); position: relative; display: inline-flex; align-items: center; gap: 8px; transition: color .12s; background: transparent; border: var(--mn-stroke); border-bottom: none; border-radius: var(--mn-r-md) var(--mn-r-md) 0 0; cursor: pointer; letter-spacing: -0.005em; } .mn-player-tab:hover { background: var(--mn-cream); color: var(--mn-ink); } .mn-player-tab.is-active { background: var(--mn-paper); border-color: var(--mn-ink); margin-bottom: 0; position: relative; z-index: 3; } .mn-player-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--mn-paper); } .mn-player-tab .badge { font-family: var(--mn-font-mono); font-size: 9px; background: var(--mn-bg-soft); color: var(--mn-ink); padding: 2px 6px; border-radius: var(--mn-r-sm); font-weight: 700; letter-spacing: 0.06em; border: 1px solid var(--mn-ink); } .mn-player-tab.is-active .badge { background: var(--mn-pink-500); color: #fff; border-color: var(--mn-pink-700); } .mn-player-tabs__right { font-family: var(--mn-font-mono); font-size: 11px; color: var(--mn-ink-mute); display: flex; gap: 14px; padding: 10px 0 8px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; } .mn-player-tabs__right a { color: var(--mn-bad); } /* Player frame — самостоятельный бокс (по дизайну, .pmovie__player — прозрачный враппер) */ .mn-player-frame { order: 2; position: relative; z-index: 3; background: #000; border-radius: var(--mn-r-md); overflow: hidden; border: var(--mn-stroke); box-shadow: var(--mn-shadow); margin-bottom: 14px; } /* responsive 16:9 */ .mn-player-frame .video-responsive { position: relative; padding-top: 56.25%; width: 100%; } .mn-player-frame .video-responsive iframe, .mn-player-frame .video-responsive .alive-player-embed { position: absolute; inset: 0; width: 100%; height: 100%; } /* ── 18. DESCRIPTION & TAGS ────────────────────────────────── */ .mn-title-body { /* находится внутри mn-wrap, горизонтальный gutter уже на родителе */ padding: 0; position: relative; z-index: 3; } .mn-title-desc { padding: 36px 0; display: grid; grid-template-columns: minmax(0, 65%) minmax(0, 35%); gap: 34px; } .mn-title-desc__body, .mn-title-desc__text { font-size: 15.5px; line-height: 1.7; color: var(--mn-ink); max-width: none; } .mn-title-desc__body p, .mn-title-desc__text p { margin: 0 0 16px; } .mn-title-desc__body p:first-child::first-letter, .mn-title-desc__text p:first-child::first-letter { font-family: var(--mn-font-display); font-size: 60px; font-weight: 800; float: left; line-height: .85; padding-right: 12px; padding-top: 6px; color: var(--mn-pink-500); letter-spacing: -0.03em; } .mn-title-desc__side { border-left: 2px solid var(--mn-ink); padding-left: 28px; } .mn-title-desc__side--rail { align-self: start; border-left: 2px solid var(--mn-ink); border-top: 0; padding: 0 0 0 28px; margin: 0; } .mn-title-desc__side h3 { font-family: var(--mn-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mn-ink-mute); margin: 0 0 12px; font-weight: 700; } .mn-title-desc__side--rail .sb { margin-top: 0 !important; margin-bottom: 30px !important; } .mn-title-desc__side--rail .sb__content--grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; gap: 16px 14px !important; } .mn-title-desc__side--rail .popular-item-grid { color: var(--mn-ink) !important; font-family: var(--mn-font-body) !important; } .mn-title-desc__side--rail .popular-item-grid__img { border: 3px solid var(--mn-ink) !important; border-radius: var(--mn-r-md) !important; background: var(--mn-surface) !important; box-shadow: 3px 3px 0 var(--mn-shadow-color) !important; overflow: hidden !important; transition: none !important; } .mn-title-desc__side--rail .popular-item-grid:hover .popular-item-grid__img { box-shadow: 3px 3px 0 var(--mn-shadow-color) !important; transform: none !important; } .mn-title-desc__side--rail .popular-item-grid__img img { transition: transform .28s ease !important; } .mn-title-desc__side--rail .popular-item-grid:hover .popular-item-grid__img img { transform: scale(1.035) !important; } .mn-title-desc__side--rail .popular-item-grid__rating { top: 7px !important; left: 7px !important; display: inline-flex !important; align-items: center !important; gap: 3px !important; min-height: 26px !important; padding: 4px 9px !important; border: 3px solid var(--mn-ink) !important; border-radius: 7px !important; background: var(--mn-yellow-400, #ffd84d) !important; background-color: var(--mn-yellow-400, #ffd84d) !important; box-shadow: 1.5px 1.5px 0 var(--mn-shadow-color) !important; color: var(--mn-ink) !important; font-family: var(--mn-font-display) !important; font-size: 13px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; transform: rotate(-3deg) !important; } .mn-title-desc__side--rail .popular-item-grid__rating-star { color: var(--mn-pink-500) !important; font-size: .92em !important; line-height: 1 !important; } .mn-title-desc__side--rail .popular-item-grid__title { margin-top: 10px !important; height: auto !important; min-height: 2.7em !important; color: var(--mn-ink) !important; font-family: var(--mn-font-display) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: 0 !important; } html[data-theme="dark"] .mn-title-desc__side--rail .popular-item-grid { color: var(--mn-dark-text) !important; } html[data-theme="dark"] .mn-title-desc__side--rail .popular-item-grid__img { border-color: var(--mn-dark-stroke) !important; background: var(--mn-dark-surface) !important; box-shadow: 3px 3px 0 rgba(0,0,0,.38) !important; } html[data-theme="dark"] .mn-title-desc__side--rail .popular-item-grid:hover .popular-item-grid__img { box-shadow: 3px 3px 0 rgba(0,0,0,.38) !important; } html[data-theme="dark"] .mn-title-desc__side--rail .popular-item-grid__rating { border-color: var(--mn-dark-stroke) !important; background: var(--mn-yellow-400, #ffd84d) !important; background-color: var(--mn-yellow-400, #ffd84d) !important; box-shadow: 1.5px 1.5px 0 rgba(0,0,0,.42) !important; } html[data-theme="dark"] .mn-title-desc__side--rail .popular-item-grid__title { color: var(--mn-dark-text) !important; } .mn-title-desc .title-faq { margin: 34px 0 0 !important; padding-top: 30px !important; border-top: 2px solid var(--mn-ink) !important; } .mn-title-desc .title-faq > h2 { margin: 0 0 18px !important; font-family: var(--mn-font-mono) !important; font-size: clamp(18px, 2.2vw, 24px) !important; line-height: 1.18 !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--mn-pink-500) !important; } .mn-title-desc .title-faq__list { display: grid !important; gap: 10px !important; } .mn-title-desc .title-faq__item { margin: 0 !important; overflow: hidden !important; border: 2px solid var(--mn-ink) !important; border-radius: var(--mn-r-md) !important; background: color-mix(in srgb, var(--mn-paper) 82%, white 18%) !important; box-shadow: 4px 4px 0 color-mix(in srgb, var(--mn-ink) 18%, transparent) !important; transition: transform .12s ease, box-shadow .12s ease, background .12s ease !important; } .mn-title-desc .title-faq__item[open] { border-color: var(--mn-ink) !important; background: var(--mn-paper) !important; box-shadow: 5px 5px 0 color-mix(in srgb, var(--mn-ink) 24%, transparent) !important; } .mn-title-desc .title-faq__q { min-height: 52px !important; padding: 14px 18px !important; gap: 18px !important; font-family: var(--mn-font-display) !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 700 !important; color: var(--mn-ink) !important; background: transparent !important; } .mn-title-desc .title-faq__q:hover { background: color-mix(in srgb, var(--mn-pink-500) 9%, transparent) !important; } .mn-title-desc .title-faq__item[open] .title-faq__q { border-bottom: 2px solid var(--mn-ink) !important; } .mn-title-desc .title-faq__a { padding: 16px 18px 18px !important; font-size: 14px !important; line-height: 1.65 !important; color: var(--mn-ink-soft) !important; background: color-mix(in srgb, var(--mn-cream) 64%, transparent) !important; opacity: 1 !important; } .mn-title-desc .title-faq__item .faq-icon { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border: 2px solid var(--mn-ink) !important; border-radius: 50% !important; background: var(--mn-yellow-400) !important; color: var(--mn-ink) !important; font-size: 10px !important; opacity: 1 !important; transition: transform .16s ease, background .12s ease !important; } .mn-title-desc .title-faq__item[open] .faq-icon { background: var(--mn-pink-500) !important; color: #fff !important; } html[data-theme="dark"] .mn-title-desc .title-faq__item { background: color-mix(in srgb, var(--mn-paper) 88%, white 12%) !important; box-shadow: 4px 4px 0 rgba(255,255,255,.08) !important; } html[data-theme="dark"] .mn-title-desc .title-faq__a { background: rgba(255,255,255,.04) !important; } .mn-title-desc .episode-sidebar-seo { margin: 30px 0 0 !important; padding-top: 26px !important; border-top: 2px solid var(--mn-ink) !important; } .mn-title-desc .episode-sidebar-seo > summary { cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; min-height: 48px !important; padding: 12px 16px !important; border: 2px solid var(--mn-ink) !important; border-radius: var(--mn-r-md) !important; background: var(--mn-paper) !important; color: var(--mn-ink) !important; font-family: var(--mn-font-mono) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .1em !important; line-height: 1.2 !important; text-transform: uppercase !important; list-style: none !important; box-shadow: none !important; } .mn-title-desc .episode-sidebar-seo > summary::-webkit-details-marker { display: none !important; } .mn-title-desc .episode-sidebar-seo > summary::after { content: '▼'; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--mn-ink); border-radius: 50%; background: var(--mn-yellow-400); color: var(--mn-ink); font-size: 10px; transition: transform .16s ease, background .12s ease, color .12s ease; } .mn-title-desc .episode-sidebar-seo[open] > summary { border-radius: var(--mn-r-md) var(--mn-r-md) 0 0 !important; margin-bottom: 0 !important; } .mn-title-desc .episode-sidebar-seo[open] > summary::after { transform: rotate(180deg); background: var(--mn-pink-500); color: #fff; } .mn-title-desc .episode-sidebar-seo .sb { margin: 0 !important; padding: 12px 16px 14px !important; border-width: 0 2px !important; border-style: solid !important; border-color: var(--mn-ink) !important; border-radius: 0 !important; background: var(--mn-paper) !important; } .mn-title-desc .episode-sidebar-seo .sb + .sb { border-top: 0 !important; border-bottom: 2px solid var(--mn-ink) !important; border-radius: 0 0 var(--mn-r-md) var(--mn-r-md) !important; } .mn-title-desc .episode-sidebar-seo .sb:last-child { border-bottom: 2px solid var(--mn-ink) !important; border-radius: 0 0 var(--mn-r-md) var(--mn-r-md) !important; } .mn-title-desc .episode-sidebar-seo .sb__title { font-family: var(--mn-font-mono) !important; font-size: 10px !important; letter-spacing: .14em !important; color: var(--mn-pink-500) !important; margin: 0 0 10px !important; padding: 0 !important; border-bottom: 0 !important; } .mn-title-desc .episode-sidebar-seo .sb__nav, .mn-title-desc .episode-sidebar-seo .sidebar-episodes-list.active-list { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important; gap: 8px !important; } .mn-title-desc .episode-sidebar-seo .episode-seasons-block, .mn-title-desc .episode-sidebar-seo .episode-episodes-block, .mn-title-desc .episode-sidebar-seo .season-wrapper { margin-top: 0 !important; margin-bottom: 0 !important; } .mn-title-desc .episode-sidebar-seo .season-item a, .mn-title-desc .episode-sidebar-seo .episode-item a { min-height: 30px !important; height: auto !important; border: 2px solid var(--mn-ink) !important; border-radius: var(--mn-r-sm) !important; background: var(--mn-paper) !important; color: var(--mn-ink) !important; font-family: var(--mn-font-display) !important; font-size: 10.5px !important; font-weight: 700 !important; box-shadow: none !important; } .mn-title-desc .episode-sidebar-seo .season-item a:hover, .mn-title-desc .episode-sidebar-seo .episode-item a:hover { background: var(--mn-yellow-400) !important; color: var(--mn-ink) !important; transform: translate(-1px, -1px) !important; box-shadow: 2px 2px 0 var(--mn-ink) !important; } .mn-title-desc .episode-sidebar-seo .season-item.active-season a, .mn-title-desc .episode-sidebar-seo .episode-item.active-episode a { background: var(--mn-pink-500) !important; color: #fff !important; } html[data-theme="dark"] .mn-title-desc .episode-sidebar-seo .sb { background: color-mix(in srgb, var(--mn-paper) 88%, white 12%) !important; } .mn-title-desc .related-cats { margin: 30px 0 0 !important; padding-top: 26px !important; border-top: 2px solid var(--mn-ink) !important; } .mn-title-desc .related-cats > h3 { margin: 0 0 14px !important; font-family: var(--mn-font-mono) !important; font-size: clamp(16px, 1.9vw, 20px) !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--mn-pink-500) !important; } .mn-title-desc .related-cats__grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } .mn-title-desc .related-cats__item { margin: 0 !important; padding: 0 !important; list-style: none !important; } .mn-title-desc .related-cats__item::before { display: none !important; } .mn-title-desc .related-cats__item a { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 8px 12px !important; border: 2px solid var(--mn-ink) !important; border-radius: var(--mn-r-sm) !important; background: var(--mn-paper) !important; color: var(--mn-ink) !important; font-family: var(--mn-font-display) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; transition: transform .08s ease, box-shadow .1s ease, background .1s ease, color .1s ease !important; } .mn-title-desc .related-cats__item a:hover { background: var(--mn-yellow-400) !important; color: var(--mn-ink) !important; border-color: var(--mn-ink) !important; transform: translate(-1px, -1px) !important; box-shadow: 3px 3px 0 var(--mn-ink) !important; } .mn-title-desc .related-cats__item a:active { transform: translate(1px, 1px) !important; box-shadow: 1px 1px 0 var(--mn-ink) !important; } html[data-theme="dark"] .mn-title-desc .related-cats__item a { background: color-mix(in srgb, var(--mn-paper) 90%, white 10%) !important; } html[data-theme="dark"] .mn-title-desc .related-cats__item a:hover { background: var(--mn-pink-500) !important; color: #fff !important; } .mn-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .mn-tag-cloud a { display: inline-flex; padding: 5px 12px; font-family: var(--mn-font-display); font-size: 12px; font-weight: 600; background: var(--mn-paper); color: var(--mn-ink); border: var(--mn-stroke-thin); border-radius: var(--mn-r-pill); letter-spacing: -0.005em; transition: background .12s, transform .08s; } .mn-tag-cloud a:hover { background: var(--mn-pink-50); transform: translate(-1px,-1px); } /* ── 19. EPISODE LIST ──────────────────────────────────────── */ .mn-episodes-section { padding: 36px 0; border-bottom: 2px solid var(--mn-ink); } .mn-episodes-section h2 { font-family: var(--mn-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 20px; } .mn-ep-list { display: flex; flex-direction: column; gap: 1px; background: var(--mn-ink); border-radius: var(--mn-r-md); overflow: hidden; border: var(--mn-stroke); box-shadow: var(--mn-shadow-sm); } .mn-ep-row { display: grid; grid-template-columns: 48px 160px 1fr 100px 80px; align-items: center; gap: 18px; background: var(--mn-paper); padding: 14px 20px; cursor: pointer; transition: background .12s; text-decoration: none !important; color: var(--mn-ink) !important; } .mn-ep-row:hover { background: var(--mn-cream); } .mn-ep-row__num { font-family: var(--mn-font-display); font-weight: 800; font-size: 17px; color: var(--mn-ink-mute); font-variant-numeric: tabular-nums; } .mn-ep-row.is-current .mn-ep-row__num { color: var(--mn-pink-500); } .mn-ep-row__thumb { width: 100%; aspect-ratio: 16/9; border-radius: var(--mn-r-sm); border: 1.5px solid var(--mn-ink); background: var(--mn-bg-soft); overflow: hidden; } .mn-ep-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mn-ep-row__title { font-weight: 600; font-size: 14px; font-family: var(--mn-font-display); letter-spacing: -0.005em; color: var(--mn-ink); } .mn-ep-row__date { font-family: var(--mn-font-mono); font-size: 11px; color: var(--mn-ink-mute); letter-spacing: 0.06em; font-weight: 600; } .mn-ep-row__title small { display: block; color: var(--mn-ink-mute); font-family: var(--mn-font-mono); font-weight: 600; font-size: 10px; margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; } .mn-ep-row__dur { font-family: var(--mn-font-mono); font-size: 11px; color: var(--mn-ink-mute); text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .mn-ep-row.is-current { background: var(--mn-pink-50); } /* ── 20. RELATED SECTION ───────────────────────────────────── */ .mn-related-section { /* находится внутри mn-wrap, горизонтальный gutter уже на родителе */ padding: 36px 0 clamp(64px, 6vw, 96px); position: relative; z-index: 4; pointer-events: auto; } .mn-related-section .mn-card { pointer-events: auto; } .mn-related-section h2 { font-family: var(--mn-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.025em; margin: 0 0 24px; padding-bottom: 0; /* border-bottom убрана по запросу */ } /* ── 21. DLE OVERRIDES ─────────────────────────────────────── */ /* --- Existing header/footer (hide old Cinemax styles) --- */ .header { all: unset; display: block; } .header.vw100 { margin: 0; padding: 0; } .footer { display: none; } /* Hidden — replaced by mn-footer */ /* --- DLE {login} block in header --- */ .header__login { display: flex !important; align-items: center !important; } .header__login .header__login-btn--not-logged { display: inline-flex !important; align-items: center !important; padding: 10px 16px !important; background: var(--mn-pink-500) !important; color: #fff !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-pill) !important; font-family: var(--mn-font-display) !important; font-weight: 600 !important; font-size: 13px !important; box-shadow: var(--mn-shadow-sm) !important; height: auto !important; white-space: nowrap !important; text-decoration: none !important; } .header__login-btn--not-logged .fal { display: none !important; } /* Logged-in user block */ .header__login-btn--logged { display: block !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; overflow: hidden !important; border: 2px solid var(--mn-ink) !important; box-shadow: var(--mn-shadow-sm) !important; } /* --- DLE message info --- */ .message-info { filter: none !important; background: var(--mn-cream) !important; border-color: var(--mn-ink) !important; color: var(--mn-ink) !important; } /* --- DLE sect (clean up) --- */ .sect { margin: 0 !important; padding: 0 !important; } .sect__header, .sect__header--bordered { border: none !important; } .sect__menu { display: none !important; } /* replaced by mn-subnav */ .sect__content { margin: 0 !important; } /* На странице тайтла (showfull) только внешний DLE-враппер sect__content.grid-items должен быть block — внутренние card-гриды (.mn-grid.grid-items) не трогаем */ .infull .sect__content.grid-items { display: block !important; grid-template-columns: unset !important; } /* --- DLE catalog grid (item-poster / mn-card) --- */ .grid-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 22px; } @media (max-width: 1100px) { .grid-items { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 800px) { .grid-items { grid-template-columns: repeat(3, 1fr); gap: 22px 14px; } } @media (max-width: 540px) { .grid-items { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } } /* Критично: min-width:0 запрещает fr-трекам расти из-за nowrap-заголовков */ .grid-items > * { grid-column: auto !important; min-width: 0; } /* Pagination and filter spans full grid width */ .grid-items > .mn-pagination, .grid-items > .pagination, .grid-items > .mn-filter, .grid-items > .sect__menu { grid-column: 1 / -1 !important; } /* --- item-poster стили внутри грида (старый DLE-шаблон / fallback) --- */ .grid-items .item.item-poster { display: flex; flex-direction: column; min-width: 0; text-decoration: none !important; color: var(--mn-ink) !important; } /* Фиксируем aspect-ratio 2:3 для img-responsive--portrait через padding-top */ .grid-items .item-poster__img.img-responsive--portrait { flex-shrink: 0; border-radius: var(--mn-r-md) !important; border: var(--mn-stroke) !important; box-shadow: var(--mn-shadow) !important; overflow: hidden !important; margin-bottom: 10px !important; /* padding-top: 150% уже задан в common.css — не переопределяем */ } .item-poster__img img { transition: transform .35s ease; } .item-poster:hover .item-poster__img img, .item-poster:focus-visible .item-poster__img img, .item-poster:focus-within .item-poster__img img { transform: scale(1.035); } .item-slide__img, .scard__img, .short1-img { overflow: hidden; } .item-slide__img img, .scard__img img, .short1-img img { transition: transform .35s ease; } .item-slide:hover .item-slide__img img, .item-slide:focus-within .item-slide__img img, .scard:hover .scard__img img, .scard:focus-within .scard__img img, .short1:hover .short1-img img, .short1:focus-within .short1-img img { transform: scale(1.035); } /* Заголовок: убираем ws-nowrap, добавляем clamp в 2 строки */ .grid-items .item-poster__title { white-space: normal !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; text-align: left !important; font-family: var(--mn-font-display) !important; font-weight: 600 !important; font-size: 13px !important; color: var(--mn-ink) !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; margin: 0 0 4px !important; min-width: 0 !important; } .grid-items .item-poster__meta { font-family: var(--mn-font-mono) !important; font-size: 10px !important; color: var(--mn-ink-mute) !important; text-align: left !important; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; letter-spacing: 0.02em !important; } /* --- DLE search suggestions --- */ #searchsuggestions { background: var(--mn-paper) !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-md) !important; box-shadow: var(--mn-shadow-lg) !important; } .ds-item { background: var(--mn-paper) !important; color: var(--mn-ink) !important; } .ds-item:hover, .ds-item.is-selected { background: var(--mn-cream) !important; } .ds-title { color: var(--mn-ink) !important; } .ds-meta { color: var(--mn-ink-mute) !important; } .ds-genres { color: var(--mn-pink-500) !important; } .ds-rating { background: var(--mn-bg-soft) !important; border-color: var(--mn-ink-faint) !important; color: var(--mn-ink-mute) !important; } .ds-rating strong { color: var(--mn-gold-700) !important; } .ds-all-results { background: var(--mn-ink) !important; color: var(--mn-paper) !important; } .ds-all-results:hover { background: var(--mn-ink-soft) !important; } .ds-poster { border: var(--mn-stroke-thin) !important; } /* --- Search page --- */ .mn-search-page { width: min(1120px, calc(100vw - var(--mn-gutter) * 2)); margin: clamp(36px, 5vw, 62px) auto 22px !important; display: block !important; grid-column: 1 / -1 !important; } .mn-search-page__hero { margin-bottom: 18px; } .mn-search-page__kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--mn-pink-500); font-family: var(--mn-font-display); font-size: 13px; font-weight: 700; } .mn-search-page__kicker::before { content: ""; width: 8px; height: 8px; background: var(--mn-pink-500); border: 1.5px solid var(--mn-ink); transform: rotate(45deg); } .mn-search-page__hero h1 { margin: 0; color: var(--mn-ink); font-family: var(--mn-font-display); font-size: clamp(42px, 6vw, 72px); font-weight: 800; line-height: .95; letter-spacing: 0; } .mn-search-page__form { margin: 0 0 22px !important; padding: 18px !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-lg) !important; background: color-mix(in srgb, var(--mn-paper) 86%, transparent) !important; box-shadow: var(--mn-shadow) !important; } .mn-search-page__form table, .mn-search-page__form tbody, .mn-search-page__form tr, .mn-search-page__form td, .mn-search-page__form form { display: block !important; width: 100% !important; } .mn-search-page .search > div { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; } .mn-search-page .search br, .mn-search-page fieldset, .mn-search-page legend, .mn-search-page #dofullsearch { display: none !important; } .mn-search-page #searchinput, .mn-search-page input[name="story"] { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 13px 16px !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-pill) !important; background: var(--mn-paper) !important; color: var(--mn-ink) !important; box-shadow: var(--mn-shadow-sm) !important; font-family: var(--mn-font-body) !important; font-size: 15px !important; font-weight: 700 !important; outline: none !important; } .mn-search-page input[type="button"], .mn-search-page input[type="submit"], .mn-search-page button { min-height: 48px !important; padding: 0 18px !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-md) !important; background: var(--mn-pink-500) !important; color: #fff !important; box-shadow: var(--mn-shadow-sm) !important; font-family: var(--mn-font-display) !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; } .km-search-page-results { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 20px !important; grid-column: 1 / -1 !important; width: min(1120px, calc(100vw - var(--mn-gutter) * 2)) !important; margin: 22px auto 42px !important; } .mn-search-card { min-width: 0; border: var(--mn-stroke) !important; border-radius: var(--mn-r-lg) !important; background: var(--mn-paper) !important; box-shadow: var(--mn-shadow) !important; overflow: hidden; } .mn-search-card__poster { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--mn-bg-soft); color: inherit; } .mn-search-card__poster img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; } .mn-search-card:hover .mn-search-card__poster img, .mn-search-card:focus-within .mn-search-card__poster img { transform: scale(1.035); } .mn-search-card__rating { position: absolute; top: 10px; left: 10px; padding: 6px 10px; border: var(--mn-stroke-thin); border-radius: var(--mn-r-sm); background: var(--mn-gold-300); color: var(--mn-ink); box-shadow: var(--mn-shadow-sm); font-family: var(--mn-font-display); font-size: 12px; font-weight: 800; line-height: 1; } .mn-search-card__body { padding: 14px; } .mn-search-card__title { display: -webkit-box; min-height: 2.4em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--mn-ink) !important; font-family: var(--mn-font-display); font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none !important; } .mn-search-card__title mark, .ds-title mark { border-radius: 4px; background: color-mix(in srgb, var(--mn-gold-300) 72%, transparent); color: inherit; padding: 0 2px; } .mn-search-card__meta { margin-top: 7px; color: var(--mn-ink-mute); font-family: var(--mn-font-mono); font-size: 11px; font-weight: 700; } .mn-search-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .mn-search-card__tags span { padding: 4px 7px; border: 1px solid var(--mn-ink-faint); border-radius: var(--mn-r-pill); background: var(--mn-bg-soft); color: var(--mn-pink-500); font-size: 11px; font-weight: 700; } .mn-search-card__seo { display: none !important; } .km-search-page-results__empty { grid-column: 1 / -1; padding: 28px !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-lg) !important; background: var(--mn-paper) !important; color: var(--mn-ink-mute) !important; box-shadow: var(--mn-shadow-sm) !important; text-align: center !important; } /* --- DLE AJAX loader --- */ #loading-layer { background: var(--mn-paper) !important; border-left-color: var(--mn-pink-500) !important; box-shadow: var(--mn-shadow-lg) !important; color: var(--mn-ink) !important; border-radius: var(--mn-r-md) !important; } #loading-layer::after { border-color: var(--mn-ink-faint); border-left-color: var(--mn-pink-500) !important; } /* --- DLE pagination (navigation.tpl) --- */ .pagination { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; padding: 40px 0 !important; flex-wrap: wrap !important; } /* DLE-generated prev/next links (direct children of .pagination) */ .pagination > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 40px !important; height: 40px !important; background: var(--mn-paper) !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-md) !important; box-shadow: var(--mn-shadow-sm) !important; color: var(--mn-ink) !important; flex-shrink: 0 !important; transition: transform .08s, box-shadow .08s !important; padding: 0 10px !important; } .pagination > a:hover { transform: translate(-1px,-1px) !important; box-shadow: 3px 3px 0 var(--mn-shadow-color) !important; } /* Pages container */ .pagination__pages { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 6px !important; flex: 1 !important; min-width: 0 !important; } /* Individual page links */ .pagination__pages a, .pagination__pages span { min-width: 40px !important; height: 40px !important; background: var(--mn-paper) !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-md) !important; font-family: var(--mn-font-display) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--mn-ink) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: var(--mn-shadow-sm) !important; transition: transform .08s, box-shadow .08s !important; padding: 0 10px !important; } .pagination__pages a:hover { transform: translate(-1px,-1px) !important; box-shadow: 3px 3px 0 var(--mn-shadow-color) !important; } .pagination__pages span:not(.nav_ext) { background: var(--mn-pink-500) !important; color: #fff !important; border-color: var(--mn-ink) !important; } .pagination__pages .nav_ext { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--mn-ink-mute) !important; min-width: auto !important; } /* --- DLE full story (pmovie) — replaced by mn-title classes --- */ .pmovie__grid { all: unset; display: block; } /* --- DLE poster image cover (div-контейнер) --- */ .pmovie__img { width: 100% !important; height: auto !important; /* НЕ 100%: aspect-ratio должен управлять высотой */ max-width: none !important; border-radius: 12px !important; } /* --- DLE tabs (player) --- */ .tabs-block__select { display: flex !important; gap: 4px !important; flex-wrap: wrap !important; } .tabs-block__select span { font-family: var(--mn-font-display) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--mn-ink) !important; padding: 11px 18px 12px !important; height: auto !important; line-height: normal !important; background: transparent !important; border: 2px solid transparent !important; border-bottom: none !important; border-radius: var(--mn-r-md) var(--mn-r-md) 0 0 !important; cursor: pointer !important; transition: background .12s !important; margin: 0 !important; } .tabs-block__select span:hover { background: var(--mn-cream) !important; color: var(--mn-ink) !important; } .tabs-block__select span.is-active { background: var(--mn-paper) !important; border-color: var(--mn-ink) !important; margin-bottom: 0 !important; position: relative !important; z-index: 3 !important; } .tabs-block__select span.is-active::after { content: '' !important; position: absolute !important; left: -2px !important; right: -2px !important; bottom: -4px !important; height: 5px !important; background: transparent !important; } /* Player video area — прозрачный DLE-враппер, визуальный бокс на .mn-player-frame */ .pmovie__player { background: transparent; border: none; border-radius: 0; display: block; position: relative; overflow: visible; box-shadow: none; padding-top: 43px !important; margin-bottom: 0 !important; } .pmovie__player-controls { background: transparent; border-bottom: 0; padding: 0 !important; } .mn-player-tabs.pmovie__player-controls { position: absolute !important; left: 24px !important; right: 0 !important; top: 2px !important; z-index: 6 !important; background: transparent !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; margin: 0 !important; padding: 0 !important; } .pmovie__player .mn-player-frame { position: relative !important; border-top: var(--mn-stroke) !important; border-radius: var(--mn-r-md) !important; margin-bottom: 14px !important; } .tabs-block__content.video-responsive { border-radius: 0; } .video-responsive { background: #000; } .pmovie__complaint a { color: var(--mn-bad) !important; font-family: var(--mn-font-mono) !important; font-size: 11px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; font-weight: 700 !important; border: none !important; } /* PMO list (meta table) */ .pmovie__list { display: grid !important; grid-template-columns: max-content 1fr !important; column-gap: 16px !important; row-gap: 7px !important; font-size: 14px !important; font-family: var(--mn-font-body) !important; margin: 0 !important; } .pmovie__list li { display: contents; } .pmovie__list li > span:first-child { font-family: var(--mn-font-mono) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--mn-ink-mute) !important; padding-top: 2px !important; } .pmovie__list li a { color: var(--mn-ink-soft) !important; } .pmovie__list li a:hover { color: var(--mn-pink-500) !important; } /* PMO text */ .pmovie__text, .full-text { font-size: 15px !important; line-height: 1.7 !important; color: var(--mn-ink) !important; } .full-text a { color: var(--mn-ink-soft) !important; text-decoration: underline !important; } /* PMO rating on poster */ .item__rating { background: var(--mn-gold-300) !important; color: var(--mn-ink) !important; font-family: var(--mn-font-display) !important; font-weight: 800 !important; font-size: 13px !important; border-radius: var(--mn-r-sm) !important; border: 1.5px solid var(--mn-ink) !important; box-shadow: 2px 2px 0 var(--mn-shadow-color) !important; padding: 4px 10px 4px 8px !important; width: auto !important; min-width: 0 !important; height: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; letter-spacing: -0.02em !important; line-height: 1 !important; transform: rotate(-3deg) !important; } .item__rating::before { content: '★'; color: var(--mn-pink-600); font-size: .95em; line-height: 1; } /* Related section title */ .pmovie__related .sect__title { font-family: var(--mn-font-display) !important; font-weight: 700 !important; font-size: 22px !important; letter-spacing: -0.025em !important; color: var(--mn-ink) !important; padding-bottom: 0 !important; border-bottom: none !important; display: block !important; margin-bottom: 24px !important; } /* --- DLE scrolltop button (replace with cat float) --- */ #scrolltop { display: none !important; } /* --- DLE carousel --- */ .sect--carousel { padding: 0 0 20px; } .sect--carousel .sect__content { padding-top: var(--mn-header-flow-h) !important; } .sect--carousel .mn-card { width: 100%; } .owl-carousel .mn-card__poster { border-radius: var(--mn-r-md); } .sect--carousel .item-poster__img { border-radius: var(--mn-r-md) !important; border: var(--mn-stroke) !important; box-shadow: var(--mn-shadow) !important; overflow: hidden !important; background: var(--mn-bg-soft) !important; } .sect--carousel .item-poster__title { white-space: normal !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; text-align: left !important; font-family: var(--mn-font-display) !important; font-weight: 600 !important; font-size: 13px !important; color: var(--mn-ink) !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; margin: 10px 0 4px !important; min-width: 0 !important; } /* --- DLE item__play-btn: переопределяем под дизайн ManekiNeko --- */ /* Убираем чёрный overlay, кнопка появляется только при hover на item-poster */ .item__play-btn { background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.3)) !important; } .item-poster:hover .item__play-btn, .item-poster--carousel:hover .item__play-btn { opacity: 1 !important; } .item__play-btn span { background: var(--mn-pink-500) !important; border: 2px solid var(--mn-ink) !important; box-shadow: 3px 3px 0 var(--mn-shadow-color) !important; color: #fff !important; } /* Слайды карусели — play видна всегда, но чище */ .item-slide .item__play-btn { background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%) !important; opacity: 1 !important; } /* --- Подложка из постера (.blurred-bg) — адаптация под кремовую тему --- */ .wrapper { isolation: isolate; } .content, .mn-footer { position: relative; z-index: 2; } .blurred-bg { position: fixed !important; left: 50% !important; top: 0 !important; width: 100vw !important; height: 100vh !important; min-height: 100vh !important; overflow: hidden !important; transform: translateX(-50%) !important; z-index: 0 !important; pointer-events: none !important; /* не перехватывать клики поверх карусели */ display: none; } .blurred-bg img { position: absolute !important; inset: 0 !important; top: 0 !important; width: 100% !important; height: 100vh !important; object-fit: cover !important; object-position: center center !important; filter: blur(42px) saturate(158%) contrast(1.14) brightness(1.08) !important; opacity: 0.34 !important; transform: scale(1.14) !important; } .blurred-bg::after { content: '' !important; position: fixed !important; inset: 0 !important; height: auto !important; background: linear-gradient(180deg, rgba(240, 229, 210, 0) 0%, rgba(240, 229, 210, .08) 18%, rgba(240, 229, 210, .16) 70%, rgba(240, 229, 210, .44) 88%, var(--mn-bg) 100%), radial-gradient(circle at 50% 100%, rgba(255,255,255,.18), transparent 44%) !important; } .blurred-bg::before { display: none !important; } html[data-theme="dark"] .blurred-bg img { opacity: 0.38 !important; filter: blur(42px) saturate(148%) contrast(1.1) brightness(.84) !important; } html[data-theme="dark"] .blurred-bg::after { background: linear-gradient(180deg, rgba(31, 20, 48, 0) 0%, rgba(31, 20, 48, .08) 20%, rgba(31, 20, 48, .14) 70%, rgba(31, 20, 48, .5) 88%, var(--mn-bg) 100%), radial-gradient(circle at 50% 100%, rgba(255,255,255,.06), transparent 44%) !important; } /* --- DLE inline a:hover color --- */ .site-desc a:hover, .pmovie__original { color: var(--mn-ink-mute) !important; } /* --- DLE form elements (global override) --- */ input[type="text"]:focus, input[type="password"]:focus, textarea:focus { box-shadow: inset 0 0 0 2px var(--mn-pink-500) !important; outline: none !important; } input[type="text"], input[type="password"], select, textarea { background-color: var(--mn-paper) !important; color: var(--mn-ink) !important; border: var(--mn-stroke-thin) !important; } /* --- Tags cloud --- */ .cloud-tags span a { border: var(--mn-stroke-thin) !important; border-radius: var(--mn-r-pill) !important; background: var(--mn-paper) !important; color: var(--mn-ink) !important; padding: 5px 12px !important; font-family: var(--mn-font-display) !important; font-size: 12px !important; font-weight: 600 !important; } .cloud-tags span a:hover { background: var(--mn-pink-50) !important; box-shadow: none !important; } /* ── 22. CAROUSEL (main-page.tpl) ──────────────────────────── */ .mn-carousel-section { padding: 20px 0 36px; } .mn-carousel-section .mn-section__head { margin: 0 var(--mn-gutter) 24px; max-width: calc(var(--mn-maxw) - 2 * var(--mn-gutter)); margin-left: auto; margin-right: auto; margin-bottom: 24px; } /* --- Снижение отступа каталога, если он содержит сабнав --- */ .mn-section-catalog:has(.mn-subnav) { padding-top: 16px !important; } .mn-header__menu-login { display: none !important; } /* ── 23. MOBILE ─────────────────────────────────────────────── */ @media (max-width: 900px) { :root { --mn-header-h: 60px; --mn-header-flow-h: 76px; } .mn-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px var(--mn-gutter); } .mn-header .mn-brand.logo { --mn-mark-size: 40px; } .mn-header .mn-brand.logo .mn-brand__mark img { width: 40px !important; height: 40px !important; } .mn-search { max-width: none; min-width: 0; } .mn-search__input { padding: 8px 14px 8px 40px !important; font-size: 13px !important; } .mn-icon-btn--gold { display: none; } .mn-icon-btn { width: 40px; height: 40px; } .mn-menu-btn { width: 40px; height: 40px; } .mn-header__login-wrap, .mn-header__actions { display: none !important; } .mn-subnav { top: 76px; } /* логотип 56px + padding 10px*2 */ .mn-footer__inner { grid-template-columns: 1fr 1fr; } /* Блок авторизации внутри выпадающего меню */ .mn-header__menu-login { display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; padding: 16px var(--mn-gutter) 24px !important; border-bottom: 1.5px dashed var(--mn-ink) !important; margin-bottom: 24px !important; width: 100% !important; } .mn-header__menu-login .header__login-btn--not-logged { font-size: 13px !important; padding: 10px 18px !important; width: 100% !important; max-width: 280px !important; height: auto !important; min-width: 0 !important; border-radius: var(--mn-r-pill) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .mn-header__menu-login .header__login-btn--not-logged::before { display: none !important; } .mn-header__menu-login .header__login-pm { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border: var(--mn-stroke) !important; border-radius: var(--mn-r-md) !important; background: var(--mn-paper) !important; color: var(--mn-ink) !important; } .mn-header__menu-login .header__login-btn--logged { width: 44px !important; height: 44px !important; border: var(--mn-stroke) !important; border-radius: 50% !important; overflow: hidden !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Полноэкранный быстрый поиск под меню */ #searchsuggestions { position: fixed !important; top: 76px !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: none !important; height: calc(100vh - 76px) !important; max-height: none !important; transform: none !important; background: var(--mn-bg) !important; border: none !important; border-top: var(--mn-stroke) !important; border-radius: 0 !important; box-shadow: none !important; overflow-y: auto !important; margin-top: 0 !important; z-index: 99999 !important; } .ds-item { padding: 14px var(--mn-gutter) !important; } .ds-notfound { padding: 24px var(--mn-gutter) !important; } .ds-all-results { padding: 16px var(--mn-gutter) !important; font-size: 14px !important; } } @media (max-width: 600px) { .mn-search-page { margin-top: 86px !important; } .mn-search-page__kicker { display: none !important; } /* На узком мобильном — кнопка входа только иконкой / укорочена */ .header__login-btn { font-size: 0 !important; padding: 0 !important; width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: var(--mn-r-md) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .header__login-btn::before { content: ''; display: block; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat; } } @media (max-width: 800px) { /* Title hero */ .mn-title-hero__inner { grid-template-columns: 1fr; gap: 22px; padding: calc(var(--mn-header-h) + 28px) var(--mn-gutter) 28px; } .mn-title-poster { max-width: 200px; margin: 0 auto; } .mn-title-info h1 { font-size: clamp(28px, 7vw, 42px); } /* Rating row */ .mn-rating-row { gap: 8px; } .mn-rating-pill { padding: 6px 11px; } .mn-rating-pill__score { font-size: 17px; } /* Description */ .mn-title-desc { grid-template-columns: 1fr; gap: 22px; padding: 26px 0; } .mn-title-desc__side { border-left: none; padding-left: 0; border-top: 1.5px dashed var(--mn-ink); padding-top: 22px; } .mn-title-desc__side--rail { margin-bottom: 30px; } .mn-title-desc__side--rail .sb__content--grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; gap: 16px 12px !important; } /* Episode rows */ .mn-ep-row { grid-template-columns: 30px 80px 1fr 56px; gap: 10px; padding: 11px 14px; } .mn-ep-row__date { display: none; } .mn-ep-row__num { font-size: 15px; } .mn-ep-row__title { font-size: 13px; } .mn-ep-row__dur { display: none; } /* Catalog section */ .mn-section-catalog { padding: 24px 0; } } @media (max-width: 540px) { .mn-header .mn-brand__words { display: none; } .mn-footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; } html.mn-collection-detail .mn-footer__inner { grid-template-columns: 1fr; gap: 28px; } html.mn-collection-detail .mn-footer__big-cat { display: none; } .mn-cat-float { width: 42px; height: 42px; right: 12px; bottom: 12px; } .mn-cat-float::after { font-size: 22px; } .mn-player-section { padding: 24px var(--mn-gutter) 0; } } /* ── 24. EPISODE SIDEBAR ────────────────────────────────────── */ .sb { margin-bottom: 18px; } .sb__title { font-family: var(--mn-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mn-ink-mute); margin: 0 0 10px; } .sb__nav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .sb__nav li a { display: flex; align-items: center; justify-content: center; height: 34px; font-family: var(--mn-font-display); font-size: 12px; font-weight: 700; background: var(--mn-paper) !important; color: var(--mn-ink) !important; border: 1.5px solid var(--mn-ink) !important; border-radius: var(--mn-r-sm); text-decoration: none !important; transition: background .1s, transform .08s; } .sb__nav li a:hover { background: var(--mn-cream) !important; transform: translate(-1px,-1px); box-shadow: 2px 2px 0 var(--mn-ink) !important; } .sb__nav li.active-episode a, .sb__nav li.active-season a { background: var(--mn-pink-500) !important; color: #fff !important; border-color: var(--mn-ink) !important; } .episodes-page-select { font-family: var(--mn-font-display) !important; font-size: 11px !important; font-weight: 600 !important; margin-bottom: 8px; width: 100%; border-radius: var(--mn-r-sm) !important; } /* ── 25. COMMENTS ───────────────────────────────────────────── */ /* скрыть форму комментариев DLE (WYSIWYG лишний на аниме-сайте) */ #dle-comments-form, #dle-ajax-comments { display: none !important; } /* ── 26. PREMIUM COLLECTIONS ────────────────────────────────── */ .mn-collections-page { display: block; margin-top: -18px; } .mn-collections-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: clamp(54px, 8vw, 112px) max(var(--mn-gutter), calc((100vw - var(--mn-maxw)) / 2 + var(--mn-gutter))) clamp(34px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 72px); align-items: end; position: relative; overflow: hidden; } .mn-collections-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(120px, 16vw, 220px); background: linear-gradient(180deg, rgba(240,229,210,0) 0%, var(--mn-bg) 100%); pointer-events: none; } html[data-theme="dark"] .mn-collections-hero::after { background: linear-gradient(180deg, rgba(31,20,48,0) 0%, var(--mn-bg) 100%); } .mn-collections-hero__copy { position: relative; z-index: 1; max-width: 920px; } .mn-collections-hero h1 { margin: 16px 0 16px; max-width: 850px; color: var(--mn-ink); font-family: var(--mn-font-display); font-size: clamp(42px, 7vw, 86px); font-weight: 800; line-height: .94; letter-spacing: 0; text-wrap: balance; } .mn-collections-hero h1 span { color: var(--mn-pink-500); } .mn-collections-hero p { max-width: 680px; margin: 0; color: var(--mn-ink-soft); font-size: clamp(16px, 1.55vw, 19px); line-height: 1.6; } .mn-collections-hero__mark { position: relative; z-index: 1; width: clamp(112px, 14vw, 174px); aspect-ratio: 1; display: grid; place-items: center; border: var(--mn-stroke); border-radius: 50%; background: color-mix(in srgb, var(--mn-paper) 72%, transparent); box-shadow: var(--mn-shadow); } .mn-collections-hero__mark img { width: 72%; height: auto; display: block; } .mn-collections-list { position: relative; z-index: 1; padding-top: 10px; } .collection-card-premium { position: relative; display: flex; flex-direction: column; background: color-mix(in srgb, var(--mn-paper) 84%, transparent); border: var(--mn-stroke); border-radius: var(--mn-r-lg); overflow: hidden; min-height: 220px; transition: border-color 0.3s ease; box-shadow: var(--mn-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .collection-card-premium__blur-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(24px) saturate(130%) brightness(0.98); opacity: 0.18; z-index: 1; transform: scale(1.1); transition: transform .35s ease; } .collection-card-premium:hover .collection-card-premium__blur-bg, .collection-card-premium:focus-visible .collection-card-premium__blur-bg, .collection-card-premium:focus-within .collection-card-premium__blur-bg { transform: scale(1.14); } .collection-card-premium__content { position: relative; z-index: 2; display: flex; flex-direction: column; padding: clamp(22px, 3vw, 34px); height: 100%; } @media (min-width: 768px) { .collection-card-premium__content { flex-direction: row; align-items: center; justify-content: space-between; } } .collection-card-premium__info { flex: 1; margin-bottom: 20px; padding-right: 0; } @media (min-width: 768px) { .collection-card-premium__info { margin-bottom: 0; padding-right: 30px; } } .collection-card-premium__info h3 { font-family: var(--mn-font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; color: var(--mn-ink); margin: 0 0 10px 0; line-height: 1.08; letter-spacing: 0; } .collection-card-premium__info p { font-size: 0.95em; color: var(--mn-ink-soft); margin: 0 0 18px 0; line-height: 1.5; } .collection-card-premium__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--mn-pink-500); color: #FFFFFF !important; padding: 11px 18px; border: var(--mn-stroke-thin); border-radius: var(--mn-r-sm); font-size: 0.9em; font-weight: 700; box-shadow: var(--mn-shadow-sm); transition: all 0.2s ease; text-decoration: none !important; } .full-text a.collection-card-premium__btn { color: #FFFFFF !important; text-decoration: none !important; } .collection-card-premium__btn:hover { background: var(--mn-pink-600); transform: translateY(-2px); box-shadow: var(--mn-shadow-sm); } .collection-card-premium__posters { display: flex; gap: 12px; align-items: center; } @media (max-width: 767px) { .collection-card-premium__posters { justify-content: flex-start; } } .mini-poster { width: clamp(64px, 7vw, 86px); height: clamp(96px, 10vw, 128px); background-size: cover; background-position: center; border-radius: var(--mn-r-sm); border: var(--mn-stroke-thin); box-shadow: var(--mn-shadow-sm); transition: transform 0.2s ease; } .mini-poster:hover { transform: scale(1.08) rotate(1deg); z-index: 10; } .collections-hub-container { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 0 0 30px 0; } /* Static DLE collections page (/collections.html). The live page is generated inside page__title/full-text, not the premium collections wrapper above. */ .mn-wrap:has(.collections-hub-container) { max-width: none; padding-top: var(--mn-header-flow-h) !important; } .mn-wrap:has(.collections-hub-container) .sect__content.grid-items, .mn-wrap:has(.collections-hub-container) .page { display: block !important; grid-template-columns: unset !important; width: 100%; max-width: 100%; min-width: 0; } .mn-wrap:has(.collections-hub-container) .page__title { max-width: var(--mn-maxw); margin: 0 auto clamp(24px, 4vw, 42px); padding: clamp(12px, 2vw, 20px) var(--mn-gutter) 0; color: var(--mn-ink); font-family: var(--mn-font-display); font-size: clamp(38px, 4.2vw, 56px); font-weight: 800; line-height: .98; letter-spacing: 0; text-wrap: balance; } .mn-wrap:has(.collections-hub-container) .full-text { max-width: var(--mn-maxw); margin: 0 auto; padding: 0 var(--mn-gutter) clamp(56px, 7vw, 96px); } .mn-wrap:has(.collections-hub-container) .collections-hub-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.3vw, 30px); padding: 0; width: 100%; max-width: 100%; } .mn-wrap:has(.collections-hub-container) .collection-card-premium { min-height: clamp(250px, 22vw, 320px); width: 100%; max-width: 100%; min-width: 0; box-shadow: var(--mn-shadow-sm); } .mn-wrap:has(.collections-hub-container) .collection-card-premium__content { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: clamp(18px, 2vw, 28px); } .mn-wrap:has(.collections-hub-container) .collection-card-premium__info { margin-bottom: 0; padding-right: 0; } .mn-wrap:has(.collections-hub-container) .collection-card-premium__info { min-width: 0; } .mn-wrap:has(.collections-hub-container) .collection-card-premium__info h3 { font-size: clamp(26px, 2.35vw, 34px); } .mn-wrap:has(.collections-hub-container) .collection-card-premium__info p { max-width: 34rem; font-size: clamp(15px, 1.2vw, 17px); } .mn-wrap:has(.collections-hub-container) .collection-card-premium__btn span { display: none; } .mn-wrap:has(.collections-hub-container) .collection-card-premium__btn::after { content: '→'; font-family: var(--mn-font-display); font-size: 1.05em; line-height: 1; } .mn-wrap:has(.collections-hub-container) .collection-card-premium__posters { justify-content: flex-start; flex-shrink: 0; } @media (max-width: 760px) { .mn-collections-hero { grid-template-columns: 1fr; } .mn-collections-hero__mark { display: none; } .collection-card-premium__posters { margin-top: 18px; } .mn-wrap:has(.collections-hub-container) .page__title { font-size: clamp(30px, 8.8vw, 40px); line-height: 1.04; padding: 0 0; overflow-wrap: anywhere; } .mn-wrap:has(.collections-hub-container) .full-text { padding-left: 0; padding-right: 0; } .mn-wrap:has(.collections-hub-container) .collections-hub-container { grid-template-columns: 1fr; } .mn-wrap:has(.collections-hub-container) .collection-card-premium { min-height: 0; } .mn-wrap:has(.collections-hub-container) .collection-card-premium__posters { justify-content: flex-start; flex-wrap: wrap; } } /* ── 27. COLLECTIONS REDESIGN ────────────────────────────────── */ .mn-wrap:has(.mn-collections-hub) { max-width: none; padding-top: var(--mn-header-h) !important; overflow-x: clip; } .mn-wrap:has(.mn-collections-hub) .sect__content.grid-items, .mn-wrap:has(.mn-collections-hub) .page { display: block !important; grid-template-columns: unset !important; width: 100%; max-width: 100%; min-width: 0; } .mn-wrap:has(.mn-collections-hub) .page__title { display: none; } .mn-wrap:has(.mn-collections-hub) .full-text { max-width: none; margin: 0; padding: 0; } .mn-collections-hub { position: relative; z-index: 3; } .mn-collections-hub__hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: transparent; border-bottom: 0; padding: clamp(18px, 2.4vw, 30px) 0 clamp(12px, 1.6vw, 20px); position: relative; overflow: hidden; } .mn-collections-hub__hero::after { content: none; } .mn-collections-hub__hero-inner, .mn-collections-hub__body { max-width: var(--mn-maxw); margin: 0 auto; padding: 0 var(--mn-gutter); box-sizing: border-box; min-width: 0; width: 100%; } .mn-collections-hub__hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 44px); align-items: center; position: relative; z-index: 1; } .mn-collections-hub__copy { max-width: 920px; min-width: 0; } .mn-collections-hub__copy h1 { margin: 10px 0 10px; max-width: 920px; color: var(--mn-ink); font-family: var(--mn-font-display); font-size: clamp(34px, 4.7vw, 62px); font-weight: 800; line-height: .94; letter-spacing: 0; text-wrap: balance; overflow-wrap: anywhere; } .mn-collections-hub__copy p { max-width: 64ch; margin: 0; color: var(--mn-ink-soft); font-size: clamp(15.5px, 1.35vw, 18px); line-height: 1.58; } .mn-collections-hub__mascot { width: clamp(96px, 10vw, 132px); aspect-ratio: 1; display: grid; place-items: center; border: var(--mn-stroke); border-radius: 50%; background: var(--mn-paper); box-shadow: var(--mn-shadow); overflow: hidden; } .mn-collections-hub__mascot img { display: block; width: 72%; height: auto; transform: translate(2%, 1%); } .mn-collections-hub__body { padding-top: clamp(10px, 1.4vw, 18px); padding-bottom: clamp(48px, 6vw, 88px); } .mn-collections-hub__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(14px, 2vw, 22px); padding-bottom: 0; border-bottom: 0; } .mn-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px; border: var(--mn-stroke-thin); border-radius: var(--mn-r-md); background: var(--mn-paper); color: var(--mn-ink); font-family: var(--mn-font-display); font-size: 13px; font-weight: 700; line-height: 1; box-shadow: var(--mn-shadow-sm); } .mn-tab.is-active { background: var(--mn-pink-500); color: #fff; } .mn-tab__num { opacity: .72; } .mn-collections-featured { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-bottom: 18px; } .mn-coll-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(210px, 20vw, 292px); grid-auto-flow: dense; gap: 18px; margin-bottom: 40px; } @media (max-width: 900px) { .mn-coll-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mn-coll-grid { grid-template-columns: 1fr; } } .mn-coll-card { position: relative; border-radius: var(--mn-r-lg); overflow: hidden; min-height: clamp(210px, 20vw, 292px); background: var(--mn-bg-soft); border: var(--mn-stroke); box-shadow: var(--mn-shadow); cursor: pointer; display: block; } .mn-coll-card--wide { min-height: clamp(210px, 20vw, 292px); } .mn-coll-grid .mn-coll-card--wide { grid-column: span 2; } .mn-coll-card--wide .mn-coll-card__bg { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; } .mn-coll-card--wide .mn-coll-card__title { max-width: 780px; font-size: clamp(28px, 3vw, 40px); } .mn-coll-card--square { min-height: clamp(210px, 20vw, 292px); } .mn-coll-card__bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; gap: 0; filter: saturate(.95); } .mn-coll-card__bg > div { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform .35s ease; } .mn-coll-card:hover .mn-coll-card__bg > div, .mn-coll-card:focus-visible .mn-coll-card__bg > div, .mn-coll-card:focus-within .mn-coll-card__bg > div { transform: scale(1.035); } .mn-coll-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,20,48,.15) 0%, rgba(31,20,48,.85) 100%); } .mn-coll-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; display: flex; flex-direction: column; gap: 8px; } .mn-coll-card__kicker { font-family: var(--mn-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: none; color: var(--mn-gold-300); font-weight: 700; } .mn-coll-card__title { font-family: var(--mn-font-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; color: #fff; margin: 0; text-wrap: balance; } .mn-coll-card__desc { display: none; } .mn-coll-card__count { display: none; } @media (max-width: 980px) { .mn-collections-featured, .mn-coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-coll-card--wide { grid-column: 1 / -1; } } @media (max-width: 760px) { .wrapper:has(.mn-collections-hub) { overflow-x: hidden; } .mn-wrap:has(.mn-collections-hub) { padding-top: var(--mn-header-flow-h) !important; overflow-x: hidden; } .mn-collections-hub__hero { width: 100%; margin-left: 0; margin-right: 0; border-top: 0; padding: 14px 0 16px; } .mn-collections-hub__hero-inner { grid-template-columns: 1fr; align-items: start; max-width: min(348px, calc(100% - 46px)); width: min(348px, calc(100% - 46px)); padding-left: 0; padding-right: 0; } .mn-collections-hub__copy h1 { font-size: clamp(29px, 8.6vw, 38px); line-height: 1; } .mn-collections-hub__copy p { max-width: 100%; overflow-wrap: anywhere; } .mn-collections-hub__body { max-width: min(348px, calc(100vw - 46px)); width: min(348px, calc(100vw - 46px)); padding-left: 0; padding-right: 0; overflow: visible; } .mn-collections-hub__chips { max-width: 100%; gap: 6px; margin-bottom: 18px; padding-bottom: 0; } .mn-tab { min-height: 38px; padding: 8px 12px; font-size: 12px; } .mn-collections-hub__mascot { width: 116px; } .mn-collections-featured, .mn-coll-grid { display: flex; flex-direction: column; gap: 18px; min-width: 0; width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } .mn-coll-card, .mn-coll-card--wide, .mn-coll-card--square { flex: none; width: 100%; min-height: 0; aspect-ratio: 4 / 3; } .mn-coll-grid .mn-coll-card--wide { grid-column: auto; } .mn-coll-card__body { padding: 18px; } .mn-coll-card__title, .mn-coll-card--wide .mn-coll-card__title { font-size: clamp(21px, 6vw, 28px); } } /* Franchise block */ .franchise-block { margin-top: 35px; margin-bottom: 35px; } .franchise-list { display: flex; flex-direction: column; gap: 8px; } .franchise-item { display: flex; align-items: center; padding: 14px 20px; border-radius: 8px; font-size: 15px; transition: all 0.25s ease; } .franchise-item--link { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); text-decoration: none; } .franchise-item--link:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); color: #fff; transform: translateX(4px); } .franchise-item--active { background: rgba(2, 195, 154, 0.1); border: 1px solid rgba(2, 195, 154, 0.4); color: #fff; font-weight: 500; } .franchise-item__number { font-weight: 700; margin-right: 12px; color: rgba(255, 255, 255, 0.4); } .franchise-item--active .franchise-item__number { color: #02c39a; } .franchise-item__badge { font-size: 11px; font-weight: 600; padding: 3px 8px; background: #02c39a; color: #fff; border-radius: 4px; margin-left: 12px; white-space: nowrap; } .franchise-item__year { opacity: 0.65; font-size: 13px; margin-left: 5px; } .franchise-item__arrow { margin-left: auto; font-size: 12px; opacity: 0.5; transition: transform 0.2s ease; } .franchise-item--link:hover .franchise-item__arrow { transform: translateX(2px); opacity: 0.8; }