:root {
--gold:        #c8a84b;
--gold-light:  #e8cd7a;
--gold-dim:    #7a6228;
--bg-deep:     #0a0a0f;
--bg-panel:    #0f1018;
--bg-card:     #14161f;
--bg-card2:    #191c28;
--border:      #2a2e42;
--border-gold: #3d3018;
--text:        #c5c8d8;
--text-dim:    #7a7e95;
--text-bright: #e8eaf5;
--dk:      #c41e3a;
--druid:   #ff7c0a;
--hunter:  #aad372;
--mage:    #3fc7eb;
--paladin: #f48cba;
--priest:  #d8d8d8;
--rogue:   #fff468;
--shaman:  #0070dd;
--warlock: #8788ee;
--warrior: #c69b3a;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Crimson Pro', Georgia, serif;
background: var(--bg-deep);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: 0;
background:
	radial-gradient(ellipse 80% 60% at 50% 0%, #1a1428 0%, transparent 60%),
	radial-gradient(ellipse 40% 40% at 20% 80%, #0d1a2e 0%, transparent 50%),
	radial-gradient(ellipse 30% 30% at 80% 60%, #1a0d1a 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.wrapper {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px 80px;
}
header {
text-align: center;
padding: 56px 0 48px;
position: relative;
}
header::after {
content: '';
display: block;
width: 320px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
margin: 28px auto 0;
}
.header-eyebrow {
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold-dim);
margin-bottom: 14px;
}
h1 {
font-family: 'Cinzel', serif;
font-size: clamp(28px, 5vw, 48px);
font-weight: 700;
color: var(--gold-light);
line-height: 1.1;
text-shadow: 0 0 40px rgba(200,168,75,0.3);
letter-spacing: 1px;
}
.header-sub {
margin-top: 12px;
color: var(--text-dim);
font-size: 16px;
font-style: italic;
}
.class-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 52px;
}
.class-nav a {
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
padding: 7px 16px;
border: 1px solid var(--border);
border-radius: 2px;
background: var(--bg-card);
color: var(--text-dim);
transition: all 0.2s;
}
.class-nav a:hover { border-color: var(--cc, var(--gold-dim)); color: var(--cc, var(--gold-light)); background: var(--bg-card2); }
.class-nav a.dk      { --cc: var(--dk); }
.class-nav a.druid   { --cc: var(--druid); }
.class-nav a.hunter  { --cc: var(--hunter); }
.class-nav a.mage    { --cc: var(--mage); }
.class-nav a.paladin { --cc: var(--paladin); }
.class-nav a.priest  { --cc: var(--priest); }
.class-nav a.rogue   { --cc: var(--rogue); }
.class-nav a.shaman  { --cc: var(--shaman); }
.class-nav a.warlock { --cc: var(--warlock); }
.class-nav a.warrior { --cc: var(--warrior); }
.class-block {
margin-bottom: 52px;
opacity: 0;
transform: translateY(16px);
animation: fadeUp 0.5s forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: none; } }
.class-block:nth-child(1)  { animation-delay: 0.05s; }
.class-block:nth-child(2)  { animation-delay: 0.10s; }
.class-block:nth-child(3)  { animation-delay: 0.15s; }
.class-block:nth-child(4)  { animation-delay: 0.20s; }
.class-block:nth-child(5)  { animation-delay: 0.25s; }
.class-block:nth-child(6)  { animation-delay: 0.30s; }
.class-block:nth-child(7)  { animation-delay: 0.35s; }
.class-block:nth-child(8)  { animation-delay: 0.40s; }
.class-block:nth-child(9)  { animation-delay: 0.45s; }
.class-block:nth-child(10) { animation-delay: 0.50s; }
.class-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
position: relative;
}
.class-header::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 120px; height: 1px;
background: var(--class-color);
}
.class-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--class-color);
box-shadow: 0 0 8px var(--class-color);
flex-shrink: 0;
}
.class-name {
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 600;
color: var(--class-color);
letter-spacing: 0.5px;
}
.specs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 16px;
}
.spec-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
.spec-card:hover {
border-color: var(--class-color);
box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03);
}
.spec-header {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 18px;
background: var(--bg-card2);
border-bottom: 1px solid var(--border);
}
.spec-icon {
width: 8px; height: 8px;
border-radius: 1px;
background: var(--class-color);
opacity: 0.7;
flex-shrink: 0;
}
.spec-name {
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 600;
color: var(--text-bright);
letter-spacing: 0.5px;
}
.spec-tag {
margin-left: auto;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-dim);
font-family: 'Cinzel', serif;
}
.spec-body {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
.glyph-label {
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
font-family: 'Cinzel', serif;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.glyph-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.label-major { color: var(--gold); }
.label-minor { color: var(--text-dim); }
.glyph-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.glyph-item {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 15px;
color: var(--text);
line-height: 1.4;
}
.glyph-item::before {
content: '◆';
font-size: 6px;
color: var(--class-color);
opacity: 0.6;
flex-shrink: 0;
position: relative;
top: -1px;
}
.glyph-item.minor::before { color: var(--text-dim); }
footer {
text-align: center;
padding: 32px 0 0;
color: var(--text-dim);
font-size: 13px;
border-top: 1px solid var(--border);
font-style: italic;
}
@media (max-width: 600px) {
.specs-grid { grid-template-columns: 1fr; }
h1 { font-size: 26px; }
}