@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @font-face { font-family: "Intro"; src: url("/resources/pages/fonts/intro-fonts/Intro-Bold.woff2") format("woff2"), url("/resources/pages/fonts/intro-fonts/Intro-Bold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "Intro"; src: url("/resources/pages/fonts/intro-fonts/Intro-Regular.woff2") format("woff2"), url("/resources/pages/fonts/intro-fonts/Intro-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Intro Inline"; src: url("/resources/pages/fonts/intro-fonts/Intro-Inline.woff2") format("woff2"), url("/resources/pages/fonts/intro-fonts/Intro-Inline.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Intro"; src: url("/resources/pages/fonts/intro-fonts/Intro-Black.woff2") format("woff2"), url("/resources/pages/fonts/intro-fonts/Intro-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } :root { --main-font: "Inter", sans-serif; --regular-gap: 20px; --regular-padding: 20px; --color-block-bg: #111219; --color-accent: #dca057; --color-accent-light: #ce9652; --color-card-bg: #151720; } html { scroll-behavior: smooth; } body { font-family: var(--main-font); background: #0e0f14; font-weight: 400; font-size: 16px; } .logo { display: flex; align-items: center; justify-content: center; } .logo__img { width: 100%; height: 100%; object-fit: contain; } .text--small { font-size: 14px; font-weight: 400; line-height: 1.2; } .text--right { text-align: right; } .text--base { font-weight: 400; font-size: 16px; line-height: 1.2; } .text--bold { font-weight: 700; } .text--middle { font-size: 18px; } .text--big { font-size: 20px; font-weight: 700; } .text--accent { color: var(--color-accent); } .text--white { color: #fff; } .text--green { color: #2fb257; } .text--red { color: #ed3356; } .text--grey { color: rgb(123 125 137); /*#424659;*/ } .text--grey--light { color: #a69995; } .text--center { text-align: center; } .title--small { font-size: 23px; font-weight: 700; } .title--base { font-size: 32px; line-height: 1.2; font-weight: 800; } .title--big { font-size: 44px; line-height: 1.2; font-weight: 800; } .title--big--small { font-size: 30px; line-height: 1.2; font-weight: 800; } .title--regular { font-weight: 400; } .title--bold { font-weight: 700; } .title--black { font-weight: 800; } .title--white { color: #fff; } .title--accent { color: var(--color-accent); } .title--center { text-align: center; } .title--uppercase { text-transform: uppercase; } .icon { width: 100%; height: 100%; } .container { max-width: 1470px; width: 100%; margin: 0 auto; padding: 0 15px; } .container--big { max-width: 1920px; padding: 0 100px; } .page-wrapper { display: flex; flex-direction: column; overflow: hidden; } .page-wrapper__login { min-height: 100vh; height: auto; overflow: unset; } .content { display: flex; align-items: stretch; gap: var(--regular-gap); flex-grow: 1; max-height: 100%; padding: var(--regular-padding); height: 100vh; min-height: 550px; } .content--padding--none { padding: 0; } .content__wrapper { flex-grow: 1; display: flex; flex-direction: column; gap: var(--regular-gap); } .content__block { background: var(--color-block-bg); border-radius: 6px; padding: var(--regular-padding); flex-grow: 1; overflow: auto; } .content__block::-webkit-scrollbar { width: 3px; height: 3px; background-color: #221f31; border-radius: 20px; } .content__block::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 20px; } .content__block::-webkit-scrollbar-track { background-color: #221f31; border-radius: 20px; } .content__block--transparent { background: transparent; } .content__block--padding--big { padding: 50px; } .content__block--padding--none { padding: 0; } .block__wrapper { display: flex; flex-direction: column; gap: 36px; } .block__wrapper--gap--none { gap: 0; } .block__box { display: flex; flex-direction: column; gap: 30px; } .block__box--gap--big { gap: 40px; } .block__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .block__header--column { gap: 10px; flex-direction: column; align-items: unset; } .block__title { font-size: 23px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; fill: var(--color-accent); } .block__title .icon { width: 26px; height: 26px; } .block__item { padding: 30px; } .block__item--dark { background: var(--color-card-bg); border-radius: 6px; } .block__item--verification { border-radius: 6px; background: var(--color-card-bg) linear-gradient(0deg, rgba(206, 150, 82, 0.2) 0%, rgb(21, 23, 32) 49%); } .block__item--verification--true { position: relative; } .block__item--verification--true::before { content: ""; width: 100px; height: 70px; position: absolute; bottom: 30px; right: 30px; display: block; opacity: 0.32; background: url("/resources/user/images/logo-tiny.png") center center/contain no-repeat; } .block__item+.block__item { border-top: 3px solid #0e0f14; } .burger { width: 27px; height: 20px; position: relative; display: flex; align-items: center; justify-content: center; } .burger:hover { cursor: pointer; } .burger__item { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--color-accent); border-radius: 6px; } .burger__item:nth-child(1) { transition: 0.3s transform, 0.3s top, 0.3s background-color; } .burger__item:nth-child(2) { top: calc(50% - 1.5px); transition: 0.3s left, 0.3s opacity, 0.5s visibility, 0.3s background-color; } .burger__item:nth-child(3) { top: calc(100% - 3px); transition: 0.3s transform, 0.3s top, 0.3s background-color; } .burger--active .burger__item { top: 8px; } .burger--active .burger__item:nth-child(1) { transform: rotate(45deg); } .burger--active .burger__item:nth-child(2) { left: -10px; opacity: 0; visibility: hidden; } .burger--active .burger__item:nth-child(3) { transform: rotate(-45deg); } .button { display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--main-font); width: max-content; max-width: 100%; } .button:hover { cursor: pointer; } .button--base { padding: 25px 30px; font-size: 16px; font-weight: 800; line-height: 1; gap: 30px; border-radius: 6px; text-transform: uppercase; } .button--start { justify-content: flex-start; } .button--base--regular { text-transform: unset; } .button--base--full { padding: 20px 10px; border-radius: 16px; } .button--base--small { padding: 20px; } .button--base--tiny { height: 50px; padding: 10px 20px; gap: 10px; } .button--transparent { box-shadow: inset 3px 0px 0 0 var(--color-accent); border: solid 1px var(--color-accent); color: var(--color-accent); transition: 0.3s background-color, 0.3s color; } .button--transparent--bottom { box-shadow: inset 0px -3px 0 0 #dca057; } .button--transparent--border--white { border-color: #fff; } .button--transparent--border--orange { border-color: #d27251; } .button--transparent--border--green { border-color: #2dbb62; } .button--transparent--tiny { box-shadow: none; } .button--transparent--white { color: #fff; } .button--transparent--orange { border-color: #d27251; } .button--transparent:hover { background: var(--color-accent); color: #111219; } .button--transparent:hover .button__icon { fill: #fff; } .button--accent { border: solid 1px #dca057; background-color: rgba(181, 132, 73, 0.1); color: #fff; fill: var(--color-accent); transition: 0.3s background-color, 0.3s color, 0.3s fill; } .button--accent:hover { background-color: rgb(181, 132, 73); } .button--accent--color { color: var(--color-accent); } .button--accent--color:hover { color: #fff; fill: #fff; } .button--accent--fill { color: #111219; background: #dca057; } .button--black { background-color: #24252d; color: #dca057; } .button--arrow { position: relative; } .button--arrow::before { content: ""; width: 0; height: 0; position: absolute; left: 3px; top: calc(50% - 5px); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid var(--color-accent); } .button--wallet--exchange .button__icon, .button--wallet--add .button__icon { transition: .3s transform; } .button--wallet--exchange:hover, .button--wallet--add:hover, .button--wallet--withdrawal:hover { background: transparent; color: #Fff; } .button--wallet--exchange:hover .button__icon { transform: rotate(360deg); } .button--wallet--add:hover .button__icon { transform: rotate(180deg); } .button--wallet--withdrawal:hover .button__icon { animation: .3s shake linear forwards; } .button--full { width: 100%; } .button--gap--small { gap: 10px; } .button--center { margin: 0 auto; } .button__icon { width: 20px; height: 20px; flex-shrink: 0; } .button__icon--white { fill: #fff; } .button__icon--orange { fill: #d27251; } .button__icon--accent { fill: var(--color-accent); } .button__icon--black { fill: #111219; } .button__icon--dollar { border-radius: 50%; background: var(--color-accent); display: flex; align-items: center; justify-content: center; } .button__icon--dollar .icon { width: 14px; height: 14px; fill: var(--color-block-bg); } @keyframes shake { 0% { transform: translateY(0); } 25% { transform: translateY(10%); } 50% { transform: translateY(0); } 75% { transform: translateY(-10%); } 100% { transform: translateY(0); } } .select { position: relative; z-index: 1; } .select--active { z-index: 10; } .select--active .select__content--hidden { opacity: 1; visibility: visible; } .select--active .select__label { border-radius: 6px 6px 0 0; border-color: rgba(255, 255, 255, 0.05); } .select--active .select__label::after { transform: rotate(180deg); } .select--full { max-width: 100%; width: 100%; } .select__tag { display: none; } .select__wrapper { position: relative; width: 100%; } .select__label { box-shadow: inset 0px 2px 0 0 #1c1f29; background-color: #191b25; padding: 10px 20px; font-size: 16px; font-weight: 700; border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: space-between; height: 50px; } .select__label:hover { cursor: pointer; } .select__name { text-overflow: ellipsis; overflow: hidden; } .select__item { border-radius: 0; width: 100%; transition: 0.3s background-color; font-size: 15px; line-height: 1; color: #fff; padding: 10px 20px; height: 40px; } .select__item:not(:last-child) { border-bottom: 1px solid #1c1f29; } .select__item span { text-overflow: ellipsis; overflow: hidden; } .select__item:hover { cursor: pointer; color: #dca057; } .select__item--hidden { display: none; } .select__label { display: flex; align-items: center; gap: 20px; transition: 0.3s color; position: relative; z-index: 4; } .select__label:hover { opacity: 0.8; } .select__label::after { content: ""; width: 0; height: 0; display: block; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #4c4f5f; transition: 0.3s transform; } .select__content { position: absolute; top: 100%; left: 0; width: 100%; border-radius: 0 0 6px 6px; display: flex; flex-direction: column; transition: 0.3s opacity, 0.1s visibility; box-shadow: 0px 16px 38px 0 rgba(14, 15, 22, 0.52); border: solid 1px #1c1f29; border-top: none; background-color: #151720; max-height: 150px; overflow: auto; } .select__content::-webkit-scrollbar { width: 3px; height: 3px; background-color: #221f31; border-radius: 20px; } .select__content::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 20px; } .select__content::-webkit-scrollbar-track { background-color: #221f31; border-radius: 20px; } .select__content--hidden { opacity: 0; visibility: hidden; } .grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--regular-gap); } .grid__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--regular-gap); } .grid__row--pool { grid-template-columns: 1fr 550px; } .grid__row--gap--big { gap: 30px; } .grid__row--auto { grid-auto-rows: auto; } .grid__block { grid-column-end: span 4; } .grid__block--small { grid-column-end: span 3; } .grid__block--middle { grid-column-end: span 6; } .grid__block--full { grid-column: 1/-1; } .grid__block--big { grid-column-end: span 8; } .status { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 400; --current-color: #ea2243; white-space: nowrap; } .status::before { content: ""; width: 5px; height: 5px; display: block; flex-shrink: 0; border-radius: 50%; background: var(--current-color); box-shadow: 0 0 10px var(--current-color); } .status::after { content: "Не активен"; color: var(--current-color); } .status--active { --current-color: #2dbb62; } .status--active::after { content: "Активен"; } .card__header { width: 100%; } .card__row { position: relative; z-index: 4; display: flex; align-items: stretch; gap: 30px; justify-content: space-between; width: 100%; } .card__buttons { display: flex; flex-direction: column; gap: 14px; a { width: 100%; } } .card__wrapper { display: flex; align-items: stretch; justify-content: space-between; gap: var(--regular-gap); height: 100%; padding: var(--regular-padding); border-radius: 6px; background: var(--color-card-bg); overflow: hidden; position: relative; } .card__wrapper--column { flex-direction: column; } .card__wrapper--table { min-width: max-content; } .card__wrapper--passport::before { content: ""; width: 115px; height: 164px; display: block; position: absolute; bottom: -10px; right: 20px; background: url("/resources/user/images/passport.png") center center/contain no-repeat; } .card__wrapper--selfie::before { content: ""; width: 165px; height: 100px; display: block; position: absolute; bottom: 0; right: -30px; background: url("/resources/user/images/selfie.png") center center/contain no-repeat; } .card__wrapper--wallet::before { content: ""; width: 400px; height: 400px; display: block; position: absolute; left: -100px; z-index: 1; bottom: -200px; background: radial-gradient(circle, rgba(206, 150, 82, 0.15) 25%, var(--color-card-bg) 70%); } .card__wrapper--wallet::after { content: ""; width: 300px; height: 300px; display: block; position: absolute; z-index: 2; left: -50px; bottom: -120px; background: url("/resources/user/images/wallet.png") center center/contain no-repeat; } .card__wrapper--contract { background: url("/resources/user/images/contract.jpg") center center/cover no-repeat; } .card__wrapper--contract--all::before { content: ""; width: 100%; height: 100%; display: block; position: absolute; left: 0; z-index: 1; top: 0; background: linear-gradient(142deg, rgba(206, 150, 82, 0.4) 5%, rgba(206, 150, 82, 0.1) 30%, rgba(206, 150, 82, 0) 60%); } .card__wrapper--black { background-color: #0e0f14; border: 1px solid #191c26; } .card__wrapper--light { background-color: #151720; } .card__wrapper--big { padding: 30px; } .card__wrapper--gap--big { gap: 30px; } .card__wrapper--icon { padding-right: 50px; } .card__header { display: flex; flex-direction: column; gap: var(--regular-gap); } .card__header--row { align-items: center; flex-direction: row; gap: 10px; justify-content: space-between; } .card__header--gap--small { gap: 10px; } .card__box { display: flex; flex-direction: column; justify-content: space-between; gap: var(--regular-gap); position: relative; z-index: 3; width: 100%; } .card__box--start { justify-content: flex-start; } .card__box--small { max-width: 455px; } .card__icon { width: 55px; height: 55px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; align-self: center; position: relative; } .card__icon--shadow::before { content: ""; width: 100%; height: 100%; left: 0; top: 0; position: absolute; display: block; z-index: 1; background: rgba(206, 150, 82, 0.1); border-radius: 50%; box-shadow: 0 0 50px rgba(206, 150, 82, 0.3); } .card__icon--accent { fill: var(--color-accent-light); } .card__icon .icon { position: relative; z-index: 2; } .contract-row { display: flex; gap: 20px; overflow: auto; overscroll-behavior: contain; scroll-behavior: smooth; } .contract-row::-webkit-scrollbar { width: 3px; height: 3px; background-color: #221f31; border-radius: 20px; } .contract-row::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 20px; } .contract-row::-webkit-scrollbar-track { background-color: #221f31; border-radius: 20px; } .contract-row__item { width: 300px; flex-shrink: 0; } .contract-item { border-radius: 6px; border: 1px solid transparent; transition: 0.3s border-color; overflow: hidden; } .contract-item.active { border-color: var(--color-accent); } .contract-item__header { display: flex; flex-direction: column; gap: 10px; text-align: center; } .contract-item__wrapper { display: flex; flex-direction: column; height: 100%; gap: 32px; background: var(--color-card-bg) linear-gradient(-45deg, rgba(206, 150, 82, 0.15) 0%, rgb(21, 23, 32) 24%, rgb(21, 23, 32) 86%, rgba(206, 150, 82, 0.15) 100%); padding: 40px 20px 20px 20px; position: relative; } .contract-item:has(a.active) { border-color: var(--color-accent); } .contract-item__wrapper .tabs__link { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; text-decoration: none; } .contract-item__wrapper .button { position: relative; z-index: 3; } .contract-item__list { display: flex; flex-direction: column; gap: 12px; } .contract-item__price { font-size: 18px; color: #fff; font-weight: 700; text-align: center; margin: auto 0 0 0; } .contract-item__price span { font-size: 20px; font-weight: 800; color: var(--color-accent); } .contract-item__tag { display: flex; align-items: center; justify-content: space-between; background: #191b25; height: 36px; padding: 10px 15px; border-radius: 20px; } .contract-tag__wrapper { height: 100%; padding: 16px 20px; border: solid 1px var(--color-accent); border-radius: 6px; background: rgba(21, 23, 32, 0.55); } .contract-tabs { display: grid; grid-template-columns: 150px minmax(0, 1fr); } .contract-tabs__content { padding: 30px 40px; border-radius: 6px; background: var(--color-card-bg); } .contract-tabs__nav { display: flex; flex-direction: column; justify-content: center; } .contract-tabs__link { display: flex; align-items: center; width: 100%; height: 50px; font-family: var(--main-font); font-size: 16px; color: #fff; padding: 10px 25px; border-radius: 6px 0 0 6px; border-left: 2px solid transparent; transition: 0.3s border-color, 0.3s background-color, 0.3s color; text-decoration: none; } .contract-tabs__link:hover { color: var(--color-accent); } .contract-tabs__link.active { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-card-bg) linear-gradient(90deg, rgba(206, 150, 82, 0.2), var(--color-card-bg)); } .contract-tabs__link:not(:last-child) { border-bottom: 1px solid #151720; } .contract-info { display: flex; flex-direction: column; gap: 20px; } .contract-info__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 20px 0; } .contract-info__title { display: flex; flex-direction: column; gap: 5px; } .contract-info__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; } .contract-info__row:not(:last-child) { border-bottom: 1px solid #1e212e; } .login { padding: 0; } .login__wrapper { position: relative; padding: 125px 20px 20px 20px; } .login__container { max-width: 515px; width: 100%; margin: 0 auto; height: 100%; position: relative; z-index: 3; display: flex; flex-direction: column; gap: 40px; } .login__container--big { max-width: 640px; } .login__header { display: flex; flex-direction: column; align-items: center; gap: 55px; } .login__title { font-size: 28px; line-height: 1.2; font-weight: 800; } .login__desc { display: flex; flex-direction: column; gap: 20px; text-align: center; } .login__footer { margin: auto auto 0 auto; max-width: 515px; width: 100%; } .login__text { text-align: center; font-size: 13px; line-height: 1.2; color: #83858e; } .login__logo { width: 165px; height: 124px; } .js-form-title-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .js-form-title-error::after { content: attr(data-error); color: #d93050; font-size: 12px; } .form-notice__wrapper { padding: 50px 20px; border: solid 1px #dca057; background-color: rgba(181, 132, 73, 0.1); border-radius: 6px; } .form-notice__wrapper--dark { background: #111219; border: transparent; } .form-notice__text { text-align: center; font-size: 18px; font-weight: 400; color: #fff; line-height: 1.2; } .form-notice__text span { color: var(--color-accent); } .form-notice__text--bold { font-weight: 700; } .form-notice__text--underline { text-decoration: underline; } .form-checkbox { display: flex; align-items: center; gap: 10px; } .form-checkbox:hover { cursor: pointer; } .form-checkbox__item { display: none; } .form-checkbox__item:checked~.form-checkbox__checkmark::before { opacity: 1; } .form-checkbox__checkmark { background-color: #13141b; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 6px; } .form-checkbox__checkmark::before { content: ""; width: 7px; height: 7px; display: block; flex-shrink: 0; border-radius: 50%; background: var(--color-accent); opacity: 0; transition: 0.3s opacity; } .form-input { display: flex; flex-direction: column; gap: 15px; } .form-input--copy { position: relative; } .form-input--copy:hover { cursor: pointer; } .form-input--copy:hover .form-input__copy { fill: #fff; } .form-input--copy .form-input__item { padding-right: 40px; white-space: nowrap; text-overflow: ellipsis; } .form-input__item--disabled { border-color: var(--color-accent); color: var(--color-accent); text-align: center; display: block; } .form-input--copy .form-input__copy { width: 18px; height: 18px; display: block; fill: #242738; position: absolute; right: 14px; bottom: 16px; transition: 0.3s fill; } .form-input--copy .form-input__copy--accent { fill: var(--color-accent); } .form-input--row { flex-direction: row; align-items: center; } .form-input--size--small { max-width: 400px; width: 100%; } .form-input--small { gap: 10px; } .form-input--error .form-input__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .form-input--error .form-input__label::after { content: attr(data-error); color: #d93050; } .form-input--error .form-input__item { border-color: #d93050; } .form-input--error--bottom { position: relative; } .form-input--error--bottom .form-input__label::after { position: absolute; top: calc(100% + 4px); right: 0; } .form-input__row { display: grid; grid-template-columns: minmax(0, 1fr) 166px; } .form-input__select { width: 100%; flex-shrink: 0; height: 50px; } .form-input__label { font-size: 14px; line-height: 1.2; color: #75767d; } .form-input__label--grey { color: #424659; } .form-input__label--white { color: #fff; } .form-input__item { height: 50px; border-radius: 12px; background-color: #13141b; border: solid 1px #20222a; padding: 10px 15px; color: #fff; font-size: 16px; font-weight: 400; transition: 0.3s border-color; } .form-input__item--small { width: 150px; } .form-input__item::placeholder { color: #7b7e8a; } .form-input__item--orange { color: var(--color-accent); font-size: 14px; } .form-input__item--radius--small { border-radius: 6px; } .form-file { display: flex; align-items: center; gap: 30px; } .form-file__item { display: none; } .form-file__item:valid~.form-file__checkmark::after { content: "загрузить заново"; } .form-file__item:valid~.form-file__success { display: flex; } .form-file__success { display: none; align-items: center; font-size: 14px; font-weight: 800; text-transform: uppercase; color: #29ac3f; gap: 10px; text-align: center; } .form-file__success .icon { width: 20px; height: 20px; fill: #29ac3f; } .form-file__checkmark { display: flex; align-items: center; gap: 20px; padding: 10px 20px; height: 54px; border: solid 1px #dca057; border-radius: 6px; text-align: center; width: max-content; transition: 0.3s background-color; } .form-file__checkmark .icon { content: ""; width: 20px; height: 20px; display: block; flex-shrink: 0; fill: var(--color-accent); transition: 0.3s fill; } .form-file__checkmark::after { content: "прикрепить фото"; font-size: 14px; font-weight: 800; text-transform: uppercase; color: var(--color-accent); transition: 0.3s color; } .form-file__checkmark:hover { background-color: #dca057; cursor: pointer; } .form-file__checkmark:hover::after { color: #fff; } .form-file__checkmark:hover .icon { fill: #fff; } .form__row { display: flex; align-items: center; gap: 20px; justify-content: space-between; } .form__row--solid { justify-content: flex-start; } .form__wrapper { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; width: 100%; } .form__wrapper--start { justify-content: flex-start; } .form__footer { display: flex; flex-direction: column; gap: 30px; } .form__footer--end { align-items: flex-end; } .form__content { display: flex; flex-direction: column; gap: 20px; } .form__title { font-size: 18px; font-weight: 700; color: #fff; } .form__title--accent { color: var(--color-accent); } .verification { counter-reset: step; } .verification-item { counter-increment: step; justify-content: space-between; height: 100%; } .verification-button { padding: 30px; display: flex; align-items: center; justify-content: center; } .verification-title::before { content: counter(step) "."; font-size: 23px; font-weight: 800; color: var(--color-accent); line-height: 1.2; } .tabs__content { display: none; } .tabs__content.active { display: block; } .table { overflow: auto; } .table::-webkit-scrollbar { width: 3px; height: 3px; background-color: #221f31; border-radius: 20px; } .table::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 20px; } .table::-webkit-scrollbar-track { background-color: #221f31; border-radius: 20px; } .table--full { width: 100%; } .table--pool { display: flex; flex-direction: column; gap: 8px; } .table__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 6px; min-width: 600px; } .table__row--partners { grid-template-columns: repeat(6, minmax(0, 1fr)); min-width: 900px; } .table__row--half { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: max-content; } .table__row--status { grid-template-columns: 120px 200px repeat(2, minmax(0, 1fr)); } .table__row--lines { grid-template-columns: minmax(0, 1fr) repeat(3, 100px); min-width: max-content; } .table__row--small { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: unset; width: 100%; border-radius: 16px; } .table__row:first-child { background-color: #1e2129; } .table__row:nth-child(n+2):nth-child(odd) { background-color: #12141c; } .table__row--black:nth-child(n+2):nth-child(odd) { background-color: #111219; } .table__row--black { background-color: #111219; } .table__column { display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; white-space: nowrap; } .table__column--small { padding: 10px; } .table__column p { text-overflow: ellipsis; overflow: hidden; background-color: transparent; color: inherit; margin: 0; padding: 0; } .table__column:first-child { justify-content: flex-start; text-align: left; } .table__column:last-child { justify-content: flex-end; text-align: right; } .notification { position: relative; } .notification--active .notification-content { opacity: 1; visibility: visible; } .notification--active .notification-link { fill: var(--color-accent); text-decoration: none; } .notification-link { fill: #fff; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; text-decoration: none; } .notification-link__icon { width: 100%; height: 100%; } .notification-content { padding: 16px 15px 16px 25px; background: rgba(17, 18, 25, 0.95); border-radius: 20px; width: 350px; position: absolute; top: 0; right: calc(100% + 10px); box-shadow: 0px 14px 43px 0px rgba(25, 23, 37, 0.92); opacity: 0; visibility: hidden; transition: 0.3s visibility, 0.5s opacity; } .notification-content__list { max-height: 260px; height: 100%; overflow: auto; padding-right: 10px; } .notification-content__list::-webkit-scrollbar { width: 3px; height: 3px; background-color: #221f31; border-radius: 20px; } .notification-content__list::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 20px; } .notification-content__list::-webkit-scrollbar-track { background-color: #221f31; border-radius: 20px; } .notification-item { padding: 16px 0; } .notification-item:first-child { padding-top: 0; } .notification-item__wrapper { display: flex; flex-direction: column; gap: 10px; } .notification-item__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .notification-item__time { white-space: nowrap; flex-shrink: 0; font-size: 12px; color: #424659; font-weight: 700; } .notification-item__title { font-size: 14px; font-weight: 700; color: var(--color-accent); } .notification-item__text { font-size: 13px; color: #fff; font-weight: 500; } .notification__button { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border: 1px solid #37334c; border-radius: 20px; background: rgba(30, 27, 43, 0.26); font-size: 13px; text-transform: uppercase; color: #fff; font-weight: 800; } .language-select { position: relative; width: 60px; } .language-select--active .language-select__content { visibility: visible; opacity: 1; } .language-select--active .language-select__current::after { transform: rotate(180deg); } .language-select__content { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; border-radius: 6px; overflow: hidden; opacity: 0; visibility: hidden; transition: 0.3s visibility, 0.5s opacity; border: 1px solid #2b2c35; } .language-select__current { padding: 6px 6px 6px 9px; border-radius: 6px; border: 1px solid #2b2c35; justify-content: space-between; transition: 0.3s border-radius; } .language-select__current::after { content: ""; width: 0; height: 0; display: block; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 3px solid #4c4f5f; transition: 0.3s transform; } .language-select__item { padding: 6px 12px; display: flex; align-items: center; gap: 6px; color: #fff; background-color: #1b1d26; transition: 0.3s background-color; } .language-select__item--current { color: #dca057; } .language-select__text { font-size: 11px; font-weight: 700; text-transform: uppercase; } .language-select__item:hover { background: rgba(0, 0, 0, 0.4); } .language-select__icon { width: 12px; height: 12px; object-fit: contain; border-radius: 4px; } .profile-card { display: flex; align-items: center; gap: 20px; } .profile-card__img { display: flex; flex-direction: column; border-radius: 6px; background: #111219; overflow: hidden; flex-shrink: 0; } .profile-card__img img { width: 131px; height: 131px; border-radius: 6px; object-fit: cover; } .profile-card__button { width: 100%; height: 34px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; line-height: 1.2; color: #fff; text-transform: uppercase; } .profile-card__button .icon { width: 16px; height: 16px; fill: var(--color-accent); } .profile-card__content { display: flex; flex-direction: column; gap: 30px; flex-grow: 1; } .profile-card__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; width: 100%; } .profile-card__info { display: flex; flex-direction: column; gap: 20px; text-align: center; } .profile-card__name { font-size: 18px; font-weight: 700; color: #fff; } .profile-card__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .profile-card__tag { padding: 10px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #1b1d28; } .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(17, 18, 25, 0.88); display: none; z-index: 12; } .popup--active { display: block; } .popup--modal { height: max-content; top: 10px; right: 10px; left: unset; max-width: 280px; width: 100%; } .popup--modal--big { max-width: max-content; right: unset; left: 50%; transform: translateX(-50%); top: 0; border-radius: 0 0 6px 6px; border: 1px solid var(--color-accent); border-bottom-width: 3px; border-top: none; box-shadow: 0px 10px 23px 1px rgba(220, 160, 87, .2); height: unset; } .popup__wrapper { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 30px 10px; } .popup__wrapper--modal { position: relative; padding: 0; } .popup__close { backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; position: absolute; right: 15px; top: 15px; z-index: 3; transition: 0.3s background-color; } .popup__close::before, .popup__close::after { content: ""; width: 2px; height: 100%; display: block; background-color: #252730; position: absolute; top: calc(50% - 7.5px); left: calc(50% - 1px); transition: 0.3s background-color; } .popup__close:hover::before, .popup__close:hover::after { background: #fff; } .popup__close::before { transform: rotate(45deg); } .popup__close::after { transform: rotate(-45deg); } .popup__container { max-width: 470px; width: 100%; margin: 0 auto; position: absolute; background: #151720; border-radius: 6px; padding: 40px; top: 50%; max-height: calc(100% - 30px); overflow: auto; left: 50%; transform: translate(-50%, -50%); } .popup__container::-webkit-scrollbar { width: 3px; height: 3px; background-color: #221f31; border-radius: 20px; } .popup__container::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 20px; } .popup__container::-webkit-scrollbar-track { background-color: #221f31; border-radius: 20px; } .popup__container--img { max-width: 460px; width: 100%; padding: 60px 20px 40px 20px; } .popup__container--congratulations { max-width: 100%; background: transparent; padding: 20px; } .popup__container--modal { position: relative; left: 0; top: 0; transform: translate(0); max-height: unset; padding: 40px 20px; } .popup-calc__content { display: flex; flex-direction: column; gap: 40px; } .popup-calc__list { display: flex; flex-direction: column; gap: 20px; } .popup-calc__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 54px; padding: 10px 20px; background: #181b25; border: 1px solid #21242f; border-radius: 6px; } .congratulations { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 30px; } .congratulations__text { display: flex; flex-direction: column; gap: 10px; align-items: center; } .congratulations__img { display: flex; align-items: center; justify-content: center; max-width: 730px; width: 100%; } .congratulations__img img { width: 100%; height: 100%; object-fit: contain; } .img-popup { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; } .img-popup__header { width: 124px; height: 124px; display: flex; align-items: center; justify-content: center; } .img-popup__header .icon { width: 100%; height: 100%; object-fit: contain; fill: #20222c; } .calculator__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 3px; } .calculator-timer__content { display: flex; align-items: center; justify-content: center; gap: 7px; } .calculator-timer__block { width: 40px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; text-align: center; } .calculator-timer__number { width: 40px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; color: #fff; background: #202331; border-radius: 12px; } .calculator-timer__text { font-size: 13px; color: #4c4f60; } .calculator-radio { display: flex; align-items: center; gap: 10px; border: solid 1px #21232d; border-radius: 6px; height: 40px; padding: 12px 18px 12px 12px; } .calculator-radio:hover { cursor: pointer; } .calculator-radio__input { display: none; } .calculator-radio.active .calculator-radio__checkmark::before { opacity: 1; } .calculator-radio__input:checked~.calculator-radio__checkmark::before { opacity: 1; } .calculator-radio__checkmark { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border: solid 1px #21232d; background-color: #111219; border-radius: 6px; flex-shrink: 0; } .calculator-radio__checkmark::before { content: ""; width: 8px; height: 8px; display: block; border-radius: 50%; background: #15a541; opacity: 0; transition: 0.3s opacity; } .calculator-circle { display: flex; align-items: center; justify-content: center; border: solid 16px rgba(30, 31, 42, 0.7); padding: 16px; border-radius: 50%; aspect-ratio: 1; width: 100%; height: auto; max-width: 500px; margin: 0 auto; position: relative; } .calculator-circle__border { position: absolute; width: calc(100% + 32px); height: calc(100% + 32px); left: -16px; top: -16px; stroke: var(--color-accent); } .calculator-circle__timer { display: flex; flex-direction: column; gap: 20px; text-align: center; } .calculator-circle__header { display: flex; flex-direction: column; gap: 10px; } .calculator-circle__wrapper { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 50%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: #191B26; } .calculator-circle__wrapper::before { content: ""; position: absolute; z-index: 3; top: 0; right: 0; transform: translateY(-20%); border-radius: 50%; display: block; width: 60%; height: 60%; background: radial-gradient(circle, rgba(206, 150, 82, 0.35) 0%, rgba(21, 23, 32, 0) 70%); } .calculator-circle__wrapper::after { content: ""; position: absolute; z-index: 2; width: 165px; height: 124px; display: block; opacity: 0.1; background: url("/resources/user/images/logo-tiny.png") center center/contain no-repeat; } .calculator-circle__content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; position: relative; z-index: 5; } .calculator-circle__title { font-size: 59px; line-height: 1.2; font-weight: 800; color: #fff; } .calculator-circle__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 300px; } .calculator-circle__tag { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; border: solid 2px #dca057; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.13)); } .calculator-circle__number { font-size: 26px; font-weight: 800; color: var(--color-accent); line-height: 1.2; } .calculator-circle__text { font-size: 18px; color: #aa9c8b; line-height: 1.2; } .header { position: relative; z-index: 12; } .header__language { flex-shrink: 0; } .header__wrapper { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-auto-rows: 100px; gap: var(--regular-gap); } .header__block { background: var(--color-block-bg); border-radius: 6px; display: flex; align-items: center; gap: var(--regular-gap); padding: 10px 30px 10px 30px; } .header__block--gradient { background: #111219 linear-gradient(-150deg, rgba(220, 160, 87, 0.2) 10%, rgba(17, 18, 25, 0.3) 80%); } .header__logo { background: var(--color-block-bg); border-radius: 6px; display: flex; align-items: center; padding: 10px; } .header__info { margin: 0 0 0 auto; } .header-profile__wrapper { display: flex; align-items: center; gap: 20px; } .header-profile__name { white-space: nowrap; overflow: hidden; max-width: 110px; width: 100%; } .header-profile__name p { overflow: hidden; text-overflow: ellipsis; } .header-profile__img { width: 66px; height: 66px; border-radius: 6px; background: rgba(255, 255, 255, 0.3); padding: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .header-profile__img img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; } .header-profile__quit { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; flex-shrink: 0; border-radius: 50%; background: rgba(14, 15, 20, 0.2); fill: #595b68; transition: 0.3s fill; } .header-profile__quit:hover { fill: #fff; } .header-profile__quit .icon { width: 16px; height: 16px; } .nav__list { display: flex; align-items: center; gap: 45px; } .nav__item { display: flex; padding: 0; margin: 0; } .nav__link { display: flex; align-items: center; font-size: 16px; color: #fff; transition: 0.3s color; text-decoration: none; } .nav__link:hover { color: var(--color-accent); } .info__wrapper { display: flex; align-items: flex-end; gap: 30px; text-align: center; } .info__wrapper--column { flex-direction: column; align-items: flex-start; text-align: left; } .info__block { display: flex; flex-direction: column; gap: 15px; } .info__block--row { display: grid; grid-template-columns: 2fr 3fr; width: 100%; } .aside { max-width: 300px; width: 100%; flex-shrink: 0; } .aside-block { padding: 20px 20px 20px 30px; } .aside-block+.aside-block { border-top: 1px solid #0e0f14; } .aside-block__header { padding: 10px 25px; } .aside-block__title { font-size: 14px; font-weight: 400; color: #3e4153; line-height: 1.2; } .aside-list__item { display: flex; margin: 0; padding: 0; } .aside-list__link { display: flex; align-items: center; gap: 17px; width: 100%; fill: #fff; font-family: var(--main-font); font-size: 16px; color: #fff; padding: 20px 25px; border-radius: 6px; position: relative; transition: 0.3s fill, 0.3s color, 0.3s background-color, 0.3s opacity; text-decoration: none; } .aside-list__link::before { content: ""; position: absolute; width: 3px; height: 22px; display: block; left: -13px; top: calc(50% - 11px); border-radius: 4px; background: var(--color-accent); opacity: 0; transition: 0.3s opacity; } .aside-list__link:hover { opacity: 0.4; } .aside-list__link.active, .aside-list__link:hover { fill: var(--color-accent); color: var(--color-accent); background: #1c1d25; } .aside-list__link.active::before, .aside-list__link:hover::before { opacity: 1; } .aside-list__link .icon { width: 18px; height: 18px; flex-shrink: 0; } .aside-footer { margin: auto 0 0 0; } .aside__wrapper { display: flex; flex-direction: column; gap: var(--regular-gap); height: 100%; } .aside__content { background: var(--color-block-bg); flex-grow: 1; overflow: auto; border-radius: 6px; } .aside__content::-webkit-scrollbar { width: 3px; height: 3px; background-color: #221f31; border-radius: 20px; } .aside__content::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 20px; } .aside__content::-webkit-scrollbar-track { background-color: #221f31; border-radius: 20px; } .aside__header { padding: 44px 55px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #1c1d25 linear-gradient(150deg, rgba(220, 160, 87, 0.2) 10%, rgba(28, 29, 37, 0.3) 80%); } .aside__logo { width: 100%; height: 100%; object-fit: contain; } .faq-list { display: flex; flex-direction: column; gap: 16px; } .faq-item { overflow: hidden; } .faq-item--active .faq-item__header { border-radius: 6px 6px 0 0; color: var(--color-accent); } .faq-item--active .faq-item__content { height: var(--content-height); } .faq-item--active .faq-item__icon { background-color: #111219; } .faq-item--active .faq-item__icon::before { transform: rotate(-90deg); color: var(--color-accent); } .faq-item__content { background: #0e0f14; padding: 0; height: 0px; transition: 0.3s height, 0.3s padding; border-radius: 0 0 6px 6px; } .faq-item__text { padding: 30px; display: flex; flex-direction: column; gap: 20px; font-size: 15px; color: #b1b4c1; } .faq-item__header { min-height: 60px; display: flex; align-items: stretch; justify-content: space-between; gap: 20px; padding: 20px 80px 20px 30px; box-shadow: inset 0px 1px 0 0 rgba(255, 255, 255, 0.19); background: #151720; border-radius: 6px; position: relative; overflow: hidden; color: #fff; transition: 0.3s color, 0.3s border-radius; } .faq-item__header:hover { cursor: pointer; } .faq-item__icon { width: 60px; height: 100%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; box-shadow: inset 0px 1px 0 0 rgba(255, 255, 255, 0.19); background-color: #1a1c26; transition: 0.3s background-color; } .faq-item__icon::before { content: "›"; font-size: 28px; font-weight: 700; color: #fff; transform: rotate(90deg); transition: 0.3s transform; } .history-tabs__nav { display: flex; align-items: center; flex-wrap: wrap; } .history-tabs__link { display: flex; align-items: center; padding: 15px 20px; font-weight: 700; font-size: 15px; color: #fff; border-radius: 6px; transition: 0.3s color, 0.3s background-color; text-decoration: none; } .history-tabs__link:hover { color: var(--color-accent); } .history-tabs__link.active { color: var(--color-accent); background-color: #0e0f14; } .promo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } .promo-item { display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; background: var(--color-card-bg); } .promo-item__img { flex-shrink: 0; width: 215px; display: flex; align-items: center; justify-content: center; padding: 5px; } .promo-item__img img { width: 100%; height: 100%; object-fit: cover; } .promo-item__content { padding: 30px 40px; display: flex; flex-direction: column; gap: 30px; } .promo-item__title { font-size: 18px; color: var(--color-accent); font-weight: 700; line-height: 1.2; } .promo-item__text { display: flex; flex-direction: column; gap: 20px; font-size: 15px; color: #fff; line-height: 1.2; } .about__wrapper { display: flex; flex-direction: column; gap: 60px; } .about__content { display: flex; flex-direction: column; gap: 20px; } .about-banner { background: var(--color-card-bg); border-radius: 6px; overflow: hidden; position: relative; } .about-banner::after { content: ""; z-index: 2; position: absolute; left: 0; width: 100%; height: 100%; top: 0; display: block; background: var(--color-card-bg) linear-gradient(-150deg, rgba(220, 160, 87, 0.2) 5%, rgba(28, 29, 37, 0) 50%); } .about-banner::before { content: ""; position: absolute; width: 228px; height: 190px; display: block; bottom: 0; right: 0; z-index: 3; opacity: 0.3; background: url("/resources/user/images/about.webp") bottom right/contain no-repeat; } .about-banner__wrapper { padding: 40px; position: relative; z-index: 4; display: flex; flex-direction: column; gap: 40px; } .about-banner__footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; } @media screen and (min-width: 1240px) { .header__burger, .header__logo { display: none; } } @media screen and (min-width: 1241px) { .aside-block--mobile { display: none; } } @media screen and (min-width: 1701px) { .aside-block--tablet { display: none; } } @media screen and (max-width: 1800px) { .info__wrapper { gap: 10px; } } @media screen and (max-width: 1700px) { .container--big { max-width: 1470px; padding: 0 15px; } .card__row { flex-direction: column; } .calculator__grid { grid-template-columns: minmax(0, 1fr); } .header__block { justify-content: space-between; } .header__info { display: none; } } @media screen and (max-width: 1500px) { .grid__block--full--tablet { grid-column: 1/-1; } } @media screen and (max-width: 1440px) { .header__block { padding: 20px; gap: 10px; } .header-profile__img { width: 50px; height: 50px; padding: 3px; } .aside__header { padding: 30px; height: 150px; } } @media screen and (max-width: 1240px) { .header__wrapper { grid-template-columns: 300px 67px minmax(0, 1fr); grid-auto-rows: 60px; } .header__nav { display: none; } .aside { position: fixed; left: 0; top: 0; height: 100vh; z-index: 14; width: 100vw; max-width: 100%; background: rgba(14, 15, 20, 0.6); opacity: 0; visibility: hidden; --webkit-backdrop-filter: blur(5px); transition: 0.3s visibility, 0.5s opacity; } .aside--active { opacity: 1; visibility: visible; } .aside__wrapper { max-width: 300px; width: 100%; background: #0e0f14; } } @media screen and (max-width: 1100px) { .grid__row--pool { grid-template-columns: minmax(0, 1fr); } .grid__block { grid-column: 1/-1; } .about-banner__footer { flex-wrap: wrap; gap: 15px; } .about-banner__button { width: 100%; } } @media screen and (max-width: 991px) { :root { gap: 15px; } .title--base { font-size: 26px; } .title--big { font-size: 32px; } .page-wrapper { height: auto; min-height: 100vh; overflow: unset; } .content { flex-direction: column; min-height: 100vh; height: auto; padding: 20px 0; } .content__block--padding--big { padding: 20px; } .block__header { flex-direction: column; align-items: flex-start; } .block__item { padding: 20px; } .grid__row { grid-auto-rows: auto; } .card__wrapper--big { padding: 20px; } .card__wrapper--icon { padding-right: 20px; } .contract-tabs { grid-template-columns: minmax(0, 1fr); } .contract-tabs__content { padding: 20px; } .contract-tabs__link { border-radius: 6px; text-decoration: none; } .login__container { gap: 20px; } .login__header { gap: 30px; } .verification-button { padding: 15px 0; } .profile-card__tag { padding: 20px; } .calculator-circle__title { font-size: 36px; } .calculator-circle__tag { gap: 5px; } .calculator-circle__number { font-size: 18px; } .calculator-circle__text { font-size: 16px; } .header__wrapper { padding: 0 20px; grid-template-columns: 100px 67px minmax(0, 1fr); } .header-notification { order: 4; } .header-profile__wrapper { gap: 10px; } .faq-item__text { padding: 30px 15px; } .promo-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .promo-item__content { padding: 15px 20px; gap: 20px; } .about__wrapper { gap: 30px; } .about-banner__wrapper { padding: 20px; gap: 20px; } } @media screen and (max-width: 640px) { .block__item--verification--true::before { right: 15px; bottom: 15px; } .button--base { padding: 20px 10px; gap: 10px; width: 100%; } .login__wrapper { padding: 20px; } .login__title { font-size: 24px; } .login__desc { gap: 10px; } .login__logo { height: 75px; width: 100%; } .form-notice__wrapper { padding: 30px 20px; } .form-notice__text { font-size: 16px; } .form-input__row { grid-template-columns: minmax(0, 1fr); } .form__row { flex-direction: column; align-items: flex-start; } .notification-content { right: 0; top: calc(100% + 10px); width: 280px; } .profile-card { flex-direction: column; } .profile-card__content { width: 100%; } .popup__container { max-width: calc(100% - 50px); padding: 20px; } .popup-calc__row { flex-direction: column; height: auto; } .calculator-circle { padding: 8px; border: solid 8px rgba(30, 31, 42, 0.7); } .header-profile__name { display: none; } .faq-item__header { padding: 10px 80px 10px 10px; } .promo-item { flex-direction: column; } .promo-item__img { width: 100%; height: 200px; } } @media screen and (max-width: 450px) { .header-profile__img { display: none; } } @media screen and (max-width: 400px) { .header__logo { display: none; } .header__wrapper { grid-template-columns: 67px minmax(0, 1fr); } } @media screen and (max-width: 350px) { .aside__wrapper { max-width: 270px; width: 100%; } } .promo-single__banner { min-height: 240px; display: flex; align-items: stretch; border-radius: 6px; position: relative; overflow: hidden; margin: 0 0 40px 0; padding: 30px 40px; background-position: center center; background-size: cover; background-repeat: no-repeat; } .promo-single__banner::before { content: ''; width: 120%; height: 120%; z-index: 2; display: block; position: absolute; left: -10%; top: -10%; background: linear-gradient(70deg, #151720 40%, rgba(21, 23, 32, .6), rgba(21, 23, 32, 0.4) 100%); } .promo-single__img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; z-index: 1; } .promo-single__header { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; height: auto; max-width: 780px; width: 100%; } .promo-single__date { color: #4e515d; } @media screen and (max-width: 640px) { .promo-single__banner { padding: 30px 15px; } .card__header--mobile--column { flex-direction: column; align-items: flex-start; } } .qr-code { aspect-ratio: 1; width: 100%; height: auto; } .wallet-qr { max-width: 560px; width: 100%; margin: 0 auto; } .wallet-qr__item { max-width: 328px; margin: 0 auto; } .wallet-tabs__nav { display: flex; align-items: center; gap: 3px; overflow: auto; } .wallet-tabs__nav::-webkit-scrollbar { width: 3px; height: 3px; background-color: #221f31; border-radius: 20px; } .wallet-tabs__nav::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 20px; } .wallet-tabs__nav::-webkit-scrollbar-track { background-color: #221f31; border-radius: 20px; } .wallet-tabs__link { display: flex; align-items: center; justify-content: center; height: 100px; padding: 20px 40px; gap: 15px; font-size: 18px; font-weight: 700; color: #fff; text-transform: uppercase; border-radius: 6px; border: 3px solid #111219; fill: #fff; text-decoration: none; } .wallet-tabs__link.active { background: linear-gradient(rgba(220, 160, 87, 0), rgba(220, 160, 87, .4) 80%); fill: var(--color-accent); } .wallet-tabs__link .icon { width: 15px; height: 15px; flex-shrink: 0; transition: .3s fill; } @media screen and (max-width: 640px) { .wallet-tabs__link { height: 50px; padding: 10px 20px; text-decoration: none; } } .marketing { overflow: auto; } .marketing__wrapper { display: flex; flex-direction: column; gap: 8px; } .marketing__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 65px; gap: 8px; min-width: 900px; } .marketing__block { display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 2px solid #464950; } .marketing__block--accent { border-color: var(--color-accent); } .checkbox-round { display: flex; align-items: center; gap: 10px; cursor: pointer; } .checkbox-round__input { display: none; } .checkbox-round__input:checked~.checkbox-round__checkmark { justify-content: flex-end; } .checkbox-round__input:checked~.checkbox-round__checkmark::before { background-color: #0fb044; } .checkbox-round__checkmark { width: 45px; height: 30px; flex-shrink: 0; border-radius: 16px; border: 1px solid #1c1d26; background-color: #0f1016; display: flex; align-items: center; justify-content: flex-start; padding: 8px; transition: .3s all; } .checkbox-round__checkmark::before { content: ''; width: 13px; height: 13px; border-radius: 50%; display: block; background-color: #20222a; transition: .3s all; } .checkbox-round__label { font-size: 18px; font-weight: 700; color: #fff; } .notice { position: relative; } .notice-link { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background-color: #1b1e28; text-decoration: none; } .notice:hover .notice-content { opacity: 1; visibility: visible; } .notice-link::before { content: '?'; font-size: 11px; font-weight: 700; color: #fff; } .notice-content { position: absolute; left: 0; top: calc(100% + 5px); background-color: #1b1e28; padding: 8px; width: 200px; border-radius: 12px; font-size: 11px; color: #fff; opacity: 0; visibility: hidden; transition: .3s visibility, .5s opacity; } @media screen and (max-width:640px) { .notice-content { left: unset; right: 0; } } .page-notice { position: fixed; z-index: 10; transform: translateY(75%); font-size: 14px; color: #fff; line-height: 1.2; text-align: center; border-radius: 6px; border: 1px solid #5b5b66; background: rgba(50, 51, 59, .4); padding: 26px 0; } /* ПРАВКИ таймера от 01.05.24 */ .grid__main { display: grid; grid-template-columns: 1fr 1fr 480px; grid-auto-rows: 1fr; gap: var(--regular-gap); } .timer { position: relative; margin: 0 auto; max-width: 500px; width: 100%; height: auto; aspect-ratio: 1; padding: 16px; display: flex; align-items: center; justify-content: center; } .timer-shape { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); width: calc(100% - 10px); height: calc(100% - 10px); stroke: var(--color-accent); } .timer-content { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(calc(-50% - 5px), calc(-50% + 5px)); aspect-ratio: 1; overflow: hidden; border-radius: 50%; width: calc(100% - 60px); height: calc(100% - 60px); display: flex; align-items: center; justify-content: center; background-color: #191B26; } .timer-content::before { content: ''; position: absolute; top: 0; right: 20%; z-index: 1; width: 1px; height: 1px; border-radius: 50%; box-shadow: 0 0 50px 90px rgba(206, 150, 82, 0.25); } .language--select .language--select__toggle { font-size: 12px; font-weight: 600; padding: 3px 10px; margin: 0; background-color: #1b1d26; border: 1px solid #2b2c35; } .language--select .language--select__content { width: 100%; min-width: auto; border-radius: 6px; border: 1px solid #2b2c35; background-color: #1b1d26; margin-top: 5px !important; } .language--select .language--select__content .language--select__item { display: flex; flex-direction: row; justify-content: space-around; align-items: center; color: #ffffff; text-decoration: none; background-color: #1b1d26; font-size: 10px; font-weight: 600; margin: 0; padding: 3px 0; } .language--select .language--select__content .language--select__item:hover { background-color: #2b2c35; } .language--select .language--select__content .language--select__item img.language--select__icon { display: flex; max-width: 32%; } .language--select .language--select__content .language--select__item p.language--select__text { display: flex; margin: 0; padding: 0; } .card { background-color: transparent; /*#221f31;*/ } @media (max-width: 1600px) { .grid__main { grid-template-columns: 1fr 480px; } .grid__main-stat { grid-column: 1/3; grid-row: 2/3; } } @media (max-width: 991px) { .grid__main { grid-template-columns: 1fr; } .grid__main-bar, .grid__main-stat, .grid__main-timer { grid-row: auto; grid-column: auto; } } @media (max-width: 520px) { .grid__main-timer .card__wrapper--big { padding: 20px 5px; } .timer { padding: 0; } .timer-content { overflow: visible; } .timer-content::before { display: none; } } /*# sourceMappingURL=maps/main.css.map */