@font-face {
font-family: "GolosUI";
src: url("../fonts/Golos-UI-Regular.woff2") format("woff2"),
url("../fonts/Golos-UI-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GolosUI";
src: url("../fonts/Golos-UI-Medium.woff2") format("woff2"),
url("../fonts/Golos-UI-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GolosUI";
src: url("../fonts/Golos-UI-Bold.woff2") format("woff2"),
url("../fonts/Golos-UI-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
body {
--color-bg-body: #fff;
--color-bg-main: #f8f8f8;
--color-bg-nav: #fff;
--color-bg-raiting: #fff;
--color-bg-comments: #fff;
--color-bg-player: #fff;
--color-font-black: #000;
--color-font-gray-32: #323232;
--color-font-gray-64: #646464;
--color-font-gray-96: #969696;
--color-font-main: #79c142;
--color-font-main-dark: #66aa33;
--color-font-active-player: #fff;
--color-border-gray-E: #eee;
--color-border-main: #79c142;
--color-border-main-dark: #66aa33;
--color-bg-gradient-menu: linear-gradient(#79c14200, rgba(121, 193, 66, 0.03));
--color-rating-plus: #70bf6c;
--color-rating-plus-opacity: #70bf6c30;
--color-rating-plus-hover: #33a42d;
--color-rating-minus: #e7825f;
--color-rating-minus-opacity: #e7825f30;
--color-rating-minus-hover: #dd4d1b;
--color-slider-btn-bg: #79c142;
--color-slider-btn-bg-hover: #66aa33;
--color-slider-part-bg: #66aa33;
--color-player-gray-16: #161616;
--color-player-gray-24: #242424;
--color-player-gray-32: #323232;
--color-player-gray-48: #484848;
--color-player-gray-64: #646464;
--color-player-main: #79c142;
--color-player-main-dark: #66aa33;
--color-emotions-bg-gradient: linear-gradient(
#79c14200,
rgba(121, 193, 66, 0.2)
);
--color-emotions-bg-gradient-active: linear-gradient(
#e7c93000,
rgba(231, 201, 48, 0.4)
);
--color-emotions-border: #66aa33;
--color-emotions-border-active: #e7c930;
--color-comments-main: #79c142;
--color-buttons-bg-main: #79c142;
--color-buttons-bg-main-dark: #66aa33;
--gradient-main: linear-gradient(
135deg,
rgba(141, 213, 86, 1) 0%,
rgba(101, 173, 46, 1) 100%
);
}
body.dark {
--color-bg-body: #111;
--color-bg-main: #242424;
--color-bg-nav: #242424;
--color-bg-raiting: #161616;
--color-bg-comments: #161616;
--color-bg-player: #161616;
--color-font-black: #fff;
--color-font-gray-32: #ccc;
--color-font-gray-64: #bbb;
--color-font-gray-96: #969696;
--color-font-main: #79c142;
--color-font-main-dark: #66aa33;
--color-font-active-player: #161616;
--color-border-gray-E: #000;
--color-border-main: #79c142;
--color-border-main-dark: #66aa33;
--color-bg-gradient-menu: linear-gradient(#79c14200, rgba(121, 193, 66, 0.03));
--color-rating-plus: #70bf6c;
--color-rating-plus-opacity: #70bf6c30;
--color-rating-plus-hover: #33a42d;
--color-rating-minus: #e7825f;
--color-rating-minus-opacity: #e7825f30;
--color-rating-minus-hover: #dd4d1b;
--color-slider-btn-bg: #79c142;
--color-slider-btn-bg-hover: #66aa33;
--color-slider-part-bg: #66aa33;
--color-player-gray-16: #161616;
--color-player-gray-24: #242424;
--color-player-gray-32: #323232;
--color-player-gray-48: #484848;
--color-player-gray-64: #646464;
--color-player-main: #79c142;
--color-player-main-dark: #66aa33;
--color-emotions-bg-gradient: linear-gradient(
#79c14200,
rgba(121, 193, 66, 0.2)
);
--color-emotions-bg-gradient-active: linear-gradient(
#e7c93000,
rgba(231, 201, 48, 0.4)
);
--color-emotions-border: #66aa33;
--color-emotions-border-active: #e7c930;
--color-comments-main: #79c142;
--color-buttons-bg-main: #79c142;
--color-buttons-bg-main-dark: #66aa33;
--gradient-main: linear-gradient(
135deg,
rgba(141, 213, 86, 1) 0%,
rgba(101, 173, 46, 1) 100%
);
}
.nf_block {
width: 100%;
padding: 40px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.nf_block > h1 {
font-size: 24px;
font-weight: bold;
color: #000;
text-align: center;
}
.nf_block > img {
width: 100%;
max-width: 300px;
}
.nf_block > a {
width: 100%;
max-width: 300px;
padding: 10px 40px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: none;
outline: none;
border-radius: 5px;
font-size: 15px;
font-weight: 500;
color: #fff;
background: var(--gradient-main);
cursor: pointer;
transition: 0.2s;
user-select: none;
text-decoration: none;
text-align: center;
}
hr {margin: 20px 0;}
.load {
opacity: 0;
}
img {
transition: 0.2s;
}
.display-none {
display: none !important;
}
* {
padding: 0;
margin: 0;
font-family: "GolosUI", monospace;
}
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--color-bg-body);
background-image: url(data:image/png;base64,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);
}
body.dark {
background: var(--color-bg-body);
}
#Container {
width: 100%;
max-width: 1100px;
min-height: 100vh;
display: flex;
flex-direction: column;
border-radius: 5px;
}
nav {
margin-top: 80px;
position: sticky;
top: 0;
width: 100%;
height: 80px;
display: flex;
flex-direction: row;
justify-content: space-between;
border-radius: 5px 5px 0 0;
border-bottom: solid 1px var(--color-border-gray-E);
box-sizing: border-box;
background: var(--color-bg-nav);
z-index: 100;
}
@media (max-width: 500px) {
nav {
margin-top: 0;
}
}
#Logo {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
padding: 0 20px;
text-decoration: none;
user-select: none;
}
#Logo > svg {
height: 40px;
}
#Logo > svg > .change-color-bg-logo {
fill: var(--color-bg-nav);
}
#Logo > .logo-text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
#Logo > .logo-text > .site-name {
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
line-height: 1;
color: var(--color-font-black);
}
@media (max-width: 500px) {
#Logo > .logo-text > .site-name {
font-size: 20px;
}
}
@media (max-width: 400px) {
#Logo > .logo-text > .site-name {
font-size: 18px;
}
}
#Logo > .logo-text > .site-name:hover {
cursor: pointer;
}
#Logo:hover > .logo-text > .site-name {
color: var(--color-font-main);
}
#Logo > .logo-text > .site-brand {
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
line-height: 1;
color: var(--color-font-gray-64);
}
#SiteTheme {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border: none;
outline: none;
margin: 20px;
border-radius: 5px;
background: var(--gradient-main);
order: 1;
}
#SiteTheme > svg {
width: 20px;
height: 20px;
padding: 10px;
}
#SiteTheme.light-btn > .icon-moon {
display: none;
}
#SiteTheme.dark-btn > .icon-sun {
display: none;
}
#SiteTheme:hover {
cursor: pointer;
background: var(--color-rating-plus-hover);
}
#ToggleMenu {
width: 80px;
position: relative;
display: none;
border: none;
outline: none;
border-radius: 5px;
background: var(--color-bg-nav);
}
menu {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 20px 0 0;
list-style: none;
order: 0;
}
menu > li {
height: 100%;
display: flex;
}
menu > li > a {
height: 80px;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 0 20px;
box-sizing: border-box;
border-bottom: solid 1px var(--color-border-gray-E);
text-decoration: none;
background: var(--color-bg-nav);
user-select: none;
}
menu > li > a:hover {
border-bottom: solid 1px var(--color-border-main-dark);
background: var(--color-bg-nav);
}
menu > li > a > svg {
stroke: var(--color-font-gray-32);
}
menu > li > a > span {
font-size: 15px;
color: var(--color-font-gray-32);
}
menu > li > a:hover > svg {
stroke: var(--color-font-main-dark);
}
menu > li > a:hover > span {
color: var(--color-font-main-dark);
}
main {
width: 100%;
display: flex;
flex-direction: column;
background: var(--color-bg-main);
padding-bottom: 20px;
}
@media (max-width: 900px) {
#Logo {
flex-grow: 1;
}
.container {
max-width: 540px;
}
#SiteTheme {
order: 0;
margin: 20px 0 20px 20px;
}
#ToggleMenu {
display: block;
cursor: pointer;
order: 1;
}
#ToggleMenu > svg {
width: 20px;
height: 20px;
padding: 10px;
border-radius: 5px;
position: absolute;
top: 20px;
right: 20px;
stroke: var(--color-bg-nav);
background: var(--gradient-main);
transition: 0.2s;
}
#ToggleMenu > .open {
visibility: visible;
opacity: 1;
}
#ToggleMenu > .close {
visibility: hidden;
/*stroke: var(--color-font-main-dark);*/
opacity: 0;
}
.menu-open > #ToggleMenu > .open {
visibility: hidden;
opacity: 0;
}
.menu-open > #ToggleMenu > .close {
visibility: visible;
opacity: 1;
}
menu {
top: 80px;
width: 250px;
height: auto;
overflow: hidden;
position: absolute;
right: 50px;
margin-top: -1px;
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
border-left: solid 0 var(--color-border-gray-E);
border-top: solid 0 var(--color-border-main);
opacity: 0;
background: #ffffff;
visibility: hidden;
transition: 0.2s;
}
menu > li {
width: 100%;
height: auto;
}
menu > li > a {
width: 100%;
height: auto;
justify-content: flex-start;
gap: 20px;
padding: 20px 20px;
}
.menu-open > menu {
right: 0;
opacity: 1;
overflow: hidden;
visibility: visible;
border-width: 1px 0 0 1px;
}
}

#MovieCard {
width: 100%;
display: grid;
grid-template-columns: 240px 1fr; /* ширина картинки + остальное */
grid-template-rows: auto auto;
grid-template-areas:
"img desc"
"seasons seasons";
gap: 20px;
box-sizing: border-box;
padding: 20px 20px 0 20px;
}
#MovieCard > .column-img {
grid-area: img;
}
#MovieCard > .column-desc {
grid-area: desc;
}
#MovieCard > #AllParts {
grid-area: seasons;
grid-column: 1 / -1; /* занимает все колонки */
padding-top: 20px;
border-top: 1px solid var(--color-border-gray-E);
margin-top: 20px;
}
#MovieCard > .column-img > .block-img {
display: flex;
flex-direction: column;
border-radius: 5px;
overflow: hidden;
}
#Poster {
width: 240px;
height: 380px;
user-select: none;
object-fit: cover;
}
#Rating {
width: 240px;
display: flex;
flex-direction: row;
justify-self: center;
border-bottom: solid 1px var(--color-border-gray-E);
background: var(--color-bg-raiting);
user-select: none;
}
#Rating > button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
outline: none;
background: #fff;
cursor: pointer;
}
#Rating > .plus {
justify-self: flex-start;
background: var(--color-rating-plus);
transition: 0.2s;
}
#Rating > .plus:hover {
background: var(--color-rating-plus-hover);
}
#Rating > .plus.active {
background: var(--color-rating-plus-hover);
}
#Rating > .plus > svg {
stroke: var(--color-rating-plus);
fill: var(--color-bg-raiting);
transition: 0.2s;
}
#Rating > .plus:hover > svg {
stroke: var(--color-rating-plus-hover);
}
#Rating > .plus.active > svg {
stroke: var(--color-rating-plus-hover);
}
#Rating > .minus {
justify-self: flex-end;
background: var(--color-rating-minus);
transition: 0.2s;
}
#Rating > .minus:hover {
background: var(--color-rating-minus-hover);
}
#Rating > .minus.active {
background: var(--color-rating-minus-hover);
}
#Rating > .minus > svg {
stroke: var(--color-rating-minus);
fill: var(--color-bg-raiting);
transition: 0.2s;
}
#Rating > .minus:hover > svg {
stroke: var(--color-rating-minus-hover);
}
#Rating > .minus.active > svg {
stroke: var(--color-rating-minus-hover);
}
#Rating > span {
flex-grow: 1;
display: flex;
flex-direction: row;
align-items: center;
font-size: 13px;
font-weight: 500;
color: var(--color-font-gray-32);
}
#Rating > .count-plus {
justify-content: flex-start;
padding-left: 10px;
background: linear-gradient(
90deg,
var(--color-rating-plus-opacity),
var(--color-bg-raiting)
);
}
#Rating > .count-minus {
justify-content: flex-end;
padding-right: 10px;
background: linear-gradient(
90deg,
var(--color-bg-raiting),
var(--color-rating-minus-opacity)
);
}
#Rating > .value-block {
width: 0;
position: relative;
}
#Rating > .value-block > .value {
position: absolute;
bottom: 13px;
left: -28px;
width: 58px;
height: 58px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
outline: 5px solid var(--color-bg-raiting);
border: 5px solid transparent;
border-radius: 30px;
box-sizing: border-box;
background: linear-gradient(var(--color-bg-raiting), var(--color-bg-raiting))
padding-box,
linear-gradient(90deg, var(--color-rating-plus), var(--color-rating-minus))
border-box;
font-size: 15px;
font-weight: bold;
color: var(--color-font-gray-32);
}
.column-desc {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
h1 {
font-size: 24px;
font-weight: bold;
color: var(--color-font-black);
}
#FilmShort {
font-size: 15px;
color: var(--color-font-gray-64);
line-height: 1.5;
}
#FilmProps {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
#FilmProps > .props {
line-height: 1.5;
}
#FilmProps > .props.full-width {
grid-column: span 2;
}
#FilmProps > .props > .name {
font-size: 15px;
font-weight: 500;
color: var(--color-font-gray-32);
}
#FilmProps > .props > .value {
font-size: 15px;
color: var(--color-font-gray-64);
}
@media (max-width: 900px) {
#MovieCard {
grid-template-columns: 1fr;
grid-template-areas:
"img"
"desc"
"seasons";
}

#MovieCard > .column-img {
width: 100%;
max-width: 240px;
margin: 0 auto;
}

#MovieCard > .column-desc {
width: 100%;
}
}
@media (max-width: 700px) {
#MovieCard {
flex-direction: column;
align-items: center;
}

#MovieCard > #AllParts {
position: static;
width: 100%;
order: 3;
}
}
#AllParts {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 20px;
}
#AllParts > .header {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 20px;
}
#AllParts > .header > h2 {
font-size: 18px;
font-weight: bold;
color: var(--color-font-gray-32);
}
#AllParts > .header > a {
display: flex;
flex-direction: row;
align-items: center;
font-size: 15px;
font-weight: 500;
text-decoration: none;
color: var(--color-font-gray-32);
user-select: none;
transition: 0.2s;
}
#AllParts > .header > a:hover {
color: var(--color-font-main-dark);
}
#SliderFilms {
position: relative;
}
#SliderFilms > .slides {
white-space: nowrap;
font-size: 0;
overflow: hidden;
scroll-behavior: smooth;
cursor: grab; /* Курсор "хватательный" в покое */
}
#SliderFilms .slides:active {
cursor: grabbing;
}
#SliderFilms > .slides.dragging {
cursor: grabbing; /* Курсор "сжатый" во время драга */
scroll-behavior: auto;
}
#SliderFilms > .slides.dragging a {
pointer-events: none;
}
#SliderFilms > .slides > .slide {
position: relative;
width: calc(100% / 5 - 8px);
display: inline-flex;
flex-direction: column;
gap: 10px;
margin-left: 10px;
text-decoration: none;
outline: none;
transition: 0.2s;
user-select: none;
}
#SliderFilms > .slides > .slide:hover {
opacity: 0.8;
}
#SliderFilms > .slides > .slide:first-child {
margin-left: 0;
}
#SliderFilms > .slides > .slide > img {
width: 100%;
height: auto;
min-height: 180px;
max-height: 330px;
object-fit: contain; /* Картинка полностью помещается в контейнер */
border-radius: 5px;
display: block;
}

#SliderFilms > .slides > .slide > h3 {
width: calc(100% - 30px);
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
text-align: center;
background-color: rgba(0, 0, 0, 0.75);
color: white;
padding: 8px 12px;
border-radius: 5px;
font-weight: bold;
font-size: 14px;
z-index: 2;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
box-sizing: border-box;
}
/* Для тёмной темы */
body.dark #SliderFilms > .slides > .slide > h3 {
background-color: rgba(0, 0, 0, 0.85);
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* При наведении на слайд */
#SliderFilms > .slides > .slide:hover > h3 {
background-color: rgba(0, 0, 0, 0.9);
transform: translateX(-50%) translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

@media (max-width: 950px) {
#SliderFilms > .slides > .slide {
width: calc(100% / 4 - (30px / 4));
}
#SliderFilms > .slides > .slide > h3 {
font-size: 13px;
padding: 6px 10px;
bottom: 8px;
}
}
@media (max-width: 800px) {
#SliderFilms > .slides > .slide {
width: calc(100% / 3 - (20px / 3));
}
}
@media (max-width: 700px) {
#SliderFilms > .slides > .slide {
width: calc(100% / 4 - (30px / 4));
}
}
@media (max-width: 600px) {
#SliderFilms > .slides > .slide {
width: calc(100% / 3 - (20px / 3));
}
#SliderFilms > .slides > .slide > h3 {
font-size: 12px;
padding: 5px 8px;
bottom: 6px;
width: 85%;
}
#SliderFilms > .slides > .slide > h3 {
width: calc(100% - 20px); /* Меньший отступ на мобильных */
}
}
@media (max-width: 450px) {
#SliderFilms > .slides > .slide {
width: calc(100% / 2 - (10px / 2));
}
}
@media (max-width: 280px) {
#SliderFilms > .slides > .slide {
width: 100%;
}
}
#SliderFilms > button {
width: 48px;
height: 48px;
position: absolute;
top: 50%;
display: flex;
justify-content: center;
align-items: center;
border: none;
outline: none;
transform: translateY(-100%);
opacity: 0.9;
background: var(--color-slider-btn-bg);
background: var(--gradient-main);
transition: 0.2s;
cursor: pointer;
visibility: visible;
}
#SliderFilms > button:hover {
background: var(--color-slider-btn-bg-hover);
opacity: 1;
}
#SliderFilms > button.disabled {
opacity: 0;
visibility: hidden;
}
#SliderFilms > button.left {
left: 0;
border-radius: 0 5px 5px 0;
/*display: none;*/
}
#SliderFilms > button.right {
right: 0;
border-radius: 5px 0 0 5px;
}
#SliderFilms > .slides > .slide > .part {
position: absolute;
top: 5px;
left: 5px;
padding: 5px 15px;
border-radius: 5px;
font-size: 13px;
font-weight: 500;
color: var(--color-bg-main);
background: var(--color-slider-part-bg);
background: var(--gradient-main);
}
#PlayerBlock {
display: flex;
flex-direction: column;
padding-top: 40px;
}
#PlayerBlock > h2 {
padding: 0 20px 20px 20px;
font-size: 18px;
font-weight: bold;
color: var(--color-font-gray-32);
}
#Player {
width: 100%;
display: flex;
flex-direction: row;
user-select: none;
}
#VideoBlock {
width: 65%;
display: flex;
flex-grow: 1;
flex-direction: column;
}
#SelectVideo {
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
border-top: solid 1px var(--color-border-gray-E);
background: var(--color-bg-player);
}
#SelectVideo > button {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 20px;
border: none;
outline: none;
font-size: 15px;
font-weight: 500;
color: #fff;
background: var(--color-player-gray-16);
transition: 0.2s;
cursor: pointer;
}
#SelectVideo > button:hover {
background: var(--color-player-gray-32);
}
#SelectVideo > button.active {
background: var(--gradient-main);
cursor: default;
color: var(--color-font-active-player);
}
#SelectVideo > button.active:hover {
background: var(--gradient-main);
}
#Video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* Современный способ */
background: var(--color-player-gray-16);
}

#Video > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Фолбэк для старых браузеров */
@supports not (aspect-ratio: 16 / 9) {
#Video {
height: 0;
padding-bottom: 56.25%;
}
}
#SelectFilmBlock {
width: 35%;
display: flex;
flex-direction: column;
}
#SelectFilmBlock > .header {
height: 40px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 20px;
font-size: 15px;
font-weight: 500;
border-top: solid 1px var(--color-border-gray-E);
color: var(--color-font-gray-32);
background: var(--color-bg-player);
}
#SelectFilmBlock > .content {
width: 100%;
height: 360px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background: var(--color-player-gray-16);
}
#SelectFilmBlock > .content::-webkit-scrollbar {
width: 12px;
}
#SelectFilmBlock > .content::-webkit-scrollbar-track {
background: var(--color-player-gray-24);
}
#SelectFilmBlock > .content::-webkit-scrollbar-thumb {
background-color: var(--color-player-gray-64);
border-radius: 20px;
border: 3px solid var(--color-player-gray-24);
}
#SelectSeason {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
box-sizing: border-box;
background: var(--color-player-gray-16);
list-style: none;
}
#SelectSeason > li {
display: flex;
flex-direction: column;
gap: 10px;
}
#SelectSeason > li > a {
display: flex;
text-decoration: none;
font-size: 15px;
font-weight: 700;
color: #969696;
}
#SelectSeason > li > ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
#SelectSeason > li > ul > li {
display: flex;
flex-direction: column;
flex-grow: 1;
}
#SelectSeason > li > ul > li > a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 11px 20px;
border-radius: 5px;
text-decoration: none;
font-size: 15px;
font-weight: 500;
color: #fff;
background: var(--color-player-gray-24);
}
#SelectSeason > li > ul > li > a:hover {
background: var(--color-player-gray-32);
}
#SelectSeason > li > ul > li > a.active {
background: var(--gradient-main);
color: var(--color-player-gray-16);
}
#SelectSeason > li > ul > li > a.active:hover {
background: var(--gradient-main);
}
@media (max-width: 950px) {
#Player {
flex-direction: column;
}
#VideoBlock {
width: 100%;
}
#SelectFilmBlock {
width: 100%;
}
#SelectFilmBlock > .content {
height: auto;
}
}
@media (max-width: 450px) {
#Video {
height: 280px;
}
}
@media (max-width: 600px) {
#Video {
height: 320px;
}
}
#Emotions {
height: 96px;
display: flex;
flex-direction: row;
justify-content: center;
border-bottom: solid 1px var(--color-border-gray-E);
background: #fff;
user-select: none;
}
#Emotions > button {
height: 97px;
width: calc(100% / 6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
padding: 20px 0;
border: none;
border-bottom: solid 1px var(--color-border-gray-E);
outline: none;
box-sizing: border-box;
background: #fff;
cursor: pointer;
transition: 0.2s;
}
#Emotions > button:hover {
border-bottom: solid 1px var(--color-emotions-border);
background: var(--color-emotions-bg-gradient);
gap: 0;
}
#Emotions > button.active {
border-bottom: solid 1px var(--color-emotions-border-active);
background: var(--color-emotions-bg-gradient-active);
}
#Emotions > button > svg {
width: 30px;
height: 30px;
padding: 0 8px;
transition: 0.2s;
}
#Emotions > button:hover > svg {
padding: 0;
width: 40px;
height: 40px;
}
.fill-f8de40 {
fill: #f8de40;
}
.fill-864e20 {
fill: #864e20;
}
.fill-e7c930 {
fill: #e7c930;
}
.fill-fff {
fill: #fff;
}
.fill-e6e7e8 {
fill: #e6e7e8;
}
.fill-f06880 {
fill: #f06880;
}
.fill-26a9e0 {
fill: #26a9e0;
}
#Emotions > button > span {
height: 16px;
overflow: hidden;
opacity: 1;
display: flex;
flex-direction: row;
justify-content: center;
font-size: 13px;
font-weight: 500;
color: var(--color-font-gray-32);
transition: 0.2s;
}
#Emotions > button:hover > span {
height: 0;
overflow: hidden;
opacity: 0;
}
#Emotions > button.active > span {
color: #000;
}
#ReviewsBlock {
display: flex;
flex-direction: column;
gap: 20px;
padding: 40px 0 0 0;
}
#Reviews {
display: flex;
flex-direction: row;
}
#CommentsBlock {
width: 65%;
display: flex;
flex-direction: column;
gap: 20px;
}
#CommentsBlock > h2 {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
font-size: 18px;
font-weight: bold;
color: var(--color-font-gray-32);
}
#Comments {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
padding: 0 20px;
box-sizing: border-box;
}
#Comments > .comment {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
}
#Comments > .comment > .image {
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
background: var(--color-comments-main);
background: var(--gradient-main);
}
#Comments > .comment > .image > svg {
width: 20px;
height: 20px;
stroke: var(--color-bg-comments);
padding: 10px;
}
#Comments > .comment > .content {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 20px 10px 20px;
border-radius: 5px;
border: solid 1px var(--color-border-gray-E);
background: var(--color-bg-comments);
}
#Comments > .comment > .content > .header {
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: solid 1px var(--color-border-gray-E);
box-sizing: border-box;
}
#Comments > .comment > .content > .header > .name {
font-size: 15px;
font-weight: 500;
color: var(--color-font-gray-32);
word-break: break-all;
}
#Comments > .comment > .content > .header > .date {
font-size: 13px;
color: var(--color-font-gray-96);
user-select: none;
}
#Comments > .comment > .content > .text {
font-size: 15px;
color: var(--color-font-gray-64);
line-height: 1.5;
overflow-wrap: anywhere; /* Самый гибкий вариант */
word-break: break-word; /* Устаревшее, но работает везде */
hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
#Comments > .comment > .content > .text a {
color: var(--color-font-gray-32);
font-weight: 500;
text-decoration: none;
}
#Comments > .comment > .content > .toolbar {
height: 40px;
display: flex;
flex-direction: row;
align-items: center;
border-top: solid 1px var(--color-border-gray-E);
box-sizing: border-box;
}
#Comments > .comment > .content > .toolbar > button {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
border: none;
outline: none;
background: #fff;
user-select: none;
cursor: pointer;
}
#Comments > .comment > .content > .toolbar > button > span {
font-size: 13px;
color: var(--color-font-gray-64);
transition: 0.2s;
}
#Comments > .comment > .content > .toolbar > button:hover > span {
color: var(--color-font-main-dark);
}
#Comments > .comment > .content > .toolbar > button > svg {
width: 12px;
height: 12px;
stroke: var(--color-font-gray-64);
transition: 0.2s;
}
#Comments > .comment > .content > .toolbar > button:hover > svg {
stroke: var(--color-font-main-dark);
}
#Comments > .sub-comment {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
padding-left: 100px;
box-sizing: border-box;
}
#Comments > .sub-comment > .content {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 20px 10px 20px;
border-radius: 5px;
border: solid 1px var(--color-border-gray-E);
background: #fff;
}
#Comments > .sub-comment > .content > .header {
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: solid 1px var(--color-border-gray-E);
box-sizing: border-box;
}
#Comments > .sub-comment > .content > .header > .name {
font-size: 15px;
font-weight: 500;
color: var(--color-font-gray-32);
}
#Comments > .sub-comment > .content > .header > .date {
font-size: 13px;
color: var(--color-font-gray-96);
user-select: none;
}
#Comments > .sub-comment > .content > .text {
font-size: 15px;
color: var(--color-font-gray-64);
line-height: 1.5;
}
#Comments > .sub-comment > .content > .text a {
color: var(--color-font-gray-32);
font-weight: 500;
text-decoration: none;
}
#LoadCommentsBlock {
display: flex;
flex-direction: row;
justify-content: center;
}
#LoadCommentsBlock > button {
height: 40px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: none;
outline: none;
padding: 0 40px;
border-radius: 5px;
font-size: 15px;
font-weight: 500;
color: var(--color-bg-comments);
background: var(--gradient-main);
cursor: pointer;
transition: 0.2s;
user-select: none;
}
#AddComments {
width: 35%;
padding: 0 20px;
box-sizing: border-box;
}
#AddCommentsFormBlock {
position: sticky;
top: 100px;
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
#AddCommentsFormBlock > h2 {
width: 100%;
font-size: 18px;
font-weight: bold;
color: var(--color-font-gray-32);
}
#AddCommentsFormBlock > .notification-comment {
width: 100%;
font-size: 15px;
font-weight: 500;
}
#AddCommentsFormBlock > .notification-comment.good {
color: #33a42d;
}
#AddCommentsFormBlock > .notification-comment.error {
color: #dd4d1b;
}
#AddCommentsFormBlock > .notification-comment.warning {
color: #ff7f50;
}
#AddCommentsForm {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
#AddCommentsForm > .row {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
#AddCommentsForm label {
width: 100%;
font-size: 13px;
font-weight: 500;
color: var(--color-font-gray-64);
}
#AddCommentsForm input {
width: 100%;
height: 40px;
padding: 0 20px;
box-sizing: border-box;
border: solid 1px var(--color-border-gray-E);
outline: none;
border-radius: 5px;
font-size: 15px;
color: var(--color-font-gray-32);
background: var(--color-bg-comments);
}
#AddCommentsForm input:focus {
border-color: var(--color-border-main);
}
#ACEditor {
max-width: 100%;
min-width: 100%;
min-height: 100px;
max-height: 160px;
display: flex;
flex-direction: column;
padding: 10px 20px;
box-sizing: border-box;
outline: none;
border: solid 1px var(--color-border-gray-E);
border-radius: 5px;
background: var(--color-bg-comments);
}
#ACEditor:focus {
border-color: var(--color-border-main);
}
body.dark #ACEditor {
color: var(--color-font-gray-32);
}
body.dark .show-comments-btn {
color: var(--color-bg-comments);
}
#AddCommentsForm .btn-submit {
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: none;
outline: none;
border-radius: 5px;
font-size: 15px;
font-weight: 500;
color: var(--color-bg-comments);
background: var(--gradient-main);
cursor: pointer;
user-select: none;
}
#AddCommentsForm .btn-submit:hover {
opacity: 0.9;
}
#CommentAnswer {
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border: solid 1px var(--color-border-gray-E);
border-radius: 5px;
padding: 0 0 0 20px;
box-sizing: border-box;
background: #fff;
}
#UserAnswer {
flex-grow: 1;
display: flex;
flex-direction: row;
align-items: center;
font-size: 15px;
color: var(--color-font-gray-96);
user-select: none;
}
#DeleteAnswerComment {
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: none;
outline: none;
padding: 0 20px;
box-sizing: border-box;
border-radius: 0 5px 5px 0;
background: #fff;
cursor: pointer;
}
#DeleteAnswerComment > svg {
width: 16px;
height: 16px;
stroke: var(--color-font-gray-32);
transition: 0.2s;
}
#DeleteAnswerComment:hover > svg {
stroke: var(--color-font-main-dark);
}
@media (max-width: 950px) {
#Reviews {
flex-direction: column-reverse;
gap: 40px;
}
#CommentsBlock {
width: 100%;
}
#AddComments {
width: 100%;
}
}
@media (max-width: 450px) {
#Comments > .comment > .image {
display: none;
}
#Comments > .sub-comment {
padding-left: 50px;
}
}
#PageContent {
display: flex;
flex-direction: column;
gap: 40px;
width: 100%;
padding: 40px 20px 0 20px;
box-sizing: border-box;
}
#PageContent h2 {
width: 100%;
padding: 24px 0;
font-size: 18px;
font-weight: bold;
color: var(--color-font-gray-32);
}
#PageContent h3 {
width: 100%;
padding: 22px 0;
font-size: 16px;
font-weight: bold;
color: var(--color-font-gray-32);
}
#PageContent h4 {
    width: 100%;
    padding: 20px 0;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-font-gray-32);
}
#PageContent p {
font-size: 15px;
color: var(--color-font-gray-32);
line-height: 1.5;
margin-top: 10px;
}
#PageContent p:first-of-type {
margin-top: 0;
}
/* Стили для списков внутри #PageContent */
#PageContent ul,
#PageContent ol {
margin: 15px 0 20px 20px;
padding-left: 20px;
line-height: 1.6;
}

/* Неупорядоченные списки (маркированные) */
#PageContent ul {
list-style-type: disc;
}

/* Вложенные неупорядоченные списки */
#PageContent ul ul {
list-style-type: circle;
margin: 5px 0 5px 15px;
}

#PageContent ul ul ul {
list-style-type: square;
}

/* Упорядоченные списки (нумерованные) */
#PageContent ol {
list-style-type: decimal;
}

/* Вложенные упорядоченные списки */
#PageContent ol ol {
list-style-type: lower-alpha;
margin: 5px 0 5px 15px;
}

#PageContent ol ol ol {
list-style-type: lower-roman;
}

/* Элементы списка */
#PageContent li {
margin-bottom: 8px;
font-size: 15px;
color: var(--color-font-gray-32);
line-height: 1.5;
}

/* Последний элемент списка */
#PageContent li:last-child {
margin-bottom: 0;
}

/* Ссылки внутри списков */
#PageContent li a {
color: var(--color-font-main);
text-decoration: none;
transition: color 0.2s ease;
font-weight: 500;
}

#PageContent li a:hover {
color: var(--color-font-main-dark);
text-decoration: underline;
}

/* Маркеры и нумерация */
#PageContent ul li::marker {
color: var(--color-font-main);
}

#PageContent ol li::marker {
color: var(--color-font-gray-64);
font-weight: 500;
}

/* Для темной темы */
body.dark #PageContent li {
color: var(--color-font-gray-64);
}

body.dark #PageContent ul li::marker {
color: var(--color-font-main-dark);
}

body.dark #PageContent ol li::marker {
color: var(--color-font-gray-96);
}

/* Адаптивность для мобильных */
@media (max-width: 750px) {
#PageContent ul,
#PageContent ol {
margin-left: 10px;
padding-left: 15px;
}

#PageContent li {
font-size: 14px;
margin-bottom: 6px;
}

#PageContent ul ul,
#PageContent ol ol {
margin-left: 10px;
}
}

/* Дополнительные стили для оформленных списков */
#PageContent .feature-list {
list-style: none;
margin-left: 0;
padding-left: 0;
}

#PageContent .feature-list li {
position: relative;
padding-left: 25px;
margin-bottom: 12px;
}

#PageContent .feature-list li:before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--color-font-main);
font-weight: bold;
}

/* Стиль для списков с иконками */
#PageContent .icon-list {
list-style: none;
padding-left: 0;
}

#PageContent .icon-list li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}

#PageContent .icon-list li svg {
flex-shrink: 0;
width: 18px;
height: 18px;
stroke: var(--color-font-main);
margin-top: 2px;
}
#TextAbout > img {
width: 100%;
height: 100%;
max-width: 345px;
max-height: 240px;
border-radius: 5px;
margin: 0 0 20px 20px;
float: right;
object-fit: cover;
transition: 0.3s;
}
@media (max-width: 750px) {
#TextAbout > img {
max-width: 100%;
float: none;
margin: 0 0 20px 0;
}
}
#TextAbout > table {
color: var(--color-font-gray-32);
padding-bottom: 15px;
}
#TextActors {
width: 100%;
display: flex;
flex-direction: column;
}
#TextActors > table {
width: 100%;
border: none;
outline: none;
border-spacing: 0;
}
#TextActors > table td {
vertical-align: top;
padding-bottom: 20px;
}
#TextActors > table tr:last-child > td {
padding-bottom: 0;
}
#TextActors > table td:first-child {
padding-right: 20px;
}
#TextActors > table td > img {
width: 96px;
height: 128px;
border-radius: 5px;
object-fit: cover;
background: #fff;
}
#TextActors > table td > p {
font-size: 15px;
color: var(--color-font-gray-32);
line-height: 1.5;
}
#TextActors > table td > h3 {
padding-bottom: 10px;
font-size: 15px;
font-weight: bold;
color: var(--color-font-gray-32);
}
@media (max-width: 450px) {
#TextActors > table tr {
display: flex;
flex-direction: column;
}
#TextActors > table td {
display: flex;
flex-direction: column;
align-items: center;
}
#TextActors > table td:first-child {
padding-right: 0;
padding-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: center;
}
#TextActors > table tr:last-child > td:first-child {
padding-bottom: 10px;
}
#TextActors > table td > p {
width: 100%;
text-align: center;
}
}
footer {
border-top: solid 1px var(--color-border-gray-E);
padding: 20px;
font-size: 13px;
color: var(--color-font-gray-64);
line-height: 1.5;
background: var(--color-bg-main);
}
footer a {
color: var(--color-font-gray-32);
text-decoration: none;
font-weight: 500;
}
footer a:hover {
color: var(--color-font-main-dark);
}
/* Стили для скрытых комментариев */
.comment.hidden {
display: none !important;
}

.comment.visible {
display: flex !important;
}

/* Кнопка "Показать все комментарии" */
.show-comments-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border: none;
outline: none;
border-radius: 5px;
font-size: 15px;
font-weight: 500;
color: #fff;
background: var(--gradient-main);
cursor: pointer;
transition: 0.2s;
user-select: none;
}

.show-comments-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}

.show-comments-btn svg {
transition: transform 0.3s ease;
}

.show-comments-btn.expanded svg {
transform: rotate(180deg);
}

/* Счётчик комментариев */
#CommentsCount {
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px;
border-radius: 10px;
font-size: 13px;
font-weight: bold;
}
/* Анимация для комментариев */
.comment {
transition: opacity 0.3s ease, transform 0.3s ease;
}

.comment.hidden {
opacity: 0;
transform: translateY(-10px);
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
border: none;
}

.comment.visible {
opacity: 1;
transform: translateY(0);
height: auto;
}

/* Плавная загрузка комментариев */
#Comments {
transition: height 0.3s ease;
}

/* Иконка на кнопке */
#ShowAllCommentsBtn svg {
transition: transform 0.3s ease;
}

#ShowAllCommentsBtn.expanded svg {
transform: rotate(180deg);
}

/* Контейнер для изображений на фан-сайте */
.post-media-block {
margin: 25px 0;
text-align: center;
}

/* Подпись под фото */
.post-media-caption {
display: block;
font-size: 13px;
color: #8f8f8f; /* Под тон твоей темной темы */
margin-top: 8px;
font-style: italic;
}

/* Специфическая настройка для таблиц в описании */
.season-fact-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
border-top: 1px solid #333;
}

.season-fact-table td {
padding: 12px 8px;
border-bottom: 1px solid #333;
color: #b1b1b1;
}

.season-fact-table td:first-child {
font-weight: bold;
color: #8f8f8f;
width: 40%;
}

/* Адаптивность для картинок внутри контента */
.content-img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.post-media-block img {
border-radius: 15px;
transition: transform 0.3s ease !important;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
}
.post-media-block img:hover {
transform: scale(1.02) !important;
}
/* Базовые стили таблицы в контейнере #TextAbout */
#TextAbout table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 25px 0;
    font-size: 15px;
    line-height: 1.5;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border-gray-E);
    background-color: var(--color-bg-raiting);
}

/* Стили заголовков */
#TextAbout table th {
    background-color: var(--color-bg-nav);
    color: var(--color-font-main);
    padding: 14px 18px;
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-font-main);
}

/* Стили ячеек */
#TextAbout table td {
    padding: 14px 18px;
    color: var(--color-font-gray-32);
    border-bottom: 1px solid var(--color-border-gray-E);
    vertical-align: top;
}

/* Выделение жирного текста внутри ячеек */
#TextAbout table td strong {
    color: var(--color-font-black);
    font-weight: 600;
}

/* Зебра-эффект (чередование строк) */
#TextAbout table tbody tr:nth-child(even) {
    background-color: var(--color-bg-main);
    opacity: 0.9;
}

/* Эффект при наведении на строку */
#TextAbout table tbody tr:hover {
    background-color: var(--color-rating-plus-opacity);
    transition: background-color 0.2s ease;
}

/* Убираем рамку у последней строки */
#TextAbout table tbody tr:last-child td {
    border-bottom: none;
}

/* Адаптивность для мобильных экранов */
@media screen and (max-width: 768px) {
    #TextAbout table {
        display: block;
        overflow-x: auto; /* Позволяет листать таблицу вбок на смартфонах */
        white-space: normal;
    }
}