body { font-family: 'Inter', sans-serif; color: #1F1F1F; } img { max-width: 100%; height: auto; } a:link { text-decoration: none; } a:visited { text-decoration: none; } .top-nav { background-color: #151436; margin-bottom: 30px; color: #9392AD; } .navbar-nav > .nav-item { margin: 10px; } .navbar a { color: #9392AD; } .search-bar { margin-left: 15px; } .search-bar input.search { border-radius: 20px!important; border: 0px; padding-left: 33px; max-width: 240px; } .search-bar i { color: #868686; position: absolute; top: 6px; left: 10px; } .navbar .btn-login { font-size: 38px; margin-left: 16px; } .dropdown-menu { background: #323164; border: 0; } .nav-item-child { padding: 10px 15px; } .nav-item-child:hover { background-color: #55538e; } .dropdown-submenu .dropdown-menu { right: auto; left: 100%; margin-top: -42px; } .container { max-width: 1140px; } section { margin-bottom: 40px; } .section-title { color: #1F1F1F; font-weight: bold; font-size: 25px; margin-bottom: 20px; } .section-title i { color: #6A58D2; margin-right: 10px; } /* Grid Start True Masonry by balazs_sziklai https://codepen.io/balazs_sziklai*/ .grid-layout-1 { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-gap: 14px; grid-auto-rows: minmax(140px, auto); grid-auto-flow: dense; } .span-2 { grid-column-end: span 2; grid-row-end: span 2; } .span-3 { grid-column-end: span 3; grid-row-end: span 3; } .span-4 { grid-column-end: span 3; grid-row-end: span 1; } /*End Grid*/ .grid-layout-1 .game-card__details { overflow: hidden; margin: .35714em; color: #fff; text-overflow: ellipsis; white-space: nowrap; position: relative; bottom: 65px; margin-bottom: -55px; opacity: 0; } .game-card__thumbnail { border-radius: 8px; overflow: hidden; position: relative; padding-top: 100%; /* For 1:1 ratio */ margin: 0; } .game-card__thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } h3.game-card__title { font-size: unset; margin: unset; line-height: unset; font-weight: bold; } .game-card__rating > i { color: #EAAA08; } .game-card__rating { font-size: 15px; } @media(hover: hover) and (pointer: fine) { .game-card:hover .game-card__thumbnail { background-color: #000; } .grid-layout-1 .game-card:hover .game-card__details { opacity: 1; transition: all 0.5s ease; } .game-card:hover .game-card__thumbnail img { opacity: 0.5; transform: scale(1.2); transition: all 0.5s ease; } } .grid-layout-2.row > * { padding: 0 6px; } .grid-layout-2 .game-card, .grid-layout-3 .game-card { border-radius: 16px; border: 1px solid #E2E2E2; padding: 12px; height: 100%; } .grid-layout-2 .item-grid { margin-bottom: 12px; } .grid-layout-2 .game-card__details { margin-top: 10px; color: #1F1F1F; } .grid-layout-2 .game-card__title, .grid-layout-3 .game-card__title { color: #1F1F1F; } .grid-layout-2 .game-card__rating, .grid-layout-3 .game-card__rating { margin-top: 6px; color: #1F1F1F; } .grid-layout-2 .first-item .game-card__details { margin-top: 0; } .grid-layout-2 .first-item .game-card__title { margin-bottom: 10px; } .grid-layout-2 .first-item .game-card__bottom { position: absolute; bottom: 0; width: 100%; } .grid-layout-2 .first-item .game-card__rating { float: left; } .grid-layout-2 .game-card__btn-play { background-color: #7158FA; color: #fff; padding: 10px 20px; border-radius: 20px; float: right; margin-right: 25px; } .grid-layout-2, .grid-layout-3, .category-list-global { padding: 0 6px; } .grid-layout-3 .game-card__link { display: flex; } .grid-layout-3 .game-card__thumbnail { width: 70px; height: 70px; min-width: 70px; margin-right: 13px; padding-top: unset; } .grid-layout-3 .game-card__category { margin-top: 6px; } .grid-layout-2 .game-card:hover, .grid-layout-3 .game-card:hover, .category-list-global .category-item:hover { box-shadow: 0px 8px 8px -4px #10182808; box-shadow: 0px 20px 24px -4px #10182814; transition: all 0.5s ease; } .grid-layout-3.row > * { padding: 0 8px; margin-bottom: 16px; } .b-load-more-wrapper { text-align: center; margin-top: 30px; } .btn-load-more { background-color: #F9F5FF; border: 1px solid #7158FA; border-radius: 30px; padding: 10px 20px; color: #7158FA; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-muted { color: #A1A1A1; } .category-list-global .row > * { padding: 0 8px; margin-bottom: 16px; } .category-list-global .category-item { display: flex; border: 1px solid #E2E2E2; border-radius: 8px; overflow: hidden; background-color: #fff; } .category-item__details { padding: 9px; } .category-item__thumbnail { margin: 0; } .category-item__title { font-size: 16px; font-weight: bold; color: #1F1F1F; } .category-list-global .category-item:hover { transform: scale(1.1); transition: all 0.5s ease; } @media screen and (max-width: 768px){ /* Mobile Device */ .grid-layout-2 .first-item .game-card__bottom { position: unset; margin-top: 10px; } .top-user { width: 80px; margin: 10px; } .leaderboard-cell.username { min-width: unset; } .leaderboard-cell.user-xp { margin-top: 12px; position: absolute; right: 0; } .leaderboard-cell.rank { display: none; } } @media screen and (max-width: 992px){ /* Mobile Device */ .dropdown-submenu .dropdown-menu { margin-top: unset; } } .game-content { overflow: hidden; border-radius: 18px; } .game-iframe-container { position: relative; overflow: hidden; width: 100%; min-height: 700px; } .game-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 10; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .rating > i { color: #EAAA08; } .play-count > i { color: #2f9cfd; } .content-wrapper { margin-top: 25px; } .single-title { font-weight: bold; font-size: 35px; } .single-game__header { width: 100%; border-bottom: 1px solid #E2E2E2; padding-bottom: 20px; margin-bottom: 20px; } .single-game__header .btn { margin-bottom: 8px; } .single-game__header-left { float: left; } .single-game__header-right { float: right; } .single-game__actions .dropdown-menu { background-color: #fff; border: 1px solid #EAECF0; box-shadow: 0px 1px 3px 0px #1018281A; } .single-game__subheading { font-weight: bold; font-size: 20px; margin-bottom: 20px; margin-top: 20px; } .single-game__tag-list, .single-game__category-list { margin: 0; padding: 0; text-decoration: none; list-style: none; display: flex; flex-wrap: wrap; } .single-game__tag-list .tag-item, .single-game__category-list .category-item { background-color: #EDEDED; padding: 8px 16px; border-radius: 8px; margin-right: 8px; margin-bottom: 6px; white-space: nowrap; } .single-game__tag-list .tag-item a, .single-game__category-list .category-item a { color: #868686; } .single-game__tag-list .tag-item:hover, .single-game__category-list .category-item:hover { background-color: #D7D7D7; } #content-leaderboard { border-radius: 12px; overflow: hidden; border: 1px solid #EAECF0; box-shadow: 0px 1px 3px 0px #1018281A; } #content-leaderboard table { margin: 0; } .btn-capsule > i { margin-right: 9px; } .btn-capsule { border-radius: 20px; border: 1px solid #D0D5DD; } .btn-circle, .btn-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #D0D5DD; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .btn-circle:hover, .btn-capsule:hover { background-color: #6A58D2; color: #fff; } .btn-circle.dropdown-toggle::after { display: none; } .image-404 { margin: 5rem 1rem; } .splash .btn-play { border-radius: 60px; height: 45px; font-weight: 500; color: #7158FA; background: #FFF; } .splash .btn-play::before { content: ""; display: inline-block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #7158FA; vertical-align: middle; margin-right: 10px; position: relative; top: -2px; } .chevron-left::before, .chevron-right::before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; } .chevron-right::before { border-width: 5px 0 5px 5px; /* Adjust size as needed */ border-color: transparent transparent transparent black; /* Chevron color */ } .chevron-left::before { border-width: 5px 5px 5px 0; /* Adjust size as needed */ border-color: transparent black transparent transparent; /* Chevron color */ } /* Comments */ .comment-user-avatar { position: absolute; width: 50px; height: 50px; } .comment-user-avatar img { border-radius: 50%; } .comment-avatar { float: left; width: 50px; height: 50px; } .comment-avatar img { border-radius: 50%; } .comment-input { margin-left: 65px; } .comment-btn-post { text-align: right; } .comment-p { margin-top: 23px; } .comment-p .comment-date { float: right; color: #666; font-size: 0.8em; } .comment-username { font-weight: bold; } .comment-details { margin-left: 65px; } .comment-text { white-space: pre-line; } .color-red { color: #bb4d4d; } i.disabled { opacity: 0.5; pointer-events: none; } /* NEW COMMENT SYSTEM */ #tpl-comment-section { margin-top: 30px; margin-bottom: 20px; } #comment-form { display: flex; margin-bottom: 30px; border-bottom: 1px solid #E2E2E2; } .comment-profile-avatar { margin-right: 20px; } .comment-profile-avatar img { border-radius: 50%; float: left; width: 3.6rem; height: 3.6rem; max-width: 50px; max-height: 50px; } .comment-form-wrapper { background: #fff; margin-bottom: 30px; box-shadow: 0px 4px 8px 0px rgba(50, 50, 50, 0.1); border: 1px solid #E2E2E2; border-radius: 12px; padding: 15px; width: 100%; } .comment-form-wrapper textarea { padding: 0; border: 0; } .post-comment-btn-wrapper { float: right; margin-top: 15px; } textarea#comment-input { height: 100px; } .user-comment-wrapper { display: flex; } .tpl-user-comment { border-bottom: 1px solid #E2E2E2; margin-bottom: 30px; } .tpl-comment-children .tpl-user-comment:last-child { border-bottom: none; } img.tpl-user-comment-avatar { border-radius: 50%; float: left; width: 3.6rem; height: 3.6rem; max-width: 50px; max-height: 50px; margin-right: 20px; } .tpl-comment-children img.tpl-user-comment-avatar { max-width: 40px; max-height: 40px; } .tpl-comment-author { font-weight: bold; } .tpl-user-comment .comment-content { margin-bottom: 20px; width: 100%; } .tpl-comment-timestamp { margin-top: 3px; font-size: 15px; color: #797979; } .tpl-comment-text { margin-top: 13px; white-space: unset; } .comment-actions { margin-top: 15px; } .comment-action-right { float: right; } .comment-action-left { float: left; } .tpl-comment-children { display: block; margin-left: 70px; } .tpl-reply-form { display: flex; } .comment-reply-wrapper { margin-left: 70px; background: #fff; margin-bottom: 30px; box-shadow: 0px 4px 8px 0px rgba(50, 50, 50, 0.1); border: 1px solid #E2E2E2; border-radius: 12px; padding: 15px; width: 100%; } .comment-reply-wrapper textarea { padding: 0; border: 0; } .reply-action-buttons { float: right; margin-top: 15px; } .tpl-btn-cancel-reply { color: #797979; } #tpl-btn-load-more-comments { color: #797979; } .comment-require-login-wrapper { display: flex; margin-bottom: 40px; } .comment-require-login-wrapper .comment-alert { padding: 10px; background-color: #EDEDED; text-align: center; width: 100%; border-radius: 8px; } /* END COMMENT */ /*TOP PLAYERS */ .top-3 { text-align: center; margin-bottom: 40px; margin-top: 40px; } .top-user { display: inline-block; text-align: center; margin: 15px; position: relative; white-space: nowrap; } .top-avatar img { border-radius: 50%; display: block; } .top-number { width: 40px; color: #fff; border-radius: 50%; position: absolute; left: 20%; transform: translate(-50%, -50%); } .top-username { font-weight: bold; margin-top: 30px; } .top-xp { font-style: italic; } .rank-1 .top-avatar img { width: 120px; } .top-number img { margin-bottom: 7px; } .leaderboard-table { clear: both; display: block; width: 100%; } .leaderboard-row { padding: 10px; border-radius: 12px; border: 1px solid #E2E2E2; margin-top: 15px; white-space: nowrap; position:relative; } .leaderboard-cell { vertical-align: middle; padding: 0 10px; display: inline-block; } .leaderboard-user-avatar img { width: 50px; border-radius: 50%; display: block; } .leaderboard-cell.username { font-weight: bold; min-width: 160px; } .leaderboard-cell.rank { float: right; } .level-badge { float: left; margin-right: 10px; } /* END TOP PLAYERS */ .sidebar .widget { margin-bottom: 16px; } .widget-title { font-weight: bold; font-size: 20px; margin-bottom: 14px; } .widget-game-list { padding: 16px; border: 1px solid #E2E2E2; border-radius: 12px; } .widget-game-list .widget-title { border-bottom: 1px solid #E2E2E2; padding-bottom: 12px; } .wgt-list-game-grid { padding: 0 6px; } .wgt-list-game-grid .wgt-list-game__item { padding: 5px; } .wgt-list-game__thumbnail { position: relative; padding-top: 100%; border-radius: 8px; overflow: hidden; } .wgt-list-game__thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .wgt-list-game-vertical .wgt-list-game__item { margin-bottom: 14px; } .wgt-list-game-vertical .wgt-list-game__meta { padding-left: 0; } .wgt-list-game-vertical .wgt-list-game__title { color: #1F1F1F; font-weight: bold; } .single-category__header, .single-post-list__header, .single-tag__header, .single-search__header { display: flex; flex-wrap: wrap; margin-bottom: 25px; } .single-category__header .section-title { margin: 6px 0; } .single-category__icon { margin-right: 10px; } .single-category__meta, .single-post-list__meta, .single-tag__meta, .single-search__meta { background-color: #EDEDED; margin-left: auto; padding: 8px 16px; border-radius: 8px; color: #868686; } .single-category .category-description { background-color: #ededed; padding: 8px 16px; border-radius: 8px; margin-bottom: 30px; } .single-page__header, .single-post__header { margin-bottom: 25px; } .single-page__content, .single-post__content { margin-bottom: 40px; } .single-post-list__header .section-title, .single-tag__header .section-title, .single-search__header .section-title { margin-bottom: 0; } .single-post-list__card { border: 1px solid #E2E2E2; padding: 12px; border-radius: 16px; margin-bottom: 18px; } .single-post-list__card:hover { box-shadow: 0px 20px 24px -4px #10182814; } .single-post-list__details { overflow: hidden; } .single-post-list__title a { font-weight: bold; font-size: 18px; color: #1F1F1F; } .single-post-list__thumbnail { margin: 0; margin-bottom: 6px; } .single-post-list__thumbnail img { margin-top: auto; margin-bottom: auto; max-height: 100%; border-radius: 12px; } .single-post-list__date { font-size: 14px; font-style: italic; } .single-post-list__bottom { margin-top: 12px; } .single-post__meta { font-style: italic; } .pagination-wrapper { margin-top: 20px; } .pagination .page-item .page-link { background-color: #fff; border: none; border-radius: 8px; color: #475467; margin: 6px; padding: 8px 14px; } .pagination .page-item .page-link:hover { background-color: #F1F3F4; } .pagination .page-item.disabled .page-link { background-color: #E8ECEE; color: #182230; } footer { background-color: #151436; color: #9392AD; } footer h1, footer h2, footer h3, footer h4 { color: #EEEEEE; } .footer a, .footer-copyright a { color: #EEEEEE; } .footer-widget { padding: 50px 0; } footer .widget-wrapper { margin-bottom: 20px; } footer .line-separator { border-top: 1px solid #4D4C67; } .footer-copyright { text-align: center; background-color: #151436; } .footer-copyright .container { position: relative; } .dsb-panel { position: absolute; right: 0; } #mobile-play { position: relative; } .mobile-thumb-play { background: #000000; overflow: hidden; } .mobile-thumb-play img { width: 100%; opacity: 0.7; } #mobile-play-btn { position: absolute; top: 50%; left: 50%; font-size: 75px; text-align: center; color: #fff; transform: translate(-50%, -50%); } #mobile-back-button { display: none; align-items: center; position: fixed; z-index: 101; top: 100px; left: 0; width: 56px; height: 46px; background: rgb(255, 255, 255); box-shadow: rgb(0 0 0 / 24%) 0px 16px 32px; border-radius: 0px 16px 16px 0px; overflow: hidden; cursor: pointer; } #mobile-back-button i { color: #94a2a2; font-size: 30px; margin-left: 14px; } #mobile-play .label-play-game { font-size: 30px; font-weight: bold; position: relative; top: -10px; } .games-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 20px; } .game-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; text-align: center; } .game-card h3 { margin-bottom: 10px; } .game-card p { font-size: 0.95rem; color: #444; } .btn-play { display: inline-block; margin-top: 10px; padding: 10px 20px; background: #007bff; color: #fff; border-radius: 5px; text-decoration: none; } .btn-play:hover { background: #0056b3; }