{
outline: none;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
body {
background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-weight: 400;
font-size: 15px;
color: #b8b8b8;
line-height: 1.6;
}
img {
max-width: 100%;
border-radius: 8px;
}
a {
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: #ff4757;
}
h1, h2, h3 {
margin: 20px auto 20px 0;
font-size: 28px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
.heading {
margin: 15px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.heading h1, .heading h2, .heading h3 {
margin: 0 auto 0 0;
}
.heading .paginator {
margin: 0 10px 0 0;
}
.sort {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.sort li {
margin: 3px;
padding: 0;
list-style: none;
}
.sort .btn-sm {
padding: 0 8px;
}
.input {
width: 100%;
height: 40px;
padding: 0 15px;
border: 2px solid #2a2a2a;
border-radius: 8px;
background-color: #1f1f1f;
box-sizing: border-box;
font-size: 15px;
color: #fff;
transition: border-color 0.3s ease;
}
.input:focus {
border-color: #ff4757;
outline: none;
}
.btn {
min-width: 40px;
height: 40px;
padding: 0 15px;
display: inline-block;
border: 0;
border-radius: 8px;
box-sizing: border-box;
background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
font-size: 14px;
color: #fff;
text-align: center;
text-transform: uppercase;
cursor: pointer;
line-height: 40px;
white-space: nowrap;
transition: all 0.3s ease;
font-weight: 600;
letter-spacing: 0.5px;
}
.btn:hover {
color: #fff;
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3);
}
.btn.btn-alt {
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
}
.btn.btn-sm {
height: 28px;
line-height: 28px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main {
flex-grow: 1;
padding: 20px 0;
}
.container {
width: 100%;
max-width: 1920px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.header {
width: 100%;
padding: 15px 0;
background: rgba(15, 15, 15, 0.95);
backdrop-filter: blur(10px);
z-index: 100;
position: sticky;
top: 0;
border-bottom: 1px solid #2a2a2a;
}
.header-container {
display: flex;
align-items: center;
}
.logo {
display: inline-block;
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
line-height: 40px;
white-space: nowrap;
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.logo:hover {
text-decoration: none;
opacity: 0.8;
}
.logo span {
color: #fff;
-webkit-text-fill-color: #fff;
}
.togglers {
margin-left: auto;
display: none;
}
.togglers span {
margin-right: 12px;
display: inline-block;
font-size: 24px;
cursor: pointer;
transition: color 0.3s ease;
}
.togglers span:last-child {
margin-right: 0;
}
.togglers span.toggled {
color: #ff4757;
}
.search-form {
position: relative;
width: 350px;
margin: 0 15px;
}
.search-form .search-input {
padding: 0 50px 0 15px;
}
.search-form .search-btn {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
border: 0;
background: transparent;
font-size: 20px;
cursor: pointer;
color: #b8b8b8;
transition: color 0.3s ease;
}
.search-form .search-btn:hover {
color: #ff4757;
}
.navigation {
margin-left: auto;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.5px;
}
.navigation > ul {
margin: 0;
padding: 0;
display: flex;
}
.navigation > ul > li {
margin: 0 20px 0 0;
padding: 0;
list-style: none;
}
.navigation > ul > li:last-child {
margin: 0;
}
.navigation .la {
margin: -2px 6px 0 0;
vertical-align: middle;
font-size: 18px;
}
.languages img {
margin: -1px 6px 0 0;
vertical-align: middle;
display: inline-block;
}
.languages .dropdown-container {
right: 0;
left: auto;
font-weight: normal;
text-transform: none;
}
.thumbnails {
margin-bottom: 30px;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
.th {
position: relative;
min-width: 0;
background: #1f1f1f;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.th:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(255, 71, 87, 0.2);
}
.th-link, .th-img {
display: block;
}
.th-img, .th-img-2 {
position: relative;
padding: 56.25% 0 0 0;
overflow: hidden;
}
.th-img img, .th-img-2 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.3s ease;
border-radius: 0;
}
.th:hover .th-img img, .th:hover .th-img-2 img {
transform: scale(1.05);
}
.th-img-2 {
padding-top: 75%;
}
.th-duration {
position: absolute;
top: 8px;
left: 8px;
padding: 4px 10px;
display: inline-block;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
font-size: 12px;
color: #fff;
border-radius: 4px;
font-weight: 600;
}
.th-site, .th-title, .th-description {
margin: 8px 12px;
display: block;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.th-site span, .th-title span, .th-description span {
color: #b8b8b8;
}
.th-title, .th-site {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
padding: 10px;
}
.th-title span, .th-site span {
margin: 2px;
padding: 4px 10px;
display: inline-block;
background: rgba(255, 71, 87, 0.9);
font-weight: bold;
color: #fff;
text-transform: uppercase;
border-radius: 4px;
font-size: 11px;
}
.th-title span:first-child {
order: 2;
}
.th-title span:last-child {
order: 1;
}
.th:hover .th-title span {
background: rgba(255, 107, 129, 0.95);
}
.th-description {
height: 24px;
text-align: left;
padding: 0 12px;
font-size: 13px;
}
.th-tags {
position: absolute;
right: 0;
bottom: 50px;
width: 100%;
height: 28px;
margin: 4px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
}
.th-tags a {
margin: 2px;
padding: 4px 8px;
display: block;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
font-weight: bold;
color: #fff;
text-transform: uppercase;
border-radius: 4px;
transition: all 0.3s ease;
}
.th-tags a:hover {
color: #ff4757;
background: rgba(255, 71, 87, 0.2);
}
.paginator {
margin: 30px 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.paginator li {
margin: 4px;
padding: 0;
list-style: none;
}
.paginator li.active .btn {
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
pointer-events: none;
}
.paginator li .btn:hover {
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
text-decoration: none;
}
.embed {
margin: 20px 0;
display: flex;
}
.embed-content {
flex-grow: 1;
}
.embed-player, .embed-player-2 {
position: relative;
padding: 56.25% 0 0 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.embed-player > iframe, .embed-player-2 > iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.embed-player-aside, .embed-player-2-aside {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 8px 8px 8px;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
border-radius: 8px;
}
.embed-player-aside.hidden, .embed-player-2-aside.hidden {
display: none;
}
.embed-player-aside-title, .embed-player-2-aside-title {
position: relative;
padding: 8px 0;
}
.embed-player-aside-title span, .embed-player-2-aside-title span {
position: absolute;
top: 4px;
right: 0;
font-size: 20px;
cursor: pointer;
}
.embed-player-aside-block, .embed-player-2-aside-block {
width: 320px;
}
.embed-player-aside-close, .embed-player-2-aside-close {
width: 100%;
margin: 8px 0 0 0;
display: block;
font-weight: bold;
}
.embed-player-2 {
padding: 75% 0 0 0;
}
.embed-data {
margin: 20px 0;
}
.embed-info {
padding: 20px;
background: #1f1f1f;
border-radius: 12px;
border: 1px solid #2a2a2a;
}
.embed-info-list {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.embed-info-list li {
margin: 0 20px 0 0;
padding: 0;
list-style: none;
color: #b8b8b8;
}
.embed-info .la {
margin: -2px 6px 0 0;
display: inline-block;
vertical-align: middle;
font-size: 18px;
color: #ff4757;
}
.embed-categories {
margin: 15px 0 0 0;
}
.embed-aside {
margin: 0 0 0 20px;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.embed-aside > div {
margin-bottom: 15px;
}
.embed-aside > div:last-child {
margin-bottom: 0;
}
.external-links {
margin: 0 0 30px 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.external-links li {
margin: 0 15px 0 0;
padding: 0;
list-style: none;
}
.external-links li .la {
margin: -2px 6px 0 0;
display: inline-block;
vertical-align: middle;
font-size: 18px;
}
.keywords {
margin: 0 0 30px 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.keywords li {
margin: 0 12px 8px 0;
padding: 0;
list-style: none;
}
.keywords li .la {
margin: -2px 6px 0 0;
vertical-align: middle;
color: #ff4757;
}
.keywords .size-1 {
font-size: 12px;
}
.keywords .size-2 {
font-size: 15px;
}
.keywords .size-3 {
font-size: 18px;
}
.keywords .size-4 {
font-size: 21px;
}
.keywords .size-5 {
font-size: 24px;
}
.niches {
margin: 0 0 30px 0;
padding: 0;
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
}
.niches li {
width: 100%;
margin: 4px 0;
padding: 8px 15px;
box-sizing: border-box;
display: inline-block;
list-style: none;
background: #1f1f1f;
border-radius: 8px;
border: 1px solid #2a2a2a;
transition: all 0.3s ease;
}
.niches li:hover {
background: #2a2a2a;
border-color: #ff4757;
transform: translateX(3px);
}
.niches li a {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.niches li a .la {
margin: -2px 6px 0 0;
vertical-align: middle;
font-size: 14px;
color: #ff4757;
}
.niches li a span {
margin: 0 0 0 auto;
font-size: 12px;
color: #b8b8b8;
}
.niches-title {
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%) !important;
font-weight: bold;
color: #fff;
}
.toplist {
margin: 0 0 30px 0;
padding: 0;
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
}
.toplist li {
position: relative;
width: 100%;
margin: 4px 0;
padding: 8px 15px;
box-sizing: border-box;
display: inline-block;
list-style: none;
background: #1f1f1f;
border-radius: 8px;
border: 1px solid #2a2a2a;
transition: all 0.3s ease;
}
.toplist li:hover {
background: #2a2a2a;
border-color: #ff4757;
}
.toplist li span {
margin: 0 6px 0 0;
display: inline-block;
color: #ff4757;
font-weight: bold;
}
.dropdown {
position: relative;
}
.dropdown-container {
position: absolute;
top: 100%;
left: 0;
margin: 4px 0 0 0;
padding: 12px 0;
background: #1f1f1f;
border: 1px solid #2a2a2a;
border-radius: 8px;
display: none;
z-index: 100;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.dropdown-container.toggled {
display: block;
}
.dropdown-container li {
margin: 0;
padding: 8px 20px;
list-style: none;
white-space: nowrap;
transition: background 0.3s ease;
}
.dropdown-container li:hover {
background: #2a2a2a;
}
.footer {
padding: 40px 0;
background: #0d0d0d;
border-top: 1px solid #2a2a2a;
}
.footer .logo {
margin-bottom: 15px;
}
.footer-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-nav {
margin: 20px 0;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.footer-nav li {
margin: 0 15px 0 0;
padding: 0;
list-style: none;
}
.footer-nav li:last-child {
margin-right: 0;
}
.btn-up {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
display: none;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
box-sizing: border-box;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3);
transition: all 0.3s ease;
}
.btn-up.toggled {
display: flex;
}
.btn-up:hover {
text-decoration: none;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4);
}
.btn-up .la {
font-size: 32px;
line-height: 32px;
}
.topbar{
box-sizing:border-box;
display:none;
}
.topbar ul{
margin:0;
padding:0;
list-style:none;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 6px;
-moz-column-gap: 6px;
column-gap: 6px;
}
.topbar ul li{
position: relative;
width: 100%;
margin: 0 0 6px 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
.topbar ul li a{
display:block;
padding:8px;
text-align:center;
background:#1f1f1f;
color:#ffffff;
border-radius: 6px;
transition: all 0.3s ease;
}
.topbar ul li a:hover{
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
color:#ffffff;
transform: translateY(-2px);
}
.dec-topbar .topbar{
display:block;
margin:0 0 10px 0;
}
@media screen and (max-width: 1199px) {
.header-container {
flex-wrap: wrap;
}
.togglers {
display: flex;
}
.search-form {
width: 100%;
margin: 15px 0 0 0;
display: none;
}
.search-form.toggled {
display: block;
}
.navigation {
width: 100%;
margin: 15px 0 0 0;
display: none;
}
.navigation.toggled {
display: block;
}
.navigation ul {
flex-direction: column;
}
.navigation ul li {
margin: 8px 0;
}
.navigation .btn {
display: block;
}
.navigation .dropdown-container {
position: static;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;
text-align: left;
}
.navigation .dropdown-container li {
padding-left: 0;
padding-right: 0;
}
.thumbnails {
grid-template-columns: repeat(5, 1fr);
}
.niches {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.toplist {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.btn-sort {
display: none;
}
.embed-aside {
display: none;
}
.topbar{
display:block;
margin:15px 0 15px 0;
}
.dec-topbar .topbar{
display:none;
}
.topbar ul li a{
font-size:0.9em;
}
}
@media screen and (max-width: 580px) {
.topbar ul{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
}
.topbar ul li{
webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
}
@media screen and (max-width: 1023px) {
.thumbnails {
grid-template-columns: repeat(4, 1fr);
}
.niches {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.toplist {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.th-site, .th-title, .th-description {
font-size: 12px;
}
}
@media screen and (max-width: 767px) {
.thumbnails {
grid-template-columns: repeat(3, 1fr);
}
.niches {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.toplist {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
@media screen and (max-width: 480px) {
h1, h2, h3 {
font-size: 22px;
line-height: normal;
text-align: center;
}
.thumbnails {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.niches {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.toplist {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.container {
padding: 0 15px;
}
}
#video-out {
position: absolute;
width: 100%;
height: 100%;
}
#video-out img.player {
width: 100%;
height: 100%;
}
#video-out img.controls {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
@media screen and (max-width: 640px){
.embed-player-2{
min-height:320px;
}
}
.abform-wrapper1{
display:none;
}
.abform-wrapper1{
display:none;
}
.abbtn1{
cursor:pointer;
color:#ffffff;
}
.abbtn1:hover{
text-decoration:underline;
color: #ff4757;
}
.abform-wrapper1.toggled{
display: flex;
height:100vh;
top:0px;
bottom:0px;
left:0px;
right:0px;
background:rgba(0,0,0,0.8);
backdrop-filter: blur(5px);
position: fixed;
width: 100%;
justify-content:center;
align-items:center;
z-index:999;
}
#contactForm{
position: fixed;
top: calc(50% - 110px);
background: #1f1f1f;
padding: 25px;
box-sizing: border-box;
border-radius: 12px;
width:380px;
border: 1px solid #2a2a2a;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.abclose1{
position:absolute;
top:15px;
right:25px;
color:#ffffff;
cursor:pointer;
font-size: 24px;
}
.form-group{
margin-bottom:15px;
}
.form-group input{
display:block;
width:100%;
border-radius:8px;
border:2px solid #2a2a2a;
padding:10px;
box-sizing:border-box;
background: #0d0d0d;
color: #fff;
}
.form-group input:focus{
border-color: #ff4757;
outline: none;
}
.form-group textarea{
display:block;
width:100%;
border-radius:8px;
border:2px solid #2a2a2a;
padding:10px;
box-sizing:border-box;
background: #0d0d0d;
color: #fff;
}
.form-group textarea:focus{
border-color: #ff4757;
outline: none;
}
.abzagl1{
display:block;
margin-bottom:15px;
text-transform: uppercase;
color: #ffffff;
font-weight: 600;
}
#contactForm .btn:hover{
text-decoration:underline;
}
#msgSubmit{
margin-bottom:15px;
}
.abtext1{
font-size:14px;
color:#b8b8b8;
margin-bottom:25px;
}
.mob-rek-a {width: 100%;padding: 0px 15px 0px 15px;text-align: center;box-sizing: border-box;clear: both;display: none;}@media screen and (max-width: 767px){.mob-rek-a{display: block;grid-column-start: 1;grid-column-end: 4;}}@media screen and (max-width: 480px){.mob-rek-a {display: block;grid-column-start: 1;grid-column-end: 3;}}.mob-rek-a iframe{margin: 25px 0px 25px 0px;}
@media screen and (max-width: 767px) {main .thumbnails {grid-template-columns: repeat(3, 1fr);}}@media screen and (max-width: 480px) {main .thumbnails {grid-template-columns: repeat(2, 1fr);}}

/* Additional modern styles */
article {
background: #1f1f1f;
padding: 25px;
border-radius: 12px;
border: 1px solid #2a2a2a;
margin-bottom: 30px;
}

article p {
color: #b8b8b8;
line-height: 1.8;
margin-bottom: 15px;
}

article p:last-child {
margin-bottom: 0;
}


.toplist li a {
  display: flex;
  align-items: center;
  color: #b8b8b8;
  transition: all 0.3s ease;
}

.toplist li a:hover {
  color: #ff4757;
}

.toplist li a .la {
  margin-right: 8px;
  color: #ff4757;
  font-size: 16px;
}

/* Ограничение пунктов меню до 6 категорий + Home + Language = 8 пунктов */
.navigation > ul > li:nth-child(n+8):not(.languages) {
    display: none;
}

/* Показываем все пункты на мобильных (когда меню свёрнуто) */
@media screen and (max-width: 1199px) {
    .navigation > ul > li {
        display: block !important;
    }
}