/* ============================================================ 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); /* 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; } 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; } .wrapper-container { max-width: var(--mn-maxw) !important; padding: 0 var(--mn-gutter) !important; } .content { padding-top: 0 !important; padding-bottom: 60px !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: 0 var(--mn-gutter); } /* ── 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: sticky; top: 0; z-index: 100; background: transparent; overflow: visible; /* декоративный кот выступает за нижний край */ /* border-bottom убран — лишняя линия между шапкой и сабнавом */ transition: background 0.3s ease; } .mn-header.is-active, .menu-is-opened .mn-header { background: var(--mn-bg); } .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: var(--mn-bg); border-bottom: var(--mn-stroke); } .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; } .mn-coll-hero { width: 100vw; margin-left: calc(50% - 50vw); display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 300px); gap: clamp(28px, 5vw, 72px); align-items: center; background: var(--mn-cream); border-top: var(--mn-stroke-thin); border-bottom: var(--mn-stroke); padding: clamp(34px, 5vw, 72px) max(var(--mn-gutter), calc((100vw - var(--mn-maxw)) / 2 + var(--mn-gutter))); } .mn-coll-hero__copy { min-width: 0; max-width: 860px; } .mn-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; 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(34px, 5vw, 64px); font-weight: 800; line-height: .98; letter-spacing: 0; } .mn-coll-hero__lead { max-width: 760px; margin-top: 18px; color: var(--mn-ink-soft); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.55; } .mn-coll-hero__lead p { margin: 0; } .mn-coll-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .mn-coll-hero__visual { position: relative; justify-self: end; width: min(100%, 280px); 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(34px, 5vw, 62px) 0; } .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: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 32px 22px !important; } .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-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 800px) { .mn-coll-hero { grid-template-columns: 1fr; } .mn-coll-hero__visual { justify-self: start; width: 160px; } .mn-collection-section #dle-content { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px 14px !important; } } @media (max-width: 540px) { .mn-coll-hero__actions .mn-btn { width: 100%; justify-content: center; } .mn-collection-section #dle-content { 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; transition: transform .15s; text-decoration: none !important; color: var(--mn-ink) !important; } .mn-card:hover { transform: translate(-2px, -3px); } .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); transition: box-shadow .15s; } .mn-card:hover .mn-card__poster { box-shadow: 6px 6px 0 var(--mn-shadow-color); } .mn-card__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* 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); } /* 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; } /* ── 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; position: relative; z-index: 20; } .filter-block__form { display: flex; flex-wrap: wrap; 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: var(--mn-stroke); background: var(--mn-cream); padding: 56px 0 28px; margin-top: 56px; position: relative; overflow: hidden; } .mn-footer__big-cat { position: absolute; right: -20px; top: 20px; width: 240px; opacity: 0.1; pointer-events: none; transform: rotate(8deg); } .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: 1; } .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: 32px auto 0; padding: 20px var(--mn-gutter) 0; border-top: 1.5px dashed var(--mn-ink); 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: 1; } .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 CAT ──────────────────────────────────────── */ .mn-cat-float { position: fixed; bottom: 22px; right: 22px; width: 72px; height: 72px; display: flex; align-items: flex-end; justify-content: center; z-index: 60; cursor: pointer; transition: transform .25s; text-decoration: none !important; } .mn-cat-float img { width: 72px; height: auto; filter: drop-shadow(3px 3px 0 var(--mn-shadow-color)); display: block; } .mn-cat-float:hover { transform: translateY(-4px) rotate(-6deg); } .mn-cat-float::after { content: '↑'; position: absolute; top: -4px; right: -6px; width: 26px; height: 26px; background: var(--mn-gold-500); border: 2px solid var(--mn-ink); border-radius: 50%; box-shadow: 1.5px 2px 0 var(--mn-shadow-color); display: flex; align-items: center; justify-content: center; font-family: var(--mn-font-mono); font-weight: 800; font-size: 14px; color: var(--mn-ink); line-height: 1; padding-bottom: 1px; transition: transform .2s; } .mn-cat-float:hover::after { transform: translateY(-2px) scale(1.08); } /* ── 16. TITLE PAGE (FULLSTORY) ────────────────────────────── */ .mn-title-page { padding-bottom: 60px; } .mn-title-hero { background: var(--mn-cream); border-bottom: var(--mn-stroke); position: relative; overflow: hidden; /* Full-bleed: выходим за padding mn-wrap И за авто-margin центрированного контейнера */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .mn-title-hero__bg { position: absolute; inset: 0; z-index: 0; opacity: .25; /* глобальная прозрачность фона-постера */ } .mn-title-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(36px) saturate(120%); transform: scale(1.2); /* чуть увеличить чтобы blur не давал краёв */ } html[data-theme="dark"] .mn-title-hero__bg { opacity: .35; } .mn-title-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 300px 1fr; gap: 56px; padding: 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; } .mn-player-tabs { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--mn-ink); margin-bottom: 20px; /* зазор между строкой табов и фреймом плеера */ flex-wrap: wrap; gap: 8px; } .mn-player-tabs__left { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .mn-player-tab { padding: 10px 18px; 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: 2px solid transparent; 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: -2px; position: relative; } .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-bottom: 12px; 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 { position: relative; background: #000; border-radius: var(--mn-r-md); overflow: hidden; border: var(--mn-stroke); box-shadow: var(--mn-shadow); margin-bottom: 36px; } /* 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; } .mn-title-desc { padding: 36px 0; display: grid; grid-template-columns: 1fr 280px; gap: 56px; border-bottom: 2px solid var(--mn-ink); } .mn-title-desc__body, .mn-title-desc__text { font-size: 15.5px; line-height: 1.7; color: var(--mn-ink); max-width: 70ch; } .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 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-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; } .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 — не переопределяем */ } /* Заголовок: убираем 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; } /* --- 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: 10px 18px !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: -2px !important; position: relative !important; } /* Player video area — прозрачный DLE-враппер, визуальный бокс на .mn-player-frame */ .pmovie__player { background: transparent; border: none; border-radius: 0; overflow: visible; box-shadow: none; margin-bottom: 0 !important; } .pmovie__player-controls { background: transparent; border-bottom: 2px solid var(--mn-ink); padding: 4px 0 0 !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 8px !important; width: auto !important; } /* 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; } .owl-carousel .mn-card__poster { border-radius: var(--mn-r-md); } /* --- 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) — адаптация под кремовую тему --- */ .blurred-bg { height: 580px !important; pointer-events: none !important; /* не перехватывать клики поверх карусели */ } /* На странице тайтла подложка не нужна — там своя .mn-title-hero__bg */ .infull .blurred-bg { display: none !important; } .blurred-bg img { /* Тёплый приглушённый цвет, более заметный */ filter: blur(12px) saturate(0.7) brightness(1.05) !important; opacity: 0.38 !important; object-position: center 20% !important; } /* Градиент снизу — плавный переход в кремовый фон */ .blurred-bg::after { height: 50% !important; background: linear-gradient(to top, var(--mn-bg, #F0E5D2) 0%, rgba(240, 229, 210, 0) 100%) !important; } /* ::before убран — шапка с фоном var(--mn-bg) сама закрывает верх подложки */ .blurred-bg::before { display: none !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) { .mn-header__inner { grid-template-columns: auto 1fr auto; gap: 12px; padding: 10px var(--mn-gutter); } .mn-search { max-width: none; } .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; 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) { /* На узком мобильном — кнопка входа только иконкой / укорочена */ .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: 28px var(--mn-gutter); } .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; } /* 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; } .mn-cat-float { width: 54px; right: 12px; bottom: 12px; } .mn-cat-float::after { width: 22px; height: 22px; font-size: 12px; } .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 ────────────────────────────────── */ .collection-card-premium { position: relative; display: flex; flex-direction: column; background: var(--mn-paper); border: var(--mn-stroke); border-radius: var(--mn-r-lg); overflow: hidden; min-height: 180px; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; box-shadow: var(--mn-shadow); } .collection-card-premium:hover { transform: translateY(-4px); box-shadow: var(--mn-shadow); } .collection-card-premium__blur-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(20px) brightness(0.95); opacity: 0.08; z-index: 1; transform: scale(1.1); } .collection-card-premium__content { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 24px; 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: 1.45em; font-weight: 800; color: var(--mn-ink); margin: 0 0 10px 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: 8px 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: 60px; height: 90px; background-size: cover; background-position: center; border-radius: var(--mn-r-sm); border: 1px solid rgba(28, 26, 21, 0.15); 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: 24px; padding: 10px 0 30px 0; } /* ── 27. COLLECTIONS REDESIGN ────────────────────────────────── */ .mn-coll-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; 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; aspect-ratio: 4 / 3; background: var(--mn-bg-soft); border: var(--mn-stroke); box-shadow: var(--mn-shadow); cursor: pointer; transition: transform .15s, box-shadow .15s; display: block; } .mn-coll-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--mn-shadow-color); } .mn-coll-card__bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0; filter: saturate(.95); } .mn-coll-card__bg > div { width: 100%; height: 100%; background-size: cover; background-position: center; } .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: .14em; text-transform: uppercase; 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__count { font-family: var(--mn-font-mono); font-size: 11px; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 10px; margin-top: 4px; letter-spacing: 0.04em; font-weight: 600; }