/* BASIC LAYOUT HTML: body > .wrapper > .wrapper__container.wrapper__main > [header, content, sidebar, footer] Player (.player) is injected by JS directly into ----------------------------------------------- */ html { height: 100%; } /* body = flex column: .wrapper fills space, .player sits at bottom */ body { height: 100%; display: flex; flex-direction: column; overflow: hidden; background-color: var(--bg-darker-1); } .wrapper { flex: 1 1 0; min-height: 0; min-width: 320px; position: relative; width: 100%; overflow: hidden; background: var(--bg-darker-1) url(../images/bg-light.jpg) right top no-repeat; background-size: cover; padding: 10px; box-sizing: border-box; } /* wrapper__container and wrapper__main are the SAME div — style via wrapper__main */ .wrapper__container { height: 100%; position: relative; z-index: 20; max-width: 100% !important; } /* Grid: sidebar (left, full height) | content (center) | right-panel (right) */ .wrapper__main { height: 100%; display: grid; grid-template-columns: 260px minmax(0, 1fr) 350px; grid-template-rows: 1fr; grid-template-areas: "sidebar content right-panel"; gap: 0 10px; } /* ── SIDEBAR ── */ .sidebar { grid-area: sidebar; grid-row: 1 / -1; background-color: var(--bg-darker); border-right: none; border-radius: 16px; position: relative; z-index: 201; overflow: visible; margin-top: 0; } .sidebar__sticky { position: sticky; top: 0; } /* ── RIGHT PANEL (guests only) ── */ .right-panel { grid-area: right-panel; width: 300px; height: 100%; background-color: var(--bg-darker); border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .right-panel__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; padding: 20px; box-sizing: border-box; } .right-panel__ad { width: 310px; min-height: 250px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background-color: var(--bg); } .right-panel__btn { display: block; width: 100%; text-align: center; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 8px; background-color: var(--accent); color: #ffffff; text-decoration: none; box-sizing: border-box; cursor: pointer; } .right-panel__btn:hover { opacity: 0.85; } /* ── HEADER — sticky inside .content scroll container ── */ .header { position: sticky; top: 0; z-index: 50; margin: 0 calc(-1 * var(--indent)) 0; width: calc(100% + 2 * var(--indent)); gap: 20px; padding: 12px var(--indent); background-color: transparent; /* вверху прозрачная */ border-radius: 16px 16px 0 0; transition: box-shadow 0.2s, background-color 0.2s, backdrop-filter 0.2s; } .header.is-sticky { background-color: rgba(30,35,45,0.55); /* появляется фон при скролле */ backdrop-filter: blur(16px); /* стеклянный эффект */ -webkit-backdrop-filter: blur(16px); box-shadow: 0 4px 20px rgba(0,0,0,0.12); border-radius: 16px 16px 0 0; } /* ── CONTENT — scroll container, includes header as first child ── */ .content { grid-area: content; padding: 0 var(--indent) 60px; min-height: 0; overflow-x: hidden; overflow-y: auto; background: linear-gradient( to bottom, rgba(120, 120, 120, 0.35) 0%, rgba(80, 80, 80, 0.25) 15%, rgba(40, 40, 40, 0.15) 30%, rgba(0, 0, 0, 0) 60% ), var(--bg) !important; border-radius: 16px !important; } /* ── FOOTER — inside .content, appears at the very bottom ── */ .footer { padding: 36px var(--indent) 28px; border-top: 1px solid var(--bdc-darker); gap: 26px 36px; display: grid; background-color: var(--bg) !important; color: var(--tt-fade); grid-template-columns: max-content 1fr 280px; font-size: 13px; --tt: var(--tt-fade); border-radius: 0 0 16px 16px !important; } /* ── PLAYER — appended to by JS, sits as flex item below .wrapper ── */ .player { position: relative !important; left: auto !important; bottom: auto !important; flex-shrink: 0; width: calc(100% - 20px) !important; margin: 0 10px 10px; z-index: 100; background-color: var(--bg) !important; height: 72px; box-shadow: none; gap: 15px; padding: 0 24px 0 16px; --tt-icon: #585c66; border-radius: 16px !important; display: flex; align-items: center; } /* Player playlist panel — rises from the player */ .player__playlist { position: fixed; left: 10px; right: 10px; bottom: 90px; height: calc(100dvh - 160px); z-index: 980; box-shadow: var(--bsh-long); background-color: var(--bg); display: none; border-radius: 16px; overflow: hidden; } .player__playlist.is-active { display: block; } .player__playlist-list { overflow-x: hidden; overflow-y: auto; width: 100%; height: calc(100% - 80px); } .scrolltop {position: fixed; width: 50px; height: 50px; right: -60px; bottom: 100px; z-index: 980; border-radius: 50%; font-size: 20px; opacity: 0; transition: right 0.2s, opacity 0.2s;} .scrolltop.is-active {right: 20px; opacity: 1;} /* HEADER ----------------------------------------------- */ .logo {height: 50px; padding-left: 70px; position: relative; font-weight: 300; font-size: 24px; line-height: 1;} .logo span {color: var(--accent);} .logo__subtitle {font-size: 13px; font-weight: 400; color: var(--tt-fade); margin-top: 3px;} .logo.logo-icon::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(-1,1);} .logo-icon::before {width: 50px; aspect-ratio: 1 / 1; border-radius: 15px; content: ''; background: url(../images/logo.png) center bottom -4px / 38px no-repeat;} .header__btn-pro--guest {background-color: var(--bg-colored); color: var(--tt-on-colored);} .header__btn-pro { background: rgba(20, 18, 10, 0.55) !important; background-color: rgba(20, 18, 10, 0.55) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; color: rgb(247, 247, 247, 1) !important; border: 1px solid rgba(30, 215, 96, 0.6) !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; padding: 0 !important; box-shadow: 0 0 12px rgba(212, 175, 55, 0.3), inset 0 0 8px rgba(212, 175, 55, 0.1) !important; } .header__btn-pro span {display: none;} .header__btn-pro::before {font-size: 20px;} .header__btn-pro--guest::before {color: var(--accent);} .header__btn-login {border-radius: 50%; width: 44px; height: 44px; padding: 0; min-width: unset;} .header__btn-login span {display: none;} .header__btn-login::before {font-size: 19px;} .header__btn-pro + .header__btn-theme {margin-left: 20px;} .header__btn-theme, .header__btn-notification, .header__btn-comments, .header__btn-search {font-size: 24px; color: var(--tt-fade);} .header__btn-notification {margin-right: 30px;} .dt .header__btn-theme::before {content: "\f2a8";} .search-block form {position: relative; width: 420px; max-width: 100%;} .search-block__input, .search-block__input:focus {border-radius: 20px; padding: 0 56px;} .search-block__input:not(:focus)::placeholder {opacity: 1; font-size: 14px;} .search-block__btn, .search-block__btn-clear {position: absolute; left: 0; top: 0; width: 56px; height: 50px; border-radius: 0px; font-size: 20px; color: var(--ui-tt-fade); padding-left: 4px;} .search-block__btn-clear {left: auto; right: 0; padding: 0; opacity: 0; pointer-events: none;} .is-active .search-block__btn-clear {opacity: 1; pointer-events: auto;} /* SECTION ----------------------------------------------- */ .sect {position: relative;} .sect:not(:last-child) {margin-bottom: 80px;} .sect__header {margin-bottom: 35px; gap: 15px 30px; line-height: 1;} .sect__title {font-size: 24px; font-weight: 400;} .sect__link {height: 32px; border-radius: 20px; text-transform: uppercase; gap: 6px; background: rgba(255,255,255,0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; padding: 0 18px; transition: background 0.2s, border-color 0.2s;} .sect__link--accent {background-color: var(--accent);} .sect__link::before {font-size: 17px;} .sect__tabs {gap: 15px;} .sect__btn {display: flex; margin: 0 auto; margin-top: 40px; width: 260px; background-color: transparent; border: 1px solid var(--accent); color: var(--tt); font-size: 13px; font-weight: 400; height: 55px; padding: 0;} .sect__btn::before {color: var(--accent); font-size: 24px;} .sect:not(.sect--mybnrs) > .mybnr {height: 170px;} .sect__menu, .sect__tabs, .sect > .mybnr, .sect > .mybnr-tlg, .sect > .mybnr-stream {margin-bottom: 30px;} .sect__menu, .sect__tabs {gap: 5px;} .sect__menu a, .sect__tabs li {padding: 10px 20px; display: block; border-radius: 6px; background-color: var(--bg-darker); cursor: pointer;} .sect__menu a.is-active, .sect__tabs li.is-active {background-color: var(--accent); color: #fff;} .sect__menu[style] {mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);} .show-text {cursor: pointer; text-decoration: underline; color: var(--accent); margin-top: -30px; margin-bottom: 30px;} .genres-list {gap: 15px; display: grid; grid-template-columns: repeat(auto-fill,minmax(min(40vw,220px),1fr));} .sect-tabs {display:flex; gap:18px;} .sect-tabs li {min-width:max-content;} .sect-tabs a{ display:flex; align-items:center; justify-content:center; gap:12px; padding:0 22px; height:58px; border-radius:40px; /* стекло */ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; font-weight:600; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .25s ease; } /* hover */ .sect-tabs a:hover{ background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.15); box-shadow: 0 8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12); transform:translateY(-1px); } /* активная кнопка */ .sect-tabs li.active a{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.18); box-shadow: 0 10px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15); } /* иконка */ .sect-tabs a::before{ font-size:20px; opacity:.75; transition:opacity .3s ease; } .sect-tabs a:hover::before{ opacity:1; } /* CATEGORIES GRID ----------------------------------------------- */ .grid-items:has(.trc) {display: block;} .grid-items:has(.album-item) {grid-template-columns: repeat(6,minmax(0,1fr)); gap: 30px;} .grid-items:has(.album2-item) {grid-template-columns: repeat(6,minmax(0,1fr)); gap: 30px;} .grid-items:has(.radio-item) {grid-template-columns: repeat(9,minmax(0,1fr)); gap: 20px;} .grid-items:has(.artist-item) {grid-template-columns: repeat(6,minmax(0,1fr)); gap: 30px;} .grid-items:has(.video-item), .content:has(> .playlist-item) {grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px;} .grid-items > .mybnr, .grid-items > .mybnr-tlg, .grid-items > .mybnr-stream {margin-bottom: 0px;} /* SLIDERS GRID ----------------------------------------------- */ .has-slider:not(.owl-carousel) {display: flex; gap: 20px; overflow: hidden;} .album-slider:not(.owl-carousel), .album2-slider:not(.owl-carousel) {gap: 43px;} .artist-slider:not(.owl-carousel) {gap: 80px;} .genres-slider:not(.owl-carousel) {gap: 15px;} .has-slider:not(.owl-carousel) > * {flex-shrink: 0;} .has-slider:not(.owl-carousel) > .album-item {width: calc((100% - 172px)/5);} .has-slider:not(.owl-carousel) > .album2-item {width: calc((100% - 215px)/6);} .has-slider:not(.owl-carousel) > .radio-item {width: calc((100% - 160px)/9);} .has-slider:not(.owl-carousel) > .artist-item {width: calc((100% - 400px)/6);} .genres.has-slider:not(.owl-carousel) > li {width: calc((100% - 75px)/6);} .has-slider .mybnr {width: 800px;} .has-slider:not(.owl-carousel) > .video-item {flex-shrink: 0; width: calc((100% - 60px)/4);} .has-slider-popular:not(.owl-carousel) {display: grid; gap: 30px; grid-template-rows: repeat(2,1fr); grid-template-columns: repeat(7,minmax(0,1fr)); grid-auto-flow: column;} .has-slider-popular:not(.owl-carousel) > .album2-item:nth-child(14) ~ .album2-item {display: none;} .popular-group {gap: 30px;} /* TRACK ITEM ----------------------------------------------- */ .trc {gap: 30px; grid-column: 1 / -1; border-bottom: 1px solid var(--bdc); padding: 15px 0; position: relative; isolation: isolate;} .trc:first-child {margin-top: -15px;} .trc::before {content: ''; position: absolute; inset: 0 -15px; z-index: -1; background-color: var(--bg); border-radius: 20px; box-shadow: var(--bsh-track); pointer-events: none; opacity: 0;} .trc__img {width: 50px; border-radius: 10px; margin-right: -15px;} .trc__desc::before {left: 65px; right: 160px;} .trc__play {position: absolute; inset: 0; width: inherit; height: inherit; border-radius: inherit; opacity: 0; transform: scale(0.3,0.3); font-size: 22px; background: rgba(10, 15, 20, 0.60) !important; backdrop-filter: blur(1px) !important; -webkit-backdrop-filter: blur(4px) !important;} .js-trc--is-playing .trc__play { background: rgba(10, 15, 20, 0.60) !important; } .trc__title {font-size: 15px; font-weight: 600;} .trc__subtitle {font-size: 14px; color: var(--tt-fade);} .trc__info, .trc__info2 {font-size: 12px; color: var(--tt-icon); width: 300px;} .trc__info2 {width: 200px;} .trc__dl {font-size: 19px; color: var(--tt-icon); margin-right: 5px;} .trc__rating a {padding-left: 28px; color: var(--tt-icon); font-weight: 500; display: block; min-width: 35px;} .trc__rating::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--tt-icon);} .trc__fav a {font-size: 20px; color: var(--tt-icon); position: relative; top: 2px;} .trc__time {color: var(--tt-fade); font-weight: 500;} .trc__ctrl-btn {font-size: 24px; height: 50px;} .trc__ctrl {position: absolute; right: 0; top: 15px; opacity: 0; z-index: 50;} @media screen and (min-width: 1220px) { .trc.ctrl-is-active .trc__time {opacity: 0; pointer-events: none;} .trc.ctrl-is-active .trc__ctrl {opacity: 1;} } .trc__desc-inner {display: inline-block; max-width: 100%;} .trc__desc-inner.expl {padding-right: 30px; position: relative;} .trc__desc-inner.expl::after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url(../images/explicit.svg) 0 0 / contain no-repeat; width: 15px; height: 15px;} .dt .trc__desc-inner.expl::after {filter: invert(1);} /* CONTROL MENU ----------------------------------------------- */ .ctrl__list {position: absolute; background-color: var(--bg); width: 285px; box-shadow: var(--bsh-long); border-radius: 10px; padding: 15px 0; z-index: 50; display: none;} .ctop > .ctrl__list {bottom: 100%;} .cbottom > .ctrl__list {top: 100%;} .cleft > .ctrl__list {right: 0;} .cright > .ctrl__list {left: 100%;} .ctrl__list .ctrl__list {right: 100%; bottom: 50%; transform: translateY(50%);} .cright .ctrl__list .ctrl__list {right: auto; left: 100%;} .ctrl__list a, .ctrl__list li > span {cursor: pointer; position: relative; display: flex; align-items: center; height: 40px; padding: 0 20px; padding-left: 65px; font-size: 13px; gap: 10px;} .ctrl__list li::before {position: absolute; left: 0; top: 0; width: 65px; height: 100%; z-index: 3; display: grid; place-items: center; font-size: 21px; color: var(--tt-icon); pointer-events: none;} .ctrl__list li {position: relative;} .ctrl__list li::after {content: ''; width: 3px; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--accent); box-shadow: 5px 0 7px rgba(56,193,111,0.32); opacity: 0; transform: scale(1,0);} .ctrl.ctrl-is-active > .ctrl__list {display: block;} .ctrl.ctrl-is-active .trc__ctrl-btn {color: var(--accent);} .trc.ctrl-is-active, .video-item:has(.ctrl-is-active), .owl-item:has(.ctrl-is-active) {z-index: 100;} .trc.ctrl-is-active::before {opacity: 1;} .js-trc--is-playing .trc__play::before, .js-trc--is-playing .popular-item__img::before, .js-trc--is-playing .page__play::before {content:"\e905";} .js-trc--is-playing .trc__play {opacity: 1; transform: scale(1,1); background-color: rgba(0,0,0,0.6);} .js-trc--is-playing.trc::before {opacity: 1;} .js-trc--is-playing .popular-item__img::before {opacity: 1; transform: scale(1,1) translate(-50%,-50%);} .js-trc--is-playing .popular-item__img {box-shadow: 0 0 27px var(--accent);} /* ALBUM ITEM, POPULAR ITEM, RADIO ITEM, ARTIST ITEM ----------------------------------------------- */ .album-item, .radio-item, .artist-item, .video-item, .album2-item {display: block; position: relative;} .album-item {background-color: var(--bg); box-shadow: var(--bsh-album); border-radius: 10px; padding: 20px 35px 16px 35px;} .album-item__img {border-radius: 10px; margin: 0 auto; margin-bottom: 14px; width: 140px;} .album-item__title, .album2-item__title {font-size: 16px; font-weight: 500; margin-bottom: 2px;} .album-item__meta {border-top: 1px solid var(--bdc); padding-top: 16px; margin-top: 16px; color: var(--tt-fade-1);} .album-item__meta span {color: var(--tt);} .album2-item__img {border-radius: 10px; box-shadow: var(--bsh-album); margin-bottom: 14px; cursor: pointer;} .album2-item__subtitle {color: var(--tt-fade); padding-top: 2px;} .popular-item .album2-item__title {font-size: 14px;} .popular-item .album2-item__subtitle {font-size: 13px;} .radio-item {background-color: var(--bg-darker-1); border-radius: 10px; overflow: hidden; position: relative;} .radio-item img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;} .radio-item__desc, .artist-item__overlay {position: absolute; inset: 0; opacity: 0; transform: scale(0.8,0.8); background-color: rgba(0,0,0,0.76); color: #fff; line-height: 1.3;} .radio-item__desc::before, .artist-item__overlay::before, .video-item__img.has-icon2::before, .playlist-item__desc::before, .popular-item__img::before {display: grid; place-items: center; width: auto; aspect-ratio: auto; border-radius: 0; margin-bottom: 5px; font-size: 52px; color: #fff; background: transparent; filter: drop-shadow(0 0 12px rgba(56,193,111,0.95)) drop-shadow(0 0 30px rgba(56,193,111,0.6));} .radio-item__title div {font-weight: 600;} .radio-item__desc::before {transform: scale(0.8,0.8) translateY(-30px); opacity: 0;} .artist-item__img {border-radius: 50%; margin-bottom: 15px; overflow: hidden;} .artist-item__title {font-size: 16px; font-weight: 600; color: var(--tt);} .artist-item__subtitle {color: var(--tt-fade); margin-top: 2px;} .artist-item__overlay {background-color: rgba(0,0,0,0.42);} .artist-item__overlay::before {width: 70px; font-size: 24px; margin-bottom: 0px; transform: scale(0.8,0.8) translateY(-30px); opacity: 0;} .artist-item__overlay span, .radio-item__title {opacity: 0; transform: translateY(30px);} /* GENRE ITEM, VIDEO ITEM, PLAYLIST ITEM ----------------------------------------------- */ .genres li {aspect-ratio: 1 / 1; position: relative; overflow: hidden; border-radius: 15px; background: var(--accent); transition: box-shadow 0.3s;} .genres li::before {content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: 0; transform: none; z-index: 1; border: none; background: repeating-linear-gradient( -45deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 14px );} .genres li::after {content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: 0; transform: none; z-index: 2; border: none; background: radial-gradient(ellipse at 0% 0%, rgba(255,255,255,0.28) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.3) 0%, transparent 55%);} .genres li a {position: absolute; inset: 0; display: flex; flex-direction: column; padding: 15px; color: #fff; font-weight: 700; font-size: 24px; line-height: 1.2; align-items: center; justify-content: center; text-align: center; animation: none; z-index: 10;} .genres li a::after {content: attr(data-text); font-size: 14px; font-weight: 500; display: block; margin-top: 3px;} .genres li:nth-child(6n+2), .genres .owl-item:nth-child(6n+2) li {background-color: #37b8d8;} .genres li:nth-child(6n+3), .genres .owl-item:nth-child(6n+3) li {background-color: #b642ec;} .genres li:nth-child(6n+4), .genres .owl-item:nth-child(6n+4) li {background-color: #ff8f3c;} .genres li:nth-child(6n+5), .genres .owl-item:nth-child(6n+5) li {background-color: #d65092;} .genres li:nth-child(6n+6), .genres .owl-item:nth-child(6n+6) li {background-color: #3675c2;} .video-item__img {margin-bottom: 12px; border-radius: 10px; cursor: pointer;} .video-item__subtitle {margin-top: 4px;} .video-item__label, .video-item__btn {background-color: var(--accent); color: #fff; height: 28px; padding: 0 12px; position: absolute; left: 14px; top: 14px; z-index: 10; border-radius: 6px;} .video-item__ctrl {position: absolute; right: 14px; top: 14px; z-index: 15;} .video-item__btn {position: static; padding: 0; width: 41px; background-color: rgba(0,0,0,0.77); font-size: 24px;} .video-item__img.has-icon2::before, .playlist-item__desc::before, .popular-item__img::before {width: auto; margin: 0; font-size: 52px; opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.5,0.5); z-index: 10;} .has-slider .video-item__list {bottom: auto !important; top: 0% !important;} .has-slider .video-item .cleft > .ctrl__list {right: 100%;} .has-slider .video-item .ctrl__list .ctrl__list {bottom: 50%; transform: translateY(80px);} /*.has-slider .video-item__list .icon2-viber, .has-slider .video-item__list .icon2-whatsapp, .has-slider .video-item__list .icon2-skype, .has-slider .video-item__list .icon2-x {display: none;}*/ .video-item__ctrl.ctrl-is-active .ctrl__btn {background-color: var(--accent); color: #fff;} .playlist-item__desc {position: absolute; inset: 0; z-index: 10; border-radius: 10px; color: #fff; padding: 30px; padding-left: 40%;} .playlist-item__count {height: 32px; border-radius: 6px; padding: 0 10px; background-color: var(--accent); color: #fff; font-weight: 600; align-self: flex-start;} .playlist-item__count::before {font-size: 17px;} .playlist-item__title {font-size: 15px; font-weight: 700; text-transform: uppercase;} .playlist-item {overflow: hidden; border-radius: 10px;} .playlist-item__img {margin: 0; overflow: hidden;} /* BANNERS ----------------------------------------------- */ .mybnr, .mybnr-stream, .mybnr-tlg, .mybnr2 {border-radius: 20px; padding: 30px 25px; height: 250px; position: relative; overflow: hidden; transition: filter 0.3s, box-shadow 0.3s;} .mybnr.sect {height: 170px;} .mybnr--pro {background: #f4f7f9 url(../images/bg-pro.png) right bottom no-repeat;} .mybnr--radio {background: #edeae3 url(../images/bg-radio.png) right bottom no-repeat;} .mybnr--youtube {background-color: #e32526;} .mybnr__desc {gap: 25px;} .mybnr__label {height: 75px; width: 113px; border-radius: 6px; text-transform: uppercase; margin-right: -8px; background-color: #ff7e00; color: #fff; font-weight: 800; font-size: 32px; margin-left: 25px;} .mybnr__desc {position: relative; z-index: 5;} .mybnr__title {font-size: 18px; font-weight: 700;} .mybnr__subtitle {font-size: 13px; margin-top: 2px; color: #464343;} .mybnr__icon {position: absolute; bottom: -24px; right: 14px; width: 150px; height: 150px;} .mybnr--radio .mybnr__desc::before {font-size: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: #fff; display: grid; place-items: center;} .mybnr--youtube .mybnr__desc::before {font-size: 44px; margin-left: 15px; margin-right: 8px;} .mybnr--youtube * {color: #fff;} .mybnr--youtube::before {content: ''; background-color: #faecec; transform: skew(-10deg); position: absolute; right: -20px; top: 0; height: 100%; width: 50%;} .mybnr--youtube .mybnr__icon {width: 141px; height: 58px; right: 46px; bottom: 50%; transform: translateY(50%);} .mybnr-stream {background: #e6eff5 url(../images/bg-stream.png) left bottom no-repeat; color: #232323; padding-left: 360px; padding-right: 120px; font-weight: 700; height: 170px;} .mybnr-stream__title {font-size: 34px;} .mybnr-stream__subtitle {font-size: 20px;} .mybnr-stream__title:first-child::before {content: ''; width: 15px; height: 15px; border-radius: 50%; background-color: #ff63ab; margin-right: 13px; animation: live 1.2s linear infinite;} .mybnr-stream__title.logo-icon::before {width: 60px; background-size: 51px; background-position: center bottom -7px; margin-right: 20px;} .mybnr-tlg {background: #40bef6 url(../images/bg-tlg.png) center bottom no-repeat; color: #fff !important; height: 170px;} .mybnr-tlg__desc::before {font-size: 63px;} .mybnr-tlg__desc {gap: 24px;} .mybnr-tlg__title {font-size: 24px; font-weight: 700;} .mybnr-tlg__subtitle {font-size: 15px; font-weight: 500;} .mybnr-some {background: #96e321 url(../images/bg-heart_music.jpg) center center / cover no-repeat; color: #fff !important; height: 170px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Добавляет тень на текст */} .mybnr-some2 {background: #96e321 url(../images/bg-reg_us.jpg) center center / cover no-repeat; color: #fff !important; height: 170px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Добавляет тень на текст */} .mybnr--telegram {background: #40bef6 url(../images/bg-telegram2.jpg) center center no-repeat;} .mybnr--radio2 {background: #59819b url(../images/bg-trans_radio.png) center center no-repeat;} .mybnr--radio3 {background: #59819b url(../images/bg-rwb_radio.jpg) center center no-repeat;} .mybnr--telegram *, .mybnr--radio2 * .mybnr--radio3 * {color: #fff;} .mybnr--telegram .mybnr__desc::before, .mybnr--radio2 .mybnr__desc::before, .mybnr--radio3 .mybnr__desc::before {margin: 0; font-size: 44px;} .mybnr2 {height: 170px; font-size: 15px; font-weight: 500; --tt: #fff; position: relative; isolation: isolate; padding: 0 var(--indent); background-color: var(--accent);} .mybnr2__title {font-size: 20px; font-weight: 700;} .mybnr2__icon, .mybnr2::before {position: absolute; right: var(--indent); top: 50%; transform: translateY(-50%); height: 120px; width: 120px; background-color: #fff; border-radius: 50%; padding: 15px; z-index: -1; display: grid; place-items: center; box-shadow: 0 0 0 100px rgba(255,255,255,0.2), 0 0 0 150px rgba(255,255,255,0.1), 0 0 0 200px rgba(255,255,255,0.1);} .mybnr2::before {color: #40bef6; font-size: 60px; padding: 0;} .mybnr2--tlg {background: linear-gradient(135deg, #6b9899, #332a90);} .mybnr2--kiss {background: linear-gradient(135deg, #da00be, #fbd301);} .mybnr2--registr {background: linear-gradient(135deg, #38c16f, #38c16f);} .mybnr2--pro1 {background: linear-gradient(135deg, #da00be, #fbd301);} .mybnr2--lux {background: linear-gradient(135deg, #a697df, #f14b4b);} .mybnr2--trance {background: linear-gradient(135deg, #4facfe, #aab406);} .mybnr2--tunemo {background: linear-gradient(135deg, #3e9c92, #bdd956);} /* SIDEBAR ----------------------------------------------- */ .sb__header {gap: 40px; padding-top: 10px; margin-bottom: 60px;} .sb__btn-toggle {font-size: 24px; position: relative; left: 10px;} .sb__menu {gap: 5px;} .sb__menu a {display: flex; align-items: center; height: 40px; color: var(--tt-fade-0); padding-left: 30px; gap: 20px; position: relative;} .sb__menu a::before {width: 26px; font-size: 23px; color: var(--tt-icon);} .sb__menu a::after {content: ''; width: 3px; height: 100%; position: absolute; top: 0; right: -3px; background-color: #1ed76000; box-shadow: -5px 0 7px rgba(56,193,111,0); opacity: 0; transform: scale(1,0);} .sb__menu a.is-active {color: var(--tt);} .sb__menu a.is-active::before {color: var(--accent);} .sb__menu a.is-active::after {opacity: 1; transform: none;} .sb__menu span {display: flex; align-items: center; gap: 15px; flex-grow: 1;} .sb__online span::after {content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #ff63ab; animation: live 1.2s linear infinite;} .sb__menu-years {padding: 25px 20px; padding-right: 0; margin-right: 20px; margin-top: 30px; gap: 15px; border-top: 1px solid var(--bdc-darker);} .sb__menu-years li {flex: 1 0 0; min-width: 26%;} .sb__menu-years a, .sb__menu-years button {display: flex; align-items: center; justify-content: center; height: 35px; border-radius: 10px; background-color: var(--bg-darker-2); color: var(--tt-fade-1); font-size: 13px; font-weight: 500; padding: 0; width: 100%;} .sb__menu-years button {font-size: 24px;} @media screen and (min-width: 1220px) { .col2 .wrapper {background-size: calc(100% - 80px) auto;} .col2 .wrapper__main {grid-template-columns: 95px minmax(0,1fr);} .col2 .sb__logo, .col2 .sb__menu-years {display: none;} .col2 .sb__menu a {padding: 0; justify-content: center;} .col2 .sb__menu span {position: absolute; height: 44px; border-radius: 10px; background-color: var(--accent); color: #fff; padding: 0 15px; font-size: 14px; white-space: nowrap; box-shadow: 0 0 27px rgba(94,121,142,0.57); left: 90%; top: 50%; margin-top: -22px; opacity: 0; visibility: hidden; transform: translateX(30px);} .sb__menu {gap: 10px;} .col2 .header__logo { display: flex !important; flex-direction: column !important; /* вертикальная колонка */ align-items: center !important; /* центр по горизонтали */ justify-content: flex-start !important; /* от верхнего края */ width: 100% !important; margin: 0 auto !important; padding-top: 16px !important; position: relative !important; } .col2 .header__logo.logo-icon::before { left: 50% !important; transform: translateX(-50%) scale(-1,1) !important; position: absolute !important; top: 50% !important; } .col2 .sb__btn-toggle {width: 100%; left: 0;} .col2 {--indent-negative: -115px; --indent: 115px;} } @media screen and (min-width: 1600px) { .col2 {--indent-negative: -150px; --indent: 150px;} .col2 .wrapper__main {grid-template-columns: 95px minmax(0,1fr);} } /* FOOTER, PAGINATION ----------------------------------------------- */ .footer__apps {gap: 15px; grid-column: 1 / 2; align-self: center;} .footer__apps a {display: grid; place-items: center; width: 60px; aspect-ratio: 1 / 1; border-radius: 20px; background: #9fa4ae; color: #fff; font-size: 30px;} .footer__qr {grid-row: 1 / 3; grid-column: 3 / 4; aspect-ratio: 1 / 1; position: relative; margin-left: 60px;} .footer__qr img {width: 100%; height: 100%; position: absolute; left: 0%; top: 0%;} .footer__qr-caption {font-size: 11px; text-align: center; position: absolute; left: 0; right: 0; top: 100%; margin-top: 10px;} .footer__menu {grid-column: 1 / 3; border-top: 1px solid var(--bdc-darker-1); padding-top: 26px; display: grid; gap: 15px; grid-template-columns: repeat(3,1fr) max-content; align-self: start;} .footer__text {align-self: center;} .pagination {gap: 20px 60px; padding-top: 20px;} .pagination a, .pagination span {display: grid; place-items: center; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--bdc);} .pagination__pages {gap: 10px 10px; font-size: 16px;} .pagination__pages span:not(.nav_ext) {background-color: var(--accent); color: #fff; border-color: var(--accent);} .sect:has(.trc) .pagination {padding-top: 40px;} /* INNER PAGE ----------------------------------------------- */ .page {position: relative;} .page__bg { position: absolute; left: var(--indent-negative); right: var(--indent-negative); top: -140px; z-index: 0; aspect-ratio: 3 / 1.5; } .page__bg::before {content: ''; z-index: 1; position: absolute; inset: 0; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(20px);} .page__bg::after {content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, var(--bg) 0%, transparent 50%);} .page__main {display: grid; gap: 24px 55px; grid-template-columns: 350px 1fr;} .page__main-img {border-radius: 10px; grid-column: 1 / 2; grid-row: 1 / 3;} .page__main-img a {position: absolute; left: 10px; top: 10px; border-radius: 10px; width: 40px; height: 40px; display: grid; place-items: center; background-color: rgba(0,0,0,0.6); color: #fff; font-size: 18px;} .page__main-header {align-self: end;} .page__caption {font-weight: 500; color: var(--tt-icon); margin-bottom: 11px;} .page__main-header h1 {font-size: 16px; color: var(--tt-fade);} .page__main-header span {display: block; font-size: 30px; font-weight: 700; color: var(--tt);} .page__main-header.expl h1 span::after {content: ''; display: inline-block; vertical-align: middle; margin-left: 10px; background: url(../images/explicit.svg) 0 0 / contain no-repeat; width: 15px; height: 15px;} .dt .page__main-header.expl h1 span::after {filter: invert(1);} .page__play { width: 64px; height: 64px; min-width: 64px; border-radius: 50%; padding: 0; font-size: 0; gap: 0; margin-right: 10px; display: flex; align-items: center; justify-content: center; } .page__play::before { font-size: 28px; } .page__ctrl-btn, .page__actions > a, .page__fav, .page__dl {display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; background-color: var(--bg); color: var(--tt-fade); font-size: 24px; border: 1px solid var(--bdc-darker-1); border-radius: 50px; padding: 0; cursor: pointer;} .page__meta {color: var(--tt-fade); --tt: var(--tt-fade); margin-top: 15px;} .page__meta a {text-decoration: underline;} .page__genres {--tt: var(--accent); margin-top: 30px;} .page__ctrl.ctrl-is-active {z-index: 150;} .page__ctrl.ctrl-is-active .page__ctrl-btn {background-color: var(--bg-btn-hover); color: var(--tt-btn); border-color: var(--bg-btn-hover);} .favin, .page__fav::before {position: relative; top: 1px;} .page__actions--btns {margin-bottom: 25px;} .page__actions--btns > a {width: 40px; height: 40px; font-size: 18px; border-radius: 10px;} .page__pl {padding: 0; border: 0; margin: -7px;} .page__pl a {display: inline-flex; align-items: center; margin: 7px; padding: 0 20px; border-radius: 10px; background-color: var(--bg-darker-2); color: var(--tt-fade-1); height: 40px;} .page__text, .page__info {max-height: 66vh; overflow-x: hidden; overflow-y: auto;} .page__video {background-color: #000;} .page__info li + li {margin-top: 15px;} .page__info li > div:first-child {font-weight: 600; color: var(--tt-fade-1);} .page__info li a {text-decoration: underline; color: var(--accent);} .page-video .page__actions--btns {margin-right: 330px;} .page-video__cols {display: grid; gap: 30px; grid-template-columns: minmax(0,1fr) 300px; margin-bottom: 20px;} .page-video__like a {display: flex; align-items: center; height: 40px; border-radius: 10px; padding: 0 20px; background-color: var(--bg-darker-2); color: var(--tt-fade-1); gap: 5px;} .page-video__like a .has-icon {font-size: 22px; margin-right: 15px;} .page-video .ctrl__btn {width: 40px; height: 40px; border-radius: 10px; font-size: 18px; padding: 0;} .page__views {position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 10px 20px; white-space: nowrap; font-size: 12px; background-color: rgba(0,0,0,0.2); color: #fff; backdrop-filter: blur(10px); border-radius: 20px;} .page-radio .page__main-img img {width: 100%; height: 100%; object-fit: contain;} .page-radio .page__main-img {background-color: var(--bg); display: grid; place-items: center;} .page-playlist .page__main {grid-template-columns: 420px 1fr;} .page-playlist .page__main-img {aspect-ratio: 3 / 1.9;} .page-tv__cols {display: grid; gap: 30px; grid-template-columns: minmax(0,1fr) 30%; margin-bottom: 30px;} .page-tv__chat, .page-tv__video {background-color: #000; position: relative;} .nMeet_area {position: absolute; inset: 0;} .nMeet_area {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .nMeet_area .nMeet_chat_list_area {height: calc(100% - 45px);} .nMeet_modal_smiles {overflow: auto;} .tooltip {position: absolute; top: 45px; right: 10px; background-color: #f3ebebd6; color: #000000; padding: 20px; border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: none; z-index: 100; width: calc(100% - 20px); word-wrap: break-word; overflow: auto; font-size: 12px;} .tooltip-close {position: absolute; top: 5px; right: 5px; cursor: pointer; font-size: 18px;} .tooltip-title {font-weight: 600; font-size: 15px; margin-bottom: 10px;} .tooltip-list {list-style: disc; padding-left: 10px;} /* TEXT BLOCK, TYPOGRAPHY, VIDEO BLOCK ----------------------------------------------- */ .page__title {margin-bottom: 30px; font-size: 24px;} .full-text {line-height: 1.5; font-size: 15px; word-wrap: break-word;} .full-text a {text-decoration: underline; color: var(--accent);} .video-responsive {padding-top: 60%; position: relative; background-color: #000;} .video-responsive > iframe, .video-responsive > video {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} /* LOGIN ----------------------------------------------- */ .lp { position: fixed; z-index: 990; left: 0; top: 0; width: 100%; height: 100%; background-image: url("../images/bg-login.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: rgba(10,16,22,.65); background-blend-mode: overlay; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .lp > img { display: none; } .lp-panel { background-color: var(--bg); width: 100%; max-width: 520px; position: relative; border-radius: 20px; padding: 36px 34px; margin: auto; box-shadow: var(--bsh-long); } .lp-panel > img { display: none; } .lp-panel--auth, .lp-panel--register { max-width: 640px; min-height: auto; } .lp-panel--auth .lp-panel__title, .lp-panel--register .lp-panel__title { font-size: 30px; font-weight: 700; margin-bottom: 14px; } .lp-panel--auth .lp-panel__subtitle, .lp-panel--register .lp-panel__subtitle { font-size: 14px; line-height: 1.6; color: var(--tt-fade); margin-bottom: 28px; } .lp-panel--auth .lp-panel__form, .lp-panel--register .lp-panel__form { display: flex; flex-direction: column; gap: 18px; } .lp-panel--auth .lp-panel__btns, .lp-panel--register .lp-panel__btns { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px; margin-bottom: 0; } .lp-panel--auth .lp-panel__link, .lp-panel--register .lp-panel__link { background-color: var(--bg-darker-1); color: var(--tt); } .lp-panel--auth .lp-panel__social, .lp-panel--register .lp-panel__social { margin-top: 28px; } .lp-panel--auth center { margin-top: 4px; } .lp-panel--auth center a { color: var(--accent); text-decoration: underline; } .lp-panel__close {position: absolute; right: -36px; top: -36px; font-size: 24px;} .lp-panel__logo {margin-bottom: 60px; padding-left: 84px;} .lp-panel__logo.logo-icon::before {width: 64px; background-size: 54px; background-position: center bottom -8px;} .lp-panel__logo .logo__subtitle {font-size: 15px; margin-top: 5px;} .lp-panel__title {font-size: 24px; margin-bottom: 15px;} .lp-panel__subtitle {color: var(--tt-fade); font-size: 13px; margin-bottom: 30px; line-height: 1.6;} .lp-panel__subtitle a {text-decoration: underline; color: var(--accent);} .lp-panel__form {gap: 20px;} .lp-panel__input::before {position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--ui-tt-fade); width: 60px; pointer-events: none;} .lp-panel__input::after {content: attr(data-text); color: var(--ui-tt-fade); background-color: var(--bg); transition: padding 0.2s, font-size 0.2s, transform 0.2s, top 0.2s; pointer-events: none; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);} .lp-panel__input.is-active::after {top: 0; font-size: 13px; padding: 0 10px;} .lp-panel__input.is-active::before {color: var(--accent);} .lp-panel__btns {gap: 20px; padding-top: 6px; margin-bottom: 25px;} .lp-panel__btns > * {border-radius: 6px;} .lp-panel__link {background-color: var(--bg-darker-1); color: var(--tt);} .lp-panel__social-caption {width: 100%; gap: 10px; color: var(--ui-tt-fade); margin-bottom: 25px;} .lp-panel__social-caption::before, .lp-panel__social-caption::after {flex-grow: 1; background: var(--bdc); height: 1px; content: '';} .lp-panel__social a {width: 100px; height: 50px; background-color: var(--bg-darker-1); border-radius: 10%; margin: 0 6px; color: var(--tt-fade); font-size: 20px;} .lp-panel__close {z-index: 10;} .lp--appear {animation: appear 1s 1 ease-in-out; animation-fill-mode: forwards; display: flex;} .lp--appear .lp-panel {animation: appear2 0.3s 1 ease-in-out; animation-fill-mode: forwards; opacity: 0; transform: scale(0.9,0.9); animation-delay: 0.6s;} .lp--hiding {animation: hiding 1s 1 ease-in-out; animation-fill-mode: forwards;} .lp--hiding .lp-panel {animation: hiding2 0.3s 1 ease-in-out; animation-fill-mode: forwards;} @keyframes appear {0% {clip-path: circle(0% at 0% 0%)} 100% {clip-path: circle(150vmax at 0% 0%)}} @keyframes appear2 {0% {opacity: 0; transform: scale(0.9,0.9);} 100% {opacity: 1; transform: scale(1,1);}} @keyframes hiding {0% {clip-path: circle(150vmax at 0% 0%)} 100% {clip-path: circle(0% at 0% 0%)}} @keyframes hiding2 {0% {opacity: 1; transform: scale(1,1);} 100% {opacity: 0; transform: scale(0.9,0.9);}} body.login-is-active {padding-right: var(--scrWidth,15px); /* overflow already hidden */} .header__btn-notification.unread::after { content: attr(data-unread); width: 16px; height: 16px; border-radius: 50%; background-color: #ff63ab; position: absolute; right: 0px; top: 5px; color: #fff; font-size: 12px; } .header__login-short::before {font-size: 24px; color: var(--tt-icon); margin-right: -3px;} .header__login-img {width: 50px; height: 50px; border-radius: 50%;} .header__login-name {font-weight: 500;} .header__login-img .header__login-status {border-radius: 8px; height: 16px; font-size: 10px; position: absolute; left: 130%; top: 0px; transform: translate(-50%,-50%); padding: 0 6px;} .header__login-status, .header__lp-status-label div:first-child {height: 23px; padding: 0 10px; border-radius: 30px; font-size: 12px; font-weight: 500; text-transform: uppercase; background-color: var(--bg-colored); color: var(--tt-on-colored); transition: top 0.2s linear;} .header__lp-status-label div:first-child {font-size: 14px; display: inline-flex;} .header__login-status--pro, .header__lp-status-label div.pro {background-color: #9F00FF; color: #fff;} .header__lp, .header__notification-list {position: absolute; right: 0; top: 100%; background-color: var(--bg); box-shadow: var(--bsh-long); border-radius: 15px; width: 360px; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(30px);} .is-active .header__lp, .is-active .header__notification-list {opacity: 1; visibility: visible; transform: translateY(0px);} .header__lp-header {padding: 30px; padding-bottom: 20px; font-size: 18px;} .header__lp-avatar {width: 90px; height: 90px; border-radius: 50%; margin-bottom: 8px;} .header__lp-group, .header__lp-group * {color: var(--tt-fade-1) !important; font-size: 13px; font-weight: 400;} .header__lp-header > a, .header__lp-header > button {position: absolute; top: 15px; left: 15px; font-size: 24px;} .header__lp-header > button {left: auto; right: 15px;} .header__lp-status {background-color: var(--bg-darker); padding: 20px 30px; color: var(--tt-fade-1); font-size: 13px;} .header__lp-btn {width: 160px; height: 34px; border-radius: 10px; font-size: 13px;} .header__lp-menu {padding: 20px 0;} .header__lp-menu a {display: flex; align-items: center; height: 44px; gap: 15px; padding: 0 30px;} .header__lp-menu a span, .header__lp-menu a div {margin-left: auto; font-size: 12px; pointer-events: none;} .header__lp-menu a::before {width: 24px; font-size: 24px; color: var(--tt-icon);} .header__notification-list {width: 390px; padding: 15px;} .header__notification-list-inner {max-height: 360px; overflow-y: auto; padding: 15px; padding-right: 25px;} .header__notification-item {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed var(--tt-icon);} .header__notification-item-title {font-size: 15px; font-weight: 500;} .header__notification-item-text {color: var(--tt-fade); font-size: 13px; margin-top: 10px;} .header__notification-item-meta {color: var(--tt-icon); font-size: 13px; gap: 10px 20px; margin-top: 10px;} .header__notification-item-meta a {text-decoration: underline; color: var(--accent);} .header__notification-item-status {font-size: 12px;} .header__notification-item-status::before {font-size: 19px;} .header__notification-item-status.icon-check::before {color: var(--accent);} /* GET REGISTRATION, VIDEO POPUP, REGISTER PAGE, RKL PROMOCODE POPUP, PROMOCODE PAGE ----------------------------------------------- */ .getreg, .pp {background-color: var(--bg); border-radius: 20px; padding: 160px 80px 90px 80px; width: 630px; position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: var(--bsh-long); max-width: calc(100vw - 40px);} .getreg::before {width: 220px; position: absolute; left: 50%; top: 0%; transform: translate(-50%,-39%); background-position: center bottom -30px; background-size: 185px; border-radius: 60px;} .getreg__title {font-weight: 800; font-size: 30px;} .getreg__subtitle {color: var(--tt-fade); margin-bottom: 30px;} .getreg__text {color: var(--tt-fade); margin-bottom: 40px;} .getreg__btn {padding: 0 45px; background-color: #151515; border-radius: 10px; font-size: 16px; font-weight: 600;} .getreg__close {position: absolute; right: 5px; top: 5px; font-size: 24px;} .getreg__later {font-size: 12px; text-transform: uppercase; height: auto; margin-top: 15px; width: 100%; text-transform: none; font-weight: 400; color: var(--tt-fade);} .pp {padding: 30px; padding-top: 20px;} .pp__header {margin-bottom: 20px; font-size: 24px; font-weight: 500; cursor: pointer;} .pp__content .d-none {display: block;} .pp__content .page__subtitle, .pp:has(.video-responsive) .pp__header .flex-grow-1 {display: none;} .pp:has(.video-responsive) {padding: 0 !important; background: none; box-shadow: none;} .pp:has(.video-responsive) .pp__header {position: absolute; color: #fff; right: 0px; bottom: 100%; font-size: 28px; padding: 0; margin: 0;} .pp:has(.video-responsive) .pp__header::before {display: grid; place-items: center; width: 40px; height: 40px;} @media screen and (min-width: 1220px) { .pp:has(.video-responsive) {width: calc(100vw - 200px) !important;} .pp:has(.video-responsive) .pp__header {right: auto; bottom: auto; right: -70px; top: -30px;} .pp .video-responsive {height: calc(100vh - 100px); padding: 0;} .pp:has(.video-responsive) .pp__header::before {border-radius: 50%; background-color: rgba(255,255,255,0.15);} } .wrapper--register {background: url(../images/bg-login.jpg) center top / 100% auto fixed no-repeat !important; padding: 60px 0; flex: 1 1 auto; overflow-y: auto !important; height: auto !important;} .wrapper--register .wrapper__container {display: block; height: auto; padding: 0;} .wrapper--register .wrapper__main, .wrapper--register .player { display: none !important; } body:has(.wrapper--register) .player { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .wrapper--register .lp-panel {margin: 0 auto; max-width: 1200px;} @keyframes borderGlow { 0%, 100% { box-shadow: 0 0 32px rgba(56,193,111,0.15), 0 40px 80px rgba(0,0,0,0.85); } 50% { box-shadow: 0 0 52px rgba(56,193,111,0.3), 0 40px 80px rgba(0,0,0,0.85); } } @keyframes popIn { from { opacity: 0; transform: scale(0.95) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes progressShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .rkla { position: fixed; inset: 0; z-index: 999; background: rgba(8, 11, 14, 0.6); backdrop-filter: blur(10px) saturate(130%) brightness(0.65); -webkit-backdrop-filter: blur(20px) saturate(130%) brightness(0.65); display: flex; justify-content: center; align-items: center; } .rkla__close { position: absolute; right: 20px; top: 20px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: rgba(238, 238, 238, 0.55); z-index: 100; background: rgba(14, 19, 23, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: color 0.18s ease, background 0.18s ease, transform 0.22s ease, border-color 0.18s ease; } .rkla__close:hover { color: #38c16f; background: rgba(56, 193, 111, 0.15); border-color: rgba(56, 193, 111, 0.45); transform: rotate(90deg) scale(1.08); } .rkla__inner { position: relative; background: rgba(20, 26, 34, 0.45); backdrop-filter: blur(32px) saturate(150%) brightness(0.9); -webkit-backdrop-filter: blur(32px) saturate(150%) brightness(0.9); border-radius: 20px; border: 1px solid rgba(56, 193, 111, 0.25); color: #eeeeee; width: 800px; max-width: 100%; overflow: hidden; animation: popIn 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) both, borderGlow 3.5s ease infinite; } .rkla__inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(56, 193, 111, 0.55) 50%, transparent 100%); pointer-events: none; z-index: 2; } .rkla__img { aspect-ratio: 3 / 1; padding: 20px; background: rgba(10, 13, 17, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(56, 193, 111, 0.12); } .rkla__desc { background-color: rgba(14, 19, 23, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 30px; display: flex; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.05); } .rkla__desc-left { flex-grow: 1; } .rkla__desc-right { width: 300px; margin-left: 20px; } .rkla__desc-right { display: flex; justify-content: flex-end; width: 100%; max-width: 300px; margin-left: 20px; } @media (max-width: 768px) { .rkla__desc-right { justify-content: center; margin-left: 0; margin-top: 15px; } } .rkla__btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; font-size: 18px; font-weight: 600; color: #38c16f; background: rgba(56, 193, 111, 0.1); border: 1.5px solid rgba(56, 193, 111, 0.4); border-radius: 10px; cursor: pointer; position: relative; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .rkla__btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(56, 193, 111, 0.2), transparent); transform: skewX(-16deg); transition: left 0.5s ease; pointer-events: none; } .rkla__btn:hover::before { left: 160%; } .rkla__btn:hover { color: #fff; background: rgba(56, 193, 111, 0.22); border-color: rgba(56, 193, 111, 0.75); box-shadow: 0 8px 25px rgba(56, 193, 111, 0.35); } .rkla__progress-container { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.07); border-radius: 20px; overflow: hidden; } .rkla__progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #38c16f 0%, #38c19f 50%, #38c16f 100%); background-size: 200% 100%; animation: progressShimmer 2s linear infinite; box-shadow: 0 0 10px rgba(56, 193, 111, 0.65); border-radius: 20px; } .prcode__header {max-width: 600px; gap: 15px;} .prcode__header input {border-radius: 15px;} .prcode__benefits {gap: 20px; padding-top: 60px;} .prcode__ben {border-radius: 10px; padding: 20px; font-size: 18px; flex: 1 0 280px; min-width: 280px; background-color: var(--bg-darker); min-height: 160px; border: 3px solid var(--bdc-lighter); gap: 20px;} .prcode__ben::before {font-size: 34px; color: var(--accent); align-self: flex-start;} /* PLAYER ----------------------------------------------- */ /* Layout (position, size, border-radius, flex) is set in BASIC LAYOUT above. Only visual/internal styles here. */ .player__btns {gap: 15px; align-self: stretch; box-shadow: 20px 0 35px rgba(0 0 0 / 0%); width: 267px; margin-right: 10px; padding-left: 8px;} .player__btn {width: 40px; height: auto; aspect-ratio: 1 / 1; background: none; padding: 0; color: var(--tt-icon); font-size: 28px;} .player__btn-prev, .player__btn-next {font-size: 28px; --tt-icon: #b7b7b7;} .player__btn-repeat, .player__btn-shuffle, .player__btn-playlist, .player__btn-menu {font-size: 22px; color: var(--tt-icon);} .player__btn-playlist {font-size: 28px;} .player__btn-menu {font-size: 24px;} .player .ctrl__list .ctrl__list {transform: translateY(80px);} .player__img {width: 40px; aspect-ratio: 1 / 1; margin-right: 15px; border-radius: 5px;} .player__title {font-weight: 600; font-size: 15px;} .player__subtitle {font-size: 13px; color: var(--tt-fade); margin-top: 3px;} .player__time {display: flex; align-items: center; justify-content: center; height: 30px; min-width: 100px; border-radius: 6px; padding: 0 10px; font-size: 13px; position: absolute; left: var(--time-progress,0%); bottom: 100%; pointer-events: none; gap: 5px; color: #fff; background: var(--accent);} .player__time::after {content: ''; border: 8px solid transparent; border-top-color: var(--accent); position: absolute; top: 100%; left: 50%; transform: translateX(-50%);} .player__pl-count {font-size: 13px; color: var(--tt-fade); gap: 3px;} .player__pl-count span:first-child {color: var(--tt); font-weight: 600;} .player__info-text {max-width: calc(100% - 125px); margin-right: 30px; position: relative;} .player__info-text.expl {padding-right: 30px;} .player__info-text.expl:after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url(../images/explicit.svg) 0 0 / contain no-repeat; width: 15px; height: 15px;} .player__volume {margin-left: 10px;} .player__volume .player__range {width: 150px;} .player audio {display: none;} .player__range {--bdc: #e2e4e5;} .player__bar {position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: -10px; --bdc: #b5c0cb; border-radius: 20px 20px 0 0;} .player__range input[type="range"] {-webkit-appearance: none; appearance: none; justify-content: flex-start; background: none; height: 12px; padding: 0; width: 100%; cursor: pointer; display: flex; flex-direction: column;} .player__range input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; cursor: pointer; width: 0; height: 0; margin-top: 0; border-radius: 50%; background: var(--accent);} .player__range input[type="range"]::-webkit-slider-runnable-track {width: 100%; height: 6px; cursor: pointer; background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-progress), var(--bdc) var(--range-progress), var(--bdc) 100%); border-radius: 6px;} .player__range input[type="range"]::-moz-range-thumb {-webkit-appearance: none; appearance: none; cursor: pointer; width: 0; height: 0; margin-top: 0; border: 0; border-radius: 50%; background-color: var(--accent);} .player__range input[type="range"]::-moz-range-track {width: 100%; height: 6px; cursor: pointer; background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-progress), var(--bdc) var(--range-progress), var(--bdc) 100%); border-radius: 2px;} .player--is-playing .player__btn-play::before {content:"\e905";} .player--is-repeated .player__btn-repeat:not(:hover), .player--is-shuffled .player__btn-shuffle:not(:hover), .player__ctrl.ctrl-is-active .player__btn-menu, .player__btn-playlist.is-active {color: var(--accent);} .player__playlist-title {max-width: calc(100% - (var(--indent)*2)); margin: 0 auto; font-size: 18px; font-weight: 600; height: 80px; cursor: pointer;} .player__playlist-title::before {font-size: 24px;} @media screen and (min-width: 1220px) { /* no scrWidth offset needed — body doesn't scroll */ } body.pl-opened {padding-right: var(--scrWidth,15px); /* overflow already hidden */} .pl-item {gap: 15px; position: relative; cursor: pointer; padding: 15px var(--indent); border-bottom: 1px solid var(--bdc);} .pl-item__img {width: 50px; height: 50px; border-radius: 10px;} .pl-item__title {font-size: 15px; font-weight: 600; color: var(--tt);} .pl-item__subtitle {font-size: 14px; color: var(--tt-fade);} .pl-item__time {color: var(--tt-fade); font-weight: 500; width: 120px; height: 50px;} .pl-item__img::before {position: absolute; inset: 0; border-radius: inherit; z-index: 5; display: grid; place-items: center; color: #fff; background-color: #272b29b5; font-size: 24px; content:"\e904"; font-family:'ft-custom'; opacity: 0; transition: opacity 0.2s linear;} .pl-item.is-playing {cursor: pointer; pointer-events: auto; background-color: var(--bg-darker);} .pl-item.is-playing::before {content: ''; width: 10px; height: 100%; position: absolute; top: 0; left: 0; background-color: #1dce5c; box-shadow: 5px 0 7px rgba(56,193,111,0.32);} .pl-item.is-playing .pl-item__img::before {background-color: rgba(0,0,0,0.6); content:"\e905"; opacity: 1;} .pl-item:hover .pl-item__img::before {opacity: 1;} .pl-item:hover {background-color: var(--bg-darker);} .pl-item.is-playing .pl-item__time {background: url(../images/waves.gif) left center / 40px no-repeat;} .player--not-loaded button:not(.player__btn-play), .player--not-loaded .player__dl, .player--not-loaded .player__bar {pointer-events: none;} .player__bar {transition: margin-bottom 0.2s linear;} .player__time {opacity: 0; transform: scale(0.6,0.6) translate(-50%,-10px); transform-origin: center center; transition: opacity 0.2s, transform 0.2s;} .player__bar input[type="range"]::-webkit-slider-thumb {transition: opacity 0.2s linear;} .player:not(.player--not-loaded):hover .player__bar input[type="range"]::-webkit-slider-runnable-track {transition: height 0.2s linear;} .player:not(.player--not-loaded):hover .player__bar input[type="range"]::-moz-range-thumb {transition: opacity 0.2s linear;} .player:not(.player--not-loaded):hover .player__bar input[type="range"]::-moz-range-track {transition: height 0.2s linear;} .player:not(.player--not-loaded):hover .player__time {opacity: 1; transform: scale(1,1) translate(-50%,-10px);} .player:not(.player--not-loaded):hover .player__bar {margin-bottom: 0px;} .player:not(.player--not-loaded):hover .player__bar input[type="range"]::-webkit-slider-thumb {opacity: 0;} .player:not(.player--not-loaded):hover .player__bar input[type="range"]::-webkit-slider-runnable-track {height: 6px;} .player:not(.player--not-loaded):hover .player__bar input[type="range"]::-moz-range-thumb {opacity: 0;} .player:not(.player--not-loaded):hover .player__bar input[type="range"]::-moz-range-track {height: 6px;} /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel {width: 100%; position: relative; z-index: 1;} .owl-stage {position: relative; display:flex; justify-content:flex-start;} .owl-stage-outer {position: relative; transform: translate3d(0px, 0px, 0px);} .owl-item {position: relative; min-height: 10px;} .owl-nav.disabled,.owl-dots.disabled, .owl-carousel.owl-refresh .owl-item {display: none;} .owl-carousel.owl-drag .owl-item {user-select: none;} .owl-carousel.owl-grab {cursor: move; cursor: grab;} .owl-nav {position: absolute; left: 0; right: 0; top: 50%; margin-top: -30px;} .owl-prev, .owl-next {cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: absolute; top: 0; background-color: #30353e; color: var(--tt-icon); font-size: 24px; box-shadow: 0 5px 10px rgba(0,0,0,0.066);} .owl-prev {left: -30px;} .owl-next {right: -30px;} .owl-prev:hover, .owl-next:hover {background-color: var(--bg-btn-hover); color: var(--tt-btn);} .video-slider .owl-nav button {margin-top: -25px;} .artist-slider .owl-nav button {margin-top: -25px;} .album2-slider .owl-nav button {margin-top: -30px;} #owl-popular .owl-nav {left: auto; top: 0; margin-top: -82px; display: flex; gap: 10px;} #owl-popular .owl-nav button {position: static; margin: 0;} .sect:has(.has-slider-popular) .sect__header {padding-right: 140px;} .sect:has(.has-slider-popular) {padding-top: 15px; margin-top: -15px;} .sect:has(.has-slider), .sect:has(.has-slider-popular) {margin-left: var(--indent-negative); margin-right: var(--indent-negative); padding-left: var(--indent); padding-right: var(--indent); overflow: hidden; padding-bottom: 80px; margin-bottom: 0 !important;} .sect--last, .sect--last-full:has(.owl-nav.disabled) {padding-bottom: 0 !important;} .has-slider:has(.owl-nav.disabled) + .owl-carousel-progress-bar {display: none;} .has-slider:not(.mybnr-slider) .owl-item, .has-slider-popular .owl-item {opacity: 0; pointer-events: none; transform: scale(0.6,0.6); transition: opacity 0.3s, transform 0.3s;} .has-slider:not(.mybnr-slider) .owl-item.active, .has-slider-popular .owl-item.active {opacity: 1; pointer-events: auto; transform: scale(1,1);} .owl-carousel-progress-bar {position: absolute !important; margin-bottom: 45px !important; left: var(--indent); right: var(--indent); bottom: 0; border-radius: 3px;} .owl-carousel-progress-bar-scroller {border-radius: 3px;} .mybnr-slider .owl-stage-outer {overflow: hidden;} .mybnr-slider.owl-carousel {margin-left: var(--indent-negative); margin-right: var(--indent-negative); width: calc(100% + (var(--indent)*2));} .mybnr-slider .owl-prev {left: var(--indent);} .mybnr-slider .owl-next {right: var(--indent);} .mybnr-slider .owl-nav.disabled {display: block;} .trfs {display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px;} .trf {display: flex; flex-direction: column; align-items: center; padding: 32px 20px 24px; border-radius: 16px; overflow: hidden; position: relative; gap: 0; background: linear-gradient(160deg, #0f1923 0%, #111820 100%); border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 8px 32px rgba(0,0,0,0.4); transition: transform 0.2s, box-shadow 0.2s;} .trf:hover {transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.5);} .trf::before {display: none;} .trf::after {content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); border-radius: 16px 16px 0 0;} .trf-title {font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 16px; margin-top: 16px; text-align: center;} .trf-list {display: none;} .trf-price {flex-direction: column; align-items: center; gap: 2px; margin: 0 0 8px; padding: 0;} .trf-price-cur {font-size: 48px; font-weight: 800; line-height: 1; color: #fff; letter-spacing: -1px; text-transform: none;} .trf-price-old {display: none;} .trf-price-old::before {display: none;} .trf-price-label {font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.35); margin-top: 4px;} .trf-btn {width: 100%; padding: 13px 0; border-radius: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; text-align: center; margin-top: auto; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); transition: background 0.2s, border-color 0.2s;} .trf-btn-orange {background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); pointer-events: none;} .trf-btn-red {background-color: #da0202;} .trf-popular {background: linear-gradient(160deg, #0e1a10 0%, #0d1a10 100%); border: 1px solid rgba(56,193,111,0.5); box-shadow: 0 8px 40px rgba(56,193,111,0.15), 0 0 0 1px rgba(56,193,111,0.1);} .trf-popular:hover {box-shadow: 0 16px 50px rgba(56,193,111,0.25);} .trf-popular::after {background: linear-gradient(90deg, transparent, rgba(56,193,111,0.6), transparent);} .trf-popular .trf-title {color: rgba(56,193,111,0.8);} .trf-popular .trf-price-cur {color: #38c16f;} .trf-popular .trf-btn {background: #38c16f; border-color: #38c16f; color: #fff; box-shadow: 0 4px 20px rgba(56,193,111,0.4);} .trf-popular .trf-btn:hover {background: #44d47a; box-shadow: 0 6px 28px rgba(56,193,111,0.55);} .trf-dark {--bg: #273644; color: #fff; --tt-fade-1: #ccc;} .dt .trf-dark {border: 3px solid var(--bdc);} .trf-best {position: absolute; top: -14px; left: 50%; transform: translateX(-50%);} .trf-popular {overflow: visible !important;} @media screen and (max-width: 1220px) { .trfs {gap: 20px;} } @media screen and (min-width: 761px) { :root {--indent: 40px; --indent-negative: -40px;} .col2 {--indent-negative: -40px; --indent: 40px;} } .dle-bug label { display: block; margin: 5px 0px; } .owl-carousel-progress-bar, .owl-carousel-progress-bar-scroller { display: none !important; } .album-item, .album2-item__img, .popular-item__img { box-shadow: none !important; } .artist-item, .artist-item__img, .popular-item__img { box-shadow: none !important; } @keyframes colorPulse { 0%, 100% { color: #ffffff; } 50% { color: #38c16f; } } .js-trc--is-playing .js-trc__play::before { animation: colorPulse 1.6s ease-in-out infinite !important; text-shadow: none !important; filter: none !important; opacity: 1 !important; } .js-trc--is-playing .js-trc__play { opacity: 1 !important; transform: scale(1,1) !important; background: rgba(0,0,0,0.5) !important; } /* ====================== DLE PUSH NOTIFICATIONS ====================== */ .DLEPush.jGrowl { position: fixed !important; top: auto !important; bottom: 75px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; z-index: 1100 !important; width: 500px !important; } @media screen and (max-width: 760px) { .DLEPush.jGrowl { bottom: 145px !important; width: calc(100% - 24px) !important; left: 12px !important; transform: none !important; } } .DLEPush-notification { background: rgba(15, 18, 25, 0.75) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 14px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; color: #fff !important; padding: 16px 22px !important; width: 100% !important; min-width: unset !important; max-width: unset !important; margin-bottom: 10px !important; box-sizing: border-box !important; } .DLEPush-notification .jGrowl-header, .DLEPush-notification b {color: #fff !important; font-weight: 600 !important; font-size: 15px !important;} .DLEPush-notification .jGrowl-message {color: rgba(255,255,255,0.75) !important; font-size: 14px !important;} .DLEPush-close {color: rgba(255,255,255,0.5) !important; background: transparent !important; border: none !important;} .DLEPush-close:hover {color: #fff !important;} /* Hide empty ghost notifications */ .DLEPush-notification:empty { display: none !important; } .DLEPush-notification:not(:has(*)) { display: none !important; } .DLEPush-notification.push-success .DLEPush-icon {color: #38c16f !important;} .DLEPush-notification.push-error .DLEPush-icon {color: #dc3545 !important;} .wrapper--register { display: flex; align-items: center; justify-content: center; padding: 40px 20px; background-image: url("../images/bg-login.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .wrapper--register .lp-panel { width: 100%; max-width: 700px; margin: 0 auto; } .wrapper--register .lp-panel { max-width: 520px; width: 100%; margin: 0 auto; padding: 36px 34px; border-radius: 18px; } /* одинаковый размер логина и регистрации */ .wrapper--register .lp-panel, .lp-panel--auth { max-width: 520px; } /* ── DESKTOP ONLY: player layout — btns centered, desc on left ── */ @media screen and (min-width: 761px) { .player { position: relative !important; } .player__btns { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 2; } .player__bar { top: 0; bottom: auto; left: 10; right: 10; height: 8px; margin-bottom: 0; border-radius: 16px 16px 0 0; overflow: visible; } .player__time { z-index: 30; } } /* Grid: 4 columns × 2 rows */ .tl-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 8px; } /* Card */ .tl-item { display: flex; flex-direction: row; align-items: center; background: rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; cursor: pointer; position: relative; min-width: 0; transition: background 0.2s; } .tl-item:hover { background: rgba(255,255,255,0.12); } /* Active (currently playing) — darker */ .tl-item.js-trc--is-playing { background: rgba(0,0,0,0.35); } /* Thumbnail */ .tl-item__img { width: 64px; height: 64px; min-width: 64px; flex-shrink: 0; position: relative; overflow: hidden; } .tl-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.2s; } .tl-item:hover .tl-item__img img { filter: brightness(0.65); } /* Play icon overlay on thumbnail */ .tl-item__img.has-icon2::before { font-size: 20px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.5); opacity: 0; z-index: 10; color: #fff; filter: drop-shadow(0 0 6px rgba(56,193,111,0.9)); transition: opacity 0.2s, transform 0.2s; } .tl-item:hover .tl-item__img.has-icon2::before, .tl-item.js-trc--is-playing .tl-item__img.has-icon2::before { opacity: 1; transform: translate(-50%,-50%) scale(1); } /* Text */ .tl-item__desc { flex: 1 1 0; min-width: 0; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; overflow: hidden; text-decoration: none; } .tl-item.js-trc--is-playing .tl-item__desc { padding-right: 50px; } /* Artist name — small muted */ .tl-item__author { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.3; } /* Track name — bold */ .tl-item__title { font-size: 14px; font-weight: 600; color: var(--tt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.3; } /* Green circular play button — currently playing */ .tl-item.js-trc--is-playing::after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/14px no-repeat; z-index: 5; pointer-events: none; } .tl-grid.owl-carousel .owl-item { opacity: 0; pointer-events: none; transform: scale(0.6); transition: opacity 0.3s, transform 0.3s; } .tl-grid.owl-carousel .owl-item.active { opacity: 1; pointer-events: auto; transform: scale(1); } /* Card — horizontal row, fixed height so all cards are equal */ .tl-item { display: flex !important; flex-direction: row !important; align-items: center !important; background: rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; cursor: pointer; position: relative; min-width: 0; transition: background 0.2s; padding: 0 !important; height: 64px; /* fixed = same for ALL cards regardless of title length */ } .tl-item:hover { background: rgba(255,255,255,0.12); } .tl-item.js-trc--is-playing { background: rgba(0,0,0,0.35); } /* Thumbnail — override img-fixed-size / ar-1-1 square behaviour */ .tl-item__img { width: 64px !important; height: 64px !important; min-width: 64px !important; flex-shrink: 0; border-radius: 0 !important; margin: 0 !important; padding-top: 0 !important; /* kill ar-1-1 padding-top:100% */ aspect-ratio: unset !important; box-shadow: none !important; position: relative; overflow: hidden; } .tl-item__img img { position: static !important; /* kill img-fixed-size absolute */ width: 100% !important; height: 100% !important; object-fit: cover; display: block; } /* Text */ .tl-item__desc { flex: 1 1 0; min-width: 0; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; overflow: hidden; text-decoration: none; height: 100%; } .tl-item.js-trc--is-playing .tl-item__desc { padding-right: 50px; } .tl-item__author { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.3; } .tl-item__title { font-size: 14px; font-weight: 600; color: var(--tt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.3; } /* Green circular play button — clipped by card overflow:hidden */ .tl-item.js-trc--is-playing::after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/14px no-repeat; z-index: 5; pointer-events: none; } /* Arrow positioning — match album2-slider */ .tl-grid.owl-carousel { overflow: visible !important; position: relative !important; } .tl-grid .owl-nav { margin-top: -68px !important; } /* All sizes — bigger cards */ .tl-item { height: 80px !important; } .tl-item__img { width: 80px !important; height: 100px !important; min-width: 100px !important; } .tl-item__author { font-size: 12px !important; } .tl-item__title { font-size: 14px !important; } @media screen and (min-width: 470px) { .tl-item { height: 90px !important; } .tl-item__img { width: 90px !important; height: 100px !important; min-width: 100px !important; } .tl-item__title { font-size: 15px !important; } } @media screen and (min-width: 760px) { .tl-item { height: 110px !important; } .tl-item__img { width: 110px !important; height: 110px !important; min-width: 110px !important; } .tl-item__author { font-size: 13px !important; } .tl-item__title { font-size: 16px !important; } } /* Bigger play/pause icon on thumbnails */ .tl-item__img.popular-item__img::before { font-size: 44px !important; } .tl-item.js-trc--is-playing::after { display: none !important; } /* ADD THIS LINE to kill the original white circle rings from styles.css */ .mybnr2--tunemo .mybnr2__icon, .mybnr2--tunemo.mybnr2::before { box-shadow: none; } /* Then all the rest of the banner styles: */ @keyframes tn-shimmer { 0%{left:-60%} 100%{left:130%} } @keyframes tn-glow { 0%,100%{opacity:.5} 50%{opacity:.9} } @keyframes tn-float { 0%,100%{transform:translateY(-50%) scale(1);box-shadow:0 0 0 14px rgba(99,102,241,.16),0 0 0 30px rgba(99,102,241,.08),0 0 0 50px rgba(99,102,241,.04),0 0 22px 6px rgba(99,102,241,.22),0 8px 28px rgba(0,0,0,.7)} 50%{transform:translateY(calc(-50% - 7px)) scale(1.03);box-shadow:0 0 0 20px rgba(99,102,241,.20),0 0 0 42px rgba(99,102,241,.10),0 0 0 64px rgba(99,102,241,.05),0 0 32px 10px rgba(99,102,241,.30),0 12px 36px rgba(0,0,0,.8)} } @keyframes tn-sweep { 0%{left:-70px;opacity:0} 12%{opacity:1} 38%{left:185px;opacity:0} 100%{left:185px;opacity:0} } .mybnr2--tunemo { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(108deg,#181826 0%,#19192e 30%,#22223e 65%,#191d35 100%); border:1px solid rgba(255,255,255,.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(99,102,241,.10),0 0 0 1px rgba(99,102,241,.05),0 16px 56px rgba(0,0,0,.8); } .mybnr2--tunemo::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; right:auto; background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.016) 46%,rgba(255,255,255,.038) 50%,rgba(255,255,255,.016) 54%,transparent 72%); box-shadow:none; transform:skewX(-14deg); z-index:3; pointer-events:none; animation:tn-shimmer 9s cubic-bezier(.4,0,.2,1) infinite; } .mybnr2--tunemo .mybnr2__title { font-size:22px; font-weight:700; letter-spacing:.2px; color:#f8fafc; position:relative; z-index:4; } .mybnr2--tunemo .mybnr2__subtitle { font-size:10px; font-weight:400; letter-spacing:2.5px; text-transform:uppercase; color:rgba(148,163,184,.5); position:relative; z-index:4; } .mybnr2--tunemo .mybnr2__icon { position:absolute; right:var(--indent); top:50%; height:120px; width:120px; border-radius:50%; overflow:hidden; background:#fff; border:1.5px solid rgba(99,102,241,.30); display:grid; place-items:center; padding:14px; box-sizing:border-box; box-shadow:0 0 0 14px rgba(99,102,241,.16),0 0 0 30px rgba(99,102,241,.08),0 0 0 50px rgba(99,102,241,.04),0 0 22px 6px rgba(99,102,241,.22),0 8px 28px rgba(0,0,0,.7); animation:tn-float 5s ease-in-out infinite; z-index:4; } .mybnr2--tunemo .mybnr2__icon img { width:100%; height:100%; object-fit:contain; display:block; } .mybnr2--tunemo .mybnr2__icon::after { content:''; position:absolute; top:-35px; left:-70px; width:22px; height:230px; background:rgba(255,255,255,.22); transform:rotate(28deg); border-radius:8px; pointer-events:none; animation:tn-sweep 5s ease-in-out infinite; } .mybnr2--tunemo .mybnr2__icon::before { display:none; } .tn-line { position:absolute; bottom:0; left:6%; right:6%; height:1px; background:linear-gradient(90deg,transparent,rgba(99,102,241,.4) 25%,rgba(129,140,248,.75) 50%,rgba(99,102,241,.4) 75%,transparent); z-index:4; pointer-events:none; } /* ✅ CORRECT — invisible but still clickable */ @media screen and (min-width: 591px) { .player__bar input[type="range"]::-webkit-slider-thumb { opacity: 0 !important; width: 1px !important; height: 1px !important; } .player__bar input[type="range"]::-moz-range-thumb { opacity: 0 !important; width: 1px !important; height: 1px !important; } } #owl-popular .owl-nav { margin-top: -69px; } .dt .player__volume .player__range { --bdc: rgba(255, 255, 255, 0.28); } .player__volume .player__range { width: 100px; } @media screen and (max-width: 760px) { .header__btn-login::before { font-size: 24px; } } .artist-item__overlay::before { font-size: 52px; width: 90px; } /* Play overlay on recommendation blocks */ .related-slider .album2-item__img { position: relative; overflow: hidden; } .related-slider .album2-item__img::before { content: "\e904"; /* icon2-play glyph from ft-custom font */ font-family: ft-custom; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); border-radius: 10px; display: grid; place-items: center; font-size: 52px; color: #fff; opacity: 0; transform: scale(0.85); transition: opacity 0.22s ease, transform 0.22s ease; z-index: 2; } .related-slider .album2-item:hover .album2-item__img::before { opacity: 1; transform: scale(1); } .album2-item__desc:hover, .album2-item__desc:hover * { text-decoration: none !important; } .tl-item__desc:hover, .tl-item__desc:hover * { text-decoration: none !important; } @media (max-width: 768px) { .content section.sect:first-of-type { margin-top: 16px; } } .footer { border-top: none; } /* Mobile-only logo in header — phones only, mirrored */ @media screen and (max-width: 560px) { .header::before { content: ''; display: block; width: 50px; height: 50px; border-radius: 15px; background: url(../images/logo.png) center bottom -4px / 38px no-repeat; flex-shrink: 0; order: -1; transform: scaleX(-1); } } /* Logo in header — shown on mobile + tablet (when sidebar is hidden), hidden on desktop */ @media screen and (max-width: 1219px) { .header::before { content: ''; display: block; width: 44px; height: 44px; border-radius: 15px; background: url(../images/logo.png) center bottom 4px / 38px no-repeat; flex-shrink: 0; order: -1; transform: scaleX(-1); align-self: center; } } .header__logo-mobile { display: none; position: absolute; left: 0; top: 0; width: 60px; height: 60px; z-index: 10; } @media (max-width: 1220px) { .header__logo-mobile { display: block; } } .sb__favorites::before { color: var(--accent) !important; animation: favPulse 1s ease-in-out infinite; filter: drop-shadow(0 0 0 rgba(56,193,111,0)); } @keyframes favPulse { 0%, 100% { color: var(--accent); filter: drop-shadow(0 0 0 rgba(56,193,111,0)); transform: scale(1); } 50% { color: #50e48b; filter: drop-shadow(0 0 12px rgba(56,193,111,0.75)); transform: scale(1.08); } }