html {
margin: 0;
padding: 0;
overflow-y: scroll;
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
height: 100%;
scroll-behavior: smooth;
}
body {
background: var(--bg-page);
margin: 0 auto;
font-family: 'Manrope', Arial, sans-serif;
font-variant-numeric: tabular-nums;
color: var(--text-primary);}
body.no-scroll {
position: fixed;
overflow-y: scroll;
width: 100%;
}
:root {
/* === База === */
--bg-page: #fffffc; /* основной фон */
--bg-surface: #f8f8f8; /* вторичный фон (карточки) */
--bg-surface-2: #f5f5f5; /* ещё светлее для вложенности */
--bg-surface-inverse: #ffffff;
--bg-surface-inverse-alpha: rgba(255, 255, 255, 0.1);
--bg-surface-inverse-alpha-2: rgba(255, 255, 255, 0.5);
--bg-brand: #ffd900;
--text-surface-btn: #ffffff;
/* Более тёмные поверхности */
--bg-surface-3: #f2f2f2; /* чуть темнее, для ховеров */
--bg-surface-4: #eeeeee; /* заметно темнее, для разделителей */
--bg-surface-5: #eaeaea; /* ещё более тёмный, для бордеров/подложек */
--bg-surface-6: #e0e0e0; /* почти серый, для сильного контраста */
--bg-surface-7: #cccccc; /* лёгкий тёмный фон, ещё контрастнее */
--bg-surface-8: #999999; /* графитовый серый */
--bg-surface-9: #666666; /* насыщенный тёмный серый */
--bg-surface-9-alfa:rgba(51, 51, 51, 0.4);
--bg-surface-10: #333333; /* почти чёрный, но мягче */
--bg-surface-11: #1a1a1a; /* премиальный глубокий фон */
/* Акцентные */
--bg-surface-8:#6ba0fe;
--primary: #2e5bff;
--primary-hover: #2448cc;
--primary-bg-light: #eaf0ff;
--bg-surface-btn: #3c3fe6;
--secondary: #ff7a00;
--secondary-hover: #cc6200;
--secondary-bg-light: #fff3e5;
--accent-purple: #8a4fff;
--accent-purple-bg: #f5e9ff;
--accent-grey: #34343c;
/* === Текст === */
--text-primary: #1a1a1a;
--text-secondary: #6b6b6b;
--text-muted: #a0a0a0;
--text-inverse: #ffffff;
--text-warn: #A71D2A;
/* === Бордеры / разделители === */
--border: #eaeaea;
--border-strong: #e0e0e0;
--divider: #ececec;
/* === Акцентные (ссылки/primary) === */
--primary: #2e5bff;
--primary-hover: #2448cc;
--primary-ghost-hover: rgba(46, 91, 255, 0.08);
/* === Уведомления (фон / текст / бордер) === */
--info-bg: #eaf4ff;
--info-fg: #004085;
--info-br: #b6daff;
--success-bg:#e9f9ee;
--success-fg:#1e7a3f;
--success-br:#b8e6c1;
--warn-bg: #fff8e5;
--warn-fg: #8a6d1d;
--warn-br: #ffe0a3;
--warn-2-bg: #FDEDEE;
--error-bg: #fdedee;
--error-fg: #a71d2a;
--error-br: #f5b5b5;
/* === Подложки / выделения / цитаты === */
--highlight: #fff8a3; /* выделение текста */
--quote-bg: #f6f6f6;
--quote-br: #e0e0e0;
--quote-fg: #444444;
/* === Кнопки (готовые токены) === */
--btn-primary-bg: var(--primary);
--btn-primary-bg-hover: var(--primary-hover);
--btn-primary-fg: var(--text-inverse);
--btn-secondary-bg: #f5f5f5;
--btn-secondary-bg-hover: #eaeaea;
--btn-secondary-fg: var(--text-primary);
--btn-secondary-br: var(--border-strong);
--btn-ghost-bg: transparent;
--btn-ghost-bg-hover: var(--primary-ghost-hover);
--btn-ghost-fg: var(--primary);
/* === Тени / эффекты === */
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
/* === Радиусы, интервалы (удобно держать вместе) === */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg-2: 20px;
--radius-lg: 30px;
--gap-sm: 8px;
--gap-md: 16px;
--gap-lg: 24px;
}
a {
text-decoration: none;}
iframe {
width: 100%!important;
margin: 0 0 24px 0;}
.bm {position: relative;}
.site-header {
display: block;
width: 100%;
margin: 0 auto;}
.header-top, .header-bottom {
display: flex;
justify-content: space-between;
align-items: center;
width: 1200px;
margin: 0 auto;}
.header-bottom {
margin-bottom: 10px;}
.header-logo {
font-weight: bold;
font-size: 24px;}
.nav_li_bottom, .nav_li_bottom2 {
display: inline-flex;}
@media (min-width: 1200px) {
.nav_li_bottom2 {display: none;}
}
@media screen and (max-width: 480px) {
.header-top, .header-bottom {
width: 100%!important;}
.box-content-ads {
display: flex!important;
width: 100%!important;
background: var(--bg-surface);
align-items: center;
min-height: 50px;
max-height: 300px;
margin: 30px auto 0!important;
justify-content: center;}
}
@media screen and (max-width: 1200px) {
.site-header {
width: 100% !important;
padding: 0 20px;
box-sizing: border-box;}
.header-top {
width: 100%!important;
height: 60px!important;
display: flex!important;
align-items: center;
box-sizing: border-box;}
.logo img{
height: 26px!important;}
#nav, .nav_top {
display: none!important;}
.header-bottom nav {
overflow-x: auto; /* Разрешаем горизонтальную прокрутку */
overflow-y: hidden; /* Убираем вертикальную прокрутку, если она не нужна */
white-space: nowrap; /* Запрещаем перенос элементов списка на новую строку */
-webkit-overflow-scrolling: touch;
}
.header-bottom nav::-webkit-scrollbar, .header-bottom nav {
-ms-overflow-style: none; /* для IE11/Edge */
scrollbar-width: none; /* для Firefox 64+ */
}
.custom-popup-content, .additional-popup {
top: 0px!important;
width: 100%!important;
height: 100vh!important;
border-radius: 0px!important;
padding: 60px 20px 20px!important;}
.inner-container {
display: flex!important;
flex-direction: column!important;
width: 92vw!important;}
.left-panel {
width: 100%!important;
margin: 0 0px 40px 0!important;}
.banner {
width: 100%!important;}
.margin20, .margin60 {
margin: 0px!important;}
.full-story-ads {
display: none!important;}
/*.stylestopContainer {
flex-direction: column!important;
width: 100%!important;
margin: 0 0 45px 0;}*/
.container-kar, .custom-container {
width: 100%!important;
flex-wrap: nowrap!important;
overflow-x: auto!important;}
.tags-block-gl {
margin: 0 auto 50px!important;}
.tags-block {
margin-bottom: 30px!important;}
.podbor {
width: 148px!important;
flex: 0 0 auto!important;
margin-right: 10px!important;}
.movie img, .podbor img, .custom-item img, .container-ai .avatar-ai {
transition: none!important;
transform: none!important;}
.format-mov {
top: 103px!important;}
.news-arrow-list {
margin: 0 0 0 15px!important;
}
/*#stylesContainertr {
width: 100%!important;}*/
/*.top-img, .imgtop {width: 100%!important;}*/
/*#stylesContainertr-right-wrapper {
margin: 10px 0 0 0!important;
padding: 0px!important;}*/
.custom-logo {
left: 30px!important;}
.post-feature-card-title {
margin-top: 15px!important;}
.title, .template-title {
font-size: 26px!important;
line-height: 34px!important;}
#style-button-trailer-box {
width: 100%!important;
height: 60px!important;
margin-top: 20px!important;}
.comments-text {
font-size: 20px!important;}
.comments-count {
font-size: 20px!important;}
/*.box-left {
width: 84vw!important;}*/
.zag-left {
font-size: 20px!important;
margin: 0px 0 20px 0!important;}
/*#wrapper > div > div:nth-child(2) > section:nth-child(3) > div.zag-wrapper > h3 {
margin-bottom: 25px!important;}*/
.more-button {
margin: 0 0 20px 0!important;}
#wrapper > div > div:nth-child(2) > section:nth-child(4) > div.zag-wrapper > div > a:nth-child(1) {
margin: 0px!important;}
/*.rootTitle:before {
margin: 8px 10px 0 0px!important;}*/
.blockClassName-box {
width: 100%!important;
flex-direction: column;}
.post-card {
width: 100%!important;
margin: 0 0 10px 0!important;}
/*.post-card-button {
width: 100%!important;}*/
#wrapper > div > div:nth-child(2) > section > div.card-box-bottom.blockClassName-box > div:nth-child(3) {
border-bottom: 0px!important;}
#wrapper > div > div:nth-child(2) > div:nth-child(3) > section > div > div.post-card-media-right > div:nth-child(2) {
margin: 0 0 25px 0!important;
border-bottom: 1px solid rgba(55,50,145,.1);
padding: 0 0 15px 0;}
.post-card-box {
width: 100%!important;
margin: 0 0 30px 0!important;}
.margin40 {
margin: 0px!important;}
/*#stylesContainertr-right-wrapper > span {
padding: 0!important;}*/
.post-feature-card-label-new {
padding: 0 4vw;}
.card-box-bottom {
margin-top: 0px!important;}
/*.post-card-box-button {
margin: 0px 0 30px 0!important;
width: 100%!important;
height: 50px;}*/
.container-dostup {
padding: 30px 20px!important;}
.status-dostup {
display: none;}
.icon-title-container {
width: 100%!important;}
#wrapper > div > div:nth-child(2) > div:nth-child(3) > section > div > div.box-left-media > div:nth-child(1) {
border-top: 0px!important;}
#wrapper > div > div:nth-child(2) > div:nth-child(3) > section > div > div.box-left-media > div:nth-child(1) > div {
margin: 0px!important;}
#footer {
width: 100%!important;
padding-bottom: 30px!important;
padding-right: 20px;
padding-left: 20px;
box-sizing: border-box;}
/*.footer-logo-img {
width: 80px!important;}*/
.footer-bottom-info {
flex-direction: column!important;
gap: 5px!important;}
#separator {padding: 0 10px!important;}
/*** новости ***/
#wrapper > div > h3 {
font-size: 20px!important;}
.box-news {
width: 100%!important;}
#wrapper > div > div > div > article:nth-child(1) > div > div.post-card-box-img.r20_0 {
background-position: center center!important;
height: 0px!important;
padding-bottom: 112%!important}
#wrapper > div > div > div > article:nth-child(11), #wrapper-anons > div:nth-child(2) > div > div:nth-child(5) {
border-bottom: 0px!important;}
.post-box-news {
width: 100% !important;}
.box-tags {
width: 100%!important;
flex-direction: column!important;
padding: 0px!important;}
.news-card {
width: 100%!important;}
.news-subtitle {
line-height: 22px!important;}
.box-content-com {
width: 100%!important;
font-size: 17px!important;
margin: 0px!important;
box-sizing: border-box;}
.box-content-com {
flex-wrap: wrap!important;
padding: 0px 20px 0px !important;}
.w800 {
width: 100%!important;}
.movie-card_box__detail {
flex-direction: column!important;}
.full-box-com, .related-news {
width: 100%!important;
padding: 30px 0px !important;
box-sizing: border-box;}
.related-news {
margin: 30px 0 5px 0px!important;}
#wrapper-anons > div:nth-child(2) > div > div:nth-child(2), #wrapper-anons > div:nth-child(2) > div > div:nth-child(2) > div, #wrapper-anons > div:nth-child(2) > div > div:nth-child(3), #wrapper-anons > div:nth-child(2) > div > div:nth-child(1) > div, #wrapper-anons > div:nth-child(2) > div > div:nth-child(3) > div {
height: auto!important;}
#wrapper-anons {
width: 100% !important;
margin-top: 30px !important;
padding: 0 20px;
box-sizing: border-box;}
.subscribe-text {
display:none;}
.subscribe-icon {
margin: 0px!important;}
.subscribe-button {
padding: 0px!important;
width: 36px;
height: 36px;
justify-content: center;}
.comment {
width: 100%!important;
margin: 40px 0 0 0;
order: 1;}
.upload-avatar {
height: 160px;
flex-direction: column;}
.upload-text {
max-width: 380px;
display: flex;
flex-direction: column;
align-items: center;}
.upload-image img {
right: 20%!important;}
.upload-subtitle {
font-size: 14px!important;
margin-top: 10px!important;
text-align: center;}
.post-card-box:hover, .post-box-news:hover, .post-card-media-box-left:hover, .media-right-box:hover {
transform: none!important;}
.soc-share a {
width: 42px!important;
height: 42px!important;}
.soc-share {
height: 42px!important;}
ul.xfieldimagegallery li {width: 94%!important;}
.movie-info-detail {
margin-inline-start: 0px!important;}
.size-title-card {
min-height: auto!important;}
.support-block {
flex-direction: column;
text-align: left;
padding: 30px!important;}
.iconblog {
display:none;}
.text-content {
margin: 0!important;}
.text-content p {
font-size: 0.8em; /* Уменьшаем текст для мобильной версии */}
.button-wrapper {
width: 100%; /* Контейнер кнопки */
display: flex;
justify-content: center;}
.blog-button {
margin-top: 10px;
width: 100%; /* Кнопка на всю ширину */
padding: 10px;}
.bottom-sheet .content {
width: 100%!important;
border-radius: 0px!important;}
.bottom-sheet {
top: 0px!important;
bottom: 0px!important;
z-index: 2000;}
.movie-card_box {
flex-direction: column!important;
max-width: 100%;}
.movie-card_box__info-section {
margin-left: 0px!important;}
.movie-card_box__section {
background: #fff;
border-radius: var(--radius-lg-2);
padding: 20px;
margin-bottom: 20px;}
.box-subscription {
width: 100%!important;
margin: 0px!important;}
/*.subscription-container {
margin: 0px!important;
flex-direction: column;} */
.template-description {
line-height: 1.4!important;
margin: 15px 0px 0px!important;}
.custom-form-container {
flex-wrap: wrap!important;}
#mg-mailer-email-button {
width: 100%;
box-sizing: border-box;}
.custom-form-privacy {
line-height: 1.4!important;
margin: 10px 0px 0px!important;}
.custom-template {
margin-bottom: 30px!important;}
.restricted-box {
padding: 0 20px!important;}
.card-content-tag {
flex-direction: column;
align-items: flex-start;
gap: 30px;}
.button-tag {
width: 100%;
box-sizing: border-box;}
.custom-container {
gap: 10px!important;}
}
.r20_0 {
border-radius: 20px 20px 0px 0;}
/*.r20 {
border-radius: 30px}*/
.r10 {
border-radius: 10px;}
/*.items-center {
align-items: center;}*/
.title {
font-style: normal;
font-weight: 800;
font-size: 32px;
line-height: 44px;
color: #000;}
.template-title {
font-style: normal;
font-weight: 900;
font-size: 45px;
line-height: 50px;}
.template-title {
margin: 0px;}
/*.title-top {
font-style: normal;
font-weight: 900;
font-size: 26px;
line-height: 34px;
color: rgb(0, 0, 0);}*/
.size-title-theme {
font-weight: 700;
font-size: 24px;
line-height: 33px;
color:#FDFDFD;}
.size-title-card {
font-weight: 800;
font-size: 18px;
line-height: 24px;
color: rgba(0,0,0,.8);
min-height: 72px;
margin: 0;}
#wrapper-anons {
width: 1200px;
margin-top: 50px;}
/*.box-box {
width: 1100px;
padding: 50px;
background: #fff;
border-radius: 40px;}*/
#headertop {
width: 1100px;
display: flex;
margin: 0 auto;}
.logo {
height: 88px;
position: relative;
display: flex;
align-items: center;}
.logo img {
height: 36px;}
.logo a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left:0;
display: flex;
align-items: center;
outline: none;}
.logo a:focus,
.logo a:active {outline: none;}
#nav {
width: 1081px;
height: 88px;
float: left;
display: flex;
justify-content: flex-end;}
.nav_ul {
list-style-type: none;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: row;
}
.nav_li {
display: inline-flex;
padding: 0 0 0 8px;
}
.menu_d {
display: flex;
align-items: center;
}
.hagee-header-featured-menu, .home-link a {
height: 48px;
line-height: 48px;
padding: 0px 16px;
font-size: 16px;
border-radius: 18px;
text-decoration: none;
background: none;
transition: background-color 0.15s ease 0s;
cursor: pointer;
display: flex;
-webkit-box-align: center;
align-items: center;
white-space: nowrap;
font-weight: 500;}
.hagee-header-featured-menu-start {
height: 48px;
line-height: 48px;
padding: 0px 16px 0px 0px;
font-size: 16px;
text-decoration: none;
background: none;
cursor: pointer;
display: flex;
-webkit-box-align: center;
align-items: center;
white-space: nowrap;
font-weight: 500;}
.hagee-header-featured-menu, .hagee-header-featured-menu-start {
color: rgba(0,0,0,.8);
font-weight: 500;}
.hagee-header-featured-menu:hover {
background: #f7f7f7;}
.hagee-header-featured-menu.active {
background: #f7f7f7;}
.home-link a {
background-color: #f0f0f0;
color: rgba(0,0,0,.8);
transition: background-color 0.3s ease;}
.home-link a:hover {
background-color: #e3e3e3;}
/*.stylestopContainer {
width: 1100px;
display: flex;
position: relative;
flex-direction: row-reverse;}*/
#stylesContainertr {
display: inline-flex;
width: 720px;}
.top-img, .imgtop {
width: 720px;}
/*#stylesContainertr-right {
display: inline-flex;
width: 380px;}*/
/*#stylesContainertr-right-wrapper {
display: flex;
width: 100%;
margin: 40px 0 0 0px;
flex-direction: column;
padding: 0 40px 0 0;
box-sizing: border-box;}*/
.post-tr {
width: 340px;
float:left;}
/*.icon-container {
width: 48px;
height: 48px;
background: #f7f7f7;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 5px 0 0;
}*/
/*.icon {
width: 48px;
height: 48px;
background-image: url('/img/ai.svg');
background-repeat: no-repeat;
background-position: center;
}*/
/*.post-focus {
height: 48px;
display: flex;}*/
.font13 {
font-size:13px;}
/*.focus {
font-size: 16px;
font-weight: 600;
line-height: 48px;
color: rgb(0, 0, 0);
padding: 0px 20px;
background: #f7f7f7;
display: inline-block;
border-radius: 30px;}*/
/*.post-feature-card-title {
max-height: 132px;
margin-top:35px;}*/
/*.stylecastbox {
margin-top:15px;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 19px;
color: rgba(0,0,0,.8);
max-height: 57px}*/
.stylescastbox-title {
margin-right: 6px;
font-weight: 700;}
.max-lines-3 {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;}
.max-lines-2 {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;}
/*#style-button-trailer-box {
display: flex;
width: 340px;
height: 60px;
margin-top: 30px;
flex-direction: row;}*/
/*.box-left {
display: inline-flex;
width: 235px;
height: 60px;}*/
/*.tr {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
padding: 0 20px;
background: rgba(0,0,0,.8);
font-weight: 600;
color: #fff;
margin: 10px 0 0;
transition: transform 200ms ease, background 200ms ease, color 200ms ease;
will-change: transform, background, color;
}*/
/*.stylestopContainer:hover .tr {
transform: scale(1.02);
background: rgba(0,0,0,.8);
color: #fff;}*/
.blockClassName, .tags-block, .tags-block-gl {
width: 100%;
display: block;}
.tags-block {
margin-bottom: 40px;}
.blockClassName-box {
width: 1200px;
display: flex;
justify-content: space-between;
margin: 0 auto;}
.post-card {
display: inline-flex;
width: 386px;}
.post-card:last-child {
margin-right:0px;}
.post-card-box, .post-box-news {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--radius-lg);
box-sizing: border-box;
padding: 5px;
border: 1px dashed rgba(240, 240, 240, 1);}
.post-card-box, .post-box-news, .post-card-media-box-left, .media-right-box {
transition: transform 0.3s ease;}
.post-card-box:hover, .post-box-news:hover, .post-card-media-box-left:hover, .media-right-box:hover {
transform: scale(1.05);}
.post-card-box-img {
position: relative;
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 55%;
border-radius: var(--radius-lg);}
.image300 {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
font-family: "object-fit: cover;";
-o-object-fit: cover;
object-fit: cover;}
.hagee-news-box-img {
width: 300px;
height: 180px;}
.post-card-box-indent {
padding: 20px;}
#separator {
padding: 0 20px}
.post-card-title-gl {
padding: 20px;
background: #f7f7f7;
border-radius: var(--radius-lg);
width: 100%;
box-sizing: border-box;}
.post-card-title-more {
padding: 20px;
background: #fff;
margin: 0;
border-radius: var(--radius-lg);
width: 100%;
box-sizing: border-box;}
.card-box-bottom {
margin-top:40px;}
/*.post-card-box-button {
display: flex;
justify-content: center;
margin: 0 0 60px 0;
width: 1200px;
height: 50px;} */
/*.post-card-button {
position: relative;
display: inline-flex;
width: 300px;
height: 50px;
justify-content: center;
border-radius: 18px;
font-weight: 600;
font-size: 16px;
color: #000;
background: #fff500;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;}
.post-card-button:hover {
transform: scale(1.02);
background:#E6E200;
color: #000;}*/
.post-card-box-link, .feed-item-link {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 11;
cursor: pointer;}
#footer {
display: flex;
width: 1200px;
padding-bottom:40px;
border-top: 1px solid #ededed;
margin: 100px auto 0px;
flex-direction: column;}
.footer-bottom-info {
display: inline-flex;
gap: 15px;}
.footer-text {
display: inline-flex;
margin: 40px 0 15px;
font-size: 14px;
font-weight: 400;
color: var(--text-secondary);}
/*.footer-logo-img {
width: 100px;}*/
.footer-content-link {
font-weight: 400;
font-size: 14px;
color: var(--text-secondary);}
.footer-content-link:hover {
color: var(--text-primary);}
/*** news ***/
.box {
display: flex;
max-width: 1200px;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;}
.box-news {
display: block;
width: 590px;}
#wrapper > div > div > div > article:nth-child(1) > div > div.post-card-box-img.r20_0 {
height: 398px;
position: relative;
border-radius: 20px;}
.post-box-news:hover .gradient-post-first {
background: radial-gradient(84.06% 84.01% at 48.79% 16%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 80%)!important;}
.box-card-n {
display: flex;
flex-wrap: wrap;}
.storybox {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 300px;
height: 350px;
background:#ccc;
position: relative;}
/*** full news ***/
.box-content-com {
display:flex;
padding: 70px 0px 0px 0px;
height: 100%;
background:#fff;
border-radius: var(--radius-lg);
justify-content: space-between;}
.box-content-com {
flex-direction: row;}
/*.w800 {
width: 690px;}*/
.box-tags {
display:flex;
flex-direction: row;}
.box-tags {
display:flex;
gap: 60px;
justify-content: space-between;
flex-direction: row;}
.box-tags {
padding: 0px;}
.full-box-com {
width: 720px;
display: flex;
justify-content: space-between;
align-items: center;}
.related-news a {
color: rgba(0,0,0,.8);
line-height: 28px;
font-weight: 500;}
.related-news a, .related-news botton {
line-height: 26px;
background-image: linear-gradient(rgba(20, 20, 200, 1), rgba(20, 20, 200, 1));
background-size: 100% 0px;
background-repeat: no-repeat;
background-position: 0 99%;}
.related-news botton {
cursor: pointer;}
.related-news a:hover, .related-news botton:hover {
color: rgb(20,20,204);}
.full-story-ads {
position: relative;
width: 300px;}
.content-to-be-sticky {
position: sticky;
top: 20px; /* Отступ от верхнего края окна */
z-index: 10;
}
.box-subscription {
width: 340px;
margin: 0 0 0 20px;}
.box-content-ads {
display: none;}
.margin-auto {
margin: 0 auto;}
.feed-otstup {
margin-top: 40px;}
.nav_ext {
background: #f7f7f7!important;
color: #000!important;}
.menu-icon-movie {
display: inline-block;
width: 22px; /* Размер иконки */
height: 22px; /* Размер иконки */
background-color: #100e19; /* Цвет фона круга */
border-radius: 50%; /* Делает фон круглым */
margin: 0 8px 0 -8px;
vertical-align: middle; /* Выравнивание с текстом */
background-image: url('/img/movie.svg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;}
.fa {
position: absolute;
top: 23%;
right: 15px;
color: #7a7a85;}
.fa:before {
content: "\203A";
font: icon;
}
.overlay.active {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 997;}
.overflow-hidden {
overflow: hidden;}
.mce-accordion summary {
cursor: pointer;}
.self_delete_link {
border: 0 none;
display: inline-block;
vertical-align: middle;
cursor: pointer;
padding: 12px 27px;
border-radius: 10px;
outline: none;
background-color: #f44336;
color: #fff;
text-shadow: 0 1px #333;
text-decoration: none !important;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
box-sizing: border-box;
transition: all ease .1s; transition: all ease .1s;}
.fixed-position {
position: sticky;
top: 20px;
width: 100%;
z-index: 10;
transition: all 0.3s ease;}
.related-news {
margin: 25px 0 0 0px;
display: flex;
flex-direction: column;}
.related-news span {
font-size: 20px;
font-weight: 600;
margin: 10px 0 15px 0;}
.stk-reset {
margin-bottom: 12px;}
.pm th{
text-align: left;
font-weight: 500;
white-space: nowrap;
}
.pm th.pm_checkbox {
text-align: center;
}
.pm_list.pm_subj, .pm_list.pm_icon, .pm_list.pm_last_user {
cursor: pointer;
}
.pm_list.pm_icon svg {
width: 1.4rem;
height: 1.4rem;
vertical-align: middle;
}
.pm_list.pm_icon.pm-unread-image {
color: #3394e6;
}
.pm td.pm_list.pm_icon, .userstop td, th.pm_head.pm_icon {
border-bottom: none;
}
.pm_list.pm_icon.pm-reply-image {
color: #087e02c4;
}
.pm_list.pm_icon.pm-read-image {
color: #afafaf;
}
.pm_list .pm_last_message, .pm_list .pm_last_date, .pm_list .pm_with_user {
color: #64748b;
font-size: .8rem;
}
.pm tbody > tr:hover {
background-color: #e2e8f099;
}
.pm_navigation {
margin-top: 1rem;
}
.pm_navigation .navigation {
display: inline-block;
color: #333333;
background-color: #f5f5f5;
border-radius: 0.188rem;
padding: .4rem;
}
.pm_navigation .navigation a, .pm_navigation .navigation span {
padding: 0.5rem;
min-width: 2.25rem;
}
.pm_navigation .navigation span {
background-color: #4581d0;
color: #fff;
}
.pm_navigation .navigation a {
text-decoration: none;
color: #000;
}
.pm_navigation .navigation a:hover {
background-color: #e2e8f0;
}
.DLEPush {
z-index: 2001;
position: fixed;
right: 20px;
top: 20px}
@keyframes DLEPush-show {
0% {
transform: translateY(100%);
opacity: 0;}
100% {
transform: translateY(0);
opacity: 1;}
}
.DLEPush-notification.wrapper {
animation-name: DLEPush-show;
animation-duration: 1s;
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
color: #333;
margin-bottom: 10px;
width: 100%;
max-width: 400px;
box-shadow: 0 10px 15px rgb(0 0 0 / 20%);
background-color: #fff;
border-radius: 10px}
.DLEPush-notification .DLEPush-icon {
grid-column: 1;
grid-row: 1 / span 2;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width: 45px;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
text-align: center;}
.DLEPush-notification .DLEPush-icon svg {
scale: .8;}
.DLEPush-notification .DLEPush-header {
font-weight: 500;
grid-column: 2;
grid-row: 1;
font-size: 1rem;
margin-left: 1rem;
margin-top: .5rem;}
.DLEPush-notification .DLEPush-header:empty {
margin-top: 0;}
.DLEPush-notification .DLEPush-message {
grid-column: 2;
grid-row: 2;
font-size: .875rem;
margin: 1rem;}
.DLEPush-notification .DLEPush-message li, .DLEPush-notification .DLEPush-message ul {
list-style-type: none;
padding-left: 0;}
.DLEPush-notification .DLEPush-close {
position: absolute;
top: 8px;
right: 10px;
font-weight: 300;
background: none;
border: 0;
font-size: 1.15rem;
cursor: pointer;
line-height: 1;
padding: 0;
color: inherit;
outline: 0;
opacity: 0.75;}
@media only screen and (min-width: 601px) {
.DLEPush-notification.wrapper {
min-width: 400px;}
}
.DLEPush-notification .DLEPush-close:hover {
opacity: 1;}
.DLEPush-notification.wrapper.push-success {
background-color: #e0f2f1;}
.DLEPush-notification.wrapper.push-success .DLEPush-icon {
background-color: #00897b;}
.DLEPush-notification.wrapper.push-warning {
background-color: #FFF3E0;}
.DLEPush-notification.wrapper.push-warning .DLEPush-icon {
background-color: #FF9800;}
.DLEPush-notification.wrapper.push-error {
background-color: #FBE9E7;}
.DLEPush-notification.wrapper.push-error .DLEPush-icon {
background-color: #FF5722;}
input[type="text"].comments_author_field {
width: 100%;
margin-bottom: 10px;}
.goals-wrapper, .zag-wrapper, .zag-wrapper-news {
display: flex;
justify-content: space-between;}
.zag-wrapper, .zag-wrapper-news {
align-items: center;}
.zag-left, .zag-right {
text-align: left;}
.zag-left {
text-align: left;}
.zag-wrapper {margin-bottom: 35px;}
.zag-left h3 {margin:0px; padding:0px;font-weight: 800;font-size: 34px;}
.more-button, .unibox-button, .more-button2 {
display: inline-block;
box-sizing: border-box;
font-size: 16px;
height: 40px;
border-radius: 20px;
padding: 10px 16px;
cursor: pointer;
border: 0px;
transition: background-color 0.3s ease;}
.more-button, .unibox-button {color: var(--bg-surface-inverse);background: var(--bg-surface-11);}
.more-button2 {color: var(--text-inverse);background: var(--bg-surface-11);}
.unibox-button {margin: 0 0 30px 0;}
.more-button {font-weight: 550;}
.more-button:hover, .unibox-button:hover {
background:var(--secondary-hover);}
.more-button2:hover{background:var(--bg-surface-10);}
.soc-share {
margin: 30px 0 0 0;
padding: 30px 20px;
background: #fff;
border-radius: 18px;
height: 52px;
box-shadow: inset 0 0 0 1px #eff2f7;
}
.soc-share a {
display: inline-block;
width: 52px;
height: 52px;
border-radius: 50%;
background-color: #ffffff;
margin: 0 5px;
overflow: hidden;
text-decoration: none;
}
/* Иконки для каждой соцсети */
.soc-share a.sh_vk, .sh_vk {
background-image: url('/img/vk.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sh_g {
background-image: url('/img/google.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sh_ya {
background-image: url('/img/ya.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sh_mail {
background-image: url('/img/mail.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.donate-block {
width: 690px;
background: white;
-webkit-box-shadow: 0 0 60px rgba(0,0,0,.1);
box-shadow: 0 0 60px rgba(0,0,0,.1);
margin: 50px 0 0px;
border-radius: 18px;
}
.donate-line {
display: flex;
background: #f7f7f7;
padding: 40px;
}
.donate-line2 {
display: flex;
padding: 40px;
}
.donate-image {
width: 180px;
height: 180px;
}
.donate-image img {
width: 180px;
height: 180px;
border-radius: 10px;}
.donate-info, .donate-support {
padding-left: 30px;
padding-right: 30px;
flex-grow: 1;
}
.donate-info {
margin-top: 40px;}
.donate-name {
font-weight: 600;
font-size: 22px;
}
.donate-description {
font-size: 16px;
color: #666;
}
.donate-button a, .trailer-button-container a {
background: #4b61f7;
width: 180px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
font-size: 14px;
color: #fff;
font-weight: 600;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.donate-button a:hover, .trailer-button-container a:hover {
transform: scale(1.02);
color: #fff;
}
.trailer-button-container a {
margin: 30px 0 0;}
.donate-support {
color: #333;
line-height: 20px;
font-size: 14px;
}
.xfieldimagegallery {
overflow-x: auto;
white-space: nowrap;
scroll-behavior: smooth;}
.xfieldimagegallery.scrolling {
scroll-behavior: auto;}
ul.xfieldimagegallery {
display: flex;
list-style: none;
max-width: 100%;
margin-block: 2rem;
margin-inline: auto;
overflow: auto;
scroll-snap-type: x mandatory;
gap: 10px; /* Добавляет небольшое пространство между элементами */
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul.xfieldimagegallery li {
display: grid;
place-items: center;
color: white;
font-size: 3rem;
aspect-ratio: auto;
width: 100%;
flex-shrink: 0;
scroll-snap-align: start;
border-radius: 10px;
overflow: hidden;}
ul.xfieldimagegallery li img {
width: 100%;
height: auto;
object-fit: cover;
font-size: 0;
line-height: 0;
cursor: pointer;}
ul.xfieldimagegallery li:nth-child(odd) {
background-color: #f5f5f5;}
ul.xfieldimagegallery li:nth-child(even) {
background-color: #f5f5f5;}
/* Стилизация самого скроллбара */
ul.xfieldimagegallery::-webkit-scrollbar {
width: 10px; /* Ширина скроллбара */
height: 10px; /* Высота скроллбара для горизонтального скролла */
}
/* Стилизация дорожки скроллбара */
ul.xfieldimagegallery::-webkit-scrollbar-track {
background: #f5f5f5; /* Цвет фона дорожки */
border-radius: 10px; /* Скругление углов дорожки */
}
/* Стилизация ползунка скроллбара */
ul.xfieldimagegallery::-webkit-scrollbar-thumb {
background: #ccc; /* Цвет ползунка */
border-radius: 10px; /* Скругление углов ползунка */
}
/* Изменение цвета ползунка при наведении */
ul.xfieldimagegallery::-webkit-scrollbar-thumb:hover {
background: #888; /* Темный цвет ползунка при наведении */
}
.news-card {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #e2e8f1;
border-radius: 10px;
width: 690px;
box-sizing: border-box;
margin: 10px 0 0px 0;
padding: 10px 20px;
text-decoration: none; /* Убираем подчеркивание у ссылок */
color: inherit; /* Наследуем цвет текста от родителя */
transition: background-color 0.3s ease;
}
.news-card:hover {
background-color: #dce2eb; /* Цвет фона при наведении */
cursor: pointer; /* Изменение курсора на указатель */
}
.news-icon-box {
padding: 5px 5px 5px 0;
margin-right: 10px;
}
.news-icon {
width: 24px;
height: 24px;
}
.news-content {
flex-grow: 1;
}
.news-subtitle, .news-subtitle a {
font-size: 16px;
color: rgba(0,0,0,.8);
line-height: 15px;
font-weight: 500;
}
.update-box {
color: #627283;
font-weight: 500;
font-style: italic;
margin-top: 5px;
font-size: 14px;
}
.news-arrow-box {
padding: 5px;
margin-left: 10px;
display: flex;
align-items: center;
}
.news-arrow-svg {
fill: #333;
width: 24px;
height: 24px;
}
.news-arrow-list {
fill: #333;
width: 24px;
height: 24px;
overflow: visible;
margin: 0 0 0 45px;
}
/* Smooth fonts */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Placeholder style for the icon, replace with your actual icon */
.news-icon {
display: block;
}
.movie-card, .unibox-card {
background: #fff;
padding: 20px;
max-width: 690px; /* Максимальная ширина для десктопа */
margin: auto;
-webkit-box-shadow: 0 0 60px rgba(0,0,0,.1);
box-shadow: 0 0 60px rgba(0,0,0,.1);
border-radius: 30px;}
.unibox-card {
margin-top: 40px;}
.movie-title, .unibox-title {
font-size: 22px;
margin: 20px 0;}
.movie-meta, .unibox-meta {
display: flex;
align-items: center;
font-weight: bold;
margin-bottom: 10px;}
.movie-year, .movie-genre, .unibox-gl {
display: inline-block;
box-sizing: border-box;
font-size: 14px;
line-height: 28px;
font-weight: 550;
color: #4a5160;
height: 40px;
border-radius: 12px;
padding: 5px 14px 5.5px;
background-color: #eff2f7;
border: 0px;
margin: 0 5px 20px 0;}
.movie-info, .unibox-info {
margin: 0;
padding: 0;}
.movie-info-detail, .unibox-info-detail {
font-size: 14px;
line-height: 26px;
font-weight: 500;}
.movie-info-row, .unibox-info-row {
display: flex;
margin-bottom: 10px;
border-bottom: 1px solid #e7eaf1;
padding: 0 0 10px 0;}
.movie-info-row:last-child, .unibox-info-row:last-child {
border-bottom: none;}
.movie-info-title, .unibox-info-title {
min-width: 100px;
font-weight: 600;
font-size: 14px;
line-height: 26px;
color: #7f889b;}
/* Стили для hover-состояния, чтобы изменить цвет при наведении */
.trailer-button:hover {
background-color: #0056b3; /* Темно-синий цвет при наведении */
}
.menu-list {
list-style: none;
padding: 0;
margin: 0px;
}
.menu-list li {
font-size: 18px;
padding: 10px 0;
margin-bottom: 5px;
border-bottom: 1px solid #eff2f7;
display: flex;
align-items: center;
justify-content: space-between;}
.menu-list li:last-child {
border-bottom: none;
}
#custom-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: flex-start;
visibility: hidden;
opacity: 0;
z-index: 1020;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
#custom-popup.custom-show {
visibility: visible;
opacity: 1;
}
#custom-popup.custom-hide {
opacity: 0;
visibility: hidden; /* Эффект исчезновения перед скрытием */
}
.custom-popup-content {
background: #eff2f7;
padding: 60px 50px 20px;
border-radius: var(--radius-lg);
top: 30px;
bottom: 30px;
width: 500px;
max-height: 100vh;
height: calc(100vh - 60px);
text-align: center;
transform: translateY(-200%);
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
position: relative;
box-sizing: border-box; /* Include padding and border in width calculation */
}
#custom-popup.custom-show .custom-popup-content {
transform: translateY(0);
opacity: 1;
}
#custom-popup.custom-hide .custom-popup-content {
transform: translateY(-200%);
opacity: 0;
}
.close-btn {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-lg);
background-color: #fff;
border: none;
color: rgba(0, 0, 0, .8);
z-index: 1020;
text-align: center;
box-sizing: content-box;
background-image: url(/img/close_6C757D.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
cursor: pointer;
}
.additional-popup .back-button {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-lg);
background: #eff2f7;
border: none;
z-index: 1020;
text-align: center;
box-sizing: content-box;
background-image: url(/img/back.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
cursor: pointer;
}
.additional-popup .back-button:hover {
filter: brightness(90%);
}
.custom-hidden {
display: none;
}
/*логин*/
.custom-login-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.custom-logo {
height: 28px;
position: absolute;
top: 40px;
left: 50px;}
.login_form {
list-style-type: none;
padding: 0;
margin: 0;}
.login_input-btn {
position: relative;
margin-bottom: 18px;}
.login_input-btn:last-child {
margin-bottom: 10px;}
.login_input-btn input[type="text"],
.login_input-btn input[type="password"],
#fullname, #email, #altpass, #password1, #password2, #name, .timezoneselect, .twofactorselect {
width: 100%;
padding: 15px;
border-radius: 18px;
font-size: 20px;
height: 56px;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
background: #fff;
}
.login_input-btn input[type="text"],
.login_input-btn input[type="password"] {
border: 2px solid #333;
}
#fullname, #email, #altpass, #password1, #password2, #name, .timezoneselect, .twofactorselect {
border: 2px solid #d8dce6;
margin: 0 0 30px 0;
}
input[type="text"].textin {
width: 100%;
padding: 15px;
border: 2px solid #d8dce6;
border-radius: 18px;
font-size: 20px;
height: 56px;
margin: 15px 0;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
background: #fff;
}
/* CSS for changing placeholder color */
.login_input-btn input[type="text"]::placeholder,
.login_input-btn input[type="password"]::placeholder,
#fullname::placeholder, #email::placeholder, #name::placeholder {
color: #85889e; /* Change this color to your desired placeholder color */
opacity: 1; /* Ensure the color is not transparent */
}
/* Additional styles for different browsers */
.login_input-btn input[type="text"]:-ms-input-placeholder,
.login_input-btn input[type="password"]:-ms-input-placeholder,
#fullname:-ms-input-placeholder, #email:-ms-input-placeholder, #name:-ms-input-placeholder{
color: #85889e;
}
.login_input-btn input[type="text"]::-ms-input-placeholder,
.login_input-btn input[type="password"]::-ms-input-placeholder,
#fullname::-ms-input-placeholder, #email::-ms-input-placeholder, #name::-ms-input-placeholder {
color: #85889e;
}
.custom-login-btn, .bbcodes {
/* width: 100%;
height: 56px; */
padding: 15px 25px;
border: none;
border-radius: 18px;
font-size: 16px;
cursor: pointer;
text-decoration: none;
background-color: #fff500;
color: #333;
font-weight: 500;
}
.custom-pass-btn, .custom-id-btn {
display: inline-block;
width: 100%;
height: 56px;
line-height: 56px;
color: #333;
text-align: center;
text-decoration: none;
border-radius: 18px;
font-size: 16px;
font-weight: 600;
transition: background-color 0.3s ease; }
.custom-pass-btn {
background-color: #f0f1f5;}
.custom-id-btn {
border: 1px solid #d8dce6;}
.custom-id-btn:hover {
background-color: #f5f5f5;}
.custom-loginid-btn:hover {
background-color: #555; /* Цвет фона при наведении */
}
.custom-loginid-btn a {
background-color: #f0f1f5;
color: #333333;
}
.custom-login-btn:hover, .bbcodes:hover {
background-color: #E6E200;
}
.custom-pass-btn:hover {
background-color: #f2f3f5;}
.custom-login-btn:disabled {
background-color: #333333;
color:#fff;
cursor: not-allowed;
}
.login_form__foot {
display: flex;
justify-content: center;
margin-top: 10px;
}
.login_form_soc {
display: flex;
justify-content: center;
text-align: left;
color: rgba(0, 0, 0, .8);
font-size: 14px;
font-weight: 500;
flex-direction: column;
line-height: 18px;
font-weight: 600;
}
.login_form_soc span {
color: #85889e;
margin-top: 5px;
font-weight: 500;}
.email_button {
display: block;
width: 100%;
padding: 12px 0;
background: #1C1C1E;
color: #F2F3F4;
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
text-align: center;
cursor: pointer;
margin-top: 20px;}
.email_button:hover {
background-color: #2C2C2E;}
.login_form_soc_box {
background: #ffffff;
padding: 20px;
border-radius: 20px;
margin-top: 20px;}
.custom-social-login {
display: flex;
justify-content: center;
margin-top: 30px;
}
.custom-social-login a {
display: inline-block;
width: 52px;
height: 52px;
border-radius: 50%;
background-color: #ffffff;
margin: 0 5px;
overflow: hidden;
text-decoration: none;}
.custom-social-login a {
margin: 0 10px;
text-decoration: none;
color: #000;
}
.custom-social-login img {
width: 24px;
height: 24px;
margin-right: 5px;
}
.login-usl {
color: rgba(26, 43, 77, 0.6);
font-size: 14px;
margin-top: 20px;}
.login-usl a:hover {
text-decoration: underline;}
/*подсказка*/
.box.berrors.fix_grid, .box.berrors.fix_grid_yes {
position: fixed;
bottom: 30px;
right: 30px;
padding: 30px;
border-radius: 18px;
z-index: 10000;
opacity: 0;
transform: translate(100%, 0);
transition: transform 0.5s ease, opacity 0.5s ease;
max-width: 400px;
box-sizing: border-box;
}
.box.berrors.fix_grid {
background-color: #ffeaea;
color: #fa6c6c;
}
.box.berrors.fix_grid_yes {
background-color: #ceffd9;
color: #63c668;
}
.box.berrors.fix_grid2 {
margin-bottom: 20px;}
.box.berrors.fix_grid.show, .box.berrors.fix_grid_yes.show {
opacity: 1; /* Fully opaque */
transform: translate(0, 0); /* Move to position */
}
.box.berrors.fix_grid.hide, .box.berrors.fix_grid_yes.hide {
opacity: 0; /* Fully transparent */
transform: translate(100%, 0); /* Move off-screen */
}
.custom-close-btn, .custom-close-btn_yes {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
}
.custom-close-btn {
color: #fa6c6c;
}
.custom-close-btn_yes {
color: #63c668;
}
.notification-header {
font-weight: 600;
margin-bottom: 10px;
}
#tooltip2 > div.notification-header {
font-size: 24px;
margin-bottom: 20px;}
#tooltip2 > div.notification-body {
font-size: 16px;}
.notification-header2 {
width: 400px;}
.notification-body {
font-size: 14px;
width: 100%;
}
.custom-login-box {
margin-top: 30px;
width: 100%;
}
.avatar-box {
margin: 30px 0;
display: flex;
justify-content: center;}
.avatar-box-pm {
margin: 0 0 30px 0;
display: flex;
justify-content: center;}
.email-block {
margin: 30px 0 0;
font-size: 16px;
color: #85889E;
}
.profile-button {
display: inline-block;
width: 260px;
height: 56px;
line-height: 56px;
border: 2px solid #d8dce6;
border-radius: 18px;
text-decoration: none;
color: #1414CC;
font-size: 16px;
margin: 20px 0 0;
font-weight: 500;
transition: background-color 0.3s ease;}
.profile-button:hover {
background-color: #f5f5f5;
}
.menu-items {
text-align: left;
}
.menu-item {
display: flex;
align-items: center;
padding: 10px;
text-decoration: none;
color: #333;
font-weight: 500;
}
.menu-item:hover {
background-color: #F5F6F8;
border-radius:20px;}
.menu-icon {
width: 24px;
height: 24px;
margin-right: 10px;
}
.badge {
background-color: #d8dce6;
border-radius: 12px;
font-size: 14px;
margin-left: auto;
display: flex;
min-width: 24px;
min-height: 24px;
align-items: center;
justify-content: center;
}
.inner-container {
width: 1100px;
display: flex;
}
.left-panel {
width: 340px;
margin-right: 50px;
}
.banner {
width: 340px;
height: 200px; /* Adjust as needed */
background-color: #eef3ff;
border-radius: 16px;
}
.subscription-button {
display: flex;
align-items: center;
justify-content: start;
width: 340px;
padding: 10px 0;
margin-top: 20px;
background-color: #6875f5;
color: white;
border-radius: 28px;
text-decoration: none;
font-size: 16px;
}
.icon-background {
width: 30px;
height: 30px;
background-color: #edf3ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.icon-background-com {
width: 24px;
height: 24px;}
.icon-background {
margin: 0 15px 0 10px;
}
.icon-background-com {
margin: 0 10px 0 0;}
.iconpm {
width: 16px;
height: 16px;
}
.right-panel {
flex-grow: 1;
display: flex;
justify-content: center;
}
.content-container {
width: 600px;
}
.avatar-section {
display: flex;
align-items: center;
position: relative;
border-radius: 50%;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
.edit-avatar-button {
position: absolute;
bottom: 0;
right: 0;
width: 30px;
height: 30px;
background-color: #6975A9;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.edit-icon {
width: 24px;
height: 24px;
}
.name {
font-size: 24px;
margin-top: 40px;
text-align: center;
font-weight: 600;
}
.email {
font-size: 16px;
color: #85889e;
margin: 10px 0 30px;
text-align: center;
}
.upload-avatar {
background-color: #edf3ff;
border-radius: 32px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 35px 30px;
overflow: hidden;
position: relative;
margin: 0 0 30px 0;
}
.upload-text {
max-width: 380px;
}
.upload-title {
font-size: 18px;
margin: 0;
font-weight: 600;
}
.upload-subtitle {
font-size: 16px;
margin-top: 5px;
}
.upload-image img {
position: absolute;
bottom: 0;
right: 0;
width: 199px;
height: 116px;
}
.account-info {
margin-bottom: 20px;
}
.account-info-zag {
font-size: 20px;
margin-bottom: 15px;
font-weight: 600;
display: block;
}
.info-item {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #d8dce6;
}
.info-item:last-child {
border-bottom: none;
}
.info-icon {
width: 16px;
height: 16px;
}
/* Общие стили для табов */
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.edit-button {
display: inline-block;
padding: 0px 15px;
height: 56px;
line-height: 56px;
font-size: 16px;
margin: 0 0 20px 0;
color: white;
background-color: #333;
border: none;
border-radius: 18px;
cursor: pointer;
text-align: center;
text-decoration: none;
transition: background-color 0.3s ease;
}
.edit-button:hover {
background-color: #3d3d3d;}
.custom-avatar-container {
display: flex;
flex-direction: column;
align-items: start;
background-color: #F8F8F9;
padding: 35px 30px;
border-radius: 18px;
margin: 0 0 30px 0;
}
.avatar-upload-section {
display: flex;
align-items: center;
margin-bottom: 20px;
border-radius: 50%;
}
.custom-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 30px;
object-fit: cover;
object-position: center;
}
.upload-section {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.file-input {
display: none;
}
.file-label, .prover-label {
background-color: #f0f0f0;
color: #333;
border: none;
border-radius: 18px;
padding: 15px 20px;
cursor: pointer;
font-size: 14px;
margin-bottom: 5px;
display: inline-block;
transition: background-color 0.3s ease;
}
.file-label:hover, .prover-label:hover {
background-color: #e3e3e3;
}
.prover-label {
margin: 0 0 15px 0;}
.custom-file-info {
font-size: 12px;
color: #85889e;
}
.delete-section {
display: flex;
align-items: center;
}
.custom-switch {
position: relative;
display: inline-block;
width: 34px;
height: 20px;
margin-right: 10px;
}
.custom-switch input {
opacity: 0;
width: 0;
height: 0;
}
.custom-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
}
.custom-slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
.custom-switch input:checked + .custom-slider {
background-color: #2196F3;
}
.custom-switch input:checked + .custom-slider:before {
transform: translateX(14px);
}
.custom-delete-label {
font-size: 14px;
cursor: pointer;
}
.box-slider {
width: 100%;
margin: 0 0 30px 0;}
.file-name {
display: block;
margin-top: 5px;
font-size: 14px;
color: #aaaaaa;
}
#result-registration, #result-registration li {
list-style-type: none;
font-size: 14px;
margin: 0 0 15px 0;
}
.quote {
width: 100%;
position: relative;}
.quote::before{
content: "";
position: absolute;
top: 35px;
left: 25px;
width: 34px;
height: 34px;
opacity: .35; /* лёгкая, как на рефе */
background: no-repeat center/contain
url('data:image/svg+xml;utf8,\
');
}
.quote_body {
background-color: var(--secondary-bg-light);
padding: 90px 25px 30px;
border-radius: 18px;
font-weight: 500;
font-style: italic;
margin: 0 0 24px 0;}
.comment {width: 720px;}
.comments-section {
display: flex;
align-items: center;
}
.comments-text {
font-size: 24px;
font-weight: 700;
}
.comments-count {
font-size: 24px;
font-weight: 600;
color: grey;
padding: 0 0 0 10px;
}
.subscribe-button {
display: none; /*display: flex;*/
align-items: center;
background-color: #f0f0f0;
border: none;
border-radius: 20px;
padding: 10px 20px;
cursor: pointer;
}
.subscribe-icon {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px 0 0px;
display: none;
}
.subscribe-text {
font-size: 16px;
font-weight: 500;
display: none;
}
.comment-container {
display: flex;
align-items: flex-start;
margin: 40px 0 0 0;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
}
#section1 > div.comment > div.comment-container {
flex-wrap: nowrap!important;}
.comment-container-box {
display: flex;}
.avatar-com {
width: 50px;
height: 50px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
border-radius: 50%;
}
.avatar-com img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
textarea {
margin: 0;
padding: 0;
box-sizing: border-box;
}
textarea#comments, textarea[id^="comments"], textarea[id^="dleeditcomments"] {
resize: none;
background-color: var(--bg-surface-inverse);
flex: 1;
padding: 15px;
font-size: 16px;
border: 2px solid rgba(0,0,0,0.08);
border-radius: 18px;
outline: none;
transition: height 0.3s ease;
width: 100%;
box-sizing: border-box;
overflow-y: auto;
box-shadow: 0 2px 6px rgba(0,0,0,0.03);
transition: border-color .2s ease, box-shadow .2s ease, height .2s ease;
}
/* Placeholder без трекинга и потемнее */
textarea#comments::placeholder,
textarea[id^="comments"]::placeholder,
textarea[id^="dleeditcomments"]::placeholder {
color: #9aa0a6;
letter-spacing: normal;
font-weight: 500;
}
/* Фокус — мягкий */
textarea#comments:focus,
textarea[id^="comments"]:focus,
textarea[id^="dleeditcomments"]:focus {
border-color: rgba(0,0,0,0.18);
box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}
textarea#comments, textarea[id^="dleeditcomments"] {
height: 80px!important;}
#comments {
margin: 0px 0px 15px;}
textarea[id^="comments"] {
height: 80px!important;
margin: 15px 0 5px;}
textarea#comments:focus, textarea[id^="comments"]:focus, textarea[id^="dleeditcomments"]:focus {
height: 120px!important;
}
textarea#dle-promt-text {
resize: none;
padding: 15px;
font-size: 16px;
border: 1px solid #888;
border-radius: 18px;
margin: 15px 0;}
#dlefastreplycomments {
font-weight: 500;
font-size: 14px;
color: #888;
margin: 25px 0 0 0;}
#dlecomplaint {
height: auto!important;}
input[type="text"] {
padding: 15px;
font-size: 16px;
border: 2px solid #d8dce6;
border-radius: 18px;
margin: 15px 0;
width: inherit;
box-sizing: border-box;
width: 100%;}
.btn-com {
background-color: #f7f7f7;
color: #333;
border-radius: 18px;
padding: 15px 25px;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 500;
text-align: center;
display: none;
transition: background-color 0.3s ease;
}
.btn-com.active:hover {
background-color: #2f3cc6;
color: #fff;}
.btn-com.active {
background-color: #4253e6;
color: #fff;}
.textarea-focused + .btn-com {
display: inline-block;}
.margin20 {
margin: 0 0 20px 0;}
.margin60 {
margin: 0 0 60px 0;}
.margin40 {
margin: 0 0 40px 0;}
.comment-gost {
background-color: #f1f1f1;
padding: 20px;
border-radius:18px;}
.comment-gost a {
color: #1414c8;}
.post-box {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;}
.post-name, .comment-post {
width: 100%;
color: #333;
font-size: 16px;
box-sizing: border-box;}
.comment-post {
font-weight: 500;
line-height: 26px;
margin: 15px 0 0;}
.post-name {
font-weight: 800;
line-height: normal;}
.comment-date {
color: #888;
font-size: 14px;
font-weight: 500;
font-family: 'Manrope', Arial, sans-serif;
line-height: normal;
margin: 5px 0px;}
.com-box {
display: flex;
align-items: center;
flex-wrap: nowrap;
width: 100%;
padding: 10px 0 0 0;
justify-content: space-between;}
.reply a{
display: flex;
align-items: center;
color: #888;
font-size: 14px;
font-weight: 500;}
.comments-tree-list {
list-style: none;
margin: 0;
padding: 0;
}
.comments-tree-list .comments-tree-list {
list-style: none; /* или любой другой тип маркеров */
margin-left: 20px; /* отступ для вложенных списков */
padding-left: 20px;
}
.comment-rating {
display: inline-flex;
align-items: center;
font-family: 'Manrope', Arial, sans-serif;
line-height: 0;
}
.com-left {
gap: 20px;
display: flex;
align-items: center;}
.rating-button {
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: none;
background-color: transparent;
cursor: pointer;
opacity: 0.7;
padding: 0;
}
.rating-button:hover {
opacity: 1;
}
/* Замените содержимое svg на свои данные иконок */
.rating-like {
background-image: url("/img/like-comment.svg");
}
.rating-dislike {
background-image: url("/img/dislike-comment.svg");
}
.rating-value {
font-size: 14px;
margin: 0 10px;
}
.ratingtypeplusminus.ratingzero {
color: #888;
}
.ratingtypeplusminus.ratingplus {
color: #10C44C;
}
.ratingtypeplusminus.ratingminus {
color: #F91155;
}
#dlefastreplycomments b {
display: none;
}
.more-actions-wrap {
position: relative;
display: inline-block;
line-height: 0px;
}
.more-trigger-btn {
width: 24px;
height: 24px;
background: no-repeat center/contain url("/img/menu-meatballs-888.svg");
border: none;
cursor: pointer;
background-color: transparent;
}
.context-panel {
position: absolute;
top: 30px;
left: 0;
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
padding: 5px 0;
display: none;
min-width: 120px;
z-index: 1000;
}
.context-option {
display: block;
width: 100%;
text-align: left;
padding: 10px 15px;
border: none;
background: transparent;
cursor: pointer;
font-size: 16px;
color: #333;
font-family: 'Manrope', Arial, sans-serif;
font-weight: 500;
}
.context-option:hover {
background: #f0f0f0;
}
.ui-helper-clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden }
.ui-helper-clearfix { display: inline-block }
* html .ui-helper-clearfix { height: 1% }
.ui-helper-clearfix { display: block }
.ui-dialog {
text-align: left;
overflow: hidden;
padding: 0;
position: absolute;
width: 400px!important;
/* max-height: 300px!important; */
border-radius: 30px;
box-shadow: 0 8px 40px -10px rgba(0,0,0,0.3);
background-color: #fff;
background-clip: padding-box;
outline: none;
}
.ui-front { z-index: 1000; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
.ui-dialog-titlebar { padding: 25px 0 20px 0; position: relative; border-bottom: 1px solid #eff2f7; }
.ui-dialog-title {
font-weight: 700;
display: flex;
font-size: 1em;
justify-content: left;
padding-left: 20px;}
.ui-dialog-titlebar-close {
position: absolute;
top: 15px;
right: 15px;
width: 32px;
height: 32px!important;
font-size: 0!important;
padding: 0px!important;
display: flex;
align-items: center;
justify-content: center;
background-color: #f1f1f1!important;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
}
.ui-dialog-titlebar-close:hover {
background-color: #D1D8E3!important;
}
/* Скрываем текст и спаны внутри кнопки */
.ui-dialog-titlebar-close span {
display: none; /* Скрываем все вложенные элементы */
}
/* Добавляем SVG-иконку через псевдоэлемент */
.ui-dialog-titlebar-close::before {
content: ''; /* Обязательно для отображения псевдоэлемента */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background-color: transparent;
mask: url('/img/close_bold.svg') no-repeat center;
-webkit-mask: url('/img/close_bold.svg') no-repeat center;
mask-size: contain;
-webkit-mask-size: contain;
background-color: #8D99A7;
}
.ui-button {
border: 0 none;
display: inline-block;
vertical-align: middle;
cursor: pointer;
height: 40px;
border-radius: 15px;
outline: none;
color: #fff;
padding: 9px 30px;
font-size: 14px;
text-decoration: none !important;
background-color: #95c00e;
box-sizing: border-box;
}
.ui-dialog-buttonset button:first-child {
background-color: #f0f0f0; /* Тусклый цвет для кнопки "Нет" */
color: #333; /* Цвет текста */
transition: background-color 0.3s ease;
}
.ui-dialog-buttonset button:first-child:hover, .cancelchanges:hover {
background-color: #e3e3e3; /* Изменение цвета при наведении для кнопки "Нет" */
}
.ui-dialog-buttonset button:last-child {
background-color: #4253e6; /* Яркий цвет для кнопки "Да" */
color: #fff; /* Цвет текста */
transition: background-color 0.3s ease;
}
.ui-dialog-buttonset button:last-child:hover, .applychanges:hover {
background-color: #2f3cc6; /* Изменение цвета при наведении для кнопки "Да" */
}
.ui-dialog-content {
padding: 20px;
text-align: left;
font-size: 14px;
color: #333;
line-height: 1.5;
font-weight: 700;}
.ui-dialog-buttonset, .save-buttons {
display: flex;
padding: 0 0 20px;
gap: 15px;}
.save-buttons {
justify-content: flex-end;}
.ui-dialog-buttonset {
justify-content: center;}
.applychanges, .cancelchanges {
display: inline-block;
vertical-align: middle;
padding: 15px 25px;
border: none;
border-radius: 18px;
font-size: 14px;
cursor: pointer;
text-decoration: none;
background-color: #4253e6;
color: #fff;}
.applychanges {
background-color: #4253e6;
color: #fff;}
.cancelchanges {
background-color: #f0f0f0;
color: #333;}
/*--- AJAX LOADER ---*/
#loading-layer {
color: #65abf8;
font-size: 20px;
margin: 100px auto;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load4 1.3s infinite linear;
animation: load4 1.3s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@-webkit-keyframes load4 {
0%,
100% {
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
@keyframes load4 {
0%,
100% {
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
.mass_comments_action {
display: flex;
align-items: center;
justify-content: space-between;
margin: 50px 0 0 0;
background: #1b202b;
border-radius: 18px;
padding: 10px 15px;
color: #eff2f7;
font-size: 14px;
line-height: 20px;
font-weight: 500;}
.mass_comments_action input[type="submit"] {
font-size: 14px;
background: #4253e6;
color: #eff2f7;
padding: 10px 15px;
width: 100px;
height: 40px;
border-radius: 18px;}
#dle-comments-list > div.mass_comments_action > select {
height: 40px;
border-radius: 18px;
width: 50%;
}
a.comment-button, .rate_like, .cat-button a, .fav_btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 15px;
min-width: 54px;
height: 50px;
border: 2px solid var(--bg-page);
background-image: unset;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
color: var(--text-secondary);
transition: background-color 0.3s ease, color 0.3s ease;}
.rate_like, .fav_btn {
position: relative;}
.fav_btn a {
position: absolute;
top: 0;
right: 0px;
width: 100%;
height:100%;}
a.comment-button, .rate_like, .cat-button a, .fav_btn {
box-sizing: border-box;}
a.comment-button:hover, .rate_like:hover, .cat-button a:hover, .fav_btn:hover {
background: var(--bg-page);}
a.comment-button img, .rate_like img{
margin-right: 8px;
width: 24px!important;
height: 24px;
border-radius: 0px;}
.fav_btn img {
width: 24px!important;
height: 24px;
border-radius: 0px;}
.rate_like a, .rate_like span, .fav_btn a {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
font-size: 16px;
color: #6c757d;
text-decoration: none;
background-image: unset;}
.header-container {
display: flex;
justify-content: space-between;
align-items: flex-start; /* Выравнивание элементов по верху */
font-size: 13px; /* Общий размер шрифта */
position: relative;
padding: 10px 0; /* Добавьте отступ, чтобы разместить линию */}
.header-text {
border-radius: 12px;
border: 1px solid rgba(26, 43, 77, 0.1);
padding: 10px;}
.spoiler-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;}
.spoiler-text {
/* Добавьте стили для текста "Спойлер", если нужно */}
.spoiler-line {
position: absolute;
top: 16px;
right: 10px;
left: auto;
transform: translateY(100%);
width: 54px;
display: ruby;}
.spoiler-line img {
width: 100%;
height: auto;}
.format-mov {
position: absolute;
top: 116px;
left: 10px;
padding: 10px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-weight: 600;
font-size: 13px;}
.hbox {
display: flex;
gap: 5px}
.box-set, .box-closed {
border-radius: 12px;
background: #f7f7f7;
border: 1px solid #f7f7f7;
color: rgba(122, 69, 229, 1);
font-weight: 600;
font-size: 13px;
z-index: 1;}
.box-set {
padding: 10px;}
.box-closed {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
}
.box-closed img {
width: 20px;
height: auto;}
.buttons-more {
display: flex;
gap: 10px;}
.custom-container {
display: flex;
border-radius: 20px;
box-sizing: border-box;
gap: 20px;
}
.custom-item {
display: flex;
background-color: white;
border-radius: 20px;
text-decoration: none;
color: black;
flex-direction: column;
padding: 20px;
min-width: 120px;
background: linear-gradient(220deg, #F5F7FA 0%, #EBF7FF 100%);
}
.custom-item:hover img {
transform: scale(1.1);}
.custom-item img {
border-radius: 50%;
margin-bottom: 20px;
width: 80px;
height: 80px;
transition: transform 0.3s ease;
}
.custom-item span {
font-size: 16px;
font-weight: 700;
}
a.donate-b {
display: flex;
align-items: center;
background-color: #e0e7ff;
border: none;
border-radius: 10px;
padding: 6px 10px;
cursor: pointer;
font-size: 13px;
color: #6366f1;
margin-top: 10px;
background-size: 100% 0px;
line-height: 13px;
transition: background-color 0.3s ease;}
a.donate-b:hover {
background-color: #d1d8ff;}
.donate-b img {
width: 24px;
height: 24px;
margin-right: 5px;}
/* Стилизация кнопки ai */
#speakButton {
background-color: #f0f4ff;
border: 1px solid #c6d0f5;
border-radius: 20px;
padding: 10px 20px 10px 10px;
font-size: 16px;
color: #6b7db3;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
#speakButton:hover {
background-color: #e0e7ff;
}
#speakButton img {
width: 24px;
height: 24px;
}
.container-dostup {
margin-top: 40px;
padding: 40px 30px;
background: #a4dac2;
border-radius: 20px;
box-sizing: border-box;
line-height: normal;}
.header-dostup {
margin-bottom: 35px;}
.header-dostup h4 {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #000;}
.header-dostup button {
background-color: #FFD700;
border: none;
padding: 15px 20px;
font-family: inherit;
font-weight: 500;
font-size: 13px;
color: #333;
cursor: pointer;
border-radius: 12px;
margin-top: 20px;
transition: background-color 0.3s ease;}
.header-dostup button:hover {
background-color: #FFC300;
color: #000;}
.table-container {
margin-top: 0px;}
.row-dostup {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-radius: 12px;
flex-wrap: wrap;}
.row-dostup.even {
background-color: #FFFFFF;
margin-bottom: 10px;
transition: background-color 0.3s ease, color 0.3s ease;}
.row-dostup.odd {
background-color: #FFFFFF;
margin-bottom: 10px;
transition: background-color 0.3s ease, color 0.3s ease;}
.row-dostup.even:hover, .row-dostup.odd:hover {
background-color: #FAFBFD;}
.icon-title-container {
display: flex;
align-items: center;
width: 80%;}
.icon-dostup {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 10px;
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
}
.icon-dostup.open {
background-color: #E5F5F2;
background-image: url('/img/unlock_1.svg');
}
.icon-dostup.closed {
background-color: #EAF2FB;
background-image: url('/img/lock_1.svg');
}
.chapter-title {
flex-grow: 1;
display: flex;
align-items: center;
font-size: 13px;
color: #2f3747;
font-weight: 600;
line-height: 18px;}
.chapter-title a {
color: #333;
text-decoration: none;
transition: background-color 0.3s ease;}
.chapter-title a:hover {
color: rgb(20, 20, 204);}
.status-dostup {
font-weight: 500;
border-radius: 10px;
padding: 12px 15px;
min-width: 84px;
text-align: center;
font-size: 13px;
box-sizing: border-box;}
.status-dostup.open {
background-color: #E5F5F2;
color: #4DA17C;
}
.status-dostup.closed {
background-color: #EAF2FB;
color: #4292F0;
}
.pagination-dostup {
text-align: center;
margin-top: 20px;
display: flex;
gap: 10px;
justify-content: flex-end;
}
.pagination-dostup button {
border: none;
font-size: 13px;
cursor: pointer;
border-radius: 5px;
display: flex;
align-items: center;
border-radius: 12px;}
#prev {
padding: 10px 15px 10px 5px;
background-color: #f2f3f5;
color: #6c757d;}
#next {
padding: 10px 5px 10px 15px;
background-color: #f2f3f5;
color: #6c757d;}
#prev:hover, #next:hover {
background-color: #e2e6ea;}
.pagination-dostup button:disabled {
background-color: #aaa;
cursor: not-allowed;}
.pagination-dostup button svg {
margin: 0 5px;}
.fade-out {
opacity: 0;}
.fade-in {
opacity: 1;}
.ads {
width: 300px;
height: 250px;}
/* Основной контейнер */
.support-block {
display: flex;
align-items: center;
padding: 30px 30px 30px 40px;
border-radius: 20px;
background: linear-gradient(330deg, #6b6b6b, #4a4a4a, #2f2f2f, #1a1a1a, #0e0e0e);
background-size: 300% 300%; /* Увеличиваем размер фона для плавного движения */
-webkit-animation: AnimationBlog 6s ease infinite; /* Уменьшена продолжительность для плавного эффекта */
-moz-animation: AnimationBlog 6s ease infinite;
-o-animation: AnimationBlog 6s ease infinite;
animation: AnimationBlog 6s ease infinite;
color: white;
margin: 50px auto 0;
}
/* Анимация: перемещение от верхнего левого угла через нижнюю сторону до верхнего правого */
@-webkit-keyframes AnimationBlog {
0% { background-position: 0% 0%; } /* Начинаем с верхнего левого угла */
50% { background-position: 100% 100%; } /* Смещаемся через нижнюю сторону */
100% { background-position: 0% 0%; } /* Возвращаемся к верхнему левому углу */
}
@-moz-keyframes AnimationBlog {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
@-o-keyframes AnimationBlog {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
@keyframes AnimationBlog {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
/* Иконка */
.iconblog {
margin-right: 15px;
}
.iconblog img {
width: 62px; /* Размер иконки */
height: auto;
}
/* Текстовый блок */
.text-content {
display: flex;
flex-direction: column;
margin-right: 40px;
margin-left: 24px;}
.text-content h2 {
font-size: 24px;
margin: 0;
}
.text-content p {
font-size: 16px;
line-height: 20px;
font-weight: 500;
color: #cccccc;
}
/* Кнопка */
.blog-button {
margin-left: auto;
appearance: none;
padding: 15px 30px;
background-color: #fff;
color: #333;
text-decoration: none;
font-weight: 600;
font-size: 16px;
line-height: 20px;
border-radius: 20px;
border: none;
display: inline-block;
text-align: center;
cursor: pointer;
transition: background-color 0.3s;
}
.blog-button:hover {
background-color: #f0f0f0;}
/* Основные стили Bottom Sheet */
.bottom-sheet {
position: fixed;
top: 30px;
bottom: 30px;
left: 0;
width: 100%;
/* height: 100%; */
display: flex;
opacity: 0;
pointer-events: none;
align-items: center;
flex-direction: column;
justify-content: flex-end;
transition: opacity 0.3s ease;
z-index: 1100;
}
.bottom-sheet.show {
opacity: 1;
pointer-events: auto;
z-index: 1010;}
.bottom-sheet .sheet-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(44, 44, 46, 0.5);
backdrop-filter: blur(0px);
transition: backdrop-filter 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Плавный переход для появления */
z-index: 999;}
.bottom-sheet.show .sheet-overlay {
backdrop-filter: blur(8px);
opacity: 1;}
.bottom-sheet:not(.show) .sheet-overlay {
backdrop-filter: blur(0px); /* Убираем размытие мгновенно */
opacity: 0; /* Элемент мгновенно невидим */
transition: none; /* Убираем плавный переход при скрытии */
}
.bottom-sheet .content {
width: 500px;
box-sizing: border-box;
position: relative;
max-height: 95vh;
height: 95vh;
transform: translateY(100%);
border-radius: 20px;
transition: transform 0.3s ease;
z-index: 1001;
overflow-y: auto;
}
.bottom-sheet .body {
height: 100%;
overflow-y: auto;
scrollbar-width: none;
}
.bottom-sheet .body::-webkit-scrollbar {
width: 0;
}
.bottom-background-black {
background: #070707;}
.bottom-background-white {
background: #F5F7FA;}
.bottom-sheet.show .content {
transform: translateY(0%);
}
/* Иконка для перетаскивания */
.drag-icon span {
height: 4px;
width: 40px;
background: #C7D0E1;
border-radius: 50px;
}
/* Кнопка закрытия */
.close-button-black, .close-button-white, .close-button-white-2 {
position: absolute;
top: 15px;
right: 15px;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
z-index: 1000;
}
.close-button-black {
background-color: #434345;
background-image: url('/img/close_bold.svg');}
.close-button-black:hover {
background-color: #4b4b4d;
}
.close-button-white {
background-color: #EAEEF4;
background-image: url('/img/close_bold_white.svg');}
.close-button-white:hover {
background-color: #D1D8E3;
}
.close-button-white-2 {
background-color: #fff;
background-image: url('/img/close_bold_white.svg');}
.close-button-white-2:hover {
background-color: #D1D8E3;
}
/* Центровка изображения канала */
.blog-channel-icon {
display: block;
margin: 10px auto;
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 15px;
background: #2c2c2e;
border: 2px solid #2c2c2e;
box-shadow: 0 0 0 2px #AFF217;}
/* Заголовок блока */
.blog-title {
text-align: center;
color: #F6F7F8;
font-size: 22px;
margin: 30px 0;
font-weight: 600;}
/* Стили для списка поддержки */
.support-list {
list-style: none;
padding: 0;
margin: 0;
}
.support-item {
display: flex;
align-items: center;
margin-bottom: 15px !important;}
.icon-circle {
width: 40px;
height: 40px;
background: #434345;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
.icon_b {
width: 20px;
height: 20px;
}
.support-text h3 {
font-size: 16px;
margin: 0;
color: #F6F7F8;
font-weight: 600;
}
.support-text p {
font-size: 14px;
margin: 0;
color: #9299A2;
}
/* Кнопка отправки доната */
.support-button {
display: block;
width: 100%;
padding: 12px 0;
background-color: white;
color: #333;
border: none;
border-radius: 20px;
font-size: 16px;
font-weight: 600;
text-align: center;
cursor: pointer;
margin-top: 30px;}
.support-button:hover {
background-color: #ddd;}
.blog_a {
color: #9299A2;
text-decoration: underline}
.blog_a:hover {color: #428BF9;}
.sheet-content {
display: none; /* Скрываем по умолчанию */
}
.sheet-content.active {
display: block; /* Показываем только активный блок */
}
#new-articles-text {
font-weight: bold;
margin: 0;
display: block;
font-size: 14px;
line-height: 1.2;
}
.floating-menu-mob {
display: flex;
justify-content: space-between;
align-items: center;
width: fit-content;
margin: 0 auto;
z-index: 1000;
transition: opacity 0.3s ease, visibility 0.3s ease;
padding: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 100px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.5);
overflow: hidden;
}
.floating-menu-mob.hidden {
opacity: 0;
visibility: hidden;
}
.menu-item-mob {
pointer-events: auto;
display: flex;
justify-content: center;
align-items: center;
background-color: #F5F7FA;
border-radius: 50%;
width: 50px;
height: 50px;
transition: transform 0.3s ease, background-color 0.3s ease;
position: relative;
}
.menu-item-mob:hover {
background-color: #ECEFF3;
}
.menu-icon-mob {
width: 32px;
height: 32px;
}
.menu-icon-mob path {
fill: #005BFF;
}
/* Центральная группа иконок */
.menu-group-mob {
display: flex;
gap: 10px;
background-color: #F5F7FA;
border-radius: 50px;
margin: 0 25px;
}
/* Стили для дополнительного поп-апа */
.additional-popup {
position: fixed;
top: 0px;
left: 50%;
transform: translateX(-50%);
z-index: 2000;
background: #fff;
padding: 60px 50px 20px;
border-radius: 20px;
width: 500px;
height: calc(100vh - 60px);
opacity: 0;
transition: opacity 0.3s ease;
box-sizing: border-box;
}
.recently-viewed {
margin: 20px 0;
}
.recently-viewed-title {
font-size: 18px;
font-weight: 800;
color: #070707;
margin: 0;
line-height: 1.2;
}
.custom-login-box h2 {
font-size: 24px;
margin: 30px 0 25px 0;}
.additional-popup.custom-show {
opacity: 1;
}
.additional-popup.custom-hidden {
display: none;
}
.comments-section-menu {
padding: 20px;
border-radius: 30px;
margin-bottom: 10px;
}
.comments-section-menu:last-of-type {
margin-bottom: 0;
}
.comments-section-menu-black {
background: #1D2024;}
.comments-section-menu-white {
background: #fff;}
.comments-title {
font-size: 18px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
height: 64px;
margin-block-start: 0;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.comments-title-black {
background: #1D2024;
color: #F6F7F8;}
.comments-title-white {
background: #fff;
color: #070707;}
.comment-box {
padding: 20px 20px 10px;
border-radius: 15px;
}
.comment-box-black {
background-color: #17283F;
}
.comment-box-white {
background-color: #FFFAE8;
}
.leave-comment-title {
font-size: 16px;
font-weight: 700;
margin-block-start: 0;
margin-block-end: 0;
}
.leave-comment-title-black {
color: #FFFFFF;
}
.leave-comment-title-white {
color: #070707;
}
.leave-comment-subtitle {
font-size: 14px;
font-weight: 600;
margin-top: 7px;
margin-block-end: 0;
}
.leave-comment-subtitle-black {
color: #AAABAC;
}
.leave-comment-subtitle-white {
color: #627283;
}
.choose-article-link {
font-size: 14px;
font-weight: 600;
text-decoration: none;
display: inline-block;
padding: 10px 0;
}
.choose-article-link-black {
color: #0096FF;
}
.choose-article-link-white {
color: #005BFF;
}
.choose-article-link:hover {
text-decoration: none;
}
.comment-date-chat {
font-size: 14px;
font-weight: 600;
margin-top: 20px;
display: inline-block;
background: #f6f7fb;
padding: 8px 10px;
text-align: center;
border-radius: 15px;
}
.date-list-box {
display: flex;
flex-direction: column;
align-items: center; }
.comment-date-chat-black {
color: #F6F7F8;}
.comment-date-chat-white {
color: #667685;}
.comment-card {
padding: 20px;
background-color: #2A2D31;
border-radius: 15px 15px 8px 8px;
margin-top: 20px;
}
.comment-card-black {
background-color: #2A2D31;
}
.comment-card-white {
background-color: #F5F7FA;
}
.comment-header {
display: flex;
align-items: center;
}
.comment-avatar img{
width: 60px;
height: 60px;
background-color: #555;
border-radius: 50%;
margin-right: 15px;
}
.comment-info {
display: flex;
flex-direction: column;
}
.comment-related, .comment-article {
font-size: 14px;
font-weight: 500;
}
.comment-related-black, .comment-article-black {
color: #AAABAC;
}
.comment-related-white, .comment-article-white {
color: #627283;
}
.comment-related {
margin: 0;
}
.comment-article {
margin: 5px 0 0 0;
}
.comment-content, .card-content {
margin: 20px 0 0 0;
font-size: 14px;
line-height: 1.5;
border-radius: 15px;
}
.comment-content-black, .card-content-black {
color: #F6F7F8;
}
.comment-content-white, .card-content-white {
color: #070707;
}
.comment-content {
padding: 15px;
font-weight: 600;
}
.comment-content-black {
border: 2px solid #1D2024;
}
.comment-content-white {
border: 2px solid #fff;
background: #fff;
}
.card-content {
padding: 15px 20px;
border: 2px solid #2A2D31;}
.go-to-article {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
margin-top: 3px;
padding: 12px;
text-decoration: none;
border-radius: 8px 8px 15px 15px;
transition: background-color 0.3s ease;
width: 100%;
box-sizing: border-box;
}
.go-to-article-black {
background-color: #2A2D31;
color: #ffffff;
--arrow-icon: url('/img/st_ss.svg'); /* Стрелка для чёрного фона */
}
.go-to-article-blue {
background: var(--primary);
color: var(--text-inverse);
--arrow-icon: url('/img/st_ss.svg'); /* Стрелка для синего фона */
}
.go-to-article-white {
background-color: #EBF7FF;
color: #005BFF;
--arrow-icon: url('/img/st_ss_blue.svg'); /* Стрелка для белого фона */
}
.go-to-article-text {
flex: 1;
text-align: center;
}
.go-to-article-icon {
position: absolute;
background-image: var(--arrow-icon);
background-repeat: no-repeat;
background-size: contain;
right: 10px;
width: 10px;
height: 10px;
fill: #ffffff;
transition: transform 0.3s ease;
top: 10px;
}
.go-to-article:hover .go-to-article-icon {
transform: translateX(4px); /* Анимация иконки при наведении */
}
.card-container {
position: relative;
height: 120px;
background-color: #2A2D31;
border-radius: 15px;
display: flex;
align-items: center; /* Центрируем содержимое по вертикали */
justify-content: center; /* Центрируем содержимое по горизонтали */
padding: 20px;
box-sizing: border-box;
}
.card-icon-top-right {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background: #070707;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.card-icon-top-right img {
width: 60%;
height: 60%;
object-fit: contain;
}
.card-logo {
position: absolute; /* Абсолютное позиционирование для логотипа */
top: 60px;
left: 50%;
transform: translate(-50%);
width: 80px; /* Ширина логотипа */
height: 80px; /* Высота логотипа */
border-radius: 50%; /* Закругляем логотип до круга */
background-color: #2A2D31; /* Цвет фона для логотипа */
border: 3px solid #00ff00; /* Зеленая обводка */
display: flex;
align-items: center;
justify-content: center;
}
.card-logo img, .social-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.card-title {
font-size: 16px;
font-weight: 600;
color: #FFFFFF;
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.soc-card {
padding: 20px;
background-color: #2A2D31;
border-radius: 15px;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.social-icon {
width: 50px; /* Размер круга */
height: 50px;
border-radius: 50%; /* Круглый контейнер */
background-color: #4b4b4d; /* Цвет фона кружка */
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.social-icon:hover {
transform: scale(1.1); /* Увеличение при наведении */
}
.goal-container {
background-color: #17283F;
padding: 20px;
border-radius: 15px 15px 8px 8px;
position: relative;
}
.goal-header {
font-size: 16px;
font-weight: 600;
color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
position: relative;
}
.goal-icon {
position: absolute;
top: 20px;
right: 0;
width: 40px;
height: 40px;
}
.goal-info {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.goal-info-item {
flex: 1;
padding: 10px 0 15px 0;
border: 2px solid #061932;
border-radius: 10px;
text-align: center;
color: #ffffff;
}
.goal-info-item p {
margin: 0;
font-size: 14px;
font-weight: 600;
color: #737E8B;
margin-block-start: 0;
margin-block-end: 0;
}
.goal-info-item h3 {
margin: 5px 0 0;
font-size: 16px;
font-weight: 600;
margin-block-start: 0;
margin-block-end: 0;
}
.progress-bar-container {
width: 100%;
height: 10px;
background-color: #737E8B;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.progress-bar {
height: 100%;
background-color: #AFF218;
border-radius: 10px;
transition: width 0.5s ease-in-out;
}
.circle-container {
position: relative;
width: 100%;
height: 280px;}
.circle {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
filter: blur(60px);
}
.circle.one {
top: 40%;
left: 35%;
background: #c68563;}
.circle.two {
top: 60%;
right: 30%;
background: #16a6d1;}
.rotating-icon {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
transform-origin: center;
animation: rotateInfinite infinite ease-in-out;
}
.ring-one {
animation-duration: 20s; /* Вращение за 20 секунд */
animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
}
.ring-two {
animation-duration: 25s; /* Вращение за 25 секунд */
animation-direction: reverse;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.ring-three {
animation-duration: 18s; /* Вращение за 18 секунд, немного быстрее */
animation-direction: alternate; /* Чередование направления */
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
opacity: 0.8; /* Немного прозрачности для визуального контраста */
}
@keyframes rotateInfinite {
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
filter: hue-rotate(0deg) brightness(1);
}
50% {
transform: translate(-50%, -50%) rotate(180deg) scale(1.12);
filter: hue-rotate(180deg) brightness(1.1);
}
100% {
transform: translate(-50%, -50%) rotate(360deg) scale(1);
filter: hue-rotate(360deg) brightness(1);
}
}
.circle-text {
position: absolute;
bottom: 0px;
left: 50%;
transform: translate(-50%);
font-size: 20px;
color: #ffffff;
text-align: center;
font-weight: 600;
}
.ai-section-text {
padding: 20px;
}
.user-profile {
display: flex;
align-items: center;
text-decoration: none; /* Убираем подчеркивание текста */
transition: background-color 0.3s ease; /* Эффект при наведении */
}
.user-profile:hover {
background-color: #f5f5f5; /* Цвет фона при наведении */
}
.user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #c4c4c4; /* Цвет фона аватара */
margin-right: 10px;
flex-shrink: 0; /* Запрет на сжатие аватара */
}
.user-info {
display: flex;
flex-direction: column;
}
.user-name {
font-size: 16px;
font-weight: 700;
color: #070707;
}
.user-settings-link {
font-size: 14px;
color: #627283;
font-weight: 700;
margin-top: 3px;
}
/* Контейнер карточек */
.custom-cards {
display: flex;
justify-content: space-between; /* Равномерное размещение карточек */
gap: 10px; /* Расстояние между карточками */
width: 100%; /* Полная ширина родителя */
box-sizing: border-box;
}
/* Карточка */
.custom-card {
display: flex;
flex-direction: column;
align-items: flex-start;
background: #F5F7FA;
border-radius: 12px;
text-decoration: none;
padding: 15px;
margin-top: 10px;
flex: 1;
max-width: 300px;
transition: transform 0.3s ease;
}
.custom-card:hover {
transform: scale(1.05); /* Увеличение при наведении */
}
/* Иконка */
.custom-icon {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 6px;
}
.custom-icon svg {
width: 100%;
height: 100%;
}
/* Название */
.custom-title {
font-size: 14px;
font-weight: 700;
text-align: center;
margin-bottom: 2px;
color: #070707;
}
/* Подзаголовок */
.custom-subtitle, .com-subtitle {
font-size: 16px;
color: #627283;
font-weight: 600;
text-align: center;
}
.comment-progress {
background-color: #EBF7FF;
border-radius: 12px;
padding: 15px;
width: 100%;
box-sizing: border-box;
margin-top: 20px;
}
.comment-text {
margin-bottom: 10px;
}
.comment-title {
font-size: 16px;
color: #070707;
font-weight: 700;
margin-bottom: 5px;
}
.comment-subtitle {
font-size: 14px;
color: #5E7285;
font-weight: 600;
}
.progress-bar2 {
background-color: #DCE3ED;
border-radius: 10px;
height: 10px;
position: relative;
overflow: hidden;
}
.progress-bar-fill {
background-color: #10C44C;
height: 100%;
width: 0%; /* Изначально заполнение 0% */
border-radius: 10px;
transition: width 0.3s ease;
}
.notice-menu, .notice-menu-blue {
display: flex;
align-items: center;
padding: 20px;
border-radius: 15px;
margin: 0px auto;
}
.notice-menu {
background-color: #FEF3F1;
}
.notice-menu-blue {
background-color: #EBF7FF;
}
.notice-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
margin-right: 15px;
}
.notice-icon img {
width: 24px; /* Размер самой иконки */
height: 24px;
}
.notice-content {
display: flex;
flex-direction: column;
}
.notice-title {
font-size: 16px;
font-weight: 700;
color: #070707;
margin-block-start: 0;
margin-block-end: 0;
}
.notice-text {
font-size: 14px;
font-weight: 600;
color: #5E7285;
margin-top: 7px;
margin-block-end: 0;
}
/* DLE */
.ui-dialog-buttonset button.ui-button-delete {
background-color: #f44336;
border-color: #f44336;
color: #fff;
text-shadow: 1px 1px 2px rgba(51, 51, 51, .5);
}
.ui-dialog-buttonset button.ui-button-delete:hover {
background-color: #db3a2f;
border-color: #db3a2f;
color: #fff;
text-shadow: 1px 1px 2px rgba(51, 51, 51, .5);
}
.form-check-label {
cursor: pointer;
}
.form-check-label span {
margin-left: 10px;
margin-bottom: 15px;
display: inline-block;}
.form-check-input:checked[type=checkbox], input[type=radio]:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23005BFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23005BFF'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox], input[type=radio] {
border-radius: .25rem;
}
.form-check-input[type=radio] {
border-radius: 50%;
}
.fixed-bottom-menu {
pointer-events: none;
position: sticky;
bottom: 10px;
left: 0;
right: 0;
z-index: 1000;
text-align: center;
height: 60px;
display: flex;
align-items: center;
justify-content: center;}
/* Контейнер с темно-синим фоном */
.dark-blue-container-box {
padding: 0 20px;
margin-bottom: 10px;}
.dark-blue-container {
background-color: #061932; /* Темно-синий цвет */
width: 100%; /* Занимает всю ширину окна */
height: 130px; /* Занимает всю высоту окна */
display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */
border-radius: 15px 15px 8px 8px;
}
/* Контейнер для Lottie-анимации */
#lottie-container {
width: 120px; /* Можно менять размер */
height: 120px; /* Зависит от анимации */
}
/* Основные стили карточки фильма */
.movie-card_box {
display: flex;
flex-direction: row;
margin: 50px 0px;
}
.movie-card_box__section {
display: flex;
justify-content: center;
align-items: flex-start;
display: none;
}
.movie-card_box__image-section {
position: relative;
background: var(--primary);
border-radius: var(--radius-lg-2);
overflow: hidden;
}
.movie-card_box__poster {
width: 220px;
height: auto;
display: block;
border-radius: var(--radius-lg-2);
}
.movie-card_box__info-section {
width: 100%;
padding: 35px 25px;
background: var(--bg-surface-inverse);
border-radius: var(--radius-lg-2);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 35px;
}
.movie-card_box__header {
display: flex;
justify-content: space-between;
align-items: center;
/*margin-bottom: 15px;*/
}
.movie-card_box__rank {
font-size: 22px;
font-weight: 800;
}
.movie-card_box__year {
display: inline-block;
box-sizing: border-box;
font-size: 13px;
line-height: 1;
font-weight: 600;
border-radius: 12px;
padding: 5px 14px 5.5px;
background: var(--bg-surface);
border: 0px;
padding: 8px 10px;
}
.movie-card_box__actors {
display: flex;
flex-direction: column;
gap:10px;
}
.movie-card_box__actors-title {
font-size: 17px;
font-weight: 600;
}
.movie-card_box__actors-list {
font-size: 17px;
font-weight: 500;
line-height: 1.5;
}
.movie-card_box__details {
display: flex;
flex-direction: column;
background: var(--info-bg);
border-radius: 20px;
padding: 35px 20px;
line-height: 1.5;
}
.movie-card_box__detail {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--info-br);
padding: 10px 0;
}
.movie-card_box__detail:first-child {
padding-top: 0;
}
.movie-card_box__detail:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.movie-card_box__detail-title {
font-weight: 600;
font-size: 17px;
min-width: 120px;
color: var(--info-fg);
}
.movie-card_box__detail-content {
font-weight: 500;
font-size: 17px;
flex: 1;
color: var(--info-fg);
}
/* Скрываем реальный чекбокс */
.info-popup {
pointer-events: none;
position: fixed;
bottom: 80px;
opacity: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 15px;
border-radius: 20px;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1000;
}
.info-popup.visible {
opacity: 1;
visibility: visible;
}
.play-pause-toggle {
display: flex;
justify-content: center;
align-items: center;
background-color: #F5F7FA;
border-radius: 50%;
width: 50px;
height: 50px;
transition: transform 0.3s ease, background-color 0.3s ease;
position: relative;
cursor: pointer;
}
.play-pause-toggle:hover {
background-color: #ECEFF3;
}
.toggle-checkbox {
display: none;
}
/* Основной стиль для иконки */
.icon-ai {
display: inline-block;
width: 32px;
height: 32px;
background-image: url('/img/sprite-play-pause.svg');
background-repeat: no-repeat;
background-size: 64px 32px; /* Если в спрайте 2 иконки по горизонтали */
background-position: 0 0; /* Начальная позиция - иконка Play */
transition: background-position 0.3s ease;
cursor: pointer;
}
/* Состояние при активном чекбоксе - иконка Pause */
.toggle-checkbox:checked + .icon-ai {
background-position: -32px 0; /* Смещение для иконки Pause */
}
/*.subscription-container {
background-color: #F5F7FA;
border-radius: 20px;
padding: 30px 20px;
width: 100%;
margin: 20px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}*/
/* Левый блок с текстом */
/*.left-block {
flex: 1;
}
.subscription-title {
word-wrap: break-word;
text-wrap: balance;
font-size: 24px;
font-weight: 800;
margin: 0;}
.subscription-description{
font-size: 16px;
line-height: 20px;
font-weight: 500;
margin: 20px 0;}*/
/* Правый блок с изображением */
/* .right-block {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.left-block, .right-block {
margin-bottom: 20px;}
.subscription-image {
width: 70%;
max-width: 234px;
height: auto;} */
/* Блок с кнопкой */
/*.button-block {
width: 100%;
display: flex;
justify-content: center;}*/
/* Стили кнопки */
/*.subscription-button-box {
background-color: #333;
color: #fff;
border: none;
padding: 15px;
font-family: 'Manrope', Arial, sans-serif;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
width: 100%;}
.subscription-button-box:hover {
background-color: #555;
}*/
.custom-form {
width: 100%;
max-width: 400px;}
.mg-email-form-wrap {
text-align: left;
font-weight: 500;
}
.mg-h1 {
font-size: 20px;
font-weight: 800;
margin-bottom: 15px;
text-align: left;
color: rgba(0, 0, 0, .8);}
.custom-form-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
#mg-mailer-email {
flex: 1;
padding: 15px;
font-size: 16px;
box-shadow: inset 0 0 0 2px #d8dce6;
border-color: transparent;
border-radius: 10px;
outline: none;
transition: border-color 0.3s;
box-sizing: border-box;
}
#mg-mailer-email::placeholder {
color: #888;
opacity: 1;}
#mg-mailer-email::-webkit-input-placeholder { /* Для Chrome, Safari */
color: #888;
}
#mg-mailer-email:-moz-placeholder { /* Для Firefox 18- */
color: #888;
}
#mg-mailer-email::-moz-placeholder { /* Для Firefox 19+ */
color: #888;
}
#mg-mailer-email:-ms-input-placeholder { /* Для Internet Explorer */
color: #888;
}
#mg-mailer-email:focus {
border-color: transparent;
box-shadow: inset 0 0 0 2px #666;
}
#mg-mailer-email-button {
padding: 15px 25px;
background-color: #333;
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
#mg-mailer-email-button:hover {
background-color: #555;
}
.custom-form-privacy {
font-size: 12px;
font-weight: 500;
line-height: normal;
color: #888;
margin: 0px;
}
.custom-form-privacy a {
color: #888;
text-decoration: underline;
}
.custom-template {
width: 100%;
text-align: left;
margin-bottom: 40px;}
/* Описание */
.template-description {
font-size: 17px;
line-height: 1.5;
color: rgba(0, 0, 0, .8);
margin: 20px 0px 0px;
font-weight: 500;
}
/* BASKET FORM */
.course-form {
display: flex;
grid-gap: 40px;
width: 100%;
justify-content: space-between;
}
#day {
background: #EBF7FF;
display: flex;
font-family: 'Manrope', Arial, sans-serif;
font-weight: 600;
justify-content: center;
align-items: center;
line-height: 0;
box-sizing: border-box;
border-radius: 6px;
margin: 0 6px;
font-size: 16px;
}
.e-field, .e-field2 {
background: #F5F7FA;
display: flex;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
border-radius: 20px;
}
.e-field2 {
margin-bottom: 20px;
}
.e-field label {
color: #627283;
font-weight: 600;
}
.e-field2 h2 {
font-size: 16px;
color: #627283;
font-weight: 600;
margin: 0;
}
.e-btn {
appearance: none;
padding: 15px 30px;
background-color: #fff;
color: #333;
text-decoration: none;
font-weight: 600;
font-size: 16px;
line-height: 20px;
border-radius: 20px;
border: none;
display: inline-block;
text-align: center;
cursor: pointer;
transition: background-color 0.3s;
}
.e-btn:hover {
background-color: #DCE3ED;
}
.button-pay button, .login-button {
appearance: none;
padding: 15px 30px;
background-color: #005bfe;
color: #fff;
text-decoration: none;
width: 100%;
box-sizing: border-box;
text-decoration: none;
font-weight: 500;
font-size: 16px;
line-height: 20px;
border-radius: 20px;
border: none;
display: inline-block;
text-align: center;
cursor: pointer;
transition: background-color 0.3s;
}
.button-pay button {
margin-top: 25px;}
.button-pay button:hover, .login-button:hover {
filter: brightness(1.2);
}
.course-form_detal {
width: 60%;
}
@media (max-width: 860px) {
.course-form {
grid-template-columns: 1fr;
}
}
.course-form_info {
display: block;
width: 350px;
background: #fff;
box-shadow: 0 0 20px 0 rgb(0 0 0 / 8%);
border-radius: 20px;
padding: 30px;
height: max-content;
order: 1;
}
@media (max-width: 860px) {
.course-form_info {
order: -1;
}
}
.course-form_title {
font-size: 20px;
font-weight: bold;
margin-bottom: 8px;
}
.course-form_day {
display: flex;
font-weight: 500;
margin-bottom: 20px;
font-size: 16px;
color: #627283;
}
.course-form_day > span {
display: inline-block;
color: #005BFF;
padding: 4px 8px;
font-size: 14px;
}
.course-form_subs {
display: flex;
flex-direction: column;
gap: 10px;
}
.course-form_subs label {
display: flex;
font-size: 14px;
font-weight: 500;
}
.course-form_total {
display: block;
margin: 30px 0 0 !important;
border-top: 2px solid #F5F7FA;
padding: 20px 0 0;
font-size: 16px;
font-weight: 700;
list-style: none;
}
.course-form_total li#sale {
display: block;
color: #4CAF50;
font-size: 12px;
margin: 5px 0 15px;
}
.course-form_total li span {
font-family: 'Manrope', Arial, sans-serif;}
.course-form_promo {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
grid-gap: 20px;
}
.course-form_promo button {
display: inline-block;
min-width: max-content;
background: var(--color1);
color: #fff;
padding: 15px 20px;
border-radius: var(--radius);
}
.course-code-info {
margin: 12px 0;
}
.basket-form_payment {
display: flex;
}
h2 + .basket-form_payment > span {
display: block;
margin-top: -20px;
margin-bottom: 25px;
}
.basket-form_payment > span {
display: block;
color: #7f7f7f;
font-size: 14px;
margin-bottom: 9px;
}
.basket-form_payment label {
font-weight: 600;
color: #627283;
font-size: 12px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
.basket-form_payment label input {
position: absolute;
}
.basket-form_payment label input + img, .basket-form_payment > a img {
display: inline-block;
width: 120px;
height: auto;
object-fit: contain;
cursor: pointer;
transition: 0.3s;
margin-bottom: 5px;
padding-top: 34px;
}
.basket-form_payment label span, .basket-form_payment > a span {
display: block;
font-size: 14px;
line-height: 1.5;
margin-top: 10px;
}
.e-grid4 {
background: #fff;
padding: 20px;
box-sizing: border-box;
flex: 0 0 auto;
border-radius: 18px;
margin-top: 25px;
}
.subscription-option, .form-check-input {
display: flex;
align-items: center;
border: 2px solid #F5F7FA;
border-radius: 12px;
padding: 15px 20px;
cursor: pointer;
position: relative;
background-color: #fff;
transition: border-color 0.3s, box-shadow 0.3s;
}
.subscription-option input[type="radio"], input[type=radio] {
margin-right: 15px;
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #d8dce6;
border-radius: 50%;
outline: none;
cursor: pointer;
position: relative;
}
.subscription-option input[type="radio"]:checked, input[type=radio]:checked {
border-color: #005BFF;
}
.subscription-option .subscription-content {
display: flex;
flex-direction: column;
}
.subscription-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.subscription-subtitle {
font-size: 14px;
color: #627283;
font-weight: 600;
margin-top: 5px;
}
.subscription-option:hover {
border-color: #005BFF;
box-shadow: 0 0 10px rgba(155, 93, 229, 0.2);
}
.subscription-option input[type="radio"]:checked + .subscription-content {
color: #9b5de5;
}
.grpay_promo {
display:flex;
align-items: center;
gap: 10px;}
/* ALERT */
.alert {
position: fixed;
width: 300px;
right: 20px;
top: 20px;
font-size: 14px;
text-align: center;
z-index: 9999;
}
@media (max-width: 860px) {
.alert {
right: 15px;
top: 15px;
font-size: 12px;
width: 200px;
}
}
.alert-block {
position: relative;
display: block;
background: #4CAF50;
border-radius: 10px;
color: #fff;
box-shadow: 3px 5px 8px rgba(0, 55, 76, 0.31);
padding: 15px 40px 15px 15px;
margin-bottom: 15px;
overflow: hidden;
}
.alert-block.danger {
background: #f49336;
}
.alert-block.error {
background: #F44336;
}
.alert-block_bar {
position: absolute;
background: var(--light2);
left: 0;
bottom: 0;
height: 2px;
}
.alert-block_close {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
}
.fact-container {
display: flex;
align-items: flex-start;
margin-bottom: 35px;
position: relative; /* Для позиционирования псевдоэлемента */
padding-top: 15px; /* Отступ для верхней линии */
}
.fact-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%; /* Растягиваем на всю ширину */
height: 4px; /* Толщина линии */
background-color: #f7f7f7; /* Цвет линии */
border-radius: 4px; /* Закругленные концы */
}
.fact-number {
font-size: 24px;
font-weight: bold;
margin: 40px 0px 15px 0;
line-height: 30px;
flex-shrink: 0;
width: 40px;
}
.restricted-access {
background-color: #eff2f7;
padding: 20px;
text-align: center;
}
.fixed-footer {
position: absolute; /* Абсолютное позиционирование относительно родителя */
bottom: 0; /* Располагаем блок внизу родителя */
left: 0;
width: 100%; /* Ширина блока равна ширине родителя */
padding: 10px 20px;
background-color: #FFFFFF; /* Цвет фона */
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Легкая тень */
text-align: center; /* Центрируем текст */
z-index: 10;
box-sizing: border-box;
}
.restricted-box {
padding: 0 40px;
margin-bottom: 40px;}
.lock-icon {
width: 100px;
height: 100px;
margin: 40px auto 20px;
background-image: url('/img/lock_1.svg');
background-size: cover;
}
/* Заголовок и описание */
.access-title {
font-size: 18px;
font-weight: 700;
color: #070707;
margin: 0;
}
.access-description {
font-size: 14px;
line-height: 1.3;
font-weight: 500;
color: #070707;
margin: 10px 0 0;
}
/* Список преимуществ */
.benefits {
background-color: #fff;
border-radius: 15px;
padding: 20px;
text-align: left;
margin-bottom: 80px;
}
.benefits-title {
font-size: 14px;
font-weight: 500;
color: #627283;
text-align: left;
margin: 0 0 15px;
}
.benefit-item {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.benefit-item:last-child {
margin-bottom: 0;
}
.icon-guest {
width: 40px; /* Размер родительского блока */
height: 40px;
border-radius: 12px;
margin-right: 15px;
flex-shrink: 0;
background-color: #5B51DE; /* Фон блока */
display: flex;
align-items: center; /* Центровка по вертикали */
justify-content: center; /* Центровка по горизонтали */
}
.icon-image {
width: 20px; /* Ширина иконки */
height: 20px; /* Высота иконки */
display: block; /* Убирает лишний отступ */
}
.benefit-item h4 {
font-size: 16px;
font-weight: 500;
color: #070707;
margin: 0 0 5px;
}
.benefit-item p {
font-size: 14px;
color: #627283;
margin: 0;
line-height: 1.3;
}
/* Разделитель */
.benefit-item-box {
border-bottom: 1px solid #DCE3ED;
padding-bottom: 15px;
}
.benefit-item:last-child .benefit-item-box {
border-bottom: none;
padding-bottom: 0px;
}
/* Фиксированный блок снизу */
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
padding: 15px 20px;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
}
/* Темы*/
/* Карточка */
.card-short {
position: relative;
width: 340px;
background-color: #F5F7FA; /* Цвет фона */
border-radius: 30px;
}
.card-box-short {
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 20px;
}
.card-short a {
position: absolute;
width: 100%;
height: 100%;
border-radius: 30px;
}
/* Аватар */
.card-short-avatar {
width: 80px; /* Фиксированная ширина */
height: 80px; /* Фиксированная высота */
border-radius: 50%; /* Круглая форма */
overflow: hidden; /* Обрезает содержимое, выходящее за границы */
background-color: #F5F7FA; /* Цвет фона */
border: 3px solid #fff;
box-shadow: 0 0 0 3px #DCE3EC;
}
.card-short-avatar img {
width: 100%; /* Ширина полностью заполняет контейнер */
height: 100%; /* Высота полностью заполняет контейнер */
object-fit: cover; /* Изображение адаптируется к форме, без искажений */
border-radius: 50%; /* Для предотвращения выхода из круга */
}
/* Заголовок */
.card-title-short {
font-size: 18px;
font-weight: 800;
line-height: 1.5;
color: rgba(0, 0, 0, .8);
margin: 0;
}
/* Подзаголовок */
.card-subtitle-short {
font-size: 14px;
font-weight: 500;
color: rgba(0, 0, 0, .8);
line-height: 1.5;
margin: 5px 0 0;
}
/* Кнопка */
.card-button-short {
width: 100%;
padding: 10px 15px;
background-color: #fff;
color: #627283;
border: none;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Иконка кнопки */
.button-icon-short {
width: 10px;
height: 10px;
display: inline-block;
background-image: url('/img/arrow-gray.svg'); /* Иконка по умолчанию */
background-size: contain;
background-repeat: no-repeat;
transition: background-image 0.3s ease;
}
/* При наведении */
.card-short:hover .card-button-short {
color: #005BFF; /* Новый цвет текста */
}
.card-short:hover .card-button-short .button-icon-short {
background-image: url('/img/st_ss_blue.svg'); /* Синяя версия иконки */
}
.news-theme {
display: flex;
width: 1200px;
flex-direction: row;
gap: 40px;
background: #fff;
padding: 40px;
box-sizing: border-box;
border-radius: 32px;
}
.left-column {
width: 340px;
padding: 15px;
border-radius: 10px;
display: flex;
flex-direction: column;
box-sizing: border-box;
gap: 20px;
}
.profile-theme {
text-align: left;
box-shadow: 0 20px 12px -16px rgba(0, 30, 85, .1), 0 8px 24px 18px rgba(0, 30, 85, .05);
border-radius: 30px;
padding: 20px;
}
.profile-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
background: #fff;
padding-top: 50px; /* Высота над аватаркой */
}
.profile-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120px;
background: linear-gradient(to bottom, #f6f7fb, #fff); /* Градиент сверху вниз */
z-index: 1;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.profile-info-feed {
position: relative;
z-index: 2;
width: 100%;
}
.profile-avatar-feed {
position: relative;
width: 100px;
margin: 0 auto;
}
.profile-avatar-feed img {
width: 100px;
height: 100px;
border-radius: 50%; /* Круглая форма */
border: 4px solid #fff; /* Белая рамка вокруг аватарки */
object-fit: cover; /* Чтобы изображение вписывалось в круг */
}
.avatar-badge {
position: absolute;
bottom: 0;
right: 0;
width: 25px;
height: 25px;
background-color: #10C44C;
color: #fff;
font-size: 12px;
font-weight: 600;
font-family: 'Manrope', Arial, sans-serif;
border-radius: 50%;
line-height: 0px;
display: flex;
justify-content: center;
border: 2px solid #fff;
align-items: center;
}
.profile-name {
font-size: 18px;
font-weight: 800;
line-height: 1.5;
text-align: left;
}
/* Центр */
.center-column {
width: 740px;
display: flex;
flex-direction: column;
}
.feed-header {
display: flex;
justify-content: space-between;
align-items: center;
position: relative; /* Для позиционирования псевдоэлемента */
padding-bottom: 15px; /* Отступ для нижней линии */
}
.feed-header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%; /* Растягиваем линию на всю ширину */
height: 4px; /* Толщина линии */
background-color: #f7f7f7; /* Цвет линии */
border-radius: 4px; /* Закругленные концы */
}
.feed-header h2 {
font-size: 18px;
font-weight: bold;
}
.feed-link {
text-decoration: none;
color: #333;
font-size: 14px;
padding: 5px 10px;
border-radius: 5px;
transition: background-color 0.3s;
}
.feed-link.active,
.feed-link:hover {
background-color: #ececec;
color: #000;
}
.feed-item, .feed-item-pro {
padding: 20px;
border-radius: 30px;
margin-top: 20px;
}
.feed-item {
border: 2px solid #F5F7FA;
}
.feed-item-pro {
border: 2px solid #FFECB3;
}
.feed-item-box {
position: relative;}
.title-feed, .title-feed-pro {
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
padding: 15px 20px;}
.title-feed {
background: #F5F7FA;}
.title-feed-pro {
background: #FFECB3;}
.title-feed h4, .title-feed-pro h4 {
margin: 0px;
font-weight: 600;
line-height: 1.5;
font-size: 16px;}
/* Базовый стиль для feed-im-title */
.feed-im-title {
transition: transform 0.3s ease; /* Плавный переход для увеличения */
}
/* Увеличение при наведении на ссылку */
.feed-item-link:hover ~ .feed-im-title {
transform: scale(1.02); /* Увеличиваем размер на 2% */
}
.feed-item-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.feed-item-header h3{
margin: 0px;
font-size: 14px;
font-weight: 600;}
.feed-item-header p {
margin: 3px 0 0;
font-size: 13px;
font-weight: 500;
color: #627283;
}
.feed-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.feed-content {
font-size: 14px;
line-height: 1.5;
font-weight: 500;
margin: 20px 0 20px;
}
.feed-images {
display: flex;
position: relative;
}
.feed-block{
position: absolute;
top:0;
width: 100%;
height: 100%;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: hsla(0, 0%, 0%, 0.3);
z-index: 1;}
.feed-block-closed {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
border: 1.4px solid #fff;
z-index: 2;}
.feed-images .feed-block-closed img {
width: 20px;
height: auto;
}
.feed-images img {
width: 100%;
height: auto;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
object-fit: cover;
}
/* Иконки лента тем */
.post-stats {
display: flex;
align-items: center;
gap: 25px;
}
.post-stats-feed {
position: absolute;
top: 10px;
right: 10px;
box-sizing: border-box;
}
.stat-item {
display: flex;
align-items: center;
gap: 5px; /* Расстояние между иконкой и текстом */
}
.stat-icon {
width: 20px;
height: 20px;
}
.stat-text {
font-size: 14px;
font-weight: 500;
color: #627283;
}
/* Общие стили для вкладок */
.feed-nav {
display: flex;
gap: 10px;
}
.feed-link-lenta {
text-decoration: none;
color: #627283;
font-size: 14px;
font-weight: 500;
padding: 10px 15px;
border-radius: 8px;
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
background: #F5F7FA;
}
.feed-link-lenta.active, .feed-link-lenta.active:hover {
box-shadow: inset 0 0 0 2px #005BFF;
color: rgba(0, 0, 0, .8);
background: #fff;
}
.feed-link-lenta.active:hover {
cursor: default;}
.feed-link-lenta:hover {
box-shadow: inset 0 0 0 2px #DCE3ED;
}
.no-news {
text-align: center;
font-size: 16px;
color: #888;
padding: 20px;
}
.error-message {
text-align: center;
font-size: 16px;
color: #FF0000;
padding: 20px;
}
.feed-tab-content {
display: none;
gap: 20px;
flex-direction: column;
}
/* Отображаем активную вкладку */
.feed-tab-content.active {
display: flex; /* Flex-контейнер */
}
.button-feed {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 14px;
color: #fff;
font-weight: 600;
line-height: 1.2;
margin-top: 3px;
padding: 12px;
text-decoration: none;
border-radius: 15px;
transition: background-color 0.3s ease;
background: #005BFF;
width: 100%;
box-sizing: border-box;
}
.button-feed:hover {
background: #0052E6;}
.rating-container {
text-align: left;
background-color: #f6f7fb;
padding: 20px;
border-radius: 15px;
margin: 10px auto 0px;
}
.rating-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 8px;
color: #333;
}
.rating-subtitle {
font-size: 14px;
color: #627283;
margin-bottom: 20px;
font-weight: 500;
}
.current-rating {
display: none!important;}
.unit-rating {
list-style: none;
padding: 0;
display: flex;
justify-content: space-around;
gap: 5px;
}
.unit-rating li {
display: inline-block;
}
.unit-rating a {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 8px;
text-align: center;
font-size: 16px;
font-weight: 500;
font-family: 'Manrope', Arial, sans-serif;
background-color: #e6f0ff;
color: #005bff;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.unit-rating a:hover {
background-color: #005bff;
color: #fff;
}
.rating-scale {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 12px;
color: #888;
}
.rating-label {
font-weight: 500;
}
.margin-top40 {
margin-top: 40px;}
.card-tag {
width: 100%;
max-width: 690px;
background-color: #F5F7FA;
border-radius: 20px;
padding: 30px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
box-sizing: border-box;
margin-top: 20px;
}
/* Контент карточки */
.card-content-tag {
display: flex;
align-items: center;
width: 100%;
}
.card-box-tag {
display: flex;
width: 100%;}
/* Аватар */
.avatar-tag {
width: 80px;
height: 80px;
background-color: #DCE3ED;
border-radius: 50%;
flex-shrink: 0;
}
.avatar-tag img {
width: 80px;
height: 80px;
border-radius: 50%;}
/* Текст */
.text-content-tag {
flex-grow: 1;
margin-left: 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
.title-tag {
font-size: 18px;
font-weight: 700;
line-height: 1.3;
margin: 0;
color: rgba(0, 0, 0, .8);
}
.subtitle-tag {
font-size: 14px;
color: #5F7081;
line-height: 1.2;
font-weight: 500;
margin-top: 5px;
}
/* Кнопка */
.button-tag {
background: #005BFF;
color: #fff;
padding: 10px 20px;
border-radius: 10px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
text-align: center;
white-space: nowrap;
display: inline-block;
}
.button-tag:hover {
background: #0052E6;}
@media screen and (max-width: 1200px) {
.news-theme {
flex-direction: column!important;
padding: 30px 20px !important;}
.news-theme, .left-column, .center-column {
width: 100%!important;}
.box-content-in-feed {
margin: 20px 0 !important;
}
.left-column {
padding: 0px!important; }
.feed-block-closed {
bottom: 15px!important;
right: 15px!important;
}
.card-short {
width: 100%!important;}
}
/* Мобильные: прячем или переводим в нижнюю панель */
@media (max-width: 1199px){
.brief-nav {display: none !important;}
}
/* плашка фильмы */
.podbor, .cat {
width: 183px;
margin: 10px;
text-align: left;
color: var(--text-primary);}
/*.movie:first-child {
margin-left: 0;}
.movie:last-child {
margin-right: 0;}*/
.mov-pod {position: relative;}
/*.movie:hover img, .podbor:hover img {
transform: scale(1.05);}*/
.movie-info-box {
display: flex;
gap: 5px;
flex-direction: column;
align-items: flex-start;
border-radius: 30px;
padding: 15px;
box-sizing: border-box;
position: absolute;
bottom: 0px;
width: 100%;
background: var(--bg-surface-9-alfa);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);}
.title-mov {
width: 100%;
font-size: 16px;
font-weight: 600;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-inverse);
}
.title-mov, .genre-mov {box-sizing: border-box;}
.year-mov,.genre-mov, .kolichestvo-mov {
font-size: 12px; color: var(--text-muted); font-weight: 500;}
.movie-box {
border-radius: var(--radius-lg);
width: 224px;
position: relative;
background: var(--bg-surface-9-alfa);}
.movie-box-url {position: relative;}
.movie img, .podbor img, .cat img {
width: 224px;
height: auto;
border-radius: var(--radius-lg);
transition: transform 0.3s ease;
display: block;
transform-origin: bottom;
border: 1px solid var(--bg-surface-10);
box-sizing: border-box;
margin: 0 auto;}
/* контейнер слайдера */
.brief-slider {
position: relative;
}
/* только внутри слайдера — ломаем «сетку» и включаем горизонтальный скролл */
.brief-slider .container-kar{
display: flex !important; /* ВАЖНО: включаем flex */
flex-wrap: nowrap !important; /* всё в одну линию */
justify-content: flex-start !important;
width: 100% !important;
overflow-x: auto !important;
overflow-y: visible;
gap: 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
/* каждая карточка — фиксированная ширина, прилипает к началу */
.brief-slider .container-kar > .movie-box{
flex: 0 0 auto;
scroll-snap-align: start;
padding: 0px;
transition: transform .2s ease, box-shadow .2s ease;
}
.brief-slider .container-kar > .movie-box:hover {transform: translateY(-2px);}
/* кнопки навигации */
.brief-controls{ position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; background: var(--bg-surface-inverse-alpha);padding: 10px;border-radius: 30px;}
.brief-nav{
width: 40px; height: 40px;
border-radius: 50%;
border: 0px;
background: var(--bg-surface-inverse-alpha);
display: grid; place-items: center;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.prev {margin-left:15px}
.brief-nav:hover{ transform: translateY(-1px); }
.brief-nav:disabled{ pointer-events:none; }
/* адаптив: уменьшим gap на узких экранах */
@media (max-width: 768px){
.brief-slider .container-kar{ gap: 15px; }
}
.brief-slider .container-kar{
/* было: overflow-x:auto; оставляем — нужно для скролла */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge старые */
}
.brief-slider .container-kar::-webkit-scrollbar{
width: 0 !important;
height: 0 !important; /* Chrome/Safari/Edge */
}
.brief-slider .container-kar::-webkit-scrollbar-thumb,
.brief-slider .container-kar::-webkit-scrollbar-track{
background: transparent !important;
}
.year-mov {
display: inline-block;
color: var(--text-muted);
border-radius: var(--radius-lg);
line-height: 1;
font-weight: 600;
white-space: nowrap;
display: flex;
justify-content: center;
padding: 10px 0px;
}
.genre-mov {background: var(--bg-surface-9-alfa);padding: 3px 6px;border-radius: 10px;}
/*главная*/
.section-movie {
background:var(--bg-surface-11);
padding: 100px 0;}
.section-set {
padding: 100px 0;}
.main-heading {
margin-bottom: 50px;
display: flex;
justify-content: center;
}
.main-heading h1{
font-size: clamp(30px, 5vw, 52px);
line-height:1.3;
font-weight: 900;
width: 65%;
margin: 0px;
text-align: center;
color: var(--text-inverse);}
.button-box {
display: flex;
justify-content: flex-end;
margin-bottom: 35px;}
.set-card {
--pad: 22px;
--thumb: 90px;
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 224px;
min-height: 320px;
padding: 60px 15px 15px;
border-radius: var(--radius-lg);
background: var(--bg-surface-3);
border: 1px solid var(--bg-surface-3);
text-decoration: none;
color: inherit; /* наследовать цвет текста */
transition: transform .2s ease, box-shadow .2s ease;
box-sizing: border-box;
}
.set-card:hover {
transform: translateY(-2px);
}
.set-top {
display: grid;
gap: 15px;
}
.set-title {
font-size: 16px;
line-height: 1.3;
font-weight: 700;
}
.set-badge span {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: var(--bg-surface-inverse-alpha-2);
font-weight: 500;
font-size: 12px;
}
.set-bottom {
margin-top: auto; /* прижимаем к низу */
display: flex;
gap: 14px;
align-items: flex-end;
}
.set-poster img {
width: var(--thumb);
height: var(--thumb);
object-fit: cover;
border-radius: 24px;
display: block;
}
.set-count {
width: var(--thumb);
height: var(--thumb);
border-radius: 24px;
background: var(--bg-surface-6);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
}
@media screen and (max-width: 1200px) {
.main-heading h1 {
width: 100%!important;
}
.button-box {
display: none;
}
}