@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: url("https://bas3data.xyz/assets/Image/head-bg.webp") #000000 no-repeat fixed;
background-size: cover;
color: white;
font-family: "Montserrat", sans-serif;
font-size: 13pt;
}
a {
text-decoration: none;
color: #e5db19;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 1000px;
position: relative;
margin: auto;
margin-top: 47px;
margin-bottom: 23px;
padding-left: 24px;
padding-right: 24px;
}
.logo {
margin-bottom: 40px;
}
.logo img {
width: 100%;
max-width: 230px;
}
.slogan {
margin-bottom: 20px;
text-align: center;
}
.slogan span {
font-weight: 900;
font-size: 35px;
background: linear-gradient(
to bottom,
rgba(222, 199, 71, 1) 0%,
rgba(255, 243, 114, 1) 18%,
rgba(240, 225, 88, 1) 30%,
rgba(169, 141, 29, 1) 54%,
rgba(222, 199, 71, 1) 95%,
rgba(222, 199, 71, 1) 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
color: #e5db19;
text-align: center;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.tagline {
color: #ffffff;
display: inline-block;
border: 3px solid #ffffff;
font-size: 16px;
padding: 12px 45px;
border-radius: 100px;
position: relative;
font-weight: 600;
text-align: center;
}
.tagline::before {
content: "";
width: 12px;
height: 12px;
background: url("../images/star-shape.png") no-repeat center;
background-size: contain;
position: absolute;
left: 17px;
top: 15px;
}
.tagline::after {
content: "";
width: 12px;
height: 12px;
background: url("../images/star-shape.png") no-repeat center;
background-size: contain;
position: absolute;
right: 17px;
top: 15px;
}
.line-divider {
width: 100%;
max-width: 200px;
height: 2px;
background: #e5db19;
position: relative;
margin: auto;
margin-top: 25px;
}
@media screen and (max-width: 767px) {
.logo img {
max-width: 180px;
}
.slogan span {
font-size: 25px;
}
.tagline {
font-size: 14px;
padding: 12px 30px;
}
.tagline::before {
left: 12px;
}
.tagline::after {
right: 12px;
}
}
.banner-container {
width: 100%;
max-width: 1000px;
position: relative;
margin: auto;
display: flex;
align-items: center;
gap: 10px;
}
.banner img {
width: 100%;
max-width: 770px;
}
.cta-container {
display: block;
width: 100%;
max-width: 230px;
}
.announcement {
border: 3px solid #e5db19;
border-radius: 16px;
overflow: hidden;
margin-bottom: 8px;
background-color: #171c23;
}
.announcement .label {
text-align: center;
display: block;
background-color: #e5db19;
padding: 10px 0;
font-size: 16px;
color: #000000;
font-weight: 600;
}
.announcement .date {
text-align: center;
display: flex;
flex-direction: column;
padding: 24px 10px;
font-size: 22px;
font-weight: 700;
}
.button-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.btn-login,
.btn-register {
display: block;
text-align: center;
background-color: #e5db19;
color: #000000;
font-weight: 700;
padding: 14px 10px;
border-radius: 10px;
text-transform: uppercase;
font-size: 16px;
}
.btn-login {
color: #000;
background: rgba(222, 199, 71, 1);
background: -moz-linear-gradient(
top,
rgba(222, 199, 71, 1) 0%,
rgba(255, 243, 114, 1) 18%,
rgba(240, 225, 88, 1) 30%,
rgba(169, 141, 29, 1) 54%,
rgba(222, 199, 71, 1) 95%,
rgba(222, 199, 71, 1) 100%
);
background: -webkit-gradient(
left top,
left bottom,
color-stop(0%, rgba(222, 199, 71, 1)),
color-stop(18%, rgba(255, 243, 114, 1)),
color-stop(30%, rgba(240, 225, 88, 1)),
color-stop(54%, rgba(169, 141, 29, 1)),
color-stop(95%, rgba(222, 199, 71, 1)),
color-stop(100%, rgba(222, 199, 71, 1))
);
background: -webkit-linear-gradient(
top,
rgba(222, 199, 71, 1) 0%,
rgba(255, 243, 114, 1) 18%,
rgba(240, 225, 88, 1) 30%,
rgba(169, 141, 29, 1) 54%,
rgba(222, 199, 71, 1) 95%,
rgba(222, 199, 71, 1) 100%
);
background: -o-linear-gradient(
top,
rgba(222, 199, 71, 1) 0%,
rgba(255, 243, 114, 1) 18%,
rgba(240, 225, 88, 1) 30%,
rgba(169, 141, 29, 1) 54%,
rgba(222, 199, 71, 1) 95%,
rgba(222, 199, 71, 1) 100%
);
background: -ms-linear-gradient(
top,
rgba(222, 199, 71, 1) 0%,
rgba(255, 243, 114, 1) 18%,
rgba(240, 225, 88, 1) 30%,
rgba(169, 141, 29, 1) 54%,
rgba(222, 199, 71, 1) 95%,
rgba(222, 199, 71, 1) 100%
);
background: linear-gradient(
to bottom,
rgba(222, 199, 71, 1) 0%,
rgba(255, 243, 114, 1) 18%,
rgba(240, 225, 88, 1) 30%,
rgba(169, 141, 29, 1) 54%,
rgba(222, 199, 71, 1) 95%,
rgba(222, 199, 71, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dec747', endColorstr='#dec747', GradientType=0);
border: 1px solid rgb(157, 105, 33);
cursor: pointer;
transition: all ease-in-out 0.1s;
}
.btn-login:hover {
background: rgba(222, 199, 71, 1);
background: -moz-linear-gradient(
top,
rgba(222, 199, 71, 1) 0%,
rgba(222, 199, 71, 1) 3%,
rgba(169, 141, 29, 1) 22%,
rgba(255, 243, 114, 1) 56%,
rgba(240, 225, 88, 1) 70%,
rgba(222, 199, 71, 1) 100%
);
background: -webkit-gradient(
left top,
left bottom,
color-stop(0%, rgba(222, 199, 71, 1)),
color-stop(3%, rgba(222, 199, 71, 1)),
color-stop(22%, rgba(169, 141, 29, 1)),
color-stop(56%, rgba(255, 243, 114, 1)),
color-stop(70%, rgba(240, 225, 88, 1)),
color-stop(100%, rgba(222, 199, 71, 1))
);
background: -webkit-linear-gradient(
top,
rgba(222, 199, 71, 1) 0%,
rgba(222, 199, 71, 1) 3%,
rgba(169, 141, 29, 1) 22%,
rgba(255, 243, 114, 1) 56%,
rgba(240, 225, 88, 1) 70%,
rgba(222, 199, 71, 1) 100%
);
background: -o-linear-gradient(
top,
rgba(222, 199, 71, 1) 0%,
rgba(222, 199, 71, 1) 3%,
rgba(169, 141, 29, 1) 22%,
rgba(255, 243, 114, 1) 56%,
rgba(240, 225, 88, 1) 70%,
rgba(222, 199, 71, 1) 100%
);
background: -ms-linear-gradient(
top,
rgba(222, 199, 71, 1) 0%,
rgba(222, 199, 71, 1) 3%,
rgba(169, 141, 29, 1) 22%,
rgba(255, 243, 114, 1) 56%,
rgba(240, 225, 88, 1) 70%,
rgba(222, 199, 71, 1) 100%
);
background: linear-gradient(
to bottom,
rgba(222, 199, 71, 1) 0%,
rgba(222, 199, 71, 1) 3%,
rgba(169, 141, 29, 1) 22%,
rgba(255, 243, 114, 1) 56%,
rgba(240, 225, 88, 1) 70%,
rgba(222, 199, 71, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dec747', endColorstr='#dec747', GradientType=0);
border-color: rgba(157, 105, 33);
color: #000;
}
.btn-register {
color: #fff;
background: rgb(48, 145, 50);
background: -moz-linear-gradient(
bottom,
rgba(32, 124, 229, 1) 0%,
rgba(32, 124, 229, 1) 34%,
rgba(73, 155, 234, 1) 52%,
rgba(32, 124, 229, 1) 80%,
rgba(32, 124, 229, 1) 100%
);
background: -webkit-linear-gradient(
bottom,
rgba(32, 124, 229, 1) 0%,
rgba(32, 124, 229, 1) 34%,
rgba(73, 155, 234, 1) 52%,
rgba(32, 124, 229, 1) 80%,
rgba(32, 124, 229, 1) 100%
);
background: linear-linear-gradient(
bottom,
rgba(32, 124, 229, 1) 0%,
rgba(32, 124, 229, 1) 34%,
rgba(73, 155, 234, 1) 52%,
rgba(32, 124, 229, 1) 80%,
rgba(32, 124, 229, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#309132', endColorstr='#1ca012', GradientType=0);
border: 1px solid rgba(62, 186, 64, 0.8);
cursor: pointer;
transition: all ease-in-out 0.1s;
}
.btn-register:hover {
background: rgb(32, 124, 229, 1);
background: -moz-linear-gradient(
bottom,
rgba(73, 155, 234, 1) 0%,
rgba(73, 155, 234, 1) 34%,
rgba(32, 124, 229, 1) 52%,
rgba(73, 155, 234, 1) 80%,
rgba(73, 155, 234, 1) 100%
);
background: -webkit-linear-gradient(
bottom,
rgba(73, 155, 234, 1) 0%,
rgba(73, 155, 234, 1) 34%,
rgba(32, 124, 229, 1) 52%,
rgba(73, 155, 234, 1) 80%,
rgba(73, 155, 234, 1) 100%
);
background: linear-linear-gradient(
bottom,
rgba(73, 155, 234, 1) 0%,
rgba(73, 155, 234, 1) 34%,
rgba(32, 124, 229, 1) 52%,
rgba(73, 155, 234, 1) 80%,
rgba(73, 155, 234, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ca012', endColorstr='#1ca012', GradientType=0);
border-color: rgba(35, 199, 26, 0.8);
}
@media screen and (max-width: 767px) {
.banner-container {
display: flex;
flex-direction: column;
border-bottom: 2px solid #e5db19;
padding-bottom: 15px;
}
.cta-container {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
max-width: fit-content;
}
.announcement {
display: flex;
border-radius: 6px;
border-width: 2px;
width: 100%;
align-items: center;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 5px;
}
.announcement .label {
font-size: 12px;
display: flex;
flex-direction: column;
padding: 8px 20px;
white-space: nowrap;
}
.announcement .date {
font-size: 14px;
width: 100%;
padding: 5px;
display: flex;
gap: 5px;
align-items: center;
flex-direction: row;
justify-content: center;
}
.button-container {
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
}
.page-content {
width: 100%;
max-width: 1000px;
position: relative;
margin: auto;
display: grid;
grid-template-columns: 231px 1fr;
}
.swipe {
text-align: center;
padding: 13px 0;
display: none;
}
.swipe img {
width: 90px;
}
.provider-list {
background-color: #e5db19;
list-style: none;
padding: 10px;
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.provider-list li {
background-color: #171c23;
padding: 12px 15px;
border-radius: 10px;
font-size: 14px;
}
.provider-list li.active,
.provider-list li:hover {
background-color: #2a2a05;
}
.provider-list li a {
display: flex;
align-items: center;
gap: 15px;
color: #ffffff;
font-weight: 500;
}
.provider-list li a img {
width: 34px;
height: 34px;
object-fit: contain;
}
@media screen and (max-width: 767px) {
.page-content {
display: flex;
flex-direction: column;
}
.swipe {
display: inherit;
}
.provider-container {
padding: 0px;
}
.provider-list {
display: grid;
grid-template-rows: 1fr 1fr;
grid-auto-flow: column;
overflow-x: auto;
padding: 7px 10px;
gap: 8px;
}
.provider-list li {
width: 210px;
white-space: nowrap;
}
ul.provider-list::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.6);
border-radius: 10px;
}
ul.provider-list::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 1);
}
ul.provider-list::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
ul.provider-list::-webkit-scrollbar {
height: 10px;
}
}
.category-name {
text-align: center;
padding: 15px;
font-size: 21px;
margin-bottom: 20px;
}
main {
padding: 0 15px;
}
.games {
margin-bottom: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
flex-wrap: wrap;
gap: 20px;
}
.game-card {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
border: 3px solid #e5db19;
border-radius: 8px;
position: relative;
display: block;
justify-items: center;
background-color: #171c23;
flex: 1 0 155px;
}
.game-card a {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
transition: all 0.5s ease-in-out;
height: 100%;
}
.game-card a:hover {
.hover-card {
display: flex;
}
}
.hover-card {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
left: 0;
display: none;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
padding: 30px;
z-index: 2;
}
.hover-card img {
max-width: 100%;
-webkit-animation: breath 1.3s linear infinite; /* Safari */
animation: breath 1.3s linear infinite;
}
@-webkit-keyframes breath {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes breath {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
.game-card .thumbnail {
color: #ffffff;
display: grid;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: nowrap;
text-overflow: ellipsis;
padding: 10px;
width: 100%;
grid-template-columns: 1fr;
}
.game-card .thumbnail img {
border-radius: 8px;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.game-name {
font-size: 14px;
text-align: center;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
}
.gacor-time {
background: #e5db19;
color: #000000;
text-align: center;
font-size: 12.5px;
font-weight: 700;
padding: 10px 0;
width: 100%;
}
.game-card .label {
font-size: 14px;
font-weight: 600;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.game-information {
font-size: 13px;
display: flex;
flex-direction: column;
gap: 10px;
}
.game-informartion .label {
padding: 0;
margin: 0;
display: inline-block;
border: 2px solid #e5db19;
}
.info-grid {
display: grid;
grid-template-columns: 60px 20px auto;
gap: 10px;
padding: 0 10px;
align-items: center;
}
.info-label {
display: block;
text-align: center;
border: 1px solid #e5db19;
border-radius: 40px;
padding: 2.5px 0;
font-size: 12px;
}
.repeater {
text-align: center;
}
.info-status {
display: flex;
gap: 1px;
justify-content: space-between;
font-size: 12px;
}
.info-status span {
display: flex;
gap: 5px;
}
.info-status img {
height: 10px;
}
.auto {
color: #00fff0;
border-color: #00fff0;
}
.manual {
color: #01eb70;
border-color: #01eb70;
}
.progress {
margin-top: 15px;
display: block;
width: 100%;
border-top: 3px solid #e5db19;
position: relative;
}
.progress span {
z-index: 1;
position: relative;
display: block;
text-align: center;
font-size: 16px;
padding: 5px;
font-weight: 600;
color: #ffffff;
}
.progress .bar {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255, 243, 114, 0.1);
background-size: auto 100%;
}
.bar.red {
background-image: url("../images/progress/red.png");
}
.bar.orange {
background-image: url("../images/progress/orange.png");
}
.bar.green {
background-image: url("../images/progress/green.png");
}
@media screen and (max-width: 767px) {
.games {
grid-template-columns: repeat(2, 1fr);
}
}
.footer {
background-color: #171c23;
}
.footer-content {
width: 100%;
max-width: 1000px;
position: relative;
padding: 30px 20px;
margin: auto;
font-size: 14px;
font-weight: 500;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 1.5rem;
font-weight: 700;
}
h1 {
font-size: 42px;
}
h2 {
font-size: 32px;
}
h3 {
font-size: 27px;
}
h4 {
font-size: 22px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p {
margin-bottom: 2rem;
}
.copyright {
font-size: 12px;
padding: 30px 24px;
text-align: center;
color: #e5db19;
}
.copyright img {
height: 10px;
margin-right: 10px;
}
.footer-copyright-desktop__item {
display: flex;
align-items: center;
font-size: 9px;
gap: 10px;
color: #e5db19;
justify-content: center;
}
.footer-copyright-desktop__item img {
height: 10px;
}
@media screen and (max-width: 767px) {
.footer-content {
padding: 40px 24px;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 12px;
}
p {
margin-bottom: 2rem;
font-size: 12px;
line-height: 18px;
}
.copyright {
font-size: 9px;
}
}
/* ========= Rollto ======== */
.rollto {
position: fixed;
right: 230px;
right: -moz-calc((100% - 1030px) / 2 - 46px);
right: -webkit-calc((100% - 1030px) / 2 - 46px);
right: calc((100% - 1030px) / 2 - 46px);
bottom: 60%;
z-index: 999;
display: none;
}
@media (max-width: 1060px) {
.rollto {
position: fixed;
right: 10px;
bottom: 70%;
z-index: 999;
display: none;
}
}
.rollto a {
overflow: hidden;
display: block;
width: 36px;
height: 36px;
cursor: pointer;
margin: 1px 0;
opacity: 0.8;
}
.rollto a:hover {
opacity: 1;
}
.rollto a .fa-comment-o {
font-size: 14px;
line-height: 25px;
}
/* ========= Rollto ======== */
.rollto a {
background: #ffc107;
color: #ffffff;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.text-center{
text-align: center;
}