/* BASIC LAYOUT ----------------------------------------------- */ .wrapper {min-width: 320px; position: relative; background: url(../images/bg.jpg) center -120px no-repeat;} .wrapper__container {max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 20;} .header {background-color: var(--bg-black); margin-bottom: 120px; gap: 20px; position: relative; z-index: 100; color: #fff;} .header:after {content: ''; background: var(--gradient); height: 3px; position: absolute; left: 0; right: 0; bottom: -3px;} .carousel {background-color: var(--bg-darker); padding: 20px; margin: 0 20px; box-shadow: var(--bsh-content); isolation: isolate; position: relative;} .wrapper__cols {display: grid; grid-template-columns: 300px minmax(0,1fr); position: relative; z-index: 1; grid-template-areas: "sidebar content"; background-color: var(--bg); box-shadow: var(--bsh-content);} .content {min-height: 80vh; grid-area: content; padding: 40px var(--indent); position: relative;} .sidebar {background-color: var(--bg-darker); grid-area: sidebar; padding: 40px var(--indent);} .footer {background-color: var(--bg-darker); color: var(--tt-fade); padding: 40px var(--indent); gap: 20px; position: relative; margin: 0 20px; isolation: isolate;} .scrolltop {position: fixed; width: 40px; height: 40px; right: -60px; bottom: 10px; z-index: 990; border-radius: 50%; font-size: 20px; opacity: 0; transition: right 0.2s, opacity 0.2s;} .scrolltop.is-active {right: 10px; opacity: 1;} .ppp {margin: 0 auto; aspect-ratio: 1200 / 90; width: 100%;} .ppp--main {max-width: 1160px;} .ppp img, .ppp a {display: block;} /* HEADER ----------------------------------------------- */ .logo-block {display: flex; align-items: center; padding-left: 44px; position: relative; font-weight: 700; text-transform: uppercase; font-size: 28px; margin-right: 20px;} .logo-block svg path {fill: var(--accent-primary);} .logo-block svg, .logo-block img {width: 30px; height: 30px; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} .header__logo {height: 80px; --tt: #fff;} .header__logo span {font-size: 18px; color: var(--accent-secondary); margin-left: 3px; margin-top: 6px;} .header__soc-link {border-radius: 15px; height: 30px; padding: 0 15px; background-color: #18a3e6; font-size: 12px;} .header__settings-btn {height: 60px; font-size: 24px; color: var(--accent-primary);} .header__settings-list {background-color: var(--bg); box-shadow: var(--bsh); padding: 20px; position: absolute; right: 0; top: 100%; width: 340px; z-index: 10; color: var(--tt); --tt: #000;} .header__btn-login, .header__btn-link a {color: var(--accent-secondary); font-weight: 700;} .header__btn-link {font-size: 14px; text-transform: uppercase; margin-left: -15px;} .header__settings-btn.is-active {background-color: var(--bg); color: var(--tt);} .search-block {position: relative; margin: 0 160px 0 20px; --bdc: var(--bdc-light); --tt: #fff;} .search-block__input, .search-block__input:focus {border-radius: 20px; padding: 0 60px 0 20px; border: 0; box-shadow: none; border: 1px solid var(--bdc); background-color: rgba(255,255,255,0.066); color: var(--tt);} .search-block__input:not(:focus)::placeholder {color: var(--tt-fadest); opacity: 1; font-size: 14px;} .search-block__btn {position: absolute; right: 0; top: 0; width: 60px; font-size: 16px; color: var(--accent-secondary); padding: 0;} .sb__design button {width: 30px; height: 30px; border-radius: 15px; padding: 0; background-color: var(--bg); border: 2px solid var(--bdc); color: var(--tt); font-weight: 400; font-size: 14px;} .sb__design--cols button, .sb__design--posters button {width: 100%; text-transform: none;} .sb__design--posters li {min-width: 40%;} .sb--btns .sb__caption {margin-bottom: 10px;} .sb__design li button.is-active {box-shadow: 0 0 0 1px var(--accent-primary); border-color: var(--bg); color: var(--tt);} .sb__design--btns li:nth-child(1) button {background-color: #e76d39;} .sb__design--btns li:nth-child(2) button {background-color: var(--red);} .sb__design--btns li:nth-child(3) button {background-color: var(--blue);} .sb__design--btns li:nth-child(4) button {background-color: var(--violet);} .sb__design--btns li:nth-child(5) button {background-color: var(--yellow);} .sb__design--btns li:nth-child(6) button {background-color: var(--green);} .sb__design--btns li:nth-child(7) button {background-color: var(--grey);} .header__settings-list .sb + .sb {margin-top: 20px;} /* CAROUSEL, UPDATE, COLLECTION ----------------------------------------------- */ .carousel::before, .carousel::after {content: ''; border: 10px solid transparent; position: absolute; bottom: 0; z-index: -1; border-bottom-color: var(--bg-darkest);} .carousel::before {border-right-color: var(--bg-darkest); left: -20px;} .carousel::after {border-left-color: var(--bg-darkest); right: -20px;} .carousel__content:not(.owl-carousel), .upd-items:not(.owl-carousel), .coll-items:not(.owl-carousel) {display: flex; overflow: hidden; gap: 20px;} .carousel__content:not(.owl-carousel) > * {flex-shrink: 0; width: calc((100% - 120px)/7);} .upd-items:not(.owl-carousel) > * {flex-shrink: 0; width: calc((100% - 60px)/4);} .coll-items:not(.owl-carousel) > .coll {flex-shrink: 0; width: calc((100% - 40px)/3);} .carou {display: block;} .carou__img {padding-top: 150%; border-bottom: 4px dashed var(--accent-secondary);} .carou__desc {margin-top: 15px; line-height: 1;} .carou__title {font-size: inherit; font-weight: 500;} .carou__category {color: var(--tt-fadest); font-size: 14px; margin-top: 10px;} .upd {background-color: var(--bg-darker); padding: 20px; font-size: 14px;} .upd__img {width: 40px; height: 40px; margin-right: 20px; box-shadow: var(--bsh-poster);} .upd__body {margin-top: 15px;} .upd__title {font-size: 16px; font-weight: 500;} .upd__voice {color: var(--tt-fadest); font-size: 14px; margin-top: 8px; line-height: 1;} .coll {display: block; padding-top: 0; height: 160px; text-align: center; box-shadow: var(--bsh-poster);} .coll__count {position: absolute; left: 0; top: 0; background-color: var(--accent-primary); color: #fff; position: absolute; left: 0; top: 0; z-index: 6; padding: 4px 10px;} .coll__title {position: absolute; inset: 0; color: #fff; background-color: rgba(0,0,0,0.5); padding: 20px; font-weight: 700; font-size: 22px; z-index: 5;} .poster2 .coll {grid-column: span 2;} .coll-items .coll {box-shadow: none;} /* SECTION ----------------------------------------------- */ .sect:not(:last-child) {margin-bottom: 40px;} .sect__header {margin-bottom: 20px; gap: 5px 10px;} .sect__title {font-size: 24px; text-transform: uppercase; font-weight: 700;} .sect__link {font-size: 14px; text-transform: uppercase; font-weight: 700; color: var(--accent-primary); display: flex; align-items: center; gap: 10px;} .sect__header--mb {margin-bottom: 40px;} .sect__btn-filter {color: var(--accent-primary);} .speedbar {color: var(--tt-fadest); max-width: calc(100% - 220px - var(--indent)*2); position: absolute; right: var(--indent); top: 34px; z-index: 10;} .speedbar a {color: #fff;} .speedbar2 {color: var(--tt-fade); margin-bottom: 15px; margin-top: -20px;} .descr {display: grid; grid-gap: 20px; line-height: 1.7; padding: 40px 0; color: var(--tt);} .descr h1, .descr h2, .descr h3 {font-size: 18px; text-transform: uppercase; font-weight: 700; color: var(--tt); line-height: 1.3;} .descr a {text-decoration: underline; color: var(--accent-third);} .descr ul li {position: relative; padding-left: 25px; margin-left: 25px;} .descr ul li::before {content:"\f00c"; font-weight: 900; font-family:'Font Awesome 6 Free'; color: var(--accent-primary); position: absolute; left: 0; top: 0;} /* SHORT STORY ----------------------------------------------- */ .card {padding: 20px; border: 1px solid var(--bdc); background-color: var(--bg); display: grid; gap: 0px 20px; grid-template-columns: 80px minmax(0,1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "cimg cdesc" "cimg cmeta2" "cbody cbody" "cfooter cfooter";} .card__img {height: 120px; box-shadow: var(--bsh-poster); grid-area: cimg;} .card__meta2 {gap: 10px; margin-top: 10px; align-self: end; grid-area: cmeta2;} .card__meta2::before {margin-left: auto; font-size: 24px; color: var(--tt-fadest);} .card__series, .card__quality {height: 30px; display: flex; align-items: center; padding: 0 15px; border: 1px solid var(--bdc); border-radius: 15px; font-size: 12px; text-transform: uppercase;} .card__quality {background-color: var(--bg-darker); color: var(--accent-primary);} .card__title {font-size: 22px; line-height: 1.1;} .card__body {grid-area: cbody;} .card__footer {grid-area: cfooter;} .card__meta {font-size: 14px; color: var(--tt-fade); margin-top: 8px;} .card__list {display: grid; gap: 5px; font-size: 14px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--bdc); margin-bottom: 15px;} .card__list li > span:first-child {color: var(--tt-fade);} .card__text {-webkit-line-clamp: 4;} .card__footer {margin: -20px; margin-top: 20px; border-top: 1px solid var(--bdc); position: relative; z-index: 10;} .card__btn-trailer {background-color: var(--bg-darker); color: var(--tt-fade);} .poster1 .card__btn-trailer:after, .poster3 .card__btn-trailer:after, .poster4 .card__btn-trailer:after {content: attr(data-text);} .poster2 .d-grid-items--main {grid-template-columns: repeat(4,minmax(0,1fr)); gap: 40px 20px;} .poster2 .pagination {padding-top: 10px;} .poster2 .card__body, .poster2 .card__meta2::before, .poster2 .card__btn-link, .poster1 .card__btn-trailer::before, .poster3 .card__meta2::before {display: none;} .poster2 .card {padding: 0; border: 0; background-color: transparent; display: block;} .poster2 .card__img {width: 100%; height: auto; padding-top: 150%; margin: 0; margin-bottom: 15px;} .poster2 .card__img img {position: absolute; inset: 0;} .poster2 .card__btn-trailer {left: 0; top: 40px; position: absolute; padding: 0; width: 40px; min-width: 40px; background-color: rgba(0,0,0,0.4); z-index: 10; color: #fff; backdrop-filter: blur(10px);} .poster2 .card__title {font-size: 18px; line-height: 1.4;} .poster2 .card__footer {border: 0; margin: 0; position: static;} .poster2 .card__quality {background-color: var(--accent-primary); border-radius: 0; border-color: var(--accent-primary); color: #fff;} .poster2 .card__series {background-color: var(--bg); border-color: var(--bg); border-radius: 0;} .poster2 .card__meta {white-space: normal;} .poster2 .card__meta2 {position: absolute; left: 0; top: 0; right: 0; aspect-ratio: 100 / 150; flex-direction: column; align-items: flex-start; justify-content: space-between; margin: 0;} @media screen and (min-width: 760px) { .poster3 .card {grid-column: 1 / -1; grid-template-columns: 200px minmax(0,1fr) max-content; gap: 20px; grid-template-rows: auto 1fr auto; grid-template-areas: "cimg cdesc cdesc" "cimg cbody cbody" "cimg cmeta2 cfooter";} .poster3 .card__img {height: 300px;} .poster3 .card__footer {margin: 0; border: 0;} .poster3 .card__meta2, .poster4 .card__meta2 {align-self: center; margin: 0;} .poster3 .card__list {margin-top: 0;} .poster4 .card {grid-column: 1 / -1; grid-template-columns: 105px minmax(0,1fr) max-content; grid-template-rows: auto 1fr auto; align-items: start; gap: 10px 20px; grid-template-areas: "cimg cdesc cfooter" "cimg cbody cbody" "cimg cmeta2 cmeta2";} .poster4 .card__img {height: 160px;} .poster4 .card__footer {margin: 0; border: 0; align-self: center;} .poster4 .card__footer > * {height: 32px; padding: 0 12px; font-size: 13px;} .poster4 .card__list, .poster4 .card__btn-trailer::before, .poster4 .card__btn-link:before {display: none;} .poster4 .card__title {font-size: 18px;} .poster4 .card__title, .poster4 .card__meta {display: block; white-space: nowrap; text-overflow: ellipsis;} .poster4 .card__text {font-size: 15px; -webkit-line-clamp: 3;} } .trl {background-color: rgba(0,0,0,0.9); position: fixed; z-index: 990; left: 0; top: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; backdrop-filter: blur(10px);} .trl__close {position: absolute; right: 20px; top: 20px; font-size: 40px; color: #fff;} .trl__inner {width: 100%; max-width: 700px; margin: 0 auto; color: #fff; padding: 80px 20px 20px 20px;} .trl__btn {height: 60px; padding: 0 40px; margin-top: 15px; width: 100%;} .trl h1 {margin-bottom: 15px; margin-top: 20px; font-size: 24px;} .trl .page__text, .sinfo .page__list li, .sinfo .page__text {display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;} .trl-is-opened {overflow: hidden;} /* SIDEBAR ----------------------------------------------- */ .sb + .sb {margin-top: 40px;} .sb__title {text-transform: uppercase; font-weight: 700; margin-bottom: 20px; line-height: 1; font-size: 14px;} .menu-block {display: grid; gap: 6px;} .menu-block li {display: flex; align-items: center; justify-content: space-between;} .menu-block li span {color: var(--tt-fade); font-size: 14px;} .menu-block--main {gap: 10px; font-weight: 500;} .menu-block--main a {display: flex; align-items: center; gap: 20px; width: 100%;} .menu-block--main a::before {color: var(--tt-fadest); width: 19px; text-align: center;} .sb__grid {display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 10px; counter-reset: num;} .ftop-item {background-color: rgba(0,0,0,0.02); position: relative; padding-right: 10px;} .ftop-item__img {width: 50px; height: 75px; margin-right: 20px; z-index: 5; box-shadow: var(--bsh-poster);} .ftop-item::before {content: counter(num); counter-increment: num; color: var(--tt-fade); opacity: 0.3; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: 700;} .ftop-item__meta {margin-top: 4px; font-size: 14px; color: var(--tt-fade);} .lcomm:not(:last-child) {margin-bottom: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--bdc);} .lcomm {font-size: 15px;} .lcomm__link {display: block; font-size: 13px; font-weight: 500; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 1px; padding-left: 1px;} .lcomm__date {font-size: 13px; color: var(--tt-fade); margin-left: 10px;} .lcomm__text {margin: 8px 0 10px 0; -webkit-line-clamp: 3;} .lcomm__av {width: 24px; height: 24px; border-radius: 50%; margin-right: 10px;} /* FOOTER ----------------------------------------------- */ .footer__text {color: var(--tt-fade); font-size: 14px;} .footer__logo {min-width: 240px;} .footer__logo svg path {fill: var(--tt-fadest);} .footer__link {font-size: 14px; text-transform: uppercase; font-weight: 700; color: var(--accent-primary);} .footer::before, .footer::after {content: ''; border: 10px solid transparent; position: absolute; top: 0; z-index: -20; border-top-color: var(--bg-darkest);} .footer::before {border-right-color: var(--bg-darkest); left: -20px;} .footer::after {border-left-color: var(--bg-darkest); right: -20px;} /* PAGINATION ----------------------------------------------- */ .pagination {gap: 20px 20px; padding-top: 30px;} .pagination a, .pagination span {display: grid; place-items: center; font-size: 16px; background-color: var(--bg); height: 40px; min-width: 40px; padding: 0 10px; border: 1px solid var(--bdc); border-radius: 20px;} .pagination__pages {gap: 10px 10px; font-size: 18px;} .pagination__pages span:not(.nav_ext) {background-color: var(--bg-darker); color: var(--accent-primary); border-color: var(--bg-darkest);} /* INNER PAGE ----------------------------------------------- */ .page__header {background-color: var(--bg-black); margin: -40px var(--indent-negative) 40px var(--indent-negative); padding: 40px var(--indent); display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding-left: calc(220px + var(--indent)); height: 300px;} .page h1 {text-transform: uppercase; font-size: 34px; font-weight: 700; line-height: 1.1;} .page h1 a {margin-left: 10px; font-size: 16px;} .page__header-one, .page__header-two {gap: 10px; z-index: 5; --tt: #fff; color: #fff;} .page__poster {width: 180px; height: 260px; box-shadow: var(--bsh-poster); position: absolute; left: var(--indent); bottom: 0; z-index: 5;} .page__poster .card__meta2 {position: absolute; inset: 0; margin: 0; padding: 0px; aspect-ratio: unset} .page__poster .card__series {background-color: var(--bg); border-color: var(--bg); color: var(--tt); border-radius: 0;} .page__poster .card__quality {background-color: var(--accent-primary); border-radius: 0; border-color: var(--accent-primary); color: #fff;} .page__meta {color: var(--tt-fadest);} .page__meta a {color: inherit;} .page__share, .page__fav a {display: flex; align-items: center; height: 50px; border-radius: 25px; padding: 0 25px; background-color: transparent; border: 2px solid rgba(255,255,255,0.3); justify-content: center;} .page__fav a {padding: 0; width: 50px; font-size: 18px; color: var(--red);} .page__rating-score, .page__comm-num {font-size: 16px;} .page__rating {margin: 0 10px;} .page__rating-likes a {display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 15px; background-color: var(--green); color: #fff; border-radius: 15px;} .page__rating-likes a + a {background-color: var(--red); color: #fff;} .page__poster-bg {position: absolute; inset: 0;} .page__poster-bg::before {content: ''; position: absolute; inset: 0; z-index: 1; background-color: rgba(100, 57, 31, 0.6); backdrop-filter: blur(6px) grayscale(0.6);} .page__actors a, .page__poster a {display: block;} .page__cols-right {width: 300px; margin-left: 40px;} .page__btns {margin-bottom: 34px; gap: 20px;} .page__btns button {height: 50px; border-radius: 0px; padding: 0 40px; position: relative; isolation: isolate;} .page__btn-watch::after {content: ''; position: absolute; inset: -5px; background-color: inherit; opacity: 0.2; border-radius: 0px; z-index: -1;} .page__btn-trailer {background-color: var(--bg-darker); color: var(--tt);} .js-hide-text {max-height: 150px; overflow: auto;} .show-text {position: absolute; z-index: 2; left: 0; bottom: 0px; cursor: pointer; font-weight: 500; font-size: 14px; text-transform: uppercase; color: var(--accent-primary);} .js-hide-text[style]::before {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(to top, var(--bg) 0%, transparent 100%); z-index: 1;} .page__info-grid {display: grid; gap: 34px 20px; grid-template-columns: repeat(2,1fr);} .page__info--wide {grid-column: 1 / -1;} .page__info-caption {margin-bottom: 10px;} .page__actors {padding-top: 6px; gap: 20px;} .page__actors img {width: 50px; height: 50px; border-radius: 50%; object-fit: cover;} .page__list li + li {margin-top: 10px;} .page__list a {color: var(--accent-primary); text-decoration: underline;} .page__list li {position: relative; padding-left: 120px; min-height: 14px;} .page__list li > span:first-child {position: absolute; left: 0; top: 0; color: var(--tt-fade);} .page__list li.page__list-1 {padding-left: 0;} .page__list li.page__list-1 > span:first-child {position: static; display: block;} .page__subtitle {margin-bottom: 20px; font-size: 24px; font-weight: 700;} .page__player {position: relative;} .tabs-block__select {gap: 10px; margin-bottom: 10px;} .tabs-block__select button {height: 40px; padding: 0 20px; background-color: var(--bg-darker); color: var(--tt-fade);} .tabs-block__select button.is-active, .tabs-block__select button:hover {background: var(--accent-primary); color: #fff;} .page__complaint {position: absolute; right: 0; top: 9px; color: var(--red); --tt: var(--red);} .not-loaded .page__player-controls + .d-none {display: block;} @media screen and (min-width: 1220px) { .page__related .carousel__content:not(.owl-carousel) > * {width: calc((100% - 100px)/6);} } .page2__header {display: grid; gap: 20px 40px; grid-template-columns: 200px minmax(0,1fr); align-items: start; grid-template-rows: auto 1fr auto; grid-template-areas: "p2header p2header" "p2img p2list" "p2img p2ctrl";} .page2__header-header {grid-area: p2header;} .page2__header-img {grid-area: p2img;} .page2__header-list {grid-area: p2list;} .page2__header-ctrl {grid-area: p2ctrl;} .page2__header h1 {margin-bottom: 5px;} .page2 .page__poster {width: 200px; height: 300px; position: relative; left: 0; bottom: 0; margin-bottom: 20px;} .page2 .page__comm-num {margin-right: auto;} .page2 .page__rating {margin: 0;} .page2__header-ctrl {gap: 10px 20px;} .page2 .page__btn-watch {width: 100%; margin-top: 20px;} .page2 .page__btn-trailer {width: 200px; background-color: var(--bg-black) !important; color: #fff;} .page2 .page__fav a, .page2 .page__share {border-color: rgba(0,0,0,0.05); height: 40px; border-radius: 20px;} .page2 .page__fav a {width: 40px;} .page2 .page__share {color: var(--tt); padding: 0; flex-grow: 1; font-weight: 500;} .card__meta, .ftop-item__meta, .page__meta {word-wrap: break-word;} /* TEXT BLOCK, TYPOGRAPHY, VIDEO BLOCK ----------------------------------------------- */ .page__title {margin-bottom: 30px; font-size: 24px;} .full-text {line-height: 1.6; font-size: 16px; word-wrap: break-word;} .full-text a {text-decoration: underline; color: #5278b1;} .full-text img:not(.emoji), .full-text p, .full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5, .full-text > ul, .full-text > ol, .full-text table {margin-bottom: 25px;} .full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin:0 10px 10px 0;} .full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin:0 0 10px 10px;} .full-text > ul li, .full-text > ol li {padding-left: 60px; position: relative;} .full-text > ul li:before {content: ''; width: 8px; height: 8px; border-radius: 50%; border: 3px solid #fcc506; position: absolute; top: 6px; left: 34px;} .full-text > ol {counter-reset: num;} .full-text > ol li:before {content: counter(num); counter-increment: num; background-color: #fcc506; color: #000; position: absolute; top: -3px; left: 17px; width: 24px; height: 30px; font-size: 14px; font-weight: 600; display: flex; justify-content: flex-end; align-items: center; padding-right: 6px; box-sizing: border-box;} .full-text > ol li:after {content: ''; border: 10px solid transparent; border-left-color: #fcc506; position: absolute; left: 41px; top: -3px; transform: scale(0.66,1.5); transform-origin: 0 0;} .full-text > ul li + li, .full-text > ol li + li {margin-top: 10px;} .full-text table, .video-inside > * {width:100%;} .full-text > *:last-child {margin-bottom: 0;} .video-responsive {padding-top: 60%; position: relative; background-color: #000;} .video-responsive > iframe, .video-responsive > video {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 21px; margin-bottom: 20px;} /* COMMENTS ----------------------------------------------- */ .page__comments {margin-top: 0px;} .page__comments-title {font-size: 24px; margin-bottom: 20px; line-height: 1;} .page__comments-info {color: var(--tt-fade); display: block; margin: -5px 0 20px; padding-left: 23px; position: relative;} .page__comments-info::before {color: var(--ui-red); position: absolute; left: 0; top: 2px;} .ac-form {margin-bottom: 30px; position: relative;} .ac-form__header, .ac-form__editor, .ac-form .message-info {gap: 10px; margin-bottom: 10px;} .ac-form__btn {padding: 0 60px;} .ac-form__bottom {gap: 25px;} .confidential-check {font-size: 14px;} .ac-form__header > span {margin-left: 15px;} .ac-form .comments_subscribe {margin-top: 0px;} .ac-form__header input, .ac-form__editor textarea {border-radius: 0; box-shadow: none;} .ac-form__editor textarea {height: 120px;} .ac-form .bb-pane {border-radius: 0;} .mass_comments_action {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;} .mass_comments_action select {flex: 1 1 0; margin: 0 -28px 0 0; border-radius: 0; box-shadow: none; min-width: 60%;} .mass_comments_action .bbcodes {border-radius: 0; padding: 0 10px;} .comm__title {font-size: 18px; margin-bottom: 20px;} .comm {margin-bottom: 30px; position: relative;} .comm__img {width: 40px; height: 40px; border-radius: 50%;} .comm__img::before {content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: var(--ui-red); position: absolute; right: -1px; top: -1px; z-index: 5; border: 2px solid var(--bg);} .comm--online .comm__img::before {background-color: var(--ui-green);} .comm__letter {width: 100%; height: 100%; text-transform: uppercase; border-radius: inherit; position: absolute; left: 0; top: 0; color: #fff; font-size: 18px; font-weight: var(--ui-fw-bolder);} .comm__author, .comm__author a {text-transform: uppercase; font-weight: 500; font-size: 14px;} .comm__date {color: var(--tt-fade); margin-top: 2px; font-size: 14px;} .comm__main {margin: 6px 0 0 0; padding: 10px 10px 10px 40px; background-color: var(--bg-darker); border-bottom: 0;} .comm__action {gap: 20px; font-size: 14px;} .comm__footer {padding: 10px 10px 10px 40px; border: 1px solid var(--bdc); border-top: 0;} .comm__action li, .comm__action li a {color: var(--tt-fade); cursor: pointer; gap: 8px; display: flex; align-items: center;} .comm__ctrl, .comm__ctrl a {font-size: 15px; gap: 10px 15px; color: var(--tt-fade);} .comm__ctrl li.has-checkbox {transform: scale(0.8,0.8); margin: 0 -10px 0 -5px;} .comm__ctrl li.has-checkbox input {border-color: var(--tt-fade);} .comm__rating {gap: 1px; margin-bottom: -10px;} .comm__rating > * {display: flex; gap: 5px; height: 20px; align-items: center; background-color: var(--bg-darker); padding: 0 10px;} .comm__rating > * .fas {color: var(--green);} .comm__rating > * + * .fas {color: var(--red);} .comm__meta {display: flex; align-items: center; gap: 20px;} .comm__header {padding-left: 40px;} .comm__img {position: absolute; left: -20px; top: 0px; width: 50px; height: 50px;} /* LOGIN ----------------------------------------------- */ .login {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: var(--ui-bg); width: 440px; border: 10px solid var(--ui-bg-darker); box-shadow: 0 15px 45px rgba(0,0,0,1); overflow-y: auto; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px);} .login__header {padding: 20px 50px 25px 50px; border-bottom: 1px solid var(--ui-bdc); position: relative;} .login__title {font-size: 24px; font-weight: var(--ui-fw-bolder);} .login__caption {font-size: 15px; color: var(--ui-tt-fade); margin-top: 3px;} .login__close {font-size: 23px; position: absolute; right: 10px; top: 10px; padding: 0; width: 40px; height: 40px;} .login__content {display: grid; gap: 20px; padding: 25px 50px; padding-bottom: 50px; position: relative;} .login__row, .login__row.fal, .login__row.fas {position: relative; display: grid; gap: 10px; justify-content: stretch;} .login__row-caption a, .login__caption a {margin-left: 10px;} .login__row::before {position: absolute; left: 2px; bottom: 0; width: 40px; height: 50px; display: grid; place-items: center; opacity: 0.4; font-size: 18px;} .login__input input {padding-left: 40px; border-radius: var(--ui-bdrs); height: 50px; line-height: 48px;} .login__row button {width: 100%; height: 40px; border-radius: var(--ui-bdrs);} .login__social {padding-top: 10px; text-align: center; gap: 10px; margin-bottom: -20px;} .login__social-caption {font-size: 13px; color: var(--ui-tt-fade); width: 100%;} .login__social a {padding: 0 10px; border-radius: 20px; position: relative; width: 40px; height: 40px; overflow: hidden; color: #fff; display: flex; align-items: center; justify-content: center;} .login__social a::before {content: ''; width: 40px; background: rgba(0,0,0,0); position: absolute; left: 0; top: 0; height: 100%;} .login__social a img {position: absolute; left: 10px; top: 50%; height: 20px; width: 20px; z-index: 1; display: block; filter: invert(1); transform: translateY(-50%);} .login__social-vk {background-color: #587ba1;} .login__social-ok {background-color: #ff9800;} .login__social-fb {background-color: #3b5998;} .login__social-ml {background-color: #2196f3;} .login__social-gg {background-color: #f44336;} .login__social-ya {background-color: #fc3f1d;} .header__login-img {width: 40px; height: 40px; border-radius: 50%; cursor: pointer;} .header__favlink {font-size: 24px; --tt: var(--accent-secondary);} .header__favlink span {position: absolute; padding: 0 4px; display: inline-block; padding: 0 6px; background-color: var(--accent-primary); color: #fff; font-size: 11px; right: -13px; top: -8px; border-radius: 4px;} .header__favlink span.count-0 {display: none;} .header__login-panel {position: absolute; right: 0; top: 100%; width: 240px; padding-bottom: 10px; background-color: var(--bg); box-shadow: var(--bsh); margin-top: 20px; z-index: 10;} .header__login-header {padding: 20px; color: var(--tt); font-weight: 700; gap: 20px; border-bottom: 1px solid var(--bdc); background-color: var(--ui-bg-darker); margin-bottom: 10px;} .header__login-avatar {width: 40px; height: 40px; border-radius: 50%;} .header__login-group span {font-size: 12px; font-weight: 400; margin-top: 2px; display: block; color: var(--ui-tt-fade) !important;} .header__login-menu a {display: flex; align-items: center; min-height: 30px; padding: 0 20px 0 0;} .header__login-menu a::before {width: 40px; text-align: center; color: var(--accent-primary);} .header__login-menu-border {border-top: 1px solid var(--bdc); margin-top: 10px; padding-top: 10px;} .header__login-menu a span {font-size: 12px; margin-left: auto;} /* ADAPTIVE, MOBILE MENU ----------------------------------------------- */ .overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.6; background-color: #000; cursor: pointer; display: none;} .mobile-menu {width: 280px; height: 100%; overflow-x: hidden; overflow-y: auto; z-index: 999; position: fixed; left: -360px; top: 0; transition: left 0.4s; background-color: var(--bg);} .mobile-menu.is-active {left: 0;} body.mobile-menu-is-opened {overflow: hidden; width: 100%; height: 100%;} .mobile-menu__header {padding: 15px 20px; gap: 10px; background-color: var(--bg-black); --tt: #fff;} .mobile-menu__btn-close {font-size: 24px; width: 40px; height: 40px; margin-right: -10px;} .mobile-menu__content {padding: 26px 20px;} .mobile-menu__header .logo-block {height: 40px;} @media screen and (max-width: 1220px) { :root {--indent-negative: -20px; --indent: 20px;} body {background-image: none;} .wrapper {padding: 0; background-image: none; overflow: hidden;} .wrapper__container {max-width:1000px; border-radius: 0;} .header .header__menu, .sidebar .js-this-in-mobile-menu, .sb--hide, .header__btn-link, .carousel::before, .carousel::after, .footer::before, .footer::after {display: none;} .header {gap: 10px; padding: 10px var(--indent); margin-bottom: 0px;} .header__logo {flex: 1 1 0; max-width: 100%; min-width: 60px; margin-right: 0; height: 40px;} .header__btn-menu {display: flex; padding: 0; width: 40px; font-size: 18px;} .header__btn-login {margin-right: 10px;} .search-block {min-width: 100%; order: 10; display: block; margin: 0;} .search-block__input, .search-block__input:focus {width: 100%;} .header__settings-btn {height: 60px; margin: -10px 0;} .wrapper__cols {display: block;} .carousel__content:not(.owl-carousel) > * {width: calc((100% - 100px)/6);} .carousel {padding: 20px 40px; --indent-negative: -20px; margin: 0;} .carousel .owl-nav button {background-color: transparent; border: 0;} .content {padding-top: 20px;} .sect__header--mb {margin-bottom: 20px;} .descr {padding-bottom: 0;} .sidebar {padding-top: 1px; padding-bottom: 20px;} .sb__grid {grid-template-columns: repeat(auto-fill,minmax(280px,1fr));} .footer__text {min-width: 100%; order: 10;} .poster2 .d-grid-items--main {grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px;} .header__login-panel {margin-top: 0;} .header__favlink, .header__login-img {margin-left: 10px;} .footer {margin: 0; padding-top: 20px; padding-bottom: 20px;} .footer__logo {min-width: 0; margin-right: 20px; flex-grow: 1;} .speedbar2 {margin-top: 0;} .page__header {padding-left: calc(200px + var(--indent));} .page2__header {gap: 20px;} .speedbar {max-width: calc(100% - 200px - var(--indent)*2);} } @media screen and (max-width: 950px) { .wrapper__container {max-width:768px;} .pagination {gap: 10px;} .pagination__btn-loader a, .pagination__btn-loader span {width: 100%;} .pagination > a, .pagination > span {flex-grow: 1; order: 10;} .pagination__pages {min-width: 100%;} .pagination__pages a, .pagination__pages span {flex-grow: 1;} .carousel__content:not(.owl-carousel) > * {width: calc((100% - 60px)/4);} .d-grid-items--main {grid-template-columns: repeat(1,minmax(0,1fr));} .upd-items:not(.owl-carousel) > * {width: calc((100% - 40px)/3);} .coll-items:not(.owl-carousel) > .coll {width: calc((100% - 20px)/2);} .upd-items:not(#upd-carousel), .page__related .carousel__content:not(#related-carousel), .coll-items:not(#coll-carousel) {overflow-x: auto; scroll-snap-type: x mandatory; margin-right: var(--indent-negative);} .upd-items:not(#upd-carousel) > .upd, .coll-items:not(#coll-carousel) > .coll {scroll-snap-align: start; width: 320px;} .page__related .carousel__content:not(#related-carousel) > .carou {scroll-snap-align: start; width: 120px;} .page__cols-right {width: 100%; margin: 0; margin-top: 20px;} .page__btns, .page__header {margin-bottom: 20px;} .page__info-grid {gap: 20px;} .page__actors {gap: 10px;} .page h1 {font-size: 24px;} } @media screen and (max-width: 950px) and (min-width: 760px) { .poster3 .card__footer .btn::before, .poster3 .card__footer button::before {display: none;} } @media screen and (max-width: 760px) { .wrapper__container {max-width:640px;} .login__header, .login__content {padding: 20px;} .login__social {margin-bottom: 0;} .login__row::before {height: 40px;} .login__input input {height: 40px; line-height: 40px; box-shadow: none; border: 0; background-color: var(--bg-darker);} .login__social a {height: 30px; flex: 1 0 30%;} .login__social a img {left: 50%; margin-left: -10px;} .header__soc-link span, [data-poster="poster3"], [data-poster="poster4"], .speedbar {display: none;} .header__soc-link {padding: 0; width: 30px;} .carousel__content:not(.owl-carousel) > * {width: calc((100% - 40px)/3);} .upd-items:not(.owl-carousel) > * {width: calc((100% - 20px)/2);} .coll-items:not(.owl-carousel) > .coll {width: 100%;} .poster2 .d-grid-items--main {grid-template-columns: repeat(3,minmax(0,1fr));} .poster2 .coll {grid-column: 1 / -1;} .page__header {display: grid; gap: 20px; grid-template-columns: 120px minmax(0,1fr); margin-top: -20px; grid-template-areas: "pposter pone" "ptwo ptwo"; padding: 20px var(--indent); align-items: center; height: auto;} .page__header-one {grid-area: pone;} .page__header-two {grid-area: ptwo; gap: 10px 20px;} .page__header h1, .page__meta {min-width: 100%; line-height: 1.3;} .page__poster {grid-area: pposter; position: relative; left: 0; bottom: 0; width: 120px; height: 180px;} .page__poster .card__series {flex-direction: column; height: auto;} .page__info {grid-column: 1 / -1;} .page__subtitle {font-size: 16px; margin-right: 120px;} .page__complaint {top: 0; margin-top: -36px;} .tabs-block__select button {flex-grow: 1;} .page2__header {grid-template-columns: 120px minmax(0,1fr); grid-template-rows: auto auto auto; grid-template-areas: "p2img p2header" "p2ctrl p2ctrl" "p2list p2list";} .page2__header-img .page__poster {width: 120px; height: 180px; margin: 0;} .page2 .page__btn-watch, .page2__header-ctrl2 {position: absolute; bottom: 0; left: 140px; width: calc(100vw - 180px); margin: 0;} .page2__header-ctrl2 {bottom: 60px;} .page2 .page__btn-trailer {width: 100%;} .page2__header-header h1 {font-size: 18px; margin-bottom: 5px; line-height: 1.3;} .page2 .page__meta {font-size: 14px;} .page__title {font-size: 24px;} .full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 20px;} .page__intro, .page__text .quote {margin-left: var(--indent-negative); margin-right: var(--indent-negative); padding-right: var(--indent);} .full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 18px;} .ac-form__bottom {gap: 10px;} .ac-form__bottom button {padding: 0 20px; width: 100%;} .ac-form__header input + input {min-width: 100%; order: 10;} .ac-form__header > span, .comm__rating::before {display: none;} .ac-form #b_color {display: none;} .ac-toggle .ac-form__bottom button {position: static; width: 100%;} .comm__meta {display: block;} .comm__img {position: relative; left: 0; top: 0; margin-right: 10px; width: 40px; height: 40px;} .comm__main, .comm__footer {padding-left: 10px;} .comm__header {padding-left: 0;} .comm__rating > * {padding: 0 6px; font-size: 14px;} } @media screen and (max-width: 590px) { .wrapper__container {max-width:480px;} .carousel__content:not(.owl-carousel) {gap: 10px;} .carousel__content:not(.owl-carousel) > * {width: calc((100% - 20px)/3);} .footer__logo {margin: 0; width: 100%;} .header__soc-link, .header__settings {order: 11;} .search-block {min-width: calc(100% - 100px); margin-right: 10px;} .header__settings-btn {width: 40px;} .header__logo {font-size: 18px; overflow: hidden; white-space: nowrap;} .header__logo span {margin-top: 0px;} .sect__title {font-size: 18px; min-width: 100%;} .sect__btn-filter {height: auto; line-height: 1.4;} .header__settings-list {width: calc(100vw - 0px); right: var(--indent-negative);} } @media screen and (max-width: 470px) { .wrapper__container123 {max-width:360px;} .card {margin: 0 var(--indent-negative); border-radius: 0;} .d-grid-items--main {gap: 0;} .d-grid-items--main .pagination {padding-top: 40px;} .card__meta2::before, .footer__text br {display: none !important;} .carousel__content:not(.owl-carousel) > * {width: calc((100% - 10px)/2);} .upd-items:not(.owl-carousel) > * {width: calc((100% - 0px)/1);} .poster2 .d-grid-items--main {grid-template-columns: repeat(2,minmax(0,1fr));} .poster2 .card {margin: 0;} .poster2 .card__title {font-size: 16px;} .poster2 .card__meta {font-size: 14px;} .poster2 .card__img {margin-bottom: 14px;} .poster2 .pagination {padding-top: 10px;} .header__favlink + .header__favlink {display: none;} .header__login-img {margin-right: 10px;} .header__favlink {margin: 0;} .descr {padding-top: 0;} .poster1 .d-grid-items--main .coll, .poster3 .d-grid-items--main .coll {margin-bottom: 20px;} .upd-items:not(#upd-carousel) > .upd, .coll-items:not(#coll-carousel) > .coll {width: calc(100vw - 100px);} .page__related .carousel__content:not(#related-carousel) {gap: 20px;} .page__related .carousel__content:not(#related-carousel) > .carou {width: calc((100vw - 100px)/2);} .speedbar {display: block; right: auto; left: var(--indent); top: 15px; max-width: calc(100% - var(--indent)*2);} .page__header {padding-top: 56px;} .page__header-one {gap: 20px 10px;} .page__fav a {height: 40px; width: 40px;} .page__share {flex-grow: 1; height: 40px; border-radius: 20px; font-weight: 500; padding: 0;} .page__btns button {width: 100%;} .page__actors img {width: 40px; height: 40px;} .full-text iframe {width: calc(100% + 40px); max-width: calc(100% + 40px); height: 260px; margin-left: -20px; margin-right: -20px;} } .filter-block {margin-bottom: 40px;} .filter-block__form {display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); grid-gap: 10px 10px;} .filter-block__cell--full-width {grid-column: 1 / -1;} .filter-block__cell-caption {margin-bottom: 10px;} .filter-block__cell-content > * {width: 100%; display: block;} .filter-block__cell-content--two-columns {display: flex; justify-content: space-between;} .filter-block__cell-content--two-columns > * {width: calc((100% - 10px)/2) !important;} .filter-block__cell-content select, .filter-block__cell-content input[type="text"], .filter-block__cell-content--check-group {height: 36px; line-height: 34px; background-position: right 8px top 50%; background-color: var(--bg-darker); color: var(--tt); border: 1px solid var(--bdc); border-radius: 4px; box-shadow: none; font-size: 15px; padding: 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .filter-block__cell-content select {padding: 0 16px 0 4px;} .filter-block__cell-content input[type="text"]::placeholder {opacity: 1; color: var(--tt); font-size: 14px;} .filter-block__cell-content input[type="text"]:focus::placeholder {opacity: 0; font-size: 15px;} .filter-block__cell-content label {position: relative; padding-left: 50px; cursor: pointer; height: 36px; display: flex; flex-direction: column; justify-content: center; font-size: 14px;} .filter-block__cell-content label input {display: inline-block; appearance: none; -webkit-appearance: none; height: 20px; width: 40px; border-radius: 10px; background-color: var(--bg-darker); cursor: pointer; transition: all .2s linear; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); position: absolute; left: 0; top: 50%; margin-top: -10px;} .filter-block__cell-content label input::before {content: ''; width: 18px; height: 18px; border-radius: 10px; position: absolute; left: 1px; top: 1px; background-color: var(--bg); transition: all .2s linear;} .filter-block__cell-content label input:checked {background-color: #6ab04c;} .filter-block__cell-content label input:checked::before {left: 21px;} .filter-block__cell-content input[type="button"], .filter-block__cell-content button {cursor: pointer; height: 36px; display: inline-flex; justify-content: center; padding: 0 10px; box-shadow: none; border-radius: 4px;} .filter-block__cell-content input[type="button"][data-dlefilter="reset"] {background: var(--bg-darker); color: var(--tt);} .filter-block__cell-content--check-group label {padding: 0; text-align: center; white-space: nowrap; flex: 1 1 0; min-width: 30px; max-width: 100%; background: var(--bg);} .filter-block__cell-content--check-group label input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 5;} .filter-block__cell-content--check-group {display: flex; justify-content: center; overflow: hidden; padding: 0;} .filter-block__cell-content--check-group label + label {border-left: 1px solid var(--bg-darker);} .filter-block__cell-content--check-group label span {height: 36px; font-size: 15px; display: block;} .filter-block__cell-content--check-group label input:checked + span {background-color: var(--bg-darker); color: var(--tt);} @media screen and (max-width: 590px) { .filter-block {margin-bottom: 20px;} .filter-block__form {grid-template-columns: repeat(auto-fit,minmax(260px,1fr));} } /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel {width: 100%; position: relative; z-index: 1;} .owl-stage {position: relative; display:flex; justify-content:flex-start;} .owl-stage-outer {position: relative; overflow: hidden; transform: translate3d(0px, 0px, 0px);} .owl-item {position: relative; min-height: 10px;} .owl-nav.disabled,.owl-dots.disabled, .owl-carousel.owl-refresh .owl-item {display: none;} .owl-carousel.owl-drag .owl-item {user-select: none;} .owl-carousel.owl-grab {cursor: move; cursor: grab;} .owl-nav {position: absolute; left: 0; right: 0; top: 50%;} .owl-prev, .owl-next {cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; position: absolute; top: 0; margin-top: -44px; font-size: 18px; border-radius: 50%; background-color: var(--accent-secondary); color: var(--accent-primary); border: 1px solid var(--accent-primary);} .owl-prev {left: calc(var(--indent-negative)*2);} .owl-next {right: calc(var(--indent-negative)*2);} .owl-prev:hover, .owl-next:hover {background-color: var(--accent-primary); color: #fff;} .sect--upd .owl-nav, .page__related .owl-nav, .sect--coll .owl-nav {left: auto; top: -8px; gap: 0px; display: flex;} .sect--upd .owl-nav button, .page__related .owl-nav button, .sect--coll .owl-nav button {position: static; color: var(--accent-primary); width: 30px; height: 30px; border: 0; background-color: transparent;} .sect--upd .owl-nav button:hover, .page__related .owl-nav button:hover, .sect--coll .owl-nav button:hover {background-color: var(--accent-primary); color: #fff;} /* ================================================== KinoHit — уведомление о ежедневных монетах Стиль соответствует основному шаблону ================================================== */ .kh-coins-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .72); animation: khCoinsFadeIn .25s ease both; } .kh-coins-notice { position: relative; display: flex; align-items: center; gap: 18px; width: 100%; max-width: 420px; padding: 26px; color: var(--tt, #fff); background: var(--bg-darker, #171717); border: 1px solid var(--bdc, #333); border-top: 3px solid var(--accent-primary, #e76d39); border-radius: 4px; box-shadow: var(--bsh-content, 0 12px 35px rgba(0,0,0,.4)); animation: khCoinsPop .3s ease both; } .kh-coins-notice__icon { flex: 0 0 58px; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: var(--bg, #202020); border: 1px solid var(--bdc, #333); border-radius: 4px; } .kh-coins-notice__text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 7px; padding-right: 12px; } .kh-coins-notice__text strong { color: var(--tt, #fff); font-size: 18px; line-height: 1.3; font-weight: 700; } .kh-coins-notice__text span { color: var(--accent-primary, #e76d39); font-size: 27px; line-height: 1.2; font-weight: 700; } .kh-coins-notice__text small { color: var(--tt-fade, #aaa); font-size: 12px; line-height: 1.5; } .kh-coins-notice__close { position: absolute; top: 7px; right: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--tt-fade, #aaa); background: transparent; border: 0; font-size: 24px; cursor: pointer; transition: color .2s; } .kh-coins-notice__close:hover { color: var(--accent-primary, #e76d39); } @keyframes khCoinsFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes khCoinsPop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 480px) { .kh-coins-notice { gap: 12px; padding: 24px 16px; } .kh-coins-notice__icon { flex-basis: 48px; width: 48px; height: 48px; font-size: 26px; } .kh-coins-notice__text strong { font-size: 16px; } .kh-coins-notice__text span { font-size: 23px; } } @media (prefers-reduced-motion: reduce) { .kh-coins-overlay, .kh-coins-notice { animation: none; } } /* ================================================== KinoHit — магазин монет Тёмный стиль основного шаблона, без неона ================================================== */ .kh-shop, .kh-shop * { box-sizing: border-box; } .kh-shop { --kh-shop-bg: var(--bg-darker, #171717); --kh-shop-card: var(--bg, #202020); --kh-shop-text: var(--tt, #f0f0f0); --kh-shop-muted: var(--tt-fade, #a0a0a0); --kh-shop-border: var(--bdc, #353535); --kh-shop-accent: var(--accent-primary, #e76d39); width: 100%; color: var(--kh-shop-text); font-size: 14px; line-height: 1.6; } .kh-shop__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-bottom: 24px; padding: 22px; background: var(--kh-shop-bg); border: 1px solid var(--kh-shop-border); border-top: 2px solid var(--kh-shop-accent); border-radius: 4px; } .kh-shop__title { margin: 0 0 5px; color: var(--kh-shop-text); font-size: 25px; font-weight: 700; line-height: 1.3; } .kh-shop__subtitle { margin: 0; color: var(--kh-shop-muted); font-size: 13px; } .kh-shop__balance { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--kh-shop-card); border: 1px solid var(--kh-shop-border); border-radius: 4px; } .kh-shop__balance-icon { font-size: 25px; } .kh-shop__balance-label { display: block; color: var(--kh-shop-muted); font-size: 11px; } .kh-shop__balance-value { display: block; color: var(--kh-shop-accent); font-size: 20px; font-weight: 700; line-height: 1.3; } .kh-shop__section-title { margin: 26px 0 15px; padding-bottom: 10px; color: var(--kh-shop-text); font-size: 19px; font-weight: 700; border-bottom: 1px solid var(--kh-shop-border); } .kh-shop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .kh-shop__item { display: flex; flex-direction: column; min-width: 0; padding: 18px; background: var(--kh-shop-bg); border: 1px solid var(--kh-shop-border); border-radius: 4px; transition: border-color .2s, transform .2s; } .kh-shop__item:hover { border-color: var(--kh-shop-accent); transform: translateY(-2px); } .kh-shop__item-image { display: flex; align-items: center; justify-content: center; min-height: 125px; margin-bottom: 14px; overflow: hidden; background: var(--kh-shop-card); border: 1px solid var(--kh-shop-border); border-radius: 3px; } .kh-shop__item-image img { display: block; max-width: 100%; max-height: 160px; object-fit: contain; } .kh-shop__item-icon { font-size: 48px; line-height: 1.2; } .kh-shop__item-title { margin: 0 0 8px; color: var(--kh-shop-text); font-size: 16px; font-weight: 700; line-height: 1.4; } .kh-shop__item-description { flex: 1; margin: 0 0 16px; color: var(--kh-shop-muted); font-size: 13px; line-height: 1.6; } .kh-shop__item-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--kh-shop-border); } .kh-shop__price { color: var(--kh-shop-accent); font-size: 17px; font-weight: 700; white-space: nowrap; } .kh-shop__button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 9px 14px; color: #fff !important; background: var(--kh-shop-accent); border: 1px solid var(--kh-shop-accent); border-radius: 3px; font: inherit; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none !important; cursor: pointer; transition: opacity .2s, background .2s; } .kh-shop__button:hover { color: #fff !important; opacity: .85; } .kh-shop__button:disabled, .kh-shop__button.is-disabled { color: var(--kh-shop-muted) !important; background: var(--kh-shop-card); border-color: var(--kh-shop-border); cursor: not-allowed; opacity: .7; } .kh-shop__notice { margin: 16px 0; padding: 13px 16px; color: var(--kh-shop-text); background: var(--kh-shop-bg); border: 1px solid var(--kh-shop-border); border-left: 3px solid var(--kh-shop-accent); border-radius: 3px; } .kh-shop__empty { padding: 35px 20px; color: var(--kh-shop-muted); background: var(--kh-shop-bg); border: 1px dashed var(--kh-shop-border); border-radius: 4px; text-align: center; } .kh-shop__history { width: 100%; border-collapse: collapse; background: var(--kh-shop-bg); } .kh-shop__history th, .kh-shop__history td { padding: 12px; border-bottom: 1px solid var(--kh-shop-border); text-align: left; } .kh-shop__history th { color: var(--kh-shop-muted); font-size: 12px; font-weight: 600; } .kh-shop__history td { color: var(--kh-shop-text); } .kh-shop__history tr:last-child td { border-bottom: 0; } @media (max-width: 900px) { .kh-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .kh-shop__header { align-items: flex-start; flex-direction: column; padding: 17px; } .kh-shop__title { font-size: 21px; } .kh-shop__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .kh-shop__item { padding: 15px; } .kh-shop__item-image { min-height: 100px; } .kh-shop__item-footer { align-items: stretch; } .kh-shop__button { flex: 1; } .kh-shop__history th, .kh-shop__history td { padding: 9px 7px; font-size: 12px; } } /* KinoHit — монеты в профиле */ .kh-coins-profile-wrap { --khcp-bg: var(--bg-darker, #171717); --khcp-card: var(--bg, #202020); --khcp-text: var(--tt, #f0f0f0); --khcp-muted: var(--tt-fade, #a0a0a0); --khcp-border: var(--bdc, #353535); --khcp-accent: var(--accent-primary, #e76d39); width: 100%; margin: 20px 0; color: var(--khcp-text); } .kh-coins-profile-wrap .kh-coins-profile { box-sizing: border-box; width: 100%; padding: 20px; background: var(--khcp-bg); border: 1px solid var(--khcp-border); border-top: 2px solid var(--khcp-accent); border-radius: 4px; box-shadow: none; color: var(--khcp-text); } .kh-coins-profile-wrap .kh-coins-profile__heading { margin: 0 0 16px; color: var(--khcp-text); font-size: 16px; font-weight: 700; letter-spacing: .4px; } .kh-coins-profile-wrap .kh-coins-profile__balance { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 16px; background: var(--khcp-card); border: 1px solid var(--khcp-border); border-radius: 3px; box-shadow: none; } .kh-coins-profile-wrap .kh-coins-profile__number { color: var(--khcp-accent); font-size: 30px; font-weight: 800; line-height: 1.2; text-shadow: none; overflow-wrap: anywhere; } .kh-coins-profile-wrap .kh-coins-profile__label { color: var(--khcp-muted); font-size: 14px; } .kh-coins-profile-wrap .kh-coins-profile__streak { margin-top: 15px; padding: 12px 14px; background: var(--khcp-card); border-left: 2px solid var(--khcp-accent); color: var(--khcp-text); font-size: 14px; } .kh-coins-profile-wrap .kh-coins-profile__hint { margin-top: 12px; color: var(--khcp-muted); font-size: 12px; line-height: 1.6; } .kh-coins-profile-wrap .kh-coins-profile *, .kh-coins-profile-wrap .kh-coins-profile { text-shadow: none; box-sizing: border-box; } @media (max-width: 600px) { .kh-coins-profile-wrap { margin: 14px 0; } .kh-coins-profile-wrap .kh-coins-profile { padding: 14px; } .kh-coins-profile-wrap .kh-coins-profile__balance { padding: 13px; } .kh-coins-profile-wrap .kh-coins-profile__number { font-size: 25px; } } /* KinoHit — неоновый выбор рекомендации */ .kh-recommendation-select { --kh-positive: #38e5a0; --kh-negative: #ff627b; --kh-neutral: #a9b2d5; margin: 16px 0 20px; padding: 18px; border: 1px solid rgba(142, 117, 255, .28); border-radius: 14px; background: linear-gradient(135deg, rgba(111, 65, 202, .13), rgba(20, 23, 45, .92)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); } .kh-recommendation-select__title { margin: 0 0 13px; font-size: 15px; font-weight: 700; color: var(--tt, #f2f2ff); } .kh-recommendation-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .kh-recommendation-option { display: block; position: relative; margin: 0; cursor: pointer; min-width: 0; } .kh-recommendation-option input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .kh-recommendation-option span { display: flex; align-items: center; justify-content: center; min-height: 48px; height: 100%; padding: 11px 9px; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.35; border: 1px solid rgba(151, 158, 199, .22); border-radius: 10px; background: rgba(12, 16, 35, .45); color: var(--tt-fade, #b9bdd4); transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; } .kh-recommendation-option:hover span {transform: translateY(-2px); border-color: rgba(160,130,255,.5);} .kh-recommendation-option input:focus-visible + span {outline: 2px solid var(--accent-primary, #9b7bff); outline-offset: 3px;} .kh-recommendation-option input[value="1"]:checked + span { color: #38e5a0; background: rgba(56,229,160,.13); border-color: #38e5a0; box-shadow: 0 0 17px rgba(56,229,160,.13); } .kh-recommendation-option input[value="-1"]:checked + span { color: #ff627b; background: rgba(255,98,123,.13); border-color: #ff627b; box-shadow: 0 0 17px rgba(255,98,123,.13); } .kh-recommendation-option input[value="0"]:checked + span { color: #c2c9e3; background: rgba(169,178,213,.14); border-color: #a9b2d5; box-shadow: 0 0 17px rgba(169,178,213,.10); } /* Цвет отправки связан с выбранным radio; JS не нужен. */ .ac-form:has(.kh-recommendation-option input[value="1"]:checked) .ac-form__btn { background: #168b65; color: #fff; border-color: #168b65; box-shadow: 0 5px 18px rgba(56,229,160,.18); } .ac-form:has(.kh-recommendation-option input[value="-1"]:checked) .ac-form__btn { background: #c73755; color: #fff; border-color: #c73755; box-shadow: 0 5px 18px rgba(255,98,123,.18); } .ac-form:has(.kh-recommendation-option input[value="0"]:checked) .ac-form__btn { background: #59637e; color: #fff; border-color: #59637e; box-shadow: 0 5px 18px rgba(169,178,213,.15); } .kh-comment-recommendation { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.4; } .kh-comment-recommendation--positive {color: #38e5a0; background: rgba(56,229,160,.12); border: 1px solid rgba(56,229,160,.3);} .kh-comment-recommendation--negative {color: #ff8093; background: rgba(255,98,123,.12); border: 1px solid rgba(255,98,123,.3);} .kh-comment-recommendation--neutral {color: #c2c9e3; background: rgba(169,178,213,.12); border: 1px solid rgba(169,178,213,.25);} @media (max-width: 700px) { .kh-recommendation-select {padding: 13px;} .kh-recommendation-options {grid-template-columns: 1fr; gap: 8px;} .kh-recommendation-option span {min-height: 43px;} .kh-comment-recommendation {margin-left: 0; margin-top: 5px;} } /* KINOHIT — окраска опубликованного комментария по рекомендации */ .comm:has(.kh-comment-recommendation--positive) { --kh-comment-accent: #38e5a0; --kh-comment-tint: rgba(56,229,160,.085); --kh-comment-border: rgba(56,229,160,.50); } .comm:has(.kh-comment-recommendation--negative) { --kh-comment-accent: #ff627b; --kh-comment-tint: rgba(255,98,123,.085); --kh-comment-border: rgba(255,98,123,.50); } .comm:has(.kh-comment-recommendation--neutral) { --kh-comment-accent: #98a8d0; --kh-comment-tint: rgba(152,168,208,.065); --kh-comment-border: rgba(152,168,208,.30); } .comm:has(.kh-comment-recommendation) .comm__main { background: linear-gradient(110deg, var(--kh-comment-tint), var(--bg-darker) 85%); border-left: 3px solid var(--kh-comment-accent); padding-left: 37px; transition: background .25s ease, border-color .25s ease; } .comm:has(.kh-comment-recommendation) .comm__footer { border-left: 3px solid var(--kh-comment-border); padding-left: 37px; } .comm:has(.kh-comment-recommendation) .comm__author, .comm:has(.kh-comment-recommendation) .comm__author a { color: var(--kh-comment-accent); } @media screen and (max-width: 760px) { .comm:has(.kh-comment-recommendation) .comm__main, .comm:has(.kh-comment-recommendation) .comm__footer {padding-left: 10px;} } /* KinoHit: мнение зрителей — неоновый тёмный блок */ .kh-opinion{margin:26px 0;padding:24px;border:1px solid rgba(151,124,255,.27);border-radius:18px;background:linear-gradient(140deg,rgba(31,27,62,.96),rgba(14,18,35,.98));box-shadow:0 12px 35px rgba(0,0,0,.17);color:#eef0ff} .kh-opinion__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:19px} .kh-opinion__heading{margin:0;font-size:21px;line-height:1.3;font-weight:800;color:#f3f0ff} .kh-opinion__heading span{color:#ae8dff;margin-right:7px} .kh-opinion__badge{padding:7px 12px;border-radius:30px;font-size:13px;font-weight:700;color:#65efb6;background:rgba(40,218,155,.13);border:1px solid rgba(40,218,155,.3)} .kh-opinion__badge--negative{color:#ff8498;background:rgba(255,92,121,.12);border-color:rgba(255,92,121,.3)} .kh-opinion__badge--empty{color:#b7bfd9;background:rgba(156,165,195,.1);border-color:rgba(156,165,195,.25)} .kh-opinion__bar{display:flex;height:12px;overflow:hidden;background:#282b43;border-radius:50px;margin-bottom:20px} .kh-opinion__bar-positive{display:block;background:linear-gradient(90deg,#169f78,#35e4a5);transition:width .3s} .kh-opinion__bar-negative{display:block;background:linear-gradient(90deg,#f65b74,#bd375c);transition:width .3s} .kh-opinion__numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .kh-opinion__item{min-width:0;text-align:center;padding:14px 8px;border:1px solid rgba(155,163,204,.13);background:rgba(255,255,255,.035);border-radius:12px} .kh-opinion__item strong{display:block;font-size:30px;line-height:1.15;font-weight:800;font-variant-numeric:tabular-nums} .kh-opinion__item span{display:block;margin-top:7px;font-size:12px;line-height:1.4;color:#bec5db} .kh-opinion__item--positive strong{color:#42e3aa} .kh-opinion__item--negative strong{color:#ff6d85} .kh-opinion__item--neutral strong{color:#b1b9d5} .kh-opinion__footnote{margin:15px 0 0;color:#8995b5;font-size:12px;line-height:1.5} @media(max-width:600px){.kh-opinion{padding:16px;margin:18px 0;border-radius:14px}.kh-opinion__heading{font-size:18px}.kh-opinion__numbers{gap:6px}.kh-opinion__item{padding:12px 4px}.kh-opinion__item strong{font-size:24px}.kh-opinion__item span{font-size:10px}} /* ============================================================= KinoHit / KINO.PUSH — графитовые комментарии, DLE 21 Только оформление: разметка и логика рекомендаций не меняются. ============================================================= */ .page__comments {--kh-surface:#292d32;--kh-surface-2:#32373e;--kh-line:#4a5059;--kh-text:#f2f3f5;--kh-muted:#b5bdc7;--kh-green:#64d9a5;--kh-red:#f38b95;--kh-neutral:#becbd9;color:var(--kh-text);} .page__comments-title,.page__comments .comm__title{color:var(--kh-text);font-weight:800;letter-spacing:.1px} .page__comments-info{color:var(--kh-muted)} .page__comments .ac-form{padding:24px;background:linear-gradient(145deg,#353a40,#272b30);border:1px solid var(--kh-line);border-radius:18px;box-shadow:0 12px 32px rgba(0,0,0,.18);color:var(--kh-text)} .page__comments .ac-form__header input,.page__comments .ac-form__editor textarea,.page__comments .ac-form input[type=text],.page__comments .ac-form .bb-pane{background:#25292e;color:#f3f5f7;border:1px solid #515862;border-radius:10px;box-shadow:none} .page__comments .ac-form__editor textarea{min-height:130px;padding:14px;resize:vertical} .page__comments .ac-form__editor textarea::placeholder,.page__comments .ac-form input::placeholder{color:#aeb7c1;opacity:1} .page__comments .ac-form__editor textarea:focus,.page__comments .ac-form input:focus{border-color:#a1abb6;outline:none;box-shadow:0 0 0 3px rgba(195,205,216,.11)} .page__comments .ac-form .bb-pane{padding:7px;color:#d7dce3} .page__comments .ac-form__bottom,.page__comments .ac-form .comments_subscribe,.page__comments .ac-form .confidential-check{color:#d1d7df} .page__comments .ac-form__btn{background:linear-gradient(135deg,#777f89,#555d67);color:white;border:1px solid #939ba5;border-radius:10px;min-height:44px;padding:0 28px;font-weight:800;box-shadow:0 6px 17px rgba(0,0,0,.18);transition:filter .2s,transform .2s} .page__comments .ac-form__btn:hover{filter:brightness(1.12);transform:translateY(-1px)} /* Сам выбор рекомендации */ .page__comments .kh-recommendation-select{margin:16px 0 20px;padding:18px;background:linear-gradient(135deg,#3b4148,#292e34);border:1px solid #555e69;border-radius:14px;box-shadow:inset 0 1px rgba(255,255,255,.05)} .page__comments .kh-recommendation-select__title{color:#f0f2f5;font-size:16px;margin-bottom:14px} .page__comments .kh-recommendation-option span{background:#252a30;color:#d7dde4;border:1px solid #56606b;border-radius:10px;min-height:50px;box-shadow:none} .page__comments .kh-recommendation-option:hover span{border-color:#9ca6b2;background:#353b43} .page__comments .kh-recommendation-option input[value="1"]:checked+span{color:#79edbc;border-color:#53c99a;background:#214438;box-shadow:0 0 0 1px rgba(83,201,154,.2)} .page__comments .kh-recommendation-option input[value="-1"]:checked+span{color:#ffa0a9;border-color:#e27c89;background:#492c35;box-shadow:0 0 0 1px rgba(226,124,137,.2)} .page__comments .kh-recommendation-option input[value="0"]:checked+span{color:#e0e7f0;border-color:#a6b2c0;background:#424b56;box-shadow:0 0 0 1px rgba(166,178,192,.2)} .page__comments .ac-form:has(.kh-recommendation-option input[value="1"]:checked) .ac-form__btn{background:#397c64;border-color:#62c69e} .page__comments .ac-form:has(.kh-recommendation-option input[value="-1"]:checked) .ac-form__btn{background:#98515d;border-color:#d48692} .page__comments .ac-form:has(.kh-recommendation-option input[value="0"]:checked) .ac-form__btn{background:#636d79;border-color:#a6b2c0} /* Отдельные карточки отзывов */ .page__comments .comm{--kh-comment-accent:#89939e;position:relative;margin:0 0 16px;padding:17px 19px 16px 29px;background:linear-gradient(125deg,#353a41,#292d33);border:1px solid #4c545e;border-left:3px solid var(--kh-comment-accent);border-radius:14px;box-shadow:0 7px 20px rgba(0,0,0,.14);transition:transform .2s,border-color .2s,box-shadow .2s;color:#f0f2f5;min-width:0} .page__comments .comm:hover{transform:translateY(-2px);border-color:#717c88;box-shadow:0 10px 25px rgba(0,0,0,.2)} .page__comments .comm:has(.kh-comment-recommendation--positive){--kh-comment-accent:#65d9a5;--kh-comment-tint:rgba(101,217,165,.04)} .page__comments .comm:has(.kh-comment-recommendation--negative){--kh-comment-accent:#f18b98;--kh-comment-tint:rgba(241,139,152,.04)} .page__comments .comm:has(.kh-comment-recommendation--neutral){--kh-comment-accent:#b1c0d0;--kh-comment-tint:rgba(177,192,208,.04)} .page__comments .comm__header{padding-left:40px;min-height:39px} .page__comments .comm__img{left:-14px;top:14px;width:44px;height:44px;border:2px solid #656e79;box-shadow:0 3px 10px rgba(0,0,0,.18)} .page__comments .comm__img::before{border-color:#343a41} .page__comments .comm__author,.page__comments .comm__author a{color:#e6e9ee;font-weight:800} .page__comments .comm:has(.kh-comment-recommendation) .comm__author,.page__comments .comm:has(.kh-comment-recommendation) .comm__author a{color:var(--kh-comment-accent)} .page__comments .comm__date{color:#aeb8c4} .page__comments .comm__main,.page__comments .comm:has(.kh-comment-recommendation) .comm__main{margin:9px 0 0;padding:14px 16px;background:linear-gradient(110deg,var(--kh-comment-tint,rgba(255,255,255,.02)),#252a30 80%);border:1px solid #414953;border-radius:10px;color:#edf0f3;line-height:1.6;overflow-wrap:anywhere} .page__comments .comm__footer,.page__comments .comm:has(.kh-comment-recommendation) .comm__footer{padding:12px 4px 0;background:transparent;border:0;color:#c4cdd8} .page__comments .comm__action li,.page__comments .comm__action li a,.page__comments .comm__ctrl,.page__comments .comm__ctrl a{color:#c2cbd5} .page__comments .comm__action a:hover,.page__comments .comm__ctrl a:hover{color:#fff} .page__comments .comm__rating>*{background:#424a53;color:#f1f3f5;border-radius:7px} .page__comments .kh-comment-recommendation{margin-left:8px;padding:5px 10px;border-radius:8px;font-weight:700;white-space:normal} .page__comments .kh-comment-recommendation--positive{color:#8ef0c5;background:#254639;border-color:#44866b} .page__comments .kh-comment-recommendation--negative{color:#ffadb5;background:#4b3039;border-color:#89505b} .page__comments .kh-comment-recommendation--neutral{color:#d3deea;background:#3d4854;border-color:#66798c} /* Статистика мнений — та же серая палитра */ .kh-opinion{background:linear-gradient(145deg,#393f46,#282d33);border:1px solid #58616d;color:#f1f3f5;box-shadow:0 12px 30px rgba(0,0,0,.18)} .kh-opinion__heading{color:#f2f3f5}.kh-opinion__heading span{color:#c1cbd6} .kh-opinion__bar{background:#22272d}.kh-opinion__item{background:#2b3036;border-color:#4a535d} .kh-opinion__item span{color:#c5ced8}.kh-opinion__footnote{color:#aeb9c5} .kh-opinion__item--positive strong{color:#78e6b7}.kh-opinion__item--negative strong{color:#f49aa5}.kh-opinion__item--neutral strong{color:#c3d0df} @media(max-width:760px){.page__comments .ac-form{padding:15px;border-radius:14px}.page__comments .comm{padding:14px 12px 14px 15px}.page__comments .comm__img{position:relative;left:auto;top:auto;width:40px;height:40px;margin-right:9px}.page__comments .comm__header{padding-left:0}.page__comments .comm__main,.page__comments .comm:has(.kh-comment-recommendation) .comm__main{padding:12px}.page__comments .comm__footer,.page__comments .comm:has(.kh-comment-recommendation) .comm__footer{padding:12px 0 0}.page__comments .kh-recommendation-options{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.page__comments .comm,.page__comments .ac-form__btn{transition:none}.page__comments .comm:hover,.page__comments .ac-form__btn:hover{transform:none}} /* Kino.PUSH — цвет ТОЛЬКО поля с текстом по рекомендации */ .page__comments .comm:has(.kh-comment-recommendation--positive) .comm__main { background: linear-gradient(135deg,#24483a 0%,#1d352d 100%) !important; border: 1px solid #43866b !important; box-shadow: inset 3px 0 0 #5cbb91; color: #f0fff7 !important; } .page__comments .comm:has(.kh-comment-recommendation--negative) .comm__main { background: linear-gradient(135deg,#503038 0%,#38272d 100%) !important; border: 1px solid #a45b6a !important; box-shadow: inset 3px 0 0 #d87d8e; color: #fff1f3 !important; } .page__comments .comm:has(.kh-comment-recommendation--neutral) .comm__main { background: linear-gradient(135deg,#3b424b 0%,#30363e 100%) !important; border: 1px solid #626e7d !important; box-shadow: inset 3px 0 0 #8997a8; color: #f2f5f9 !important; } /* Kino.PUSH — дополнение для fullstory_anime.tpl; серая тема */ .anime-page {--anime-line:rgba(195,207,225,.15);--anime-panel:#262b34;--anime-panel2:#303742;--anime-text:#eef1f6;--anime-muted:#b7c0cc;} .anime-page__hero {border-bottom:1px solid var(--anime-line);} .anime-page__hero .page__poster img {border-radius:10px;} .anime-page__poster-tags {position:absolute;inset:8px auto auto 8px;z-index:8;display:flex;flex-direction:column;align-items:flex-start;gap:5px;pointer-events:none;} .anime-page__poster-tags span {padding:5px 9px;border-radius:6px;background:rgba(22,27,35,.86);color:#f2f4f7;font-size:11px;font-weight:700;line-height:1.2;backdrop-filter:blur(8px);} .anime-page__facts {background:var(--anime-panel);border:1px solid var(--anime-line);border-radius:14px;padding:22px;color:var(--anime-text);box-shadow:0 10px 30px rgba(0,0,0,.12);} .anime-page__facts .sb__title {color:#fff;margin-bottom:20px;} .anime-page__facts .page__list li {border-bottom:1px solid var(--anime-line);padding-top:10px;padding-bottom:10px;overflow-wrap:anywhere;} .anime-page__facts .page__list li:last-child {border-bottom:0;} .anime-page__facts .page__list li>span:first-child {color:var(--anime-muted);} .anime-page__story {border:1px solid var(--anime-line);background:rgba(110,119,132,.07);border-radius:14px;padding:22px;} .anime-page__story .sb__title {font-size:18px;margin-bottom:15px;} .anime-page__section-title {display:flex;align-items:center;gap:12px;} .anime-page__section-title .fas {font-size:19px;color:#aeb8c6;} .anime-page__player {border:1px solid var(--anime-line);background:var(--anime-panel);padding:12px;border-radius:14px;} .anime-page__player .tabs-block__select {flex-wrap:wrap;} .anime-page__player .tabs-block__select button {border-radius:8px;background:var(--anime-panel2);color:#e9edf3;} .anime-page__player .tabs-block__select button.is-active,.anime-page__player .tabs-block__select button:hover {background:#596473;color:#fff;} .anime-page__player .video-inside {border-radius:9px;overflow:hidden;} .anime-page__related {margin-top:35px;} .anime-page__comments {margin-top:36px;} @media(max-width:950px){.anime-page__cols {display:block;}.anime-page__facts {margin:22px 0 0;width:100%;}} @media(max-width:590px){.anime-page__story,.anime-page__facts {padding:16px;border-radius:10px;}.anime-page__player {padding:7px;}.anime-page__player .tabs-block__select button {flex:1 1 auto;padding:0 10px;font-size:12px;}.anime-page__poster-tags {top:5px;left:5px;}.anime-page__poster-tags span {font-size:10px;padding:4px 6px;}} /* Адаптивная полная новость: независимая высота описания и характеристик */ .anime-page__details {display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;} .anime-page__actions {margin:0 0 2px;gap:12px;flex-wrap:wrap;} .anime-page__story,.anime-page__facts {width:100%;min-width:0;max-width:none;margin:0;box-sizing:border-box;height:auto;min-height:0;} .anime-page__story {padding:20px 22px;} .anime-page__facts {padding:18px 20px;} .anime-page__story .sb__title,.anime-page__facts .sb__title {font-size:17px;margin:0 0 12px;line-height:1.3;} .anime-page__story .full-text {max-height:none;overflow:visible;min-height:0;} .anime-page__story .full-text > :last-child {margin-bottom:0;} .anime-page__fact-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:8px;} .anime-page__fact {min-width:0;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid rgba(195,207,225,.12);border-radius:9px;background:rgba(255,255,255,.035);line-height:1.4;} .anime-page__fact span {font-size:12px;color:var(--anime-muted);} .anime-page__fact strong {font-size:14px;font-weight:600;color:var(--anime-text);overflow-wrap:anywhere;} .anime-page__facts .anime-page__fact-grid:empty {display:none;} @media(max-width:590px) { .anime-page__details {gap:12px;} .anime-page__story,.anime-page__facts {padding:15px;border-radius:10px;} .anime-page__fact-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;} .anime-page__fact {padding:9px 10px;} } @media(max-width:360px) {.anime-page__fact-grid {grid-template-columns:1fr;}} /* Kino.PUSH — выравнивание и оформление видеоплеера */ .anime-page,.anime-page * {box-sizing:border-box;} .anime-page {min-width:0;max-width:100%;} .anime-page__details,.anime-page__story,.anime-page__facts,.anime-page__player,.anime-page__related,.anime-page__comments {min-width:0;max-width:100%;} .anime-page__hero {min-width:0;} .anime-page__watch-link,.anime-page__trailer-link {display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;min-height:46px;padding:10px 20px;border-radius:10px;font-weight:700;line-height:1.3;cursor:pointer;} .anime-page__watch-link {background:#566272;color:#fff;} .anime-page__watch-link:hover {background:#697789;color:#fff;} .anime-page__trailer-link {background:#343b45;color:#e8edf3;border:1px solid rgba(220,230,240,.16);} .anime-page__trailer-link:hover {background:#414a56;color:#fff;} .anime-page__player {width:100%;padding:16px;border-radius:16px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.16);} .anime-page__player .page__player-controls {min-width:0;margin-bottom:12px;} .anime-page__player .tabs-block__select {display:flex;gap:8px;min-width:0;width:100%;margin:0;flex-wrap:wrap;} .anime-page__player .tabs-block__select button {flex:1 1 150px;min-width:0;min-height:42px;height:auto;line-height:1.3;padding:10px 12px;border:1px solid rgba(210,222,237,.12);border-radius:9px;} .anime-page__player .tabs-block__select button.is-active {background:#687585;color:#fff;border-color:#a4b0c0;} .anime-page__player .tabs-block__content {position:relative;width:100%;aspect-ratio:16/9;padding:0;height:auto;min-height:0;border-radius:11px;background:#151a20;overflow:hidden;} .anime-page__player .tabs-block__content.d-none,.anime-page__player .tabs-block__content[hidden] {display:none!important;} .anime-page__player .tabs-block__content iframe {position:absolute;inset:0;display:block;width:100%;height:100%;border:0;} .anime-page__player-empty {position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;text-align:center;color:#c8d0da;font-size:15px;line-height:1.5;} .anime-page__player .page__complaint {position:static;justify-content:flex-end;margin-top:12px;font-size:13px;} #anime-watch {scroll-margin-top:20px;} @media(max-width:590px){ .anime-page__actions {display:flex;flex-direction:column;align-items:stretch;} .anime-page__watch-link,.anime-page__trailer-link {width:100%;} .anime-page__player {padding:9px;} .anime-page__player .tabs-block__select button {flex:1 1 100%;font-size:13px;} .anime-page__player-empty {font-size:12px;padding:12px;} } /* Компактная кнопка жалобы на плеер — только оформление */ .anime-page__player .page__complaint.anime-page__report { position:static!important;top:auto!important;right:auto!important;left:auto!important; margin:14px 0 0!important;padding:0!important;display:flex!important; justify-content:flex-end;align-items:center;gap:8px;float:none!important; font-size:13px;line-height:1.4;color:#b8c1ce!important; } .anime-page__report > .fas {font-size:14px;color:#d39b8e;} .anime-page__report a {display:inline-flex;align-items:center;justify-content:center; padding:9px 13px;border-radius:9px;border:1px solid rgba(210,222,237,.18); background:#333b46;color:#e4e9ef!important;font-weight:600;text-decoration:none; transition:background .2s,border-color .2s,transform .2s;} .anime-page__report a:hover {background:#485361;border-color:#778698;color:#fff!important;transform:translateY(-1px);} @media(max-width:590px) { .anime-page__player .page__complaint.anime-page__report {justify-content:stretch;} .anime-page__report a {flex:1;min-width:0;text-align:center;} } /* ========================================================= KINOPUSH ANIME GRAY — unified anime catalogue (DLE 21) Added after original styles: functionality and opinion colours preserved. ========================================================= */ body.design7 {background-color:#1b2026;color:#e9edf3;} .design7 .wrapper {background-image:none;} .design7 .wrapper__container {box-shadow:0 16px 65px rgba(0,0,0,.23);} .design7 .header {background:linear-gradient(110deg,#22272f,#2d343e);border-bottom:1px solid #444e5c;} .design7 .header:after {height:2px;background:linear-gradient(90deg,transparent,#8997a8,transparent);} .design7 .header__logo {letter-spacing:.5px;} .design7 .header__logo span {color:#b6c4d5;} .design7 .search-block__input {border:1px solid #566170;border-radius:12px;background:rgba(255,255,255,.055);} .design7 .search-block__input:focus {border-color:#a4b1c1;box-shadow:0 0 0 3px rgba(167,180,198,.12);} .design7 .sect__title,.design7 .page__subtitle,.design7 .page__comments-title {letter-spacing:.25px;text-transform:none;} .design7 .sect__header {border-bottom:1px solid rgba(202,214,230,.13);padding-bottom:13px;} .design7 .sect__link {color:#c5d2e0;} .design7 .carousel {border:1px solid #444c57;border-radius:14px;} .design7 .card.anime-card {transition:transform .2s ease,filter .2s ease;} .design7 .card.anime-card:hover {transform:translateY(-4px);} .design7 .anime-card__poster {overflow:hidden;border-radius:12px;border:1px solid #515d6b;background:#272e36;} .design7 .anime-card__poster img {object-fit:cover;transition:transform .25s ease;} .design7 .anime-card:hover .anime-card__poster img {transform:scale(1.045);} .design7 .anime-card__badge {position:absolute;top:9px;left:9px;z-index:4;pointer-events:none;padding:5px 8px;border:1px solid #7e8c9c;border-radius:7px;background:rgba(22,27,34,.84);color:#eef2f6;font-size:11px;font-weight:800;letter-spacing:.6px;} .design7 .anime-card__meta2 {flex-wrap:wrap;gap:6px;} .design7 .anime-card__meta2 .card__quality,.design7 .anime-card__meta2 .card__series {border-radius:7px;padding:4px 8px;height:auto;line-height:1.4;font-size:11px;} .design7 .poster2 .anime-card__meta2 {inset:0 0 auto 0;aspect-ratio:auto;align-items:flex-end;pointer-events:none;padding-top:38px;} .design7 .poster2 .anime-card__meta2 > * {pointer-events:auto;background:rgba(34,42,52,.9);border:1px solid #667381;color:#f1f4f7;} .design7 .poster2 .anime-card .card__title {font-size:17px;font-weight:700;line-height:1.35;} .design7 .poster2 .anime-card .card__meta {color:#b3bfce;font-size:13px;} .design7 .poster2 .anime-card .card__btn-link {display:none;} .design7 .page__header {background:#252c34;overflow:hidden;} .design7 .anime-page__hero {border-bottom:1px solid #505c69;} .design7 .anime-page__hero .page__poster {border-radius:11px;overflow:hidden;} .design7 .anime-page__facts,.design7 .anime-page__story {box-shadow:0 8px 26px rgba(0,0,0,.1);} .design7 .anime-page__fact {transition:border-color .2s ease;} .design7 .anime-page__fact:hover {border-color:#7e8b9a;} .design7 .anime-page__player {border-color:#596575;} .design7 .anime-page__report a {border-radius:10px;} .design7 .page__related .carou__img {border-radius:9px;overflow:hidden;} .design7 .pagination a,.design7 .pagination span {border-color:#576270;} .design7 .pagination a:hover {background:#4c5969;color:#fff;} .design7 .sidebar {border-right:1px solid rgba(210,225,242,.08);} .design7 .footer {border-top:1px solid #454f5a;} @media(max-width:950px) { .design7 .poster2 .d-grid-items--main {gap:20px 14px;} .design7 .anime-card__badge {font-size:10px;} } @media(max-width:590px) { .design7 .carousel {border-radius:0;} .design7 .poster2 .anime-card .card__title {font-size:15px;} .design7 .poster2 .anime-card__meta2 {padding-top:34px;} .design7 .anime-card__meta2 .card__quality,.design7 .anime-card__meta2 .card__series {font-size:10px;} } @media(prefers-reduced-motion:reduce){.design7 .card.anime-card,.design7 .anime-card__poster img{transition:none}.design7 .card.anime-card:hover,.design7 .anime-card:hover .anime-card__poster img{transform:none}} /* Kino.PUSH: информативный список аниме только на главной */ .poster2 .anime-home-list .d-grid-items--main, .anime-home-list .d-grid-items--main { display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch; } .poster2 .anime-home-list .card, .anime-home-list .card { display:grid;grid-template-columns:92px minmax(0,1fr) auto; grid-template-rows:auto auto 1fr;grid-template-areas:"cimg cdesc cmeta2" "cimg cbody cbody" "cimg cfooter cfooter"; gap:8px 16px;padding:14px;margin:0;min-width:0;position:relative; border:1px solid rgba(190,202,220,.16);border-radius:13px; background:linear-gradient(120deg,rgba(255,255,255,.055),rgba(255,255,255,.015)); box-shadow:0 4px 15px rgba(0,0,0,.08);transition:border-color .2s,transform .2s,background .2s; } .anime-home-list .card:hover {border-color:rgba(190,202,220,.4);background:rgba(255,255,255,.065);transform:translateY(-2px)} .poster2 .anime-home-list .card__img,.anime-home-list .card__img { grid-area:cimg;width:92px;height:132px;padding:0;margin:0;border-radius:8px;overflow:hidden;position:relative;align-self:start; } .poster2 .anime-home-list .card__img img,.anime-home-list .card__img img {width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .anime-home-list .anime-card__badge {position:absolute;left:5px;top:5px;font-size:10px;padding:3px 6px;border-radius:5px;background:rgba(30,35,42,.88);color:#e4e9f0;z-index:2} .anime-home-list .card__desc {grid-area:cdesc;min-width:0;align-self:start} .poster2 .anime-home-list .card__title,.anime-home-list .card__title {font-size:19px;line-height:1.3;font-weight:700;white-space:normal;overflow-wrap:anywhere;margin:0 0 6px} .anime-home-list .card__meta {font-size:13px;color:var(--tt-fade,#aeb7c5);white-space:normal;line-height:1.4} .poster2 .anime-home-list .card__meta2,.anime-home-list .card__meta2 { grid-area:cmeta2;position:static;inset:auto;aspect-ratio:auto;display:flex;flex-direction:row; align-items:flex-start;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin:0;max-width:240px; } .anime-home-list .card__quality,.anime-home-list .card__series {font-size:12px;line-height:1.35;height:auto;min-height:27px;border-radius:7px;padding:5px 9px;white-space:normal} .anime-home-list .card__quality {background:rgba(109,153,125,.14);border:1px solid rgba(109,153,125,.28);color:#9bd4ac} .anime-home-list .card__series {background:rgba(145,160,185,.14);border:1px solid rgba(145,160,185,.28);color:#c6d3e5} .poster2 .anime-home-list .card__body,.anime-home-list .card__body {display:block;grid-area:cbody;min-width:0;align-self:start} .anime-home-list .card__list {display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 7px;padding:0;border:0;font-size:13px} .anime-home-list .card__list li {min-width:0;overflow-wrap:anywhere} .anime-home-list .card__text {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.5;color:var(--tt-fade,#b4bfcd);margin:0;overflow-wrap:anywhere} .poster2 .anime-home-list .card__footer,.anime-home-list .card__footer {grid-area:cfooter;display:flex;justify-content:flex-end;align-items:end;position:static;margin:0;border:0;min-height:24px} .poster2 .anime-home-list .card__btn-link,.anime-home-list .card__btn-link {display:inline-flex;flex:0 0 auto;align-items:center;gap:7px;min-height:31px;padding:6px 13px;font-size:12px;border-radius:7px;background:rgba(160,175,196,.16);color:var(--tt,#e7ebf1);border:1px solid rgba(190,202,220,.2)} .anime-home-list .card__btn-link:hover {background:rgba(160,175,196,.28)} @media(max-width:950px) { .poster2 .anime-home-list .card,.anime-home-list .card {grid-template-columns:82px minmax(0,1fr);grid-template-rows:auto auto auto auto;grid-template-areas:"cimg cdesc" "cimg cmeta2" "cimg cbody" "cimg cfooter";gap:7px 12px;padding:12px} .poster2 .anime-home-list .card__img,.anime-home-list .card__img {width:82px;height:120px} .poster2 .anime-home-list .card__meta2 {justify-content:flex-start;max-width:none} .poster2 .anime-home-list .card__title {font-size:17px} .anime-home-list .card__list {font-size:12px} .anime-home-list .card__text {-webkit-line-clamp:2;font-size:13px} .poster2 .anime-home-list .card__footer {justify-content:flex-start} } @media(max-width:470px) { .poster2 .anime-home-list .card,.anime-home-list .card {grid-template-columns:70px minmax(0,1fr);gap:6px 10px;padding:10px;border-radius:9px} .poster2 .anime-home-list .card__img,.anime-home-list .card__img {width:70px;height:104px} .poster2 .anime-home-list .card__title {font-size:15px} .anime-home-list .card__quality,.anime-home-list .card__series {font-size:11px;padding:4px 6px;min-height:23px} .anime-home-list .card__text {-webkit-line-clamp:2} .anime-home-list .card__btn-link {font-size:11px} } /* Kino.PUSH: only fullstory additions from current installed stylesheet */ /* KINOPUSH: compact anime rating after description */ .anime-page .kh-rating-section{max-width:100%;min-width:0;margin:22px 0 30px;padding:20px 22px;border:1px solid #414b58;border-radius:16px;background:linear-gradient(125deg,#2b3541,#202731);color:#eef2f8;box-shadow:0 12px 28px rgba(0,0,0,.15)} .anime-page .kh-rating-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px} .anime-page .kh-rating-kicker{display:block;color:#9caec1;font-size:11px;font-weight:700;letter-spacing:1.2px;margin-bottom:5px} .anime-page .kh-rating-head h2{font-size:21px;font-weight:800;line-height:1.25;margin:0;color:#f5f7fb} .anime-page .kh-rating-symbol{font-size:24px;color:#f0c76e} .anime-page .kh-rating-votes{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch} .anime-page .kh-rating-vote{min-width:0;flex:1 1 175px} .anime-page .kh-rating-vote a,.anime-page .kh-rating-vote button,.anime-page .kh-rating-vote span.rating-plus,.anime-page .kh-rating-vote span.rating-minus{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;width:100%;padding:10px 14px;border:1px solid #4d5c6c;border-radius:11px;background:#344250;color:#f1f5fb;text-decoration:none;font-weight:700;font-size:14px;transition:background .2s,border-color .2s,transform .2s} .anime-page .kh-rating-vote--plus a:hover{background:#285744;border-color:#43866a;color:#fff} .anime-page .kh-rating-vote--minus a:hover{background:#63363e;border-color:#a35a65;color:#fff} .anime-page .kh-rating-vote--plus .fas{color:#8de0b2} .anime-page .kh-rating-vote--minus .fas{color:#ff9fa6} .anime-page .kh-rating-vote b{font-size:13px;padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.09);color:#fff} .anime-page .kh-rating-stars{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-height:40px;color:#f0c76e} .anime-page .kh-rating-stars a{color:#f0c76e} @media(max-width:600px){.anime-page .kh-rating-section{padding:16px;margin:18px 0 24px}.anime-page .kh-rating-head h2{font-size:18px}.anime-page .kh-rating-votes{gap:8px}} /* Kino.PUSH — overall likes-based score */ .anime-page .kh-rating-summary{display:flex;align-items:center;gap:18px;padding:16px 18px;margin-bottom:14px;border-radius:12px;background:#1c2631;border:1px solid #405063;min-width:0} .anime-page .kh-rating-summary__number{white-space:nowrap;font-size:38px;font-weight:800;line-height:1;color:#f4c76d;font-variant-numeric:tabular-nums} .anime-page .kh-rating-summary__number small{font-size:15px;font-weight:600;color:#a8b5c5;margin-left:4px} .anime-page .kh-rating-summary__detail{flex:1;min-width:0;display:grid;gap:5px} .anime-page .kh-rating-summary__detail strong{color:#f2f5fa;font-size:15px} .anime-page .kh-rating-summary__detail>span{color:#aebccd;font-size:12px} .anime-page .kh-rating-summary__track{height:7px;border-radius:20px;background:#465261;overflow:hidden;margin-top:4px} .anime-page .kh-rating-summary__track>span{display:block;height:100%;max-width:100%;background:linear-gradient(90deg,#e7ac55,#f6d68a);border-radius:inherit} @media(max-width:480px){.anime-page .kh-rating-summary{padding:12px;gap:12px}.anime-page .kh-rating-summary__number{font-size:30px}.anime-page .kh-rating-summary__detail>span{font-size:11px}} /* Kino.PUSH — ИСПРАВЛЕНИЕ ТОЛЬКО ПОЛНОЙ НОВОСТИ. Список аниме на главной выше сохранён без изменений. */ /* Убираем старый большой отступ под шапкой только на странице аниме. */ @media (min-width:1221px) { body:has(.page.anime-page) .header { margin-bottom:0 !important; } } body:has(.page.anime-page) .content { padding-top:16px !important; } body:has(.page.anime-page) .wrapper { background-position:center top !important; } /* Карточка постера и заголовка — в тон блока «Информация об аниме». */ html body .page.anime-page > .page__header.anime-page__hero { box-sizing:border-box; background:#34485b !important; background-image:none !important; border:1px solid #4b6175 !important; border-radius:12px !important; box-shadow:none !important; margin:0 0 18px !important; padding:18px 22px 18px 222px !important; min-height:0 !important; height:auto !important; display:flex; flex-direction:column; justify-content:flex-start !important; align-items:stretch; gap:10px !important; position:relative; overflow:hidden; isolation:isolate; } html body .page.anime-page > .anime-page__hero .page__poster-bg { display:none !important; } html body .page.anime-page > .anime-page__hero .page__poster { position:absolute !important; top:16px !important; left:20px !important; bottom:auto !important; width:176px !important; height:228px !important; overflow:hidden; border:1px solid #60758a; border-radius:10px; box-shadow:0 7px 20px rgba(0,0,0,.22); } html body .page.anime-page > .anime-page__hero .page__poster img {width:100%;height:100%;object-fit:cover;} html body .page.anime-page > .anime-page__hero .page__header-one, html body .page.anime-page > .anime-page__hero .page__header-two { position:relative; z-index:3; width:100%; min-width:0; margin:0 !important; padding:0 !important; align-items:flex-start !important; justify-content:flex-start !important; gap:8px !important; color:#f0f3f7; } html body .page.anime-page > .anime-page__hero h1 { margin:0 0 8px !important; line-height:1.18 !important; font-size:clamp(23px,2.3vw,34px); overflow-wrap:anywhere; } html body .page.anime-page > .anime-page__hero .page__meta {color:#d1dae5;line-height:1.5;overflow-wrap:anywhere;} @media (min-width:761px) { html body .page.anime-page > .page__header.anime-page__hero { min-height:262px !important; } } @media (max-width:760px) { html body .page.anime-page > .page__header.anime-page__hero { display:grid !important; grid-template-columns:105px minmax(0,1fr); grid-template-areas:"pposter pone" "ptwo ptwo"; align-items:start; gap:12px !important; padding:14px !important; min-height:0 !important; } html body .page.anime-page > .anime-page__hero .page__poster { grid-area:pposter; position:relative !important; top:auto !important; left:auto !important; width:105px !important; height:155px !important; } html body .page.anime-page > .anime-page__hero .page__header-one {grid-area:pone;flex-wrap:wrap;} html body .page.anime-page > .anime-page__hero .page__header-two {grid-area:ptwo;flex-wrap:wrap;} html body .page.anime-page > .anime-page__hero h1 {font-size:22px;min-width:0;} html body .page.anime-page > .anime-page__hero .page__meta {min-width:0;} } @media (max-width:470px) { html body .page.anime-page > .page__header.anime-page__hero {grid-template-columns:90px minmax(0,1fr);padding:12px !important;} html body .page.anime-page > .anime-page__hero .page__poster {width:90px !important;height:135px !important;} html body .page.anime-page > .anime-page__hero h1 {font-size:19px;} } /* Kino.PUSH: dark hover for anime news cards; keep text readable. */ .anime-home-list .card.anime-card, .design7 .anime-home-list .card.anime-card, .poster2 .anime-home-list .card.anime-card { background-color:#29323d !important; color:#edf1f6 !important; border:1px solid #414c5b !important; transition:background-color .2s ease,border-color .2s ease,transform .2s ease; } .anime-home-list .card.anime-card:hover, .design7 .anime-home-list .card.anime-card:hover, .poster2 .anime-home-list .card.anime-card:hover { background:#344151 !important; color:#fff !important; border-color:#64758a !important; } .anime-home-list .card.anime-card .card__title, .anime-home-list .card.anime-card .card__link, .anime-home-list .card.anime-card .card__title a {color:#f2f5fa !important;} .anime-home-list .card.anime-card .card__meta, .anime-home-list .card.anime-card .card__text, .anime-home-list .card.anime-card .card__list {color:#c4cfdb !important;} .anime-home-list .card.anime-card:hover .card__title, .anime-home-list .card.anime-card:hover .card__link {color:#fff !important;} /* Kino.PUSH — тёмные карточки на главной */ .kh-anime-list-card, .card.kh-anime-list-card, .poster1 .kh-anime-list-card, .poster2 .kh-anime-list-card, .poster3 .kh-anime-list-card, .poster4 .kh-anime-list-card { background: #252c36 !important; background-color: #252c36 !important; border-color: #3a4655 !important; color: #e9eef5 !important; transition: background-color .2s ease, border-color .2s ease; } .kh-anime-list-card:hover, .card.kh-anime-list-card:hover, .poster1 .kh-anime-list-card:hover, .poster2 .kh-anime-list-card:hover, .poster3 .kh-anime-list-card:hover, .poster4 .kh-anime-list-card:hover { background: #303a47 !important; background-color: #303a47 !important; border-color: #536477 !important; color: #ffffff !important; } .kh-anime-list-card .card__title, .kh-anime-list-card .card__title a, .kh-anime-list-card .card__link, .kh-anime-list-card:hover .card__title, .kh-anime-list-card:hover .card__link { color: #ffffff !important; } .kh-anime-list-card .card__meta, .kh-anime-list-card .card__text, .kh-anime-list-card .card__list, .kh-anime-list-card .card__list li, .kh-anime-list-card:hover .card__meta, .kh-anime-list-card:hover .card__text, .kh-anime-list-card:hover .card__list, .kh-anime-list-card:hover .card__list li { color: #c3cfdb !important; } .kh-anime-list-card .card__list li span { color: #91a4b8 !important; } .kh-anime-list-card .card__footer { background: transparent !important; border-color: #3a4655 !important; } /* Kino.PUSH 29.10 — FIX: real homepage card selectors, no white hover */ html body .anime-home-list .card.anime-card, html body.design7 .anime-home-list .card.anime-card, html body .anime-home-list .card.anime-card:hover, html body.design7 .anime-home-list .card.anime-card:hover, html body .d-grid-items--main > .card.anime-card, html body .d-grid-items--main > .card.anime-card:hover { background: #29313b !important; background-color: #29313b !important; background-image: none !important; border-color: #465363 !important; color: #eaf0f7 !important; filter: none !important; } html body .anime-home-list .card.anime-card:hover, html body.design7 .anime-home-list .card.anime-card:hover, html body .d-grid-items--main > .card.anime-card:hover { background: #343e4b !important; background-color: #343e4b !important; border-color: #687b91 !important; } html body .anime-home-list .card.anime-card::before, html body .anime-home-list .card.anime-card::after, html body .d-grid-items--main > .card.anime-card::before, html body .d-grid-items--main > .card.anime-card::after { background-color: transparent !important; background-image: none !important; box-shadow: none !important; } html body .anime-home-list .card.anime-card .card__title, html body .anime-home-list .card.anime-card .card__link, html body .d-grid-items--main > .card.anime-card .card__title, html body .d-grid-items--main > .card.anime-card .card__link { color: #f4f7fb !important; } html body .anime-home-list .card.anime-card .card__meta, html body .anime-home-list .card.anime-card .card__text, html body .anime-home-list .card.anime-card .card__list, html body .d-grid-items--main > .card.anime-card .card__meta, html body .d-grid-items--main > .card.anime-card .card__text, html body .d-grid-items--main > .card.anime-card .card__list { color: #c3cfdd !important; } /* Kino.PUSH — mobile fullstory header only; homepage hover untouched */ @media screen and (max-width:760px) { html body .page.anime-page > header.page__header.anime-page__hero { display:grid !important; grid-template-columns:112px minmax(0,1fr) !important; grid-template-rows:auto auto !important; grid-template-areas:"poster heading" "meta meta" !important; gap:12px 14px !important; padding:14px !important; min-height:0 !important; height:auto !important; align-items:start !important; overflow:hidden !important; } html body .page.anime-page > .anime-page__hero > .page__poster { grid-area:poster !important; position:relative !important; top:auto !important;left:auto !important;right:auto !important;bottom:auto !important; width:112px !important;height:160px !important;margin:0 !important; min-width:0 !important;overflow:hidden !important; } html body .page.anime-page > .anime-page__hero > .page__header-one { grid-area:heading !important;display:flex !important;flex-wrap:wrap !important; align-content:flex-start !important;align-items:flex-start !important; width:100% !important;min-width:0 !important;gap:10px !important; } html body .page.anime-page > .anime-page__hero .page__header-one h1 { flex:0 0 100% !important;width:100% !important;min-width:0 !important; max-width:100% !important;margin:0 !important; font-size:clamp(18px,5vw,23px) !important;line-height:1.24 !important; overflow-wrap:break-word !important;word-break:normal !important; } html body .page.anime-page > .anime-page__hero .page__fav {flex:0 0 auto !important;} html body .page.anime-page > .anime-page__hero .page__share { flex:0 1 auto !important;min-width:0 !important;height:40px !important; padding:0 12px !important;font-size:12px !important; } html body .page.anime-page > .anime-page__hero > .page__header-two { grid-area:meta !important;display:flex !important;flex-wrap:wrap !important; width:100% !important;min-width:0 !important;gap:8px !important; } html body .page.anime-page > .anime-page__hero .page__meta { flex:1 1 180px !important;width:auto !important;min-width:0 !important; font-size:13px !important;overflow-wrap:anywhere !important; } html body .page.anime-page > .anime-page__hero .anime-page__poster-tags span:not(:first-child) {display:none !important;} html body .page.anime-page > .anime-page__hero .anime-page__poster-tags { inset:6px auto auto 6px !important;max-width:calc(100% - 12px) !important; } html body .page.anime-page > .anime-page__hero .anime-page__poster-tags span:first-child { font-size:10px !important;padding:4px 6px !important; } } @media screen and (max-width:370px) { html body .page.anime-page > header.page__header.anime-page__hero { grid-template-columns:96px minmax(0,1fr) !important;gap:10px !important;padding:10px !important; } html body .page.anime-page > .anime-page__hero > .page__poster { width:96px !important;height:144px !important; } html body .page.anime-page > .anime-page__hero .page__share span {font-size:11px !important;} } /* Kino.PUSH: horizontal anime cards in categories, CSS-only fix */ .poster2 .sect:has(> .sect__header > h2.sect__title) .d-grid-items--main, .sect:has(> .sect__header > h2.sect__title) .d-grid-items--main { display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch; } .poster2 .sect:has(> .sect__header > h2.sect__title) .card, .sect:has(> .sect__header > h2.sect__title) .card { display:grid;grid-template-columns:92px minmax(0,1fr) auto; grid-template-rows:auto auto 1fr;grid-template-areas:"cimg cdesc cmeta2" "cimg cbody cbody" "cimg cfooter cfooter"; gap:8px 16px;padding:14px;margin:0;min-width:0;position:relative; border:1px solid rgba(190,202,220,.16);border-radius:13px; background:linear-gradient(120deg,rgba(255,255,255,.055),rgba(255,255,255,.015)); box-shadow:0 4px 15px rgba(0,0,0,.08);transition:border-color .2s,transform .2s,background .2s; } .sect:has(> .sect__header > h2.sect__title) .card:hover {border-color:rgba(190,202,220,.4);background:rgba(255,255,255,.065);transform:translateY(-2px)} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__img,.sect:has(> .sect__header > h2.sect__title) .card__img { grid-area:cimg;width:92px;height:132px;padding:0;margin:0;border-radius:8px;overflow:hidden;position:relative;align-self:start; } .poster2 .sect:has(> .sect__header > h2.sect__title) .card__img img,.sect:has(> .sect__header > h2.sect__title) .card__img img {width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .sect:has(> .sect__header > h2.sect__title) .anime-card__badge {position:absolute;left:5px;top:5px;font-size:10px;padding:3px 6px;border-radius:5px;background:rgba(30,35,42,.88);color:#e4e9f0;z-index:2} .sect:has(> .sect__header > h2.sect__title) .card__desc {grid-area:cdesc;min-width:0;align-self:start} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__title,.sect:has(> .sect__header > h2.sect__title) .card__title {font-size:19px;line-height:1.3;font-weight:700;white-space:normal;overflow-wrap:anywhere;margin:0 0 6px} .sect:has(> .sect__header > h2.sect__title) .card__meta {font-size:13px;color:var(--tt-fade,#aeb7c5);white-space:normal;line-height:1.4} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__meta2,.sect:has(> .sect__header > h2.sect__title) .card__meta2 { grid-area:cmeta2;position:static;inset:auto;aspect-ratio:auto;display:flex;flex-direction:row; align-items:flex-start;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin:0;max-width:240px; } .sect:has(> .sect__header > h2.sect__title) .card__quality,.sect:has(> .sect__header > h2.sect__title) .card__series {font-size:12px;line-height:1.35;height:auto;min-height:27px;border-radius:7px;padding:5px 9px;white-space:normal} .sect:has(> .sect__header > h2.sect__title) .card__quality {background:rgba(109,153,125,.14);border:1px solid rgba(109,153,125,.28);color:#9bd4ac} .sect:has(> .sect__header > h2.sect__title) .card__series {background:rgba(145,160,185,.14);border:1px solid rgba(145,160,185,.28);color:#c6d3e5} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__body,.sect:has(> .sect__header > h2.sect__title) .card__body {display:block;grid-area:cbody;min-width:0;align-self:start} .sect:has(> .sect__header > h2.sect__title) .card__list {display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 7px;padding:0;border:0;font-size:13px} .sect:has(> .sect__header > h2.sect__title) .card__list li {min-width:0;overflow-wrap:anywhere} .sect:has(> .sect__header > h2.sect__title) .card__text {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.5;color:var(--tt-fade,#b4bfcd);margin:0;overflow-wrap:anywhere} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__footer,.sect:has(> .sect__header > h2.sect__title) .card__footer {grid-area:cfooter;display:flex;justify-content:flex-end;align-items:end;position:static;margin:0;border:0;min-height:24px} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__btn-link,.sect:has(> .sect__header > h2.sect__title) .card__btn-link {display:inline-flex;flex:0 0 auto;align-items:center;gap:7px;min-height:31px;padding:6px 13px;font-size:12px;border-radius:7px;background:rgba(160,175,196,.16);color:var(--tt,#e7ebf1);border:1px solid rgba(190,202,220,.2)} .sect:has(> .sect__header > h2.sect__title) .card__btn-link:hover {background:rgba(160,175,196,.28)} @media(max-width:950px) { .poster2 .sect:has(> .sect__header > h2.sect__title) .card,.sect:has(> .sect__header > h2.sect__title) .card {grid-template-columns:82px minmax(0,1fr);grid-template-rows:auto auto auto auto;grid-template-areas:"cimg cdesc" "cimg cmeta2" "cimg cbody" "cimg cfooter";gap:7px 12px;padding:12px} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__img,.sect:has(> .sect__header > h2.sect__title) .card__img {width:82px;height:120px} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__meta2 {justify-content:flex-start;max-width:none} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__title {font-size:17px} .sect:has(> .sect__header > h2.sect__title) .card__list {font-size:12px} .sect:has(> .sect__header > h2.sect__title) .card__text {-webkit-line-clamp:2;font-size:13px} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__footer {justify-content:flex-start} } @media(max-width:470px) { .poster2 .sect:has(> .sect__header > h2.sect__title) .card,.sect:has(> .sect__header > h2.sect__title) .card {grid-template-columns:70px minmax(0,1fr);gap:6px 10px;padding:10px;border-radius:9px} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__img,.sect:has(> .sect__header > h2.sect__title) .card__img {width:70px;height:104px} .poster2 .sect:has(> .sect__header > h2.sect__title) .card__title {font-size:15px} .sect:has(> .sect__header > h2.sect__title) .card__quality,.sect:has(> .sect__header > h2.sect__title) .card__series {font-size:11px;padding:4px 6px;min-height:23px} .sect:has(> .sect__header > h2.sect__title) .card__text {-webkit-line-clamp:2} .sect:has(> .sect__header > h2.sect__title) .card__btn-link {font-size:11px} } /* Keep category badges below title, matching shortstory.tpl inline layout */ .poster2 .sect:has(> .sect__header > h2.sect__title) .card.anime-card .card__desc .kh-anime-labels {position:static!important;inset:auto!important;aspect-ratio:auto!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;max-width:100%!important;} /* Kino.PUSH — compact anime genre menu (DLE categorymenu.tpl) */ .kh-anime-menu__genres {display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none;} .kh-anime-menu__genres > .kh-genre-item {display:block;width:100%;min-width:0;margin:0;padding:0;list-style:none;} .kh-anime-menu__genres .kh-genre-link {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;width:100%;padding:8px 10px 8px 13px;border:1px solid rgba(160,170,190,.13);border-radius:11px;background:rgba(15,20,30,.25);color:var(--tt);text-decoration:none;transition:background .2s,border-color .2s,transform .2s;box-sizing:border-box;} .kh-anime-menu__genres .kh-genre-link:hover,.kh-anime-menu__genres .kh-genre-link[aria-current="page"] {background:rgba(130,145,175,.14);border-color:var(--accent-primary);transform:translateX(2px);} .kh-anime-menu__genres .kh-genre-name {display:block;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-size:14px;font-weight:500;line-height:1.35;color:inherit;} .kh-anime-menu__genres .kh-genre-count {display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:27px;height:24px;padding:0 7px;border-radius:8px;background:rgba(145,155,180,.15);border:1px solid rgba(160,170,190,.15);font-size:12px;font-weight:700;line-height:1;color:var(--tt-fade);box-sizing:border-box;} .kh-anime-menu__genres .kh-genre-link:hover .kh-genre-count,.kh-anime-menu__genres .kh-genre-link[aria-current="page"] .kh-genre-count {color:var(--accent-primary);background:rgba(145,155,180,.22);} .kh-anime-menu__genres .kh-genre-sublist {list-style:none;margin:7px 0 3px 12px;padding:0 0 0 9px;border-left:1px solid var(--bdc);} .kh-anime-menu__genres .kh-genre-sublist .kh-genre-item {margin-bottom:6px;} /* Kino.PUSH — wide desktop sidebar and flexible genre counters */ @media screen and (min-width:1221px) { .wrapper__cols {grid-template-columns:370px minmax(0,1fr);} .sidebar {min-width:0;padding-left:22px;padding-right:22px;} .sidebar .kh-anime-menu {padding:14px;min-width:0;} } .sidebar .kh-anime-menu__genres {display:flex;flex-direction:column;gap:7px;min-width:0;} .sidebar .kh-anime-menu__genres > .kh-genre-item {min-width:0;width:100%;} .sidebar .kh-anime-menu__genres .kh-genre-link { display:flex;align-items:center;justify-content:space-between; gap:10px;width:100%;min-width:0;min-height:44px; padding:9px 12px;border:1px solid rgba(160,170,190,.16); border-radius:10px;background:rgba(15,20,30,.25);box-sizing:border-box; } .sidebar .kh-anime-menu__genres .kh-genre-name { flex:1 1 auto;min-width:0;display:block; font-size:14px;line-height:1.35;font-weight:500; overflow-wrap:normal;word-break:normal;white-space:normal; } .sidebar .kh-anime-menu__genres .kh-genre-count { display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center; width:auto;min-width:30px;max-width:none;height:26px; padding:0 8px;white-space:nowrap;font-size:12px; border-radius:8px;box-sizing:border-box; } @media screen and (max-width:1220px) { .mobile-menu .kh-anime-menu__genres .kh-genre-name {overflow-wrap:normal;word-break:normal;} } /* Kino.PUSH — latest comments sidebar: isolated from other DLE comments */ .kh-comments-widget {min-width:0;} .kh-comments-widget__title {display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.4;} .kh-comments-widget__title i {color:var(--accent-primary);font-size:17px;} .kh-comments-widget__list {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;} .kh-comments-widget__list .kh-comment-card { display:block;min-width:0;width:100%;margin:0;padding:15px; border:1px solid rgba(160,170,190,.17);border-radius:13px; background:linear-gradient(145deg,rgba(160,170,190,.085),rgba(160,170,190,.025)); box-shadow:0 5px 16px rgba(0,0,0,.08); transition:border-color .2s,background .2s,transform .2s; box-sizing:border-box; } .kh-comments-widget__list .kh-comment-card:not(:last-child) {margin:0;padding-bottom:15px;border-bottom:1px solid rgba(160,170,190,.17);} .kh-comment-card:hover {border-color:var(--accent-primary);background:rgba(150,165,195,.10);transform:translateY(-2px);} .kh-comment-card__header {display:flex;align-items:center;gap:9px;min-width:0;margin-bottom:11px;} .kh-comments-widget .kh-comment-card__avatar {width:36px;height:36px;flex:0 0 36px;margin:0;overflow:hidden;border-radius:50%;background:var(--bg-darker);} .kh-comment-card__avatar img {width:100%;height:100%;object-fit:cover;display:block;} .kh-comments-widget .kh-comment-card__author {min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700;line-height:1.4;} .kh-comments-widget .kh-comment-card__date {flex:0 0 auto;margin:0;font-size:11px;color:var(--tt-fade);white-space:nowrap;} .kh-comments-widget .kh-comment-card__text { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3; overflow:hidden;overflow-wrap:anywhere;word-break:break-word; margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--tt); } .kh-comments-widget .kh-comment-card__link {display:flex;align-items:flex-start;gap:8px;min-width:0;padding:10px 11px;border-radius:8px;background:rgba(150,165,195,.09);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.4;color:var(--accent-primary);text-decoration:none;} .kh-comment-card__link i {flex:0 0 auto;margin-top:2px;} .kh-comment-card__link span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .kh-comment-card__link:hover {background:rgba(150,165,195,.17);} @media(max-width:1220px) { .kh-comments-widget__list {grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:590px) { .kh-comments-widget__list {grid-template-columns:minmax(0,1fr);} .kh-comments-widget__list .kh-comment-card {padding:13px;} } /* Kino.PUSH — компактные характеристики аниме: без растягивания карточек по высоте */ .anime-page__facts .anime-page__fact-grid {align-items:start;align-content:start;row-gap:8px;} .anime-page__facts .anime-page__fact {align-self:start;min-height:0;height:auto;justify-content:flex-start;} @media(max-width:590px){.anime-page__facts .anime-page__fact-grid {row-gap:7px;}} /* Kino.PUSH — ровные компактные характеристики: название и значение в строку */ .anime-page__facts .anime-page__fact-grid {align-items:stretch;align-content:start;gap:8px;} .anime-page__facts .anime-page__fact { display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr); align-items:start;column-gap:9px;row-gap:0;align-self:stretch; min-height:42px;height:auto;padding:10px 12px;line-height:1.4; } .anime-page__facts .anime-page__fact > span {font-size:12px;line-height:1.45;white-space:nowrap;color:var(--anime-muted);} .anime-page__facts .anime-page__fact > span::after {content:':';} .anime-page__facts .anime-page__fact > strong {min-width:0;font-size:13px;line-height:1.45;overflow-wrap:anywhere;word-break:normal;} @media(max-width:590px){ .anime-page__facts .anime-page__fact-grid {gap:7px;} .anime-page__facts .anime-page__fact {grid-template-columns:minmax(0,1fr);row-gap:3px;padding:9px 10px;min-height:0;} } /* Kino.PUSH — характеристики в два широких столбца */ .anime-page__facts .anime-page__fact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:stretch; } .anime-page__facts .anime-page__fact { display:grid; grid-template-columns:minmax(85px,110px) minmax(0,1fr); align-items:start; gap:10px; min-width:0; min-height:44px; padding:12px 14px; box-sizing:border-box; } .anime-page__facts .anime-page__fact > span { white-space:normal; font-size:13px; line-height:1.5; } .anime-page__facts .anime-page__fact > strong { min-width:0; font-size:13px; line-height:1.5; overflow-wrap:anywhere; } @media(max-width:760px) { .anime-page__facts .anime-page__fact-grid {grid-template-columns:minmax(0,1fr);gap:8px;} .anime-page__facts .anime-page__fact {grid-template-columns:minmax(85px,110px) minmax(0,1fr);padding:10px 12px;} } @media(max-width:380px) { .anime-page__facts .anime-page__fact {grid-template-columns:90px minmax(0,1fr);gap:7px;} } /* Kino.PUSH — независимая высота карточек в двух колонках */ .anime-page__facts .anime-page__fact-grid { display:block; columns:2; column-gap:10px; } .anime-page__facts .anime-page__fact { display:grid; grid-template-columns:minmax(85px,110px) minmax(0,1fr); align-items:start; width:100%; margin:0 0 10px; break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; height:auto; min-height:44px; } @media(max-width:760px){ .anime-page__facts .anime-page__fact-grid {columns:1;} } /* ===== Kino.PUSH / User profile (DLE 21) ===== */ .kh-user-profile{--kh-up-panel:#17212f;--kh-up-panel2:#1d2b3b;--kh-up-border:#304154;--kh-up-text:#f2f6fd;--kh-up-muted:#9caec4;--kh-up-accent:#65d8ff;display:grid;gap:18px;width:100%;min-width:0;color:var(--kh-up-text)} .kh-user-profile *{box-sizing:border-box} .kh-user-hero{position:relative;overflow:hidden;border:1px solid var(--kh-up-border);border-radius:18px;background:linear-gradient(120deg,#1d3046 0%,#172330 56%,#141d2b 100%);padding:26px;isolation:isolate} .kh-user-hero__glow{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 80% 0%,rgba(50,179,232,.21),transparent 58%)} .kh-user-hero__body{display:flex;align-items:center;gap:22px;min-width:0} .kh-user-avatar{width:104px;height:104px;flex:0 0 104px;border-radius:22px;overflow:hidden;border:3px solid rgba(101,216,255,.48);background:#24364b;box-shadow:0 8px 30px rgba(0,0,0,.25)} .kh-user-avatar img{display:block;width:100%;height:100%;object-fit:cover} .kh-user-identity{min-width:0;flex:1} .kh-user-eyebrow{color:var(--kh-up-accent);font-size:11px;letter-spacing:1.6px;font-weight:700;margin-bottom:8px} .kh-user-name{font-size:clamp(22px,3vw,32px)!important;line-height:1.2!important;overflow-wrap:anywhere;margin:0 0 12px!important;text-transform:none!important} .kh-user-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .kh-user-status,.kh-user-group{display:inline-flex;align-items:center;min-height:27px;padding:5px 11px;border-radius:20px;background:#2a3443;border:1px solid #3b4b60;font-size:12px;font-weight:600} .kh-user-status--online{color:#8bf3b5;background:rgba(39,167,104,.13);border-color:rgba(74,222,128,.3)} .kh-user-group{color:#8cdfff} .kh-user-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .kh-user-actions a,.kh-user-edit{display:inline-flex;justify-content:center;align-items:center;min-height:38px;padding:9px 15px;border-radius:10px;border:1px solid #3c7f9c;background:rgba(31,93,125,.24);color:#b5ebff!important;text-decoration:none!important;font-size:13px;font-weight:650;transition:background .2s,border-color .2s} .kh-user-actions a:hover{background:rgba(55,153,198,.27);border-color:#65d8ff} .kh-user-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .kh-user-stat{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--kh-up-border);border-radius:14px;background:var(--kh-up-panel);min-width:0} .kh-user-stat__number{font-size:29px;font-weight:800;line-height:1;color:var(--kh-up-accent)} .kh-user-stat__label{font-size:13px;color:var(--kh-up-muted)} .kh-user-details{padding:24px;border:1px solid var(--kh-up-border);border-radius:16px;background:var(--kh-up-panel)} .kh-user-section-title{font-size:18px;font-weight:750;margin:0 0 18px;line-height:1.3;color:var(--kh-up-text)} .kh-user-details__list{margin:0;display:grid;gap:0} .kh-user-details__list>div{display:grid;grid-template-columns:minmax(110px,35%) minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--kh-up-border)} .kh-user-details__list>div:last-child{border-bottom:0;padding-bottom:0} .kh-user-details dt{color:var(--kh-up-muted);font-size:13px} .kh-user-details dd{margin:0;min-width:0;font-size:14px;overflow-wrap:anywhere;line-height:1.5} .kh-user-details dd a{color:var(--kh-up-accent)!important;text-decoration:none} .kh-user-details dd a:hover{text-decoration:underline} .kh-user-muted{color:var(--kh-up-muted);font-size:12px} .kh-user-wallet{min-width:0} .kh-user-wallet .kh-coins-profile-wrap{margin:0} .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile{background:var(--kh-up-panel);border:1px solid var(--kh-up-border);border-radius:16px;padding:24px;box-shadow:none} .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile__heading{font-size:18px;color:var(--kh-up-text);margin-bottom:16px} .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile__balance{background:#101c2b;border:1px solid var(--kh-up-border);border-radius:12px;padding:18px} .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile__number{color:#ffd27d;font-size:34px} .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile__streak{background:#101c2b;border:1px solid var(--kh-up-border);border-left:3px solid #ffab5e;border-radius:10px} .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile__hint{color:var(--kh-up-muted)} /* Editing panel keeps all original DLE inputs and security fields. */ #options{border:1px solid #304154;border-radius:16px;padding:20px;background:#17212f} #options .serv{background:transparent} #options .serv__title,#options .serv__subtitle{color:#eaf5ff} #options input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),#options textarea,#options select{max-width:100%;border-radius:9px;border:1px solid #34485f;background:#111b29;color:#edf6ff} #options .form__row{min-width:0} @media(max-width:650px){.kh-user-hero{padding:18px}.kh-user-hero__body{align-items:flex-start;gap:14px}.kh-user-avatar{width:74px;height:74px;flex-basis:74px;border-radius:17px}.kh-user-stats{gap:9px}.kh-user-stat{padding:14px 12px;flex-direction:column;align-items:flex-start;gap:6px}.kh-user-stat__number{font-size:26px}.kh-user-details{padding:17px}.kh-user-details__list>div{grid-template-columns:1fr;gap:4px}.kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile{padding:17px}#options{padding:14px}} /* ===== Kino.PUSH profile: graphite palette matching site ===== */ .kh-user-profile { --kh-up-panel: var(--bg-darker, #20232b); --kh-up-panel2: var(--bg, #282c35); --kh-up-border: var(--bdc, rgba(160,170,190,.16)); --kh-up-text: var(--tt, #e8e9ee); --kh-up-muted: var(--tt-fade, #a5a8b2); --kh-up-accent: var(--accent-primary, #a0a5bc); } .kh-user-hero { background: linear-gradient(130deg, var(--bg-darker, #20232b), var(--bg, #282c35)); border-color: var(--kh-up-border); border-radius: 12px; box-shadow: none; } .kh-user-hero__glow { background: radial-gradient(ellipse at 85% 0%, rgba(150,160,180,.09), transparent 60%); } .kh-user-avatar { background: var(--bg, #282c35); border: 2px solid var(--kh-up-border); border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,.16); } .kh-user-eyebrow,.kh-user-stat__number { color: var(--kh-up-accent); } .kh-user-name,.kh-user-section-title { color: var(--kh-up-text); } .kh-user-status,.kh-user-group { background: var(--bg-darker, #20232b); border-color: var(--kh-up-border); color: var(--kh-up-muted); } .kh-user-status--online { color: #7ad5a4; background: rgba(66,150,104,.10); border-color: rgba(85,175,125,.24); } .kh-user-group { color: var(--kh-up-text); } .kh-user-actions a,.kh-user-edit { background: var(--bg-darker, #20232b); border-color: var(--kh-up-border); color: var(--kh-up-text)!important; border-radius: 9px; } .kh-user-actions a:hover,.kh-user-edit:hover { background: rgba(150,160,180,.10); border-color: var(--kh-up-accent); color: var(--kh-up-accent)!important; } .kh-user-stat,.kh-user-details { background: var(--kh-up-panel); border-color: var(--kh-up-border); border-radius: 12px; box-shadow: none; } .kh-user-details__list>div { border-color: var(--kh-up-border); } .kh-user-details dd a { color: var(--kh-up-accent)!important; } .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile { background: var(--kh-up-panel); border-color: var(--kh-up-border); border-radius: 12px; } .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile__heading { color: var(--kh-up-text); } .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile__balance, .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile__streak { background: var(--kh-up-panel2); border-color: var(--kh-up-border); border-radius: 9px; } .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile__streak { border-left: 3px solid var(--kh-up-accent); } .kh-user-wallet .kh-coins-profile-wrap .kh-coins-profile__number { color: var(--kh-up-accent); } #options { background: var(--bg-darker, #20232b); border-color: var(--bdc, rgba(160,170,190,.16)); border-radius: 12px; } #options .serv__title,#options .serv__subtitle { color: var(--tt, #e8e9ee); } #options input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]), #options textarea,#options select { background: var(--bg, #282c35); color: var(--tt, #e8e9ee); border-color: var(--bdc, rgba(160,170,190,.16)); } /* Kino.PUSH — TOP-100 anime: scoped styles, do not affect other pages */ .kh-top100{width:100%;min-width:0;color:var(--tt,#eee);} .kh-top100__head{padding:28px;border:1px solid #4b4d52;border-radius:16px;background:linear-gradient(135deg,#323439,#24262b);margin-bottom:22px;} .kh-top100__eyebrow{display:block;color:#bfc1c7;font-size:11px;font-weight:700;letter-spacing:1.7px;margin-bottom:12px;} .kh-top100__head h1{font-size:clamp(25px,3vw,37px);line-height:1.12;color:#f4f4f5;margin:0 0 12px;font-weight:800;} .kh-top100__head p{color:#b7b9bf;font-size:15px;line-height:1.5;margin:0 0 18px;} .kh-top100__meta{display:flex;flex-wrap:wrap;gap:8px;} .kh-top100__meta span{border:1px solid #565860;border-radius:20px;background:#3a3c42;color:#ddd;padding:7px 11px;font-size:12px;} .kh-top100__list{counter-reset:kh-rank;display:grid;gap:12px;min-width:0;} .kh-top100__item{counter-increment:kh-rank;min-width:0;display:grid;grid-template-columns:54px 76px minmax(0,1fr) auto;gap:16px;align-items:center;background:#2c2e33;border:1px solid #45474d;border-radius:13px;padding:13px 17px;transition:border-color .2s,background .2s;} .kh-top100__item:hover{background:#34363c;border-color:#777a83;} .kh-top100__rank{font-size:22px;font-weight:800;color:#aeb0b6;text-align:center;font-variant-numeric:tabular-nums;} .kh-top100__rank:before{content:'#' counter(kh-rank);} .kh-top100__item:nth-child(1){border-color:#8c7344;background:linear-gradient(90deg,#3e392f,#2c2e33 60%);} .kh-top100__item:nth-child(2){border-color:#696e78;} .kh-top100__item:nth-child(3){border-color:#805d4d;} .kh-top100__item:nth-child(1) .kh-top100__rank{color:#f3c86a;} .kh-top100__item:nth-child(2) .kh-top100__rank{color:#d0d6df;} .kh-top100__item:nth-child(3) .kh-top100__rank{color:#d9a07c;} .kh-top100__poster{display:block;width:76px;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#41434a;} .kh-top100__poster img{display:block;width:100%;height:100%;object-fit:cover;} .kh-top100__details{min-width:0;} .kh-top100__name{font-size:18px;line-height:1.35;font-weight:700;margin:0 0 8px;overflow-wrap:anywhere;} .kh-top100__name a{color:#f3f3f4;text-decoration:none;} .kh-top100__name a:hover{color:#e2c184;} .kh-top100__categories{font-size:12px;color:#b6b8c0;margin-bottom:10px;line-height:1.5;overflow-wrap:anywhere;} .kh-top100__categories a{color:inherit;text-decoration:none;} .kh-top100__categories a:hover{color:#fff;} .kh-top100__rating{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:#e1e1e3;} .kh-top100__star{color:#f1bf57;font-size:19px;line-height:1;} .kh-top100__votes{color:#a9acb4;} .kh-top100__watch{white-space:nowrap;border-radius:8px;padding:10px 15px;background:#44474e;color:#fff;text-decoration:none;font-size:13px;font-weight:700;} .kh-top100__watch:hover{background:#656871;color:#fff;} @media(max-width:650px){.kh-top100__head{padding:20px 16px}.kh-top100__item{grid-template-columns:36px 64px minmax(0,1fr);gap:10px;padding:10px}.kh-top100__rank{font-size:16px}.kh-top100__poster{width:64px}.kh-top100__name{font-size:15px}.kh-top100__watch{display:none}.kh-top100__rating{font-size:12px;gap:5px 8px}.kh-top100__categories{font-size:11px}.kh-top100__head p{font-size:13px}} @media(max-width:390px){.kh-top100__item{grid-template-columns:29px 55px minmax(0,1fr);gap:8px}.kh-top100__poster{width:55px}.kh-top100__rank{font-size:14px}.kh-top100__votes{width:100%}} /* Kino.PUSH TOP-100 v2: enhanced ranking, scoped to ranking only */ .kh-top100__head{position:relative;overflow:hidden;background:linear-gradient(125deg,#292c32 0%,#22252a 68%,#303037 100%);border-color:#4b4d53;box-shadow:0 14px 36px rgba(0,0,0,.14)} .kh-top100__head::after{content:"";position:absolute;width:210px;height:210px;right:-80px;top:-100px;border-radius:50%;background:radial-gradient(circle,rgba(221,180,103,.13),transparent 70%);pointer-events:none} .kh-top100__item{position:relative;grid-template-columns:54px 82px minmax(0,1fr) auto;gap:18px;padding:14px 18px;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.07)} .kh-top100__rank{font-size:24px;letter-spacing:-.7px} .kh-top100__item:nth-child(-n+3) .kh-top100__rank::after{display:block;font-size:10px;line-height:1.7;font-weight:700;letter-spacing:.06em} .kh-top100__item:nth-child(1) .kh-top100__rank::after{content:"ЗОЛОТО";color:#e5c477} .kh-top100__item:nth-child(2) .kh-top100__rank::after{content:"СЕРЕБРО";color:#bfc7d2} .kh-top100__item:nth-child(3) .kh-top100__rank::after{content:"БРОНЗА";color:#d29a7b} .kh-top100__poster{width:82px;box-shadow:0 5px 16px rgba(0,0,0,.23)} .kh-top100__name{font-size:19px} .kh-top100__rating{gap:8px 12px} .kh-top100__score{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;background:rgba(233,188,91,.09);border:1px solid rgba(233,188,91,.22);border-radius:8px;color:#f2d396;font-weight:700} .kh-top100__score .kh-top100__star{font-size:17px} .kh-top100__votes{display:inline-flex;align-items:center;color:#b8bac0} .kh-top100__watch{transition:background .2s,transform .2s} .kh-top100__watch:hover{transform:translateY(-2px)} @media(max-width:650px){.kh-top100__item{grid-template-columns:34px 64px minmax(0,1fr);gap:10px;padding:11px}.kh-top100__poster{width:64px}.kh-top100__rank{font-size:16px}.kh-top100__item:nth-child(-n+3) .kh-top100__rank::after{font-size:7px;letter-spacing:0}.kh-top100__name{font-size:15px}.kh-top100__score{padding:4px 7px}.kh-top100__votes{font-size:11px}} @media(max-width:390px){.kh-top100__item{grid-template-columns:29px 55px minmax(0,1fr)}.kh-top100__poster{width:55px}}