now (was a JS-clickable ) — undo the
browser's default anchor styling so it still looks like a card. */
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.game-selector .card:hover,
.game-selector .card:focus-visible {
color: inherit;
text-decoration: none;
}
.game-selector .card .card-img {
width: auto;
height: 138px !important;
overflow: hidden;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.game-selector .card .card-img .card-img-top {
transition: 0.3s ease-in-out;
height: 138px;
width: 100%;
object-fit: cover;
}
.game-selector .card:hover .card-img-top {
transform: scale(1.1) rotate(2deg);
}
.game-selector .ribbon {
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
top: -10px;
right: -10px;
z-index: 2;
}
.game-selector .ribbon span {
position: absolute;
display: block;
width: 200px;
padding: 10px 0;
background: var(--gradient-primary);
color: var(--white);
text-align: center;
font-weight: bold;
font-size: 10px;
transform: rotate(45deg);
top: 24px;
right: -60px;
}
.game-selector .card h4 {
color: var(--white);
font-weight: 600;
font-size: 20px;
}
.game-selector .card p {
font-size: 14px;
font-weight: 300;
}
.game-selector .card p b {
color: var(--white);
font-weight: 600;
}
/* "See All Games" card at the end of the homepage swiper — no card-img, so
it needs its own height/centering instead of stacking image + body. */
.game-selector .card.card-see-all {
height: 100%;
min-height: 220px;
background: var(--gradient-primary-soft);
border-color: transparent;
}
.game-selector .card.card-see-all svg {
color: var(--blue);
}
.game-selector .card.card-see-all:hover {
background: var(--gradient-primary-wash);
}
.game-selector .moving-svg {
position: relative;
animation: moveLeftRight 4s ease-in-out infinite;
}
@keyframes moveLeftRight {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-20px);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(20px);
}
100% {
transform: translateX(0);
}
}
.game-selector .card-location img {
width: 32px;
height: 32px;
}
.game-selector .card-location:hover {
background-color: var(--background-rgba);
}
.game-selector .btn-primary {
background: var(--gradient-primary);
border: 1px solid transparent;
color: var(--white);
font-weight: 500;
padding: 6px 24px;
font-size: 15px;
}
/* Map */
.map {
position: relative;
}
.map-canvas {
border-radius: 16px;
overflow: hidden;
background: var(--dark);
}
.map-pin {
position: absolute;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.map-pin__ping,
.map-pin__dot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.map-pin__ping {
width: 20px;
height: 20px;
background: var(--blue);
opacity: 0.6;
animation: map-pin-pulse 1.8s ease-out infinite;
}
.map-pin__dot {
width: 8px;
height: 8px;
background: var(--blue);
border: 1px solid #fff;
}
.map-pin--good .map-pin__dot,
.map-pin--good .map-pin__ping {
background: #1bd54a;
}
.map-pin--bad .map-pin__dot,
.map-pin--bad .map-pin__ping {
background: #ff4764;
}
.map-pin--testing .map-pin__ping {
animation-duration: 0.8s;
}
@keyframes map-pin-pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
100% {
transform: translate(-50%, -50%) scale(2.6);
opacity: 0;
}
}
.ping-sidebar {
background: var(--dark);
border-radius: 16px;
padding: 1rem;
height: 100%;
overflow-y: auto;
}
.ping-region {
margin-bottom: 1rem;
}
.ping-region:last-child {
margin-bottom: 0;
}
.ping-region__title {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--gray);
margin-bottom: 0.5rem;
}
.ping-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.4rem 0.5rem;
border-radius: 8px;
transition: background-color 0.2s ease;
}
.ping-row--highlight {
background-color: rgba(255, 255, 255, 0.08);
}
.ping-row__info {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.ping-row__info img {
width: 20px;
height: 20px;
border-radius: 50%;
flex-shrink: 0;
}
.ping-row__text {
min-width: 0;
line-height: 1.2;
}
.ping-row__country {
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ping-row__city {
font-size: 0.75rem;
color: var(--gray);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ping-row__value {
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
}
.ping-row__value.ping-na {
color: var(--gray);
}
.ping-row__value.ping-good {
color: #1bd54a;
}
.ping-row__value.ping-ok {
color: #f97139;
}
.ping-row__value.ping-bad {
color: #ff4764;
}
.ping-row__value.ping-pending {
color: var(--gray);
}
/* Panel */
.panel {
background: var(--dark);
position: relative;
z-index: 1;
overflow: hidden;
clear: both;
}
.panel:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
background: var(--gradient-primary-wash), url("../images/panel-bg.svg") no-repeat;
background-size: cover, cover;
z-index: -1;
}
.panel .laptop {
position: relative;
margin: auto;
width: 100% !important;
}
.panel .laptop .laptop__screen {
position: relative;
z-index: 1;
padding: 3%;
border-radius: 2rem;
background: var(--gray);
background-image: linear-gradient(
to bottom,
var(--background),
var(--background)
);
box-shadow: 0 0.1rem 0 var(--light);
border: 2px solid var(--light-dark);
}
.panel .laptop .laptop__screen img {
display: block;
max-width: 100%;
height: auto;
aspect-ratio: attr(width) / attr(height);
background: var(--light);
}
.panel .laptop .laptop__bottom {
position: relative;
z-index: 1;
margin-right: -4%;
margin-left: -4%;
height: 0.7rem;
background: #e9eff5;
background-image: linear-gradient(
to right,
#d2dde9 0,
#f9fcff 15%,
#e5ebf2 40%,
#e5ebf2 60%,
#f9fcff 85%,
#d2dde9 100%
);
}
.panel .laptop .laptop__bottom::before {
display: block;
margin: 0 auto;
width: 20%;
height: 0.7rem;
border-radius: 0 0 0.2rem 0.2rem;
background: #f6f9fc;
background-image: linear-gradient(
to right,
#c3cfdb 0,
#f6f9fc 10%,
#f6f9fc 90%,
#c3cfdb 100%
);
content: " ";
}
.panel .laptop .laptop__under {
position: absolute;
top: 100%;
left: 25%;
display: block;
width: 50%;
height: 1.5rem;
background: #e2e8f0;
background-image: linear-gradient(to bottom, #e2e8f0, #bec7d1);
}
.panel .laptop .laptop__under::after,
.panel .laptop .laptop__under::before {
position: absolute;
top: 0;
right: 100%;
bottom: 0;
display: block;
width: 50%;
border-bottom-left-radius: 100%;
background: inherit;
content: " ";
}
.panel .laptop .laptop__under::after {
right: auto;
left: 100%;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 0;
}
.panel .panel_content h2 {
color: var(--white);
font-weight: 600;
}
.panel .panel_content ul {
list-style: none;
padding: 0;
}
.panel .panel_content ul li {
line-height: 36px;
font-size: 17px;
}
.panel .panel_content ul li svg {
fill: var(--blue);
}
@media (max-width: 992px) {
.panel:before {
height: 280px;
}
}
/* Review */
.review .card {
border-top: 3px solid var(--blue);
background: var(--dark);
}
.review .card .reviews_star {
display: flex;
position: relative;
top: -10px;
}
.review .card .stars .trustpilot-star {
fill: var(--blue);
border-radius: 4px;
}
.review .card .user {
fill: var(--blue);
}
.review .card .reviews_star img:first-child {
margin-left: 0 !important;
}
.review .card h3 {
color: var(--white);
font-size: 18px;
}
.review .card p {
font-size: 14px;
}
.review .card a {
float: right;
text-decoration: none;
color: var(--white);
}
.review .card a i {
color: var(--blue);
}
.review .reviews_footer h3 {
color: var(--light);
font-size: 18px;
font-weight: 400;
}
.review .reviews_footer svg {
width: 100%;
height: 24px;
}
/* Discord Label */
.discord-label {
background: var(--gradient-primary);
}
.discord-label p {
color: var(--white);
font-weight: 500;
}
.discord-label .btn {
font-weight: 600;
color: var(--background);
font-size: 15px;
padding: 8px 14px;
}
.discord-label .btn:hover,
.discord-label .btn:active,
.discord-label .btn:focus {
background-color: var(--white);
border: 1px solid var(--white);
color: var(--background);
}
.discord-label .btn svg {
width: 20px;
height: 20px;
fill: var(--background);
}
@media (max-width: 992px) {
.discord-label p {
text-align: center;
margin-bottom: 10px !important;
}
.discord-label .col-lg-2 {
text-align: center;
}
}
footer {
background: radial-gradient(
farthest-corner at bottom left,
var(--light-dark),
var(--dark),
var(--dark)
);
}
footer h3 {
font-weight: 500;
color: var(--white);
display: flex;
align-items: center;
gap: 0.5rem;
}
footer h3 img.img-fluid {
height: 56px !important;
width: auto;
}
footer h3 span {
font-weight: 800;
}
footer h4 {
color: var(--white);
font-size: 18px;
font-weight: 500;
position: relative;
margin-bottom: 20px;
}
footer h4::before {
content: "";
position: absolute;
width: 10%;
height: 2px;
border-radius: 50px;
display: block;
left: 0;
right: 0;
bottom: -8px;
background: var(--gradient-primary);
}
footer ul {
padding: 0;
list-style: none;
}
footer ul li {
line-height: 36px;
}
footer ul a {
color: var(--light);
text-decoration: none;
position: relative;
}
footer ul a svg {
width: 20px;
height: 20px;
}
footer ul a::before {
content: "";
position: absolute;
width: 0;
height: 2px;
border-radius: 50px;
display: block;
left: 0;
right: 0;
bottom: -6px;
background: var(--white);
transition: width 0.2s ease-in-out;
}
footer ul a:hover::before {
width: 40%;
}
footer ul a:hover {
color: var(--white);
}
@media (max-width: 768px) {
footer {
text-align: center;
}
footer h4::before {
margin-left: auto;
margin-right: auto;
}
}
/* DDoS */
.ddos {
clear: both;
overflow: hidden;
}
.ddos .ddos_content h2 {
color: var(--white);
font-weight: 600;
font-size: 26px;
}
.ddos .ddos_content p {
font-size: 15px;
}
.circle {
fill: none;
stroke: #2f334b;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.dot {
fill: #0195f4;
stroke: #0195f4;
stroke-width: 4;
transition: opacity 0.3s ease, filter 0.3s ease;
}
.dot.blink {
animation: blink 1s infinite;
filter: drop-shadow(0 0 10px #0195f4);
}
.line {
fill: none;
stroke: #2f334b;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.triangle {
fill: rgba(1, 149, 244, 0.4);
stroke: #0195f4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
stroke-width: 3;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@media (max-width: 992px) {
.ddos svg {
margin-bottom: 20px;
}
}
/*
@media (max-width: 768px) {
}
*/
/* Minecraft latter */
#swicherPlans {
margin-bottom: 6rem !important;
}
#swicherPlans .nav-item .nav-link {
background: transparent;
border: 1px solid var(--blue);
color: var(--white);
padding: 6px 24px;
font-size: 15px;
font-weight: 600;
border-radius: 10px;
margin: 0 4px;
}
#swicherPlans .nav-item .active {
background: var(--gradient-primary);
border-color: transparent;
}
#servertypes img {
max-width: none;
text-align: center;
margin: 0 auto;
height: 50px;
width: unset;
}
/* Plans Card */
.plans .card {
position: relative;
border-radius: 16px;
overflow: hidden;
z-index: 1;
background: linear-gradient(180deg, var(--light-dark) 0%, var(--dark) 65%);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.plans .card:hover {
transform: translateY(-6px);
border-color: rgba(167, 94, 234, 0.4);
box-shadow: 0 18px 40px rgba(1, 149, 244, 0.14), 0 8px 24px rgba(167, 94, 234, 0.14);
}
.plans .card::before {
content: "";
position: absolute;
left: 0;
top: 0;
background: url("../images/waves.svg") no-repeat;
transform: rotate(180deg) translateY(86%);
width: 100%;
height: 100%;
z-index: -1;
}
.plans .card::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--blue), var(--purple));
}
.plans .card .card-body {
padding: 2rem 1.75rem;
}
.plans .card .card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 86px;
height: 86px;
border-radius: 50%;
background: radial-gradient(circle, rgba(1, 149, 244, 0.2) 0%, rgba(167, 94, 234, 0.12) 55%, rgba(167, 94, 234, 0.02) 72%);
}
.plans .card .card-icon svg {
width: auto;
height: 56px;
}
.plans .card .plan-title {
color: var(--white);
font-weight: 700;
font-size: 26px;
text-transform: uppercase;
}
.plans .card .plan-desc {
display: inline-block;
color: var(--blue);
background: var(--gradient-primary-soft);
border-radius: 999px;
padding: 0.15rem 0.85rem;
font-weight: 500;
font-size: 14px;
letter-spacing: -0.02rem;
}
.plans .card ul.list-unstyled li {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.4rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.plans .card ul.list-unstyled li:last-child {
border-bottom: none;
}
.plans .card ul li svg {
fill: var(--blue);
flex-shrink: 0;
}
/* Plan spec list — label/value rows (Minecraft, Palworld, ARK, RAM calculator) */
.plans .card ul.spec-list {
text-align: left;
}
.plans .card ul.spec-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: 14px;
}
.plans .card ul.spec-list li:last-child {
border-bottom: none;
}
.plans .card ul.spec-list .spec-label {
color: var(--gray);
font-weight: 500;
}
.plans .card ul.spec-list .spec-value {
color: var(--white);
font-weight: 700;
text-align: right;
}
.plans .card h2.price {
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.plans .card .btn-primary {
background: var(--gradient-primary);
border: 1px solid transparent;
color: var(--white);
font-weight: 600;
font-size: 15px;
padding: 8px 32px;
border-radius: 10px;
display: block;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
}
.plans .card .btn-primary:hover {
background: var(--gradient-primary-hover);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(167, 94, 234, 0.35);
}
/* Discord Plans and Section */
.plans .card-discord {
z-index: 1 !important;
position: relative !important;
border-radius: 12px !important;
overflow: visible !important;
}
.plans .card-discord-popular::before {
content: "" !important;
position: absolute !important;
top: -54px !important;
left: -34px !important;
background: url("../images/discord1.svg") no-repeat !important;
width: 172px !important;
height: 186px !important;
z-index: 1 !important;
transform: none !important;
}
.plans .card-discord-popular .ribbon {
width: 150px !important;
height: 150px !important;
overflow: hidden !important;
position: absolute !important;
top: 0px !important;
left: 0px !important;
z-index: 2 !important;
}
.plans .card-discord-popular .ribbon span {
position: absolute !important;
display: block !important;
width: 160px !important;
padding: 0px !important;
background-color: var(--discord-color) !important;
color: var(--white) !important;
text-align: center !important;
font-weight: 700 !important;
font-size: 10px !important;
text-transform: uppercase !important;
transform: rotate(-45deg) !important;
top: 20px !important;
left: -40px !important;
}
.plans .card-discord h4 {
color: var(--discord-color);
font-weight: 600;
font-size: 18px;
text-transform: uppercase;
}
.plans .card-discord h3 {
color: var(--white);
font-weight: 700;
font-size: 32px;
}
.plans .card,
.plans .card-discord ul li {
line-height: 42px;
font-weight: 400;
}
.plans .card-discord ul li svg {
fill: var(--discord-color);
}
.plans .card h2.price,
.plans .card-discord h2 {
color: var(--white);
font-weight: 700;
font-size: 34px;
}
.plans .card h2.price span,
.plans .card-discord h2 span {
color: var(--light);
font-size: 18px;
font-weight: 400;
letter-spacing: -0.06rem;
font-style: italic;
}
.plans .card-discord .btn-discord {
background-color: var(--discord-color);
border: 1px solid var(--discord-color);
color: var(--white);
font-weight: 600;
font-size: 15px;
padding: 8px 32px;
display: block;
}
/* RAM Calculator */
.ram-calculator {
position: relative;
overflow: hidden;
}
.ram-calculator::before,
.ram-calculator::after {
content: "";
position: absolute;
width: 480px;
height: 480px;
border-radius: 50%;
filter: blur(100px);
z-index: 0;
pointer-events: none;
}
.ram-calculator::before {
background: rgba(1, 149, 244, 0.16);
top: -200px;
left: -140px;
}
.ram-calculator::after {
background: rgba(32, 191, 108, 0.1);
bottom: -220px;
right: -160px;
}
.ram-calculator .container {
position: relative;
z-index: 1;
}
.calc-panel,
.calc-result {
position: relative;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(180deg, var(--light-dark) 0%, var(--dark) 65%);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
padding: 2rem;
height: 100%;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.calc-panel:hover,
.calc-result:hover {
transform: translateY(-4px);
border-color: rgba(1, 149, 244, 0.3);
box-shadow: 0 18px 40px rgba(1, 149, 244, 0.12);
}
.calc-box-label {
color: var(--gray);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05rem;
}
.calc-panel::before,
.calc-result::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--blue), rgba(1, 149, 244, 0.1));
}
.calc-field-label {
display: flex;
align-items: center;
gap: 0.65rem;
}
.calc-icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex-shrink: 0;
background: radial-gradient(circle, rgba(1, 149, 244, 0.2) 0%, rgba(1, 149, 244, 0.02) 72%);
border: 1px solid rgba(1, 149, 244, 0.25);
color: var(--blue);
}
.calc-icon-badge svg {
width: 18px;
height: 18px;
}
.calc-field label {
color: var(--white);
font-weight: 600;
font-size: 15px;
}
.calc-value {
color: var(--blue);
font-weight: 700;
font-size: 18px;
}
.calc-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 999px;
/* --fill is kept in sync with the current value by ram-calculator.js so
the track itself reads as a progress bar instead of a plain groove. */
background: linear-gradient(to right, var(--blue) 0%, var(--blue) var(--fill, 0%), rgba(255, 255, 255, 0.1) var(--fill, 0%));
outline: none;
}
.calc-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--blue);
border: 3px solid var(--dark);
box-shadow: 0 0 0 1px rgba(1, 149, 244, 0.4), 0 2px 6px rgba(0, 0, 0, 0.4);
cursor: pointer;
margin-top: -6px;
}
.calc-range::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--blue);
border: 3px solid var(--dark);
box-shadow: 0 0 0 1px rgba(1, 149, 244, 0.4), 0 2px 6px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
.calc-range::-moz-range-track,
.calc-range::-webkit-slider-runnable-track {
height: 6px;
border-radius: 999px;
background: transparent;
}
.calc-range::-moz-range-progress {
height: 6px;
border-radius: 999px;
background: var(--blue);
}
.calc-range-ticks {
display: flex;
justify-content: space-between;
margin-top: 0.4rem;
color: var(--gray);
font-size: 12px;
font-weight: 500;
}
.calc-select {
background-color: var(--background);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--white);
}
.calc-select:focus {
border-color: var(--blue);
box-shadow: 0 0 0 1px rgba(1, 149, 244, 0.4);
color: var(--white);
background-color: var(--background);
}
.calc-gauge {
--pct: 0;
width: 160px;
height: 160px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: conic-gradient(var(--blue) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.08) 0);
transition: background 0.5s ease;
}
.calc-gauge::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 50%;
background: linear-gradient(180deg, var(--light-dark) 0%, var(--dark) 65%);
}
.calc-gauge-value {
position: relative;
z-index: 1;
}
.calc-gauge-value .num {
display: block;
color: var(--white);
font-weight: 800;
font-size: 38px;
line-height: 1;
transition: transform 0.2s ease;
}
.calc-gauge-value .unit {
display: block;
color: var(--blue);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05rem;
margin-top: 4px;
}
.calc-value-pop {
transform: scale(1.15);
}
.calc-result-plan {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 1.25rem;
margin-top: 1.5rem;
}
.calc-match-tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(32, 191, 108, 0.12);
color: var(--green);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03rem;
padding: 4px 12px;
border-radius: 999px;
margin-bottom: 0.75rem;
}
.calc-match-tag svg {
width: 12px;
height: 12px;
fill: var(--green);
}
.calc-result-plan-label {
color: var(--gray);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.02rem;
}
.calc-result-plan-title {
color: var(--white);
font-weight: 700;
font-size: 22px;
}
.plan-highlight .card {
animation: planPulse 2.5s ease;
}
@keyframes planPulse {
0% {
box-shadow: 0 0 0 0 rgba(1, 149, 244, 0.55);
border-color: var(--blue);
}
70% {
box-shadow: 0 0 0 18px rgba(1, 149, 244, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(1, 149, 244, 0);
}
}
/* Recommended-plan ribbon injected by ram-calculator.js onto whichever
plan card in the grid below currently matches the calculator's estimate. */
.plan {
position: relative;
}
.plan.is-recommended .card {
border-color: rgba(167, 94, 234, 0.5);
box-shadow: 0 18px 40px rgba(1, 149, 244, 0.16), 0 8px 24px rgba(167, 94, 234, 0.16);
}
.plan-recommended-badge {
position: absolute;
top: 16px;
right: -36px;
width: 150px;
transform: rotate(45deg);
background: var(--gradient-primary);
color: var(--white);
text-align: center;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03rem;
padding: 4px 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 3;
pointer-events: none;
}
.discord-section .card h3 {
color: var(--white);
font-weight: 600;
font-size: 17px;
}
.discord-section .card h3 svg {
fill: var(--discord-color);
width: 20px;
height: 20px;
}
.mc-plans .dropdown {
width: auto !important;
}
.mc-plans .dropdown .btn {
background-color: var(--dark);
border: 1px solid var(--light-dark);
color: var(--light);
font-weight: 600;
font-size: 14px;
}
.mc-plans .dropdown .dropdown-menu {
animation: none !important;
}
.mc-plans .dropdown .dropdown-menu .dropdown-item img {
width: 16px;
height: 16px;
}
.mc-plans .dropdown .dropdown-menu .dropdown-item {
border-radius: 4px;
padding: 8px 12px;
font-size: 14px;
}
/* VPS Table */
.vps .table tr td {
background-color: var(--dark);
}
.vps .table {
border-collapse: separate;
border-spacing: 0 20px;
}
.table tr th:first-child,
.vps .table tr td:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.table tr th:last-child,
.vps .table tr td:last-child {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.vps .table tr td {
border-bottom: 1px solid var(--dark);
color: var(--light);
}
.vps .table tr h4 {
color: var(--white);
font-weight: 600;
font-size: 20px;
}
.vps .table tr span {
font-weight: 300;
font-size: 14px;
color: var(--light);
}
.vps .table tr td .btn-main {
background: var(--gradient-primary);
border: 1px solid transparent;
color: var(--white);
font-weight: 600;
padding: 6px 24px;
font-size: 15px;
}
.vps .table tr td,
.vps .table tr th {
text-align: center;
vertical-align: middle;
}
.table td,
.table th {
padding-top: 1rem;
padding-bottom: 1rem;
}
@media (max-width: 768px) {
.vps .table thead {
display: none;
}
.vps .table tbody tr {
display: block;
margin-bottom: 0.625rem;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.075);
border-radius: 0.25rem;
}
.vps .table td {
display: block;
text-align: right;
}
.vps .table td:before {
float: left;
font-weight: 700;
color: var(--light);
}
.vps .table td:last-child {
padding-bottom: 0.625rem;
}
.vps .table td .btn {
width: 100%;
margin-top: 0.3125rem;
}
}
.vps .proccesor-change .btn-group,
.plans .nav-pills {
gap: 10px;
}
.vps .proccesor-change .btn-group .btn,
.plans .nav-pills .nav-item .nav-link {
background-color: var(--light-dark);
border: 1px solid var(--light-dark);
color: var(--white);
border-radius: 10px !important;
padding: 6px 24px;
font-size: 15px;
font-weight: 500;
}
.vps .proccesor-change .btn-group .btn:hover,
.vps .proccesor-change .btn-group .btn:active,
.vps .proccesor-change .btn-group .btn:focus,
.plans .nav-pills .nav-item .nav-link:hover,
.plans .nav-pills .nav-item .nav-link:active,
.plans .nav-pills .nav-item .nav-link:focus,
.plans .nav-pills .nav-item .active {
background: var(--gradient-primary);
border: 1px solid transparent;
color: var(--white);
}
/* OS */
.os {
background-color: var(--dark);
}
.os svg {
width: 80px;
height: 80px;
}
.os h3 {
color: var(--white);
font-weight: 500;
font-size: 18px;
}
/* Partners */
.partners {
margin-top: 60px;
}
.partners .card {
margin-bottom: 80px;
background: var(--dark);
}
.partners .card .partner-img {
width: 120px !important;
height: 120px !important;
margin-top: -60px;
margin-left: auto;
margin-right: auto;
}
.partners .card .card-body h3 {
color: var(--white);
font-weight: 600;
font-size: 24px;
}
.partners .card .card-body p {
color: var(--gray);
font-size: 14px;
font-weight: 300;
}
.partners .card .card-body ul li {
display: inline-block;
margin: 6px;
}
.partners .card .card-body ul li i {
font-size: 26px;
}
.fa-youtube {
color: #ff0000;
}
.fa-twitter {
color: #1da1f2;
}
.fa-facebook {
color: #4267b2;
}
.fa-instagram {
color: #bc2a8d;
}
.fa-discord {
color: #7289da;
}
.fa-twitch {
color: #6441a5;
}
.fa-globe {
color: #4a4a77;
}
/* Contact */
.contact .card {
border-radius: 0.75rem;
border-top: 4px solid var(--blue);
}
.contact .card svg {
fill: var(--blue);
height: 70px;
width: auto;
}
.contact .card a {
text-decoration: none;
color: var(--white);
font-weight: 600;
font-size: 18px;
display: block;
}
/* Legal */
.legal h2 {
color: var(--white);
font-weight: 500;
font-size: 24px;
}
.legal p {
font-size: 14px;
color: var(--gray);
}
.legal ul {
font-size: 14px;
color: var(--gray);
margin-bottom: 1rem;
padding-left: 1.25rem;
}
.legal ul li {
margin-bottom: 0.5rem;
}
.legal .alert {
font-size: 14px;
}
/* About Us — Titles We Power grid */
.power-tile {
color: var(--light);
transition: transform 0.2s ease, color 0.2s ease;
font-size: 14px;
font-weight: 500;
}
.power-tile svg {
width: 48px;
height: 48px;
margin: 0 auto;
display: block;
}
.power-tile:hover {
transform: translateY(-4px);
color: var(--blue) !important;
}
/* About Us — stat strip */
.stat-number {
font-size: 32px;
font-weight: 800;
color: var(--blue);
line-height: 1;
}
.stat-label {
font-size: 13px;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.04rem;
margin-top: 6px;
}
/* About Us — "Powered by People" card */
.people-card {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.people-card .people-icon {
width: 54px;
height: 54px;
color: var(--blue);
margin: 0 auto 12px;
}
.people-card .people-icon svg {
width: 100%;
height: 100%;
}
.people-card p {
text-align: left;
}
/* About Us — CTA panel */
.cta-panel {
max-width: 720px;
margin: 0 auto;
border-radius: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: radial-gradient(ellipse at top, rgba(1, 149, 244, 0.14), transparent 70%), var(--light-dark);
padding: 3rem 2rem;
}
/* FAQ accordion */
.accordion-item {
background: var(--light-dark);
border: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 1rem;
border-radius: 12px !important;
overflow: hidden;
}
.accordion-button {
background: var(--light-dark);
color: var(--white);
font-weight: 600;
font-size: 16px;
box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
background: var(--light-dark);
color: var(--blue);
}
.accordion-button::after {
filter: invert(1) grayscale(100%) brightness(1.6);
}
.accordion-body {
background: var(--dark);
color: var(--light);
font-size: 15px;
}
/* Check latter */
.step-container {
display: none;
}
.step-container.active {
display: block;
}
.step-minecraft h2.title {
color: var(--white);
font-size: 26px;
font-weight: 600;
}
.step-minecraft .card img.lang {
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.step-minecraft .card h4 {
color: var(--white);
font-size: 18px;
}
.step-minecraft .card img.plan {
height: 60px;
width: auto;
}
.blog .card .card-title {
color: var(--white);
font-weight: 600;
font-size: 18px;
}
.blog .card {
overflow: hidden;
}
.blog .card .card-banner {
width: auto;
height: 240px !important;
overflow: hidden;
}
.blog .card .card-banner .card-img-top {
transition: 0.3s ease-in-out;
height: 240px;
width: 100%;
object-fit: cover;
}
.blog .card:hover .card-img-top {
transform: scale(1.1) rotate(2deg);
}
.admin h1 {
font-size: 24px;
}
.blogs .table th {
background-color: var(--light-dark);
color: var(--white);
border: none;
text-align: left !important;
padding: 12px 24px !important;
}
.blogs .table tr td {
text-align: left !important;
padding: 20px 24px !important;
}
.blogs .table tr td img {
height: 40px;
}
.blogs .table tr td .btn {
font-size: 12px;
font-weight: 600;
}
.modal-content {
background: var(--dark);
}
.modal-header {
border-bottom: 1px solid var(--background);
}
.modal-footer {
border-top: 1px solid var(--background);
}
.blog-content {
background-color: var(--light-dark);
border-radius: 0.75rem;
}