/* Version: 3.0 */ /* Author code: wakanda */ /* Author design: unknown */ /* -------------------------------- */ /* Design rights: YRS inc 2021 - 2024 (c) */ /* Link:*/ @charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap'); /* Setting's */ :root { --default-font-familt: "Inter"; --default-font-size: 16px; --default-font-weight: 500; --default-background: #14151A; --default-color: #ffffffd6; --default-color-hover: #ffffff; --light-font-weight: 300; --bold-font-weight: 700; --over-big-font-size: 30px; --big-font-size: 24px; --small-font-size: 14px; --over-small-font-size: 12px; --secondary-color: #b8a3a3; --price-color: #2a2b31; --cancel-color: #44242e; --title-color: #e3e3e3; --description-color: #c0c0c0; --progress-bar-1: rgb(62, 93, 173); --progress-bar-1-hover: rgb(84 121 217); --progress-bar-2: rgb(173, 62, 62); --progress-bar-2-hover: rgb(223 80 80); } :root[data-theme=red_black] { --accent-color-800: #2b2c33; --accent-color-900: #26262c; --bg-color-800: #202020; --bg-color-700: #1D1E23; /**/ --bg-color-900: #1d1b1a; } /*-----------*/ /* Secondary CSS */ * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: var(--default-font-family), sans-serif; color: var(--default-font-color); } img { -webkit-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; } body::-webkit-scrollbar { width: 0px; } body { background-color: var(--default-background); font-weight: var(--default-font-weight); } .container { max-width: 1427px; width: auto; } /*-----------*/ /* Custom CSS */ .Header-module__custom { margin-bottom: 35px; min-height: 50px; font-weight: var(--default-font-weight); width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; } .HeaderButtons-module { display: flex; gap: 30px; align-items: center; } .HeaderButtons-module__container { display: flex; gap: 13px; padding: 7px; align-items: center; } .Container__promo { background: linear-gradient(135.00deg, rgb(50, 34, 96) 0%,rgb(71, 51, 131) 100%); transition: 0.2s; transform-origin: top left; backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .Container__promo:hover { box-shadow: 0px 0px 50px 0px rgb(81 57 154 / 35%); transform: scale(1.05); transition: 0.2s; } .Container__bonus { background: linear-gradient(135.00deg, rgb(99, 83, 34) 0%,rgb(148, 124, 47) 100%); transition: 0.2s; transform-origin: top left; backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .Container__bonus:hover { box-shadow: 0px 0px 50px 0px rgb(197 165 62 / 35%); transform: scale(1.05); transition: 0.2s; } .content__image { display: flex; align-items: center; justify-content: center; padding: 3px; } .content__text { font-weight: var(--light-font-weight); font-size: var(--default-font-size); } .Container__promo .content__image { box-shadow: 0px 0px 50px 0px rgb(81, 57, 154); background: rgb(110, 80, 204); } .Container__bonus .content__image { box-shadow: 0px 0px 50px 0px rgb(157 130 46); background: rgb(197, 165, 62); } .newsContainer { display: flex; flex-direction: row; gap: 30px; } .News-module__container { height: 267px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 50px; padding: 40px; gap: 10px; } .news__promo { background-image: url(https://gspics.org/images/2024/04/22/0jKPOR.png); background-size: cover; } .news__24h { background-image: url(https://gspics.org/images/2024/03/02/0eRg8Z.png); background-size: cover; } .news__promo>.title { width: 275px; } .news__24h>.title { width: 350px; } .News-module__container>.description { color: var(--secondary-color); width: 255px; } .News-module__container>.title { font-size: var(--over-big-font-size); color: var(--default-color-hover); font-weight: var(--default-font-weight); } .News-module__container>p>span{ font-weight: var(--bold-font-weight); } .custom__btn { width: 165px; height: 40px; display: flex; align-items: center; justify-content: center; margin-top: 8px; } @keyframes hoverAnimationNewsP { 0% { box-shadow: 0px 4px 30px 0px rgb(61 103 255 / 20%); background: rgb(71 105 226); color: var(--default-color); } 50% { box-shadow: 0px 4px 30px 0px rgb(61 103 255 / 80%); background: rgb(87 120 235); color: var(--default-color-hover); } 100% { box-shadow: 0px 4px 30px 0px rgb(61 103 255 / 20%); background: rgb(71 105 226); color: var(--default-color); } } @keyframes hoverAnimationNews24 { 0% { box-shadow: 0px 4px 30px 0px rgba(62, 42, 147, 20%); background: rgb(75, 50, 184); color: var(--default-color); } 50% { box-shadow: 0px 4px 30px 0px rgba(62, 42, 147, 80%); background: rgb(106 79 219); color: var(--default-color-hover); } 100% { box-shadow: 0px 4px 30px 0px rgba(62, 42, 147, 20%); background: rgb(75, 50, 184); color: var(--default-color); } } .Modules-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .Modules-container>.content { display: flex; flex-direction: row-reverse; align-items: center; gap: 20px; } .Modules-container>.title, .ProductModal-module__header.boxHeader { font-size: var(--big-font-size); font-weight: var(--default-font-weight); color: var(--default-color-hover); } .HeaderLinks-module { display: flex; flex-direction: row; gap: 20px; } .PlayerMenu-module__avatar { border-radius: 50%; border: 1px dashed var(--accent-color-800); width: 48px; height: 48px; transition: 0.2s; } .PlayerMenu-module__avatar:hover, .PlayerMenu-module__avatar:focus{ transform: scale(1.2); transition: 0.2s; } .PlayerMenu-module__avatar>a>img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .Social-Module__wrapper { display: flex; flex-direction: row; justify-content: space-between; padding: 15px 0; } .Social-Module__wrapper .boxBodyCustom { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; padding: 17px 10px; background-color: #2c226e; transition: 0.2s; } .Container__rules { background: linear-gradient(135.00deg, rgb(99 34 57) 0%, rgb(143 47 148) 100%); transition: 0.2s; transform-origin: top left; backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .Container__rules:hover { box-shadow: 0px 0px 50px 0px rgb(143 47 148 / 35%); transform: scale(1.05); transition: 0.2s; } .Container__rules .content__image { box-shadow: 0px 0px 50px 0px rgb(175 71 134) 0%; background: rgb(175 71 134) 0%; } .Social-Module__wrapper .boxBodyCustom:hover { background-color: #3b2f8f; color: var(--default-color-hover); transition: 0.2s; } .Social-Module__wrapper .boxBodyCustom>p { font-size: var(--default-font-size); font-weight: var(--default-font-weight); } .Social-Module__wrapper .boxBodyCustom>p>span { font-weight: var(--default-font-weight); } .customModalContent { width: 520px; } .customModalContent .boxHeader { display: flex; justify-content: space-between; } .customModalContent .boxBody { background: var(--bg-color-700); text-align: left; } .customModalContent>.boxHeader>.text { display: flex; align-items: center; flex-direction: row; gap: 10px; } .customModalContent>.boxHeader>.text>.title { font-size: var(--big-font-size); } .customModalOverflow .Button-module__btn.Button-module__gray { color: #fff; background-color: #ffffff00; border-color: #ffffff00; opacity: 0.7; transition: 0.2s; border: 0px; width: 50px; } .customModalOverflow .Button-module__btn.Button-module__gray:hover { transition: 0.2s; background-color: #ffffff00; opacity: 1; border: 0px; } .body__content { padding: 15px; border-radius: 10px; box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.3); } .body__content>p { font-weight: var(--light-font-weight); } .body__content>p>span { font-weight: var(--default-font-weight); } .boxCustom { display: flex; flex-direction: row; gap: 50px; justify-content: space-between; padding-bottom: 35px; } .boxCustomWidget { display: flex; flex-direction: column; gap: 10px; justify-content: space-between; padding-bottom: 35px; align-items: center; margin-top: 20px; padding: 20px; } .customModalContent .boxFooter { color: rgb(173, 173, 173); border: 2px dashed var(--bg-color-800); padding: 10px; border-radius: 0 0 10px 10px; background: var(--accent-color-800); font-size: 12px; } .body__text>p { text-align: center; align-items: center; } .action { display: flex; align-items: center; gap: 20px; } .price { border-radius: 10px; box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.3); padding: 10px; width: 90px; text-align: center; } .body__price { gap: 10px; display: flex; flex-direction: column; } .discount { padding: 10px; border-radius: 10px; box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.3); background: var(--accent-color-800); } .span__price { display: flex; align-items: center; gap: 5px; } .Product-module__wrapper>.Product-module__price>.span__price>img { opacity: 0.7; transition: 0.2s; } .Product-module__wrapper:hover>.Product-module__price>.span__price>img { opacity: 1; transition: 0.2s; } .desc__content { padding: 10px; background-color: var(--accent-color-900); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .desc__content__img { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .desc__content>a>img { width: 135px; border-radius: 8px; } .desc__content>font, .desc__content__img>font { font-size: 14px; font-weight: 500; padding: 5px 10px; background: var(--accent-color-800); border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 3px 50px 0px rgba(0, 0, 0, 0.3); } .content__info>.title { font-size: 17px; color: var(--title-color); margin-bottom: 3px; font-weight: 500; } .content__info>.description { font-weight: 300; color: var(--description-color); font-size: 14px; } .desc__title { margin-bottom: 5px; } .desc__title__kit { margin-top: 10px; margin-bottom: 5px; } .News-module__container.news__promo { width: 40%!important; } .News-module__container.news__24h { width: 60%!important; } /*-----------*/ /* Main CSS */ .Banner-module__img, .LangSwitcher-module__currentLang, .Header-module__logoWrapper, .Shop-module__header, .Categories-module__categories, .Product-module__name, .MonitoringWidget-module__header, .Widgets-module__widgetWrapper .boxFooter, .MonitoringServer-module__icon, .MonitoringServer-module__progressInfo, .productModalProductAvailability, .productModalItemCount, .ProfileNav-module__header.boxHeader, .ProfileContent-module__header.boxHeader { display: none; } .content__image, .HeaderButtons-module__container, .PlayerMenu-module__loginLink, .Header-module__wrapper, .custom__btn, .Servers-module__server, .Search-module__wrapper, .Product-module__wrapper, .DesktopCopyright-module__wrapper, .MobileCopyright-module__wrapper, .PlayerBalance-module__btn, .PlayerMenu-module__profileLink, .MonitoringServer-module__wrapper, .MonitoringServer-module__progressBarWrapper, .Social-Module__wrapper .boxBodyCustom, .Button-module__btn.Button-module__accent, .Button-module__btn.Button-module__gray, .TotalSum-module__inputWrapper, .CountSelector-module__inputWrapper, .Toast-module__toast, .ProductItemSelector-module__items, .ProductItemSelector-module__item.ProductItemSelector-module__active, .ProductItemSelector-module__item:hover, .ProductItemSelector-module__item:focus, .productModalDescription, .productModalContainsItem, .PlayerMenuMobile-module__profileLink, .PlayerMenuMobile-module__loginLink, .Widgets-module__widgetWrapper, .PlayerBalanceModal-module__inputWrapper, .HeaderNav-module__link:hover, .HeaderNav-module__link:focus, .ProfileContent-module__infoWrapper, .Selector-module__dropDownCurrentItem, .ProfileContent-module__input, .ProfileNav-module__img, .BasketSearch-module__wrapper, .BasketTable-module__tableHeader, .BasketTable-module__tableLine:nth-child(2n-1), .HistorySearch-module__wrapper, .HistoryTable-module__tableHeader, .HistoryTable-module__tableLine:nth-child(2n-1), .Cookie-module__wrapper, .boxBody:last-child { border-radius: 10px!important; } .MonitoringWidget-module__header, .ProfileContent-module__header, .ProfileNav-module__header, .BasketContent-module__header.boxHeader, .HistoryContent-module__header.boxHeader, .WelcomeSelectServer-module__header.boxHeader, .ProductModal-module__header.boxHeader, .PlayerBalanceModal-module__header { border-radius: 10px 10px 0px 0px; } .MonitoringWidget-module__body, .ProfileNav-module__wrapper .boxFooter, .ItemContent-module__footer.boxFooter, .PlayerBalanceModal-module__footer, .RouletteContent-module__footer.boxFooter { border-radius: 0px 0px 10px 10px; } .ModalLayout-module__positionWrapper { text-align: center; display: flex; justify-content: center; align-items: center; } .Product-module__price, .customModalContent .boxBody { border-radius: 0px 0px 10px 10px; } .customModalContent .boxHeader { border-radius: 10px 10px 0px 0px; } .Shop-module__wrapper .boxBody, .Search-module__iconWrapper, .Shop-module__wrapper .boxFooter, .MonitoringWidget-module__body.boxBody, .Social-Module__wrapper .boxBody, .ProfileNav-module__wrapper .boxFooter { background: #ffffff00; } .News-module__container { border-radius: 20px; } .Header-module__wrapper { padding: 0 95px; } .PlayerMenu-module__loginLink, .PlayerBalance-module__btn, .PlayerMenu-module__profileLink { background: var(--bg-color-700); font-weight: var(--default-font-weight); } .PlayerMenu-module__loginLink>p>span { font-weight: var(--bold-font-weight); } .PlayerMenu-module__loginLink { line-height: 15px; letter-spacing: 1px; padding: 12px; } .HeaderNav-module__wrapper, .PlayerBalance-module__btn, .PlayerMenu-module__profileLink, .PlayerMenu-module__loginLink { text-transform: capitalize; line-height: 15px; letter-spacing: 1px; } .HeaderNav-module__link, .PlayerMenuMobile-module__profileLink, .PlayerMenuMobile-module__loginLink { font-weight: var(--light-font-weight); padding: 10px 15px; position: relative; transition: 0.2s; background: #2c226e; border-radius: 10px; } .PlayerMenuMobile-module__loginLink { display: flex; justify-content: flex-start; } .profileLink { font-weight: var(--light-font-weight); padding: 15px 10px; position: relative; transition: 0.2s; text-decoration: none; font-size: var(--default-font-size); display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; letter-spacing: 1px; } .HeaderNav-module__link:hover, .HeaderNav-module__link:focus, .SupportLink-module__link:hover, .SupportLink-module__link:focus { color: var(--default-color-hover); transition: 0.2s; background: #3b2f8f; } .SupportLink-module__link { font-weight: var(--light-font-weight); padding: 15px 10px; } .HeaderNav-module__linkActive { color: var(--default-color-hover)!important; } .customModalPosition { align-items: center; backdrop-filter: blur(10px); transition: backdrop-filter 0.5s ease; } .Header-module__wrapper { margin-bottom: 30px; } .Servers-module__servers { flex-direction: row; } .Servers-module__servers { flex-wrap: unset; margin: 0px; } .Servers-module__server { margin: 0 10px; min-width: 125px; } .Search-module__wrapper { margin-top: 0px; height: 54px; max-width: 280px; background: #2c226e; } .Search-module__input { font-size: 15px; min-width: 240px; width: 100%; padding: 0 10px; } .Servers-module__server.Servers-module__active, .Servers-module__server:hover, .Servers-module__server:focus { background-color: #3b2f8f; color: var(--default-color-hover); } .Servers-module__server { font-size: var(--small-font-size); background-color: #2c226e; } .Products-module__wrapper { margin-top: 20px; width: 100%; display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 15px; } .Products-module__wrapper { gap: 30px; } .Product-module__price { position: absolute; bottom: 0; top: unset; width: 100%; display: flex; align-items: center; justify-content: center; height: 40px; background: var(--price-color); font-size: var(--default-font-size); font-weight: var(--default-font-weight); } .Product-module__wrapper { height: 300px; display: flex; align-items: flex-start; justify-content: center; transition: 0.2s; overflow: visible; } .Product-module__wrapper:hover { background: var(--price-color); transform: translateY(-10px); transition: 0.2s; color: var(--default-color); box-shadow: 0px 10px 15px 1px rgb(93 79 181 / 30%); } .DesktopCopyright-module__wrapper { font-size: var(--over-small-font-size)!important; background-color: var(--accent-color-800)!important; } .MobileCopyright-module__wrapper { display: flex; flex-direction: column; font-size: var(--default-font-size)!important; background-color: var(--accent-color-800)!important; margin-top: 15px; } .MobileCopyright-module__wrapper > .MobileCopyright-module__link { white-space: nowrap; margin-left: 5px; color: var(--default-color-hover); } .DesktopCopyright-module__link, .ShopFooter-module__link, .ShopFooter-module__link:hover { white-space: nowrap; margin-left: 5px; color: var(--default-color-hover); } .Product-module__oldPrice { position: relative; margin-right: 10px; } .Product-module__discount { top: -10px; right: -10px; width: 60px; height: 60px; line-height: 40px; border-radius: 50%; padding: unset; text-align: center; font-size: 15px; z-index: 1; transition: background-color 0.15s; display: flex; justify-content: center; align-items: center; font-size: var(--default-font-size); font-weight: var(--default-font-weight); border: 5px solid #14151a; } .MonitoringServer-module__wrapper { background: var(--bg-color-700); padding: 15px; transition: 0.2s; transform-origin: top left; backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .MonitoringServer-module__wrapper:hover>.MonitoringServer-module__name { color: var(--default-color-hover); transition: 0.2s; } .MonitoringServer-module__wrapper:hover>.MonitoringServer-module__info { color: var(--default-color-hover); transition: 0.2s; } .MonitoringServer-module__wrapper.MonitoringServer-module__info, .MonitoringServer-module__wrapper>.MonitoringServer-module__name { transition: 0.2s; font-size: var(--small-font-size); } .MonitoringServer-module__wrapper:hover { transform: scale(1.05); transition: 0.2s; } .MonitoringServer-module__wrapper+.MonitoringServer-module__wrapper { margin-top: 20px; } .Shop-module__wrapper .boxBody, .Shop-module__wrapper .boxFooter, .MonitoringWidget-module__body.boxBody { padding: 15px 0; } .MonitoringServer-module__progressBarWrapper { height: 15px; background-color: #181818; } .MonitoringServer-module__progressBarAnim { box-shadow: unset; background: var(--progress-bar-1); transition: 0.2s; } .MonitoringServer-module__progressBarAnim:hover { background: var(--progress-bar-1-hover); transition: 0.2s; } .MonitoringServer-module__wrapper.MonitoringServer-module__info, .MonitoringServer-module__wrapper>.MonitoringServer-module__name, .MonitoringServer-module__wrapper>[data-monitoringserverid="30220"] .MonitoringServer-module__progressBarAnim, .MonitoringServer-module__wrapper>[data-monitoringserverid="29724"] .MonitoringServer-module__progressBarAnim { transition: 0.2s; } .MonitoringServer-module__info { font-size: var(--over-small-font-size); } .Widgets-module__widgetWrapper+.Widgets-module__widgetWrapper { margin-top: -1px; } .MonitoringWidget-module__body.boxBody { padding: 5px 0px!important; } .ModalLayout-module__positionWrapper { backdrop-filter: blur(10px); transition: backdrop-filter 0.5s ease; } .PlayerBalanceModal-module__header { font-size: var(--big-font-size); } .Button-module__btn { width: 120px; height: 40px; color: var(--default-color)!important; } .Button-module__btn.Button-module__accent:hover, .Button-module__btn.Button-module__accent:focus { color: var(--default-color-hover)!important; } .Button-module__btn.Button-module__gray { border: 2px solid var(--accent-color-800); } .Button-module__btn.Button-module__gray:hover, .Button-module__btn.Button-module__gray:focus { color: var(--default-color-hover)!important; background-color: var(--cancel-color); border: 2px solid var(--cancel-color); } .PlayerBalanceModal-module__currency, .PlayerBalanceModal-module__input { background: var(--accent-color-800); } .boxBody { background: var(--bg-color-700); } .TotalSum-module__inputWrapper, .CountSelector-module__inputWrapper { border: 2px solid var(--accent-color-800); } .CountSelector-module__changeCountBtn.CountSelector-module__left { border-right: 0px; } .CountSelector-module__changeCountBtn.CountSelector-module__right { border-left: 0px; } .CountSelector-module__changeCountBtn { transition: 0.2s; } .CountSelector-module__changeCountBtn:hover, .CountSelector-module__changeCountBtn:focus { transition: 0.2s; background: var(--accent-color-800); } .ProductModal-module__header.boxHeader { display: flex; justify-content: center; } .Product-module__oldPrice { font-size: var(--small-font-size); } .productModalGiveText { color: rgb(173, 173, 173); border: 2px dashed var(--bg-color-800); padding: 2%; border-radius: 10px; background: var(--accent-color-800); font-size: var(--over-small-font-size); } .ProductModal-module__command, .ProductModal-module__bp, .ProductModal-module__item, .ProductModal-module__dropdown { width: 520px; } .productModalImg { filter: drop-shadow(rgba(70, 82, 82, 0.8) 2px 2px 4px) drop-shadow(rgba(70, 82, 82, 0.8) -2px -2px 4px); } .ProductItemSelector-module__item.ProductItemSelector-module__active, .ProductItemSelector-module__item:hover, .ProductItemSelector-module__item:focus { border: 2px solid var(--accent-color-800); background: var(--accent-color-800); } .ProductItemSelector-module__item:hover, .ProductItemSelector-module__item:focus { transform: translateY(-5px); } .RouletteContent-module__lineWrapper { position: relative; width: 100%; overflow: hidden; display: flex; height: 290px; align-items: center; background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0.6) 100%); background: var(--bg-color-700); } .RouletteContent-module__lineWrapper::before, .RouletteContent-module__lineWrapper::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; } .RouletteContent-module__lineWrapper::before { left: 0; background: linear-gradient(to right, rgb(29 30 35) 0%, rgb(29 30 35 / 50%) 30%, rgba(0, 0, 0, 0) 100%); } .RouletteContent-module__lineWrapper::after { right: 0; background: linear-gradient(to left, rgb(29 30 35) 0%, rgb(29 30 35 / 50%) 30%, rgba(0, 0, 0, 0) 100%); } .RouletteContent-module__rouletteItem { background: #ffffff00; } .RouletteContent-module__rouletteItemImg { transform: skewY(-2deg); background-color: var(--bg-color-700); background-size: 400% 400%; border-radius: 20px; padding: 10px; box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.2); } .RouletteContent-module__triangle.RouletteContent-module__bottom { display: none; } .RouletteContent-module__triangle.RouletteContent-module__top { border-top: 10px solid var(--accent-color-800); border-left: 5px solid transparent; border-right: 5px solid transparent; } .RouletteContent-module__rouletteItemInfo { margin-top: 15px; color: var(--font-color-900); font-size: var(--small-font-size); display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; } .RouletteContent-module__line { margin-top: 50px; } .productModalContainsItem { background-color: var(--accent-color-800); transition: 0.2s; } .productModalContainsItem:hover { transform: translateY(-5px); transition: 0.2s; } .productModalContainsItem > .productModalItemInfo > span { transition: 0.2s; color: var(--default-color) !important; } .productModalContainsItem:hover > .productModalItemInfo > span { transition: 0.2s; color: var(--default-color-hover) !important; /* Примените переменную цвета с !important, чтобы убедиться, что она перезаписывает другие стили */ } .Toast-module__toast { background: var(--bg-color-700); } .gs-loader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 30000; user-select: none; transition: all .3s; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); background-color: #ffffff00; } .gs-loader__spinner { width: 48px; height: 48px; border: 3px dotted #FFF; border-style: solid solid dotted dotted; border-radius: 50%; display: inline-block; position: relative; box-sizing: border-box; animation: rotations 2s linear infinite; } .gs-loader__spinner::after { content: ''; box-sizing: border-box; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px dotted red!important; border-style: solid solid dotted; width: 24px; height: 24px; border-radius: 50%; animation: rotationsBack 1s linear infinite; transform-origin: center center; } @keyframes rotations { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotationsBack { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } .KitContent-module__containsItem { border-radius: 10px; background-color: var(--accent-color-800); transition: 0.2s; } .KitContent-module__itemName { border-radius: 10px 10px 0 0; display: flex; justify-content: center; transition: 0.2s; } .KitContent-module__itemCount { border-radius: 0 10px 0 10px; transition: 0.2s; } .KitContent-module__itemImg { padding: 15px; } .KitContent-module__containsItem:hover { transform: translateY(-5px); transition: 0.2s; } .KitContent-module__containsItem:hover .KitContent-module__itemName { color: var(--default-color-hover); transition: 0.2s; } .KitContent-module__containsItem:hover .KitContent-module__itemCount { color: var(--default-color-hover); transition: 0.2s; } .ProfileNav-module__navItem:hover, .ProfileNav-module__navItem:focus, .ProfileNav-module__navItem.ProfileNav-module__active { color: var(--default-color); background: var(--accent-color-800); border-radius: 10px; } .ProfileNav-module__navItem { display: flex; align-items: center; gap: 10px; } .ProfileNav-module__navItem > img { width: 20px; opacity: 0.7; transition: 0.2s; } .ProfileNav-module__navItem:hover > img, .ProfileNav-module__navItem:focus > img, .ProfileNav-module__navItem.ProfileNav-module__active > img { opacity: 1; transition: 0.2s; } .ProfileNav-module__body.boxBody { gap: 5px; border-radius: 10px; } .ProfileNav-module__wrapper .boxFooter { padding: 0px; } .ProfileNav-module__logOut { width: 100%; margin-top: 20px; } .ProfileContent-module__title { display: block; margin-bottom: 10px; font-size: var(--small-font-size); color: var(--font-color-900); } .ProfileContent-module__box { padding: 0 4px; } .ProfileContent-module__infoLine+.ProfileContent-module__infoLine { border-top: 0px; } .ProfileContent-module__infoLineValue.ProfileContent-module__steamid, .ProfileContent-module__infoLineValue { color: var(--default-color); transition: 0.2s; display: flex; justify-content: flex-end; } .ProfileContent-module__infoLineValue.ProfileContent-module__steamid:hover, .ProfileContent-module__infoLineValue:hover { color: var(--default-color-hover); transition: 0.2s; } .Selector-module__dropDownCurrentItem, .ProfileContent-module__box { background-color: var(--accent-color-800); } .Selector-module__dropDownList { background: var(--accent-color-800); border-radius: 10px!important; } .ProfileContent-module__input { width: 100%; display: flex; height: 36px; border-radius: 2px; overflow: hidden; padding: 0 15px; background: var(--accent-color-900); } .BasketSearch-module__input, .HistorySearch-module__input { background: var(--accent-color-800); } .BasketTable-module__tableLine:nth-child(2n-1), .HistoryTable-module__tableLine:nth-child(2n-1) { background-color: var(--accent-color-800); border: 2px dashed var(--bg-color-700); } .BasketTable-module__tableLine.BasketTable-module__canSell, .BasketTable-module__tableHeader.BasketTable-module__canSell { grid-template-columns: 1fr 1fr 110px; } /*-----------*/ /* Media CSS */ @media (max-width: 1170px){ .Product-module__wrapper { height: 250px; } } @media (max-width: 980px){ .Header-module__wrapper { padding: 0 10px; } .Servers-module__servers { display: flex; flex-direction: column; gap: 15px; } .Modules-container { align-items: flex-end; } .newsContainer { display: flex; flex-direction: column; gap: 30px; } .News-module__container.news__promo { width: 100%!important; } .News-module__container.news__24h { width: 100%!important; } .News-module__container { margin-bottom: 20px; } .Products-module__wrapper { gap: 35px; } .HeaderNav-module__link, .PlayerMenuMobile-module__profileLink, .PlayerBalance-module__btn { font-weight: var(--light-font-weight); justify-content: flex-start; letter-spacing: 1px; display: flex; } .PlayerMenuMobile-module__playerMenu { margin-bottom: 0px; } .PlayerMenuMobile-module__playerMenu { row-gap: 0px; } } @media (max-width: 670px){ .boxBody.PlayerMenuMobile-module__body { border-radius: 0px!important; } .News-module__container { height: 267px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 10px; padding: 20px; gap: 10px; } .Shop-module__wrapper .boxFooter { display: none; } } @media (max-width: 600px){ .Product-module__wrapper { height: 300px; } .Servers-module__server { margin: 0; width: 100%; } .Modules-container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 20px; } .Search-module__wrapper { max-width: unset; } .Servers-module__servers { flex-wrap: unset; margin: 0px; width: 100%; display: flex; align-items: center; } } @media (max-width: 420px){ .Product-module__wrapper { height: 200px; } } swiper-container { width: 100%; height: 100%; height: 200px; top: 75px; padding-right: 8px; } swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 30px } swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 25px } .autoplay-progress { position: absolute; right: 16px; bottom: 16px; z-index: 10; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--swiper-theme-color); } .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0px; z-index: 10; width: 100%; height: 100%; stroke-width: 4px; stroke: var(--swiper-theme-color); fill: none; stroke-dashoffset: calc(125.6 * (1 - var(--progress))); stroke-dasharray: 125.6; transform: rotate(-90deg); } .swiper-button-next svg, .swiper-button-prev svg { width: 50%; height: 50%; object-fit: contain; transform-origin: center center; color: #7c7c7c; } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px)); height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius,50%); background: #7c7c7c; opacity: var(--swiper-pagination-bullet-inactive-opacity, .2); } .swiper { width: 100%; height: 100%; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0px; z-index: 1; display: block; border-radius: 25px; } /* наборы */ .KitContent-module__itemName { background: #fff0; font-weight: bold; font-size: 17px; text-align: center; text-shadow: 0 0 4px rgb(0 0 0 / 40%); /* font-weight: 500; */ text-overflow: ellipsis; padding: 8px; position: absolute; width: 100%; top: 0; left: 0; right: 0; /* text-align: start; */ color: var(--font-color-800); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: rgb(0 0 0 / 0%); } .KitContent-module__itemCount { right: 10px; border-radius: 10px; font-weight: bold; z-index: 1; position: absolute; bottom: 0; left: 0; padding: 4px 6px; background-color: rgb(0 0 0 / 0%); color: rgba(255,255,255,.7)!important; text-align: end; } .KitContent-module__containsItem:hover { transform: scale(1.04) rotate(-5deg); transition: all 0.3s; box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.1); } .KitContent-module__containsItem { /* /* position: relative; */ /* min-height: 1px; */ /* padding: 10px; */ margin: -8px 2px 8px; position: relative; background: #333; /* margin: 10px; */ border-radius: 15px; overflow: hidden; text-align: center; cursor: pointer; transform: rotate(0deg); transition: all 0.3s; box-shadow: unset; min-height: 1px; padding: 10px; border-radius: 20px; background-color: #333; padding: 10px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; /* display: flex; */ align-items: center; } /* наборы */ .CountSelector-module__changeCountBtn { border-radius: 10px; width: 60px; height: 100%; background: var(--font-color-900); position: relative; display: flex; cursor: pointer; align-items: center; justify-content: center; transition: all .15s ease; } .CountSelector-module__icon { content: "\F067"; color: #fff; width: 75%; height: 75%; transition: all .15s ease; } .CountSelector-module__changeCountBtn.CountSelector-module__right { border-left: 2px solid rgb(24 24 27 / 0%); } .boxBody { background: rgb(38 38 38 / 70%); } .RouletteContent-module__triangle.RouletteContent-module__top { content: ""; position: absolute; left: 50%; margin: 1px 0 0 -30px; border-left: 18px solid transparent; border-right: 18px solid transparent; align-content: center; animation-name: bounce-2; animation-timing-function: ease; border-top: 20px solid #bbb; animation-duration: 2s; animation-iteration-count: infinite; top: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; /* border-top: 24px solid #dc14cd40; */ } .boxHeader { justify-content: center; background: #262626; border-radius: 20px 20px 0 0; } .RouletteContent-module__footer { border-radius: 0px 0px 20px 20px; display: flex; align-items: center; justify-content: space-between; } .TotalSum-module__currency { padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1; color: #555; text-align: center; background-color: #eee; /* border: 1px solid #ccc; */ border-radius: 4px; border-radius: 10px 0px 0px 10px; height: 100%; padding: 0 10px; background: #555; color: var(--font-color-700); line-height: 36px; } /* кейс */ .productModalProductAvailability { color: #f3be32; text-align: center; font-weight: 500; font-size: 12px; /* color: var(--font-color-800); */ /* display: block; */ /* text-align: center; */ /* font-weight: 500; */ /* margin-bottom: 5px; */ } .ModalLayout-module__modal { /* width: 900px; */ margin-top: 20px; margin-bottom: 20px; /* width: 360px; */ box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); } /* это меняет у баров цвет! */ .boxHeader { justify-content: center; background: #262626; border-radius: 2px 2px 0 0; } .boxHeader { text-align: center; border-radius: 5px 5px 0px 0px; background: rgba(41, 41, 41, 0.8); justify-content: center; background: rgb(38 38 38 / 70%); /* border-radius: 20px 20px 0 0; */ } /* конец */ /* скрываем нижний ползунок */ .RouletteContent-module__triangle.RouletteContent-module__bottom { visibility: hidden; bottom: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 24px solid #dc14cd40; } /* gg */ .RouletteContent-module__lineWrapper { position: relative; width: 100%; overflow: hidden; background: #262626; display: flex; height: 290px; align-items: center; } .RouletteContent-module__line { margin-left: -360px; /* margin: -16px -16px 0; */ /* position: relative; */ /* padding: 16px; */ /* white-space: nowrap; */ /* overflow: hidden; */ position: absolute; display: flex; } .RouletteContent-module__rouletteItemImg { width: 240px; height: 240px; padding: 25px; overflow: hidden; border-radius: 35px; background: #333; transform: scale(0.9); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05); /* width: 100px; */ /* height: 100px; */ /* object-fit: contain; */ } .productModalGiveText { margin: 10px; color: #dc14cd40; /* color: #d22727; */ display: block; text-align: center; font-weight: 500; } .RouletteContent-module__rouletteItem { display: inline-block; width: 240px; text-align: center; margin: 0 8px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: hsla(0,0%,100%,.04); border-radius: 2px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: none; background: transparent; border: 1px solid; border-color: rgba(255, 255, 255, 0); } .RouletteContent-module__rouletteItemInfo { overflow: hidden; text-overflow: ellipsis; font-size: 16px; margin: 0; padding: 0; /* margin-top: 4px; */ display: flex; flex-direction: column; align-items: center; } .productModalContainsItem { font-size: 15px; line-height: 20px; font-weight: 600; color: #23272a; color: var(--not-quite-black); border-radius: 2px; background-color: #28282800; /* padding: 10px; */ position: relative; display: flex; align-items: center; } /* поправляем описание товара */ .store-categories { text-align: center; margin-bottom: 15px; } /* привилегии */ .tooltiptext1 { visibility: hidden; width: 170px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; border-radius: 6px; padding: 10px; position: absolute; z-index: 1; left: 105%; opacity: 0; transition: opacity 220ms ease-out; } .modal-header { text-align: center; font-size: 40px; } .fa.fa-eye { position: relative; float: right; text-align: center; background-color: #8e6874; width: 40px; height: 120%; font-size: 20px; padding: 4px; margin-top: -5px; border-radius: 0 15px 15px 0; transition: 0.2s; color: #ffffff; cursor: pointer; } .fa.fa-eye:hover { background-color: #251b1e; transition: 0.2s; color: #ffffff; } .service__description h3 { position: relative; font-size: 12px; bottom: 5px; text-align: center; color: #ffffff; } .modal-content.modal-donate .service__image img { width: 10px; } .fade.show { opacity: 1; backdrop-filter: blur(5px); } .modal.fade.show .modal-dialog.modal-lg .modal-content .modal-header { background: none; } .modal.fade.show .modal-dialog.modal-lg .modal-content { background: linear-gradient(180deg, #1d1b18 0%, #2d261a 100%); /* border-radius: 5px 30px; */ color: white; /* padding: 15px; */ /* width: 120%; */ } .modal.fade.show .modal-dialog.modal-lg .modal-content .modal-title { text-align: center; font-size: 40px; } .modal.fade.show .modal-dialog.modal-lg .modal-content .modal-footer { background: none; } .modal.fade.show .modal-dialog.modal-lg .modal-content .btn.btn-danger { position: absolute; background: none; left: 30px; bottom: 15px; color: #fff; } .modal-backdrop.show { opacity: .5; } .modal.show .modal-dialog { -webkit-transform: translate(0); transform: translate(0); } .btn.btn-secondary { /* margin-top: -20px; */ background-color: #1c1c1c; color: white; border-radius: 10px; font-size: 12px; } .btn.btn-secondary:hover { box-shadow: none; /*background-color: white;*/ color: white; /* box-shadow: 0 0 9px 4px #ff53819e; */ } .serverheader { border-radius: 15px; margin-bottom: 10px; font-size: 20px; margin-top: 20px; } .serverheader span { background: linear-gradient(90deg, #E82F4E, #6e2fe8, #2372d5, #2cd9aa); padding: 2px 12px 2px 12px; border-radius: 20px; color: white; text-transform: uppercase; font-size: 15px; padding: 2px 12px 2px 12px; border-radius: 7px; color: white; text-transform: uppercase; font-size: 15px; background: linear-gradient(90deg, #dc14c2c7, #bd14dca3, #bd14dcba, #d114dcc4); background-size: 400% 400%; animation: gradient 5s ease infinite; transform: translate3d(0, 0, 0); } .serverheader span:before { font-family: FontAwesome; content: '\f017'; font-weight: 100; margin-right: 5px; } .desc__description { text-align: center; display: flex; justify-content: center; flex-wrap: wrap; width: 100%; margin-left: 10px; margin-right: 10px; padding-right: 10px; padding-left: 10px; border-radius: 12px; margin-bottom: 15px; animation: zoomIn 1s; } .desc-item { display: flex; text-align: left; width:200px; margin-bottom: 10px; } .desc-item-image { width: 40px; margin-right: 16px; flex: 0 0 auto; } .desc-item-title { font-size: 15px; line-height: 20px; font-weight: 600; color: #23272a; } .desc-item-amount { font-size: 13px; line-height: 18px; color: #ffffff; } .menubox { margin-left: -8px; margin-right: 55px; margin-top: -10px; width: 100%; } .menubox h3 { color: black; font-size: 16px; padding-left: 60px; padding-top: 10px; } .menubox p { color: #ffffff; font-size: 12px; padding-left: 60px; margin-top: -10px; } .menukit { background-color: #ffffff; width: 100%; height: 50px; border-radius: 15px; margin-bottom: -10px; background-image: url("https://imgur.com/E2ROzjf.png"); background-size: 30px; background-position: 10px; background-repeat: no-repeat; transition: all 0.2s ease-out; cursor: pointer; } .menukit:hover { transition: all 0.2s ease-out; transform: scale(0.95); } /* наборы */ .kit-product__name { background: #fff0; font-weight: bold; font-size: 17px; text-align: center; text-shadow: 0 0 4px rgba(0,0,0,.4); /* font-weight: 500; */ text-overflow: ellipsis; } .kit-product__quantity { /* color: #a6b1e7; */ text-align: end; background: unset; bottom: 8px; right: 10px; border-radius: 10px; font-weight: bold; z-index: 1; } @media (min-width: 992px){.col-sm-4 { width: 20%; }} .kit-product { margin: -8px 2px 8px; position: relative; background: #333; /* margin: 10px; */ border-radius: 15px; overflow: hidden; text-align: center; cursor: pointer; transform: rotate(0deg); transition: all 0.3s; box-shadow: unset; } .kit-product:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); /* transform: scale(1.04) rotate(-5deg); */ /* transition: all 0.3s; */ /* box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.1); */ } .kit-product__quantity { /* color: #a6b1e7; */ text-align: end; background: unset; bottom: 8px; right: 10px; border-radius: 10px; font-weight: bold; z-index: 1; } /* рулетка */ .container-3WKP9P { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 200px; margin-left: 10px; margin-right: 10px; padding-right: 10px; padding-left: 10px; border-radius: 12px; background: #fff; background: var(--white); -webkit-box-sizing: border-box; box-sizing: border-box; text-align: initial; margin-bottom: 15px; animation: zoomIn 1s } .icon-1lW2Ee { width: 40px; height: 40px; margin-right: 16px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto } .textContainer-mTPAIw { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .name-3T7FKQ { font-size: 15px; line-height: 20px; font-weight: 600; color: #23272a; color: var(--not-quite-black) } .category-1AFH8P { font-size: 13px; line-height: 18px; color: #99aab5; color: var(--greyple) } .roulette__description { background-color: #28282800; font-size: 0px; /* margin: 0px 0 0px; */ } /* анимация */ /* наборы */ .kit-items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* margin: -8px -8px 8px; */ } @media (min-width: 768px){ .store-categories { /* display: flex; */ flex-wrap: wrap; margin-bottom: 16px; flex-direction: row; /* text-align: center; */ /* margin-bottom: 15px; */ /* display: flex; */ /* flex-wrap: wrap; */ /* align-content: flex-start; */ /* flex-direction: column; */ /* align-items: flex-end; */ /* justify-content: center; */ /* position: absolute; */ /* transform: translateX(-180px) rotate(360deg) translateY(0px); */ }} .store-categories>.btn+.btn { display: inline-block; font-weight: 400; line-height: 1.25; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* border: 1px solid transparent; */ padding: .4rem 1rem; /* font-size: 1rem; */ /* border-radius: .25rem; */ -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; color: #fff; background: #333; border-color: transparent; outline: none !important; } .btn .btn-secondary { /* margin-top: -20px; */ background-color: #1c1c1c; color: white; border-radius: 15px; font-size: 12px; } .store-categories .btn { margin-right: 5px; margin-bottom: 5px; transition: all .2s ease-in-out; border: none!important; } .store-categories>.btn+.btn { margin-left: 5px; border-radius: 7.5px; } .store-categories .btn { margin-right: 5px; margin-bottom: 5px; transition: all .2s ease-in-out; border: none!important } .store-categories .btn:hover { transform: scale(1)!important; color: rgba(255,255,255,.7); background: rgba(255,255,255,.2) } .store-categories .btn.active { color: #fff; border: none; transform: scale(1.15); font-weight: 400; background: linear-gradient(to left,#f90 0,#f1c339 100%); } .store-categories .btn.active:hover { color: #000!important; border: none; /* transform: scale(1.15)!important; */ font-weight: 400; background: linear-gradient(to left,#fff 0,#ffffff 100%); } .store-categories { margin-left: 5px; border-radius: 7.5px } /* описание к кейсам */ .store-categories .btn.active { color: #fff; border: none; transform: scale(1); font-weight: 400; background: #dc14c2c7; display: inline-block; /* font-weight: 400; */ line-height: 1.25; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: .4rem 1rem; /* font-size: 1rem; */ /* border-radius: .25rem; */ -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; color: #fff; /* background: #333; */ border-color: transparent; outline: none !important; } .kit-items { display: flex; justify-content: flex-start; flex-wrap: wrap; } .kit-item { margin: 8px; /* border-radius: 15px; */ /* text-align: center; */ /* cursor: pointer; */ /* transform: rotate(0deg); */ /* transition: all 0.3s; */ /* background: linear-gradient(40deg, #646464, #787878, #3e3e3e, #444444); */ /* background-size: 400% 400%; */ /* animation: gradient 5s ease infinite; */ /* box-shadow: 0 0 10px 0 rgb(0 0 0 / 95%); */ width: 80px; height: 80px; background: linear-gradient(180deg, #dc146521 0%, #dc14cd40 100%); border-radius: 8px; /* padding: 6px 12px; */ display: flex; flex-direction: column; align-items: center; /* justify-content: center; */ } .kit-item:hover { transition: transform 200ms cubic-bezier(0.68, -0.55, 0.27, 1.55); transform: scale(1.1); } .kit-item__image { width: 100%; transform: scale(0.7); } .kit-item__quantity { top: -20px; position: relative; border-radius: 0px 0px 15px 15px; font-size: 12px; } .form-control[readonly] { background: #282828; font-weight: 600; font-size: 15px; } .service__image { width: 100%; padding: 0%; } /* наводка на "?" */ .tooltiptext1::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent rgba(0, 0, 0, 0.5) transparent transparent } .container-oplata:hover .tooltiptext1 { visibility: visible; opacity: 1 } .priv_discount { position: absolute; background: #1b1b1b; font-size: 14px; border-radius: 0px 10px 0px 10px; top: 0px; padding: 0px 8px 0px 10px; right: 0px; opacity: 1; font-weight: 400; z-index: 3; color: white; cursor: help; } .name-user { color: #FFF } .category-user { color: #FFF } .icon-user-oplata { width: 30px !important; height: 30px !important; border-radius: 0px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 5px; margin-right: 10px !important; } .container-oplata { right: -21110px; display: -webkit-inline-box; margin-bottom: 5px; padding: 5px; height: 50px; width: 100%; border-radius: 12px; background: #333; text-align: initial; transition: all 0.2s ease-out; cursor: pointer; transform: scale(1); } .container-oplata { right: -21110px; display: -webkit-inline-box; margin-bottom: 5px; padding: 5px; height: 50px; width: 100%; border-radius: 12px; background: #333; text-align: initial; transition: all 0.2s ease-out; cursor: pointer; transform: scale(1); } .priv_discount2 { position: absolute; background: rgba(33, 33, 33, 0.5); font-size: 14px; border-radius: 0px 10px 0px 10px; top: 0px; padding: 0px 8px 0px 10px; right: 0px; opacity: 1; font-weight: 400; z-index: 3; color: white; cursor: help; } .textContainer-oplata { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-evenly; overflow: hidden; } .textContainer-oplata { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-evenly; overflow: hidden; } /* Карточка виджет*/ body.light { --background-color: #FAFAFA; --text-color: #52525B; --card-background-color: transparent; --card-border-color: rgba(24, 24, 27, 0.08); --card-box-shadow-1: rgba(24, 24, 27, 0.02); --card-box-shadow-1-y: 3px; --card-box-shadow-1-blur: 6px; --card-box-shadow-2: rgba(24, 24, 27, 0.04); --card-box-shadow-2-y: 2px; --card-box-shadow-2-blur: 7px; --card-label-color: #18181B; --card-icon-color: #18181B; --card-icon-background-color: rgba(24, 24, 27, 0.04); --card-icon-border-color: rgba(24, 24, 27, 0.1); --card-shine-opacity: .3; --card-shine-gradient: conic-gradient(from 225deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #6e4254 25deg, #edcad8 285deg, #FFFFFF 345deg, rgba(16, 185, 129, 0) 360deg); --card-line-color: #E9E9E7; --card-tile-color: rgb(37, 27, 30); --card-hover-border-color: rgba(24, 24, 27, 0.15); --card-hover-box-shadow-1: rgba(24, 24, 27, 0.05); --card-hover-box-shadow-1-y: 3px; --card-hover-box-shadow-1-blur: 6px; --card-hover-box-shadow-2: rgba(24, 24, 27, 0.1); --card-hover-box-shadow-2-y: 8px; --card-hover-box-shadow-2-blur: 15px; --card-hover-icon-color: #18181B; --card-hover-icon-background-color: rgba(24, 24, 27, 0.04); --card-hover-icon-border-color: rgba(24, 24, 27, 0.34); --blur-opacity: .1; } body.toggle .grid * { transition-duration: 0s !important; } .grid { grid-template-columns: repeat(2, 240px); grid-gap: 32px; margin-top: 30px; position: relative; z-index: 1; } .card { background-color: var(--background-color); box-shadow: 0px var(--card-box-shadow-1-y) var(--card-box-shadow-1-blur) var(--card-box-shadow-1), 0px var(--card-box-shadow-2-y) var(--card-box-shadow-2-blur) var(--card-box-shadow-2), 0 0 0 1px var(--card-border-color); padding: 10px 10px 10px 20px; border-radius: 15px; cursor: pointer; position: relative; margin-bottom: 30px; transition: box-shadow 0.25s; } .card::before { content: ""; position: absolute; inset: 0; border-radius: 15px; background-color: var(--card-background-color); } .card .icon { z-index: 2; position: relative; display: table; padding: 8px; } .card .icon::after { content: ""; position: absolute; inset: 1.5px; border-radius: 10px; background-color: var(--card-icon-background-color); border: 1px solid var(--card-icon-border-color); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background-color 0.25s, border-color 0.25s; } .card .icon svg { position: relative; z-index: 1; display: block; width: 24px; height: 24px; transform: translateZ(0); color: var(--card-icon-color); transition: color 0.25s; } .card h4 { z-index: 2; position: relative; margin: 12px 0 4px 0; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 2; color: var(--card-label-color); } .card p { z-index: 2; position: relative; margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-color); } .card .shine { border-radius: inherit; position: absolute; inset: 0; z-index: 1; overflow: hidden; opacity: 0; transition: opacity 0.5s; } .card .shine:before { content: ""; width: 150%; padding-bottom: 150%; border-radius: 50%; position: absolute; left: 50%; bottom: 55%; filter: blur(35px); opacity: var(--card-shine-opacity); transform: translateX(-50%); background-image: var(--card-shine-gradient); } .card .background { border-radius: inherit; position: absolute; inset: 0; overflow: hidden; background: #282828; } .card .background .tiles { opacity: 0; transition: opacity 0.25s; } .card .background .tiles .tile { position: absolute; background-color: var(--card-tile-color); -webkit-animation-duration: 8s; animation-duration: 8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; opacity: 0; } .card .background .tiles .tile.tile-4, .card .background .tiles .tile.tile-6, .card .background .tiles .tile.tile-10 { -webkit-animation-delay: -2s; animation-delay: -2s; } .card .background .tiles .tile.tile-3, .card .background .tiles .tile.tile-5, .card .background .tiles .tile.tile-8 { -webkit-animation-delay: -4s; animation-delay: -4s; } .card .background .tiles .tile.tile-2, .card .background .tiles .tile.tile-9 { -webkit-animation-delay: -6s; animation-delay: -6s; } .card .background .tiles .tile.tile-1 { top: 0; left: 0; height: 10%; width: 22.5%; } .card .background .tiles .tile.tile-2 { top: 0; left: 22.5%; height: 10%; width: 27.5%; } .card .background .tiles .tile.tile-3 { top: 0; left: 50%; height: 10%; width: 27.5%; } .card .background .tiles .tile.tile-4 { top: 0; left: 77.5%; height: 10%; width: 22.5%; } .card .background .tiles .tile.tile-5 { top: 10%; left: 0; height: 22.5%; width: 22.5%; } .card .background .tiles .tile.tile-6 { top: 10%; left: 22.5%; height: 22.5%; width: 27.5%; } .card .background .tiles .tile.tile-7 { top: 10%; left: 50%; height: 22.5%; width: 27.5%; } .card .background .tiles .tile.tile-8 { top: 10%; left: 77.5%; height: 22.5%; width: 22.5%; } .card .background .tiles .tile.tile-9 { top: 32.5%; left: 50%; height: 22.5%; width: 27.5%; } .card .background .tiles .tile.tile-10 { top: 32.5%; left: 77.5%; height: 22.5%; width: 22.5%; } @-webkit-keyframes tile { 0%, 12.5%, 100% { opacity: 1; } 25%, 82.5% { opacity: 0; } } @keyframes tile { 0%, 12.5%, 100% { opacity: 1; } 25%, 82.5% { opacity: 0; } } .card .background .line { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s; } .card .background .line:before, .card .background .line:after { content: ""; position: absolute; background-color: var(--card-line-color); transition: transform 0.35s; } .card .background .line:before { left: 0; right: 0; height: 1px; transform-origin: 0 50%; transform: scaleX(0); } .card .background .line:after { top: 0; bottom: 0; width: 1px; transform-origin: 50% 0; transform: scaleY(0); } .card .background .line.line-1:before { top: 10%; } .card .background .line.line-1:after { left: 22.5%; } .card .background .line.line-1:before, .card .background .line.line-1:after { transition-delay: 0.3s; } .card .background .line.line-2:before { top: 32.5%; } .card .background .line.line-2:after { left: 50%; } .card .background .line.line-2:before, .card .background .line.line-2:after { transition-delay: 0.15s; } .card .background .line.line-3:before { top: 55%; } .card .background .line.line-3:after { right: 22.5%; } .card:hover { box-shadow: 0px 3px 6px var(--card-hover-box-shadow-1), 0px var(--card-hover-box-shadow-2-y) var(--card-hover-box-shadow-2-blur) var(--card-hover-box-shadow-2), 0 0 0 1px var(--card-hover-border-color); } .card:hover .icon::after { background-color: #dc14cd14; } .card:hover .icon svg { color: var(--card-hover-icon-color); } .card:hover .shine { opacity: 1; transition-duration: 0.5s; transition-delay: 0s; } .card:hover .background .tiles { opacity: 1; transition-delay: 0.25s; } .card:hover .background .tiles .tile { -webkit-animation-name: tile; animation-name: tile; } .card:hover .background .line { opacity: 1; transition-duration: 0.15s; } .card:hover .background .line:before { transform: scaleX(1); } .card:hover .background .line:after { transform: scaleY(1); } .card:hover .background .line.line-1:before, .card:hover .background .line.line-1:after { transition-delay: 0s; } .card:hover .background .line.line-2:before, .card:hover .background .line.line-2:after { transition-delay: 0.15s; } .card:hover .background .line.line-3:before, .card:hover .background .line.line-3:after { transition-delay: 0.3s; } .block_by_category:before { text-transform: uppercase; display: block; width: 100%; text-align: center; font-size: 16px; color: #e9eaec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modal-dialog2 { position: relative; width: 1050px !important; margin: 30px auto; } .block_category_7 .kit-item { margin: 8px; width: 80px; height: 80px; background: linear-gradient(180deg, rgba(41,41,58,0) 0%, rgb(99 89 68 / 20%) 100%); } .block_category_5 .kit-item { margin: 8px; width: 80px; height: 80px; background: linear-gradient(180deg, rgba(41,41,58,0) 0%, rgb(99 89 68 / 20%) 100%); } .block_by_category .kit-item { position: relative; background: #e9eaec; /* margin: 13px; */ border-radius: 15px; overflow: hidden; text-align: center; cursor: pointer; box-shadow: unset; animation: zoomIn 1s; } .block_category_2 .kit-item { margin: 8px; /* border-radius: 15px; */ /* text-align: center; */ /* cursor: pointer; */ /* transform: rotate(0deg); */ /* transition: all 0.3s; */ /* background: linear-gradient(40deg, #646464, #787878, #3e3e3e, #444444); */ /* background-size: 400% 400%; */ /* animation: gradient 5s ease infinite; */ /* box-shadow: 0 0 10px 0 rgb(0 0 0 / 95%); */ width: 80px; height: 80px; background: linear-gradient(180deg, rgba(41,41,58,0) 0%, rgb(99 89 68 / 20%) 100%); border-radius: 8px;} .block_category_10 { background: linear-gradient(180deg, #1c1d18 0%, #2d261a 100%); border-radius: 0px 20px 20px 0px; } .block_category_9 { background: linear-gradient(180deg, #1c1d18 0%, #2d261a 100%); border-radius: 0px 20px 20px 0px; } .block_category_8 { background: linear-gradient(180deg, #1c1d18 0%, #2d261a 100%); border-radius: 0px 20px 20px 0px; } .block_category_7 { background: linear-gradient(180deg, #1c1d18 0%, #2d261a 100%); border-radius: 0px 20px 20px 0px; } .block_category_5 { background: linear-gradient(180deg, #1c1d18 0%, #2d261a 100%); } .block_category_6 { background: linear-gradient(180deg, #1c1d18 0%, #2d261a 100%); } .block_category_4 { background: linear-gradient(180deg, #1c1d18 0%, #2d261a 100%); } .block_category_3 { background: linear-gradient(180deg, #1c1d18 0%, #2d261a 100%); } .kit-item__image { width: 100%; transform: scale(0.7); } .block_category_2 { background: linear-gradient(180deg, #1c1d18 0%, #2d261a 100%); } .block_category_1 .kit-item { background: #f8ad1bf0; } .block_by_category .kit-item { margin: 8px; width: 80px; height: 80px; background: linear-gradient(180deg, rgba(41,41,58,0) 0%, rgb(99 89 68 / 20%) 100%); border-radius: 8px; display: flex; flex-direction: column; align-items: center; } .kit-items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* margin: -8px -8px 8px; */ } body { background-color: #131313; font-family: 'Inter', sans-serif; --background-color: rgb(24 24 27 / 31%); --text-color: #A1A1AA; --card-background-color: rgba(255, 255, 255, .015); --card-border-color: rgba(255, 255, 255, 0.1); --card-box-shadow-1: rgba(0, 0, 0, 0.05); --card-box-shadow-1-y: 3px; --card-box-shadow-1-blur: 6px; --card-box-shadow-2: rgba(0, 0, 0, 0.1); --card-box-shadow-2-y: 8px; --card-box-shadow-2-blur: 15px; --card-label-color: #FFFFFF; --card-icon-color: #D4D4D8; --card-icon-background-color: rgba(255, 255, 255, 0.08); --card-icon-border-color: rgba(255, 255, 255, 0.12); --card-shine-opacity: .1; --card-shine-gradient: conic-gradient(from 205deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #dc14cd40 25deg, rgba(52, 211, 153, 0.18) 295deg, rgba(16, 185, 129, 0) 360deg); --card-line-color: #2A2B2C; --card-tile-color: #dc14cd40; --card-hover-border-color: rgba(255, 255, 255, 0.2); --card-hover-box-shadow-1: rgba(0, 0, 0, 0.04); --card-hover-box-shadow-1-y: 5px; --card-hover-box-shadow-1-blur: 10px; --card-hover-box-shadow-2: rgba(0, 0, 0, 0.3); --card-hover-box-shadow-2-y: 15px; --card-hover-box-shadow-2-blur: 25px; --card-hover-icon-color: #ff0000bd; --card-hover-icon-background-color: rgb(106 98 72 / 37%); --card-hover-icon-border-color: #dc14cd40; --blur-opacity: .01; } .n .modal .modal-header { justify-content: center; background: none; display: none; border: none; } .dEyoDM { font-weight: bold; font-size: 24px; letter-spacing: -0.01em; color: #b01414; margin-bottom: 12px; display: flex; -webkit-box-align: center; align-items: center; } .iOoXCM > img { margin-top: 24px; margin-bottom: 24px; border-radius: 8px; width: 100%; } .kMNnNF img { margin-right: 8px; width: 16px; margin-left: 0px; opacity: 0.5; transition: all 0.3s ease 0s; } .cSgllm { padding-left: 24px; font-size: 14px; color: rgb(175, 183, 198); width: 100%; -webkit-box-pack: start; justify-content: flex-start; display: flex; -webkit-box-align: center; align-items: center; } .kMNnNF { margin-right: 4px; } .kMNnNF, .kMNnNF a { display: flex; -webkit-box-align: center; align-items: center; } .iGSRsu { width: 356px; overflow: hidden; padding: 10px; background: linear-gradient(rgb(33, 37, 51) -12.18%, rgb(23, 28, 38) 103.8%), rgb(17, 24, 32); border-radius: 17px; } .bgOFfh { width: 100%; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; border-radius: 0px 0px 16px 16px; height: 68px; font-family: Roboto; cursor: pointer; font-size: 14px; background: linear-gradient(327.26deg, rgba(103, 120, 180, 0.28) -17.01%, rgba(103, 134, 196, 0.075) 92.2%); } .JphCv button { display: flex; height: 100%; -webkit-box-align: center; align-items: center; border-radius: 8px; -webkit-box-pack: center; justify-content: center; } .kfuDJE img { width: 23px; margin-right: 11px; } .eTTtAt { border: 1px solid rgb(122, 94, 60); background: transparent; } .JphCv button { display: flex; height: 100%; -webkit-box-align: center; align-items: center; border-radius: 8px; -webkit-box-pack: center; justify-content: center; } .JphCv { display: grid; gap: 6px; height: 60px; grid-template-columns: 1fr 60px; margin-top: 40px; } button { font-family: roboto; } .jOobjB li img { width: 15px; margin-right: 9px; } .bVoPYT { width: 356px; overflow: hidden; padding: 10px; background: linear-gradient(rgb(33, 37, 51) -12.18%, rgb(23, 28, 38) 103.8%), rgb(17, 24, 32); border-radius: 17px; margin-left: 19px; } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom } .premium__first-screen { display: flex; flex-direction: column; align-items: center; font-family: roboto; background: url(//i.ibb.co/Vqz8xs2/bg-15.png) no-repeat top/contain; } /** Стили продуктов */ .modal-content.modal-donate .modal-header { background-color: rgba(0,0,0,0); border: 0; } .modal-content.modal-donate .modal-footer { background-color: rgba(0,0,0,0); border: 0; } .modal-content.modal-donate .service__description { background-color: rgba(0,0,0,0); border: 0; } .modal-content.modal-donate .modal-title { font-size: 26px; font-weight: bold; display: block; text-align: center; color: #bbb; text-transform: uppercase; /* font-size: 30px; */ /* text-align: center; */ /* color: #ffffff; */ } .modal-dialog.modal-sm .modal-content .modal-header { background-color: rgba(0,0,0,0); } .modal-dialog.modal-sm .modal-content .modal-footer { background-color: rgba(0,0,0,0); } .modal-dialog.modal-sm .modal-content .modal-title { color: #ffffff; } .modal-dialog.modal-sm .modal-content .close { display: none; } .modal-dialog.modal-sm .modal-content .input-group-addon .fa.fa-rub { color: black; } .desc-service { background: #131313; height: 30px; border-radius: 0 15px 15px 0; padding-left: 15px; padding-top: 5px; margin-bottom: 10px; box-shadow: -3px 0 #8e6874; color: white; } .fa.fa-eye { position: relative; float: right; text-align: center; background-color: #8e6874; width: 40px; height: 120%; font-size: 20px; padding: 4px; margin-top: -5px; border-radius: 0 15px 15px 0; transition: 0.2s; color: #ffffff; cursor: pointer; } .fa.fa-eye:hover { background-color: #251b1e; transition: 0.2s; color: #ffffff; } .service__description h3 { position: relative; font-size: 12px; bottom: 5px; text-align: center; color: #ffffff; } .modal-content.modal-donate .service__image img { width: 10px; } .fade.show { opacity: 1; backdrop-filter: blur(5px); } .modal.fade.show .modal-dialog.modal-lg .modal-content .modal-header { background: none; /* text-align: center; */ justify-content: center; } .modal.fade.show .modal-dialog.modal-lg .modal-content { /* box-shadow: 0 0 100px #dc14cd40; */ background: rgba(41, 41, 41, 0.8); /* background: linear-gradient(180deg, #1d1b18 0%, #2d261a 100%); */ /* border-radius: 5px 30px; */ color: white; /* padding: 15px; */ /* width: 120%; */ } .modal.fade.show .modal-dialog.modal-lg .modal-content .modal-title { text-align: center; font-size: 40px; color: #bbb; } .modal.fade.show .modal-dialog.modal-lg .modal-content .modal-footer { background: none; } .modal.fade.show .modal-dialog.modal-lg .modal-content .btn.btn-danger { position: absolute; background: none; left: 30px; bottom: 15px; color: #fff; } .modal-backdrop.show { opacity: .5; } .modal.show .modal-dialog { -webkit-transform: translate(0); transform: translate(0); } .btn.btn-secondary { cursor: pointer; display: inline-block; font-weight: 400; line-height: 1.25; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* border: 1px solid transparent; */ padding: .4rem 1rem; /* font-size: 1rem; */ /* border-radius: .25rem; */ -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; color: #fff; background: #333; border-color: transparent; outline: none !important; /* margin-top: -20px; */ /* background-color: #1c1c1c; */ color: white; /* border-radius: 15px; */ font-size: 14px; } /* Модальные значения */ .modal,.modal-open { overflow: hidden } .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; outline: 0 } .modal.fade .modal-dialog { -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out,-webkit-transform .3s ease-out; -webkit-transform: translateY(-25%); transform: translateY(-25%) } .modal.show .modal-dialog { -webkit-transform: translate(0); transform: translate(0) } .modal-open .modal { overflow-x: hidden; overflow-y: auto } .modal-dialog { position: relative; width: auto; margin: 10px } .modal-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #7b7b7b; background-clip: padding-box; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0 } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000 } .modal-backdrop.fade { opacity: 0 } .modal-backdrop.show { opacity: .5 } .modal-header { /* text-align: center; */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 15px; /* border-bottom: 1px solid #eceeef; */ } .modal-title { margin-bottom: 0; line-height: 1.5 } .modal-body { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 15px } .modal-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 15px; /* border-top: 1px solid #eceeef; */ } .modal-footer>:not(:first-child) { margin-left: .25rem } .modal-footer>:not(:last-child) { margin-right: .25rem } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll } @media (min-width: 576px) { .modal-dialog { max-width:500px; margin: 30px auto } .modal-sm { max-width: 300px } } /* прошлый код*/ body { min-height: 100vh; width: 100vw; overflow-x: hidden; background-color: #232323; color: var(--font-color-800); font-weight: 400; background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; font-size: var(--default-font-size); } :root[data-theme=red_black] { --accent-color-800: #28ada0; --accent-color-900: #dc14cd40; --font-color-700: #fff; --font-color-800: rgba(255, 255, 255, .7); --font-color-900: #7b7b7b; --bg-color-800: #202020; --bg-color-700: #282828; --bg-color-900: #1d1b1a; --product-items-trans-bg-color: rgba(0, 0, 0, .4); } .Header-module__logo { /* font-size: 0px; */ text-transform: none; /* background: url(https://cdn.discordapp.com/attachments/1198334372554739763/1198343114658689166/logo_east_rust.png?ex=65be8efe&is=65ac19fe&hm=e0699f227cb4fcf44ea239f86f3ff31051102a79b7810cc933d744fa4ddb8932&.png); */ background-size: contain; background-repeat: no-repeat; /* width: 200px; */ /* height: 35px; */ } /* виджеты */ .xbox__body .input-group-addon { background: #262626 } .discord-b { background-color: rgba(39, 39, 39, .75); border-radius: 0px 15px 15px 0px; font-size: 17px; color: #fff; width: 130px; height: 66px; display: block; line-height: 64px; position: absolute; left: 50%; background-image: url('https://pic.moscow.ovh/images/2022/07/22/968d01ac5f1fa2ad6a8fc3b910fd6936.png'); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; background-origin: content-box; cursor: pointer; transition: 0.5s } .vk-b { background-color: rgba(39, 39, 39, .75); border-radius: 15px 0px 0px 15px; color: #fff; width: 130px; height: 66px; display: block; line-height: 64px; background-image: url('https://pic.moscow.ovh/images/2022/07/22/210cf5d41bf06d2c5a2af68de984d406.png'); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; background-origin: content-box; cursor: pointer; transition: 0.5s } .vk-b:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); transition: 0.3s; background-color: rgba(39, 39, 39, .75); text-decoration: none !important; box-shadow: 0 5px 0 #48a4dc; flex-basis: 150%; transform: translateY(-4px) } .discord-b:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); transition: 0.3s; background-color: rgba(39, 39, 39, .75); text-decoration: none !important; box-shadow: 0 5px 0 #dc6648; flex-basis: 150%; transform: translateY(-4px) } .xbox { position: relative; margin-bottom: 20px; border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } .MonitoringServer-module__name { display: block; margin-bottom: 5px; font-size: 12px; } .Header-module__wrapper { background-color: #1b1b1b; margin-top: 10px; margin-bottom: 20px; padding: 0 15px; min-height: 60px; font-weight: 500; width: 100%; display: flex; align-items: center; flex-wrap: wrap; border-radius: 15px; } /*.Categories-module__categories { display: flex; width: 100%; justify-content: initial; flex-wrap: wrap; margin: -5px; font-size: 13px; }*/ .Widgets-module__wrapper { margin-right: 0px; margin-left: 10px; } .Index-module__wrapper { display: flex; flex-direction: row-reverse; } .Categories-module__categories { text-align: center; align-content: flex-start; flex-direction: column; position: absolute; transform: translateX(-170px) rotate(360deg) translateY(0px); width: max-content; margin-top: -67px; margin-left: -15px; padding: 0px 3px 0px 3px; } .container { padding: 0 var(--safe-padding); margin: 0 auto; } body:after { background-image: url(https://media.discordapp.net/attachments/1198334372554739763/1201094144001585253/7859..png?ex=65c89117&is=65b61c17&hm=c59a8b5f7b9433bf9734b0b390305a5b973c27f5b82e3beafc21e04411c51e2d&=&format=webp&quality=lossless&width=1193&height=671.png); content: " "; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 500; pointer-events: none; opacity: .6; } .xbox__header { background: #282828; padding: 15px; border-radius: 15px 15px 0px 0px; border-top: solid 2px #313131; border-left: solid 2px #313131; border-right: solid 2px #313131; } .xbox__body { padding: 10px; background: #1d1b1a; border-radius: 0px 0px 15px 15px; border-bottom: solid 2px #313131; border-left: solid 2px #313131; border-right: solid 2px #313131; } h4 { font-size: 17px; font-weight: 400; } .boxHeader { background: #282828; padding: 15px; border-radius: 15px 15px 0px 0px; border-top: solid 2px #313131; border-left: solid 2px #313131; border-right: solid 2px #313131; } .boxBody{ padding: 15px; background: #1d1b1a; border-radius: 0px 0px 0px 0px; border-left: solid 5px #313131; border-right: solid 2px #313131; } .boxFooter { background: #282828; border-radius: 0px 0px 15px 15px; border-bottom: solid 2px #313131; border-left: solid 2px #313131; border-right: solid 2px #313131; } .Categories-module__category.Categories-module__active, .Categories-module__category:hover { border-radius: 10px; transform: scale(.95); } .Categories-module__category { border-radius: 10px; border: #313131 solid 1px; } .Button-module__btn.Button-module__gray { color: var(--font-color-800); background-color: #373737; border-color: #494949; border-radius: 10px; } .Button-module__btn.Button-module__gray:hover, .Button-module__btn.Button-module__gray:focus { background-color: #434343; } .Button-module__btn.Button-module__accent { color: var(--font-color-700); background-color: #28ada0; border-color: #dc14cd00; border-radius: 10px; } .Button-module__btn.Button-module__accent:hover, .Button-module__btn.Button-module__accent:focus { background-color: #40dbcc; border-color: var(--accent-color-900); transform: scale(.95); } .Search-module__wrapper { width: 100%; display: flex; height: 34px; border-radius: 15px; overflow: hidden; background: var(--bg-color-700); margin-top: 15px; } .Product-module__wrapper:hover .Product-module__name, .Product-module__wrapper:active .Product-module__name { transform: translateY(0); text-align: center; background: linear-gradient(180deg, rgba(44, 217, 170, 0.4) 0%, rgba(44, 217, 170, 0.9) 100%); font-weight: 600; font-size: 12px; text-shadow: 1px 1px 1px #000; color: #fff; box-shadow: 0 0 10px 0 rgb(0 0 0 / 95%); } .Product-module__wrapper:hover { transform: scale(1.1); background: #339188; } .Product-module__wrapper { /*background: var(--bg-color-700); padding: 10px; background-image: radial-gradient(#772937 0%, transparent 70%); background-size: 300% 300%; background-repeat: no-repeat; background-position: 20% 120%; */ object-fit: contain; padding: 8%; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(44, 217, 170, 0) 0%, rgba(44, 217, 170, 0) 20%, rgba(44, 217, 170, 0.4) 100%); position: relative; cursor: pointer; border-radius: 15px; overflow: hidden; animation: Product-module__productAnimation .15s ease; } .Product-module__price { display: flex; align-items: center; text-align: center; color: white; padding: 3px 10px; border-radius: 0px 0px 20px 0px; text-shadow: 1px 1px 1px #000; font-weight: 600; font-size: 12px; background: linear-gradient(40deg, #00dabe, #00e0b1, #3e3e3e, #444444); background-size: 400% 400%; animation: gradient 5s ease infinite; box-shadow: 0 0 10px 0 rgb(0 0 0 / 65%); text-transform: uppercase; } .Product-module__discount { top: 0; right: 0; color: #ffffff; border-radius: 0px 0px 0px 20px; font-weight: 600; font-size: 13px; background: linear-gradient(40deg, #3e3e3e, #444444, #e82f4e, #bd2e46); background-size: 400% 400%; animation: gradient 5s ease infinite; padding: 2px 10px; } .productModalContainsItem { border-radius: 10px; background-color: var(--bg-color-700); padding: 10px; position: relative; display: flex; align-items: center; border: solid 1px #3f3f3f; } .productModalDescription { text-align: left; padding: 10px; margin-bottom: 10px; background-color: var(--bg-color-700); border-radius: 10px; border: dashed 1px #424242; } .RouletteContent-module__rouletteItem { border-radius: 15px; overflow: hidden; background: var(--bg-color-700); padding: 8px; } .Products-module__wrapper { margin-top: 15px; width: 100%; display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 15px; } .social-box { text-align: center; display: grid; line-height: 2rem; margin-top: 20px; margin-left: 10px; margin-right: 10px; } .vkontakte { background: #2c3547; border: 2px solid #3c4861; box-shadow: 0 10px 20px 0 rgba(0,98,255,0.15); border-radius: 15px; text-transform: uppercase; color: #fff; margin-bottom: 25px; padding: 5px 0px 2px 0px; transition: 0.3s; } .vkontakte:hover { background: #202735; border: 2px solid #3c4861; box-shadow: 0 10px 20px 0 rgba(0,98,255,0.15); border-radius: 15px; text-transform: uppercase; color: #fff; margin-bottom: 25px; padding: 5px 0px 2px 0px; transition: 0.3s; } .telegram { background: #2c3e47; border: 2px solid #3c5661; box-shadow: 0 10px 20px 0 rgba(0,200,255,0.15); border-radius: 15px; text-transform: uppercase; color: #fff; margin-bottom: 25px; padding: 5px 0px 2px 0px; transition: 0.3s; } .telegram:hover { background: #203035; border: 2px solid #3c5661; box-shadow: 0 10px 20px 0 rgba(0,200,255,0.15); border-radius: 15px; text-transform: uppercase; color: #fff; margin-bottom: 25px; padding: 5px 0px 2px 0px; transition: 0.3s; } .youtube { background: #472c2c; border: 2px solid #613c3c; box-shadow: 0 10px 20px 0 rgba(255,0,0,0.15); border-radius: 15px; text-transform: uppercase; color: #fff; margin-bottom: 25px; padding: 5px 0px 2px 0px; transition: 0.3s; } .youtube:hover { background: #352020; border: 2px solid #613c3c; box-shadow: 0 10px 20px 0 rgba(255,0,0,0.15); border-radius: 15px; text-transform: uppercase; color: #fff; margin-bottom: 25px; padding: 5px 0px 2px 0px; transition: 0.3s; } .twitch { background: #3c2c47; border: 2px solid #523c61; box-shadow: 0 10px 20px 0 rgba(145,0,255,0.15); border-radius: 15px; text-transform: uppercase; color: #fff; margin-bottom: 25px; padding: 5px 0px 2px 0px; transition: 0.3s; } .twitch:hover { background: #312035; border: 2px solid #523c61; box-shadow: 0 10px 20px 0 rgba(145,0,255,0.15); border-radius: 15px; text-transform: uppercase; color: #fff; margin-bottom: 25px; padding: 5px 0px 2px 0px; transition: 0.3s; } .socicon { vertical-align: sub; margin-right: 7px; } .info { font-size: 11px; color: #999; line-height: 1.5; margin-bottom: 10px; } .info-links { font-size: 12px; display: grid; line-height: 1.8; } .info-links a { font-size: 12px; display: grid; line-height: 1.8; transition: 0.3s; } .info-links a:hover { color: #dc14cd40; font-size: 12px; display: grid; line-height: 1.8; transition: 0.3s; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .bonus { width: 50%; background: linear-gradient(40deg, #dc14cd40, #f94161, #dc14cd40, #dc14cd40); color: #fff; animation: gradient 3s ease infinite; background-size: 400% 400%; border-radius: 0px 10px 10px 0px; } /* описание привилегиям */ .icon-user-oplata { width: 30px !important; height: 30px !important; border-radius: 0px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 5px; margin-right: 10px !important; } .container-oplata { right: -21110px; display: -webkit-inline-box; margin-bottom: 5px; padding: 5px; height: 50px; width: 100%; border-radius: 12px; background: #333; text-align: initial; transition: all 0.2s ease-out; cursor: pointer; transform: scale(1); } .container-oplata { right: -21110px; display: -webkit-inline-box; margin-bottom: 5px; padding: 5px; height: 50px; width: 100%; border-radius: 12px; background: #333; text-align: initial; transition: all 0.2s ease-out; cursor: pointer; transform: scale(1); } .container-oplata .tooltiptext1 { visibility: hidden; width: 170px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; border-radius: 6px; padding: 10px; position: absolute; z-index: 1; left: 105%; opacity: 0; transition: opacity 220ms ease-out; } .priv_discount { position: absolute; background: #1b1b1b; font-size: 14px; border-radius: 0px 10px 0px 10px; top: 0px; padding: 0px 8px 0px 10px; right: 0px; opacity: 1; font-weight: 400; z-index: 3; color: white; cursor: help; } .tooltiptext1::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent rgba(0, 0, 0, 0.5) transparent transparent } .container-oplata:hover .tooltiptext1 { visibility: visible; opacity: 1 } .tooltip1:hover .tooltiptext1 { visibility: visible; opacity: 1 } .priv_discount2 { position: absolute; background: rgba(33, 33, 33, 0.5); font-size: 14px; border-radius: 0px 10px 0px 10px; top: 0px; padding: 0px 8px 0px 10px; right: 0px; opacity: 1; font-weight: 400; z-index: 3; color: white; cursor: help; } .textContainer-oplata { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-evenly; overflow: hidden; } .textContainer-oplata { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-evenly; overflow: hidden; } /* Карточка виджет*/ body.light { --background-color: #FAFAFA; --text-color: #52525B; --card-background-color: transparent; --card-border-color: rgba(24, 24, 27, 0.08); --card-box-shadow-1: rgba(24, 24, 27, 0.02); --card-box-shadow-1-y: 3px; --card-box-shadow-1-blur: 6px; --card-box-shadow-2: rgba(24, 24, 27, 0.04); --card-box-shadow-2-y: 2px; --card-box-shadow-2-blur: 7px; --card-label-color: #18181B; --card-icon-color: #18181B; --card-icon-background-color: rgba(24, 24, 27, 0.04); --card-icon-border-color: rgba(24, 24, 27, 0.1); --card-shine-opacity: .3; --card-shine-gradient: conic-gradient(from 225deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #6e4254 25deg, #edcad8 285deg, #FFFFFF 345deg, rgba(16, 185, 129, 0) 360deg); --card-line-color: #E9E9E7; --card-tile-color: rgb(37, 27, 30); --card-hover-border-color: rgba(24, 24, 27, 0.15); --card-hover-box-shadow-1: rgba(24, 24, 27, 0.05); --card-hover-box-shadow-1-y: 3px; --card-hover-box-shadow-1-blur: 6px; --card-hover-box-shadow-2: rgba(24, 24, 27, 0.1); --card-hover-box-shadow-2-y: 8px; --card-hover-box-shadow-2-blur: 15px; --card-hover-icon-color: #18181B; --card-hover-icon-background-color: rgba(24, 24, 27, 0.04); --card-hover-icon-border-color: rgba(24, 24, 27, 0.34); --blur-opacity: .1; } body.toggle .grid * { transition-duration: 0s !important; } .grid { grid-template-columns: repeat(2, 240px); grid-gap: 32px; margin-top: 30px; position: relative; z-index: 1; } .card { background-color: var(--background-color); box-shadow: 0px var(--card-box-shadow-1-y) var(--card-box-shadow-1-blur) var(--card-box-shadow-1), 0px var(--card-box-shadow-2-y) var(--card-box-shadow-2-blur) var(--card-box-shadow-2), 0 0 0 1px var(--card-border-color); padding: 10px 10px 10px 20px; border-radius: 15px; cursor: pointer; position: relative; margin-bottom: 30px; transition: box-shadow 0.25s; } .card::before { content: ""; position: absolute; inset: 0; border-radius: 15px; background-color: var(--card-background-color); } .card .icon { z-index: 2; position: relative; display: table; padding: 8px; } .card .icon::after { content: ""; position: absolute; inset: 1.5px; border-radius: 10px; background-color: var(--card-icon-background-color); border: 1px solid var(--card-icon-border-color); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background-color 0.25s, border-color 0.25s; } .card .icon svg { position: relative; z-index: 1; display: block; width: 24px; height: 24px; transform: translateZ(0); color: var(--card-icon-color); transition: color 0.25s; } .card h4 { z-index: 2; position: relative; margin: 12px 0 4px 0; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 2; color: var(--card-label-color); } .card p { z-index: 2; position: relative; margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-color); } .card .shine { border-radius: inherit; position: absolute; inset: 0; z-index: 1; overflow: hidden; opacity: 0; transition: opacity 0.5s; } .card .shine:before { content: ""; width: 150%; padding-bottom: 150%; border-radius: 50%; position: absolute; left: 50%; bottom: 55%; filter: blur(35px); opacity: var(--card-shine-opacity); transform: translateX(-50%); background-image: var(--card-shine-gradient); } /* попробуем */ /*** тут будет иконка часов @media (max-width: 767px) { .container { padding-left:0; padding-right: 0 } } /*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ @font-face { font-family: FontAwesome; src: url(//static.moscow.ovh/cdn/store/3.7.1/674f50d287a8c48dc19ba404d20fe713.eot); src: url(//static.moscow.ovh/cdn/store/3.7.1/674f50d287a8c48dc19ba404d20fe713.eot?#iefix&v=4.7.0) format("embedded-opentype"),url(//static.moscow.ovh/cdn/store/3.7.1/af7ae505a9eed503f8b8e6982036873e.woff2) format("woff2"),url(//static.moscow.ovh/cdn/store/3.7.1/fee66e712a8a08eef5805a46892932ad.woff) format("woff"),url(//static.moscow.ovh/cdn/store/3.7.1/b06871f281fee6b241d60582ae9369b9.ttf) format("truetype"),url(//static.moscow.ovh/cdn/store/3.7.1/912ec66d7572ff821749319396470bde.svg#fontawesomeregular) format("svg"); font-weight: 400; font-style: normal } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .Banner-module__img { margin-bottom: 10px; margin-top: 10px; border-radius: 15px; } [data-categoryid="350521"] { color: #fff; background: linear-gradient(90deg, #E82F4E, #6e2fe8 , #2372d5, #2cd9aa); background-size: 400% 400%; animation: gradient 5s ease infinite; transform: translate3d(0, 0, 0); } [data-categoryid="428204"] { color: #fff; background: linear-gradient(90deg, #E82F4E, #6e2fe8 , #2372d5, #2cd9aa); background-size: 400% 400%; animation: gradient 5s ease infinite; transform: translate3d(0, 0, 0); } [data-categoryid="0"] { color: #fff; background: linear-gradient(90deg, #E82F4E, #00ff49 , #2372d5, #5400ff); background-size: 400% 400%; animation: gradient 5s ease infinite; transform: translate3d(0, 0, 0); } [data-categoryid="428205"] { color: #fff; background: linear-gradient(90deg, #E82F4E, #6e2fe8 , #2372d5, #2cd9aa); background-size: 400% 400%; animation: gradient 5s ease infinite; transform: translate3d(0, 0, 0); } /*psxmn*/