:root,
html[data-faction="dual"] {
/* Atreia (dual / forged obsidian, warm ember red & gold) */
--void:#0b0808;
--void-2:#100b09;
--ash:#16110d;
--ash-line:rgba(224,164,75,.16);
--gold:#e0a44b;
--gold-hi:#ffd98a;
--gold-deep:#8a5817;
--ember:#d6412b;
--ember-hi:#f0623a;
--jade:#57c6a9;
--jade-deep:#1c6f5c;
--bone:#efe6d2;
--bone-dim:#a9a091;
--radius:3px;
--wrap:1200px;
--shadow:0 24px 60px rgba(0,0,0,.55);
}
/* Elyos (Sanctum / Divine Light / Celestial Azure & Solar Gold) */
html[data-faction="elyos"] {
--void:#060b17;
--void-2:#091224;
--ash:#0e1d38;
--ash-line:rgba(96,165,250,.24);
--gold:#f5c842;
--gold-hi:#fff4d0;
--gold-deep:#b3821a;
--ember:#2563eb;
--ember-hi:#60a5fa;
--jade:#38bdf8;
--jade-deep:#0284c7;
--bone:#f8fafc;
--bone-dim:#cbd5e1;
--radius:3px;
--wrap:1200px;
--shadow:0 24px 60px rgba(4,9,20,.85);
}
/* Asmodian (Pandaemonium / Shadow Dusk / Imperial Violet & Berserk Crimson) */
html[data-faction="asmo"] {
--void:#0d0612;
--void-2:#140a1d;
--ash:#1f0f2b;
--ash-line:rgba(192,132,252,.24);
--gold:#c084fc;
--gold-hi:#f5d0fe;
--gold-deep:#7e22ce;
--ember:#dc2626;
--ember-hi:#ef4444;
--jade:#d946ef;
--jade-deep:#a21caf;
--bone:#f5edfa;
--bone-dim:#c8b6d8;
--radius:3px;
--wrap:1200px;
--shadow:0 24px 60px rgba(13,6,18,.88);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--void);
color:var(--bone);
font-family:'Inter',sans-serif;
font-size:16px; line-height:1.65;
overflow-x:hidden;
transition:background-color .35s ease, color .35s ease;
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}
/* fixed forge backdrop: warm embers rising through obsidian */
body::before{
content:""; position:fixed; inset:0; z-index:-3;
background:
radial-gradient(ellipse 60% 40% at 50% -5%, rgba(214,65,43,.18), transparent 60%),
radial-gradient(ellipse 50% 45% at 12% 105%, rgba(224,164,75,.12), transparent 60%),
radial-gradient(ellipse 55% 45% at 90% 60%, rgba(87,198,169,.07), transparent 65%),
linear-gradient(180deg,#0a0706 0%, #0d0a08 45%, #0b0808 100%);
}
/* faint forge-spark texture */
body::after{
content:""; position:fixed; inset:0; z-index:-2; opacity:.5;
background-image:
radial-gradient(1.5px 1.5px at 18% 30%, rgba(255,190,120,.55) 50%, transparent 60%),
radial-gradient(1px 1px at 42% 70%, rgba(255,150,90,.4) 50%, transparent 60%),
radial-gradient(1.4px 1.4px at 66% 22%, rgba(255,205,150,.5) 50%, transparent 60%),
radial-gradient(1px 1px at 82% 78%, rgba(255,160,100,.35) 50%, transparent 60%),
radial-gradient(1.2px 1.2px at 8% 84%, rgba(255,180,110,.4) 50%, transparent 60%);
background-repeat:repeat; background-size:480px 480px;
animation:sparkDrift 40s linear infinite;
}
@keyframes sparkDrift{from{background-position:0 0;} to{background-position:0 -480px;}}
h1,h2,h3,.font-display{font-family:'Marcellus',serif; font-weight:400; margin:0; color:var(--gold-hi); letter-spacing:.01em;}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%; display:block;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 30px;}
::selection{background:var(--ember); color:#1a0d08;}
a:focus-visible,button:focus-visible{outline:2px solid var(--jade); outline-offset:3px;}
/* forged divider used between sections */
.forge-rule{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto 34px; max-width:340px;}
.forge-rule .ln{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);}
.forge-rule .em{width:9px; height:9px; background:var(--ember); transform:rotate(45deg); box-shadow:0 0 12px var(--ember-hi);}
/* eyebrow, small jade tag, not the generic all-caps */
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-family:'Inter',sans-serif; font-size:.72rem; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:var(--jade);
margin-bottom:16px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--jade);}
/* ============ BUTTONS (new identity: forged gold + ember, chamfered) ============ */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
font-family:'Inter',sans-serif; font-weight:600; font-size:.92rem;
padding:13px 30px; cursor:pointer; border:none; position:relative;
clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
background:linear-gradient(180deg,var(--ember-hi),var(--ember) 60%,#9a2314);
color:#fff3ec; box-shadow:0 8px 22px rgba(214,65,43,.4), inset 0 1px 0 rgba(255,255,255,.25);
text-shadow:0 1px 1px rgba(0,0,0,.4);
}
.btn-primary:hover{filter:brightness(1.12); box-shadow:0 12px 30px rgba(240,98,58,.55), inset 0 1px 0 rgba(255,255,255,.3);}
.btn-gold{
background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-deep));
color:#1c1207; box-shadow:0 8px 22px rgba(224,164,75,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold:hover{filter:brightness(1.1);}
.btn-ghost{
background:rgba(20,15,11,.5); color:var(--gold-hi);
box-shadow:inset 0 0 0 1px var(--gold-deep);
backdrop-filter:blur(4px);
}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--gold); color:#fff;}
/* ================= LEGACY NAV (DISABLED) ================= */
.legacy-nav-disabled{
position:relative;
padding:18px 0;
border-bottom:1px solid transparent;
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.nav-brand{display:flex; align-items:center; gap:11px;}
.nav-brand .crest{width:32px; height:auto; filter:drop-shadow(0 0 8px rgba(240,98,58,.4));}
.nav-brand .txt{display:flex; flex-direction:column; line-height:1;}
.nav-brand .txt b{font-family:'Cinzel Decorative',serif; font-weight:700; font-size:1.02rem; color:var(--gold-hi); letter-spacing:.04em;}
.nav-brand .txt small{font-size:.6rem; letter-spacing:.34em; color:var(--jade); margin-top:4px; text-transform:uppercase;}
.nav-links{display:flex; gap:30px; list-style:none; margin:0; padding:0; font-size:.9rem;}
.nav-links a{color:var(--bone-dim); position:relative; padding:4px 0; transition:color .2s ease;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--ember-hi); transition:width .25s ease;}
.nav-links a:hover{color:var(--gold-hi);}
.nav-links a:hover::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:14px;}
.nav-toggle{display:none; background:none; border:none; color:var(--bone); font-size:1.6rem; cursor:pointer;}
.nav-links-mobile-cta{display:none;}
/* language switcher */
.lang-switch{position:relative;}
.lang-current{
display:flex; align-items:center; gap:7px;
background:rgba(22,17,13,.7); border:1px solid var(--ash-line); color:var(--bone);
padding:7px 11px; border-radius:var(--radius); font-size:.85rem; cursor:pointer;
transition:border-color .2s ease, background .2s ease;
}
.lang-current:hover{border-color:var(--gold); background:rgba(30,22,16,.85);}
.lang-current .flag{font-size:1.05rem; line-height:1;}
.lang-current .lang-code{letter-spacing:.06em; font-weight:600; color:var(--bone-dim);}
.lang-current .lang-caret{font-size:.7rem; color:var(--bone-dim); transition:transform .2s ease;}
.lang-switch.open .lang-current .lang-caret{transform:rotate(180deg);}
.lang-menu{
position:absolute; top:calc(100% + 8px); right:0; min-width:160px;
list-style:none; margin:0; padding:6px; background:var(--ash);
border:1px solid var(--ash-line); border-radius:var(--radius); box-shadow:var(--shadow);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:70;
}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-menu button{
display:flex; align-items:center; gap:10px; width:100%; background:none; border:none;
color:var(--bone); padding:9px 10px; border-radius:var(--radius);
font-family:'Inter',sans-serif; font-size:.9rem; text-align:left; cursor:pointer;
transition:background .15s ease, color .15s ease;
}
.lang-menu button:hover{background:rgba(224,164,75,.12); color:var(--gold-hi);}
.lang-menu button.active{color:var(--gold-hi); background:rgba(214,65,43,.14);}
.lang-menu button .flag{font-size:1.15rem;}
/* ================= HERO with YouTube video bg ================= */
.hero{position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:150px 24px 100px; overflow:hidden;}
.hero-fallback{position:absolute; inset:0; z-index:0; background:url('assets/bg-orgrimmar-outpost.png') center/cover; transform:scale(1.05); animation:heroDrift 32s ease-in-out infinite alternate;}
@keyframes heroDrift{from{transform:scale(1.05) translateY(0);} to{transform:scale(1.12) translateY(-18px);}}
.hero-overlay{position:absolute; inset:0; z-index:1;
background:
radial-gradient(ellipse 70% 60% at 50% 38%, transparent 18%, rgba(11,8,8,.55) 78%),
linear-gradient(180deg, rgba(11,8,8,.62) 0%, rgba(11,8,8,.35) 40%, rgba(11,8,8,.94) 100%);
}
.hero-content{position:relative; z-index:2; max-width:860px;}
/* ---- WARCRAFT-STYLE LOGO (WoW Sulvus) ---- */
.logo-lockup{position:relative; display:inline-block; margin-bottom:30px; padding:0 30px;}
.logo-shards{position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(700px,96vw); height:auto; z-index:0; pointer-events:none;}
.logo-shards path{filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));}
.logo-stack{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; line-height:.82;}
/* shared gilded bevel treatment */
.wc-gold{
font-family:'Almendra SC','Cinzel',serif; font-weight:700;
background:linear-gradient(180deg,#fff6dc 0%, #ffe08f 26%, #f7c85f 46%, #e6ad3a 60%, #c88a24 74%, #f2d488 90%, #9a6018 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
filter:
drop-shadow(0 1px 0 #3a1f0a) drop-shadow(0 2px 0 #2a1608)
drop-shadow(0 4px 6px rgba(0,0,0,.55));
letter-spacing:.01em;
}
.logo-top{ font-size:clamp(2.2rem,7.5vw,4.6rem); }
.logo-bot{ font-size:clamp(3.2rem,11.5vw,7.2rem); margin-top:-2px; }
/* middle banner: WORLD OF WARCRAFT + red shard wings */
.logo-mid{
display:flex; align-items:center; justify-content:center; gap:14px; margin:2px 0;
font-family:'Almendra SC','Cinzel',serif; font-weight:700;
font-size:clamp(.62rem,1.7vw,1rem);
letter-spacing:.28em; text-transform:uppercase;
color:#ffe9b8;
text-shadow:0 1px 0 #3a1f0a, 0 2px 3px rgba(0,0,0,.6);
position:relative; z-index:3;
}
.logo-mid .wing{width:clamp(30px,9vw,88px); height:1px; flex-shrink:0;}
.logo-mid .gem{width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 40% 40%,#eafaf3,#57c6a9 55%,#1c6f5c); box-shadow:0 0 10px rgba(87,198,169,.8); flex-shrink:0;}
/* small subtitle under logo */
.logo-sub{
font-family:'Marcellus',serif; font-size:clamp(.62rem,1.4vw,.82rem);
letter-spacing:.4em; text-transform:uppercase; color:var(--jade);
margin-top:12px; z-index:2; position:relative;
}
/* mini logo icon (nav + hero presentation) */
.logo-icon{display:block;}
.logo-icon.nav-logo{height:48px; width:auto;}
.nav.scrolled .logo-icon.nav-logo{height:40px;}
.hero-logo-icon{width:min(620px,92vw); height:auto; margin:0 auto 22px; display:block; filter:drop-shadow(0 10px 30px rgba(0,0,0,.55));}
.hero h1{font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.2; margin:22px auto 18px; max-width:720px; color:var(--bone); font-weight:400;}
.hero h1 .hl{color:var(--gold-hi);}
.hero .lede{color:var(--bone-dim); font-size:clamp(1rem,1.6vw,1.1rem); max-width:620px; margin:0 auto 30px;}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:34px;}
.hero-badge{
font-size:.76rem; letter-spacing:.04em; color:var(--gold-hi);
padding:6px 13px; background:rgba(22,17,13,.6); border:1px solid var(--ash-line);
border-radius:100px; backdrop-filter:blur(4px);
}
.hero-badge b{color:var(--jade); font-weight:600;}
.countdown{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:26px;}
.countdown .unit{
width:128px; padding:24px 0 16px; position:relative;
background:linear-gradient(180deg,rgba(28,20,14,.85),rgba(14,10,8,.85));
border:1px solid var(--ash-line);
clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.countdown .unit::before{content:""; position:absolute; top:0; left:10px; right:10px; height:2px; background:linear-gradient(90deg,transparent,var(--ember-hi),transparent);}
.countdown .num{font-family:'Cinzel Decorative',serif; font-weight:700; font-size:3.4rem; color:var(--gold-hi); display:block; font-variant-numeric:tabular-nums; line-height:1;}
.countdown .label{font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim); margin-top:6px;}
@media (max-width:680px){
.countdown{gap:10px;}
.countdown .unit{width:72px; padding:14px 0 10px;}
.countdown .num{font-size:2rem;}
.countdown .label{font-size:.6rem; letter-spacing:.14em;}
}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:16px;}
.launch-date{color:var(--bone-dim); font-size:.95rem; margin:6px 0 0;}
.launch-date strong{color:var(--gold-hi);}
.founding-note{color:var(--jade); font-size:.85rem; margin-top:20px; opacity:.9;}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--bone-dim); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;}
.scroll-cue .line{width:1px; height:40px; background:linear-gradient(var(--gold),transparent); animation:cue 2s ease-in-out infinite;}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.7);} 50%{opacity:1; transform:scaleY(1);}}
/* ================= SECTION SHELL ================= */
section{padding:96px 0; position:relative;}
.section-head{max-width:720px; margin:0 auto 54px;}
.section-head.center{text-align:center;}
.section-head h2{font-size:clamp(1.9rem,4vw,3rem); line-height:1.12; margin-bottom:14px;}
.section-head p{color:var(--bone-dim); font-size:1.02rem;}
/* parallax scene band (uses uploaded WoW screenshots) */
.scene-band{position:relative; min-height:340px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; border-block:1px solid var(--ash-line);}
.scene-band .bg{position:absolute; inset:-10% 0; background-size:cover; background-position:center; z-index:0; transform:scale(1.08);}
.scene-band::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,8,8,.72),rgba(11,8,8,.55)); z-index:1;}
.scene-band .inner{position:relative; z-index:2; max-width:760px; padding:60px 30px;}
.scene-band .inner h2{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:12px;}
.scene-band .inner p{color:var(--bone-dim);}
/* ============ LORE ============ */
#lore .wrap{max-width:1360px;}
.lore-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:52px; align-items:center;}
.lore-copy p{margin:0 0 16px; color:#d6cdb8;}
.lore-copy strong{color:var(--gold-hi); font-weight:600;}
.stat-row{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.stat{flex:1; min-width:120px; padding:16px 18px; background:rgba(22,17,13,.55); border:1px solid var(--ash-line); border-left:2px solid var(--ember);}
.stat b{display:block; font-family:'Cinzel Decorative',serif; font-size:1.5rem; color:var(--gold-hi);}
.stat span{font-size:.82rem; color:var(--bone-dim);}
.lore-art{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
aspect-ratio:1148 / 1370;
align-self:center;
border-radius:12px;
overflow:hidden;
border:1px solid rgba(224,164,75,.32);
box-shadow:0 20px 50px rgba(0,0,0,.75), 0 0 35px rgba(224,164,75,.15);
background:radial-gradient(circle at center, rgba(30,22,16,.85), rgba(10,8,6,.98));
}
.lore-art img{
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
display:block;
filter:saturate(1.06);
transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.lore-art:hover img{transform:scale(1.02);}
.lore-art .tag{position:absolute; bottom:14px; left:14px; background:rgba(9,6,5,.8); border:1px solid var(--ash-line); padding:6px 12px; font-size:.75rem; color:var(--jade); backdrop-filter:blur(4px);}
/* ============ PVP FEATURE GRID ============ */
.pvp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pvp-card{
position:relative; padding:28px 24px 26px; overflow:hidden;
background:linear-gradient(180deg,rgba(24,18,13,.9),rgba(13,10,8,.9));
border:1px solid var(--ash-line);
transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pvp-card::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--ember),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;}
.pvp-card:hover{transform:translateY(-4px); border-color:var(--gold-deep); box-shadow:var(--shadow);}
.pvp-card:hover::before{transform:scaleX(1);}
.pvp-card .ico{width:44px; height:44px; margin-bottom:16px; color:var(--ember-hi);}
/* real WoW icons framed like in-game */
.wow-ico{width:52px; height:52px; margin-bottom:16px; border:2px solid var(--gold-deep); border-radius:6px; box-shadow:0 0 0 1px #000, 0 4px 12px rgba(0,0,0,.5); object-fit:cover; background:#000;}
.wow-ico.sm{width:40px; height:40px; margin-bottom:12px;}
.wow-ico.lg{width:64px; height:64px;}
.pvp-card h3{font-size:1.18rem; margin-bottom:8px; color:var(--gold-hi);}
.pvp-card p{font-size:.92rem; color:var(--bone-dim); margin:0;}
.pvp-card .modes{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
.pvp-card .modes span{font-size:.72rem; padding:3px 9px; border:1px solid var(--ash-line); color:var(--jade); border-radius:100px;}
.pvp-card.wide{grid-column:span 3; display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0;}
.pvp-card.wide .txt{padding:32px 30px;}
.pvp-card.wide .shot{background-size:cover; background-position:center; min-height:240px; border-left:1px solid var(--ash-line);}
/* ============ TECH THAT WORKS (differentiator list) ============ */
.tech-wrap{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:960px; margin:0 auto;}
.tech-item{display:flex; gap:14px; align-items:center; padding:18px 20px; background:rgba(22,17,13,.5); border:1px solid var(--ash-line);}
.tech-item .chk{flex-shrink:0; width:26px; height:26px; display:grid; place-items:center; background:rgba(87,198,169,.14); border:1px solid var(--jade); color:var(--jade); border-radius:50%; font-size:.8rem;}
.tech-item h4{margin:0 0 3px; font-family:'Inter',sans-serif; font-size:.98rem; font-weight:600; color:var(--bone);}
.tech-item p{margin:0; font-size:.85rem; color:var(--bone-dim);}
/* ============ CLASSES ============ */
.class-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.class-card{position:relative; padding:34px 30px; overflow:hidden; border:1px solid var(--ash-line);}
.class-card.dh{background:linear-gradient(135deg,rgba(64,24,16,.85),rgba(13,10,8,.9));}
.class-card.monk{background:linear-gradient(135deg,rgba(16,52,44,.7),rgba(13,10,8,.9));}
.class-card .tag{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px; display:inline-block;}
.class-card.dh .tag{color:var(--ember-hi);}
.class-card.monk .tag{color:var(--jade);}
.class-card h3{font-size:1.5rem; margin-bottom:10px;}
.class-card p{color:var(--bone-dim); font-size:.94rem; margin:0;}
.class-card .glyph{position:absolute; right:-20px; bottom:-30px; width:180px; opacity:.12;}
/* ============ COSMETICS (transmog + mounts) ============ */
.cosmetic-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:stretch;}
.cosmetic-card{position:relative; border:1px solid var(--ash-line); overflow:hidden; background:rgba(16,12,9,.85);}
.cosmetic-card img{width:100%; height:100%; object-fit:cover; opacity:.95;}
.cosmetic-card .cap{position:absolute; inset:auto 0 0 0; padding:22px; background:linear-gradient(180deg,transparent,rgba(9,6,5,.95));}
.cosmetic-card .cap h3{font-size:1.3rem; margin-bottom:6px;}
.cosmetic-card .cap p{margin:0; font-size:.9rem; color:var(--bone-dim);}
/* ============ TALENT PREVIEW ============ */
.talent-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center;}
.talent-copy ul{list-style:none; padding:0; margin:22px 0 0;}
.talent-copy li{position:relative; padding:9px 0 9px 30px; color:#d6cdb8; font-size:.95rem; border-bottom:1px solid rgba(224,164,75,.08);}
.talent-copy li::before{content:""; position:absolute; left:0; top:15px; width:12px; height:12px; background:var(--ember); transform:rotate(45deg);}
/* mock talent UI */
.talent-ui{background:linear-gradient(180deg,#181209,#0d0a08); border:1px solid var(--ash-line); box-shadow:var(--shadow); padding:18px;}
.talent-ui-top{display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--ash-line); margin-bottom:16px;}
.talent-ui-top b{font-family:'Cinzel Decorative',serif; color:var(--gold-hi); font-size:1rem;}
.talent-tabs{display:flex; gap:6px; flex-wrap:wrap;}
.talent-tab{width:30px; height:30px; display:grid; place-items:center; font-size:.75rem; border:1px solid var(--ash-line); color:var(--bone-dim); background:rgba(22,17,13,.6); cursor:default;}
.talent-tab.on{border-color:var(--gold); color:var(--gold-hi); background:rgba(214,65,43,.18);}
.talent-tree{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px;}
.talent-node{aspect-ratio:1; border:1px solid var(--ash-line); background:rgba(30,22,15,.7); display:grid; place-items:center; position:relative;}
.talent-node.filled{border-color:var(--gold); box-shadow:inset 0 0 12px rgba(224,164,75,.3);}
.talent-node.filled::after{content:""; width:52%; height:52%; background:radial-gradient(circle,var(--gold-hi),var(--gold-deep)); border-radius:3px;}
.talent-node .rank{position:absolute; right:3px; bottom:1px; font-size:.6rem; color:var(--jade);}
.talent-actions{display:flex; gap:8px;}
.talent-actions .btn{flex:1; padding:9px; font-size:.8rem;}
.talent-string{margin-top:14px; font-family:monospace; font-size:.72rem; color:var(--jade); background:rgba(9,6,5,.7); border:1px solid var(--ash-line); padding:8px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* ============ TALENT (compact) ============ */
.talent-brief{display:flex; gap:24px; align-items:flex-start; max-width:820px; margin:0 auto; padding:34px 32px; background:linear-gradient(135deg,rgba(24,18,13,.9),rgba(13,10,8,.9)); border:1px solid var(--ash-line); border-left:3px solid var(--ember);}
.talent-brief .wow-ico{flex-shrink:0; margin-bottom:0;}
.talent-brief h2{font-size:clamp(1.5rem,3vw,2rem); margin:4px 0 10px;}
.talent-brief p{color:var(--bone-dim); margin:0; font-size:.96rem;}
/* ============ REALM FEATURES GRID ============ */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.feat{display:flex; gap:14px; padding:20px; background:linear-gradient(180deg,rgba(24,18,13,.8),rgba(13,10,8,.85)); border:1px solid var(--ash-line); transition:transform .2s ease, border-color .2s ease;}
.feat:hover{transform:translateY(-3px); border-color:var(--gold-deep);}
.feat .wow-ico{margin-bottom:0;}
.feat h4{margin:0 0 5px; font-family:'Inter',sans-serif; font-size:1rem; font-weight:600; color:var(--gold-hi);}
.feat p{margin:0; font-size:.85rem; color:var(--bone-dim);}
/* ============ LOOTBOX / ARENA CHESTS ============ */
.loot-wrap{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
.loot-copy h2{margin-bottom:14px;}
.loot-copy p{color:var(--bone-dim); margin-bottom:20px;}
.chest-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.chest{text-align:center; padding:20px 10px; background:linear-gradient(180deg,rgba(24,18,13,.85),rgba(13,10,8,.9)); border:1px solid var(--ash-line); position:relative; overflow:hidden;}
.chest::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;}
.chest.bronze::before{background:linear-gradient(90deg,#8a5a2b,#c08040);}
.chest.silver::before{background:linear-gradient(90deg,#8a8a95,#d8d8e0);}
.chest.gold::before{background:linear-gradient(90deg,#b3781f,#ffd98a);}
.chest.kings::before{background:linear-gradient(90deg,#7a1a0e,#f0623a,#ffd98a);}
.chest img{width:46px; height:46px; margin:0 auto 10px; border:2px solid var(--gold-deep); border-radius:6px; box-shadow:0 0 0 1px #000;}
.chest b{display:block; font-family:'Cinzel Decorative',serif; font-size:.95rem; color:var(--gold-hi); margin-bottom:3px;}
.chest span{font-size:.72rem; color:var(--bone-dim);}
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative;}
.timeline::before{content:""; position:absolute; top:7px; left:6%; right:6%; height:1px; background:linear-gradient(90deg,transparent,var(--gold-deep),var(--gold-deep),transparent);}
.tl-item{position:relative; padding-top:32px;}
.tl-item .dot{position:absolute; top:1px; left:0; width:14px; height:14px; background:var(--void); border:2px solid var(--gold-deep); transform:rotate(45deg);}
.tl-item.active .dot{border-color:var(--ember-hi); background:var(--ember); box-shadow:0 0 14px var(--ember-hi);}
.tl-item .when{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--jade);}
.tl-item h3{font-size:1.1rem; margin:6px 0 6px;}
.tl-item p{font-size:.86rem; color:var(--bone-dim); margin:0;}
/* ============ DISCORD ============ */
.discord-sec .wrap{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
.discord-copy h2{margin-bottom:14px;}
.discord-copy p{color:var(--bone-dim); margin-bottom:24px;}
.discord-card{background:linear-gradient(180deg,#181209,#0d0a08); border:1px solid var(--ash-line); box-shadow:var(--shadow); overflow:hidden;}
.discord-card-head{display:flex; align-items:center; gap:14px; padding:20px; border-bottom:1px solid var(--ash-line);}
.discord-card-head .crest{width:40px;}
.discord-card-head .name{font-family:'Cinzel Decorative',serif; color:var(--gold-hi); font-size:1.05rem;}
.discord-card-head .status{font-size:.8rem; color:var(--bone-dim); display:flex; align-items:center; gap:7px;}
.discord-card-head .status .dot{width:8px; height:8px; border-radius:50%; background:var(--jade); box-shadow:0 0 8px var(--jade);}
.discord-card-body{display:grid; grid-template-columns:110px 1fr; gap:0;}
.discord-channels{padding:16px; border-right:1px solid var(--ash-line); font-size:.8rem;}
.discord-channels .group{color:var(--bone-dim); text-transform:uppercase; font-size:.66rem; letter-spacing:.14em; margin:10px 0 6px;}
.discord-channels .chan{color:var(--bone-dim); padding:3px 0;}
.discord-channels .chan.active{color:var(--gold-hi);}
.discord-members{padding:16px;}
.discord-members .row{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.discord-members .avatar{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#1a0d08; font-weight:700; font-size:.85rem;}
.discord-members .name{font-size:.86rem; color:var(--bone-dim);}
.discord-card-foot{padding:16px; border-top:1px solid var(--ash-line);}
/* ============ CTA BAND ============ */
.cta-band{text-align:center; border-block:1px solid var(--ash-line); background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(214,65,43,.12), transparent 70%);}
.cta-band h2{font-size:clamp(2rem,4vw,3rem); margin-bottom:14px;}
.cta-band p{color:var(--bone-dim); max-width:600px; margin:0 auto 28px;}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
/* ============ TRAILER (bottom of page, click-out to YouTube) ============ */
.trailer-sec{text-align:center;}
.trailer-card{position:relative; display:block; max-width:820px; margin:0 auto; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--gold-deep); box-shadow:var(--shadow); background:#000;}
.trailer-card img{width:100%; height:100%; object-fit:cover; opacity:.62; transition:opacity .3s ease, transform .5s ease;}
.trailer-card:hover img{opacity:.8; transform:scale(1.04);}
.trailer-card .play{position:absolute; inset:0; display:grid; place-items:center;}
.trailer-card .play .btn-play{width:84px; height:84px; display:grid; place-items:center; background:linear-gradient(180deg,var(--ember-hi),var(--ember)); border:2px solid var(--gold-hi); box-shadow:0 8px 30px rgba(214,65,43,.55); transition:transform .2s ease;}
.trailer-card:hover .play .btn-play{transform:scale(1.1);}
.trailer-card .play .btn-play svg{width:34px; height:34px; margin-left:5px;}
.trailer-card .yt-tag{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; background:rgba(9,6,5,.85); border:1px solid var(--ash-line); padding:7px 14px; font-size:.82rem; color:var(--bone); backdrop-filter:blur(4px);}
.trailer-card .yt-tag .yt{color:#ff3b30; font-weight:700;}
/* ============ FOOTER ============ */
footer{padding:64px 0 40px; border-top:1px solid var(--ash-line); background:rgba(8,5,4,.6);}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:40px;}
.footer-brand{display:flex; align-items:center; gap:12px;}
.footer-brand .crest{width:38px;}
.footer-brand b{font-family:'Cinzel Decorative',serif; color:var(--gold-hi); letter-spacing:.04em;}
.footer-cols{display:flex; gap:56px; flex-wrap:wrap;}
.footer-col h4{font-family:'Inter',sans-serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--jade); margin:0 0 12px;}
.footer-col ul{list-style:none; padding:0; margin:0;}
.footer-col li{margin-bottom:8px;}
.footer-col a{color:var(--bone-dim); font-size:.9rem; transition:color .2s ease;}
.footer-col a:hover{color:var(--gold-hi);}
.footer-bottom{display:flex; flex-direction:column; gap:10px; padding-top:26px; border-top:1px solid var(--ash-line); font-size:.78rem; color:var(--bone-dim);}
.footer-bottom .disclaimer{opacity:.7; max-width:900px;}
/* sticky cta */
.sticky-cta{position:fixed; bottom:0; left:0; right:0; z-index:55; display:flex; align-items:center; justify-content:center; gap:18px; padding:12px 20px; background:rgba(9,6,5,.95); border-top:1px solid var(--gold-deep); backdrop-filter:blur(8px); transform:translateY(100%); transition:transform .3s ease;}
.sticky-cta.show{transform:translateY(0);}
.sticky-cta span{font-size:.9rem; color:var(--bone);}
.sticky-cta strong{color:var(--gold-hi);}
/* reveal animations */
.reveal,.reveal-l,.reveal-r{opacity:0; transition:opacity .7s ease, transform .7s ease;}
.reveal{transform:translateY(28px);}
.reveal-l{transform:translateX(-34px);}
.reveal-r{transform:translateX(34px);}
.reveal.in,.reveal-l.in,.reveal-r.in{opacity:1; transform:none;}
/* ============ RESPONSIVE ============ */
@media (max-width:980px){
.lore-grid,.talent-wrap,.discord-sec .wrap,.cosmetic-grid{grid-template-columns:1fr; gap:34px;}
.lore-art{order:-1; width:100%; max-width:560px; margin:0 auto; aspect-ratio:1148/1370; min-height:unset; max-height:unset;}
.pvp-grid{grid-template-columns:1fr 1fr;}
.pvp-card.wide{grid-column:span 2; grid-template-columns:1fr;}
.pvp-card.wide .shot{border-left:none; border-top:1px solid var(--ash-line); min-height:200px;}
.class-grid{grid-template-columns:1fr;}
.feat-grid{grid-template-columns:1fr 1fr;}
.loot-wrap{grid-template-columns:1fr; gap:30px;}
.timeline{grid-template-columns:1fr 1fr; row-gap:34px;}
.timeline::before{display:none;}
}
@media (max-width:680px){
.nav-links{position:fixed; top:0; right:0; height:100vh; width:min(80vw,320px); background:#0d0a08; border-left:1px solid var(--ash-line); flex-direction:column; padding:100px 32px; gap:24px; transform:translateX(100%); transition:transform .3s ease;}
.nav-links.open{transform:translateX(0);}
.nav-toggle{display:block;}
.nav-links-mobile-cta{display:block;}
.lang-current .lang-code{display:none;}
.pvp-grid,.tech-wrap{grid-template-columns:1fr;}
.feat-grid{grid-template-columns:1fr;}
.chest-row{grid-template-columns:1fr 1fr;}
.talent-brief{flex-direction:column;}
.pvp-card.wide{grid-column:span 1;}
.stat-row{flex-direction:row;}
.sticky-cta span{display:none;}
section{padding:70px 0;}
}
/* ==========================================================================
AION SPECIFIC ADDITIONS & SUBPAGE COMPATIBILITY (Sulvus Aesthetic)
========================================================================== */
/* Aion icon frame (equivalent to wow-ico) */
.aion-ico {
width: 52px;
height: 52px;
margin-bottom: 16px;
border: 2px solid var(--gold-deep);
border-radius: 6px;
box-shadow: 0 0 0 1px #000, 0 4px 12px rgba(0,0,0,.5);
object-fit: cover;
background: #120d09;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold-hi);
flex-shrink: 0;
}
.aion-ico.sm { width: 40px; height: 40px; margin-bottom: 0; }
.aion-ico.lg { width: 64px; height: 64px; }
.aion-ico svg { width: 62%; height: 62%; }
/* Race / Faction markers */
.race-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .75rem;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 600;
}
.race-tag.elyos { color: var(--gold-hi); }
.race-tag.asmo { color: #bb6bd9; }
/* In-table podium indicators */
.podium-crown {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: 'Cinzel Decorative', serif;
font-weight: 700;
font-size: .88rem;
}
.podium-crown--gold { color: var(--gold-hi); text-shadow: 0 0 8px rgba(224,164,75,.6); }
.podium-crown--silver { color: #e2e8f0; text-shadow: 0 0 8px rgba(226,232,240,.5); }
.podium-crown--bronze { color: #d97706; text-shadow: 0 0 8px rgba(217,119,6,.5); }
/* Forms & Authentication (Sulvus Style) */
.auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
.auth-card {
width: min(100%, 460px);
background: linear-gradient(180deg, rgba(22,17,13,.95), rgba(11,8,8,.95));
border: 1px solid var(--ash-line);
box-shadow: var(--shadow);
padding: 40px 36px 36px;
position: relative;
clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
text-align: center;
}
.auth-card-wide {
width: min(100%, 540px);
}
.auth-card::before {
content: "";
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.auth-brand {
margin: 0 auto 22px;
display: flex;
justify-content: center;
}
.auth-brand-logo {
height: 82px;
width: auto;
max-width: 220px;
object-fit: contain;
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 12px rgba(224, 164, 75, 0.25));
transition: transform 0.2s ease;
}
.auth-brand-logo:hover {
transform: scale(1.03);
}
.auth-title {
font-family: 'Marcellus', serif;
font-size: 1.8rem;
color: var(--gold-hi);
margin: 0 0 8px;
}
.auth-lead {
color: var(--bone-dim);
font-size: .94rem;
margin: 0 0 24px;
}
.form-group {
margin-bottom: 18px;
text-align: left;
}
.form-group label {
display: block;
font-size: .76rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-hi);
margin-bottom: 7px;
}
.form-input {
width: 100%;
padding: 12px 14px;
background: rgba(11,8,8,.8);
border: 1px solid var(--ash-line);
color: var(--bone);
font-family: 'Inter', sans-serif;
font-size: .92rem;
border-radius: var(--radius);
transition: border-color .2s ease, box-shadow .2s ease;
}
.form-input:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 10px rgba(224,164,75,.25);
}
.form-hint {
font-size: .78rem;
color: var(--bone-dim);
margin: 5px 0 0;
}
.form-check {
display: flex;
align-items: center;
gap: 10px;
font-size: .88rem;
color: var(--bone-dim);
cursor: pointer;
text-align: left;
}
.auth-submit {
width: 100%;
margin-top: 20px;
margin-bottom: 0;
padding: 14px 28px;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
}
.auth-footer {
margin: 32px 0 0;
padding-top: 22px;
border-top: 1px solid var(--ash-line);
font-size: .88rem;
color: var(--bone-dim);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.auth-footer a {
color: var(--gold-hi);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
transition: color .2s ease;
}
.auth-footer a:hover {
color: #fff;
text-shadow: 0 0 10px var(--gold);
}
/* Flash Messages */
.flash {
padding: 12px 16px;
margin-bottom: 20px;
border-radius: var(--radius);
font-size: .9rem;
border: 1px solid transparent;
}
.flash--success {
background: rgba(87,198,169,.15);
border-color: var(--jade);
color: #c4f3e7;
}
.flash--error {
background: rgba(214,65,43,.18);
border-color: var(--ember);
color: #ffded8;
}
/* General Tables (Rankings, Account) */
.table-wrap {
width: 100%;
overflow-x: auto;
margin: 20px 0;
border: 1px solid var(--ash-line);
background: rgba(18,13,10,.7);
}
table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: .9rem;
}
th {
padding: 12px 16px;
background: rgba(26,19,15,.9);
color: var(--gold-hi);
font-family: 'Inter', sans-serif;
font-size: .78rem;
letter-spacing: .08em;
text-transform: uppercase;
border-bottom: 1px solid var(--ash-line);
}
td {
padding: 12px 16px;
border-bottom: 1px solid rgba(224,164,75,.08);
color: var(--bone);
}
tr:hover td {
background: rgba(224,164,75,.05);
}
/* Tabs & Filters */
.tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.tabs a, .tabs button {
padding: 8px 18px;
background: rgba(22,17,13,.6);
border: 1px solid var(--ash-line);
color: var(--bone-dim);
font-family: 'Inter', sans-serif;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.tabs a:hover, .tabs button:hover {
color: var(--gold-hi);
border-color: var(--gold);
}
.tabs a.is-active, .tabs button.is-active {
background: var(--ember);
border-color: var(--ember-hi);
color: #fff;
box-shadow: 0 4px 14px rgba(214,65,43,.4);
}
/* Page Hero Subheader */
.page-hero {
padding: 140px 0 50px;
text-align: center;
border-bottom: 1px solid var(--ash-line);
background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(214,65,43,.12), transparent 70%);
}
.page-hero .display {
font-size: clamp(2rem, 4vw, 3.2rem);
margin-bottom: 12px;
}
.page-hero .lead {
color: var(--bone-dim);
max-width: 680px;
margin: 0 auto;
}
/* Cards & Panels */
.panel {
background: linear-gradient(180deg, rgba(24,18,13,.85), rgba(13,10,8,.9));
border: 1px solid var(--ash-line);
padding: 28px 24px;
margin-bottom: 24px;
}
.panel-accent {
border-left: 3px solid var(--ember);
}
/* Faction allegiance picker in Nav */
.header-faction-picker {
display: inline-flex;
align-items: center;
background: rgba(12, 8, 7, 0.85);
border: 1px solid var(--ash-line);
padding: 3px;
gap: 3px;
border-radius: 4px;
backdrop-filter: blur(8px);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
transition: all 0.3s ease;
}
.faction-picker-btn {
background: transparent;
border: 1px solid transparent;
color: var(--bone-dim);
font-family: 'Cinzel', serif;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
padding: 5px 12px;
cursor: pointer;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 2px;
text-transform: uppercase;
user-select: none;
}
.faction-picker-btn:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
.faction-picker-btn.is-active {
color: #ffffff;
}
.faction-picker-btn--dual.is-active {
background: linear-gradient(135deg, #e0a44b, #d6412b);
border-color: rgba(255, 217, 138, 0.5);
box-shadow: 0 0 12px rgba(224, 164, 75, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.faction-picker-btn--elyos.is-active {
background: linear-gradient(135deg, #f5c842, #2563eb);
border-color: rgba(147, 197, 253, 0.65);
box-shadow: 0 0 14px rgba(56, 189, 248, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.faction-picker-btn--asmo.is-active {
background: linear-gradient(135deg, #a855f7, #dc2626);
border-color: rgba(244, 114, 182, 0.65);
box-shadow: 0 0 14px rgba(220, 38, 38, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.faction-picker-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
transition: all 0.25s ease;
}
.faction-picker-btn--elyos .faction-picker-dot {
background: #38bdf8;
box-shadow: 0 0 6px #38bdf8;
}
.faction-picker-btn--asmo .faction-picker-dot {
background: #f43f5e;
box-shadow: 0 0 6px #f43f5e;
}
/* Faction Balance HUD in Nav */
.hud-faction-balance {
display: flex;
align-items: center;
gap: 8px;
background: rgba(18, 13, 10, 0.6);
border: 1px solid var(--ash-line);
padding: 5px 10px;
font-size: 0.78rem;
}
@media (max-width: 1080px) {
.hud-faction-balance { display: none; }
}
.hud-faction-side {
display: flex;
align-items: center;
gap: 5px;
}
.hud-race-icon {
width: 16px;
height: 16px;
}
.hud-race-label {
color: var(--bone-dim);
font-weight: 500;
}
.hud-race-count {
font-weight: 700;
color: var(--gold-hi);
}
.hud-faction-side--asmo .hud-race-count {
color: #bb6bd9;
}
.hud-balance-track {
width: 50px;
height: 6px;
background: rgba(0,0,0,0.5);
display: flex;
overflow: hidden;
border-radius: 2px;
}
.hud-balance-fill--elyos {
background: var(--gold);
}
.hud-balance-fill--asmo {
background: #7928ca;
}
/* Status pill */
.status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
padding: 4px 9px;
border: 1px solid var(--ash-line);
background: rgba(18, 13, 10, 0.6);
}
.status-pill-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 8px #22c55e;
}
.status-pill.offline .status-pill-dot {
background: #ef4444;
box-shadow: 0 0 8px #ef4444;
}
/* Class matrix interactive section (inside #classes) */
.class-matrix-box {
margin-top: 48px;
background: linear-gradient(180deg, rgba(22, 17, 13, 0.85), rgba(11, 8, 8, 0.95));
border: 1px solid var(--ash-line);
padding: 30px;
}
.class-pill-track {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 30px;
}
.class-pill-btn {
background: rgba(14, 10, 8, 0.7);
border: 1px solid var(--ash-line);
color: var(--bone-dim);
padding: 8px 14px;
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
transition: all 0.2s ease;
}
.class-pill-btn:hover {
color: var(--gold-hi);
border-color: var(--gold-deep);
}
.class-pill-btn.is-active {
background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-deep));
color: #1c1207;
border-color: var(--gold-hi);
box-shadow: 0 4px 14px rgba(224, 164, 75, 0.4);
}
.class-spec-dossier {
display: none;
grid-template-columns: 1.2fr 1fr;
gap: 36px;
align-items: center;
}
.class-spec-dossier.is-active {
display: grid;
}
@media (max-width: 800px) {
.class-spec-dossier {
grid-template-columns: 1fr;
}
}
.dossier-role-tag {
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--jade);
font-weight: 600;
margin-bottom: 8px;
display: block;
}
.dossier-class-name {
font-family: 'Marcellus', serif;
font-size: 2.2rem;
color: var(--gold-hi);
margin: 0 0 14px;
}
.dossier-desc {
color: var(--bone-dim);
font-size: 0.95rem;
margin-bottom: 20px;
}
.dossier-specs-list {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 0.88rem;
color: var(--bone);
border-left: 2px solid var(--gold-deep);
padding-left: 14px;
}
.dossier-combat-matrix {
display: flex;
flex-direction: column;
gap: 16px;
}
.gauge-row {
display: flex;
flex-direction: column;
gap: 5px;
}
.gauge-label {
display: flex;
justify-content: space-between;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bone-dim);
}
.gauge-track {
width: 100%;
height: 8px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid var(--ash-line);
overflow: hidden;
}
.gauge-fill {
height: 100%;
transition: width 0.6s ease;
}
.gauge-fill--atk { background: linear-gradient(90deg, #d6412b, #f0623a); }
.gauge-fill--def { background: linear-gradient(90deg, #e0a44b, #ffd98a); }
.gauge-fill--rng { background: linear-gradient(90deg, #57c6a9, #8aeed7); }
.gauge-fill--utl { background: linear-gradient(90deg, #8b5cf6, #c084fc); }
/* War room mini table for top daevas in #lootbox section */
.war-room-mini-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 40px;
}
@media (max-width: 768px) {
.war-room-mini-grid {
grid-template-columns: 1fr;
}
}
.war-room-mini-card {
background: rgba(18, 13, 10, 0.7);
border: 1px solid var(--ash-line);
padding: 22px;
}
.war-card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--ash-line);
}
.war-card-title {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Marcellus', serif;
font-size: 1.15rem;
color: var(--gold-hi);
margin: 0;
}
.war-card-link {
font-size: 0.8rem;
color: var(--jade);
font-weight: 600;
letter-spacing: 0.05em;
transition: color 0.2s ease;
}
.war-card-link:hover {
color: var(--gold-hi);
}
.mini-table {
width: 100%;
border-collapse: collapse;
}
.mini-table th {
padding: 8px 10px;
font-size: 0.72rem;
text-transform: uppercase;
color: var(--gold-hi);
border-bottom: 1px solid var(--ash-line);
background: transparent;
}
.mini-table td {
padding: 9px 10px;
font-size: 0.85rem;
border-bottom: 1px solid rgba(224, 164, 75, 0.08);
}
.daeva-race-indicator {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
margin-right: 7px;
}
.daeva-race-indicator.is-elyos {
background: var(--gold);
box-shadow: 0 0 6px var(--gold);
}
.daeva-race-indicator.is-asmo {
background: #a855f7;
box-shadow: 0 0 6px #a855f7;
}
.podium-rank-badge {
font-size: 0.82rem;
font-weight: 700;
}
.podium-rank--gold { color: var(--gold-hi); }
.podium-rank--silver { color: #cbd5e1; }
.podium-rank--bronze { color: #d97706; }
/* ==========================================================================
SUBPAGE UTILITIES & CARDS (Sulvus Theme)
========================================================================== */
.container {
max-width: var(--wrap);
margin: 0 auto;
padding: 0 30px;
}
.grid {
display: grid;
gap: 24px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.card {
background: linear-gradient(180deg, rgba(24, 18, 13, 0.85), rgba(13, 10, 8, 0.95));
border: 1px solid var(--ash-line);
padding: 28px 24px;
clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
position: relative;
display: flex;
flex-direction: column;
}
.card.panel-accent {
border-left: 3px solid var(--ember);
}
.card h3 {
font-family: 'Marcellus', serif;
font-size: 1.4rem;
color: var(--gold-hi);
margin: 0 0 10px;
}
.muted {
color: var(--bone-dim);
font-size: 0.92rem;
}
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 28px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 28px; }
.stack {
display: flex;
flex-direction: column;
gap: 10px;
padding-left: 20px;
color: var(--bone);
}
.stack li {
line-height: 1.6;
}
code {
background: rgba(0, 0, 0, 0.5);
border: 1px solid var(--ash-line);
padding: 2px 6px;
border-radius: 3px;
color: var(--gold-hi);
font-size: 0.88em;
}
.section {
padding: 60px 0;
}
/* ==========================================================================
SPACIOUS & ELEGANT 2-LINE SITE HEADER (Aion 4.8 Upheaval Obsidian & Gold)
========================================================================== */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(9, 6, 5, 0.96);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(224, 164, 75, 0.2);
box-shadow: 0 10px 36px rgba(0, 0, 0, 0.75);
padding: 14px 0 16px;
transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled {
padding: 10px 0 12px;
background: rgba(7, 4, 3, 0.98);
border-bottom-color: rgba(224, 164, 75, 0.32);
}
.site-header-inner {
max-width: 1680px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
}
@media (min-width: 1101px) {
.header-brand-block {
position: absolute;
left: 32px;
top: 50%;
transform: translateY(-50%);
}
}
/* Left Brand Block */
.header-brand-block {
display: flex;
align-items: center;
flex-shrink: 0;
}
.brand {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.brand-logo {
height: 74px;
width: auto;
max-width: 250px;
object-fit: contain;
filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(224, 164, 75, 0.2));
transition: transform 0.25s ease, height 0.3s ease, filter 0.25s ease;
}
.site-header.scrolled .brand-logo {
height: 58px;
}
.brand:hover .brand-logo {
transform: scale(1.04);
filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 16px rgba(224, 164, 75, 0.45));
}
/* Centered Two-Line Block */
.header-main-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px; /* Generous vertical separation between Line 1 and Line 2 */
width: auto;
margin: 0 auto;
}
/* Line 1: Main Navigation Links (Centered) */
.site-nav {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.site-nav-list {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: clamp(14px, 1.8vw, 30px);
list-style: none;
margin: 0;
padding: 0;
}
.site-nav-list li {
margin: 0;
padding: 0;
}
.site-nav-list a,
.site-nav-list .nav-dropdown-toggle {
font-family: 'Cinzel', serif;
font-size: clamp(0.85rem, 0.95vw, 0.95rem);
font-weight: 700;
letter-spacing: 0.05em;
color: #e2dac8;
white-space: nowrap;
padding: 4px 6px;
position: relative;
background: none;
border: none;
cursor: pointer;
transition: color 0.2s ease, text-shadow 0.2s ease;
display: inline-flex;
align-items: center;
gap: 5px;
text-transform: uppercase;
}
.site-nav-list a:hover,
.site-nav-list a.is-active,
.site-nav-list .nav-dropdown-toggle:hover,
.site-nav-list .nav-dropdown-toggle.is-active {
color: var(--gold-hi);
text-shadow: 0 0 12px rgba(224, 164, 75, 0.6);
}
.site-nav-list a::after,
.site-nav-list .nav-dropdown-toggle::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
}
.site-nav-list a:hover::after,
.site-nav-list a.is-active::after,
.site-nav-list .nav-dropdown-toggle:hover::after,
.site-nav-list .nav-dropdown-toggle.is-active::after {
transform: scaleX(1);
}
.site-nav-list .nav-caret {
font-size: 0.72rem;
opacity: 0.75;
transition: transform 0.2s ease;
}
.nav-item-dropdown.is-open .nav-caret {
transform: rotate(180deg);
}
/* Dropdown Menus */
.nav-item-dropdown {
position: relative;
}
.nav-dropdown {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 200px;
background: rgba(14, 10, 8, 0.98);
border: 1px solid rgba(224, 164, 75, 0.25);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9);
list-style: none;
padding: 8px 6px;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 120;
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.nav-dropdown::before {
content: '';
position: absolute;
top: 0;
left: 10px;
right: 10px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
@media (min-width: 961px) {
.nav-item-dropdown:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
}
.nav-item-dropdown.is-open .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown li {
margin: 0;
}
.nav-dropdown a {
display: block !important;
width: 100%;
padding: 9px 14px !important;
color: #d6cdb8 !important;
font-family: 'Inter', sans-serif !important;
font-size: 0.88rem !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: normal !important;
border-radius: 2px;
transition: background 0.15s ease, color 0.15s ease !important;
text-align: left;
}
.nav-dropdown a::after {
display: none !important;
}
.nav-dropdown a:hover,
.nav-dropdown a.is-active {
background: rgba(224, 164, 75, 0.14) !important;
color: var(--gold-hi) !important;
}
/* Line 2: Actions Bar (Centered) */
.header-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: nowrap;
}
.header-btn {
padding: 7px 16px !important;
font-size: 0.82rem !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
white-space: nowrap;
letter-spacing: 0.04em;
}
/* Mobile Toggle */
.nav-toggle {
display: none;
background: none;
border: 1px solid var(--ash-line);
color: var(--bone);
padding: 8px 12px;
cursor: pointer;
clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--gold-hi);
margin: 4px 0;
transition: all 0.25s ease;
}
@media (max-width: 1100px) and (min-width: 961px) {
.site-header-inner {
justify-content: space-between;
padding: 0 20px;
}
.header-brand-block {
position: static;
transform: none;
}
.site-nav-list {
gap: 14px;
}
.header-actions {
gap: 8px;
}
}
@media (max-width: 960px) {
.desktop-only { display: none !important; }
.header-main-block {
display: none;
}
.nav-toggle {
display: block;
}
.site-nav {
display: block;
position: fixed;
top: 0;
right: 0;
width: min(85vw, 320px);
height: 100vh;
background: rgba(14, 10, 8, 0.98);
border-left: 1px solid var(--ash-line);
padding: 70px 24px 30px;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
box-shadow: -10px 0 30px rgba(0,0,0,.85);
z-index: 150;
}
.site-nav.is-open {
transform: translateX(0);
}
.site-nav-list {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.site-nav-list a,
.site-nav-list .nav-dropdown-toggle {
width: 100%;
justify-content: space-between;
padding: 12px 8px;
border-bottom: 1px solid rgba(224,164,75,.08);
}
.nav-dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
display: none;
box-shadow: none;
border: none;
padding: 4px 0 8px 14px;
background: transparent;
clip-path: none;
}
.nav-item-dropdown.is-open .nav-dropdown {
display: block;
}
}
/* ==========================================================================
HERO VIDEO BACKGROUND (Homapge.mp4 HD)
========================================================================== */
.hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 150px 24px 100px;
overflow: hidden;
}
.hero-video-wrap {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.hero-bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
}
.hero-video-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(ellipse 75% 65% at 50% 38%, rgba(11, 8, 8, 0.40) 15%, rgba(11, 8, 8, 0.82) 80%),
linear-gradient(180deg, rgba(11, 8, 8, 0.80) 0%, rgba(11, 8, 8, 0.48) 45%, rgba(11, 8, 8, 0.98) 100%);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 860px;
}
/* ==========================================================================
FACTION ALLEGIANCE THEME OVERRIDES (ELYOS & ASMODIAN & ATREIA)
========================================================================== */
/* Universal transitions for silky smooth theme switching */
.site-header,
.site-nav,
.nav-dropdown,
.panel,
.pvp-card,
.auth-card,
.class-matrix-box,
.table-wrap,
.btn,
.countdown .unit,
footer,
.sticky-cta,
.stat,
.hero-video-overlay,
.hero-overlay {
transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}
/* --------------------------------------------------------------------------
ELYOS THEME (Sanctum / Divine Light / Celestial Azure & Solar Gold)
-------------------------------------------------------------------------- */
html[data-faction="elyos"] body::before {
background:
radial-gradient(ellipse 65% 45% at 50% -5%, rgba(56, 189, 248, 0.22), transparent 60%),
radial-gradient(ellipse 50% 45% at 12% 105%, rgba(245, 200, 66, 0.16), transparent 60%),
radial-gradient(ellipse 55% 45% at 90% 60%, rgba(37, 99, 235, 0.18), transparent 65%),
linear-gradient(180deg, #050a14 0%, #091325 45%, #050a14 100%);
}
html[data-faction="elyos"] body::after {
background-image:
radial-gradient(1.5px 1.5px at 18% 30%, rgba(147, 197, 253, 0.7) 50%, transparent 60%),
radial-gradient(1px 1px at 42% 70%, rgba(245, 208, 115, 0.55) 50%, transparent 60%),
radial-gradient(1.4px 1.4px at 66% 22%, rgba(186, 230, 253, 0.65) 50%, transparent 60%),
radial-gradient(1px 1px at 82% 78%, rgba(96, 165, 250, 0.5) 50%, transparent 60%),
radial-gradient(1.2px 1.2px at 8% 84%, rgba(254, 240, 138, 0.55) 50%, transparent 60%);
}
html[data-faction="elyos"] ::selection {
background: #2563eb;
color: #ffffff;
}
/* Header & Nav - Elyos */
html[data-faction="elyos"] .site-header {
background: rgba(5, 10, 20, 0.96);
border-bottom: 1px solid rgba(96, 165, 250, 0.25);
}
html[data-faction="elyos"] .site-header.scrolled {
background: rgba(3, 7, 15, 0.98);
border-bottom-color: rgba(245, 200, 66, 0.35);
}
html[data-faction="elyos"] .brand-slogan {
color: #f5c842;
}
html[data-faction="elyos"] .site-nav-list a:hover,
html[data-faction="elyos"] .site-nav-list a.is-active,
html[data-faction="elyos"] .site-nav-list .nav-dropdown-toggle:hover,
html[data-faction="elyos"] .site-nav-list .nav-dropdown-toggle.is-active {
color: #fff4d0;
text-shadow: 0 0 14px rgba(96, 165, 250, 0.75);
}
html[data-faction="elyos"] .site-nav-list a::after,
html[data-faction="elyos"] .site-nav-list .nav-dropdown-toggle::after {
background: linear-gradient(90deg, transparent, #60a5fa, transparent);
}
html[data-faction="elyos"] .nav-dropdown {
background: rgba(7, 14, 28, 0.98);
border-color: rgba(96, 165, 250, 0.3);
box-shadow: 0 18px 40px rgba(2, 6, 14, 0.95);
}
html[data-faction="elyos"] .nav-dropdown::before {
background: linear-gradient(90deg, transparent, #60a5fa, transparent);
}
html[data-faction="elyos"] .nav-dropdown a:hover,
html[data-faction="elyos"] .nav-dropdown a.is-active {
background: rgba(37, 99, 235, 0.22) !important;
color: #fff4d0 !important;
}
html[data-faction="elyos"] .site-nav {
background: rgba(7, 14, 28, 0.98);
}
/* Hero & Video - Elyos */
html[data-faction="elyos"] .hero-video-overlay {
background:
radial-gradient(ellipse 75% 65% at 50% 38%, rgba(5, 10, 20, 0.35) 15%, rgba(5, 10, 20, 0.82) 80%),
linear-gradient(180deg, rgba(5, 10, 20, 0.82) 0%, rgba(5, 10, 20, 0.45) 45%, rgba(5, 10, 20, 0.98) 100%);
}
html[data-faction="elyos"] .hero-overlay {
background:
radial-gradient(ellipse 70% 60% at 50% 38%, transparent 18%, rgba(5, 10, 20, 0.55) 78%),
linear-gradient(180deg, rgba(5, 10, 20, 0.62) 0%, rgba(5, 10, 20, 0.35) 40%, rgba(5, 10, 20, 0.94) 100%);
}
html[data-faction="elyos"] .wc-gold {
background: linear-gradient(180deg, #ffffff 0%, #fff4d0 25%, #fde047 48%, #eab308 62%, #ca8a04 76%, #fef08a 90%, #854d0e 100%);
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(0 1px 0 #0c1a30) drop-shadow(0 2px 0 #060e1c) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
}
html[data-faction="elyos"] .logo-mid {
color: #fff4d0;
text-shadow: 0 1px 0 #0c1a30, 0 2px 4px rgba(0, 0, 0, 0.7);
}
html[data-faction="elyos"] .logo-mid .gem {
background: radial-gradient(circle at 40% 40%, #ffffff, #38bdf8 55%, #0284c7);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);
}
html[data-faction="elyos"] .logo-sub {
color: #38bdf8;
}
/* Buttons - Elyos */
html[data-faction="elyos"] .btn-primary {
background: linear-gradient(180deg, #60a5fa, #2563eb 60%, #1d4ed8);
color: #ffffff;
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html[data-faction="elyos"] .btn-primary:hover {
filter: brightness(1.12);
box-shadow: 0 12px 30px rgba(96, 165, 250, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
html[data-faction="elyos"] .btn-gold {
background: linear-gradient(180deg, #fff4d0, #f5c842 60%, #b3821a);
color: #0b1528;
box-shadow: 0 8px 22px rgba(245, 200, 66, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
html[data-faction="elyos"] .btn-gold:hover {
filter: brightness(1.1);
}
html[data-faction="elyos"] .btn-ghost {
background: rgba(14, 29, 56, 0.5);
color: var(--gold-hi);
box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4);
}
html[data-faction="elyos"] .btn-ghost:hover {
box-shadow: inset 0 0 0 1px var(--gold);
color: #ffffff;
}
/* Cards & Panels - Elyos */
html[data-faction="elyos"] .panel,
html[data-faction="elyos"] .pvp-card,
html[data-faction="elyos"] .auth-card,
html[data-faction="elyos"] .class-matrix-box {
background: linear-gradient(180deg, rgba(14, 29, 56, 0.92), rgba(6, 12, 24, 0.95));
border-color: rgba(96, 165, 250, 0.24);
}
html[data-faction="elyos"] .auth-card::before {
background: linear-gradient(90deg, transparent, #60a5fa, transparent);
}
html[data-faction="elyos"] .panel-accent {
border-left: 3px solid #2563eb;
}
html[data-faction="elyos"] .stat {
background: rgba(14, 29, 56, 0.6);
border-color: rgba(96, 165, 250, 0.24);
border-left: 2px solid #2563eb;
}
html[data-faction="elyos"] .pvp-card::before {
background: linear-gradient(90deg, #2563eb, #f5c842);
}
html[data-faction="elyos"] .countdown .unit {
background: linear-gradient(180deg, rgba(14, 29, 56, 0.9), rgba(7, 14, 28, 0.9));
border-color: rgba(96, 165, 250, 0.24);
}
html[data-faction="elyos"] .countdown .unit::before {
background: linear-gradient(90deg, transparent, #60a5fa, transparent);
}
html[data-faction="elyos"] .page-hero {
background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(37, 99, 235, 0.16), transparent 70%);
}
html[data-faction="elyos"] .forge-rule .ln {
background: linear-gradient(90deg, transparent, #f5c842, transparent);
}
html[data-faction="elyos"] .forge-rule .em {
background: #2563eb;
box-shadow: 0 0 12px #60a5fa;
}
html[data-faction="elyos"] .tabs a.is-active,
html[data-faction="elyos"] .tabs button.is-active {
background: #2563eb;
border-color: #60a5fa;
color: #ffffff;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
}
html[data-faction="elyos"] .table-wrap {
background: rgba(8, 16, 32, 0.85);
border-color: rgba(96, 165, 250, 0.22);
}
html[data-faction="elyos"] th {
background: rgba(14, 29, 56, 0.95);
}
html[data-faction="elyos"] td {
border-bottom: 1px solid rgba(96, 165, 250, 0.1);
}
html[data-faction="elyos"] tr:hover td {
background: rgba(96, 165, 250, 0.08);
}
html[data-faction="elyos"] .scroll-cue .line {
background: linear-gradient(#60a5fa, transparent);
}
html[data-faction="elyos"] footer {
background: rgba(5, 10, 20, 0.85);
border-top-color: rgba(96, 165, 250, 0.2);
}
html[data-faction="elyos"] .sticky-cta {
background: rgba(5, 10, 20, 0.96);
border-top-color: rgba(96, 165, 250, 0.4);
}
html[data-faction="elyos"] .eyebrow {
color: #38bdf8;
}
html[data-faction="elyos"] .eyebrow::before {
background: #38bdf8;
}
/* --------------------------------------------------------------------------
ASMODIAN THEME (Pandaemonium / Shadow Dusk / Imperial Violet & Berserk Crimson)
-------------------------------------------------------------------------- */
html[data-faction="asmo"] body::before {
background:
radial-gradient(ellipse 65% 45% at 50% -5%, rgba(220, 38, 38, 0.24), transparent 60%),
radial-gradient(ellipse 50% 45% at 12% 105%, rgba(168, 85, 247, 0.18), transparent 60%),
radial-gradient(ellipse 55% 45% at 90% 60%, rgba(217, 70, 239, 0.14), transparent 65%),
linear-gradient(180deg, #0d0612 0%, #170b24 45%, #0d0612 100%);
}
html[data-faction="asmo"] body::after {
background-image:
radial-gradient(1.5px 1.5px at 18% 30%, rgba(244, 114, 182, 0.55) 50%, transparent 60%),
radial-gradient(1px 1px at 42% 70%, rgba(239, 68, 68, 0.5) 50%, transparent 60%),
radial-gradient(1.4px 1.4px at 66% 22%, rgba(192, 132, 252, 0.6) 50%, transparent 60%),
radial-gradient(1px 1px at 82% 78%, rgba(220, 38, 38, 0.45) 50%, transparent 60%),
radial-gradient(1.2px 1.2px at 8% 84%, rgba(216, 180, 254, 0.5) 50%, transparent 60%);
}
html[data-faction="asmo"] ::selection {
background: #dc2626;
color: #ffffff;
}
/* Header & Nav - Asmo */
html[data-faction="asmo"] .site-header {
background: rgba(13, 6, 18, 0.97);
border-bottom: 1px solid rgba(192, 132, 252, 0.25);
}
html[data-faction="asmo"] .site-header.scrolled {
background: rgba(9, 4, 13, 0.99);
border-bottom-color: rgba(220, 38, 38, 0.38);
}
html[data-faction="asmo"] .brand-slogan {
color: #c084fc;
}
html[data-faction="asmo"] .site-nav-list a:hover,
html[data-faction="asmo"] .site-nav-list a.is-active,
html[data-faction="asmo"] .site-nav-list .nav-dropdown-toggle:hover,
html[data-faction="asmo"] .site-nav-list .nav-dropdown-toggle.is-active {
color: #f5d0fe;
text-shadow: 0 0 14px rgba(192, 132, 252, 0.75);
}
html[data-faction="asmo"] .site-nav-list a::after,
html[data-faction="asmo"] .site-nav-list .nav-dropdown-toggle::after {
background: linear-gradient(90deg, transparent, #c084fc, transparent);
}
html[data-faction="asmo"] .nav-dropdown {
background: rgba(16, 7, 23, 0.98);
border-color: rgba(192, 132, 252, 0.3);
box-shadow: 0 18px 40px rgba(5, 2, 8, 0.95);
}
html[data-faction="asmo"] .nav-dropdown::before {
background: linear-gradient(90deg, transparent, #c084fc, transparent);
}
html[data-faction="asmo"] .nav-dropdown a:hover,
html[data-faction="asmo"] .nav-dropdown a.is-active {
background: rgba(126, 34, 206, 0.25) !important;
color: #f5d0fe !important;
}
html[data-faction="asmo"] .site-nav {
background: rgba(16, 7, 23, 0.98);
}
/* Hero & Video - Asmo */
html[data-faction="asmo"] .hero-video-overlay {
background:
radial-gradient(ellipse 75% 65% at 50% 38%, rgba(13, 6, 18, 0.38) 15%, rgba(13, 6, 18, 0.85) 80%),
linear-gradient(180deg, rgba(13, 6, 18, 0.82) 0%, rgba(13, 6, 18, 0.48) 45%, rgba(13, 6, 18, 0.98) 100%);
}
html[data-faction="asmo"] .hero-overlay {
background:
radial-gradient(ellipse 70% 60% at 50% 38%, transparent 18%, rgba(13, 6, 18, 0.58) 78%),
linear-gradient(180deg, rgba(13, 6, 18, 0.65) 0%, rgba(13, 6, 18, 0.38) 40%, rgba(13, 6, 18, 0.95) 100%);
}
html[data-faction="asmo"] .wc-gold {
background: linear-gradient(180deg, #fae8ff 0%, #f0abfc 25%, #e879f9 48%, #c084fc 62%, #7e22ce 76%, #f5d0fe 90%, #581c87 100%);
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(0 1px 0 #280b38) drop-shadow(0 2px 0 #180524) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
}
html[data-faction="asmo"] .logo-mid {
color: #f5d0fe;
text-shadow: 0 1px 0 #280b38, 0 2px 4px rgba(0, 0, 0, 0.7);
}
html[data-faction="asmo"] .logo-mid .gem {
background: radial-gradient(circle at 40% 40%, #fae8ff, #d946ef 55%, #7e22ce);
box-shadow: 0 0 12px rgba(217, 70, 239, 0.9);
}
html[data-faction="asmo"] .logo-sub {
color: #d946ef;
}
/* Buttons - Asmo */
html[data-faction="asmo"] .btn-primary {
background: linear-gradient(180deg, #ef4444, #dc2626 60%, #991b1b);
color: #ffffff;
box-shadow: 0 8px 22px rgba(220, 38, 38, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
html[data-faction="asmo"] .btn-primary:hover {
filter: brightness(1.12);
box-shadow: 0 12px 30px rgba(239, 68, 68, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
html[data-faction="asmo"] .btn-gold {
background: linear-gradient(180deg, #f5d0fe, #c084fc 60%, #7e22ce);
color: #140722;
box-shadow: 0 8px 22px rgba(192, 132, 252, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
html[data-faction="asmo"] .btn-gold:hover {
filter: brightness(1.1);
}
html[data-faction="asmo"] .btn-ghost {
background: rgba(31, 15, 43, 0.5);
color: var(--gold-hi);
box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.4);
}
html[data-faction="asmo"] .btn-ghost:hover {
box-shadow: inset 0 0 0 1px var(--gold);
color: #ffffff;
}
/* Cards & Panels - Asmo */
html[data-faction="asmo"] .panel,
html[data-faction="asmo"] .pvp-card,
html[data-faction="asmo"] .auth-card,
html[data-faction="asmo"] .class-matrix-box {
background: linear-gradient(180deg, rgba(31, 15, 43, 0.92), rgba(13, 6, 18, 0.95));
border-color: rgba(192, 132, 252, 0.24);
}
html[data-faction="asmo"] .auth-card::before {
background: linear-gradient(90deg, transparent, #c084fc, transparent);
}
html[data-faction="asmo"] .panel-accent {
border-left: 3px solid #dc2626;
}
html[data-faction="asmo"] .stat {
background: rgba(31, 15, 43, 0.6);
border-color: rgba(192, 132, 252, 0.24);
border-left: 2px solid #dc2626;
}
html[data-faction="asmo"] .pvp-card::before {
background: linear-gradient(90deg, #dc2626, #c084fc);
}
html[data-faction="asmo"] .countdown .unit {
background: linear-gradient(180deg, rgba(31, 15, 43, 0.9), rgba(16, 7, 23, 0.9));
border-color: rgba(192, 132, 252, 0.24);
}
html[data-faction="asmo"] .countdown .unit::before {
background: linear-gradient(90deg, transparent, #ef4444, transparent);
}
html[data-faction="asmo"] .page-hero {
background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(220, 38, 38, 0.18), transparent 70%);
}
html[data-faction="asmo"] .forge-rule .ln {
background: linear-gradient(90deg, transparent, #c084fc, transparent);
}
html[data-faction="asmo"] .forge-rule .em {
background: #dc2626;
box-shadow: 0 0 12px #ef4444;
}
html[data-faction="asmo"] .tabs a.is-active,
html[data-faction="asmo"] .tabs button.is-active {
background: #dc2626;
border-color: #ef4444;
color: #ffffff;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.5);
}
html[data-faction="asmo"] .table-wrap {
background: rgba(17, 8, 24, 0.85);
border-color: rgba(192, 132, 252, 0.22);
}
html[data-faction="asmo"] th {
background: rgba(31, 15, 43, 0.95);
}
html[data-faction="asmo"] td {
border-bottom: 1px solid rgba(192, 132, 252, 0.1);
}
html[data-faction="asmo"] tr:hover td {
background: rgba(192, 132, 252, 0.08);
}
html[data-faction="asmo"] .scroll-cue .line {
background: linear-gradient(#c084fc, transparent);
}
html[data-faction="asmo"] footer {
background: rgba(13, 6, 18, 0.85);
border-top-color: rgba(192, 132, 252, 0.2);
}
html[data-faction="asmo"] .sticky-cta {
background: rgba(13, 6, 18, 0.96);
border-top-color: rgba(192, 132, 252, 0.4);
}
html[data-faction="asmo"] .eyebrow {
color: #d946ef;
}
html[data-faction="asmo"] .eyebrow::before {
background: #d946ef;
}
/* ==========================================================================
Rankings Page Enhancements (Sulvus / Aion 4.8 Design)
========================================================================== */
.ranking-badge-permanent {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(87,198,169,.1);
border: 1px solid rgba(87,198,169,.35);
color: var(--jade, #57c6a9);
padding: 6px 16px;
font-size: .8rem;
letter-spacing: .06em;
text-transform: uppercase;
font-weight: 700;
margin-top: 14px;
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.pulse-dot {
width: 8px;
height: 8px;
background: var(--jade, #57c6a9);
border-radius: 50%;
box-shadow: 0 0 8px var(--jade, #57c6a9);
animation: pulseGlow 2s infinite ease-in-out;
}
@keyframes pulseGlow {
0%, 100% { opacity: .4; transform: scale(.9); }
50% { opacity: 1; transform: scale(1.2); }
}
/* Ranking Category Groups */
.ranking-categories-bar {
display: flex;
flex-direction: column;
gap: 16px;
margin: 24px 0 32px;
background: rgba(18,13,10,.7);
border: 1px solid var(--ash-line);
padding: 16px 20px;
backdrop-filter: blur(8px);
}
.ranking-cat-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.ranking-cat-label {
font-family: 'Cinzel', serif;
font-size: .78rem;
letter-spacing: .1em;
color: var(--gold);
text-transform: uppercase;
font-weight: 700;
min-width: 140px;
display: flex;
align-items: center;
gap: 6px;
}
.ranking-cat-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
flex: 1;
}
.ranking-tab-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 15px;
background: rgba(22,17,13,.85);
border: 1px solid var(--ash-line);
color: var(--bone-dim);
font-size: .84rem;
font-weight: 600;
text-decoration: none;
transition: all .2s ease;
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.ranking-tab-link:hover {
color: var(--gold-hi);
border-color: var(--gold);
background: rgba(30,22,16,.95);
}
.ranking-tab-link.is-active {
background: var(--ember);
border-color: var(--ember-hi);
color: #fff;
box-shadow: 0 4px 14px rgba(214,65,43,.45);
}
/* Tab Info Box */
.ranking-info-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
background: linear-gradient(90deg, rgba(224,164,75,.08), rgba(22,17,13,.6));
border-left: 3px solid var(--gold);
border-top: 1px solid var(--ash-line);
border-right: 1px solid var(--ash-line);
border-bottom: 1px solid var(--ash-line);
padding: 12px 20px;
margin-bottom: 24px;
}
.ranking-info-text {
font-size: .88rem;
color: var(--bone);
display: flex;
align-items: center;
gap: 10px;
}
.ranking-info-text i {
color: var(--gold);
font-size: 1.1rem;
}
/* Toolbar & Filters */
.ranking-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px;
background: rgba(14,10,8,.85);
border: 1px solid var(--ash-line);
padding: 14px 18px;
}
.ranking-search-wrap {
position: relative;
flex: 1;
min-width: 240px;
max-width: 420px;
}
.ranking-search-wrap input {
width: 100%;
padding: 9px 14px 9px 38px;
background: rgba(22,17,13,.9);
border: 1px solid var(--ash-line);
color: var(--bone);
font-size: .86rem;
outline: none;
transition: border-color .2s;
}
.ranking-search-wrap input:focus {
border-color: var(--gold);
box-shadow: 0 0 10px rgba(224,164,75,.25);
}
.ranking-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--bone-dim);
pointer-events: none;
}
.ranking-filters-group {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.ranking-faction-pills {
display: flex;
gap: 4px;
background: rgba(22,17,13,.9);
border: 1px solid var(--ash-line);
padding: 3px;
}
.ranking-pill-btn {
padding: 6px 12px;
background: transparent;
border: 0;
color: var(--bone-dim);
font-size: .8rem;
font-weight: 600;
cursor: pointer;
transition: all .2s;
}
.ranking-pill-btn:hover {
color: var(--bone);
}
.ranking-pill-btn.is-active {
background: rgba(224,164,75,.15);
color: var(--gold-hi);
font-weight: 700;
}
.ranking-pill-btn.is-active.pill-elyos {
background: rgba(224,164,75,.2);
color: #ffd98a;
}
.ranking-pill-btn.is-active.pill-asmo {
background: rgba(187,107,217,.2);
color: #d896ff;
}
.ranking-class-dropdown {
padding: 8px 14px;
background: rgba(22,17,13,.9);
border: 1px solid var(--ash-line);
color: var(--bone);
font-size: .82rem;
font-weight: 600;
cursor: pointer;
outline: none;
}
.ranking-class-dropdown:focus {
border-color: var(--gold);
}
.ranking-count-badge {
font-size: .78rem;
color: var(--bone-dim);
font-variant-numeric: tabular-nums;
}
/* Podium Cards */
.ranking-podium {
display: grid;
grid-template-columns: 1fr 1.08fr 1fr;
gap: 18px;
margin-bottom: 36px;
align-items: end;
}
@media (max-width: 860px) {
.ranking-podium {
grid-template-columns: 1fr;
}
}
.podium-card {
background: linear-gradient(180deg, rgba(26,19,15,.95), rgba(14,10,8,.95));
border: 1px solid var(--ash-line);
padding: 24px 20px;
text-align: center;
position: relative;
transition: transform .25s ease, box-shadow .25s ease;
clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.podium-card:hover {
transform: translateY(-4px);
}
.podium-card--1 {
border-color: rgba(255,217,138,.45);
box-shadow: 0 0 25px rgba(224,164,75,.25);
background: linear-gradient(180deg, rgba(40,28,18,.98), rgba(18,13,9,.98));
padding: 30px 22px;
}
.podium-card--2 {
border-color: rgba(226,232,240,.35);
box-shadow: 0 0 18px rgba(226,232,240,.12);
}
.podium-card--3 {
border-color: rgba(217,119,6,.35);
box-shadow: 0 0 18px rgba(217,119,6,.15);
}
.podium-crest {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin: 0 auto 12px;
font-size: 1.5rem;
border-radius: 50%;
border: 2px solid;
}
.podium-card--1 .podium-crest {
border-color: #ffd98a;
background: radial-gradient(circle, rgba(255,217,138,.3), rgba(224,164,75,.05));
box-shadow: 0 0 14px rgba(255,217,138,.5);
}
.podium-card--2 .podium-crest {
border-color: #e2e8f0;
background: radial-gradient(circle, rgba(226,232,240,.25), transparent);
}
.podium-card--3 .podium-crest {
border-color: #d97706;
background: radial-gradient(circle, rgba(217,119,6,.25), transparent);
}
.podium-rank-tag {
font-family: 'Cinzel', serif;
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 6px;
}
.podium-card--1 .podium-rank-tag { color: var(--gold-hi); }
.podium-card--2 .podium-rank-tag { color: #cbd5e1; }
.podium-card--3 .podium-rank-tag { color: #f59e0b; }
.podium-player-name {
font-family: 'Cinzel', serif;
font-size: 1.25rem;
font-weight: 700;
margin: 4px 0 8px;
letter-spacing: .04em;
}
.podium-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.podium-metric-val {
font-family: 'Cinzel', serif;
font-size: 1.45rem;
font-weight: 700;
color: var(--gold-hi);
font-variant-numeric: tabular-nums;
margin-top: 8px;
}
.podium-metric-lbl {
font-size: .74rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--bone-dim);
}
/* Badges */
.rank-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: .84rem;
border-radius: 4px;
}
.rank-badge--1 {
background: linear-gradient(135deg, #ffd98a, #d97706);
color: #1a1005;
box-shadow: 0 0 8px rgba(255,217,138,.6);
}
.rank-badge--2 {
background: linear-gradient(135deg, #f1f5f9, #94a3b8);
color: #0f172a;
}
.rank-badge--3 {
background: linear-gradient(135deg, #f59e0b, #78350f);
color: #fff;
}
.rank-badge--num {
color: var(--bone-dim);
}
.race-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
font-size: .74rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
border-radius: 3px;
}
.race-badge--elyos {
background: rgba(224,164,75,.15);
border: 1px solid rgba(224,164,75,.35);
color: #ffd98a;
}
.race-badge--asmo {
background: rgba(187,107,217,.15);
border: 1px solid rgba(187,107,217,.35);
color: #d896ff;
}
.class-badge {
display: inline-block;
padding: 3px 8px;
font-size: .76rem;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
color: var(--bone);
border-radius: 3px;
}
.legion-badge {
color: var(--gold);
font-weight: 600;
font-size: .84rem;
display: inline-flex;
align-items: center;
gap: 4px;
}
.metric-highlight {
color: var(--gold-hi);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.metric-heal {
color: #57c6a9;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.metric-dispel {
color: #60a5fa;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.metric-dps {
color: #f0623a;
font-weight: 700;
font-variant-numeric: tabular-nums;
}