* {
font-family: 'Yantramanav', sans-serif;
}
body {
background: url("../img/back.png");
background-color: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.hero-body {
background: url("../img/back.png");
background-color: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
#footer {
padding: 20px;
}
#connected {
padding-top: 20px;
}
.is-semi-transparent {
background:rgba(255,255,255,0.8);
}
.is-semi-dark-transparent {
background:rgba(0, 0, 0,0.7);
}
a.has-hover-dark:hover, label.has-hover-dark:hover {
background-color: #363636;
}
.hero.is-dark .navbar-link.is-active, .hero.is-dark .navbar-link:hover, .hero.is-dark a.navbar-item.is-active, .hero.is-dark a.navbar-item:hover {
background-color: rgb(215, 218, 250);
color: rgba(26, 24, 24, 0);
}
.hero.is-dark .tabs.is-boxed a, .hero.is-dark .tabs.is-toggle a {
color: #0a0a0a;
}
.bm--card-equal-height {
display: flex;
flex-direction: column;
height: 100%;
}
.bm--card-equal-height .card-footer {
margin-top: auto;
}
@media screen and (max-width: 700px) {
.is-responsive {
border: 0;
}
.is-responsive caption {
font-size: 1.3em;
}
.is-responsive thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.is-responsive tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
.is-responsive td {
border-bottom: 1px solid #ddd;
display: block;
text-align: right;
width: 250px;
}
.is-responsive td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
.is-responsive td:last-child {
border-bottom: 0;
}
}
/* In case there's a nested container adding space */
.hero-body .container {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.hero.is-dark {
min-height: auto !important;
}
/* Limit logo size inside hero */
.hero img,
.hero-body img {
max-height: 150px !important; /* Try 130160px to taste */
width: auto !important;
height: auto !important;
}
/* Limit logo size inside the banner without breaking layout */
.hero-body .container img {
max-height: 140px !important; /* Adjust 120160px to taste */
width: auto !important;
height: auto !important;
}
/* === Mobile fixes for AnarchyRO === */
img {
max-width: 100%;
height: auto;
}
/* General wrapper/content make them shrink on small screens */
@media (max-width: 768px) {
body {
margin: 0;
padding: 0;
overflow-x: hidden; /* prevent sideways scroll */
}
/* Any fixed widths like 980px / 1024px: force them to 100% */
#container,
#content,
#wrapper,
.generic-form-div,
.vertical-table,
.horizontal-table {
width: 100% !important;
max-width: 100% !important;
}
/* If you have a sidebar/content layout, stack them */
#sidebar,
#main {
float: none !important;
width: 100% !important;
}
/* Navigation make items full width on mobile */
#nav ul,
#nav li {
float: none !important;
display: block;
text-align: center;
}
/* Big logo spacing */
.anarchy-logo, /* if you have a custom class */
#logo,
header img {
max-width: 80%;
margin: 10px auto;
display: block;
}
}
/* Category bar */
.shop-category-bar {
margin-bottom: 15px;
}
/* Inactive tabs */
.shop-category-link {
display: inline-block;
padding: 4px 12px;
margin: 0 5px 5px 0;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(0, 0, 0, 0.45);
color: #f5f5f5;
text-decoration: none;
font-size: 12px;
font-weight: 500;
}
/* Active tab (All or selected category) */
.shop-category-link.is-active {
background: #f1c40f;
border-color: #f1c40f;
color: #000;
font-weight: 700;
}
/* Grid of cards */
.shop-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 10px;
}
/* Item card */
.shop-card {
position: relative;
flex: 1 1 230px;
max-width: 260px;
min-height: 220px; /* taller card so big icon fits */
background: rgba(0, 0, 0, 0.9);
border-radius: 10px;
padding: 14px 14px 52px 14px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
border: 1px solid rgba(255, 255, 255, 0.06);
box-sizing: border-box;
overflow: hidden;
transition: transform 0.15s ease-out,
box-shadow 0.15s ease-out,
border-color 0.15s ease-out;
}
/* Hover lift */
.shop-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.95);
}
/* Position icon in the corner */
.shop-icon-wrap {
position: absolute;
top: 34px;
right: 14px;
}
/* Force bigger icon size (and keep RO pixels sharp) */
.shop-item-icon {
width: 80px;
height: 80px;
image-rendering: pixelated; /* keeps that Ragnarok sprite feel */
}
/* Stronger visual hierarchy for text */
.shop-item-title {
margin: 0;
font-size: 16px; /* bigger title */
font-weight: 600;
color: #ffffff; /* clearer on dark bg */
text-transform: uppercase;
letter-spacing: 0.5px;
}
.shop-qty {
font-weight: 500;
font-size: 13px;
margin: 4px 0 2px 0;
color: #f0f0f0;
}
.shop-cost {
margin: 2px 0 8px 0;
font-size: 15px; /* bigger price */
color: #f1c40f;
font-weight: 700;
}
/* Footer stays inside each card, not absolutely positioned */
.shop-card-footer {
position: static; /* remove absolute positioning */
text-align: center;
margin-top: 10px;
}
/* Big, rounded rectangle Purchase button */
.shop-buy-btn {
display: inline-block;
padding: 8px 18px;
border-radius: 14px; /* rounded rectangle */
background: #f1c40f;
color: #000;
font-size: 13px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.7px;
/* no min-width, no width:100% each card has its own button */
}
.shop-buy-btn:hover {
background: #ffd944;
}
/* GM links smaller, secondary */
.shop-admin-links {
margin-top: 4px;
font-size: 10px;
opacity: 0.8;
}
.shop-admin-links a {
color: #c0c0c0;
text-decoration: none;
margin: 0 4px;
}
.shop-admin-links a:hover {
text-decoration: underline;
}
.shop-badge.badge-premium {
background: #9b59b6;
color: #fff;
}
.shop-badge.badge-best {
background: #e67e22;
color: #fff;
}
.shop-badge.badge-popular {
background: #3498db;
color: #fff;
}
/* Highlight card for premium / best / popular */
.shop-card.badge-premium-card {
border-color: #9b59b6;
box-shadow: 0 0 18px rgba(155, 89, 182, 0.6);
}
.shop-card.badge-best-card {
border-color: #e67e22;
box-shadow: 0 0 18px rgba(230, 126, 34, 0.65);
}
.shop-card.badge-popular-card {
border-color: #3498db;
box-shadow: 0 0 18px rgba(52, 152, 219, 0.6);
}
/* Only on BEST VALUE card's button */
.badge-best-card .shop-buy-btn {
animation: bestValuePulse 1.8s ease-in-out infinite;
}
@keyframes bestValuePulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); box-shadow: 0 0 16px rgba(241, 196, 15, 0.6); }
100% { transform: scale(1); box-shadow: none; }
}
.shop-grid {
display: flex;
flex-wrap: wrap;
gap: 18px 18px; /* row-gap col-gap */
margin-top: 10px;
}
/* ===========================
CART CARD VIEW (OPTION A)
=========================== */
.cart-wrapper {
margin-top: 10px;
color: #fff;
}
.cart-title {
font-size: 22px;
font-weight: 700;
letter-spacing: .02em;
margin: 0 0 4px;
}
.cart-summary-text {
font-size: 13px;
opacity: 0.8;
line-height: 1.4;
}
.cart-subtotal {
color: #ffd54a;
}
.cart-header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 18px;
}
.cart-header-actions {
display: flex;
align-items: center;
gap: 10px;
}
/* Empty state */
.cart-empty-box {
background: rgba(0,0,0,0.88);
border-radius: 12px;
padding: 28px 20px;
text-align: center;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 4px 16px rgba(0,0,0,0.95);
font-size: 14px;
}
/* Section title */
.cart-section-title {
font-size: 14px;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(255,255,255,0.7);
margin: 10px 0 12px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Grid */
.cart-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 18px;
}
/* Card */
.cart-card {
position: relative;
flex: 1 1 260px;
max-width: 320px;
background: radial-gradient(circle at top left, rgba(255,255,255,0.05), transparent 55%),
rgba(0,0,0,0.9);
border-radius: 12px;
padding: 14px 14px 56px 14px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 4px 16px rgba(0,0,0,0.95);
box-sizing: border-box;
overflow: hidden;
transition: transform .15s ease-out,
box-shadow .15s ease-out,
border-color .15s ease-out;
}
.cart-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,1);
border-color: rgba(255,213,74,0.65);
}
/* Checkbox */
.cart-select-checkbox {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
cursor: pointer;
}
.cart-select-checkbox input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cart-checkbox-fake {
width: 18px;
height: 18px;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.35);
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #000;
background: rgba(0,0,0,0.4);
}
.cart-select-checkbox input:checked + .cart-checkbox-fake {
background: #ffd54a;
border-color: #ffd54a;
box-shadow: 0 0 0 2px rgba(255,213,74,0.25);
}
.cart-select-checkbox input:checked + .cart-checkbox-fake::before {
content: "?";
}
/* Top layout */
.cart-card-top {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 8px;
}
.cart-thumb {
flex: 0 0 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.cart-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(0,0,0,0.9));
}
.cart-main-info {
flex: 1 1 auto;
min-width: 0;
}
.cart-item-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .14em;
opacity: 0.75;
}
.cart-item-name {
font-size: 15px;
font-weight: 700;
margin-top: 3px;
margin-bottom: 4px;
}
/* Meta */
.cart-meta {
font-size: 12px;
opacity: 0.9;
}
.cart-meta-line {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-meta-line + .cart-meta-line {
margin-top: 2px;
}
.cart-price {
font-weight: 700;
color: #ffd54a;
}
.cart-price-suffix {
margin-left: 4px;
opacity: 0.7;
}
/* Description */
.cart-desc {
font-size: 11px;
opacity: 0.8;
margin-top: 4px;
max-height: 52px;
overflow: hidden;
}
/* Footer */
.cart-card-footer {
position: absolute;
left: 14px;
right: 14px;
bottom: 10px;
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 11px;
opacity: 0.8;
}
.cart-footer-link {
text-decoration: none;
text-transform: uppercase;
letter-spacing: .12em;
border-bottom: 1px dashed rgba(255,255,255,0.25);
}
.cart-footer-link:hover {
opacity: 1;
border-bottom-style: solid;
}
.cart-footer-separator {
opacity: 0.5;
}
/* Bottom bars */
.cart-bottom-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.cart-bottom-bar-secondary {
border-top: none;
margin-top: 6px;
}
.cart-bottom-left {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cart-bottom-right {
display: flex;
justify-content: flex-end;
}
/* Buttons */
.cart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .16em;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
outline: none;
text-decoration: none;
white-space: nowrap;
transition: background .15s ease-out,
color .15s ease-out,
border-color .15s ease-out,
transform .08s ease-out,
box-shadow .08s ease-out;
}
.cart-btn-lg {
padding: 10px 20px;
font-size: 13px;
}
.cart-btn-primary {
background: linear-gradient(135deg, #ffd54a, #ffb300);
color: #000;
font-weight: 700;
box-shadow: 0 4px 14px rgba(0,0,0,0.9);
}
.cart-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 7px 20px rgba(0,0,0,1);
}
.cart-btn-ghost {
background: transparent;
color: rgba(255,255,255,0.85);
border-color: rgba(255,255,255,0.25);
}
.cart-btn-ghost:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.5);
}
.cart-btn-danger {
background: rgba(255, 82, 82, 0.12);
border-color: rgba(255, 82, 82, 0.9);
color: #ff8080;
}
.cart-btn-danger:hover {
background: rgba(255, 82, 82, 0.26);
}
/* Mobile */
@media (max-width: 768px) {
.cart-header-row {
flex-direction: column;
align-items: flex-start;
}
.cart-grid {
flex-direction: column;
}
.cart-bottom-bar {
flex-direction: column;
align-items: stretch;
}
.cart-bottom-right {
width: 100%;
}
.cart-btn-lg {
width: 100%;
justify-content: center;
}
}
/* ===========================
CHECKOUT PAGE
=========================== */
.checkout-wrapper {
margin-top: 10px;
color: #fff;
}
.checkout-header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}
.checkout-header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.checkout-intro {
font-size: 13px;
opacity: 0.85;
margin-top: 6px;
max-width: 640px;
}
.checkout-highlight {
color: #ffd54a;
font-weight: 700;
}
.checkout-info-box {
background: rgba(0,0,0,0.88);
border-radius: 12px;
padding: 18px 20px 20px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 4px 16px rgba(0,0,0,0.9);
margin-bottom: 18px;
}
.checkout-section-title {
font-size: 13px;
text-transform: uppercase;
letter-spacing: .14em;
color: rgba(255,255,255,0.7);
margin: 0 0 8px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.checkout-line {
font-size: 13px;
margin: 4px 0;
}
.checkout-strong {
font-weight: 700;
color: #ffd54a;
}
.checkout-note {
font-size: 12px;
margin-top: 10px;
opacity: 0.8;
}
.checkout-warning {
font-size: 12px;
margin-top: 8px;
color: #ffeb99;
}
.checkout-form {
margin-top: 14px;
}
.checkout-purchase-btn {
min-width: 220px;
}
.checkout-items-block {
margin-top: 10px;
}
.checkout-grid {
margin-top: 10px;
}
.checkout-card {
/* optional: slightly dim on checkout so info box pops more */
background: radial-gradient(circle at top left, rgba(255,255,255,0.04), transparent 55%),
rgba(0,0,0,0.9);
}
/* Responsive */
@media (max-width: 768px) {
.checkout-header-row {
flex-direction: column;
align-items: flex-start;
}
.checkout-info-box {
padding: 14px 14px 16px;
}
.checkout-purchase-btn {
width: 100%;
justify-content: center;
}
}
/* Account view layout */
.account-wrapper {
margin-top: 10px;
padding: 16px 20px 24px;
background: rgba(0, 0, 0, 0.80);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
border: 1px solid rgba(255, 255, 255, 0.04);
color: #f5f5f5;
}
/* Alerts */
.account-alert {
padding: 10px 14px;
border-radius: 8px;
margin-bottom: 12px;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
}
.account-alert-title {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 11px;
}
.account-alert-text {
flex: 1;
}
.account-alert-danger {
background: linear-gradient(90deg, rgba(220, 53, 69, 0.96), rgba(220, 53, 69, 0.85));
color: #fff;
}
.account-alert-error {
background: rgba(220, 53, 69, 0.18);
border: 1px solid rgba(220, 53, 69, 0.7);
color: #ffd7d7;
}
/* Top summary card */
.account-summary {
display: flex;
justify-content: space-between;
gap: 18px;
padding: 14px 16px;
border-radius: 10px;
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.10), transparent 45%),
rgba(8, 8, 8, 0.95);
border: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 18px;
}
.account-summary-main {
min-width: 0;
}
.account-summary-username {
font-size: 20px;
font-weight: 700;
letter-spacing: 0.04em;
}
.account-summary-id {
font-size: 13px;
opacity: 0.8;
margin-left: 6px;
}
.account-summary-sub {
font-size: 12px;
opacity: 0.85;
margin-top: 2px;
}
.account-summary-email,
.account-summary-referrer {
font-size: 12px;
margin-top: 4px;
opacity: 0.9;
}
.account-summary-side {
display: flex;
align-items: center;
}
/* Badges row */
.account-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.account-badge {
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
white-space: nowrap;
}
.account-badge-credit {
background: linear-gradient(120deg, #ffb347, #ffdd33);
color: #000;
font-weight: 600;
border-color: rgba(0, 0, 0, 0.2);
}
.account-badge-vip-active {
background: linear-gradient(120deg, #6dd5fa, #2193b0);
font-weight: 600;
}
.account-badge-vip {
background: rgba(255, 255, 255, 0.04);
}
/* Section titles */
.account-section-title {
margin: 18px 0 8px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f2f2f2;
border-left: 3px solid #ffcc4d;
padding-left: 8px;
}
/* Tables: account / chars / storage */
.vertical-table.account-table,
.vertical-table.account-char-table,
.vertical-table.account-storage-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
background: rgba(5, 5, 5, 0.92);
border-radius: 8px;
overflow: hidden;
}
.vertical-table.account-table th,
.vertical-table.account-char-table th,
.vertical-table.account-storage-table th {
background: rgba(255, 255, 255, 0.05);
padding: 8px 10px;
font-weight: 600;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.vertical-table.account-table td,
.vertical-table.account-char-table td,
.vertical-table.account-storage-table td {
padding: 7px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.vertical-table.account-table tr:nth-child(even) td,
.vertical-table.account-char-table tr:nth-child(even) td,
.vertical-table.account-storage-table tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.02);
}
.vertical-table.account-table tr:hover td,
.vertical-table.account-char-table tr:hover td,
.vertical-table.account-storage-table tr:hover td {
background: rgba(255, 255, 255, 0.05);
}
/* Zeny total under character list */
.account-total-zeny {
margin-top: 4px;
font-size: 12px;
}
/* Online / offline pills */
.online,
.offline {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
.online {
background: rgba(40, 167, 69, 0.2);
color: #5cf58b;
}
.offline {
background: rgba(108, 117, 125, 0.45);
color: #d0d4da;
}
/* Mobile tweaks */
@media (max-width: 900px) {
.account-wrapper {
padding: 12px 12px 18px;
}
.account-summary {
flex-direction: column;
align-items: flex-start;
}
.account-summary-side {
width: 100%;
}
.account-badges {
justify-content: flex-start;
}
.vertical-table.account-table,
.vertical-table.account-char-table,
.vertical-table.account-storage-table {
font-size: 11px;
}
}
/* Force dark tables (no white cells) */
.vertical-table.account-table td,
.vertical-table.account-char-table td,
.vertical-table.account-storage-table td {
background: rgba(0, 0, 0, 0.20) !important;
color: #eee !important;
}
.vertical-table.account-table tr:nth-child(even) td,
.vertical-table.account-char-table tr:nth-child(even) td,
.vertical-table.account-storage-table tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.04) !important;
}
.vertical-table.account-table th,
.vertical-table.account-char-table th,
.vertical-table.account-storage-table th {
background: rgba(255, 255, 255, 0.06) !important;
color: #fff !important;
}
/* Security notice banner */
.account-alert-danger {
background: linear-gradient(90deg, #d60000, #ff5555);
padding: 14px 18px;
border-radius: 10px;
margin-bottom: 15px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: white;
box-shadow: 0 0 14px rgba(255, 70, 70, 0.4);
}
.account-summary {
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.07), transparent 45%),
rgba(12, 12, 12, 0.95);
box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}
/* ===========================
SERVER STATUS (AnarchyRO)
=========================== */
.server-status-wrapper {
margin-top: 10px;
padding: 18px 22px;
border-radius: 16px;
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.server-status-header h2 {
font-size: 20px;
font-weight: 700;
color: #ffffff;
margin-bottom: 4px;
}
.server-status-desc {
margin: 0 0 12px 0;
font-size: 13px;
line-height: 1.5;
color: rgba(230, 230, 230, 0.85);
}
.server-status-card {
margin-top: 12px;
background: radial-gradient(circle at top left,
rgba(0, 255, 255, 0.18),
transparent 55%)
rgba(0, 0, 0, 0.85);
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.server-status-card-header {
padding: 10px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.server-status-title {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #e0f6ff;
}
/* Table styling */
.server-status-table-wrap {
overflow-x: auto;
}
.server-status-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.server-status-table th,
.server-status-table td {
padding: 8px 10px;
text-align: center;
}
.server-status-table th.status {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 11px;
color: #a9bcd8;
background: rgba(0, 0, 0, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.server-status-table tr:nth-child(even) {
background: rgba(255, 255, 255, 0.03);
}
.server-status-table tr:nth-child(odd) {
background: rgba(0, 0, 0, 0.25);
}
.server-status-table tr:hover {
background: rgba(0, 180, 255, 0.12);
}
/* Server name pill */
.server-name-cell {
text-align: left;
padding-left: 14px;
}
.server-name-pill {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(0, 255, 255, 0.5);
font-weight: 600;
color: #e6f9ff;
text-shadow: 0 0 4px rgba(0, 255, 255, 0.8);
}
/* Online / offline glow (serverUpDown output) */
.server-up,
.server-down {
display: inline-block;
min-width: 72px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}
.server-up {
background: radial-gradient(circle, #2ecc71, #27ae60);
color: #ffffff;
box-shadow: 0 0 10px rgba(46, 204, 113, 0.9);
}
.server-down {
background: radial-gradient(circle, #e74c3c, #c0392b);
color: #ffffff;
box-shadow: 0 0 10px rgba(231, 76, 60, 0.9);
}
/* Online / peak numbers */
.status-online-count {
font-weight: 700;
color: #f1c40f;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}
.status-peak-count {
font-weight: 600;
color: #9b59b6;
}
/* ================================
? Polished Server Status UI
================================ */
.server-status-card {
border-radius: 14px;
background: rgba(0, 0, 0, 0.85);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.85);
overflow: hidden;
}
/* Header */
.server-status-card-header {
padding: 14px 20px;
background: linear-gradient(135deg, rgba(0,255,255,0.2), rgba(0,0,0,0.7));
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.server-status-title {
color: #e7faff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.08em;
}
/* Table */
.server-status-table {
width: 100%;
border-collapse: collapse;
}
.server-status-table th {
font-size: 11px;
padding: 10px 8px;
background: rgba(0,0,0,0.9);
color: #cbd6e2;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.server-status-table td {
padding: 14px 10px;
background: rgba(255,255,255,0.03);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* Alternate row background */
.server-status-table tr:nth-child(odd) td {
background: rgba(255,255,255,0.06);
}
/* Hover */
.server-status-table tr:hover td {
background: rgba(0, 200, 255, 0.10);
}
/* Server name pill */
.server-name-pill {
display: inline-flex;
align-items: center;
padding: 4px 14px;
background: rgba(0,0,0,0.75);
border: 1px solid rgba(0,255,255,0.6);
color: #dffcff;
border-radius: 999px;
font-weight: 600;
font-size: 12px;
text-shadow: 0 0 5px rgba(0,255,255,0.8);
}
/* =======================================
ENHANCED ONLINE / OFFLINE BADGES
Works for:
- Online
- Offline
- .legend-pill-online / .legend-pill-offline
======================================= */
/* Base pill style */
.server-status-table .up,
.server-status-table .down,
.legend-pill-online,
.legend-pill-offline {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 80px;
padding: 4px 14px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #ffffff;
text-shadow: 0 0 4px rgba(0,0,0,0.9);
border: 1px solid rgba(255,255,255,0.12);
}
/* ONLINE bright green with breathing pulse */
@keyframes onlinePulse {
0% {
box-shadow: 0 0 5px rgba(46,204,113,0.7),
0 0 12px rgba(46,204,113,0.3);
transform: translateY(0);
}
50% {
box-shadow: 0 0 10px rgba(46,204,113,1),
0 0 20px rgba(46,204,113,0.6);
transform: translateY(-0.5px);
}
100% {
box-shadow: 0 0 5px rgba(46,204,113,0.7),
0 0 12px rgba(46,204,113,0.3);
transform: translateY(0);
}
}
.server-status-table .up,
.legend-pill-online {
background: radial-gradient(circle, #2ecc71, #27ae60);
animation: onlinePulse 1.6s ease-in-out infinite;
}
/* OFFLINE red warning with slow glow */
@keyframes offlineAlert {
0% {
box-shadow: 0 0 6px rgba(231,76,60,0.8);
}
50% {
box-shadow: 0 0 14px rgba(231,76,60,1);
}
100% {
box-shadow: 0 0 6px rgba(231,76,60,0.8);
}
}
.server-status-table .down,
.legend-pill-offline {
background: radial-gradient(circle, #e74c3c, #c0392b);
animation: offlineAlert 2.2s ease-in-out infinite;
}
/* Better readable Players Online number */
.status-online-count {
font-weight: 800;
font-size: 14px;
color: #ffd83b; /* Gold highlight */
text-shadow:
0 0 4px rgba(0,0,0,0.9),
0 0 8px rgba(0,0,0,0.6);
}
.status-peak-count {
font-weight: 600;
color: #9b59b6;
}
/* Remove extra spacing from screenshot */
.server-status-wrapper {
margin-top: 0 !important;
}
/* ================================
ONLINE / OFFLINE PILL + ANIMATION
================================ */
/* FluxCP usually outputs Online / Offline
so we style those, plus legend pills below.
*/
.server-status-table .up,
.server-status-table .down,
.legend-pill {
display: inline-block;
min-width: 72px;
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}
/* Pulsing green ONLINE glow */
@keyframes statusPulse {
0% {
box-shadow: 0 0 6px rgba(46, 204, 113, 0.8);
transform: translateY(0);
}
50% {
box-shadow: 0 0 16px rgba(46, 204, 113, 1);
transform: translateY(-0.5px);
}
100% {
box-shadow: 0 0 6px rgba(46, 204, 113, 0.8);
transform: translateY(0);
}
}
.server-status-table .up,
.legend-pill-online {
background: radial-gradient(circle, #2ecc71, #27ae60);
color: #ffffff;
animation: statusPulse 1.6s ease-in-out infinite;
}
.server-status-table .down,
.legend-pill-offline {
background: radial-gradient(circle, #e74c3c, #c0392b);
color: #ffffff;
box-shadow: 0 0 10px rgba(231, 76, 60, 0.9);
}
/* Make sure default green text doesn't leak through from other styles */
.server-status-table .up,
.server-status-table .down {
text-decoration: none;
}
/* ================================
LEGEND UNDER TABLE
================================ */
.server-status-legend {
padding: 10px 18px 14px 18px;
background: rgba(0, 0, 0, 0.7);
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
align-items: center;
}
.server-status-legend .legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #d7e2f0;
}
.legend-label {
padding: 2px 8px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.85);
border: 1px solid rgba(0, 255, 255, 0.5);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #e1fbff;
}
/* ================================
MOBILE TWEAKS
================================ */
@media (max-width: 768px) {
.server-status-card {
margin: 0 -8px;
border-radius: 10px;
}
.server-status-table th,
.server-status-table td {
padding: 8px 6px;
font-size: 11px;
}
.server-name-pill {
font-size: 11px;
padding: 3px 10px;
}
.server-status-legend {
flex-direction: column;
align-items: flex-start;
}
}
/* ======================================
AUTO-DETECT PLAYERS ONLINE NUMBER
Always readable on any background
====================================== */
.status-online-count {
font-weight: 800;
font-size: 14px;
/* Auto-adjust color depending on background brightness */
color: #ffffff;
mix-blend-mode: difference;
/* On dark background ? turns white
On light background ? becomes dark */
/* Glow for more readability */
text-shadow:
0 0 5px rgba(0, 0, 0, 0.9),
0 0 10px rgba(0, 0, 0, 0.6),
0 0 15px rgba(0, 0, 0, 0.4);
padding: 0 4px;
border-radius: 4px;
}
text-shadow:
0 0 2px rgba(0, 255, 255, 0.4),
0 0 4px rgba(0,0,0,0.9),
0 0 10px rgba(0,0,0,0.6);
/* Fix unwanted white backgrounds inside server-status table */
.server-status-table td {
background: rgba(255,255,255,0.04) !important;
}
/* Keep zebra effect but subtle */
.server-status-table tr:nth-child(odd) td {
background: rgba(255,255,255,0.06) !important;
}
.server-status-table tr:nth-child(even) td {
background: rgba(255,255,255,0.03) !important;
}
/* =======================================
CLEAN, CENTERED HEADER DOT ICONS
======================================= */
/* Base header cell */
.server-status-table th.status {
position: relative;
padding-left: 18px !important; /* space for dot */
}
/* Perfect centered dot */
.server-status-table th.status-login::before,
.server-status-table th.status-char::before,
.server-status-table th.status-map::before {
content: "";
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
/* neon glow */
box-shadow:
0 0 4px rgba(0, 255, 255, 0.7),
0 0 8px rgba(0, 255, 255, 0.4);
}
/* Individual colors */
.server-status-table th.status-login::before {
background: #00eaff; /* Cyan */
}
.server-status-table th.status-char::before {
background: #b87cff; /* Purple */
}
.server-status-table th.status-map::before {
background: #2ecc71; /* Green */
}
/* =======================================
HEADER DOT PULSE ANIMATION
======================================= */
@keyframes headerDotPulse {
0% {
transform: translateY(-50%) scale(1);
box-shadow:
0 0 6px rgba(0, 255, 255, 0.6),
0 0 12px rgba(0, 255, 255, 0.3);
}
50% {
transform: translateY(-50%) scale(1.25);
box-shadow:
0 0 12px rgba(0, 255, 255, 1),
0 0 20px rgba(0, 255, 255, 0.6);
}
100% {
transform: translateY(-50%) scale(1);
box-shadow:
0 0 6px rgba(0, 255, 255, 0.6),
0 0 12px rgba(0, 255, 255, 0.3);
}
}
.server-status-table th.status-login::before {
animation: headerDotPulse 2.2s ease-in-out infinite;
box-shadow:
0 0 10px rgba(0, 200, 255, 0.8),
0 0 18px rgba(0, 200, 255, 0.5);
}
.server-status-table th.status-char::before {
animation: headerDotPulse 2.2s ease-in-out infinite;
box-shadow:
0 0 10px rgba(180, 120, 255, 0.8),
0 0 18px rgba(180, 120, 255, 0.5);
}
.server-status-table th.status-map::before {
animation: headerDotPulse 2.2s ease-in-out infinite;
box-shadow:
0 0 10px rgba(46, 204, 113, 0.9),
0 0 17px rgba(46, 204, 113, 0.6);
}
/* Apply pulse to each dot */
.server-status-table th.status-login::before,
.server-status-table th.status-char::before,
.server-status-table th.status-map::before {
animation: headerDotPulse 2.2s ease-in-out infinite;
}
/* =======================================
ROW HOVER subtle lift + glow
======================================= */
.server-status-table .status-row {
transition: background 0.16s ease,
transform 0.16s ease,
box-shadow 0.16s ease;
}
.server-status-table .status-row:hover {
background: rgba(0, 200, 255, 0.08) !important;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
}
/* Keep individual cells matching row on hover */
.server-status-table .status-row:hover td {
background: transparent !important;
}
/* =======================================
EMPHASIZE PLAYERS ONLINE COLUMN
======================================= */
.server-status-table th.status-online-col {
color: #ffeaa7;
}
.server-status-table td.status-online-count {
border-left: 1px solid rgba(255, 255, 255, 0.12);
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
/* Slightly dim peak header so Online stands out */
.server-status-table th.status-peak-col {
color: #caa6ff;
}
/* =======================================
MOBILE tighten spacing a bit more
======================================= */
@media (max-width: 768px) {
.server-status-table th.status,
.server-status-table .status-row td {
padding: 6px 4px;
font-size: 10px;
}
.server-status-table .status-row:hover {
transform: none;
box-shadow: none;
}
}
/* =======================================
SERVER POPULATION BADGE + BAR
======================================= */
.server-status-header-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.server-status-title {
font-size: 14px;
letter-spacing: 0.08em;
font-weight: 700;
color: #e3f7ff;
}
/* Badge base */
.server-population-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
box-shadow: 0 0 8px rgba(0,0,0,0.7);
}
.server-population-count {
font-weight: 500;
opacity: 0.85;
}
/* Population states */
.pop-calm {
border-color: rgba(52, 152, 219, 0.7);
box-shadow: 0 0 8px rgba(52, 152, 219, 0.7);
}
.pop-active {
border-color: rgba(46, 204, 113, 0.9);
box-shadow: 0 0 10px rgba(46, 204, 113, 0.9);
}
.pop-busy {
border-color: rgba(241, 196, 15, 0.9);
box-shadow: 0 0 10px rgba(241, 196, 15, 0.9);
}
.pop-packed {
border-color: rgba(231, 76, 60, 0.95);
box-shadow: 0 0 12px rgba(231, 76, 60, 0.95);
}
/* Population bar container */
.server-population-bar {
position: relative;
width: 100%;
height: 5px;
border-radius: 999px;
background: linear-gradient(90deg,
rgba(255,255,255,0.06),
rgba(0,0,0,0.6));
overflow: hidden;
}
/* Filled part */
.server-population-bar-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-radius: 999px;
background: linear-gradient(90deg,
rgba(46, 204, 113, 0.9),
rgba(52, 152, 219, 0.9));
box-shadow: 0 0 10px rgba(0, 255, 200, 0.8);
transform-origin: left center;
transform: scaleX(0);
animation: popBarIntro 0.7s ease-out forwards;
}
.pop-active.server-population-bar-fill {
box-shadow: 0 0 12px rgba(46,204,113,0.6);
}
.pop-busy.server-population-bar-fill {
box-shadow: 0 0 12px rgba(241,196,15,0.6);
}
.pop-packed.server-population-bar-fill {
box-shadow: 0 0 12px rgba(231,76,60,0.6);
}
.pop-calm.server-population-bar-fill {
box-shadow: 0 0 12px rgba(52,152,219,0.5);
}
.server-population-bar-fill {
border-radius: 999px !important;
filter: drop-shadow(0 0 6px rgba(46,204,113,0.4));
}
/* Bar color tweaks per state */
/* Calm = Blue/Teal */
.pop-calm.server-population-bar-fill {
background: linear-gradient(90deg, #3498db, #2ecc71);
}
/* Active = Green */
.pop-active.server-population-bar-fill {
background: linear-gradient(90deg, #2ecc71, #27ae60);
}
/* Busy = Yellow/Orange */
.pop-busy.server-population-bar-fill {
background: linear-gradient(90deg, #f1c40f, #e67e22);
}
/* Packed = Red */
.pop-packed.server-population-bar-fill {
background: linear-gradient(90deg, #e74c3c, #c0392b);
}
/* Intro animation */
@keyframes popBarIntro {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Mobile adjustments */
@media (max-width: 768px) {
.server-status-header-main {
flex-direction: column;
align-items: flex-start;
}
.server-population-badge {
font-size: 10px;
padding: 2px 8px;
}
.server-population-count {
font-size: 10px;
}
}
.server-status-table th.status-login::before,
.server-status-table th.status-char::before,
.server-status-table th.status-map::before {
top: 52%; /* tiny nudge */
}
.server-population-bar {
position: relative;
width: 100%;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg,
rgba(255,255,255,0.03),
rgba(0,0,0,0.4));
overflow: hidden;
}
.server-population-bar::after {
content: "";
position: absolute;
right: 0;
width: 40px;
height: 100%;
background: linear-gradient(to right,
transparent,
rgba(0,0,0,0.7));
pointer-events: none;
}
.server-population-bar {
position: relative;
width: 100%;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg,
rgba(255,255,255,0.03),
rgba(0,0,0,0.4));
overflow: hidden;
}
.server-population-bar::after {
content: "";
position: absolute;
right: 0;
width: 40px;
height: 100%;
background: linear-gradient(to right,
transparent,
rgba(0,0,0,0.7));
pointer-events: none;
}
.server-status-table .status-row:hover {
background: rgba(0,180,255,0.08) !important;
transform: translateY(-1px);
box-shadow:
0 0 10px rgba(0, 200, 255, 0.15),
0 2px 12px rgba(0,0,0,0.6);
}
.server-health-pulse {
width: 100%;
height: 2px;
background: linear-gradient(90deg, #00ffaa, #00eaff);
opacity: 0.7;
border-radius: 999px;
margin-bottom: 6px;
animation: healthPulse 3.6s ease-in-out infinite;
}
@keyframes healthPulse {
0% { opacity: 0; transform: scaleX(0.3); }
50% { opacity: 1; transform: scaleX(1); }
100% { opacity: 0; transform: scaleX(0.3); }
}
/* =======================================
SERVER HEALTH BOX
======================================= */
.server-health-box {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
padding: 4px 10px;
border-radius: 10px;
background: rgba(0,0,0,0.75);
border: 1px solid rgba(255,255,255,0.06);
font-size: 11px;
color: #e6f3ff;
}
.server-health-label {
padding: 2px 8px;
border-radius: 999px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 10px;
}
.server-health-text {
opacity: 0.9;
}
/* Health states */
.health-ok .server-health-label {
background: #2ecc71;
box-shadow: 0 0 10px rgba(46,204,113,0.8);
}
.health-idle .server-health-label {
background: #3498db;
box-shadow: 0 0 10px rgba(52,152,219,0.8);
}
.health-warning .server-health-label {
background: #e67e22;
box-shadow: 0 0 10px rgba(230,126,34,0.9);
}
.health-high .server-health-label {
background: #e74c3c;
box-shadow: 0 0 12px rgba(231,76,60,0.95);
}
/* =======================================
HEARTBEAT LINE ABOVE POP BAR
======================================= */
.server-health-pulse {
width: 100%;
height: 2px;
margin: 4px 0;
border-radius: 999px;
background: linear-gradient(90deg, #00ffaa, #00eaff);
opacity: 0.75;
transform-origin: center;
animation: healthPulse 3.6s ease-in-out infinite;
}
@keyframes healthPulse {
0% { opacity: 0; transform: scaleX(0.3); }
40% { opacity: 1; transform: scaleX(1); }
70% { opacity: 0.5; transform: scaleX(0.6); }
100% { opacity: 0; transform: scaleX(0.3); }
}
/* Slight tweak so header dots are perfectly centered */
.server-status-table th.status-login::before,
.server-status-table th.status-char::before,
.server-status-table th.status-map::before {
top: 52%;
}
/* ====== ANARCHYRO SERVER INFO ====== */
.anarchy-info {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 16px;
color: #f5f5f5;
}
/* HERO CARD */
.anarchy-hero-card {
background: rgba(0, 0, 0, 0.78);
border-radius: 14px;
padding: 20px 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 0 25px rgba(0, 170, 255, 0.18);
backdrop-filter: blur(6px);
}
.anarchy-hero-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
}
.anarchy-title {
font-size: 28px;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
}
.anarchy-tagline {
margin: 4px 0 0 0;
font-size: 14px;
opacity: 0.9;
}
.anarchy-tagline span {
color: #ffc857;
font-weight: 600;
}
.anarchy-hero-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.anarchy-pill {
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
background: linear-gradient(120deg, rgba(0, 191, 255, 0.18), rgba(255, 255, 255, 0.06));
border: 1px solid rgba(0, 191, 255, 0.45);
}
.anarchy-hero-text {
margin: 8px 0 14px 0;
font-size: 14px;
line-height: 1.5;
color: #e1e1e1;
}
/* CTA BUTTONS */
.anarchy-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.anarchy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid transparent;
transition: all 0.18s ease-out;
}
.anarchy-btn-primary {
background: linear-gradient(135deg, #00c6ff, #0072ff);
color: #ffffff;
box-shadow: 0 0 18px rgba(0, 160, 255, 0.55);
}
.anarchy-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 0 25px rgba(0, 200, 255, 0.9);
}
.anarchy-btn-secondary {
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.15);
}
.anarchy-btn-secondary:hover {
background: rgba(255, 255, 255, 0.12);
}
.anarchy-btn-ghost {
background: transparent;
color: #c5c5c5;
border-color: rgba(255, 255, 255, 0.18);
}
.anarchy-btn-ghost:hover {
background: rgba(255, 255, 255, 0.08);
}
/* GRID + CARDS */
.anarchy-grid {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.anarchy-card {
flex: 1 1 260px;
background: rgba(0, 0, 0, 0.8);
border-radius: 12px;
padding: 14px 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
position: relative;
overflow: hidden;
transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}
/* RO-style glow on hover */
.anarchy-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(0, 200, 255, 0.18), transparent 60%);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease-out;
}
.anarchy-card:hover {
transform: translateY(-2px);
border-color: rgba(0, 200, 255, 0.8);
box-shadow: 0 0 22px rgba(0, 200, 255, 0.35);
}
.anarchy-card:hover::before {
opacity: 1;
}
/* TITLES + LISTS */
.anarchy-section-title {
font-size: 16px;
margin: 0 0 8px 0;
text-transform: uppercase;
letter-spacing: 0.8px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
padding-bottom: 4px;
}
.anarchy-list {
list-style: none;
padding: 0;
margin: 8px 0 0 0;
font-size: 13px;
}
.anarchy-list li {
margin-bottom: 4px;
line-height: 1.4;
position: relative;
padding-left: 14px;
}
.anarchy-list li::before {
content: "?";
position: absolute;
left: 0;
top: 0;
font-size: 9px;
color: #00d2ff;
}
/* SPEC TABLE (OVERVIEW) */
.anarchy-spec-list {
margin: 8px 0 0 0;
font-size: 13px;
}
.spec-row {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 3px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.spec-row:last-child {
border-bottom: none;
}
.spec-row dt {
font-weight: 600;
opacity: 0.9;
}
.spec-row dd {
margin: 0;
text-align: right;
color: #e5e5e5;
}
/* FOOTER LINE */
.anarchy-footer-callout {
margin-top: 4px;
padding: 10px 14px;
border-radius: 999px;
text-align: center;
font-size: 13px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
text-transform: uppercase;
letter-spacing: 0.8px;
}
.anarchy-footer-callout span {
color: #00e5ff;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.anarchy-hero-header {
flex-direction: column;
align-items: flex-start;
}
.anarchy-title {
font-size: 22px;
}
}
/* =============================
FONT READABILITY BOOST
============================= */
/* Make all text brighter and sharper */
.anarchy-info,
.anarchy-info p,
.anarchy-info li,
.anarchy-info dt,
.anarchy-info dd,
.anarchy-info h2,
.anarchy-info h3 {
color: #f2f2f2 !important;
font-weight: 500; /* slightly bolder but not too heavy */
}
/* Improve tagline clarity */
.anarchy-tagline {
color: #e6e6e6 !important;
font-weight: 400;
}
/* Stronger yellow highlight */
.anarchy-tagline span {
color: #ffdd6f !important;
}
/* Overview label text (left column) */
.spec-row dt {
color: #dcdcdc !important;
font-weight: 600;
}
/* Overview values (right column) */
.spec-row dd {
color: #ffffff !important;
font-weight: 600;
}
/* List bullet items */
.anarchy-list li {
color: #e8e8e8 !important;
font-weight: 500;
}
/* Section titles */
.anarchy-section-title {
color: #eaeaea !important;
font-weight: 700;
}
/* Improve footer line clarity */
.anarchy-footer-callout {
color: #ffffff !important;
font-weight: 600;
}
.anarchy-footer-callout span {
color: #00eaff !important;
font-weight: 700;
}
/* Slightly reduced transparency on cards for better contrast */
.anarchy-card,
.anarchy-hero-card {
background: rgba(0, 0, 0, 0.88) !important; /* was 0.78 more readable now */
}
/* Improve the dashed separator visibility */
.anarchy-section-title {
border-bottom: 1px dashed rgba(255, 255, 255, 0.20) !important;
}
/* Extra readability boost */
.anarchy-hero-text,
.anarchy-list,
.anarchy-spec-list,
.anarchy-footer-callout {
font-size: 14px;
}
.anarchy-tagline {
font-size: 13px;
}
.anarchy-title {
font-size: 30px;
}
.anarchy-info,
.anarchy-info p,
.anarchy-info li,
.anarchy-info dt,
.anarchy-info dd {
text-shadow: 0 0 2px rgba(0, 0, 0, 0.7); /* subtle sharpen on dark bg */
}
/* SIMPLE, READABLE BULLETS */
.anarchy-list li::before {
content: "-";
color: #00eaff;
font-size: 13px;
font-weight: 700;
position: absolute;
left: 0;
top: 0;
}
/* ------------------------------
ACCOUNT TABS (LOGIN / REGISTER / RESET / RESEND)
------------------------------ */
.anx-auth-tabs {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 6px;
padding: 4px;
margin: 24px auto 8px;
background: rgba(0, 0, 0, 0.45);
border-radius: 999px;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
}
.anx-auth-tab {
position: relative;
padding: 8px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
border: 1px solid transparent;
background: transparent;
transition:
background 0.16s ease,
color 0.16s ease,
box-shadow 0.16s ease,
transform 0.16s ease,
border-color 0.16s ease;
white-space: nowrap;
}
.anx-auth-tab:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
}
/* Active tab: bright, glowing pill */
.anx-auth-tab.is-active {
background: #ffffff;
color: #111827;
font-weight: 600;
border-color: rgba(0, 200, 150, 0.7);
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.9),
0 0 12px rgba(0, 200, 150, 0.7);
}
/* Small screens */
@media (max-width: 640px) {
.anx-auth-tabs {
max-width: 100%;
overflow-x: auto;
padding: 4px 6px;
}
.anx-auth-tab {
font-size: 12px;
padding: 7px 14px;
}
}
/* ==============================
ACCOUNT PAGES LOGIN / REGISTER / RESET / RESEND
============================== */
/* --- Wrapper & background aura --- */
.anx-login-wrapper {
position: relative;
display: flex;
justify-content: center;
padding: 60px 10px;
z-index: 1;
}
.anx-login-wrapper::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 420px;
height: 420px;
background: radial-gradient(circle at center,
rgba(0, 200, 150, 0.18),
rgba(0, 0, 0, 0) 70%);
filter: blur(10px);
opacity: 0.9;
pointer-events: none;
z-index: 0;
}
/* --- Main glass card --- */
.anx-login-card {
position: relative;
width: 100%;
max-width: 480px;
padding: 26px 30px 32px;
border-radius: 16px;
/* Gradient background with ambient glow */
background: radial-gradient(
circle at top center,
rgba(0, 200, 150, 0.28),
rgba(0, 0, 0, 0.82) 55%
);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 18px 45px rgba(0,0,0,0.9),
0 0 18px rgba(0,200,150,0.28),
inset 0 0 22px rgba(255,255,255,0.02);
backdrop-filter: blur(10px);
color: #f5f5f5;
z-index: 1;
animation: anx-card-float-in 0.45s ease-out forwards,
anx-card-glow 3.2s ease-in-out infinite;
}
/* Frosted fog layer on top of card */
.anx-login-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
to bottom right,
rgba(255,255,255,0.06),
rgba(255,255,255,0.01)
);
pointer-events: none;
opacity: 0.5;
}
/* --- Card animations --- */
@keyframes anx-card-float-in {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes anx-card-glow {
0%, 100% {
box-shadow:
0 18px 45px rgba(0,0,0,0.9),
0 0 18px rgba(0,200,150,0.28);
}
50% {
box-shadow:
0 22px 55px rgba(0,0,0,0.95),
0 0 24px rgba(0,200,150,0.55);
}
}
/* --- Header --- */
.anx-login-header {
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.anx-login-title {
font-size: 26px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: default;
transition: text-shadow 0.2s ease;
}
.anx-login-title:hover {
text-shadow: 0 0 8px rgba(0,200,150,0.6);
}
.anx-login-subtitle {
font-size: 13px;
margin-top: 4px;
color: rgba(255,255,255,0.75);
}
.anx-login-subtitle a {
color: #00c896;
font-weight: 600;
}
/* --- Error message --- */
.anx-login-error {
background: rgba(200,40,40,0.18);
border: 1px solid rgba(255,90,90,0.6);
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 16px;
color: #ffb3b3;
font-size: 13px;
position: relative;
z-index: 1;
}
/* --- Form --- */
.anx-login-form .form-group {
margin-bottom: 18px;
opacity: 0;
animation: anx-slide-in 0.45s ease forwards;
}
/* small stagger effect via nth-child */
.anx-login-form .form-group:nth-child(1) { animation-delay: 0.05s; }
.anx-login-form .form-group:nth-child(2) { animation-delay: 0.10s; }
.anx-login-form .form-group:nth-child(3) { animation-delay: 0.15s; }
.anx-login-form .form-group:nth-child(4) { animation-delay: 0.20s; }
.anx-login-form .form-group:nth-child(5) { animation-delay: 0.25s; }
.anx-login-form .form-group:nth-child(6) { animation-delay: 0.30s; }
.anx-login-form .form-group:nth-child(7) { animation-delay: 0.35s; }
@keyframes anx-slide-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.anx-login-form label {
display: block;
margin-bottom: 6px;
font-size: 12px;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.85);
text-transform: uppercase;
}
.anx-login-form input[type="text"],
.anx-login-form input[type="password"],
.anx-login-form select {
width: 100%;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(5,5,5,0.88);
color: #f5f5f5;
font-size: 14px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.55);
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background 0.15s ease,
transform 0.15s ease;
}
/* Focus + hover states */
.anx-login-form input[type="text"]:focus,
.anx-login-form input[type="password"]:focus,
.anx-login-form select:focus {
border-color: #00c896;
box-shadow:
0 0 0 1px rgba(0,200,150,0.5),
inset 0 0 8px rgba(0,0,0,0.7);
background: rgba(10,10,10,0.98);
transform: translateY(-1px);
outline: none;
}
.anx-login-form input[type="text"]:hover,
.anx-login-form input[type="password"]:hover,
.anx-login-form select:hover {
border-color: rgba(0,200,150,0.4);
}
/* --- Captcha --- */
.anx-captcha-wrapper {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.anx-captcha-img {
background: rgba(0,0,0,0.7);
padding: 6px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.18);
}
.anx-captcha-img img {
display: block;
}
.anx-captcha-right input {
width: 100%;
padding: 8px 10px;
border-radius: 6px;
background: rgba(0,0,0,0.85);
border: 1px solid rgba(255,255,255,0.18);
color: #ffffff;
font-size: 13px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
.anx-captcha-refresh {
margin-top: 4px;
font-size: 11px;
}
.anx-captcha-refresh a {
color: #00c896;
}
/* --- Submit button (Login / Register) --- */
.anx-login-submit {
margin-top: 6px;
position: relative;
z-index: 1;
}
.anx-login-submit input[type="submit"],
.anx-register-submit button {
width: 100%;
padding: 11px 0;
background: linear-gradient(135deg,#00c896,#00e0b0);
border: none;
border-radius: 999px;
font-weight: 700;
cursor: pointer;
color: #041013;
font-size: 15px;
letter-spacing: 0.08em;
box-shadow: 0 10px 24px rgba(0,200,150,0.5);
transition: transform 0.15s ease, box-shadow 0.15s ease;
animation: anx-button-pulse 2.6s ease-in-out infinite;
}
@keyframes anx-button-pulse {
0%, 100% {
box-shadow: 0 10px 24px rgba(0,200,150,0.45);
}
50% {
box-shadow: 0 14px 32px rgba(0,200,150,0.8);
}
}
.anx-login-submit input[type="submit"]:hover,
.anx-register-submit button:hover {
transform: translateY(-1px) scale(1.01);
}
/* --- Bottom links --- */
.anx-login-links {
margin-top: 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
font-size: 12px;
background: rgba(255,255,255,0.04);
padding: 8px 14px;
border-radius: 12px;
box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
position: relative;
z-index: 1;
}
.anx-login-links a {
color: #00c896;
}
/* --- Auth Tabs (Login / Register / Reset / Resend) --- */
.anx-auth-tabs {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 6px;
padding: 4px;
margin: 24px auto 8px;
background: rgba(0, 0, 0, 0.45);
border-radius: 999px;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
}
.anx-auth-tab {
position: relative;
padding: 8px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
border: 1px solid transparent;
background: transparent;
transition:
background 0.16s ease,
color 0.16s ease,
box-shadow 0.16s ease,
transform 0.16s ease,
border-color 0.16s ease;
white-space: nowrap;
}
.anx-auth-tab:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
}
.anx-auth-tab.is-active {
background: #ffffff;
color: #111827;
font-weight: 600;
border-color: rgba(0, 200, 150, 0.7);
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.9),
0 0 12px rgba(0, 200, 150, 0.7);
}
/* --- Register page specific --- */
.anx-register-notes {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 22px;
line-height: 1.4;
box-shadow: inset 0 0 10px rgba(0,0,0,0.35);
font-size: 12px;
color: rgba(255,255,255,0.72);
}
.anx-register-notes p {
margin: 2px 0;
}
.anx-register-notes strong {
color: #ffffff;
}
.anx-gender-options {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
}
.anx-gender-options strong {
cursor: help;
font-weight: 700;
color: rgba(255,255,255,0.85);
}
.anx-register-terms {
margin-top: 4px;
margin-bottom: 10px;
font-size: 11px;
color: rgba(255,255,255,0.65);
}
/* --- Responsive tweaks --- */
@media (max-width: 640px) {
.anx-login-wrapper {
padding: 40px 10px;
}
.anx-login-card {
padding: 22px 18px 26px;
}
.anx-auth-tabs {
max-width: 100%;
overflow-x: auto;
padding: 4px 6px;
}
.anx-auth-tab {
font-size: 12px;
padding: 7px 14px;
}
}
/* RESET PASSWORD PAGE TWEAKS */
.anx-reset-notes {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 20px;
line-height: 1.4;
box-shadow: inset 0 0 10px rgba(0,0,0,0.35);
font-size: 12px;
color: rgba(255,255,255,0.72);
}
.anx-reset-notes p {
margin: 2px 0;
}
.anx-field-help {
margin-top: 4px;
font-size: 11px;
color: rgba(255,255,255,0.6);
}
/* RESEND CONFIRMATION PAGE TWEAKS */
.anx-resend-notes {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 20px;
line-height: 1.4;
box-shadow: inset 0 0 10px rgba(0,0,0,0.35);
font-size: 12px;
color: rgba(255,255,255,0.72);
}
.anx-resend-notes p {
margin: 2px 0;
}
/* ============================
AnarchyRO Home / Main Module
============================ */
.aro-home {
margin-top: 10px;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}
/* HERO */
.aro-hero {
margin-bottom: 20px;
padding: 24px 24px 28px 24px;
background: rgba(0, 0, 0, 0.78);
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.aro-hero-main-title {
letter-spacing: 1px;
margin-bottom: 6px;
}
.aro-hero-tagline {
font-size: 1rem;
margin-bottom: 10px;
opacity: 0.9;
}
.aro-hero-description {
font-size: 0.9rem;
margin-bottom: 14px;
}
.aro-hero-buttons .button {
margin-right: 8px;
margin-bottom: 8px;
font-weight: 600;
}
.aro-hero-note {
font-size: 0.75rem;
opacity: 0.8;
margin-top: 4px;
}
/* Stats bar */
.aro-stats-bar {
margin-top: 12px;
padding: 10px 14px;
border-radius: 8px;
background: rgba(15, 15, 25, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.8rem;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.aro-stats-bar span {
white-space: nowrap;
}
/* Quickstart box */
.aro-quickstart-box {
background: rgba(5, 5, 15, 0.95);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85);
}
.aro-quickstart-title {
font-size: 1rem;
margin-bottom: 8px;
font-weight: 700;
}
.aro-steps {
font-size: 0.85rem;
margin-left: 1.25rem;
margin-bottom: 8px;
}
.aro-steps li {
margin-bottom: 4px;
}
.aro-quickstart-separator {
margin: 10px 0;
border-color: rgba(255, 255, 255, 0.08);
}
.aro-quickstart-help {
font-size: 0.8rem;
opacity: 0.85;
}
/* Sections */
.aro-section {
margin-bottom: 24px;
}
.aro-section {
margin-top: 40px;
margin-bottom: 40px;
}
.aro-section-title {
font-size: 1.3rem;
margin-bottom: 10px;
}
.aro-section-title {
margin-bottom: 18px !important;
padding-left: 6px;
border-left: 3px solid rgba(0, 200, 255, 0.9);
font-weight: 600;
letter-spacing: 0.5px;
}
/* Features */
.aro-feature-card {
height: 100%;
background: rgba(0, 0, 0, 0.7);
border-radius: 10px;
padding: 14px 14px 16px 14px;
border: 1px solid rgba(0, 150, 255, 0.25);
box-shadow: 0 0 18px rgba(0, 150, 255, 0.15);
backdrop-filter: blur(6px);
font-size: 0.85rem;
color: #dddddd;
}
.aro-feature-card h3 {
font-size: 0.95rem;
margin-bottom: 6px;
color: #ffffff;
}
.aro-feature-card:hover,
.aro-highlight-card:hover,
.aro-news-card:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(0, 200, 255, 0.25);
transition: 0.25s ease;
}
/* Highlights */
.aro-highlight-card {
height: 100%;
background: rgba(0, 0, 0, 0.78);
border-radius: 10px;
padding: 14px 14px 16px 14px;
border: 1px solid rgba(0, 150, 255, 0.25);
box-shadow: 0 0 18px rgba(0, 150, 255, 0.15);
backdrop-filter: blur(6px);
font-size: 0.85rem;
color: #dddddd;
}
.aro-highlight-card h3 {
font-size: 0.95rem;
margin-bottom: 6px;
color: #ffffff;
}
.aro-highlight-list {
font-size: 0.8rem;
margin-left: 1.25rem;
margin-top: 6px;
margin-bottom: 4px;
}
.aro-highlight-list li {
margin-bottom: 2px;
}
.aro-highlight-note {
font-size: 0.8rem;
opacity: 0.9;
margin-top: 4px;
}
/* News */
/* No scrollbox show all announcements normally */
.aro-news-wrapper {
max-height: none;
overflow-y: visible;
}
.aro-news-card {
background: rgba(0, 0, 0, 0.78);
border-radius: 10px;
border: 1px solid rgba(0, 150, 255, 0.25);
box-shadow: 0 0 18px rgba(0, 150, 255, 0.15);
backdrop-filter: blur(6px);
color: #dddddd;
}
.aro-news-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 10px 14px;
}
.aro-news-title {
font-size: 0.95rem;
font-weight: 600;
color: #ffffff;
}
.aro-news-body {
font-size: 0.85rem;
}
.aro-news-footer .card-footer-item {
font-size: 0.75rem;
}
.aro-news-meta {
display: block;
font-size: 0.75rem;
opacity: 0.8;
margin-top: 4px;
}
.aro-news-empty {
font-size: 0.9rem;
opacity: 0.9;
}
.aro-news-wrapper .column {
min-width: 400px;
}
/* Responsive tweaks */
@media (max-width: 768px) {
.aro-hero {
padding: 18px;
}
.aro-stats-bar {
flex-direction: column;
align-items: flex-start;
}
}
/* Global card style */
.aro-card,
.aro-feature-card,
.aro-highlight-card,
.aro-news-card,
.box,
.card {
border-radius: 12px !important;
backdrop-filter: blur(12px) !important;
background: rgba(0,0,0,0.55) !important;
border: 1px solid rgba(0, 200, 255, 0.22) !important;
box-shadow: 0 8px 30px rgba(0, 200, 255, 0.15) !important;
}
.nav-tabs .tab:not(.is-active):hover {
background: rgba(255,255,255,0.05);
box-shadow: 0 0 8px rgba(0,200,255,0.3);
}
.nav-tabs .is-active {
background: rgba(0, 200, 255, 0.15) !important;
border: 1px solid rgba(0, 200, 255, 0.35) !important;
box-shadow: 0 8px 30px rgba(0, 200, 255, 0.3) !important;
}
input, select, textarea {
background: rgba(0,0,0,0.4) !important;
border: 1px solid rgba(0, 200, 255, 0.25) !important;
border-radius: 8px !important;
color: #fff !important;
padding: 10px 12px !important;
}
input:focus {
outline: none !important;
border-color: rgba(0, 255, 255, 0.55) !important;
box-shadow: 0 0 12px rgba(0, 255, 255, 0.4) !important;
}
/* =========================
AnarchyRO Referral Page Final
========================= */
/* FORCE our own bullet */
.referral-tips li {
position: relative;
padding-left: 18px !important;
list-style: none !important;
}
.referral-tips li::before {
content: "" !important;
position: absolute;
left: 0;
top: 0;
color: #4fd1ff !important;
font-size: 20px !important;
font-weight: 900 !important;
line-height: 1;
}
.referral-page {
max-width: 1100px;
margin: 0 auto 40px auto;
}
/* Make every semi-transparent box on this page dark + sharp */
.referral-page .is-semi-transparent {
background: rgba(10, 15, 25, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.55) !important;
border-radius: 12px !important;
}
/* Header box extras */
.referral-header-box {
margin-bottom: 20px;
}
/* Titles */
.referral-card .title,
.referral-header-box .title,
.referral-card h3,
.referral-header-box h3 {
color: #ffffff !important;
font-weight: 800 !important;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}
/* Subtitle under main header */
.referral-header-box .subtitle {
color: #cfd8e3 !important;
}
/* Body text */
.referral-card p,
.referral-card label,
.referral-card .help,
.referral-header-box p {
color: #dce2ed !important;
}
/* Stats pills (if any) */
.referral-stats {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.referral-stat-pill {
padding: 6px 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(148, 163, 184, 0.5);
font-size: 11px;
}
.referral-stat-pill .stat-label {
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-right: 6px;
}
.referral-stat-pill .stat-value {
color: #e5e7eb;
font-weight: 600;
}
/* Tips list */
.referral-tips {
list-style: none;
padding-left: 0;
margin-top: 6px;
}
.referral-tips li {
margin-bottom: 2px;
}
.referral-tips li::before {
content: "";
color: #4fd1ff;
font-size: 12px;
font-weight: 700;
margin-right: 6px;
}
/* Inputs */
.referral-link-input,
.referral-form input.input {
background: #0f172a !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
font-weight: 600;
border-radius: 8px !important;
}
.referral-link-input:focus,
.referral-form input.input:focus {
border-color: #3bc9ff !important;
box-shadow: 0 0 0 2px rgba(59, 201, 255, 0.4) !important;
}
/* Copy button */
.referral-copy-btn {
min-width: 80px;
background: linear-gradient(90deg, #0fd9a4, #00c291) !important;
color: #fff !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 8px !important;
border: none !important;
}
.referral-copy-btn:hover {
background: linear-gradient(90deg, #0fc797, #00af83) !important;
}
/* Save Referrer button */
.referral-form button.button {
background: linear-gradient(90deg, #00d9ff, #00b7ff) !important;
color: #fff !important;
border: none !important;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: 8px !important;
}
.referral-form button.button:hover {
background: linear-gradient(90deg, #00c4e8, #009fd4) !important;
}
/* Step tags */
.referral-page .tag.is-info.is-light,
.referral-page .tag.is-warning.is-light {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
color: #fff !important;
font-weight: 700;
padding: 4px 10px;
border-radius: 6px;
backdrop-filter: blur(2px);
}
/* Status messages */
.referral-alert {
background: rgba(127, 29, 29, 0.35);
border-radius: 8px;
padding: 8px 10px;
border: 1px solid rgba(248, 113, 113, 0.6);
color: #fecaca;
margin-top: 6px;
}
.referral-ok {
background: rgba(22, 101, 52, 0.4);
border-radius: 8px;
padding: 6px 10px;
border: 1px solid rgba(52, 211, 153, 0.6);
color: #bbf7d0;
margin-top: 6px;
}
/* History table */
.referral-history-table thead th {
background: rgba(12, 18, 30, 0.95) !important;
color: #e8edf5 !important;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.07em;
}
.referral-history-table tbody td {
color: #dde4f0 !important;
}
.referral-history-table tbody tr:hover {
background: rgba(0, 132, 255, 0.25) !important;
}
/* Spacing */
.referral-page .column {
margin-bottom: 22px;
}
/* REMOVE all theme icons for lists inside referral page */
.referral-page ul li::before {
content: "" !important;
font-family: inherit !important;
background: none !important;
border: none !important;
}
/* =========================
Referral History Styling
========================= */
.referral-history-card {
margin-top: 10px;
}
/* Header + pills */
.referral-history-header {
margin-bottom: 12px;
align-items: flex-start;
}
.referral-history-sub {
opacity: 0.8;
}
.referral-history-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.referral-history-pill {
padding: 6px 10px;
border-radius: 999px;
background: radial-gradient(circle at top left,
rgba(148, 163, 184, 0.35),
rgba(15, 23, 42, 0.96));
border: 1px solid rgba(148, 163, 184, 0.5);
display: flex;
flex-direction: column;
min-width: 120px;
}
.referral-history-pill .pill-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #9ca3af;
}
.referral-history-pill .pill-value {
font-size: 14px;
font-weight: 600;
color: #e5e7eb;
}
.referral-history-pill.pill-green {
background: radial-gradient(circle at top left,
rgba(16, 185, 129, 0.35),
rgba(15, 23, 42, 0.96));
border-color: rgba(16, 185, 129, 0.6);
}
/* Table container */
.referral-history-table-wrap {
margin-top: 8px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.25);
background: radial-gradient(circle at top left,
rgba(30, 64, 175, 0.35),
rgba(15, 23, 42, 0.98));
}
/* Base table reset (override Bulma stripe borders) */
.referral-history-table {
margin-bottom: 0;
background: transparent;
font-size: 13px;
}
.referral-history-table th,
.referral-history-table td {
border: none;
padding: 8px 12px;
}
/* Header row */
.referral-history-table thead {
background: linear-gradient(
90deg,
rgba(59, 130, 246, 0.5),
rgba(129, 140, 248, 0.5)
);
}
.referral-history-table thead th {
color: #f9fafb;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
white-space: nowrap;
}
/* Body rows */
.referral-history-table tbody tr {
background: rgba(15, 23, 42, 0.85);
transition: background 0.18s ease, transform 0.18s ease,
box-shadow 0.18s ease;
}
.referral-history-table tbody tr:nth-child(even) {
background: rgba(15, 23, 42, 0.95);
}
.referral-history-table tbody tr:hover {
background: rgba(37, 99, 235, 0.25);
transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.6);
}
/* Cell content */
.referral-history-table td {
color: #e5e7eb;
}
/* Date in mono style */
.referral-date {
font-family: monospace;
font-size: 11px;
opacity: 0.8;
}
/* Buyer name */
.referral-buyer {
font-weight: 500;
}
/* Credits spent */
.referral-credits {
font-variant-numeric: tabular-nums;
}
/* Bonus pill in last column */
.bonus-pill {
display: inline-block;
padding: 4px 8px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.16);
border: 1px solid rgba(16, 185, 129, 0.65);
font-size: 12px;
font-weight: 600;
color: #6ee7b7;
font-variant-numeric: tabular-nums;
}
/* Responsive tweaks */
@media (max-width: 768px) {
.referral-history-summary {
margin-top: 8px;
justify-content: flex-start;
}
.referral-history-table thead th.col-date,
.referral-history-table td:nth-child(1) {
width: 36%;
}
.referral-history-table thead th.col-buyer,
.referral-history-table td:nth-child(2) {
width: 24%;
}
.referral-history-table {
font-size: 12px;
}
}
/* =========================
Who's Online Page Styling
========================= */
.online-page {
max-width: 1100px;
margin: 0 auto 40px auto;
}
/* Header card */
.online-header-card {
margin-bottom: 20px;
padding: 22px 26px 18px 26px;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
background: radial-gradient(circle at top left,
rgba(56, 189, 248, 0.18),
rgba(15, 23, 42, 0.96));
backdrop-filter: blur(18px);
color: #e5e7eb;
}
.online-header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.online-title {
font-size: 30px;
font-weight: 700;
letter-spacing: 0.03em;
margin: 0;
color: #f9fafb;
}
.online-subtitle {
margin-top: 8px;
font-size: 14px;
color: #cbd5f5;
}
.online-hidden-note {
margin-top: 6px;
font-size: 13px;
color: #9ca3af;
}
/* Pills */
.online-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
letter-spacing: 0.03em;
text-transform: uppercase;
border: 1px solid rgba(148, 163, 184, 0.5);
background: rgba(15, 23, 42, 0.8);
color: #e5e7eb;
}
.online-pill-live {
border-color: rgba(52, 211, 153, 0.8);
background: radial-gradient(circle at top left,
rgba(16, 185, 129, 0.22),
rgba(15, 23, 42, 0.98));
box-shadow: 0 0 25px rgba(16, 185, 129, 0.45);
color: #bbf7d0;
}
.online-pill-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 12px rgba(34, 197, 94, 0.9);
}
.online-pill-job {
font-size: 12px;
padding: 4px 10px;
border-color: rgba(59, 130, 246, 0.7);
background: radial-gradient(circle at top left,
rgba(59, 130, 246, 0.18),
rgba(15, 23, 42, 0.95));
}
/* Search toggle + buttons */
.online-search-toggle {
margin-top: 14px;
}
.online-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
text-decoration: none;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.6);
color: #e5e7eb;
transition: all 0.18s ease-out;
}
.online-search-btn:hover {
background: rgba(31, 41, 55, 1);
border-color: rgba(96, 165, 250, 0.85);
box-shadow: 0 0 18px rgba(59, 130, 246, 0.45);
}
/* Generic buttons used on this page only */
.btn-primary,
.btn-ghost {
cursor: pointer;
border-radius: 999px;
padding: 8px 18px;
font-size: 13px;
border: 1px solid transparent;
transition: all 0.18s ease-out;
}
.btn-primary {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #f9fafb;
border-color: rgba(34, 197, 94, 0.9);
box-shadow: 0 0 18px rgba(34, 197, 94, 0.55);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 0 24px rgba(34, 197, 94, 0.9);
}
.btn-ghost {
background: transparent;
color: #e5e7eb;
border-color: rgba(148, 163, 184, 0.7);
}
.btn-ghost:hover {
background: rgba(15, 23, 42, 0.95);
}
/* Search form layout */
.online-search-form {
margin: 12px 0 22px 0;
padding: 18px 20px;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.35);
background: rgba(15, 23, 42, 0.96);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.85);
backdrop-filter: blur(16px);
}
.online-search-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.online-field label {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 4px;
color: #9ca3af;
}
.online-field input[type="text"] {
width: 100%;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid rgba(51, 65, 85, 0.9);
background: rgba(15, 23, 42, 0.9);
color: #e5e7eb;
font-size: 13px;
}
.online-field input[type="text"]:focus {
outline: none;
border-color: rgba(59, 130, 246, 0.9);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.7);
}
.online-search-actions {
margin-top: 14px;
display: flex;
gap: 10px;
justify-content: flex-end;
}
/* Results info */
.online-info-text {
margin-bottom: 10px;
font-size: 13px;
color: #9ca3af;
}
/* Table wrapper + table */
.online-table-wrapper {
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.35);
background: radial-gradient(circle at top left,
rgba(34, 197, 94, 0.18),
rgba(15, 23, 42, 0.98));
box-shadow: 0 22px 40px rgba(0, 0, 0, 0.9);
}
.online-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.online-table thead {
background: rgba(15, 23, 42, 0.98);
}
.online-table th,
.online-table td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid rgba(30, 41, 59, 0.9);
color: #e5e7eb;
}
.online-table th {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #9ca3af;
}
.online-table tbody tr:nth-child(even) {
background: rgba(15, 23, 42, 0.95);
}
.online-table tbody tr:nth-child(odd) {
background: rgba(15, 23, 42, 0.9);
}
.online-table tbody tr:hover {
background: radial-gradient(circle at top left,
rgba(56, 189, 248, 0.09),
rgba(15, 23, 42, 0.98));
}
/* Character name column */
.online-char-name a {
color: #e5e7eb;
text-decoration: none;
font-weight: 600;
}
.online-char-name a:hover {
color: #22c55e;
}
/* Guild emblem */
.online-guild-emblem img {
width: 20px;
height: 20px;
border-radius: 4px;
}
/* Map tag */
.online-map-tag {
display: inline-flex;
align-items: center;
padding: 4px 9px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(96, 165, 250, 0.75);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Pagination */
.online-pagination {
margin-top: 14px;
text-align: center;
}
/* Empty state */
.online-empty-card {
margin-top: 18px;
padding: 24px 24px 20px 24px;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.4);
background: radial-gradient(circle at top left,
rgba(148, 163, 184, 0.16),
rgba(15, 23, 42, 0.98));
box-shadow: 0 20px 36px rgba(0, 0, 0, 0.9);
text-align: center;
color: #e5e7eb;
}
.online-empty-card h3 {
margin-bottom: 6px;
font-size: 20px;
}
/* Small screen tweaks */
@media (max-width: 840px) {
.online-search-grid {
grid-template-columns: 1fr;
}
.online-header-top {
flex-direction: column;
align-items: flex-start;
}
.online-table th,
.online-table td {
padding: 8px 10px;
}
}
/* Remove unwanted blank header spacing */
.online-header {
margin: 0 auto 20px auto;
padding: 0;
text-align: center;
}
/* Title */
.online-header h2 {
font-size: 34px;
font-weight: 700;
margin-bottom: 6px;
color: #f0f4ff;
text-shadow: 0 0 12px rgba(0, 255, 180, 0.35);
}
/* Subtitle */
.online-header .subtitle {
font-size: 14px;
color: #cbd5e1;
margin: 0;
}
/* Kill any default Flux background/padding */
.content-box h2,
.content-box h3,
.page-title,
#content h2,
#content h3 {
background: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
.online-page .info,
.online-page .paginator-info,
.online-page p {
background: transparent !important;
padding: 0 !important;
margin: 8px 0 !important;
box-shadow: none !important;
}
/* Fix unwanted white block on Who's Online page */
#content h3,
.online-page h3,
.online-info-text {
background: none !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}
/* Force style for the paginator info bar on Who is Online */
.online-info-bar p {
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
margin: 8px 0 16px 0 !important;
border-radius: 0 !important;
text-align: center;
color: #cbd5e1 !important; /* same as other subtitles */
font-size: 13px;
}
.online-info-bar {
max-width: 900px;
margin: 0 auto 8px auto;
border-bottom: 1px solid rgba(148, 163, 184, 0.3);
padding-bottom: 4px;
}
/* Tighten space between header text and table */
.online-header {
margin-bottom: 8px; /* or a bit lower if you want them closer */
}
/* Optional subtle divider under the info text */
.online-info-bar {
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
padding-bottom: 4px;
}
.online-header {
position: relative;
}
.online-header::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -12px;
width: 60%;
height: 2px;
background: linear-gradient(
90deg,
rgba(56, 189, 248, 0) 0%,
rgba(56, 189, 248, 0.6) 50%,
rgba(56, 189, 248, 0) 100%
);
border-radius: 999px;
}
.char-table-wrapper,
.online-table-wrapper {
animation: fadeIn 0.45s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.char-table tr:hover,
.online-table tr:hover {
background: rgba(56, 189, 248, 0.12);
box-shadow: inset 0 0 22px rgba(56, 189, 248, 0.35);
}
.char-table-wrapper::before,
.online-table-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0)
);
pointer-events: none;
}
.job-high-wizard { background:#6366f1; }
.job-sniper { background:#22c55e; }
.job-champion { background:#ec4899; }
.rank-1 { box-shadow: inset 0 0 20px gold; }
.rank-2 { box-shadow: inset 0 0 20px silver; }
.rank-3 { box-shadow: inset 0 0 20px #cd7f32; }
.map-hidden {
opacity: 0.5;
font-style: italic;
}
.live-dot {
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 10px #22c55e;
animation: pulse 1.4s infinite;
}
@keyframes pulse {
0% { transform: scale(0.9); opacity:0.7; }
50% { transform: scale(1.3); opacity:1; }
100% { transform: scale(0.9); opacity:0.7; }
}
.online-table tr:hover {
background: linear-gradient(
90deg,
rgba(56,189,248,0.18),
rgba(34,211,238,0.12),
rgba(56,189,248,0.18)
);
background-size: 300% 300%;
animation: glowmove 4s ease infinite;
}
@keyframes glowmove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.job-pill {
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.06);
}
/* Color themes per job customize freely */
.job-high-wizard { background: #6366f1; box-shadow:0 0 8px #6366f1aa; }
.job-sniper { background: #22c55e; box-shadow:0 0 8px #22c55eaa; }
.job-champion { background: #ec4899; box-shadow:0 0 8px #ec4899aa; }
.job-creator { background: #f59e0b; box-shadow:0 0 8px #f59e0baa; }
.job-blacksmith { background: #f97316; box-shadow:0 0 8px #f97316aa; }
.job-merchant { background: #64748b; box-shadow:0 0 8px #64748baa; }
.job-assassin { background: #14b8a6; box-shadow:0 0 8px #14b8a6aa; }
.job-priest { background: #eab308; box-shadow:0 0 8px #eab308aa; }
.job-knight { background: #3b82f6; box-shadow:0 0 8px #3b82f6aa; }
.job-crusader { background: #0ea5e9; box-shadow:0 0 8px #0ea5e9aa; }
.job-monk { background: #a855f7; box-shadow:0 0 8px #a855f7aa; }
.job-wizard { background: #8b5cf6; box-shadow:0 0 8px #8b5cf6aa; }
.job-paladin {
background: #0ea5e9; /* Light royal blue */
box-shadow: 0 0 10px #0ea5e9aa; /* Soft glowing aura */
border-color: rgba(255,255,255,0.25);
}
/* You can keep adding more */
/* =========================
Map Statistics Page (Enhanced)
========================= */
.mapstats-page {
max-width: 1100px;
margin: 0 auto 45px auto;
}
/* Header */
.mapstats-header-box {
margin-bottom: 25px;
padding: 28px 30px 26px 30px;
border-radius: 18px;
background: linear-gradient(140deg, rgba(45,75,125,0.55), rgba(10,18,35,0.95));
border: 1px solid rgba(255,255,255,0.08);
box-shadow:
0 20px 45px rgba(0,0,0,0.75),
0 0 25px rgba(80,150,255,0.25) inset;
}
.mapstats-title {
font-size: 32px;
font-weight: 700;
color: #f0f4ff;
margin-bottom: 6px;
}
.mapstats-subtitle {
font-size: 15px;
margin-bottom: 20px;
color: #c8d3e0;
}
.mapstats-subtitle-em {
color: #4dbdff;
font-weight: 600;
}
/* KPI boxes */
.mapstats-kpis {
display: flex;
gap: 15px;
margin-top: 10px;
}
.mapstats-kpi-card {
flex: 1;
padding: 15px 18px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(14,23,45,0.9), rgba(9,16,33,0.9));
border: 1px solid rgba(120,160,255,0.25);
box-shadow:
0 0 25px rgba(60,130,255,0.35),
inset 0 0 15px rgba(0,0,0,0.45);
display: flex;
justify-content: space-between;
align-items: center;
}
.mapstats-kpi-label {
font-size: 12px;
text-transform: uppercase;
color: #94a3b8;
letter-spacing: 0.06em;
}
.mapstats-kpi-value {
font-size: 26px;
font-weight: 800;
color: #ffffff;
}
/* Map list container */
.mapstats-list {
padding: 35px 25px;
border-radius: 18px;
background: linear-gradient(
160deg,
rgba(41,60,110,0.55),
rgba(8,15,30,0.92)
);
border: 1px solid rgba(255,255,255,0.07);
box-shadow:
0 20px 50px rgba(0,0,0,0.85),
0 0 20px rgba(0,150,255,0.20) inset;
}
/* Map row */
.mapstats-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 15px;
margin-bottom: 8px;
border-radius: 12px;
transition: 0.25s ease;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.mapstats-row:hover {
background: rgba(20,30,55,0.78);
box-shadow: 0 0 18px rgba(80,150,255,0.25);
transform: translateY(-1px);
}
/* Fix left-side pill */
.mapstats-map-pill {
padding: 8px 16px;
border-radius: 999px;
background: rgba(12,20,35,0.92);
border: 1px solid rgba(150,170,255,0.38);
box-shadow: inset 0 0 14px rgba(0,0,0,0.45);
max-width: 260px;
}
/* Map name text */
.mapstats-map-name {
font-weight: 600;
font-size: 15px;
white-space: nowrap;
color: #e2e8f0;
}
/* Count container */
.mapstats-count {
display: flex;
align-items: center;
gap: 6px;
min-width: 90px;
justify-content: flex-end;
}
.mapstats-row:hover {
background: none;
box-shadow: none;
transform: none;
}
/* Map name */
.mapstats-map-pill {
padding: 6px 14px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(20,32,55,0.9), rgba(10,20,35,0.9));
border: 1px solid rgba(150,170,255,0.35);
box-shadow: inset 0 0 14px rgba(0,0,0,0.45);
}
.mapstats-map-pill:hover {
background: rgba(20,30,55,0.92);
box-shadow:
0 0 12px rgba(80,150,255,0.45),
inset 0 0 10px rgba(0,0,0,0.55);
transform: translateY(-2px);
transition: 0.25s ease;
}
.mapstats-map-pill:hover {
padding-left: 20px;
padding-right: 20px;
}
/**********************************************
* CHARACTER RANKING DARK GLASS THEME
**********************************************/
.char-ranking-page {
max-width: 1200px;
margin: 30px auto 60px auto;
}
/* Shared dark glass cards (like Map Stats / Who's Online) */
.char-ranking-header,
.char-ranking-table-wrapper {
background: radial-gradient(circle at top left,
rgba(94, 234, 212, 0.14),
rgba(15, 23, 42, 0.98));
border-radius: 26px;
border: 1px solid rgba(148, 163, 184, 0.45);
box-shadow:
0 26px 60px rgba(15, 23, 42, 0.95),
0 0 0 1px rgba(15, 23, 42, 0.8) inset;
}
/* HEADER CARD
----------------------------------------- */
.char-ranking-header {
padding: 26px 32px 22px 32px;
margin-bottom: 24px;
}
.char-ranking-title-row .page-title {
font-size: 34px;
font-weight: 700;
color: #f9fafb;
text-shadow: 0 0 12px rgba(15, 23, 42, 0.9);
margin-bottom: 4px;
}
.char-ranking-title-row .page-subtitle {
font-size: 13px;
color: #cbd5e1;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.9;
}
/* FILTER BAR
----------------------------------------- */
.char-ranking-filters {
margin-top: 22px;
}
.char-filter-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
.char-filter-left {
display: flex;
align-items: center;
gap: 10px;
}
.char-filter-label {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94a3b8;
}
.char-filter-select-wrapper select.char-filter-select {
background: radial-gradient(circle at top left,
rgba(15, 23, 42, 0.6),
rgba(15, 23, 42, 0.95));
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.8);
color: #e5e7eb;
font-size: 13px;
padding: 7px 32px 7px 14px;
min-width: 140px;
outline: none;
cursor: pointer;
}
.char-filter-select-wrapper select.char-filter-select:focus,
.char-filter-select-wrapper select.char-filter-select:hover {
border-color: #38bdf8;
}
/* Filter buttons */
.char-filter-actions {
display: flex;
gap: 8px;
}
.char-filter-btn {
border-radius: 999px;
font-size: 13px;
padding: 7px 18px;
cursor: pointer;
border: none;
outline: none;
transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.char-filter-btn.btn-primary {
background: radial-gradient(circle at top left,
#38bdf8,
#1d4ed8);
color: #f9fafb;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.6);
}
.char-filter-btn.btn-primary:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 0 22px rgba(56, 189, 248, 0.9);
}
.char-filter-btn.btn-ghost {
background: rgba(15, 23, 42, 0.85);
color: #e2e8f0;
border: 1px solid rgba(148, 163, 184, 0.7);
}
.char-filter-btn.btn-ghost:hover {
background: rgba(15, 23, 42, 0.95);
}
/* TABLE CARD
----------------------------------------- */
.char-ranking-table-wrapper {
padding: 0;
overflow: hidden; /* match rounded corners */
}
/* Table layout */
.char-ranking-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
/* FORCE override Bulma/Flux header style */
.char-ranking-table thead th {
background: linear-gradient(to bottom,
rgba(15, 23, 42, 0.98),
rgba(15, 23, 42, 0.94)) !important;
color: #e5e7eb !important;
border-color: rgba(15, 23, 42, 0.9) !important;
padding: 13px 10px;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: left;
}
/* Edge padding in header */
.char-ranking-table thead th:first-child {
padding-left: 22px;
}
.char-ranking-table thead th:last-child {
padding-right: 22px;
}
/* Center only JOB CLASS header label */
.char-ranking-table thead th.col-job {
text-align: center;
}
/* Dark glass rows override any white table styles */
.char-ranking-table tbody tr {
background: rgba(15, 23, 42, 0.94) !important;
transition: background 0.14s ease, transform 0.08s ease;
}
.char-ranking-table tbody tr:nth-child(even) {
background: rgba(15, 23, 42, 0.9) !important;
}
.char-ranking-table tbody tr:hover {
background: rgba(30, 64, 175, 0.9) !important;
}
/* Cells */
.char-ranking-table td {
padding: 9px 10px;
color: #e5e7eb;
vertical-align: middle;
font-size: 13px;
}
.char-ranking-table tbody td:first-child {
padding-left: 22px;
}
.char-ranking-table tbody td:last-child {
padding-right: 22px;
}
/* Rank column yellow like Map Stats */
.col-rank {
font-weight: 700;
text-align: left;
color: #fde047;
font-size: 13px;
}
/* Character name links */
.col-char-name strong a {
color: #e5e7eb !important;
text-decoration: none;
}
.col-char-name strong a:hover {
color: #a5b4fc !important;
}
/* JOB CLASS CELL + PILL
----------------------------------------- */
.char-ranking-table tbody td.col-job {
text-align: center;
}
/* Universal blue job pill, tuned to match Who's Online tags */
.job-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
color: #eaf1ff;
letter-spacing: 0.06em;
text-transform: uppercase;
background: rgba(37, 99, 235, 0.85);
box-shadow:
0 2px 6px rgba(30, 58, 138, 0.45),
inset 0 0 6px rgba(59, 130, 246, 0.55);
transition: 0.15s ease;
}
.job-pill:hover {
filter: brightness(1.12);
}
/* Guild emblem & name */
.col-guild-emblem img {
width: 22px;
height: 22px;
border-radius: 4px;
}
.col-guild-name,
.col-guild-none {
font-size: 13px;
color: #cbd5e1;
}
/* Level / EXP numbers monospace for readability */
.col-base-lv,
.col-job-lv,
.col-base-exp,
.col-job-exp {
font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-size: 12px;
color: #cbd5e1;
}
/* TOP RANK HIGHLIGHT (row #1)
----------------------------------------- */
.char-ranking-table tr.top-ranked {
background: linear-gradient(90deg,
rgba(250, 204, 21, 0.26),
rgba(15, 23, 42, 0.96)) !important;
position: relative;
z-index: 1;
}
.char-ranking-table tr.top-ranked::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 100%;
background: linear-gradient(to bottom, #facc15, #f97316);
}
/* make sure content sits above gradient */
.char-ranking-table tr.top-ranked td {
position: relative;
z-index: 3;
}
/* Empty rows (if limit > character count) */
.char-ranking-table tr.empty-row td {
opacity: 0.12;
}
/* 'None' text */
.not-applicable {
opacity: 0.7;
font-style: italic;
}
/* MOBILE
----------------------------------------- */
@media (max-width: 900px) {
.char-ranking-page {
margin: 20px 10px 40px 10px;
}
.char-ranking-header {
padding: 20px 18px;
}
.char-ranking-title-row .page-title {
font-size: 26px;
}
.char-filter-row {
align-items: flex-start;
}
}
/**********************************************
* FINAL FIXES FORCE DARK TABLE + HEADER
**********************************************/
/* FIX 1 Force THEAD row background (not only TH) */
.char-ranking-table thead {
background: linear-gradient(to bottom,
rgba(15, 23, 42, 0.98),
rgba(15, 23, 42, 0.94)) !important;
}
/* FIX 2 Force ALL header cells */
.char-ranking-table thead tr th {
background: transparent !important;
color: #e5e7eb !important;
border-bottom: 1px solid rgba(30, 41, 59, 0.8) !important;
}
/* FIX 3 Table wrapper must clip properly (rounded corners) */
.char-ranking-table-wrapper {
border-radius: 26px !important;
overflow: hidden !important;
padding: 0 !important;
}
/* FIX 4 REMOVE all white backgrounds forced by Bulma */
.char-ranking-table,
.char-ranking-table tr,
.char-ranking-table td {
background: rgba(15, 23, 42, 0.94) !important;
}
/* FIX 5 Even row shading (dark glass) */
.char-ranking-table tbody tr:nth-child(even) td {
background: rgba(15, 23, 42, 0.90) !important;
}
/* FIX 6 Hover state */
.char-ranking-table tbody tr:hover td {
background: rgba(30, 64, 175, 0.90) !important;
}
/**********************************************
* FINAL TOP RANK FIX CLEAN GOLD HIGHLIGHT
**********************************************/
/* GOLD LEFT BAR ONLY (keeps highlight visible, subtle) */
.char-ranking-table tr.top-ranked {
background: rgba(15, 23, 42, 0.96) !important; /* normal row background */
position: relative;
}
.char-ranking-table tr.top-ranked::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 6px;
height: 100%;
background: linear-gradient(to bottom, #facc15, #f97316);
border-radius: 0 4px 4px 0;
}
/* Each cell gets a soft gold GLOW instead of GOLD FILL */
.char-ranking-table tr.top-ranked td {
background: rgba(250, 204, 21, 0.08) !important; /* very soft tint */
color: #f8fafc !important;
position: relative;
z-index: 2;
}
/* DARKEN the text inside top-ranked row so its readable */
.char-ranking-table tr.top-ranked td a,
.char-ranking-table tr.top-ranked td {
color: #f1f5f9 !important;
}
/* Ensure job pill stays bright & readable */
.char-ranking-table tr.top-ranked .job-pill {
background: rgba(37, 99, 235, 0.92) !important;
box-shadow:
0 2px 6px rgba(30, 58, 138, 0.45),
inset 0 0 6px rgba(59, 130, 246, 0.55) !important;
color: #fff !important;
}
/* Optional: softer spotlight effect on rank #1 row */
.char-ranking-table tr.top-ranked td {
background: rgba(15, 23, 42, 0.96) !important;
box-shadow:
0 0 0 1px rgba(250, 204, 21, 0.18),
0 0 22px rgba(250, 204, 21, 0.28);
}
/* Make the rank number itself look like a small badge */
.char-ranking-table tr.top-ranked .col-rank {
background: rgba(24, 24, 27, 0.9);
border-radius: 999px;
padding: 4px 14px;
display: inline-block;
}
/**********************************************
* TOP 1 / TOP 2 / TOP 3 PREMIUM LEADERBOARD
**********************************************/
/* Base styling shared by all top 3 */
.top-rank-1 td,
.top-rank-2 td,
.top-rank-3 td {
position: relative;
z-index: 2;
background: rgba(15, 23, 42, 0.96) !important; /* dark base */
color: #f1f5f9 !important;
}
/* LEFT COLOR BAR */
.top-rank-1::before,
.top-rank-2::before,
.top-rank-3::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 6px;
height: 100%;
border-radius: 0 4px 4px 0;
}
/* ?? TOP 1 GOLD */
.top-rank-1 td {
box-shadow:
0 0 0 1px rgba(250, 204, 21, 0.25),
0 0 22px rgba(250, 204, 21, 0.25) inset;
}
.top-rank-1::before {
background: linear-gradient(to bottom, #facc15, #f97316);
}
/* ?? TOP 2 SILVER */
.top-rank-2 td {
box-shadow:
0 0 0 1px rgba(203, 213, 225, 0.25),
0 0 22px rgba(203, 213, 225, 0.22) inset;
}
.top-rank-2::before {
background: linear-gradient(to bottom, #e2e8f0, #94a3b8);
}
/* ?? TOP 3 BRONZE */
.top-rank-3 td {
box-shadow:
0 0 0 1px rgba(205, 127, 50, 0.32),
0 0 22px rgba(205, 127, 50, 0.20) inset;
}
.top-rank-3::before {
background: linear-gradient(to bottom, #cd7f32, #8b4e1e);
}
/* Ensure job pill is unaffected and stays readable */
.top-rank-1 .job-pill,
.top-rank-2 .job-pill,
.top-rank-3 .job-pill {
background: rgba(37, 99, 235, 0.92) !important;
color: #fff !important;
box-shadow:
0 2px 6px rgba(30, 58, 138, 0.45),
inset 0 0 6px rgba(59, 130, 246, 0.55) !important;
}
/* Rank number badge (optional) */
.top-rank-1 .col-rank,
.top-rank-2 .col-rank,
.top-rank-3 .col-rank {
font-weight: 700;
padding: 4px 12px;
border-radius: 999px;
background: rgba(24, 24, 27, 0.85);
display: inline-block;
}
/**********************************************
* FIX SUBMENU BAR ON INTERNAL MODULE PAGES
**********************************************/
.tabs.is-centered.is-boxed {
background: radial-gradient(circle at top left,
rgba(15, 23, 42, 0.70),
rgba(15, 23, 42, 0.94)) !important;
padding: 15px 20px;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.4);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.45),
inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Ensure tab labels remain visible */
.tabs.is-boxed li a {
color: #e5e7eb !important;
font-weight: 600 !important;
}
/* Active tab */
.tabs.is-boxed li.is-active a {
background: rgba(30, 58, 138, 0.85) !important;
border-color: rgba(96, 165, 250, 0.6) !important;
box-shadow:
0 0 14px rgba(59, 130, 246, 0.4),
inset 0 0 6px rgba(37, 99, 235, 0.5);
color: #fff !important;
border-radius: 8px;
}
/* Prevent table fixes from affecting the submenu */
.tabs, .tabs * {
background-blend-mode: normal !important;
}
/**********************************************
* PREMIUM RANK NUMBER BADGES (Top 3)
**********************************************/
/**********************************************
* FIX TOP RANK BACKGROUND CONSISTENCY
**********************************************/
/* Remove forced opaque backgrounds */
.top-rank-1 td,
.top-rank-2 td,
.top-rank-3 td {
background: none !important; /* allow row normal bg */
position: relative;
z-index: 2;
}
/* Let normal table striping show through */
.char-ranking-table tr.top-rank-1,
.char-ranking-table tr.top-rank-2,
.char-ranking-table tr.top-rank-3 {
background: inherit !important; /* use same bg as other rows */
}
/* RE-ADD glow using an overlay (does NOT change row color) */
.top-rank-1::after,
.top-rank-2::after,
.top-rank-3::after {
content: "";
position: absolute;
inset: 0;
border-radius: 0;
pointer-events: none;
}
/* ?? GOLD glow */
.top-rank-1::after {
box-shadow: inset 0 0 18px rgba(250, 204, 21, 0.25);
}
/* ?? SILVER glow */
.top-rank-2::after {
box-shadow: inset 0 0 18px rgba(229, 231, 235, 0.22);
}
/* ?? BRONZE glow */
.top-rank-3::after {
box-shadow: inset 0 0 18px rgba(205, 127, 50, 0.22);
}
/**********************************************
* FIX TOP 3 ROW SEPARATOR LINE FULL WIDTH
**********************************************/
.top-rank-1::before,
.top-rank-2::before,
.top-rank-3::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px; /* aligns exactly with other row separators */
height: 1px;
background: rgba(255, 255, 255, 0.12); /* same as normal row line */
z-index: 1; /* UNDER the glow */
}
/* Ensure glow stays above the line */
.top-rank-1::after,
.top-rank-2::after,
.top-rank-3::after {
z-index: 2;
}
/**********************************************
* UNIVERSAL FULL-WIDTH ROW SEPARATOR LINES
**********************************************/
/* Apply the separator line to the entire table row */
.char-ranking-table tbody tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.30) !important;
}
/* Remove any existing per-cell borders to avoid double lines */
.char-ranking-table tbody tr td {
border: none !important;
}
/* Ensure glow overlays do NOT hide the separator */
.top-rank-1::after,
.top-rank-2::after,
.top-rank-3::after {
pointer-events: none;
z-index: 1; /* BELOW the border line */
}
/* Make separator always on top of glow */
.char-ranking-table tbody tr {
position: relative;
z-index: 5;
}
/* ===========================
DOWNLOAD PAGE STYLES
=========================== */
.dl-shell {
padding: 20px 25px 25px;
}
.dl-title {
font-size: 34px;
font-weight: 600;
margin-bottom: 10px;
color: #e8e8e8;
letter-spacing: 1px;
}
.dl-subtitle {
font-size: 16px;
color: #c8c8c8;
margin-bottom: 20px;
opacity: 0.7;
}
/* layout */
.dl-grid {
display: flex;
justify-content: space-between;
gap: 35px;
margin-top: 35px;
flex-wrap: wrap;
}
/* card base */
.dl-card {
flex: 1 1 45%;
max-width: 600px;
background: rgba(0, 0, 0, 0.55);
padding: 30px 35px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.45);
color: #fff;
}
.dl-card-full {
box-shadow: 0 25px 45px rgba(0, 150, 255, 0.45);
}
/* headings & tags */
.dl-card-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 10px;
color: #e3e3e3;
text-transform: uppercase;
}
.dl-card-tag {
font-size: 12px;
background: rgba(255, 255, 255, 0.15);
padding: 4px 12px;
border-radius: 30px;
text-transform: uppercase;
display: inline-block;
margin-bottom: 20px;
color: #f0f0f0;
}
.dl-card-tag.alt {
background: rgba(0, 150, 255, 0.25);
}
/* body text & list */
.dl-card-text {
font-size: 14px;
opacity: 0.85;
margin-bottom: 12px;
color: #d6d6d6;
}
.dl-list {
list-style: none;
margin: 0 0 15px 0;
padding: 0;
}
.dl-list li {
font-size: 13px;
margin-bottom: 4px;
color: #d0d0d0;
}
/* optional separator */
.dl-card hr,
.dl-separator {
border: none;
height: 1px;
margin: 10px 0 20px 0;
background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0.25;
}
/* button */
.dl-btn-primary {
display: block;
width: 100%;
background: #0087ff;
padding: 15px 0;
border-radius: 35px;
color: #fff !important;
font-weight: 700;
font-size: 14px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
border: none;
margin-top: 20px;
transition: 0.2s;
}
.dl-btn-primary:hover {
background: #0da0ff;
}
/* note under cards */
.dl-note {
margin-top: 15px;
font-size: 12px;
color: #bcbcbc;
}
/* mobile tweaks */
@media (max-width: 900px) {
.dl-grid {
flex-direction: column;
gap: 20px;
}
.dl-card {
max-width: 100%;
padding: 20px;
}
.dl-shell {
padding: 15px;
}
}
.dl-card {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dl-grid {
gap: 30px;
margin-top: 25px;
}
.dl-title {
margin-bottom: 6px;
}
.dl-subtitle {
margin-bottom: 30px;
}
/* ===========================
DOWNLOAD PAGE REFINEMENTS
=========================== */
.dl-title {
font-size: 34px;
font-weight: 700;
margin-bottom: 6px;
color: #f0f0f0;
letter-spacing: 1px;
}
.dl-subtitle {
font-size: 16px;
color: #cccccc;
margin-bottom: 30px;
opacity: 0.8;
}
/* layout */
.dl-grid {
display: flex;
justify-content: space-between;
gap: 30px;
margin-top: 20px;
flex-wrap: wrap;
}
/* card */
.dl-card {
flex: 1 1 48%;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 22px;
padding: 35px 40px;
backdrop-filter: blur(12px);
box-shadow: 0 12px 35px rgba(0,0,0,0.45);
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* hover animation */
.dl-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 45px rgba(0,150,255,0.25);
}
/* title */
.dl-card-title {
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
color: #e6e6e6;
margin-bottom: 12px;
}
/* small tag */
.dl-card-tag {
font-size: 12px;
background: rgba(255,255,255,0.15);
padding: 4px 14px;
border-radius: 30px;
display: inline-block;
margin-bottom: 18px;
letter-spacing: 0.5px;
}
.dl-card-tag.alt {
background: rgba(0,150,255,0.25);
}
/* description */
.dl-card-text {
font-size: 14px;
opacity: 0.9;
margin-bottom: 14px;
line-height: 1.45;
}
/* list items */
.dl-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.dl-list li {
margin-bottom: 6px;
font-size: 14px;
opacity: 0.9;
position: relative;
padding-left: 18px;
}
.dl-list li::before {
content: "";
position: absolute;
left: 0;
opacity: 0.6;
}
/* separator */
.dl-separator {
border: none;
height: 1px;
margin: 20px 0;
background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
opacity: 0.25;
}
/* button */
.dl-btn-primary {
width: 100%;
background: #0087ff;
padding: 15px 0;
border-radius: 35px;
color: #fff !important;
font-weight: 700;
text-align: center;
margin-top: 25px;
letter-spacing: 0.5px;
transition: 0.2s;
}
.dl-btn-primary:hover {
background: #0da0ff;
}
/* mobile fixes */
@media (max-width: 768px) {
.dl-grid {
flex-direction: column;
gap: 25px;
}
.dl-card {
flex: 1 1 100%;
padding: 25px;
}
.dl-title {
text-align: center;
}
.dl-subtitle {
text-align: center;
}
}
.dl-list li::before {
content: "\2714"; /* check mark */
position: absolute;
left: 0;
top: 0;
opacity: 0.7;
font-size: 13px;
}
.dl-card {
transition: 0.25s ease;
}
.dl-card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 45px rgba(0, 150, 255, 0.25);
}
.dl-title {
text-shadow: 0 0 8px rgba(0,150,255,0.25);
}
.dl-list li i {
color: #0da0ff;
margin-right: 8px;
}
.dl-separator {
background: linear-gradient(90deg, rgba(0,150,255,0.7), rgba(0,150,255,0));
}
.dl-card-tag {
background: rgba(0,150,255,0.25);
border: 1px solid rgba(0,150,255,0.4);
color: #dff6ff;
}
@media (max-width: 600px) {
.dl-btn-primary {
font-size: 13px;
padding: 14px;
}
}
.dl-note {
font-size: 12px;
opacity: 0.65;
margin-top: 8px;
}
.dl-card-full {
position: relative;
}
.dl-card-full::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: calc(100% + 40px);
height: calc(100% + 40px);
background: radial-gradient(circle, rgba(0,150,255,0.15), transparent 70%);
z-index: -1;
}
.dl-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
.dl-card hr {
background: linear-gradient(90deg, #33aaff 0%, rgba(255,255,255,0) 100%);
opacity: 0.45;
}
.dl-icon {
margin-right: 8px;
font-size: 16px;
opacity: 0.85;
}
.dl-list {
list-style: none;
padding-left: 0;
margin: 0 0 20px 0;
}
.dl-list li {
position: relative;
padding-left: 22px;
margin-bottom: 6px;
font-size: 14px;
color: #d0d0d0; /* slightly softened text color */
}
.dl-list li::before {
content: "?";
position: absolute;
left: 0;
top: 0;
color: #23a8ff; /* blue check icon */
font-weight: 700;
}
/* FORCE CHECKMARK ICON FOR DOWNLOAD LISTS */
.dl-list li {
list-style: none !important;
position: relative !important;
padding-left: 26px !important;
margin-bottom: 8px !important;
font-size: 15px !important;
color: #d0d0d0 !important;
}
.dl-list li::before {
content: "\2713"; /* ? Unicode checkmark */
position: absolute;
left: 0;
top: 0;
font-size: 16px;
font-weight: 700;
color: #23A8FF; /* Bluish AnarchyRO accent */
opacity: 0.9;
}
.dl-grid-one {
justify-content: center;
}
.dl-grid-two {
justify-content: space-between;
}
.dl-grid {
display: flex;
gap: 35px;
margin-top: 35px;
flex-wrap: wrap;
}
/* When both cards are shown */
.dl-grid-two {
justify-content: space-between;
}
/* When only Full Client is shown */
.dl-grid-one {
justify-content: center;
}
/* Optional: prevent card from stretching too wide */
.dl-card {
max-width: 600px;
flex: 1 1 480px;
}
/* News page layout */
.news-page {
max-width: 1100px;
margin: 0 auto;
}
.news-page-header {
text-align: center;
margin-bottom: 1.75rem;
}
.news-pill {
display: inline-block;
padding: 0.6rem 2.4rem;
border-radius: 999px;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
background: linear-gradient(135deg, #1b6dff, #4fd1ff);
color: #f5f7ff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.news-subtitle {
margin-top: 0.75rem;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
/* News list / cards */
.news-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.news-card {
position: relative;
padding: 1.5rem 1.6rem 1.3rem;
border-radius: 16px;
background: rgba(5, 12, 32, 0.82);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.04);
backdrop-filter: blur(18px);
}
.news-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
opacity: 0.75;
pointer-events: none;
}
.news-card-header {
margin-bottom: 0.75rem;
}
.news-title {
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 0.35rem;
color: #f9fbff;
}
.news-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
color: rgba(220, 230, 255, 0.75);
}
.news-author {
font-weight: 500;
}
.news-dot {
opacity: 0.6;
}
.news-updated {
font-style: italic;
opacity: 0.85;
}
.news-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(232, 238, 255, 0.9);
margin-bottom: 0.9rem;
}
.news-body p {
margin-bottom: 0.7rem;
}
/* Link button */
.news-card-footer {
display: flex;
justify-content: flex-end;
}
.news-link-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 1.2rem;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 999px;
border: 1px solid rgba(79, 209, 255, 0.8);
background: rgba(12, 32, 72, 0.9);
color: #e6f7ff;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.news-link-btn:hover {
transform: translateY(-1px);
background: rgba(30, 93, 200, 0.98);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}
/* Empty state */
.news-empty {
text-align: center;
margin-top: 2rem;
font-size: 0.9rem;
color: rgba(220, 230, 255, 0.8);
}
/* Mobile tweaks */
@media (max-width: 768px) {
.news-card {
padding: 1.25rem 1.1rem 1.1rem;
}
.news-title {
font-size: 1rem;
}
.news-subtitle {
font-size: 0.85rem;
padding: 0 0.75rem;
}
}
/* --- Fine-tuning for News page --- */
/* Put some space between announcements pill and first card */
.news-page {
margin-top: 1.2rem;
}
/* Card spacing for multiple news posts */
.news-card + .news-card {
margin-top: 1rem;
}
/* Stronger separation between header (title/meta) and body */
.news-card-header {
padding-bottom: 0.6rem;
margin-bottom: 0.9rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Improve readability of long announcements */
.news-body {
max-width: 80ch; /* keeps lines from being too wide */
margin-right: auto;
}
/* Make the news title + byline stand out a bit more */
.news-title {
font-size: 1.1rem;
letter-spacing: 0.02em;
}
.news-meta {
font-size: 0.8rem;
text-transform: none;
opacity: 0.85;
}
/* Slight hover lift for each card */
.news-card {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.news-card:hover {
transform: translateY(-2px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);
}
/* Better spacing on mobile */
@media (max-width: 768px) {
.news-page {
margin-top: 0.8rem;
}
.news-card-header {
margin-bottom: 0.7rem;
}
.news-body {
max-width: 100%;
font-size: 0.88rem;
}
}
/* ---------------------------------------
Announcements Header Area
----------------------------------------*/
.news-page-header {
margin-top: 0.5rem; /* reduced gap */
margin-bottom: 1rem; /* tighter spacing */
}
.news-pill {
margin-bottom: 0.5rem;
}
.news-subtitle {
margin-top: 0.3rem;
margin-bottom: 1.2rem; /* reduced gap before first card */
}
/* ---------------------------------------
News Card Alignment
----------------------------------------*/
.news-list {
margin-top: 0.2rem; /* removes oversized vertical gap */
}
.news-card {
margin-top: 0.75rem; /* card spacing */
border-radius: 18px; /* match screenshot */
padding: 1.8rem; /* slight increase for clarity */
}
/* Thin separator below card title */
.news-card-header {
padding-bottom: 0.7rem;
margin-bottom: 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Align main card text left with the header container */
.news-body {
margin-left: 0.1rem;
}
/* ---------------------------------------
Make Overall Block More Compact
----------------------------------------*/
.server-status-wrapper.box.is-semi-dark-transparent {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
/* ---------------------------------------
Mobile
----------------------------------------*/
@media (max-width: 768px) {
.news-card {
padding: 1.2rem 1rem;
}
}
/* Smooth fade under announcements header */
.news-page-header::after {
content: "";
display: block;
width: 60%;
margin: 8px auto 0;
height: 10px;
background: radial-gradient(
ellipse at center,
rgba(255,255,255,0.14) 0,
rgba(255,255,255,0.03) 40%,
rgba(255,255,255,0) 70%
);
border: none;
}
/* Final polish for Announcements spacing */
/* Remove horizontal line / fade we added earlier */
.news-page-header::after {
display: none !important;
}
/* Tighten gap between subtitle and first card */
.news-list {
margin-top: 0 !important;
}
.news-card:first-child {
margin-top: 0.6rem;
}
/* ============================
CMS / Rules Page Styling
============================ */
.cms-page {
max-width: 960px;
margin: 1.5rem auto 2.5rem;
padding: 1.75rem 2.25rem;
border-radius: 14px;
background: rgba(6, 10, 24, 0.92);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(6px);
color: #e3e7ff;
}
.cms-page-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 1.25rem;
}
.cms-page-header h2 {
margin: 0;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
}
.cms-page-meta {
font-size: 0.78rem;
opacity: 0.7;
white-space: nowrap;
}
/* Main text */
.cms-page-body {
font-size: 0.95rem;
line-height: 1.6;
}
/* Headings inside rules body */
.cms-page-body h3,
.cms-page-body h4 {
margin-top: 1.4rem;
margin-bottom: 0.35rem;
font-weight: 600;
color: #ffffff;
}
/* Numbered + bullet lists */
.cms-page-body ol,
.cms-page-body ul {
margin: 0.3rem 0 1rem 1.4rem;
padding-left: 0.2rem;
}
.cms-page-body li + li {
margin-top: 0.25rem;
}
/* Strong labels (e.g., "Server Rules & Policies") */
.cms-page-body strong {
color: #ffffff;
}
/* Mobile tweaks */
@media (max-width: 768px) {
.cms-page {
margin: 1rem;
padding: 1.25rem 1.4rem;
}
.cms-page-header {
flex-direction: column;
align-items: flex-start;
}
.cms-page-meta {
white-space: normal;
}
}
/* ============================================
Improved CMS Rule Page UI (AnarchyRO Styling)
============================================ */
.cms-page {
max-width: 1000px;
margin: 2rem auto;
padding: 2rem 2.5rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
box-shadow: 0 8px 28px rgba(0,0,0,0.45);
color: #e8e8ea;
}
/* RULES header */
.cms-page-header h2 {
margin: 0;
padding-bottom: 1rem;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1px;
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* Modified date */
.cms-page-meta {
font-size: 0.78rem;
opacity: 0.7;
margin-top: 0.3rem;
}
/* MAIN BODY */
.cms-page-body {
margin-top: 1.8rem;
font-size: 0.98rem;
line-height: 1.65;
}
/* Section headers inside rule content */
.cms-page-body strong {
font-size: 1.05rem;
color: #ffffff;
}
/* Numbered lists */
.cms-page-body ol {
margin-left: 1.4rem;
margin-bottom: 1rem;
}
.cms-page-body ol > li {
margin-bottom: 0.6rem;
font-weight: 600;
}
/* Bullet sub-items */
.cms-page-body ul {
margin-top: 0.4rem;
margin-left: 1.2rem;
}
.cms-page-body ul > li {
margin-bottom: 0.35rem;
color: #d5d6e0;
font-weight: 400;
}
/* Improve spacing between major sections */
.cms-page-body ol > li + li {
margin-top: 1.1rem;
}
/* MOBILE */
@media (max-width: 768px) {
.cms-page {
padding: 1.4rem 1.2rem;
border-radius: 12px;
}
.cms-page-header h2 {
font-size: 1.3rem;
}
.cms-page-body {
font-size: 0.95rem;
}
}
/* Unified CMS Page Box */
.content-wrapper {
padding: 2rem;
margin: 2rem auto;
border-radius: 14px;
background: rgba(8, 12, 22, 0.75);
backdrop-filter: blur(6px);
box-shadow: 0 8px 30px rgba(0,0,0,0.45);
color: #e4e7f1;
max-width: 1100px;
}
/* Title */
.content-header h2 {
margin: 0 0 1rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
color: #ffffff;
}
/* Body text */
.content-body {
font-size: 1rem;
line-height: 1.6;
}
/* Numbered sections */
.content-body ol {
margin-left: 1.4rem;
margin-top: 1rem;
}
.content-body ol > li {
margin-top: 0.8rem;
font-weight: 600;
}
/* Bullet list items */
.content-body ul {
margin-left: 1.4rem;
margin-top: 0.4rem;
}
.content-body ul li {
margin: 0.25rem 0;
font-weight: 400;
color: #d5d9e4;
}
/* Updated timestamp */
.content-updated {
margin-top: 1.5rem;
opacity: 0.7;
font-size: 0.8rem;
}
/* Mobile */
@media(max-width: 768px) {
.content-wrapper {
padding: 1.4rem;
}
}
/* ===== Fix inner white panel on CMS pages (Rules, etc.) ===== */
/* Remove the light inner box that the CMS content creates */
.content-wrapper .content-body > div {
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* Tidy spacing inside the rules page */
.content-wrapper .content-body {
padding-top: 1.5rem;
font-size: 0.98rem;
line-height: 1.6;
}
/* Style the "RULES" heading inside the content */
.content-wrapper .content-body h2:first-child {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #ffffff;
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 0.8rem;
}
/* Lists inside rules */
.content-wrapper .content-body ol {
margin-left: 1.4rem;
margin-top: 1rem;
}
.content-wrapper .content-body ol > li {
margin-top: 0.8rem;
font-weight: 600;
}
.content-wrapper .content-body ul {
margin-left: 1.4rem;
margin-top: 0.4rem;
}
.content-wrapper .content-body ul > li {
margin: 0.25rem 0;
font-weight: 400;
color: #d5d9e4;
}
/* ============================
Kill white inner panel (Rules)
============================ */
/* Remove background from the content area itself */
.content-wrapper .content-body {
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
padding: 1.5rem 0 0 !important;
}
/* Remove any background colors inside the body (the white box) */
.content-wrapper .content-body * {
background-color: transparent !important;
}
/* Optional: make the RULES heading clean */
.content-wrapper .content-body h2:first-child {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #ffffff;
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 0.8rem;
}
/* ===========================
War of Emperium Section
=========================== */
.woe-wrapper {
margin: 24px auto 40px;
padding: 24px 28px;
border-radius: 18px;
background: rgba(15, 17, 26, 0.92);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
position: relative;
overflow: hidden;
}
/* subtle glow bar at top */
.woe-wrapper::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at top center,
rgba(0, 208, 255, 0.12),
transparent 55%);
opacity: 0.9;
}
.woe-header {
position: relative;
margin-bottom: 18px;
}
.woe-title {
margin: 0 0 10px;
font-size: 20px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.woe-title-pill {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: radial-gradient(circle at top left,
rgba(0, 190, 255, 0.35),
rgba(0, 0, 0, 0.7));
font-weight: 600;
font-size: 12px;
}
.woe-sub {
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: 13px;
}
.woe-server-time {
margin: 4px 0 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
}
.woe-server-time-value {
font-weight: 600;
padding-left: 4px;
color: #ffd76b;
}
/* Table styling */
.woe-body {
position: relative;
margin-top: 10px;
overflow-x: auto;
}
.woe-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.woe-table th,
.woe-table td {
padding: 10px 12px;
text-align: left;
}
.woe-table th {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
}
.woe-server-row + .woe-time-row td {
border-top: none;
}
.woe-server-name {
font-weight: 600;
white-space: nowrap;
border-right: 1px solid rgba(255, 255, 255, 0.06);
color: #ffffff;
background: rgba(0, 0, 0, 0.18);
}
.woe-time-row:nth-child(odd) td {
background: rgba(255, 255, 255, 0.01);
}
.woe-time-row:nth-child(even) td {
background: rgba(0, 0, 0, 0.18);
}
.woe-time-cell {
white-space: nowrap;
}
.woe-day {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 6px;
}
.woe-hour {
font-weight: 600;
font-size: 13px;
}
.woe-tilde {
width: 18px;
text-align: center;
opacity: 0.6;
}
/* Empty state */
.woe-empty-state {
position: relative;
margin-top: 10px;
padding: 14px 16px;
border-radius: 12px;
border: 1px dashed rgba(255, 255, 255, 0.18);
background: rgba(0, 0, 0, 0.35);
text-align: center;
}
.woe-empty-text {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.72);
}
/* --- WoE empty state (final centered compact card) --- */
.woe-empty-state-large {
display: block;
width: 70%; /* control width */
max-width: 760px; /* prevent it from being too wide */
margin: 20px auto; /* center horizontally */
padding: 22px 28px;
border-radius: 16px;
background: rgba(0, 0, 0, 0.45);
border: 1px dashed rgba(255, 255, 255, 0.22);
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.woe-empty-heading {
font-size: 15px;
font-weight: 700;
margin-bottom: 6px;
color: rgba(255, 255, 255, 0.95);
}
.woe-empty-text {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.80);
}
.woe-empty-sub {
margin-top: 4px;
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
}
.woe-wrapper {
margin: 24px auto 32px;
padding: 20px 24px;
}
/* --- Inner content box for WoE (final corrected size) --- */
.woe-inner {
width: 70%;
max-width: 1000px;
margin: 0 auto;
padding: 8px 40px 35px;; /* ? reduced top padding again */
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px);
border-radius: 20px;
box-shadow:
0 0 40px rgba(0, 180, 255, 0.22) inset,
0 0 18px rgba(0, 0, 0, 0.45);
}
/* ============================
GLOBAL SECTION TITLE STYLE
Matches Rankings, Rules, News
============================ */
.section-title {
margin: 0 0 18px;
text-align: left;
}
.section-title span {
display: inline-block;
padding: 7px 18px;
/* Rounded pill */
border-radius: 999px;
/* Gradient matching your theme */
background: linear-gradient(
135deg,
rgba(0, 180, 255, 0.35),
rgba(0, 0, 0, 0.55)
);
/* Border to match theme style */
border: 1px solid rgba(255, 255, 255, 0.12);
/* Text style */
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
font-weight: 600;
/* Subtle glowing highlight */
box-shadow:
0 0 12px rgba(0, 200, 255, 0.18),
inset 0 0 8px rgba(255, 255, 255, 0.08);
}
/* Outer WoE wrapper (grey box) */
.woe-wrapper {
width: 95%;
max-width: 1350px;
margin: 30px auto 40px;
padding: 25px 25px; /* reduce padding */
border-radius: 22px;
background: rgba(15, 17, 26, 0.9);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7);
}
@media (max-width: 768px) {
.woe-inner {
width: 90%;
padding: 14px 18px 24px;
}
.woe-empty-state-large {
width: 100%;
max-width: none;
padding: 16px 18px;
}
}
/* ===============================
Castles page Final clean style
Matches Character Ranking theme
=============================== */
/* Outer wrapper (big frosted panel) */
.castle-page-wrapper {
width: 95%;
max-width: 1350px;
margin: 32px auto 40px;
padding: 26px 26px 32px;
border-radius: 26px;
background: radial-gradient(circle at top,
rgba(75, 110, 170, 0.35),
rgba(5, 9, 20, 0.96));
box-shadow:
0 22px 45px rgba(0, 0, 0, 0.85),
inset 0 0 40px rgba(255, 255, 255, 0.02);
}
/* Top header card (title + subtitle) */
.castle-page-header {
padding: 24px 30px 22px;
border-radius: 22px;
background: linear-gradient(135deg, #283852, #111827);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 180, 255, 0.25);
margin-bottom: 22px;
}
.castle-page-title {
margin: 0 0 4px;
font-size: 30px;
font-weight: 700;
letter-spacing: 0.04em;
color: #f5f7ff;
}
.castle-page-subtitle {
margin: 0;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgba(214, 225, 255, 0.72);
}
/* Table card (dark rounded panel) */
.castle-table-card {
margin-top: 14px;
border-radius: 24px;
padding: 0;
background: radial-gradient(circle at top,
rgba(72, 106, 177, 0.45),
rgba(6, 12, 30, 0.96));
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.9),
inset 0 0 20px rgba(255, 255, 255, 0.02);
overflow: hidden;
/* scroll if list is long, but keep header visible */
max-height: 600px;
overflow-y: auto;
}
/* Table base */
.castle-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
color: #f4f7ff;
}
/* Header row */
.castle-table thead th {
position: sticky;
top: 0;
z-index: 2;
padding: 12px 18px;
text-align: left;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
background: linear-gradient(180deg, #1a2337 0%, #0e1624 100%);
color: #ffffff;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Body cells */
.castle-table tbody td {
padding: 12px 18px;
font-size: 14px;
color: #e8eeff;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
background: transparent; /* base stripes below */
transition: background 0.16s ease, box-shadow 0.16s ease;
}
/* Row striping (like ranking) */
.castle-table tbody tr:nth-child(odd) td {
background-color: #0c1626;
}
.castle-table tbody tr:nth-child(even) td {
background-color: #0e1a2c;
}
/* Hover highlight (no weird gradient bug) */
.castle-table tbody tr:hover td {
background-color: #151f34;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* Column-specific tweaks */
.castle-col-id {
width: 80px;
text-align: center;
font-weight: 600;
color: rgba(240, 246, 255, 0.9);
}
.castle-col-name {
font-weight: 500;
}
.castle-col-guild {
white-space: nowrap;
}
.castle-col-econ {
width: 110px;
text-align: right;
font-variant-numeric: tabular-nums;
color: rgba(233, 240, 255, 0.9);
}
/* Guild link & emblem */
.castle-col-guild a {
color: #8bd3ff;
text-decoration: none;
font-weight: 500;
}
.castle-col-guild a:hover {
color: #ffffff;
}
.castle-guild-emblem {
width: 20px;
height: 20px;
border-radius: 4px;
margin-right: 6px;
vertical-align: middle;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
/* Optional soft glow on hover only */
.castle-col-guild:hover .castle-guild-emblem {
animation: castleEmblemGlow 1.8s ease-in-out infinite;
}
@keyframes castleEmblemGlow {
0% { box-shadow: 0 0 0 rgba(0, 180, 255, 0.0); }
50% { box-shadow: 0 0 10px rgba(0, 180, 255, 0.7); }
100% { box-shadow: 0 0 0 rgba(0, 180, 255, 0.0); }
}
/* "None" label when no guild */
.castle-none-label {
opacity: 0.6;
font-style: italic;
}
/* Empty-state card */
.castle-empty-card {
margin-top: 18px;
padding: 18px 20px;
border-radius: 16px;
background: rgba(7, 15, 32, 0.95);
text-align: center;
color: rgba(230, 237, 255, 0.9);
}
/* Mobile tweaks */
@media (max-width: 768px) {
.castle-page-wrapper {
width: 98%;
padding: 18px 12px 24px;
}
.castle-page-header {
padding: 18px 16px;
}
.castle-page-title {
font-size: 24px;
}
.castle-table-card {
max-height: none; /* let page scroll instead of inner panel on mobile */
}
.castle-table thead th,
.castle-table tbody td {
padding: 9px 10px;
font-size: 12px;
}
}