@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700;800;900&family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
/*=======================*/
/* GLOBAL */
/*=======================*/
:root {
--page-bg: #fff;
--content-bg:#fff;
--primary: #79b225;
--accent: #1e90ff;
--border-color:#f7f7f7;
--font-primary: "Karla", sans-serif;
--font-other: "Kanit", sans-serif;
--text-md:24px;
--text-size:16px;
--text-primary: black;
--text-muted: grey;
--max-width: 1200px;
--header-padding:50px;
--large-padding:32px;
--med-padding:26px;
--small-padding:10px;
--header-icon:50px;
--border-radius: 10px;
--shadow-lg: 0px 0px 25px -6px rgba(0, 0, 0, 0.08);
--shadow-sm: 0px 0px 25px -6px rgba(0, 0, 0, 0.06);
}
/*=======================*/
/* CONTENT */
/*=======================*/
body {background: var(--page-bg);font-family:var(--font-primary);margin:0;font-size:var(--text-size);}
h1, .h1, h2, .h2, h3, .h3, .header .logo span {color: var(--text-primary);font-family:var(--font-other);font-weight:800;}
p {margin: 0px;}
#view .container:after, #view .container:before {display: none;}
#view .container{width:100%;max-width:calc(var(--max-width) - var(--large-padding) * 2);padding:0 var(--large-padding);}
#view {color: var(--text-muted);display: flex;flex-direction: column;min-height: 100vh;position: relative;}
.body .sidebar {display: none !important;}
.body .content {padding: 0px;flex: 1;}
.body:after,.body:before {display: none;}
.body {margin: 0px;display: flex;flex-direction:column;gap:25px;}
.panel.panel-default {background: var(--content-bg);border-radius: var(--border-radius);border:none !important;}
.panel .panel-heading {background: transparent !important;font-family: var(--font-other);font-weight:800;padding:calc(var(--large-padding) - 8px) var(--large-padding);font-size:var(--text-md);display: flex;align-items: center;border-bottom-width:2px;}
.panel .panel-body {padding: var(--large-padding);}
/*=======================*/
/* SALE BANNER */
/*=======================*/
#sale {
position:relative;
background: var(--primary);
text-align: center;
padding: var(--large-padding);
border-radius: var(--border-radius);
margin-bottom: var(--large-padding);
display: flex;
align-items: center;
box-shadow: var(--shadow-lg);
}
#sale h1, #sale p {margin: 0px;color: white;font-family:var(--font-other);}
#sale h1 {text-shadow: 2px 3px 0px #00000026;font-size: 32px;}
#sale #saleCountdownContainer {
padding: 12px 20px;
border-radius: 100px;
margin-left: auto;
min-width: 172px;
font-weight: 700;
border: 2px solid #ffffff40 !important;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
color: white;
}
#sale .alert-end {flex: 1;display: flex;}
#sale .alert-end .icon {width: 26px;display: flex;margin-right: 8px;}
#sale .alert-end #saleCountdown {text-transform: uppercase;font-size: 14px;letter-spacing: .5px;}
#sale .alert-image {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
/*=======================*/
/* MOBILE + DESKTOP */
/*=======================*/
@media only screen and (max-width: 768px) {
#view .container{padding:0 var(--med-padding);gap: var(--med-padding);}
#view #foot .top .right {margin-right: auto;}
#view #foot .middle {justify-content: center;text-align: center;}
#sale {flex-direction: column;gap: 10px;overflow: hidden;}
}
/*=======================*/
/* HEADER */
/*=======================*/
#head {padding: var(--header-padding) 0;}
#head .container {display: flex;align-items: center;justify-content: center;}
#head .container .left,#head .container .right {flex: 1;display: flex;align-items: center;}
#head .container .right {justify-content: flex-end;text-align: right;}
#head .container .right .icon {order: 5;}
#head .icon {line-height: 1;color: var(--primary);}
#head .icon svg path {fill:currentColor;}
#head .icon svg {width: var(--header-icon);}
#head .left .icon svg path {fill: transparent;stroke: currentColor;}
#head .player-wrap h2, #head .player-wrap p {margin: 0px;}
#head .player-wrap {color: inherit !important;text-decoration:none !important;cursor:pointer;display: flex;align-items: center;gap: 25px;}
#head .player-wrap p {font-size: 16px;font-weight: 600;}
/*=======================*/
/* FOOTER */
/*=======================*/
#foot {margin-top: auto;border-top: 3px solid var(--border-color);}
#foot .top {display: flex;align-items: center;padding: 40px 0px;}
#foot .top h1 {margin: 0;line-height: 1;font-size: 28px;text-transform: uppercase;}
#foot .top .right {margin-left: auto;display: flex;gap: 30px;}
#foot .top .right a {font-weight: bold;text-decoration: none !important;color: var(--text-primary);}
#foot .middle {display: flex;align-items: center;font-weight: bold;padding-bottom: 35px;}
#foot .middle .text {line-height: 1.65;}
#foot .watermark {width: 48px;margin-left: auto;}
#foot .watermark path {fill: #00000026;}
#foot .middle .text strong {color: var(--text-primary);}
#foot .middle .small {margin: 0px;opacity: .65;}
/* */
.wrapper--art:before {
content: '';
display: block;
width: 100%;
position: absolute;
left: 0;
right: 0;
background-color: inherit;
mask-repeat: repeat-x;
-webkit-mask-repeat: repeat-x;
mask-position: bottom;
-webkit-mask-position: bottom;
}
.blocky:before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: 110px 8px;
mask-size: 110px 8px;
height: 8px;
top: -8px;
}
.pointedSm:before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: 110px 8px;
mask-size: 110px 8px;
height: 8px;
top: -8px;
}
.pointed:before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: 181px 12px;
mask-size: 181px 12px;
height: 12px;
top: -12px;
}
.curveSm:before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: 76px 7px;
mask-size: 76px 7px;
height: 7px;
top: -7px;
}
.curve:before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: 140px 15px;
mask-size: 140px 15px;
height: 15px;
top: -15px;
}
.curveLg:before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: 181px 20px;
mask-size: 181px 20px;
height: 20px;
top: -20px;
}
.waveXs:before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: 37px 7px;
mask-size: 37px 7px;
height: 7px;
top: -7px;
}
.waveSm:before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: 76px 8px;
mask-size: 76px 8px;
height: 8px;
top: -8px;
}
.wave:before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: 76px 11px;
mask-size: 76px 11px;
height: 11px;
top: -11px;
}
.waveLg:before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: 144px 21px;
mask-size: 144px 21px;
height: 21px;
top: -21px;
}
/* */
.logo {
position: relative;
top: 35px;
}
@media only screen and (min-width: 1080px) {
.category-card.card .icon {
position: absolute;
right: 0;
}
}
@media only screen and (max-width: 768px) {
.hidden-sm {
display: none;
}
.category-card.card h1 {
font-size: 32px;
}
.category-card.card .icon {
max-width: 120px;
height: 120px;
}
a.category-card.card {
min-width: 0 !important;
}
.index-wrap {
flex-direction: column;
}
.home-blocks {
flex-direction: column !important;
}
.card {
padding: 30px !important;
}
}
.headBg::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: url('https://i.imgur.com/R6gqCfa.png');
/* Zorgt dat hij het vak vult zonder te herhalen */
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
/* VERANDERING: Zet deze op 'scroll'.
Dit lost het inzoomen op, omdat hij nu kijkt naar de hoogte van de header (270px)
in plaats van de hoogte van je scherm. */
background-attachment: scroll !important;
opacity: .98;
}
.headBg.wrapper--art:before {
z-index: 1;
}
div#content {
z-index: 15;
}
.cat-ranks .category .packages-image .package.bundle-package .info {
flex: 1 !important;
}
.cat-ranks .category .packages-image .package.bundle-package .info .text {
width: 100% !important;
}
.cat-ranks .category .packages-image .package.bundle-package .button {
flex: none;
}
.product-quantity {
display: flex;
background: #124d6a29;
padding: 6px 8px;
border-radius: 8px;
gap: 5px;
margin: 10px;
}
.product-quantity .quantity-btn {
flex: 1;
border: none;
font-size:14px;
background: #124d6a;
padding: 4px 0px;
color: white !important;
border-radius: 7px;
font-weight: 700;
}
.category .packages-image .package .image {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.category .packages-image .package .info {
flex: none !important;
}
.product-quantity .quantity-btn.active {
background: #41bbff !important;
color: #0a3a52 !important;
}
.cat-ranks .category .packages-image .package.bundle-package .image {
display: none;
}
.cat-ranks .category .packages-image .package.bundle-package .info {padding: 25px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;}
.cat-ranks .category .packages-image .package.bundle-package .info .name {
font-size: 18px;
}
.category .packages-image .package.bundle-package {
order: -1;
}
.cat-ranks .category .packages-image .package.bundle-package {
order: 5;
}
.cat-ranks .category .packages-image .package:not(.bundle-package) {
background: #ff009e36;
border-color: #ff057ba3;
}
.cat-ranks .category .packages-image .package:not(.bundle-package) .info {
background: #ec7fbd4d;
}
.cat-ranks .category .packages-image .package:not(.bundle-package) .info .name,
.cat-ranks .category .packages-image .package:not(.bundle-package) .info .price {
color: #9b0060 !important;
}
.category .packages-image .package:not(.bundle-package) .btn-info {
background: #cf0080 !important;
}
.cat-ranks .category .packages-image .package.bundle-package .info .text {
height: auto;
font-size: 17px;
margin-bottom: 8px;
}
.cat-ranks .category .packages-image .package.bundle-package .info .btn {
padding: 15px;
width: 100%;
}
.cat-ranks .category .packages-image .package.bundle-package .button {
width: 100%;
}
.category .packages-image .package.grouped {
background: #00a6ff36;
border-color: #6abbe2;
}
.category .packages-image .package.grouped .info {
background: #7fcbec4d;
}
.category .packages-image .package.grouped .info .name, .category .packages-image .package.grouped .info .price {
color: #124d6a !important;
}
.category .packages-image .package.grouped .btn-info {
background: #124d6a !important;
}
.category .packages-image .package.coin-package {
background: #ff6b0036;
border-color: #ff6105a3;
}
.category .packages-image .package.coin-package .info {
background: #eca87f4d;
}
.category .packages-image .package.coin-package .info .name, .category .packages-image .package.coin-package .info .price {
color: #cf4e00 !important;
}
.category .packages-image .package.coin-package .btn-info {
background: #ff8f4c !important;
}
.category .packages-image .package.bundle-package {
background: #28a73b2b;
border-color: #149f28b5;
}
.category .packages-image .package.bundle-package .info {
background: #28a73b2b;
}
.category .packages-image .package.bundle-package .info .name, .category .packages-image .package.bundle-package .info .price {
color: #118021 !important;
}
.category .packages-image .package.bundle-package .btn-info {
background: #149928 !important;
}
/* */
.panel.panel-default.module.recent-payments {
background: #3efb552e;
border: 4px solid #05671f63 !important;
box-shadow: 0px 0px 50px #87d2eb61;
}
.home-blocks {
gap: 30px !important;
}
.home-blocks .panel .panel-heading {padding-bottom: 0px;border: none !important;}
.home-blocks .panel.recent-payments .panel-heading {
color: #05671f;
}
.top-donor .ign, .panel.panel-default.module.top-donator .panel-heading {
color: #a54e03;
}
.top-donor .amount {
color: #a54e03bd;
}
.panel.panel-default.module.top-donator {
background: #ff98003d;
border: 4px solid #ff9800ab !important;
box-shadow: 0px 0px 50px #e784af6b;
}
.body-avatar {
margin-bottom: -4px;
}
.panel.panel-default.module.top-donator {
order: -1;
}
.modal-footer .btn.btn-success {
background: #72b540 !important;
}
.top-donor {
display: flex;
align-items: center;
gap: 30px;
}
.body-avatar {
height: 100px;
overflow: hidden;
display: flex;
}
.home-blocks .panel {
margin: 0px;
}
.body-avatar img {height: 230px;max-height: none;}
.top-donator.panel .panel-body {
padding-bottom: 0px;
padding-top: 20px;
}
.module .payments {
padding-top: 5px;
}
.ign {
font-family: var(--font-other);
color: black;
font-weight: 700;
font-size: 24px;
}
.module .payments li .avatar {
width: 42px;
height: 42px;
border-radius: 8px;
overflow: hidden;
}
.home-blocks {
display: flex;
gap: 25px;
}
.home-blocks .panel {
flex: 1;
}
ul.payments {
display: flex;
flex: 1;
width: 100%;
}
ul.payments li {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 0px !important;
border: none !important;
padding: 0px !important;
}
.body .content {
width: 100% !important;
}
.home-title {
font-weight: 700;
color: black;
margin-bottom: 6px;
}
.cat-2742934 .btn-info {
background: #124d6a !important;
}
.cat-2742934 .panel .panel-heading {
color: #124d6a !important;
}
/* */
.package {
background: #55b6eb17;
}
.category .packages-image {
display: flex;
margin: 0;
gap: 30px;
flex-wrap: wrap;
}
.category .packages-image:before,.category .packages-image:after {
display: none;
}
.category .packages-image .package {
margin: 0px;
flex: 1;
min-width: 296px;
border-radius: 15px;
padding: 0px;
overflow: hidden;
border: 2px solid #e3eef4;
}
.category .packages-image .package .image {
max-width: 150px;
margin: 0 auto;
}
.category .packages-image .package .info {
background: #124d6a0f;
max-width: none;
overflow: hidden;
padding: 20px;
display: flex;
}
.category .packages-image .package .info .text .name {
color: #0d3a4f;
font-size: 16px;
}
.category .packages-image .package .info .button {
flex: 1;
display: flex;
align-items: center;
}
.category .packages-image .package .info .button .btn {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.category .packages-image .package .image {
height: 150px;
padding: 15px;
}
.category .packages-image .package {
display: flex;
flex-direction: column;
}
.category .packages-image .package .info {
flex: 1;
width: 100%;
margin-top: auto;
}
a.category-card.card.cat-2742934, a.category-card.card.cat-mob-survival {
background: #3ee9fb2e;
border: 4px solid #36abd982;
box-shadow: 0px 0px 50px #87d2eb61;
}
a.category-card.card.cat-2742934, a.category-card.card.cat-mob-survival {
color: #054f67 !important;
}
a.category-card.card.cat-2742934, a.category-card.card.cat-mob-survival {
color: #1481ae !important;
}
a.category-card.card.cat-mob-survival .text h1 {
color: #054f67 !important;
}
a.category-card.card.cat-mob-survival p {
color: #1481ae !important;
}
a.category-card.card.cat-3219061 {
background: #fb3e952e !important;
border: 4px solid #d9367a82 !important;
box-shadow: 0px 0px 50px #e784af6b !important;
}
a.category-card.card.cat-3219061 h1 {
color: #c73578 !important;
}
a.category-card.card.cat-3219061 p {
color: #c73578b8 !important;
}
.panel.panel-default.module.recent-payments {
color: green;
}
.category-card.card {
box-shadow: rgba(135, 210, 235, 0.38) 0px 0px 50px;
background: rgba(62, 233, 251, 0.18);
border-width: 4px;
border-style: solid;
border-color: rgba(54, 171, 217, 0.51);
border-image: initial;
}
.card {
text-decoration: none !important;
display: flex;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.15) 0px 6px 0px;
color: black;
min-width: 422px;
align-items: center;
flex: 1 1 0%;
background: rgb(235, 235, 235);
padding: 50px;
border-radius: 12px;
position: relative;
}
.index-wrap {
display: flex;
flex-wrap: wrap;
gap: 30px;
flex: 1;
}
.category-card.card .icon {
background: transparent;
}
.card .icon {
width: 150px;
height: 150px;
order: 5;
margin-left: auto;
background: rgba(217, 217, 217, 0.82);
border-radius: 12px;
}
.card .icon {
display: flex;
align-items: center;
overflow: hidden;
padding: 15px;
}
.card .icon img {
border-radius: 12px;
}
.category-card.card p {
font-weight: bold;
}
.card p {
color: grey !important;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px !important;
}
.category-card.card h1 {
margin-bottom: 0px;
}
.card h1 {
font-size: 48px;
}
/*=========================================== */
/*=========================================== */
/*=========================================== */
.checkout-row > a {
order: -1;
}
.checkout-row {
display: flex;
align-items: center;
gap: 20px;
}
.checkout-row .btn {
flex: 1;
}
.checkout-row > tebex-checkout#tebex-checkout {
flex: 1;
}
.checkout .btn.btn-block {
font-size: 18px;
padding: 15px;
}
div#popup-modal .modal-body {
display: flex;
gap: 25px;
}
.modal-text {
flex: 1;
}
.modal-image {
max-width: 132px;
}
.username .input-group .form-control {border-radius: 6px !important;}
.username .input-group .input-group-btn {
padding-left: 15px;
}
.form-control {
border: 2px solid #dadee091 !important;
box-shadow: none !important;
background: #edf1f3 !important;
font-weight: bold;
color: black !important;
}
.btn {
font-weight: 900;
font-family: var(--font-other);
}
.panel .panel-heading {
border-color: #efefef !important;
}
div#belowNav .btn {
gap: 12px;
}
div#belowNav .btn i {
opacity: .65;
}
div#belowNav .btn-default i {
opacity: .5;
}
div#belowNav .btn-default i.fa-solid.fa-angle-down {
margin-left: -5px;
font-size: 16px;
}
div#belowNav {
height: 100px;
background: var(--content-bg);
border-radius: var(--border-radius);
margin-bottom: 30px;
box-shadow: var(--shadow-lg);
}
div#head {
background: transparent !important;
margin-bottom: -50px;
}
.logo {
}
#head .container {
padding-bottom: 40px;
}
div#view {
background: #f4f7f9;
}
#foot {
border-color: #ededed !important;
}
.packages-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
display: grid;
gap: 30px;
flex: 1;
}
.packages-grid .package .image {
max-height: 182px;
margin: 0 auto;
}
img {
max-width: 100%;
}
.packages-grid .package .info {
text-align: center;
margin-top: auto;
width: 100%;
}
.packages-grid .package {
padding: 35px;
display: flex;
align-items: center;
flex-direction: column;
background: var(--content-bg);
border-radius: var(--border-radius);
border: none !important;
box-shadow: var(--shadow-lg);
gap: 10px;
}
div#content {
padding-bottom: 60px;
}
img {
max-height: 100%;
}
.packages-grid .name {
color: var(--text-primary);
font-weight: 800;
font-size: 22px;
}
.packages-grid .package .info .text {
font-family: var(--font-other);
line-height: 1;
margin-bottom: 10px;
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 5px;
}
.packages-grid .package .info .btn {
height: 54px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 900;
}
.btn {
border-radius: 8px !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.packages-grid .package .info .price {
font-weight: bold;
color: #79b225;
}
.btn-info {
background: #fa6ee0 !important;
}
#head .player-wrap p {
color: white !important;
font-weight: 900 !important;
letter-spacing: -1px;
}
#head .player-wrap h2 {
color: white !important;
}
#head .player-wrap .text {
text-shadow: 1px 3px 0px #00000030;
}
#head .icon {
width: 75px;
height: 75px;
background: #ffffff24;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff !important;
border-radius: 30px;
padding: 19px;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
}
.packages-grid .package .image a {
cursor: pointer;
}
/* ======================== */
#head .logo img {
max-width: 400px;
}
.package-loader.loading {
align-items: center;
justify-content: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #061d43fc;
z-index: 500;
flex-direction: column;
color: #6884b3;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
gap: 10px;
display: flex;
}
.package-loader.loading small {
color: white;
margin-top: 15px;
}
div#belowNav {
display: flex;
align-items: center;
padding: 0 30px;
}
div#belowNav .right {
margin-left: auto;
display: flex;
align-items: center;
gap: 20px;
}
div#belowNav .btn {
height: 54px;
padding: 0 20px;
display: flex;
align-items: center;
font-family: var(--font-other);
font-weight: 800;
font-size: 19px;
justify-content: center;
min-width: 100px;
text-shadow: 2px 2px 0px #00000026;
}
div#belowNav .btn-default {
background: #edf1f3;
color: #124d6a;
text-shadow: none !important;
}
.btn-success {
background: #3cafe3 !important;
}
.headBg.wrapper--art {
height: 270px;
background: linear-gradient(45deg, #82d3ff, #007fc4);
position: absolute;
top: 0;
left: 0;
right: 0;
}
.modal-header {
display: flex;
align-items: center;
padding: 25px;
color: var(--text-primary);
font-family: var(--font-other);
}
.modal-header h4 {
font-size: 24px;
font-weight: 900;
}
.modal-header .close {
order: 5;
margin-left: auto;
font-size: 30px;
line-height: 1;
}
.modal-body {
padding: 25px;
}
.modal-footer {
padding: 20px 25px;
}
.modal-footer .btn {
height: 45px;
display: flex;
align-items: center;
justify-content: center;
min-width: 120px;
background: black !important;
}
.headBg.wrapper--art:before {
top: unset !important;
bottom: 0;
background: #f4f7f9;
}
#head .container {
position: relative;
z-index: 5;
}
div#content {
position: relative;
}
.btn {
box-shadow: inset 0 -3px 0px #00000014 !important;
}
.body .btn {
text-shadow: 2px 2px 0px #00000026;
}
.btn-danger {
background: #f93b65 !important;
}
.btn-dark {
background: #124d6a !important;
color: white !important;
box-shadow: inset 0 -3px 0px #00000040 !important;
}
.redeem .form-control {
height: 42px;
border-radius: 8px !important;
}
.redeem .btn {
height: 42px;
}
.redeem .input-group-btn {
padding-left: 15px;
}
.checkout .btn.btn-success.btn-block {
font-size: 18px;
padding: 15px;
}
.dropdown-menu {
min-width: 100%;
text-align: center;
}
.dropdown-menu > li > a {
font-family: var(--font-other);
font-weight: 600 !important;
color: #6992a5 !important;
}
.dropdown-menu > li.active > a {
color: white !important;
background: #3cafe3 !important;
}
#view.page--Login #content .container {
max-width: 680px;
}
#view.page--Login #content div#belowNav {
display: none !important;
}
.body.login {
text-align: center;
}
.body.login .panel-heading.login-header {
justify-content: center;
}
.page--Login #head .container .left, .page--Login #head .container .right {
display: none !important;
}
.page--Login .home-title {
background: #e2e6e7 !important;
border-radius: 7px !important;
box-shadow: inset 0px -2px 0px #00000014;
padding: 18px;
font-size: 13px;
font-weight: bold;
color: grey;
margin-bottom: 12px;
}
.page--Login .username {
margin: 15px 0px;
}
.login button.btn.btn-success.btn-lg.btn-block {
padding: 18px !important;
}
.nav-tabs {padding: 10px 0px;display: flex;align-items: center;justify-content: center;gap: 10px !important;}
.nav-tabs > li {
margin: 0px !important;
}
.nav-tabs > li > a {
border: none !important;
background: #edf1f3 !important;
color: #124d6a !important;
border-radius: 8px !important;
font-weight: 900;
min-width: 187px;
padding: 12px !important;
box-shadow: inset 0 -3px 0px #00000014 !important;
}
.nav-tabs > li.active > a {
background: #98c167 !important;
color: white !important;
text-shadow: 2px 2px 0px #00000026;
}
.panel .panel-heading .text-right {
margin-left: auto;
}
.nav-tabs:before,.nav-tabs:after {
display: none;
}
p.alert-box {
background: #d12861 !important;
border-radius: 7px !important;
box-shadow: inset 0px -2px 0px #00000014;
padding: 18px;
font-size: 13px;
font-weight: bold;
color: white;
margin-bottom: 12px;
}
#support-modal .buttons {
display: flex;
gap: 15px;
}
#support-modal .buttons .btn {
padding: 12px 20px !important;
margin-top: 12px;
}
#support-modal .modal-section h1 {
font-size: 18px;
margin-top: 0px;
font-weight: 600;
}
#support-modal .modal-sections {
display: flex;
flex-direction: column;
gap: 20px;
}
#support-modal .buttons .btn i {
margin-right: 5px;
opacity: .65;
}
#support-modal .btn-primary {
background: #3cafe3 !important;
}
.modal-section:last-child {
border-top: 2px solid whitesmoke !important;
padding-top: 20px;
}
/* ================================= */
@media only screen and (max-width: 768px) {
.checkout-row {
flex-direction: column;
}
.checkout-row > tebex-checkout#tebex-checkout {
width: 100%;
}
.packages-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
#head .logo img {
max-width: 180px;
}
#head .container {
padding-bottom: 0px !important;
}
#head {
margin-bottom: 0px !important;
padding: 30px 0px !important;
}
.headBg.wrapper--art:before {
display: none;
}
.headBg.wrapper--art {
height: 200px;
}
div#belowNav .left, div#belowNav .right {
flex: 1;
}
div#belowNav {
gap: 20px;
}
div#belowNav .right a {
flex: 1;
}
}
div#belowNav .left {
display: flex;
align-items: center;
gap: 20px;
}
#support-modal .buttons .btn {
font-weight: normal !important;
}
a.home-icon {
height: 54px;
width: 54px;
display: flex;
align-items: center;
font-family: var(--font-other);
font-weight: 800;
font-size: 19px;
justify-content: center;
text-shadow: 2px 2px 0px #00000026;
background: #edf1f3;
border-radius: 8px;
color: #124d6a;
box-shadow: inset 0 -3px 0px #00000014 !important;
}
a.home-icon {
color: black !important;
}
/* Proceed to checkout knop lichtgroen maken */
.checkout-row tebex-checkout .btn.btn-success.btn-block,
.checkout-row .btn.btn-success.btn-block,
.checkout .btn.btn-success.btn-block {
background: #98c167 !important;
color: #fff !important;
box-shadow: inset 0 -3px 0px #00000026 !important;
}
/* ==========================================================
POPPYMC COLOUR + MOTION REFRESH
Keeps the existing layout and Tebex behaviour intact.
========================================================== */
:root {
--page-bg: #f7faf6;
--content-bg: rgba(255, 255, 255, .96);
--primary: #d83f78;
--accent: #43b7d5;
--border-color: #e3eee8;
--text-primary: #173f50;
--text-muted: #667b82;
--poppy-pink: #d83f78;
--poppy-pink-light: #ff85ad;
--poppy-coral: #f47d61;
--poppy-gold: #f3b943;
--poppy-leaf: #70ad68;
--poppy-sky: #58bfd8;
--poppy-navy: #174962;
--poppy-cream: #fff9ec;
--shadow-sm: 0 10px 24px rgba(32, 85, 81, .08);
--shadow-lg: 0 20px 48px rgba(32, 85, 81, .13);
}
/* Soft colour in the page background, without changing the layout. */
#view {
background:
radial-gradient(circle at 8% 32%, rgba(255, 133, 173, .13), transparent 24rem),
radial-gradient(circle at 92% 56%, rgba(88, 191, 216, .14), transparent 26rem),
linear-gradient(180deg, #f5f9f7 0%, #f9fbf8 52%, #fffaf2 100%) !important;
}
.headBg.wrapper--art {
overflow: hidden;
}
.poppymc .headBg::after {
transform-origin: 50% 50%;
animation: poppy-banner-breathe 14s ease-in-out infinite alternate;
will-change: transform;
}
#head .logo img {
filter: drop-shadow(0 9px 8px rgba(68, 36, 56, .24));
animation: poppy-logo-float 5s ease-in-out infinite;
}
#head .player-wrap,
#head .player-wrap .icon,
#head .player-wrap .text {
transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
/* Navigation becomes a light glass card over the illustrated banner. */
div#belowNav {
background: rgba(255, 255, 255, .94) !important;
border: 1px solid rgba(255, 255, 255, .72);
box-shadow: 0 20px 45px rgba(35, 83, 81, .16) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
animation: poppy-nav-in .55s cubic-bezier(.2, .8, .2, 1) both;
}
div#belowNav .btn,
a.home-icon {
transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}
div#belowNav .btn-success {
background: linear-gradient(135deg, #e34a67, #c92f65) !important;
}
div#belowNav .btn-dark {
background: linear-gradient(135deg, #205d77, #123f57) !important;
}
/* Keep the currency menu above animated cards and fully accessible. */
div#belowNav {
position: relative;
z-index: 1000;
overflow: visible !important;
}
div#belowNav .dropdown {
position: relative;
z-index: 1001;
}
div#belowNav .dropdown-menu {
top: calc(100% + 8px);
z-index: 1100;
max-height: min(420px, 65vh);
overflow-x: hidden;
overflow-y: auto;
border: 1px solid rgba(23, 73, 98, .12);
border-radius: 8px;
box-shadow: 0 16px 30px rgba(23, 73, 98, .18);
}
/* Panels get definition and a small, colourful heading marker. */
.panel.panel-default {
border: 1px solid rgba(37, 91, 85, .08) !important;
box-shadow: var(--shadow-sm);
}
.body > .panel.panel-default,
.body > .content > .panel.panel-default,
.full-width > .panel.panel-default {
overflow: hidden;
}
.panel .panel-heading {
color: var(--poppy-navy);
position: relative;
}
.body > .panel > .panel-heading::before,
.content > .panel > .panel-heading::before,
.full-width > .panel > .panel-heading::before {
content: "";
width: 6px;
height: 24px;
margin-right: 12px;
border-radius: 999px;
background: linear-gradient(180deg, var(--poppy-pink-light), var(--poppy-coral));
box-shadow: 0 3px 10px rgba(216, 63, 120, .25);
}
/* Homepage category cards keep their size and position, but feel interactive. */
.category-card.card {
isolation: isolate;
overflow: hidden;
transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease, filter .28s ease;
animation: poppy-card-in .58s cubic-bezier(.2, .8, .2, 1) both;
}
.category-card.card:nth-child(2) { animation-delay: .08s; }
.category-card.card:nth-child(3) { animation-delay: .16s; }
.category-card.card:nth-child(4) { animation-delay: .24s; }
.category-card.card::before {
content: "";
position: absolute;
z-index: -1;
width: 210px;
height: 210px;
right: -80px;
bottom: -110px;
border-radius: 50%;
background: rgba(255, 255, 255, .42);
transform: scale(.8);
transition: transform .35s ease;
pointer-events: none;
}
.category-card.card .icon img {
filter: drop-shadow(0 8px 8px rgba(25, 68, 73, .16));
transition: transform .32s cubic-bezier(.2, .8, .2, 1), filter .32s ease;
}
/* Product cards: lift, image movement and richer shadows only. */
.category .packages-image .package,
.packages-grid .package,
.store-product-tiered {
box-shadow: 0 12px 28px rgba(24, 70, 73, .09);
transition: transform .27s cubic-bezier(.2, .8, .2, 1), box-shadow .27s ease, filter .27s ease;
animation: poppy-card-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
.category .packages-image .package:nth-child(2),
.packages-grid .package:nth-child(2),
.store-product-tiered:nth-child(2) { animation-delay: .06s; }
.category .packages-image .package:nth-child(3),
.packages-grid .package:nth-child(3),
.store-product-tiered:nth-child(3) { animation-delay: .12s; }
.category .packages-image .package:nth-child(4),
.packages-grid .package:nth-child(4),
.store-product-tiered:nth-child(4) { animation-delay: .18s; }
.category .packages-image .package:nth-child(n+5),
.packages-grid .package:nth-child(n+5),
.store-product-tiered:nth-child(n+5) { animation-delay: .24s; }
.category .packages-image .package .image img,
.packages-grid .package .image img,
.store-product-tiered > img.image {
filter: drop-shadow(0 9px 8px rgba(24, 70, 73, .16));
transition: transform .3s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}
.product-quantity .quantity-btn {
cursor: pointer;
transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.product-quantity .quantity-btn.active {
box-shadow: 0 4px 10px rgba(31, 133, 178, .25);
}
/* Ranks: one calm blush colour instead of the default blue-grey cards. */
.cat-ranks > .panel.panel-default,
.cat-3219061 > .panel.panel-default {
background: linear-gradient(180deg, #ffffff 0%, #fff8fb 100%) !important;
border-color: rgba(216, 63, 120, .16) !important;
}
.cat-ranks > .panel > .panel-heading,
.cat-3219061 > .panel > .panel-heading {
background: linear-gradient(90deg, rgba(255, 133, 173, .13), transparent 62%) !important;
color: #71334e !important;
}
.cat-ranks .category .packages-image .package,
.cat-3219061 .category .packages-image .package {
background: #fff1f6 !important;
border-color: #efabc3 !important;
}
.cat-ranks .category .packages-image .package .info,
.cat-3219061 .category .packages-image .package .info {
background: #f8dce7 !important;
}
.cat-ranks .category .packages-image .package .info .name,
.cat-ranks .category .packages-image .package .info .price,
.cat-3219061 .category .packages-image .package .info .name,
.cat-3219061 .category .packages-image .package .info .price {
color: #79304f !important;
}
/* Individual rank palettes, assigned by package name in category.html. */
.cat-ranks .rank-violet,
.cat-3219061 .rank-violet {
--rank-card: #f6fbe7;
--rank-info: #e5f1be;
--rank-border: #b8d66a;
--rank-text: #536c1d;
--rank-button: #91b932;
}
.cat-ranks .rank-tulip,
.cat-3219061 .rank-tulip {
--rank-card: #fff5e9;
--rank-info: #ffe1bf;
--rank-border: #f1ad68;
--rank-text: #87501d;
--rank-button: #ed8a36;
}
.cat-ranks .rank-orchid,
.cat-3219061 .rank-orchid {
--rank-card: #eff9fe;
--rank-info: #d8eef9;
--rank-border: #82c6e4;
--rank-text: #28617b;
--rank-button: #50add2;
}
.cat-ranks .rank-rose,
.cat-3219061 .rank-rose {
--rank-card: #fff0f0;
--rank-info: #f8d5d7;
--rank-border: #e98e94;
--rank-text: #8b383e;
--rank-button: #d85d65;
}
.cat-ranks .rank-plus,
.cat-3219061 .rank-plus,
.cat-ranks .rank-powerful,
.cat-3219061 .rank-powerful {
--rank-card: #fff0fa;
--rank-info: #f5d4ea;
--rank-border: #e591c7;
--rank-text: #81365f;
--rank-button: #d4479a;
}
/* Plus is the featured rank; Powerful keeps the calmer pink palette. */
.cat-ranks .category .packages-image .package.rank-plus,
.cat-3219061 .category .packages-image .package.rank-plus {
--rank-card: linear-gradient(135deg, #fff1fb 0%, #ffe0f3 100%);
--rank-info: linear-gradient(135deg, #f8d7eb 0%, #f2c3df 100%);
--rank-border: #df62aa;
--rank-text: #7d2458;
--rank-button: linear-gradient(135deg, #e65aaa, #c92785);
position: relative;
border-width: 3px !important;
box-shadow: 0 0 0 4px rgba(223, 98, 170, .12), 0 20px 42px rgba(178, 49, 123, .2) !important;
}
.cat-ranks .category .packages-image .package.rank-plus::before,
.cat-3219061 .category .packages-image .package.rank-plus::before {
content: "POPULAR";
position: absolute;
z-index: 4;
top: 14px;
right: 14px;
padding: 7px 11px;
border-radius: 999px;
background: linear-gradient(135deg, #ed6bb6, #ce2d89);
color: #fff;
font-family: var(--font-other);
font-size: 11px;
font-weight: 900;
letter-spacing: .7px;
line-height: 1;
box-shadow: 0 7px 16px rgba(178, 49, 123, .24);
}
.cat-ranks .category .packages-image .package.rank-plus .btn-info,
.cat-3219061 .category .packages-image .package.rank-plus .btn-info {
box-shadow: inset 0 -3px 0 rgba(101, 17, 67, .2), 0 7px 16px rgba(178, 49, 123, .2) !important;
}
.cat-ranks .category .packages-image .package[class*="rank-"],
.cat-3219061 .category .packages-image .package[class*="rank-"] {
background: var(--rank-card) !important;
border-color: var(--rank-border) !important;
}
.cat-ranks .category .packages-image .package[class*="rank-"] .info,
.cat-3219061 .category .packages-image .package[class*="rank-"] .info {
background: var(--rank-info) !important;
}
.cat-ranks .category .packages-image .package[class*="rank-"] .info .name,
.cat-ranks .category .packages-image .package[class*="rank-"] .info .price,
.cat-3219061 .category .packages-image .package[class*="rank-"] .info .name,
.cat-3219061 .category .packages-image .package[class*="rank-"] .info .price {
color: var(--rank-text) !important;
}
.cat-ranks .category .packages-image .package[class*="rank-"] .btn-info,
.cat-3219061 .category .packages-image .package[class*="rank-"] .btn-info {
background: var(--rank-button) !important;
}
/* Survival: the same soft heading fade, in fresh mint. */
.cat-mob-survival > .panel.panel-default,
.cat-2742934 > .panel.panel-default {
background: linear-gradient(180deg, #ffffff 0%, #f8fdf9 100%) !important;
border-color: rgba(79, 156, 103, .18) !important;
}
.cat-mob-survival > .panel > .panel-heading,
.cat-2742934 > .panel > .panel-heading {
background: linear-gradient(90deg, rgba(143, 211, 163, .2), transparent 62%) !important;
color: #285f56 !important;
}
.cat-mob-survival > .panel > .panel-heading::before,
.cat-2742934 > .panel > .panel-heading::before {
background: linear-gradient(180deg, #82c990, #58bfd8) !important;
box-shadow: 0 3px 10px rgba(76, 157, 102, .22);
}
/* Buttons get a quick light sweep while retaining each category colour. */
.btn {
position: relative;
overflow: hidden;
transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
.btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, .34) 48%, transparent 68%);
transform: translateX(-145%);
transition: transform .5s ease;
pointer-events: none;
}
.btn:active,
.product-quantity .quantity-btn:active {
transform: translateY(1px) scale(.98) !important;
}
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
.form-control:focus-visible {
outline: 3px solid rgba(67, 183, 213, .48) !important;
outline-offset: 3px;
}
/* Colourful supporting modules. */
.home-blocks .panel {
transition: transform .25s ease, box-shadow .25s ease;
animation: poppy-card-in .55s .18s cubic-bezier(.2, .8, .2, 1) both;
}
.panel.panel-default.module.top-donator {
background: linear-gradient(135deg, rgba(255, 235, 186, .78), rgba(255, 203, 138, .56)) !important;
border-color: rgba(235, 151, 39, .56) !important;
}
.panel.panel-default.module.recent-payments {
background: linear-gradient(135deg, rgba(218, 248, 220, .82), rgba(185, 234, 205, .58)) !important;
border-color: rgba(76, 157, 83, .42) !important;
}
.module .payments li .avatar {
box-shadow: 0 5px 12px rgba(24, 70, 73, .18);
transition: transform .2s ease, box-shadow .2s ease;
}
.module .payments li:nth-child(2) .avatar { animation-delay: -.7s; }
.module .payments li:nth-child(3) .avatar { animation-delay: -1.4s; }
.module .payments li:nth-child(4) .avatar { animation-delay: -2.1s; }
.module .payments li:nth-child(5) .avatar { animation-delay: -2.8s; }
.home-text {
padding: 14px 16px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(88, 191, 216, .07), rgba(255, 133, 173, .06));
}
.home-title {
color: var(--poppy-navy);
}
/* Checkout, tables, inputs and popups receive the same polish. */
.table-hover > tbody > tr,
.form-control,
.modal-dialog {
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .25s ease;
}
.table-hover > tbody > tr:hover {
background: rgba(88, 191, 216, .09) !important;
}
.form-control:focus {
background: #fff !important;
border-color: rgba(67, 183, 213, .68) !important;
box-shadow: 0 0 0 4px rgba(67, 183, 213, .12) !important;
}
.modal.in .modal-dialog {
animation: poppy-modal-in .32s cubic-bezier(.2, .8, .2, 1) both;
}
#sale {
background: linear-gradient(120deg, var(--poppy-pink), var(--poppy-coral), var(--poppy-gold));
background-size: 180% 180%;
animation: poppy-gradient 8s ease infinite;
}
#foot {
border-image: linear-gradient(90deg, var(--poppy-pink-light), var(--poppy-gold), var(--poppy-leaf), var(--poppy-sky)) 1 !important;
}
@media (hover: hover) and (pointer: fine) {
#head .player-wrap:hover .icon {
transform: translateY(-3px) rotate(-3deg);
background: rgba(255, 255, 255, .34);
box-shadow: 0 12px 24px rgba(32, 73, 71, .16);
}
#head .right .player-wrap:hover .icon {
transform: translateY(-3px) rotate(3deg);
}
div#belowNav .btn:hover,
a.home-icon:hover {
transform: translateY(-2px);
filter: saturate(1.12) brightness(1.03);
box-shadow: 0 8px 18px rgba(31, 75, 77, .16) !important;
}
.category-card.card:hover {
transform: translateY(-8px) rotate(-.25deg);
box-shadow: 0 24px 48px rgba(32, 85, 81, .18) !important;
filter: saturate(1.06);
}
.category-card.card:nth-child(even):hover {
transform: translateY(-8px) rotate(.25deg);
}
.category-card.card:hover::before {
transform: scale(1.35);
}
.category-card.card:hover .icon img {
transform: translateY(-5px) scale(1.07) rotate(2deg);
filter: drop-shadow(0 14px 12px rgba(25, 68, 73, .22));
}
.category .packages-image .package:hover,
.packages-grid .package:hover,
.store-product-tiered:hover {
transform: translateY(-7px);
box-shadow: 0 22px 42px rgba(24, 70, 73, .16);
filter: saturate(1.04);
}
.category .packages-image .package:hover .image img,
.packages-grid .package:hover .image img,
.store-product-tiered:hover > img.image {
transform: translateY(-5px) scale(1.06) rotate(1.5deg);
filter: drop-shadow(0 15px 12px rgba(24, 70, 73, .22));
}
.btn:hover::after {
transform: translateX(145%);
}
.btn:hover {
transform: translateY(-2px);
filter: saturate(1.12) brightness(1.04);
}
.product-quantity .quantity-btn:hover {
transform: translateY(-1px);
}
.home-blocks .panel:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.module .payments li .avatar:hover {
transform: translateY(-5px) scale(1.08) rotate(3deg);
box-shadow: 0 10px 18px rgba(24, 70, 73, .24);
}
}
@keyframes poppy-card-in {
from { opacity: 0; transform: translateY(16px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes poppy-nav-in {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes poppy-modal-in {
from { opacity: 0; transform: translateY(18px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes poppy-logo-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes poppy-banner-breathe {
from { transform: scale(1); }
to { transform: scale(1.035); }
}
@keyframes poppy-gradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Keep touch devices compact and avoid expensive banner scaling on mobile. */
@media only screen and (max-width: 768px) {
.poppymc .headBg::after {
animation: none;
}
.category-card.card,
.category .packages-image .package,
.packages-grid .package {
animation-duration: .38s;
}
.home-text {
padding: 12px;
}
}
/* Accessibility: visitors who prefer less motion get a still interface. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
.category-card.card,
.category .packages-image .package,
.packages-grid .package,
.store-product-tiered,
#head .logo img,
.poppymc .headBg::after {
transform: none !important;
}
}