@import url('./root.css'); body { background-color: var(--ui-darker); color: var(--ui-base); } .top-bar { background-color: var(--ui-dark); margin-bottom: var(--spacer-1); } .top-container { height: 2.5rem; padding: 0px var(--spacer-2); } .badge { display: inline-block; padding: .25em .4em; font-size: 100%; text-align: center; border-radius: 0.2rem; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out } .badge-success { color: #212529; background-color: #8eff34 } a.badge-success:focus, a.badge-success:hover { color: #212529; background-color: #72ff01 } #messages-container .right-side-inner .form-area { margin: .5rem 0 .5rem 1rem; background-color: var(--dark-color); border-radius: var(--border-radius); display: grid; grid-template-columns: 1fr auto auto; align-items: center; padding: var(--spacer-2); gap: var(--spacer-2) } #messages-container .right-side-inner .form-area textarea { resize: none; height: 3.5rem; display: block; line-height: 1.5em; background: 0 0; padding: 0 } #messages-container .right-side-inner .form-area textarea:active, #messages-container .right-side-inner .form-area textarea:focus { outline: none } #messages-container .right-side-inner .form-area button { margin-left: .5rem; display: block } a.badge-success.focus, a.badge-success:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(142, 255, 52, .5) } .badge-info { color: #212529; background-color: #2ec2e8 } a.badge-info:focus, a.badge-info:hover { color: #212529; background-color: #17a7cc } a.badge-info.focus, a.badge-info:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(46, 194, 232, .5) } .badge-warning { color: #212529; background-color: #ffc107 } a.badge-warning:focus, a.badge-warning:hover { color: #212529; background-color: #d39e00 } a.badge-warning.focus, a.badge-warning:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .5) } .badge-danger { color: #fff; background-color: #fe3b3b } a.badge-danger:focus, a.badge-danger:hover { color: #fff; background-color: #fe0808 } a.badge-danger.focus, a.badge-danger:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(254, 59, 59, .5) } .badge-primary { color: #fff; background-color: #66c61a } a.badge-primary:focus, a.badge-primary:hover { color: #fff; background-color: #4f9914 } a.badge-primary.focus, a.badge-primary:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(102, 198, 26, .5) } .badge-secondary { color: #fff; background-color: #1a1e27 } a.badge-secondary:focus, a.badge-secondary:hover { color: #fff; background-color: #060608 } a.badge-secondary.focus, a.badge-secondary:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(26, 30, 39, .5) } .top-bar nav { font-size: var(--fs-7); display: grid; grid-auto-flow: column; grid-gap: calc(var(--spacer-2) / 2); margin-left: auto; } .flash { animation-name: flash } @keyframes flash { 50%, from, to { opacity: 1 } 25%, 75% { opacity: 0 } } .logo { height: 35px; } .main-header { background: var(--ui-dark); margin-bottom: var(--spacer-1); height: 5rem; } .site-header-slogan { font-size: var(--fs-7); font-weight: 400; white-space: nowrap; align-self: flex-end; margin-top: 0; } .category .sale { background: #6060ff; } .category .new, .category .sale { background: #ffac00; box-shadow: -0.125rem 0.125rem 0.313rem rgba(0, 0, 0, .3); color: #f1f1f1; font-size: 1.2rem; font-weight: 500; height: 2rem; letter-spacing: .08rem; line-height: 2rem; position: absolute; right: -2.5rem; text-align: center; top: 1.7rem; transform: rotate(47.71deg); width: 9.375rem; } .category img { transition: transform 0.5s; } .category img:hover { transform: scale(1.1); } /* .category img:hover { transform: translateY(-0.25rem); } */ .search-box { font-size: var(--fs-12); border-radius: 0.625rem; } .input-with-icon { width: 100%; background-color: var(--ui-darker); color: var(--ui-base); padding: 0px 0.75rem; } input[type="search"] { height: 2.5rem; padding: 0.75rem; color: var(--ui-base); } .input-with-icon .icon { color: var(--ui-base); } .btn-jungle { color: var(--ui-base); background-color: var(--ui-success); box-shadow: 0 0 0.25rem rgba(0, 144, 57, 0.4); ; border-color: var(--ui-success); } .btn-blue { color: var(--ui-base); background-color: var(--ui-primary); box-shadow: 0 0 0.25rem rgba(50, 160, 219, 0.4); border-color: var(--ui-primary); } .btn-reg2 { color: var(--ui-base); background-color: var(--ui-primary); box-shadow: 0 0 0.25rem var(--bs-btn-active-border-color); border-color: var(--ui-primary); } .btn-blue.active, .btn-blue:hover { background-color: transparent; color: var(--ui-primary); } .btn-cart { color: var(--ui-base); font-size: var(--fs-15); } .top-navigation, .category-buttons, .top-banner, .featured-products, .blogs-header, .section-info, .grid-6, .about-game-wrap, .goldbar-container, .breadcrumb-nav, .product-detail, .custom-margin { margin-bottom: var(--spacer-2); } .top-navigation { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: 1 1; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; animation-name: flip } .animated { animation-duration: 1s; animation-fill-mode: both } .animated.infinite { animation-iteration-count: infinite } .animated.delay-1s { animation-delay: 1s } .animated.delay-2s { animation-delay: 2s } .animated.delay-3s { animation-delay: 3s } .animated.delay-4s { animation-delay: 4s } .animated.delay-5s { animation-delay: 5s } .animated.fast { animation-duration: .8s } .animated.faster { animation-duration: .5s } .animated.slow { animation-duration: 2s } .animated.slower { animation-duration: 3s } @media (print), (prefers-reduced-motion:reduce) { .animated { animation-duration: 1ms!important; transition-duration: 1ms!important; animation-iteration-count: 1!important } } .progress-bar-animated { animation: progress-bar-stripes 1s linear infinite } @media (prefers-reduced-motion:reduce) { .progress-bar { transition: none } .progress-bar-animated { animation: none } } .footer-payment-methods { text-align: center; } .footer-payment-methods-title { margin-bottom: 0.5rem; } .footer-payment-methods-content { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; } .footer-payment-methods-image { height: 20px; width: auto; } .top-navigation a { background-color: var(--ui-dark); text-align: center; padding: 0.75rem; border-radius: 0px; font-weight: 500; font-size: var(--fs-12); width: 100%; white-space: nowrap; } .top-navigation a.games { border-radius: 0 0 0 0.625rem; } .top-navigation a:hover { color: var(--ui-dark); background-color: var(--ui-base); } .top-navigation a.payment { border-radius: 0 0 0.625rem 0; color: var( --ui-highlight); } .navbar { background: var(--ui-dark); } .navbar-collapse { padding: 8px 10px; background: var(--ui-dark); z-index: 999; flex: 2; } .input-with-icon .icon { background-color: transparent; border: none; display: flex; align-items: center; } .category-buttons nav { padding-top: var(--spacer-2); padding-bottom: var(--spacer-2); margin-top: calc(var(--spacer-2)* -1); margin-bottom: calc(var(--spacer-2)* -1); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: 1 1; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .category-buttons nav a { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); background-color: var(--ui-dark); overflow: hidden; min-width: 4.75rem; height: 3.75rem; scroll-snap-align: start; } .category-buttons nav a img { max-height: 67.5%; max-width: 80%; } .top-banner { display: grid; grid-column-gap: var(--spacer-2); grid-template-columns: 1.444fr 6.5fr 1.444fr; } .top-banner a { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); border-radius: 0.625rem; overflow: hidden; display: block; } .top-banner a.left, .top-banner a.right { display: block; transition: transform 0.3s; } .top-banner a.left:hover, .top-banner a.right:hover { transform: translateY(-0.25rem); } .top-banner a picture { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 0.625rem; } .top-banner a picture img { display: block; width: 100%; height: 100%; object-fit: cover; } .owl-carousel .owl-nav button.owl-next { position: absolute; top: 50%; right: calc(var(--spacer-2) / 2); } .owl-carousel .owl-nav button.owl-prev { position: absolute; top: 50%; left: calc(var(--spacer-2) / 2); } .fit-slider-wrapper { display: flex; height: 100%; transition: transform 0.3s; } .fit-slider-wrapper a { min-width: 100%; flex: 1 1 100%; } .top-banner a { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); ; display: block; border-radius: 0.625rem; overflow: hidden; } /* .fit-slider-nav[data-direction="next"] { right: calc(var(--spacer-2) / 2); } .fit-slider-nav[data-direction="prev"] { left: calc(var(--spacer-2) / 2); } */ .featured-products a { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); border-radius: 0.625rem; overflow: hidden; display: block; transition: transform 0.3s; } .featured-products a picture { display: block; width: 100%; overflow: hidden; border-radius: 0.625rem; } .featured-products a picture img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .featured-products a:hover { transform: translateY(-0.25rem); } .blogs-header { z-index: 1; border-radius: 0.625rem; font-weight: 500; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); padding: 0 var(--spacer-2); font-size: var(--fs-125); width: 100%; position: relative; } .blogs-header:before { content: ""; background-image: url('../images/header-bg-icon-blog.png'); background-color: var(--ui-darkest); background-repeat: repeat; position: absolute; z-index: -1; transform: rotate(-5deg); top: -400%; left: -400%; width: 800%; height: 800%; } .blogs-header h2 { margin: 0; line-height: 1.5em; padding: 0.75em 0; font-size: inherit; } .blogs-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacer-2); } .blog-left-column-item, .blog-left-column-item-image { border-radius: 0.312rem; overflow: hidden; } .blog-left-column-item { display: grid; grid-gap: 1rem; box-shadow: 0.312rem; margin: 1rem 0; background-color: var(--ui-dark); grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; } .blog-left-column-item-image { position: relative; grid-column: 1; grid-row: 1 / 4; display: block; width: 292px; } .blog-left-column-item-header { display: grid; grid-template-columns: 1fr auto; margin-left: 0; margin-top: 1rem; margin-right: 1rem; grid-column: 2; } .blog-left-column-item-header h2 { font-size: var(--fs-125); margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .blog-left-column-item-header-info { font-size: var(--fs-7); display: flex; align-items: center; } .blog-left-column-item-body { font-size: var(--fs-7); margin-left: 0; margin-right: 1rem; grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .blog-left-column-item-footer { display: flex; font-size: var(--fs-7); margin-bottom: 1rem; margin-right: 1rem; grid-column-gap: 1rem; margin-left: 0; grid-column: 2; align-items: center; } .blog-left-column-item-footer-author .author-image { display: block; width: 1rem; height: 1rem; border-radius: 0.312rem; } .blog-left-column-item-footer-author .author-image img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .section-content { padding: calc(var(--spacer-2)* 2) var(--spacer-2) var(--spacer-2); margin-top: calc(var(--spacer-2)* -2); border-radius: 0 0 0.625rem 0.625rem; background-color: var(--ui-dark); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); } #homepage-desc { line-height: 1.5; } #homepage-desc .about-section-body { max-height: 8rem; overflow: auto; } #homepage-desc p { margin: 0 0 0.5rem; font-size: 15px; } #homepage-desc h2 { margin-top: 1.5rem; margin-bottom: 0.5rem; } /* footer */ .site-footer.visible { background-image: url('../images/bg.png'); } .site-footer { background-color: var(--ui-dark); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-bottom: 0; margin-top: auto; } .site-footer-top { border-bottom: var(--spacer-1) solid var(--ui-darker); } .site-footer-top-box p { font-size: 15px; } .site-footer-top-box i { font-size: 5rem; } .site-footer-top .container { display: grid; grid-template-columns: repeat(4, 1fr); } .site-footer-middle { display: grid; grid-template-columns: unset; } .site-footer-links { display: grid; grid-gap: var(--spacer-1); border-bottom: var(--spacer-1) solid var(--ui-darker); grid-template-columns: repeat(5, auto); grid-row: 1 / 3; grid-column: 1 / 4; white-space: nowrap; padding-top: calc(var(--spacer-2)* 2); padding-bottom: calc(var(--spacer-2)* 2); justify-content: center; gap: 20px; } .site-footer-links>div { padding: 0 var(--spacer-2); } .site-footer-links>div h4 { font-size: var(--fs-15); font-weight: 500; margin-bottom: 0.25em; } .site-footer-links>div:not(:last-child) { border-right: var(--spacer-1) solid var(--ui-darker); } .site-footer-contact { display: grid; grid-row-gap: var(--spacer-2); justify-content: center; text-align: center; padding: var(--spacer-2); border-left: var(--spacer-1) solid var(--ui-darker); border-bottom: var(--spacer-1) solid var(--ui-darker); grid-row: 1; } .site-footer-contact .phone-link { gap: 0.5rem; font-size: var(--fs-15); font-weight: 500; } .site-footer-contact .mail-link { gap: 0.5rem; font-weight: 500; } .btn-default { border-color: var(--ui-base); color: var(--ui-base); font-size: var(--fs-12); } .btn-default:hover { background: var(--ui-base); color: var(--ui-darker); } .site-footer-socials { display: flex; justify-content: center; flex-direction: column; grid-row: 2; border-left: var(--spacer-1) solid var(--ui-darker); padding: var(--spacer-2); } .site-footer-socials h6 { text-align: center; font-size: var(--fs-12); font-weight: 500; margin: 0 0 1rem; } .site-footer-links>div h5 { font-size: var(--fs-12); font-weight: 400; margin: 0 0 0.125em; display: list-item; } .site-footer-socials-list a { margin: 0.5rem; width: 2rem; height: 2rem; background: var(--ui-base); border-radius: 50%; color: var(--ui-darker); display: flex; align-items: center; justify-content: center; font-size: var(--fs-12); } .site-footer-links>div { padding: 0 var(--spacer-2); } .site-footer-bottom { background-color: var(--ui-darker); font-size: var(--fs-12); } .site-footer-bottom .container { padding: var(--spacer-2); } /* sub category */ .page-header { position: relative; margin-top: var(--spacer-2); margin-bottom: var(--spacer-2); min-height: 2rem; } .page-header img { max-width: 100%; height: auto; aspect-ratio: 8 / 1; margin: 0px auto; border-radius: 0.625rem; } .page-header nav { position: absolute; top: 0px; left: 0px; } .breadcrumb { display: grid; grid-auto-flow: column; width: max-content; font-size: var(--fs-7); list-style: none; margin: 0px; padding: 0px; } .breadcrumb>ol>li span { background-color: var(--ui-base); color: var(--ui-dark); } .breadcrumb .breadcrumb-item a, .breadcrumb .breadcrumb-item span { background-color: var(--ui-dark); display: inline-block; border-radius: 0.312rem; padding: 0.333335em 0.66667em; } .breadcrumb .breadcrumb-item span { background-color: var(--ui-base); color: var(--ui-dark); } .breadcrumb>li:not(:last-child)::after { content: ">"; margin-left: 0.66667em; } .grid-6 { display: grid; grid-gap: var(--spacer-2); grid-template-columns: repeat(6, 1fr); justify-content: space-between; } .category { border-radius: 0.625rem; overflow: hidden; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: transform 0.3s; } .category .category-image { display: flex; width: 100%; aspect-ratio: .7354497354; overflow: hidden; justify-content: center; align-items: center; } .category h2 { font-weight: 700; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4); position: absolute; bottom: 0; left: 0; right: 0; padding: 1em; text-align: center; margin: 0; font-size: var(--fs-12); } .category .category-image img { display: block; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .section-content.fix-height { max-height: 60vh; overflow: auto; } .section-content p:not(:last-of-type) { margin-bottom: 1rem; } .section-content p { font-size: 15px; } .faqs-list-item-header { position: relative; background-color: var(--ui-darker); padding: 1rem; border-radius: 0.625rem; z-index: 1; margin-bottom: 1rem; } .faqs-list-item-body { background-color: var(--ui-darkest); border-radius: 0 0 0.625rem 0.625rem; padding: 2rem 1rem 1rem; margin-top: -2rem; font-size: .875rem; } .faqs-list ul { padding-left: 40px; } .faqs-list ol { margin-block-start: 1em; margin-block-end: 1em; } .page-header h1 { position: absolute; bottom: 0; left: 0; font-size: var(--fs-125); } /* product-list */ #cost-quantity-switcher { position: absolute; right: var(--spacer-2); bottom: var(--spacer-2); background-color: var(--ui-dark); } #cost-quantity-switcher button { font-size: var(--fs-7); padding: 0.458333rem; } .switcher button.active, .switcher button:hover { background-color: var(--ui-primary); border-color: var(--ui-primary); } .switcher button { all: unset; user-select: none; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-weight: 500; cursor: pointer; column-gap: 0.25em; box-sizing: border-box; border-radius: 0.312px; white-space: nowrap; border-width: 1px; border-style: solid; border-color: transparent; border-image: initial; } .goldbar-container { display: grid; border-radius: 0.625px; overflow: hidden; } .goldbar-row { display: grid; grid-template-columns: auto 1fr repeat(5, max-content); padding-right: var(--spacer-2); align-items: center; background-color: var(--ui-dark); box-shadow: 0 -20px 0 -18px var(--ui-darker); gap: var(--spacer-2); } .goldbar-row .goldbar-row-image { display: block; height: 5rem; margin: calc(var(--spacer-2) / 2); border-radius: 0.312rem; overflow: hidden; } .goldbar-row .goldbar-row-image img { display: block; height: 100%; } .goldbar-row .goldbar-row-name { display: grid; gap: calc(var(--spacer-2) / 2); font-size: 15px; } .goldbar-row .goldbar-row-name small { display: block; font-size: var(--fs-7); font-weight: 500; color: var(--ui-success); } .goldbar-row .goldbar-row-name small.highlight { color: var(--ui-danger); } .goldbar-row .goldbar-row-input label, .goldbar-row .goldbar-row-price label { font-size: var(--fs-12); color: var(--ui-primary); font-weight: 500; } .goldbar-row .goldbar-row-input, .goldbar-row .goldbar-row-price { display: grid; text-align: center; font-size: var(--fs-15); min-width: 7rem; gap: calc(var(--spacer-2) / 2); } .goldbar-row .goldbar-row-input input { height: 2rem; } .input, .input-with-icon, .input-with-label, .select>label, .textarea, input[type="date"], input[type="password"], input[type="search"], input[type="text"], select, textarea { all: unset; width: 100%; background-color: var(--ui-darker); color: var(--ui-base); line-height: 1; box-sizing: border-box; border-radius: 0.312rem; } .input, .select>label, .textarea, input[type="date"], input[type="password"], input[type="search"], input[type="text"], select, textarea { display: block; height: 2.5rem; appearance: none; padding: 0.75rem; } .goldbar-row .goldbar-row-input { width: 7rem; gap: 0.25rem; } .goldbar-row .btn { margin-top: var(--spacer-2); } .site-header-center { display: flex; align-items: center; justify-content: center; } /* product detail */ .product-detail { display: grid; grid-template-columns: 32.8125rem 42fr 25fr; grid-gap: var(--spacer-2); } .product-detail-image { position: relative; width: 100%; height: 100%; display: block; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); ; max-height: 420px; grid-row: 1 / 3; border-radius: 0.625rem; overflow: hidden; padding: 0px !important; } .product-detail-image img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: center center; } .product-detail-info { min-height: 250px; } .product-detail-info h1 { font-size: var(--fs-125); font-weight: 500; margin-bottom: 0.5rem; } .product-detail-info .store-name, .product-detail-info h2 { font-size: 1rem; color: var(--ui-success); font-weight: 900; margin-bottom: 0.5rem; } .product-detail-info .store-name.highlight, .product-detail-info h2.highlight { color: var(--ui-danger); } .product-detail-info h3 { font-size: var(--fs-7); font-weight: 700; margin-bottom: 0.25rem; } .product-detail-info-desc { font-size: var(--fs-7); font-weight: 400; line-height: 1.5; max-height: 4.5em; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: var(--spacer-2); overflow: hidden; } .product-detail-info-footer { margin-top: auto; gap: 0.75rem; } .product-detail-info-footer .more-info { font-size: var(--fs-7); font-style: italic; font-weight: 500; } .product-detail-store { display: grid; align-items: flex-start; grid-column: 3; grid-row-gap: var(--spacer-2); } .product-detail-store-top { display: grid; grid-template-columns: auto 1fr; align-items: flex-start; grid-column-gap: var(--spacer-2); } .product-detail-store-top img { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); grid-row: 1 / 5; border-radius: 0.625rem; } .product-detail-store-top .store-name, .product-detail-store-top h2 { font-size: var(--fs-125); } .rank-bar-container { position: relative; margin-right: 0.5em; height: 0.625rem; overflow: hidden; flex: 1 1 auto; border-radius: 0.312rem; background: var(--ui-darker); } .rank-bar-container::before { content: ""; position: absolute; top: 0px; left: 0px; display: block; height: 100%; width: 90%; background-image: linear-gradient(90deg, red, rgb(255, 242, 0), rgb(2, 187, 2)); } .rank-bar-container-fill { display: block; height: 100%; width: 100%; background-color: var(--ui-darker); z-index: 1; position: relative; float: right; transition: width 1s ease 0s; } .rank-bar-text { font-size: var(--fs-7); } .product-detail-store-middle, .product-detail-store-top>a { font-size: var(--fs-7); } .product-detail-store-top .fa-circle-check { color: var(--ui-primary); } .product-detail-store-middle { display: grid; align-items: center; grid-template-columns: 1fr auto auto; background-color: var(--ui-darker); grid-column-gap: var(--spacer-2); padding: 0.75rem; border-radius: 0.312rem; } .product-detail-store-middle-total { font-weight: 300; } .product-detail-store-bottom { display: grid; grid-auto-columns: minmax(auto, 1fr); grid-auto-flow: column; grid-gap: var(--spacer-2); } .product-detail-store-bottom-last-seen { font-size: var(--fs-7); background-color: var(--ui-darker); text-align: center; padding: 0.75rem; border-radius: 0.312rem; } .product-detail-store-bottom-last-seen .online { width: 0.6rem; height: 0.6rem; align-self: center; margin-right: 0.2rem; border-radius: 0.3rem; background: var(--ui-success); } .product-detail-meta { display: grid; text-align: center; font-size: var(--fs-7); grid-gap: var(--spacer-2); } .product-detail>div, .product-detail>form { background-color: var(--ui-dark); border-radius: 0.312rem; padding: var(--spacer-2); } .product-detail .four { grid-template-columns: repeat(4, 1fr); } .product-detail-meta>div { background-color: var(--ui-darker); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 0.312rem; padding: var(--spacer-2); } .product-detail-meta>div div { margin-bottom: 0.25rem; } .product-detail-meta h3 { font-size: var(--fs-12); } .product-detail-purchase-goldbar { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--spacer-2) / 2); } .product-detail-purchase-goldbar .quantity-field-container { grid-column: 1 / 3; margin: auto; } .quantity-field { gap: var(--spacer-2); padding-left: 0.75rem; background-color: rgba(24, 27, 34, .4); } .quantity-field, .quantity-field-input { border-radius: 0.312rem; } .quantity-field-input { background-color: var(--ui-darker); padding: 0 0.625rem; } .quantity-field-input button { all: unset; background-color: var(--ui-dark); color: var(--ui-base); border-radius: 0.312rem; width: 2em; height: 2em; font-weight: 900; font-size: var(--fs-7); cursor: pointer; } .product-detail-purchase-goldbar .selling-price { font-size: var(--fs-12); background-color: var(--ui-darker); text-align: center; border-radius: 0.312rem; padding: calc(var(--spacer-2) / 2) var(--spacer-2); } .quantity-field-input input { text-align: center; width: 5em; font-size: var(--fs-12); font-weight: 500; } .product { position: relative; display: grid; grid-template-columns: 1fr auto; background-color: var(--ui-dark); box-shadow: 0 0 0 1px #323232, 0px 0px 4px rgba(0, 0, 0, 0.1); border-radius: 0.625rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; min-width: 0; padding: 1.25rem; transition: transform 0.3s; } .product>.product-image, .product>h3, .product>label { grid-column: 1 / 3; margin: 0; } .product>.product-image { position: relative; border-radius: 0.625rem; overflow: hidden; margin: -1.25rem; width: calc(100% + 2.5rem); aspect-ratio: 1.25; } .product>.product-image img { display: block; max-width: 100%; max-height: 100%; } .product>label { background-color: var(--ui-base); color: var(--ui-success); border-radius: 0.312rem; text-align: center; padding: 0 0.5rem; font-size: var(--fs-7); font-weight: 900; white-space: nowrap; margin-top: 0.3125rem; height: 1.875rem; z-index: 1; min-width: 0; } .product h3 { font-size: var(--fs-12); font-weight: 400; line-height: 1.25em; height: 2.5em; overflow: hidden; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; margin: 1rem 0; } .product .selling-price { font-size: var(--fs-125); line-height: 1; overflow: hidden; white-space: nowrap; } .product-store-info { grid-row: span 2; } .product:hover { opacity: 1; } .product:hover { transform: translateY(-0.25rem); } .product:hover .product-image:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(33, 38, 48, .9); } .product:hover .product-image:after { all: unset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 1rem; line-height: 1; padding: 0.6875rem; display: inline-flex; align-items: center; border-radius: 0.312rem; justify-content: center; font-weight: 500; white-space: nowrap; cursor: pointer; -moz-column-gap: .25em; column-gap: 0.25em; box-sizing: border-box; color: var(--ui-dark); background-color: var(--ui-base); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); border: 1px solid transparent; border-color: var(--ui-base); content: "Detaylar"; display: block; position: absolute; } /* payment methods */ .payment-grid { display: grid; grid-template-columns: 1fr 3fr; grid-gap: var(--spacer-2); } .payment-grid-filter { display: grid; grid-template-rows: 10rem 1fr; background-color: var(--ui-darkest); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); ; padding: var(--spacer-2); border-radius: 0.625rem; } .payment-grid-filter header { margin-bottom: var(--spacer-2); text-align: center; font-size: var(--fs-12); } .payment-grid-filter-body { display: grid; grid-auto-rows: 3.75rem; grid-gap: var(--spacer-2); } .payment-grid-filter-body button { position: relative; padding-left: 5.25rem; font-size: 1.125rem; font-weight: 500; overflow: hidden; } .btn-dark.active, .btn-dark:hover { background-color: var(--ui-base); color: var(--ui-dark); } .payment-grid-filter-body button .texture { position: absolute; left: -3rem; top: -1.875rem; height: 7.5rem; width: 7.5rem; opacity: 0.1; transform: rotate(-15deg); } .payment-grid-filter-body button .texturer { left: -1.5rem; } .selectMethod i { font-size: 20px; } .accordion-header { background: transparent; } .accordion-button { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; background-color: var(--ui-dark); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); ; color: var(--ui-base); cursor: pointer; z-index: 1; grid-gap: var(--spacer-2); border-top-left-radius: 0.625rem; border-top-right-radius: 0.625rem; } .accordion-button img { margin-left: 2.5rem; height: 3.75rem; } .accordion-button:not(.collapsed) { color: var(--ui-base); background-color: var(--ui-dark); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); } .accordion-item { background-color: var(--ui-darkest); color: var(--ui-base); border: none; } .accordion { --bs-accordion-active-bg: var(--ui-dark); --bs-accordion-btn-focus-box-shadow: none; } .payment-grid-list-item-body { max-height: 0px; display: grid; min-height: 0px; transition: max-height var(--transition-time); } .payment-grid-list-item-body-wrapper { display: grid; margin-top: -2rem; gap: var(--spacer-2); padding: calc(var(--spacer-2) + 2rem) var(--spacer-2) var(--spacer-2); background: var(--ui-darkest); border-radius: 0.625rem; } .payment-grid-list-item-body-wrapper .item-properties { justify-content: center; padding-bottom: var(--spacer-2); border-bottom: 1px solid var(--ui-dark); } .item-properties-box { background-color: var(--ui-darker); padding: calc(var(--spacer-2) / 2) var(--spacer-2); border-radius: 0.312rem; font-size: 15px; } .slick-next { right: 2px !important; left: unset !important; } .slick-prev { left: 2px !important; right: unset !important; z-index: 2; } .quick-select-buttons { display: grid; grid-auto-flow: column; grid-auto-columns: 6.26rem; max-width: 43.75rem; margin: auto; gap: var(--spacer-2); white-space: nowrap; } .payment-account-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--spacer-2); } .price-input { display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 0px 0.666667em; column-gap: calc(var(--spacer-2) / 4); } .input-with-label-payment, .quick-select-buttons input { border: 1px solid var(--ui-base); } .price-input div, .price-input label { display: flex; align-items: center; justify-content: flex-end; gap: 0.25em; font-size: 15px; } .price-input-text { text-align: right; min-width: 0px; } .input-with-label { column-gap: calc(var(--spacer-2) / 4); padding: 0px 0.75rem; white-space: nowrap; } .input-with-label.disabled label { color: hsla(0, 0%, 100%, 0.6); font-size: 15px; } .input-with-label .input, .input-with-label .select, .input-with-label .select>label, .input-with-label input { background-color: transparent; text-align: right; display: flex; align-items: center; justify-content: flex-end; flex: 1 1 0%; padding: 0.75rem 0px; font-size: 15px; } /* blogs */ .blog-category-buttons { display: grid; grid-auto-flow: column; gap: var(--spacer-2); } .blog-category-item { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); color: var(--text-color); font-size: var(--fs-7); background-color: var(--ui-dark); margin-left: var(--spacer-1); border-radius: 0.312rem; } .blog-category-item-image { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); background-color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; width: 3.5em; height: 3.5em; margin-left: calc(var(--spacer-1)* -1); border-radius: 0.312rem; } .blog-category-item.knight-online-haberleri .blog-category-item-image { background-color: rgb(62, 186, 253); } .blog-category-item.pubg-mobile-haberleri .blog-category-item-image { background-color: rgb(147, 192, 61); } .blog-category-item.valorant-haberleri .blog-category-item-image { background-color: rgb(0, 83, 122); } .blog-category-item.league-of-legends-haberleri .blog-category-item-image { background-color: rgb(21, 3, 234); } .blog-category-item.cs2-haberleri .blog-category-item-image { background-color: rgb(253, 62, 119); } .blog-category-item.metin2-haberleri .blog-category-item-image { background-color: rgb(253, 106, 0); } .blog-category-item.black-desert-haberleri .blog-category-item-image { background-color: rgb(58, 194, 11); } .blog-category-item.diger-oyun-haberleri .blog-category-item-image { background-color: rgb(157, 62, 253); } .blog-category-item-image img { width: 80%; height: 80%; filter: brightness(0) invert(1); } .blog-category-item-content { line-height: 1; padding: 0.25rem; } .blogs-container.blogs-wrap { display: grid; grid-template-columns: 7fr 2fr; gap: var(--spacer-2); } .blog-left-column-item { display: grid; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); background-color: var(--ui-dark); grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; gap: 1rem; margin: 1rem 0px; } .blog-left-column-item, .blog-left-column-item-image { border-radius: 0.312rem; overflow: hidden; } .blog-left-column-item-image { position: relative; display: block; width: 292px; grid-column: 1; grid-row: 1 / 4; } .blog-left-column-item-footer { font-size: var(--fs-7); margin-bottom: 1rem; margin-right: 1rem; margin-left: 0px; grid-column-gap: 1rem; grid-column: 2; } .blog-right-column { display: grid; align-items: flex-start; grid-auto-rows: max-content; gap: var(--spacer-2); } .blog-right-column-wrapper { position: sticky; top: calc(var(--spacer-2) / 2); } .search-box, .search-box input { font-size: var(--fs-12); } .blog-right-column-box { background-color: var(--ui-darkest); border-radius: 0.625rem; } .blog-button-container { display: grid; row-gap: 0.5rem; grid-auto-rows: calc(53px + 1rem); padding: var(--spacer-2); } .blog-button { position: relative; display: block; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); z-index: 0; overflow: hidden; padding: 0.5rem; border-radius: 0.312rem; background: var(--dark-color); } .blog-button-body { display: grid; grid-template-columns: 120px 1fr; column-gap: 1rem; align-items: center; } .blog-image, .blog-image img { display: block; width: 100%; height: 100%; } .blog-button-body img { display: block; width: 100%; border-radius: 0.312rem; object-fit: cover; } .blog-button-body h3 { font-size: var(--fs-12); color: rgb(255, 255, 255); margin-bottom: 0px; height: 2.5rem; line-height: 1.25rem; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .blog-category-container { display: grid; grid-row-gap: 0.5rem; } .blog-category-button { display: grid; grid-template-columns: auto 1fr auto; font-size: var(--fs-7); color: rgb(255, 255, 255); grid-column-gap: 0.5rem; border-radius: 0.312rem; } .blog-category-button img, .blog-category-button svg { width: 3em; height: 3em; fill: rgb(255, 255, 255); padding: 0.25rem; } .blog-category-button img { filter: brightness(0) invert(1); } .blog-category-button h3 { font-size: inherit; margin-bottom: 0px; text-align: right; font-weight: 400; align-self: center; } .blog-category-button div { width: 3em; height: 3em; background-color: rgba(0, 0, 0, 0.3); line-height: 1; border-radius: 0.312rem; } .page-link { font-size: var(--fs-7); background-color: var(--dark-color); color: var(--ui-base); font-weight: 900; border-radius: 0.312rem; border: none; } .page-link.active { background-color: var(--text-color); color: var(--dark-color); } .blog-category-button:nth-child(1) { background-color: rgb(62, 186, 253); } .blog-category-button:nth-child(2) { background-color: rgb(147, 192, 61); } .blog-category-button:nth-child(3) { background-color: rgb(0, 83, 122); } .blog-category-button:nth-child(4) { background-color: rgb(21, 3, 234); } .blog-category-button:nth-child(5) { background-color: rgb(253, 62, 119); } .blog-category-button:nth-child(6) { background-color: rgb(253, 106, 0); } .blog-category-button:nth-child(7) { background-color: rgb(58, 194, 11); } .blog-category-button:nth-child(8) { background-color: rgb(157, 62, 253); } .blog-right-column .search-box { background-color: var(--ui-dark); } /* profile */ .user-panel-wrapper { display: grid; grid-template-columns: 21.25rem 1fr; background-color: var(--ui-darkest); border-radius: 0.625rem; padding: var(--spacer-2); grid-gap: var(--spacer-2); align-items: flex-start; } .user-panel-menu { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: var(--spacer-2); } .user-panel-menu-top { display: grid; grid-column: 1 / 4; grid-gap: var(--spacer-2); grid-template-columns: repeat(3, 1fr); background-color: var(--ui-dark); border-radius: 0.625rem; } .user-panel-menu-button { position: relative; display: flex; flex-direction: column; justify-content: flex-start; font-size: var(--fs-7); grid-gap: 0.75em; white-space: normal; text-align: center; line-height: 1.25; padding-bottom: 0.5em; padding-left: 0.5em; padding-right: 0.5em; height: auto; } .user-panel-menu-top-user-info { display: grid; grid-template-columns: auto 1fr; grid-column: 1 / 3; padding: var(--spacer-2) 0 var(--spacer-2) var(--spacer-2); grid-column-gap: var(--spacer-2); align-items: center; } .user-panel-menu-top-user-info img { grid-row: 1 / 4; border-radius: 0.312rem; width: 3.75rem; height: 3.75rem; } .user-panel-menu-top-user-info-balance { color: #fc3; font-size: 15px; line-height: 15px; margin-top: 3px; } .user-panel-menu-top-user-info-exit { font-size: .625rem; color: var(--ui-danger); border: 1px solid; padding: 0.25rem 0.75rem; border-radius: 0.312rem; justify-self: flex-start; line-height: 1; margin-top: 5px; } .user-panel-menu-top-user-info strong { font-size: 15px; white-space: nowrap; } .user-panel-menu-button i { font-size: 2.66667em; margin-top: 0.625rem; } .btn-darker.active, .btn-darker:hover { background-color: var(--ui-base); color: var(--ui-darker); } .user-panel-body { background-color: var(--ui-dark); border-radius: 0.625rem; } .settings .accordion-header { background-color: var(--ui-dark); padding: var(--spacer-2); } .settings .accordion-button { grid-gap: 0.75rem; font-size: var(--fs-13); border-bottom: 1px solid hsla(0, 0%, 100%, .2); margin-bottom: calc(var(--spacer-2) / 2); cursor: pointer; } .settings .accordion-body { background: var(--ui-dark); } .profile-settings, .store-settings { display: grid; gap: var(--spacer-2); grid-template-columns: repeat(2, 1fr); } .settings-input { display: flex; align-items: center; background-color: var(--ui-darker); border-radius: 0.312rem; font-size: var(--fs-7); height: 2.5rem; } .settings-input>label { color: hsla(0, 0%, 100%, .6); margin-left: calc(var(--spacer-2) / 2); } .settings-input-text { display: flex; justify-content: flex-end; align-items: center; flex: 1 1; margin: 0 calc(var(--spacer-2) / 2); font-weight: 500; } .btn-darker { color: var(--ui-base); background-color: var(--ui-darker); border-color: var(--ui-darker); } .text-green { color: var(--ui-success); } .btn-profile { border-color: var(--ui-primary); color: var(--ui-primary); font-size: var(--fs-7); } .settings .accordion-item:first-of-type { border-top-left-radius: 0.625rem; border-top-right-radius: 0.625rem; } .navbar-toggler { border: 1px solid var(--ui-darkest); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ui-base); border-radius: 0.625rem; } /* orders */ .grid-1, .grid-2 { display: grid; grid-gap: var(--spacer-2); } .switcher { display: flex; flex-wrap: wrap; border-radius: 0.312rem; gap: var(--spacer-1); } .my-orders-container, .order-detail { background-color: var(--ui-darkest); } .switcher button { all: unset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; border-radius: 0.312rem; justify-content: center; font-weight: 500; white-space: nowrap; cursor: pointer; border: 1px solid transparent; -moz-column-gap: .25em; column-gap: 0.25em; box-sizing: border-box; flex: 1 1; padding: 1.3125rem; background-color: var(--ui-dark); } .switcher button.active, .switcher button:hover { color: var(--ui-darkest); border-color: var(--ui-base); background-color: var(--ui-base); } .alert { background-color: var(--ui-dark); font-weight: 500; border-radius: 0.625rem; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; text-align: center; gap: 0.5rem; font-size: 15px; } /* messages */ #messages-container { grid-template-columns: 2fr 1fr; gap: var(--spacer-2); border-radius: 0.625rem; } #messages-container .left-side { display: flex; flex-direction: column; transition: max-width .5s; overflow-x: hidden; background-color: var(--ui-darker); } #messages-container .left-side .user-list { display: flex; flex-direction: column; min-height: 0; padding: var(--spacer-2); } #messages-container .left-side .user-list:not(:last-child) { border-bottom: 2px solid var(--ui-darker); overflow: auto; } #messages-container .left-side .user-list.pending-orders-list { flex-shrink: 0; } #messages-container .side-header { flex-shrink: 0; height: 2rem; border-bottom: 2px solid var(--ui-darker); padding: 0.5rem; font-weight: 500; font-size: 15px; } #messages-container .left-side .user-list-scroll-area { flex: 1 1 auto; } .warning-image { width: calc(100% - 1rem); margin: 0.5rem; } #messages-container .left-side .user-list.message-list { flex: 1 1 auto; padding-top: 0; } .user-panel .btn-xs { font-size: var(--fs-7); padding: 0.25em 0.5em; } #messages-container .left-side .user-list button { float: right; } #messages-container .left-side .user-list-scroll-area { flex: 1 1 auto; } #messages-container .right-side { position: relative; overflow: hidden; transition: max-width .5s; background-color: var(--ui-darkest); font-size: var(--fs-7); } .alert-secondary { color: var(--ui-base); border: none; } .modal-content { position: relative; background: var(--ui-dark); padding: var(--spacer-2); border-radius: 0.625rem; z-index: 102; margin: auto; } .login-modal-content { position: relative; background: var(--ui-dark); padding: var(--spacer-2); border-radius: 0.625rem; z-index: 102; margin: 45px; } .gs-popup-header { font-weight: 500; font-size: var(--fs-125); border-bottom: 1px solid hsla(0, 0%, 100%, .05); padding-bottom: 10px; padding-bottom: calc(var(--spacer-2) / 2); margin-bottom: 10px; margin-bottom: calc(var(--spacer-2) / 2); box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .2); padding-right: 2.5rem; } .settings-popup { width: 400px; } .avatars-popup, .settings-popup { max-width: 100%; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; } .gs-popup-body { line-height: 1.5; font-size: var(--fs-12); } .textarea, textarea { height: auto; white-space: normal; line-height: 1.75; } .quantity-field-input button, .upload-image-button { all: unset; border-radius: 0.312rem; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; } .upload-image-button { background-color: var(--ui-darker); aspect-ratio: 1.25; width: 100%; height: 100%; padding: var(--spacer-2); position: relative; box-sizing: border-box; } .upload-image-button:before { content: ""; border: 2px solid; position: absolute; display: block; z-index: 1; top: var(--spacer-2); left: var(--spacer-2); right: var(--spacer-2); bottom: var(--spacer-2); } .upload-image-button:after { content: ""; position: absolute; display: block; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--ui-darker); border-radius: 100px; } .upload-image-button input { display: none; } .checkbox input { width: 0; height: 0; visibility: hidden; position: absolute; top: 0; left: 0; } .checkbox label { display: flex; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox label:before { content: ""; display: block; box-shadow: 0 0 0 0.1em var(--ui-base); border: 0.25em solid transparent; width: 0.8em; height: 0.8em; margin-right: 0.5em; border-radius: 0.325em; flex-shrink: 0; } .checkbox input:checked+label:before { box-shadow: 0 0 0 0.75em var(--ui-base) inset, 0 0 0 0.1em var(--ui-base); } .upload-image-button>div { z-index: 3; display: grid; gap: var(--spacer-2); text-align: center; } .button-text i { font-size: 6.5rem; } .btn-close { --bs-btn-close-color: var(--ui-base); color: var(--ui-base); --bs-btn-close-focus-shadow: none; } .gs-popup-body .dropdown-toggle { background-color: var(--ui-darker); color: var(--ui-base); line-height: 1; border-radius: 0.312rem; border: none; padding: 0.75rem; font-size: var(--fs-12); } .dropdown-menu { width: 100%; background: var(--ui-darker); } .dropdown-item { color: var(--ui-base); } .dropdown-toggle::after { margin-left: auto; } .dropdown-item.active, .dropdown-item:active { background-color: var(--ui-base); color: var(--ui-darker); } .gs-sign-grid { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; } .gs-sign-form-area { display: grid; align-items: center; gap: var(--spacer-2); padding: var(--spacer-2); } .switcher { background-color: var(--ui-darker); border-radius: 0.312rem; flex-wrap: wrap; } .switcher button.active, .switcher button:hover { border-color: var(--ui-primary); background-color: var(--ui-primary); color: var(--ui-base); } .gs-sign-form-area button { padding: 1rem; } .switcher button { all: unset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: var(--fs-12); line-height: 1; padding: 0.6875rem; display: inline-flex; align-items: center; border-radius: 0.312rem; justify-content: center; font-weight: 500; white-space: nowrap; cursor: pointer; border: 1px solid transparent; -moz-column-gap: .25em; column-gap: 0.25em; box-sizing: border-box; flex: 1 1; } .grid-2 { display: grid; grid-gap: var(--spacer-2); grid-template-columns: repeat(2, 1fr); } .text-green-v { display: flex; color: var(--ui-highlight); justify-content: center; cursor: pointer; font-size: var(--fs-12); } .text-red-v { display: flex; color: var(--ui-danger); justify-content: center; cursor: pointer; font-size: var(--fs-12); } .input-with-captcha { display: flex; -moz-column-gap: 2px; column-gap: 2px; } .input-with-captcha input { height: auto; border-top-right-radius: 0; border-bottom-right-radius: 0; font-size: var(--fs-12); } .input-with-captcha img { background-color: var(--ui-darker); } .input-with-captcha button { all: unset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 1rem; line-height: 1; padding: 0.6875rem; display: inline-flex; align-items: center; border-radius: 0.312rem; justify-content: center; font-weight: 500; white-space: nowrap; cursor: pointer; -moz-column-gap: .25em; column-gap: 0.25em; color: var(--ui-base); background-color: var(--ui-primary); box-shadow: 0 0 0.25rem rgba(50, 160, 219, 0.4); border: 1px solid transparent; border-color: var(--ui-primary); border-radius: 0 0.312rem 0.312rem 0; height: auto; } .checkbox input { width: 0; height: 0; visibility: hidden; position: absolute; top: 0; left: 0; } .checkbox label:before { content: ""; display: block; box-shadow: 0 0 0 0.1em var(--ui-base); border: 0.25em solid transparent; width: 0.9rem; height: 0.8rem; margin-right: 0.5em; border-radius: 0.325em; flex-shrink: 0; } .checkbox input:checked+label:before { box-shadow: 0 0 0 0.75em var(--ui-base) inset, 0 0 0 0.1em var(--ui-base); } .modal-body input { font-size: var(--fs-12); } .checkbox { font-size: var(--fs-12); } .gs-sign-banner-area { position: relative; overflow: hidden; display: flex; justify-content: center; background: url('../images/sign-box-banner.png'); background-size: cover; background-position: 50%; } .close-btn { font-size: var(--fs-20); line-height: .6em; position: absolute; top: 0; right: 0; padding: var(--spacer-2); z-index: 103; } .pay-content-wrap { background-color: var(--ui-dark); } .pay-content-title { background-color: var(--ui-darker); } .form-label { font-size: var(--fs-12); } .form-control { border: none; background-color: var(--ui-darker); color: var(--ui-base) !important; } .form-control:focus { box-shadow: none; background-color: var(--ui-darker); } .form-control::placeholder { color: hsla(0, 0%, 100%, 0.6) !important; font-size: var(--fs-12); } .feather { margin-bottom: 3px } .category-card-title { position: absolute; bottom: 0; left: 0; right: 0; } .category-card-title::after { content: ""; width: 100%; height: 50px; background-color: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; z-index: 1; } .category .category-card-title .games-title { position: relative; left: unset; top: unset; right: unset; z-index: 2; } .my-cart-container { display: grid; grid-template-columns: 3fr 1fr; align-items: flex-start; gap: var(--spacer-2); } .my-cart-wrapper { display: grid; grid-template-columns: 1fr; gap: var(--spacer-2); } .my-cart-center, .my-cart-center-wrapper { display: flex; flex-direction: column; gap: var(--spacer-2); } .my-cart-center-wrapper { justify-content: space-between; background-color: var(--ui-dark); flex-grow: 1; padding: var(--spacer-2); border-radius: 0.625rem; } .my-cart-center-bottom, .my-cart-center-top { display: flex; justify-content: space-between; } .my-cart-product-info h2 { font-size: 1.25rem; font-weight: 500; } .my-cart-pricing .original-price { text-decoration-line: line-through; color: var(--bs-red); line-height: 0.875; text-align: right; } .my-cart-pricing .original-price, .my-cart-pricing .selling-price { font-weight: 700; grid-column: 1; } .my-cart-pricing .selling-price { font-size: 2rem; line-height: 1; } .my-cart-center-bottom { align-items: flex-end; } .my-cart-store { display: grid; grid-template-columns: auto 1fr; grid-column-gap: var(--spacer-2); align-items: flex-start; } .my-cart-store img { grid-row: 1 / 5; border-radius: var(--border-radius); box-shadow: var(--box-shadow); } .my-cart-store h2 { font-size: 1.25rem; } .my-cart-product-form { display: flex; align-items: center; gap: var(--spacer-2); margin-top: 5px; } .quantity-field, .quantity-field-input { display: flex; align-items: center; border-radius: .312rem; } .quantity-field { gap: var(--spacer-2); padding-left: .75rem; background-color: rgba(24, 27, 34, .4); } .quantity-field-input { background-color: var(--darker-color); padding: 0 .625rem; height: 3rem; } .my-cart-center-alert { display: flex; align-items: center; background-color: var(--orange-color); color: var(--text-color); border-radius: var(--border-radius); padding: .75rem; gap: .75rem; font-size: .75rem; line-height: 1rem; } .my-cart-center-alert .icon { font-size: 1.5em; margin: -.125em 0; } .quantity-field-input button { all: unset; background-color: var(--dark-color); border-radius: .312rem; width: 1.9em; height: 1.7em; font-weight: 900; justify-content: center; cursor: pointer; } .my-cart-alert, .quantity-field-input button { color: var(--ui-base); display: flex; align-items: center; font-size: var(--font-size-sm); } .input, .input-with-icon, .input-with-label, .select>label, .textarea, input[type=date], input[type=password], input[type=search], input[type=text], select, textarea { width: 100%; background-color: var(--ui-darker); color: var(--ui-base); line-height: 1; border-radius: .312rem; box-sizing: border-box; } .input, .select>label, .textarea, input[type=date], input[type=password], input[type=search], input[type=text], select, textarea { display: block; padding: .75rem; height: 2.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .status-icon { font-size: 1.5rem; background-color: var(--ui-darker); border-radius: .312rem; padding: .33333333em; } .status-icon-jungle { background-color: var(--ui-success); } .quantity-field-input input { text-align: center; width: 5em; font-size: var(--font-size-base); font-weight: 500; } .order-name { font-size: 1em; font-weight: 500; } .my-cart-product-form-delete { height: 37.5px; all: unset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 0.9rem; line-height: 1; padding: .6875rem; display: inline-flex; align-items: center; border-radius: .312rem; justify-content: center; font-weight: 500; white-space: nowrap; cursor: pointer; -moz-column-gap: .25em; column-gap: .25em; box-sizing: border-box; border: 1px solid transparent; border-color: var(--bs-red); color: var(--bs-red); } .my-cart-product-form-delete:hover { background-color: var(--bs-red); color: var(--text-color); } #messages-container .right-side .messages-area-container { margin: 0.5rem 0px 0.5rem 1rem; overflow: auto; flex: 1 1 auto; display: flex; flex-direction: column; } #messages-container .right-side .messages-area-container .message-area-item.left { align-self: flex-start; margin-left: 0px; } #messages-container .right-side .messages-area-container .message-area-item { max-width: 85%; margin: 0.25rem; } #messages-container .right-side .messages-area-container .message-area-item header { font-size: 0.7rem; font-style: italic; padding: 0.5rem 1rem; } #messages-container .right-side .messages-area-container .message-area-item.left .message-area-item-body { background-color: rgb(73, 85, 108); } #messages-container .right-side .messages-area-container .message-area-item-body { border-radius: 0.625rem; } #messages-container .right-side .messages-area-container .message-area-item-body>div { padding: 0.5rem 1rem; } #messages-container span { color: #fff; } #messages-container .right-side .messages-area-container .message-area-item.right { align-self: flex-end; } #messages-container .right-side .messages-area-container .message-area-item.right .message-area-item-body { background-color: rgb(41, 63, 105); overflow-wrap: break-word; } #messages-container .right-side .messages-area-container .message-area-item-body>div .read_info { letter-spacing: -0.5em; margin-left: 0.5rem; float: right; cursor: default; } #messages-container .right-side .messages-area-container .message-area-item-body>div .read_info.is_read { color: #32a0db; } .my-cart-right { display: grid; background-color: var(--ui-dark); flex-grow: 1; position: sticky; top: var(--spacer-2); gap: var(--spacer-2); padding: var(--spacer-2); border-radius: 0.625rem; } .my-cart-right-summary { display: grid; grid-template-columns: auto max-content; align-items: flex-end; gap: 0.5rem; } .my-cart-right-summary div { font-size: 0.75rem; font-weight: 500; } .my-cart-right-summary-item { display: flex; gap: 0.25em; } .my-cart-right-summary strong { font-size: 1.5rem; font-weight: 700; text-align: right; line-height: 1.2rem; } .my-cart-right-summary div.my-cart-right-summary-total { font-size: 1rem; } .my-cart-right-summary strong.my-cart-right-summary-total { font-size: 2rem; line-height: 1.7rem; } .my-cart-right-footer { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacer-2); } .my-cart-right-footer-info { display: flex; align-items: center; font-size: 0.75rem; font-weight: 500; gap: 0.5rem; grid-column: 1 / 3; } .my-cart-right-summary hr { width: 100%; grid-column: 1 / 3; margin: 0.5rem 0px; } .payment-title { background-color: var(--ui-darkest); padding: 0 var(--spacer-2); border-radius: .612rem .612rem 0px 0px; font-size: var(--fs-15); } .other-payment { font-size: var(--fs-13); } .cke_inner { background: var(--ui-darker); } .blog-content { background-color: var(--ui-dark); color: var(--ui-base); } #itemTextArea h2 { font-size: var(--fs-18); margin: .6rem 0px; } #itemTextArea p { font-size: var(--fs-13); } .slider_img { display: block; width: 100%; height: 100%; min-height: 360px; max-height: 360px; } @media (max-width:767px) { .user-panel-wrapper { grid-template-columns: 1fr; } .blog-left-column-item-header h2 { font-size: var(--fs-14); text-overflow: unset; white-space: unset; overflow: unset; } .blog-left-column-item-footer { display: block; margin-top: 1rem; margin-left: 1rem; } .blog-left-column-item-footer-link { justify-content: end; } .blog-left-column-item-header { margin-left: 1rem; } /* .goldbar-row { display: flex; flex-direction: column; } .goldbar-row .goldbar-row-name{ text-align: center; } */ .goldbar-row { display: grid; grid-template-columns: 1fr 2fr; padding: 12px; } .goldbar-row-image img { width: 100%; object-fit: cover; } .goldbar-container { gap: 10px; background-color: var(--ui-dark); } .grid-6 { grid-template-columns: repeat(2, 1fr); grid-gap: .9rem; } .product { padding: 0.625rem; } #messages-container .side-header { height: unset; } .product-detail .four { grid-template-columns: repeat(4, 6.925rem); } .gs-sign-grid { display: grid; grid-template-columns: repeat(1, 1fr); width: 100%; } .payment-grid { display: unset; } .payment-grid-list { padding: var(--spacer-2); } } @media (min-width:768px) { .payment-grid-filter-body button { padding-left: 0.75rem; } } @media (min-width: 576px) { .login-modal.modal-dialog { max-width: 30rem; } } @media (max-width:990px) { .blogs-container { grid-template-columns: repeat(1, 1fr); gap: 1rem; } .blog-left-column-item { display: unset; } .blog-left-column-item-image { width: 100%; } .blog-left-column-item { margin: 0; } .blogs-container:last-child { margin-bottom: 1.25rem; } .site-footer-top .container { grid-template-columns: repeat(1, 1fr); gap: 15px; } .site-footer-top-box i { font-size: 2rem; } .site-footer-links { grid-template-columns: repeat(2, auto); justify-content: unset; gap: 10px; padding: 1rem; } .site-footer-middle { display: block; } .page-header img { aspect-ratio: 4 / 1; object-fit: cover; } .site-footer { margin: auto; } .goldbar-row { gap: 0.625rem; } .product-detail { display: unset; } .top-banner { display: block; } .product-detail-purchase-goldbar { display: block; position: fixed; bottom: 0; left: 0; background-color: var(--ui-dark); width: 100%; padding: 28px 5px; z-index: 999; } .product-detail-purchase-goldbar .selling-price { background-color: transparent; font-size: 25px; margin-left: auto; padding: 0; text-align: end; } .add-cart-btn { width: 100%; } .product-detail-info { min-height: auto; } .mobile-navbar ul .payment-wrap { background-color: transparent; border: 2px solid var(--ui-highlight); } .mobile-navbar a.payment { border-radius: 0 0 0.625rem 0; color: var(--ui-highlight); } .my-cart-container { display: flex; flex-direction: column; } .my-cart-right { width: 100%; } .first-column { width: 100%; } .my-cart-center-bottom, .my-cart-center-top { display: unset; } } @media (min-width:991px) { .quantity-field { display: unset; } .add-cart-btn { width: 100%; margin-top: 5px; } } @media (min-width: 1080px) { .site-footer { width: auto; } } @media (min-width: 1200px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: unset; } } @media (min-width: 1270px) { .container { width: calc(100vw - 40px); } } @media (min-width: 1680px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1640px; } .container { width: 100%; max-width: 1640px; } } @media (min-width:1400px) { .quantity-field { display: flex; } .add-cart-btn { width: unset; margin-top: 0; } .payment-grid-filter-body button { padding-left: 5.25rem; } }