:root { - bg: #030201; - panel: #0b0806; - panel2: #15100c; - panel3: #21150c; - red: #7f1609; - red2: #b52d13; - gold: #d99632; - gold2: #ffd976; - gold3: #fff2bc; - text: #ead8b5; - muted: #b39d78; - line: rgba(217,150,50.38); - green: #58f078; - blue: #5865f2;
} * { box-sizing: border-box;
} html { scroll-behavior: smooth;
} body { margin: 0; min-height: 100vh; font-family: Verdana, Arial, sans-serif; color: var( - text); background: radial-gradient(circle at 50% 0%, rgba(149,28,10.45), transparent 28%), radial-gradient(circle at 82% 16%, rgba(255,124,27.20), transparent 26%), linear-gradient(rgba(2,1,1.55), rgba(2,1,1.98)), #030201;
} body:before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .55; z-index: 0; background-image: radial-gradient(circle, rgba(255,188,68.45) 0 1px, transparent 2px), radial-gradient(circle, rgba(255,75,24.28) 0 1px, transparent 2px); background-size: 120px 120px, 210px 210px; animation: embers 14s linear infinite;
} @keyframes embers { from { background-position: 0 120px, 70px 180px; } to { background-position: 0 -260px, 70px -340px; }
} a { color: var( - gold2); text-decoration: none;
} a:hover { color: var( - gold3);
} .page { position: relative; z-index: 2; width: 1420px; max-width: calc(100% - 24px); margin: 0 auto; padding: 14px 0 32px;
} /* TOP */
.topbar { height: 38px; border: 1px solid rgba(217,150,50.30); background: linear-gradient(#160d08, #050403); border-radius: 8px; box-shadow: 0 16px 36px rgba(0,0,0.62); display: flex; align-items: center; justify-content: space-between; color: #c7ad82; font-size: 12px; padding: 0 14px;
} .topbar b { color: var( - gold2);
} .status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(217,150,50.28); background: rgba(0,0,0.34); font-weight: bold;
} .dot { width: 9px; height: 9px; border-radius: 99px; background: var( - green); box-shadow: 0 0 12px var( - green);
} .dot.off { background: #ff443a; box-shadow: 0 0 12px #ff443a;
} /* HERO */
.hero { position: relative; margin-top: 12px; min-height: 545px; border: 1px solid rgba(217,150,50.40); border-radius: 12px; overflow: hidden; background: linear-gradient(90deg, rgba(4,2,1.96) 0%, rgba(8,4,2.83) 35%, rgba(8,4,2.28) 70%, rgba(4,2,1.72) 100%), radial-gradient(circle at 76% 45%, rgba(255,78,20.44), transparent 26%), radial-gradient(circle at 66% 68%, rgba(255,164,43.20), transparent 20%), url('/templates/valmor-premium/images/hero.jpg') center center / cover no-repeat, linear-gradient(135deg, #1d0803, #030201); box-shadow: 0 34px 90px rgba(0,0,0.74), inset 0 1px 0 rgba(255,226,140.10);
} .hero:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(0,0,0.88), rgba(0,0,0.35) 46%, rgba(0,0,0.42)), linear-gradient(to top, rgba(0,0,0.82), transparent 47%); pointer-events: none;
} .hero:after { content: ""; position: absolute; left: 40px; right: 40px; bottom: 88px; height: 2px; z-index: 4; background: linear-gradient(90deg, transparent, rgba(255,217,118.80), transparent); box-shadow: 0 0 18px rgba(255,160,42.42);
} .logo-area { position: relative; z-index: 5; padding: 68px 54px 0; max-width: 690px;
} .logo-kicker { display: inline-flex; padding: 8px 13px; border: 1px solid rgba(217,150,50.40); border-radius: 999px; background: rgba(217,150,50.10); color: var( - gold2); text-transform: uppercase; font-size: 11px; font-weight: bold; letter-spacing: 1.5px;
} .logo { margin: 22px 0 8px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(74px, 9vw, 132px); line-height: .82; letter-spacing: -4px; color: #fff1b8; text-shadow: 0 7px 0 #2d0903, 0 0 28px rgba(255,169,43.55), 0 0 70px rgba(255,69,21.22);
} .logo span { color: var( - gold);
} .sublogo { color: #e3c37f; font-family: Georgia, serif; text-transform: uppercase; letter-spacing: 7px; font-size: 15px; margin-bottom: 18px;
} .hero-text { max-width: 640px; color: #dcc7a2; line-height: 1.75; font-size: 15px;
} .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px;
} .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 168px; padding: 12px 17px; border-radius: 8px; border: 1px solid rgba(217,150,50.38); background: linear-gradient(#2a1b10, #100a06); color: var( - text) !important; font-weight: bold; font-size: 12px; box-shadow: 0 14px 28px rgba(0,0,0.45); transition: .15s ease;
} .btn:hover { transform: translateY(-2px); filter: brightness(1.15);
} .btn.primary { color: #1b0902 !important; background: linear-gradient(#ffe28c, #bc6d18); border-color: #ffdb79;
} .btn.red { color: #fff !important; background: linear-gradient(#a62813, #4d0c05); border-color: #dc4d24;
} .btn.discord { color: #fff !important; background: linear-gradient(#6d78ff, #3640b5); border-color: #8992ff;
} .hero-status { position: absolute; z-index: 6; right: 55px; top: 34px; display: flex; border: 1px solid rgba(217,150,50.24); border-radius: 10px; background: rgba(8,5,3.82); backdrop-filter: blur(8px); overflow: hidden;
} .hero-status div { min-width: 145px; text-align: center; padding: 13px 16px; border-right: 1px solid rgba(217,150,50.14);
} .hero-status div:last-child { border-right: 0;
} .hero-status small { display: block; color: var( - muted); text-transform: uppercase; font-size: 10px; font-weight: bold;
} .hero-status b { display: block; color: var( - gold2); margin-top: 6px; font-size: 20px;
} .hero-status b.online { color: #7dff8f;
} .hero-status b.offline { color: #ff5d53;
} .crest { position: absolute; z-index: 6; right: 84px; top: 132px; width: 116px; height: 158px; background: linear-gradient(180deg, rgba(144,26,12.96), rgba(58,7,3.96)); border: 1px solid rgba(255,218,121.36); clip-path: polygon(0 0, 100% 0, 100% 77%, 50% 100%, 0 77%); display: grid; place-items: center; color: var( - gold2); font-family: Georgia, serif; font-size: 64px; font-weight: bold; text-shadow: 0 4px 0 #280703; box-shadow: 0 22px 46px rgba(0,0,0.58);
} /* NAV */
.main-nav { position: absolute; z-index: 8; left: 34px; right: 34px; bottom: 22px; min-height: 68px; display: flex; justify-content: center; flex-wrap: wrap; border: 1px solid rgba(217,150,50.40); border-radius: 11px; background: linear-gradient(#16100b, #050403); box-shadow: 0 18px 44px rgba(0,0,0.68), inset 0 1px 0 rgba(255,226,140.09); overflow: hidden;
} .main-nav a { min-width: 118px; padding: 17px 12px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #d6bd92; font-size: 12px; font-weight: bold; border-right: 1px solid rgba(217,150,50.10);
} .main-nav a:first-child { color: #ffe8a6; background: linear-gradient(#a52713, #4a0c05);
} .main-nav a:hover { color: #fff0bb; background: rgba(217,150,50.10);
} /* GRID */
.layout { display: grid; grid-template-columns: 252px minmax(0, 1fr) 318px; gap: 16px; margin-top: 16px;
} .panel { border: 1px solid rgba(217,150,50.30); border-radius: 10px; overflow: hidden; margin-bottom: 16px; background: linear-gradient(180deg, rgba(28,22,17.98), rgba(7,5,4.99)); box-shadow: 0 18px 44px rgba(0,0,0.58), inset 0 1px 0 rgba(255,226,140.07);
} .panel-title.news-title { position: relative; background: linear-gradient(90deg, #812d11, #2b1208 70%); border-bottom: 1px solid rgba(217,150,50.33); color: var( - gold2); text-transform: uppercase; letter-spacing: .7px; font-weight: bold;
} .panel-title { padding: 12px 14px; font-size: 13px;
} .panel-title:after.news-title:after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,217,121.82), transparent);
} .panel-body { padding: 13px; color: #cbb68f; font-size: 12px; line-height: 1.65;
} .menu a { display: flex; align-items: center; gap: 9px; padding: 10px 11px; color: #d2ba91; border-bottom: 1px solid rgba(217,150,50.10); font-size: 12px; transition: .14s ease;
} .menu a:hover { padding-left: 15px; background: rgba(217,150,50.08); color: #ffe59c;
} .ico { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(217,150,50.24); border-radius: 6px; background: rgba(217,150,50.10);
} /* CENTER */
.news { border: 1px solid rgba(217,150,50.31); border-radius: 10px; overflow: hidden; margin-bottom: 16px; background: radial-gradient(circle at top right, rgba(160,35,14.14), transparent 34%), linear-gradient(180deg, rgba(30,23,17.99), rgba(8,6,4.99)); box-shadow: 0 20px 52px rgba(0,0,0.60), inset 0 1px 0 rgba(255,226,140.07);
} .news-title { padding: 15px 18px;
} .news-title h2 { margin: 0; color: var( - gold2); font-family: Georgia, serif; font-size: 25px; text-transform: none; letter-spacing: 0;
} .news-title small { display: block; margin-top: 4px; color: #bfa983; text-transform: none; letter-spacing: 0; font-weight: normal;
} .news-body { padding: 18px; font-size: 13px; line-height: 1.75; color: #dcc7a3;
} .myaac-content { overflow-x: auto;
} .myaac-content table { max-width: 100%;
} .myaac-content input.myaac-content select.myaac-content textarea { max-width: 100%;
} /* RIGHT */
.live { text-align: center;
} .orb { width: 82px; height: 82px; border-radius: 50%; margin: 10px auto 13px; background: radial-gradient(circle at 35% 28%, #d7ffdf, #55e174 35%, #11642d 72%); box-shadow: 0 0 24px rgba(84,225,116.85), 0 0 62px rgba(84,225,116.30); animation: pulse 1.9s ease-in-out infinite;
} .orb.off { background: radial-gradient(circle at 35% 28%, #ffd2d2, #ff453f 35%, #661111 72%); box-shadow: 0 0 24px rgba(255,69,63.85), 0 0 62px rgba(255,69,63.30);
} @keyframes pulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.22); }
} .online-num { display: block; margin: 5px 0; color: var( - gold2); font-size: 36px; font-weight: bold;
} .side-buttons .btn { width: 100%; margin-bottom: 8px;
} .rank { list-style: none; padding: 0; margin: 0;
} .rank li { display: grid; grid-template-columns: 28px 1fr auto; gap: 7px; padding: 8px 0; align-items: center; border-bottom: 1px solid rgba(217,150,50.10);
} .rank li:last-child { border-bottom: 0;
} .rank .pos.rank b { color: var( - gold2); font-weight: bold;
} .discord-panel { background: linear-gradient(135deg, rgba(88,101,242.30), rgba(12,9,20.96)), linear-gradient(180deg, rgba(31,24,18.99), rgba(10,7,5.99));
} .shop-panel { background: radial-gradient(circle at right, rgba(217,150,50.24), transparent 42%), linear-gradient(180deg, rgba(31,24,18.99), rgba(10,7,5.99));
} .footer { margin-top: 16px; padding: 18px; border: 1px solid rgba(217,150,50.20); border-radius: 10px; background: rgba(7,5,4.84); text-align: center; color: #9f8c6d; font-size: 11px;
} /* RESPONSIVE */
@media (max-width: 1150px) { .layout { grid-template-columns: 1fr; } .hero { min-height: 675px; } .crest { display: none; } .hero-status { position: relative; right: auto; top: auto; margin: 22px 24px 0; display: inline-flex; }
} @media (max-width: 740px) { .page { max-width: calc(100% - 14px); padding-top: 8px; } .topbar { height: auto; padding: 9px; flex-direction: column; text-align: center; } .logo-area { padding: 34px 22px 0; } .logo { font-size: 60px; letter-spacing: -2px; } .sublogo { font-size: 12px; letter-spacing: 3px; } .hero-actions .btn.btn { width: 100%; } .hero-status { flex-direction: column; } .main-nav { position: relative; left: auto; right: auto; bottom: auto; margin: 22px 14px 14px; } .main-nav a { min-width: 50%; }
} /* ================================ MyAAC dynamic content compatibility ================================ */ .myaac-content.myaac-content * { color: #ead8b5;
} .myaac-content a.myaac-content a:visited { color: #ffd976 !important; text-decoration: none;
} .myaac-content a:hover { color: #fff2bc !important; text-decoration: underline;
} .myaac-content h1.myaac-content h2.myaac-content h3.myaac-content h4.myaac-content b.myaac-content strong { color: #f2d39a !important;
} .myaac-content small { color: #cbb68f !important;
} /* tables */
.myaac-content table { border-collapse: collapse; max-width: 100%; color: #ead8b5 !important;
} .myaac-content table td.myaac-content table th { color: #ead8b5 !important;
} .myaac-content table tr { color: #ead8b5 !important;
} .myaac-content table tr:nth-child(even) { background: rgba(255, 217, 121.035);
} .myaac-content table tr:nth-child(odd) { background: rgba(0, 0, 0.10);
} .myaac-content table td { border-color: rgba(217,150,50.18) !important;
} /* old MyAAC light backgrounds */
.myaac-content .TableContentContainer.myaac-content .TableContainer.myaac-content .TableContent.myaac-content .InnerTableContainer.myaac-content .Table1.myaac-content .Table2.myaac-content .Table3.myaac-content .Table4.myaac-content .Table5 { background: rgba(10, 7, 5.70) !important; color: #ead8b5 !important; border-color: rgba(217,150,50.22) !important;
} .myaac-content .LabelV.myaac-content .LabelH.myaac-content .Odd.myaac-content .Even.myaac-content .TableContent td.myaac-content .InnerTableContainer td { background: rgba(12, 8, 5.72) !important; color: #ead8b5 !important;
} /* account management left menu / internal links */
.myaac-content td a.myaac-content div a.myaac-content li a { color: #ffd976 !important;
} .myaac-content td.myaac-content div.myaac-content p.myaac-content li.myaac-content span { color: #ead8b5 !important;
} /* forms */
.myaac-content input.myaac-content select.myaac-content textarea.myaac-content button { color: #f7e6c1 !important; background: linear-gradient(#2a1b10, #100a06) !important; border: 1px solid rgba(217,150,50.38) !important; border-radius: 4px; padding: 4px 7px;
} .myaac-content input[type="submit"].myaac-content input[type="button"].myaac-content button { cursor: pointer; color: #1b0902 !important; background: linear-gradient(#ffe28c, #bc6d18) !important; border-color: #ffdb79 !important; font-weight: bold;
} .myaac-content input[type="submit"]:hover.myaac-content input[type="button"]:hover.myaac-content button:hover { filter: brightness(1.12);
} /* red/green statuses */
.myaac-content font[color="red"].myaac-content span[style*="red"].myaac-content b[style*="red"] { color: #ff5d53 !important;
} .myaac-content font[color="green"].myaac-content span[style*="green"].myaac-content b[style*="green"] { color: #58f078 !important;
} /* account logs / highscores readability */
.myaac-content .account-management.myaac-content .account-manage.myaac-content .account { color: #ead8b5 !important;
} .myaac-content .BoxContent { color: #ead8b5 !important; background: transparent !important;
} /* old hardcoded beige cells */
.myaac-content td[bgcolor].myaac-content tr[bgcolor].myaac-content table[bgcolor] { background: rgba(15, 10, 6.80) !important; color: #ead8b5 !important;
} /* prevent content from escaping */
.myaac-content { overflow-x: auto;
} .myaac-content img { max-width: 100%;
} /* page title inside content */
.myaac-content > center:first-child.myaac-content > h1:first-child.myaac-content > h2:first-child { color: #ffd976 !important;
} /* Account menu inside MyAAC content */
.myaac-content table td:first-child a { color: #ffd976 !important;
}