OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
HASH      2cea87104f3b
DATE      2025-07-21
SUBJECT   web: add faq, navbar and global css
FILES     8 CHANGED
HASH      2cea87104f3b
DATE      2025-07-21
SUBJECT   web: add faq, navbar and global css
FILES     8 CHANGED
 

diff --git a/web/src/components/Navigation.astro b/web/src/components/Navigation.a
stro
new file mode 100644
index 0000000..ea1c413
--- /dev/null
+++ b/web/src/components/Navigation.astro
@@ -0,0 +1,119 @@
+---
+// Navigation component for WoW MoP Rankings
+---
+
+<nav class="navbar">
+  <div class="navbar-container">
+    <div class="navbar-brand">
+      <a href="/" class="brand-link">
+        <span class="brand-text">WoW MoP Rankings</span>
+      </a>
+    </div>
+    
+    <div class="navbar-menu">
+      <a href="/" class="navbar-link">Rankings</a>
+      <a href="/comparison" class="navbar-link">Comparisons</a>
+      <a href="/faq" class="navbar-link">FAQ</a>
+      <a href="https://wowsims.com/mop" class="navbar-link" target="_blank" rel="
noopener noreferrer">WoWsims</a>
+      <a href="https://github.com/ooks-io/wowsims-stats" class="navbar-link navba
r-link-github" target="_blank" rel="noopener noreferrer">
+        <svg class="github-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="h
ttp://www.w3.org/2000/svg">
+          <path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.5
99.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.33
3-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237
 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.
334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1
.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291
-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235
 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192
.694.801.576C20.566 21.797 24 17.300 24 12c0-6.627-5.373-12-12-12z"/>
+        </svg>
+        GitHub
+      </a>
+    </div>
+  </div>
+</nav>
+
+<style>
+  .navbar {
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+  
+  .navbar-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    height: 60px;
+  }
+  
+  .navbar-brand {
+    flex-shrink: 0;
+  }
+  
+  .brand-link {
+    text-decoration: none;
+    color: inherit;
+  }
+  
+  .brand-text {
+    color: var(--highlight-color);
+    font-size: 1.4em;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+  }
+  
+  .navbar-menu {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+  }
+  
+  .navbar-link {
+    color: var(--text-primary);
+    text-decoration: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease, color 0.2s ease;
+    font-weight: 500;
+  }
+  
+  .navbar-link:hover {
+    background-color: var(--border-color);
+    color: var(--highlight-color);
+    text-decoration: none;
+  }
+  
+  .navbar-link.active {
+    background-color: var(--highlight-color);
+    color: var(--text-primary);
+  }
+  
+  .navbar-link-github {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  
+  .github-icon {
+    width: 16px;
+    height: 16px;
+  }
+  
+  /* Mobile responsive */
+  @media (max-width: 768px) {
+    .navbar-container {
+      padding: 0 15px;
+    }
+    
+    .brand-text {
+      font-size: 1.2em;
+    }
+    
+    .navbar-menu {
+      gap: 10px;
+    }
+    
+    .navbar-link {
+      padding: 6px 12px;
+      font-size: 0.9em;
+    }
+  }
+</style>
\ No newline at end of file


diff --git a/web/src/components/Navigation.a
stro b/web/src/components/Navigation.astro
new file mode 100644
index 0000000..ea1c413
--- /dev/null
+++ b/web/src/components/Navigation.astro
@@ -0,0 +1,119 @@
+---
+// Navigation component for WoW MoP Ranking
s
+---
+
+<nav class="navbar">
+  <div class="navbar-container">
+    <div class="navbar-brand">
+      <a href="/" class="brand-link">
+        <span class="brand-text">WoW MoP Ra
nkings</span>
+      </a>
+    </div>
+    
+    <div class="navbar-menu">
+      <a href="/" class="navbar-link">Ranki
ngs</a>
+      <a href="/comparison" class="navbar-l
ink">Comparisons</a>
+      <a href="/faq" class="navbar-link">FA
Q</a>
+      <a href="https://wowsims.com/mop" cla
ss="navbar-link" target="_blank" rel="noopen
er noreferrer">WoWsims</a>
+      <a href="https://github.com/ooks-io/w
owsims-stats" class="navbar-link navbar-link
-github" target="_blank" rel="noopener noref
errer">
+        <svg class="github-icon" viewBox="0
 0 24 24" fill="currentColor" xmlns="http://
www.w3.org/2000/svg">
+          <path d="M12 0C5.374 0 0 5.373 0 
12 0 17.302 3.438 21.8 8.207 23.387c.599.111
.793-.261.793-.577v-2.234c-3.338.726-4.033-1
.416-4.033-1.416-.546-1.387-1.333-1.756-1.33
3-1.756-1.089-.745.083-.729.083-.729 1.205.0
84 1.839 1.237 1.839 1.237 1.07 1.834 2.807 
1.304 3.492.997.107-.775.418-1.305.762-1.604
-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.
469-2.381 1.236-3.221-.124-.303-.535-1.524.1
17-3.176 0 0 1.008-.322 3.301 1.23A11.509 11
.509 0 0112 5.803c1.02.005 2.047.138 3.006.4
04 2.291-1.552 3.297-1.23 3.297-1.23.653 1.6
53.242 2.874.118 3.176.77.84 1.235 1.911 1.2
35 3.221 0 4.609-2.807 5.624-5.479 5.921.43.
372.823 1.102.823 2.222v3.293c0 .319.192.694
.801.576C20.566 21.797 24 17.300 24 12c0-6.6
27-5.373-12-12-12z"/>
+        </svg>
+        GitHub
+      </a>
+    </div>
+  </div>
+</nav>
+
+<style>
+  .navbar {
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-c
olor);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+  
+  .navbar-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    height: 60px;
+  }
+  
+  .navbar-brand {
+    flex-shrink: 0;
+  }
+  
+  .brand-link {
+    text-decoration: none;
+    color: inherit;
+  }
+  
+  .brand-text {
+    color: var(--highlight-color);
+    font-size: 1.4em;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+  }
+  
+  .navbar-menu {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+  }
+  
+  .navbar-link {
+    color: var(--text-primary);
+    text-decoration: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease,
 color 0.2s ease;
+    font-weight: 500;
+  }
+  
+  .navbar-link:hover {
+    background-color: var(--border-color);
+    color: var(--highlight-color);
+    text-decoration: none;
+  }
+  
+  .navbar-link.active {
+    background-color: var(--highlight-color
);
+    color: var(--text-primary);
+  }
+  
+  .navbar-link-github {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  
+  .github-icon {
+    width: 16px;
+    height: 16px;
+  }
+  
+  /* Mobile responsive */
+  @media (max-width: 768px) {
+    .navbar-container {
+      padding: 0 15px;
+    }
+    
+    .brand-text {
+      font-size: 1.2em;
+    }
+    
+    .navbar-menu {
+      gap: 10px;
+    }
+    
+    .navbar-link {
+      padding: 6px 12px;
+      font-size: 0.9em;
+    }
+  }
+</style>
\ No newline at end of file

 

diff --git a/web/src/components/SimulationMetadata.astro b/web/src/components/Simu
lationMetadata.astro
index f2a51c7..900204a 100644
--- a/web/src/components/SimulationMetadata.astro
+++ b/web/src/components/SimulationMetadata.astro
@@ -104,7 +104,7 @@ const formatRaidBuffs = (buffs: Record<string, boolean | numbe
r>) => {
   }
   
   .metadata-title {
-    color: #ea6962;
+    color: var(--highlight-color);
     margin: 0 0 15px 0;
     font-size: 1.2em;
     font-weight: 600;


diff --git a/web/src/components/SimulationMe
tadata.astro b/web/src/components/Simulation
Metadata.astro
index f2a51c7..900204a 100644
--- a/web/src/components/SimulationMetadata.
astro
+++ b/web/src/components/SimulationMetadata.
astro
@@ -104,7 +104,7 @@ const formatRaidBuffs = 
(buffs: Record<string, boolean | number>) =>
 {
   }
   
   .metadata-title {
-    color: #ea6962;
+    color: var(--highlight-color);
     margin: 0 0 15px 0;
     font-size: 1.2em;
     font-weight: 600;

 

diff --git a/web/src/components/Warning.astro b/web/src/components/Warning.astro
new file mode 100644
index 0000000..b907125
--- /dev/null
+++ b/web/src/components/Warning.astro
@@ -0,0 +1,79 @@
+---
+export interface Props {
+  title?: string;
+  children: any;
+}
+
+const { title = "Important Notice" } = Astro.props;
+---
+
+<div class="warning">
+  <div class="warning-header">
+    <svg class="warning-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w
3.org/2000/svg">
+      <path d="M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 
3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="curre
ntColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    <h3 class="warning-title">{title}</h3>
+  </div>
+  <div class="warning-content">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .warning {
+    background-color: #3a2a2a;
+    border: 1px solid #ea6962;
+    border-left: 4px solid #ea6962;
+    border-radius: 6px;
+    padding: 16px;
+    margin-bottom: 20px;
+  }
+  
+  .warning-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+  }
+  
+  .warning-icon {
+    width: 20px;
+    height: 20px;
+    color: #ea6962;
+    flex-shrink: 0;
+  }
+  
+  .warning-title {
+    color: #ea6962;
+    margin: 0;
+    font-size: 1em;
+    font-weight: 600;
+  }
+  
+  .warning-content {
+    color: var(--text-primary);
+    line-height: 1.5;
+    margin-left: 30px;
+  }
+  
+  .warning-content p {
+    margin: 0 0 8px 0;
+  }
+  
+  .warning-content p:last-child {
+    margin-bottom: 0;
+  }
+  
+  .warning-content a {
+    color: #ea6962;
+    text-decoration: none;
+  }
+  
+  .warning-content a:hover {
+    text-decoration: underline;
+  }
+  
+  .warning-content strong {
+    color: #ea6962;
+  }
+</style>
\ No newline at end of file


diff --git a/web/src/components/Warning.astr
o b/web/src/components/Warning.astro
new file mode 100644
index 0000000..b907125
--- /dev/null
+++ b/web/src/components/Warning.astro
@@ -0,0 +1,79 @@
+---
+export interface Props {
+  title?: string;
+  children: any;
+}
+
+const { title = "Important Notice" } = Astr
o.props;
+---
+
+<div class="warning">
+  <div class="warning-header">
+    <svg class="warning-icon" viewBox="0 0 
24 24" fill="none" xmlns="http://www.w3.org/
2000/svg">
+      <path d="M12 9V13M12 17H12.01M21 12C2
1 16.9706 16.9706 21 12 21C7.02944 21 3 16.9
706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 
21 7.02944 21 12Z" stroke="currentColor" str
oke-width="2" stroke-linecap="round" stroke-
linejoin="round"/>
+    </svg>
+    <h3 class="warning-title">{title}</h3>
+  </div>
+  <div class="warning-content">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .warning {
+    background-color: #3a2a2a;
+    border: 1px solid #ea6962;
+    border-left: 4px solid #ea6962;
+    border-radius: 6px;
+    padding: 16px;
+    margin-bottom: 20px;
+  }
+  
+  .warning-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+  }
+  
+  .warning-icon {
+    width: 20px;
+    height: 20px;
+    color: #ea6962;
+    flex-shrink: 0;
+  }
+  
+  .warning-title {
+    color: #ea6962;
+    margin: 0;
+    font-size: 1em;
+    font-weight: 600;
+  }
+  
+  .warning-content {
+    color: var(--text-primary);
+    line-height: 1.5;
+    margin-left: 30px;
+  }
+  
+  .warning-content p {
+    margin: 0 0 8px 0;
+  }
+  
+  .warning-content p:last-child {
+    margin-bottom: 0;
+  }
+  
+  .warning-content a {
+    color: #ea6962;
+    text-decoration: none;
+  }
+  
+  .warning-content a:hover {
+    text-decoration: underline;
+  }
+  
+  .warning-content strong {
+    color: #ea6962;
+  }
+</style>
\ No newline at end of file

 

diff --git a/web/src/layouts/DynamicRankingsLayout.astro b/web/src/layouts/Dynamic
RankingsLayout.astro
index 02c683a..2eb9c0f 100644
--- a/web/src/layouts/DynamicRankingsLayout.astro
+++ b/web/src/layouts/DynamicRankingsLayout.astro
@@ -1,4 +1,7 @@
 ---
+import Navigation from '../components/Navigation.astro';
+import Warning from '../components/Warning.astro';
+
 export interface Props {
   title: string;
   description?: string;
@@ -13,6 +16,7 @@ const { title, description } = Astro.props;
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width" />
     <title>{title} - WoW MoP Rankings</title>
+    <link rel="stylesheet" href="/src/styles/global.css" />
     <style>
       body {
         font-family: Arial, sans-serif;
@@ -30,7 +34,7 @@ const { title, description } = Astro.props;
       }
       
       .page-title {
-        color: #ea6962;
+        color: #d8a657;
         margin: 0 0 10px 0;
         font-size: 2.5em;
         font-weight: 700;
@@ -57,7 +61,7 @@ const { title, description } = Astro.props;
       }
       
       .controls-title {
-        color: #ea6962;
+        color: #d8a657;
         margin: 0 0 15px 0;
         font-size: 1.2em;
         font-weight: 600;
@@ -95,7 +99,7 @@ const { title, description } = Astro.props;
       
       .control-group select:focus {
         outline: none;
-        border-color: #ea6962;
+        border-color: #d8a657;
       }
       
       .loading, .error {
@@ -118,9 +122,9 @@ const { title, description } = Astro.props;
       }
       
       .error {
-        color: #ea6962;
+        color: var(--highlight-color);
         background-color: #3a2a2a;
-        border: 1px solid #ea6962;
+        border: 1px solid var(--highlight-color);
       }
       
       #metadata-container {
@@ -147,7 +151,7 @@ const { title, description } = Astro.props;
       }
       
       .metadata-title {
-        color: #ea6962;
+        color: var(--highlight-color);
         margin: 0 0 15px 0;
         font-size: 1.2em;
         font-weight: 600;
@@ -197,7 +201,7 @@ const { title, description } = Astro.props;
       }
       
       .chart-title {
-        color: #ea6962;
+        color: var(--highlight-color);
         margin: 0 0 20px 0;
         font-size: 1.4em;
         font-weight: 600;
@@ -210,7 +214,8 @@ const { title, description } = Astro.props;
       }
       
       .chart-item {
-        display: flex;
+        display: grid;
+        grid-template-columns: 180px 1fr;
         align-items: center;
         gap: 15px;
         padding: 8px 0;
@@ -220,8 +225,8 @@ const { title, description } = Astro.props;
         display: flex;
         align-items: center;
         gap: 10px;
-        min-width: 200px;
-        max-width: 250px;
+        min-width: 120px;
+        max-width: 180px;
         flex-shrink: 0;
         overflow: hidden;
       }
@@ -258,6 +263,7 @@ const { title, description } = Astro.props;
         align-items: center;
         flex: 1;
         gap: 10px;
+        min-width: 0;
       }
       
       .chart-bar {
@@ -277,12 +283,18 @@ const { title, description } = Astro.props;
     </style>
   </head>
   <body>
+    <Navigation />
     <div class="page-header">
       <h1 class="page-title">{title}</h1>
       {description && <p class="page-description">{description}</p>}
     </div>
     
     <div class="rankings-container">
+      <Warning title="Static Simulation Results">
+        <p>These rankings display <strong>static simulation results</strong> gene
rated at a specific point in time, not live simulations. The data represents a sna
pshot of spec performance based on preset configurations. Take all results with a 
grain of salt, many classes simulation's are currently incomplete</p>
+        <p>For live, interactive simulations where you can customize gear and set
tings, visit <a href="https://wowsims.com/mop" target="_blank" rel="noopener noref
errer">wowsims.com/mop</a>.</p>
+      </Warning>
+      
       <div id="metadata-container"></div>
       
       <div class="controls">
@@ -411,7 +423,7 @@ class DynamicRankings {
     try {
       const fileName = this.getFileName();
       console.log('Loading:', fileName);
-      const response = await fetch(`./data/${fileName}`);
+      const response = await fetch(`./data/rankings/${fileName}`);
       
       if (!response.ok) {
         throw new Error(`Failed to load ${fileName}: ${response.statusText}`);
@@ -580,7 +592,6 @@ class DynamicRankings {
               <div class="chart-labels">
                 <span class="chart-rank">#${index + 1}</span>
                 <span class="chart-label">${item.label}</span>
-                <span class="chart-sublabel">${item.sublabel}</span>
               </div>
               <div class="chart-bar-container">
                 <div class="chart-bar" style="width: ${barWidth}%; background-col
or: ${classColors[item.category] || '#666'};">


diff --git a/web/src/layouts/DynamicRankings
Layout.astro b/web/src/layouts/DynamicRankin
gsLayout.astro
index 02c683a..2eb9c0f 100644
--- a/web/src/layouts/DynamicRankingsLayout.
astro
+++ b/web/src/layouts/DynamicRankingsLayout.
astro
@@ -1,4 +1,7 @@
 ---
+import Navigation from '../components/Navig
ation.astro';
+import Warning from '../components/Warning.
astro';
+
 export interface Props {
   title: string;
   description?: string;
@@ -13,6 +16,7 @@ const { title, description
 } = Astro.props;
     <link rel="icon" type="image/svg+xml" h
ref="/favicon.svg" />
     <meta name="viewport" content="width=de
vice-width" />
     <title>{title} - WoW MoP Rankings</titl
e>
+    <link rel="stylesheet" href="/src/style
s/global.css" />
     <style>
       body {
         font-family: Arial, sans-serif;
@@ -30,7 +34,7 @@ const { title, description
 } = Astro.props;
       }
       
       .page-title {
-        color: #ea6962;
+        color: #d8a657;
         margin: 0 0 10px 0;
         font-size: 2.5em;
         font-weight: 700;
@@ -57,7 +61,7 @@ const { title, description
 } = Astro.props;
       }
       
       .controls-title {
-        color: #ea6962;
+        color: #d8a657;
         margin: 0 0 15px 0;
         font-size: 1.2em;
         font-weight: 600;
@@ -95,7 +99,7 @@ const { title, description
 } = Astro.props;
       
       .control-group select:focus {
         outline: none;
-        border-color: #ea6962;
+        border-color: #d8a657;
       }
       
       .loading, .error {
@@ -118,9 +122,9 @@ const { title, descripti
on } = Astro.props;
       }
       
       .error {
-        color: #ea6962;
+        color: var(--highlight-color);
         background-color: #3a2a2a;
-        border: 1px solid #ea6962;
+        border: 1px solid var(--highlight-c
olor);
       }
       
       #metadata-container {
@@ -147,7 +151,7 @@ const { title, descripti
on } = Astro.props;
       }
       
       .metadata-title {
-        color: #ea6962;
+        color: var(--highlight-color);
         margin: 0 0 15px 0;
         font-size: 1.2em;
         font-weight: 600;
@@ -197,7 +201,7 @@ const { title, descripti
on } = Astro.props;
       }
       
       .chart-title {
-        color: #ea6962;
+        color: var(--highlight-color);
         margin: 0 0 20px 0;
         font-size: 1.4em;
         font-weight: 600;
@@ -210,7 +214,8 @@ const { title, descripti
on } = Astro.props;
       }
       
       .chart-item {
-        display: flex;
+        display: grid;
+        grid-template-columns: 180px 1fr;
         align-items: center;
         gap: 15px;
         padding: 8px 0;
@@ -220,8 +225,8 @@ const { title, descripti
on } = Astro.props;
         display: flex;
         align-items: center;
         gap: 10px;
-        min-width: 200px;
-        max-width: 250px;
+        min-width: 120px;
+        max-width: 180px;
         flex-shrink: 0;
         overflow: hidden;
       }
@@ -258,6 +263,7 @@ const { title, descripti
on } = Astro.props;
         align-items: center;
         flex: 1;
         gap: 10px;
+        min-width: 0;
       }
       
       .chart-bar {
@@ -277,12 +283,18 @@ const { title, descrip
tion } = Astro.props;
     </style>
   </head>
   <body>
+    <Navigation />
     <div class="page-header">
       <h1 class="page-title">{title}</h1>
       {description && <p class="page-descri
ption">{description}</p>}
     </div>
     
     <div class="rankings-container">
+      <Warning title="Static Simulation Res
ults">
+        <p>These rankings display <strong>s
tatic simulation results</strong> generated 
at a specific point in time, not live simula
tions. The data represents a snapshot of spe
c performance based on preset configurations
. Take all results with a grain of salt, man
y classes simulation's are currently incompl
ete</p>
+        <p>For live, interactive simulation
s where you can customize gear and settings,
 visit <a href="https://wowsims.com/mop" tar
get="_blank" rel="noopener noreferrer">wowsi
ms.com/mop</a>.</p>
+      </Warning>
+      
       <div id="metadata-container"></div>
       
       <div class="controls">
@@ -411,7 +423,7 @@ class DynamicRankings {
     try {
       const fileName = this.getFileName();
       console.log('Loading:', fileName);
-      const response = await fetch(`./data/
${fileName}`);
+      const response = await fetch(`./data/
rankings/${fileName}`);
       
       if (!response.ok) {
         throw new Error(`Failed to load ${f
ileName}: ${response.statusText}`);
@@ -580,7 +592,6 @@ class DynamicRankings {
               <div class="chart-labels">
                 <span class="chart-rank">#$
{index + 1}</span>
                 <span class="chart-label">$
{item.label}</span>
-                <span class="chart-sublabel
">${item.sublabel}</span>
               </div>
               <div class="chart-bar-contain
er">
                 <div class="chart-bar" styl
e="width: ${barWidth}%; background-color: ${
classColors[item.category] || '#666'};">

 

diff --git a/web/src/layouts/FAQLayout.astro b/web/src/layouts/FAQLayout.astro
new file mode 100644
index 0000000..c9e0fa1
--- /dev/null
+++ b/web/src/layouts/FAQLayout.astro
@@ -0,0 +1,252 @@
+---
+export interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title} - WoW MoP Rankings</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        background-color: #282828;
+        color: #ffffff;
+      }
+      
+      .page-header {
+        text-align: center;
+        padding: 30px 20px;
+        background-color: #3a3a3a;
+        border-bottom: 1px solid #4a4a4a;
+      }
+      
+      .page-title {
+        color: var(--highlight-color);
+        margin: 0 0 10px 0;
+        font-size: 2.5em;
+        font-weight: 700;
+      }
+      
+      .page-description {
+        color: #aaaaaa;
+        font-size: 1.1em;
+        margin: 0;
+      }
+
+      .page-container {
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+
+      .navigation {
+        margin-bottom: 30px;
+        padding: 15px 0;
+        text-align: center;
+        border-bottom: 1px solid #4a4a4a;
+      }
+
+      .nav-link {
+        display: inline-block;
+        margin: 0 10px;
+        padding: 10px 15px;
+        background-color: #3a3a3a;
+        border: 1px solid #4a4a4a;
+        border-radius: 4px;
+        color: #ffffff;
+        text-decoration: none;
+        transition: background-color 0.2s ease;
+      }
+
+      .nav-link:hover {
+        background-color: #4a4a4a;
+        text-decoration: none;
+      }
+
+      .faq-section {
+        background-color: #3a3a3a;
+        border-radius: 8px;
+        padding: 25px;
+        margin-bottom: 25px;
+        border: 1px solid #4a4a4a;
+      }
+
+      .faq-category-title {
+        color: var(--highlight-color);
+        margin: 0 0 20px 0;
+        font-size: 1.4em;
+        font-weight: 600;
+        border-bottom: 2px solid var(--highlight-color);
+        padding-bottom: 8px;
+      }
+
+      .faq-item {
+        margin-bottom: 20px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #4a4a4a;
+      }
+
+      .faq-item:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border-bottom: none;
+      }
+
+      .faq-question {
+        color: var(--highlight-color);
+        font-size: 1.1em;
+        font-weight: 600;
+        margin: 0 0 10px 0;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .faq-question::before {
+        content: "?";
+        font-size: 0.8em;
+        transition: transform 0.2s ease;
+        color: #a9a9a9;
+      }
+
+      .faq-question.expanded::before {
+        transform: rotate(90deg);
+      }
+
+      .faq-answer {
+        color: #ffffff;
+        line-height: 1.6;
+        margin-left: 20px;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+      }
+
+      .faq-answer.expanded {
+        max-height: 500px;
+      }
+
+      .faq-answer p {
+        margin: 0 0 12px 0;
+      }
+
+      .faq-answer p:last-child {
+        margin-bottom: 0;
+      }
+
+      .faq-answer ul {
+        margin: 8px 0;
+        padding-left: 20px;
+      }
+
+      .faq-answer li {
+        margin-bottom: 5px;
+      }
+
+      .faq-answer code {
+        background-color: #2a2a2a;
+        color: var(--highlight-color);
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-family: 'Courier New', monospace;
+        font-size: 0.9em;
+      }
+
+      .faq-answer a {
+        color: var(--highlight-color);
+        text-decoration: none;
+      }
+
+      .faq-answer a:hover {
+        text-decoration: underline;
+      }
+
+      .highlight {
+        background-color: #4a3838;
+        padding: 15px;
+        border-radius: 6px;
+        border-left: 4px solid var(--highlight-color);
+        margin: 15px 0;
+      }
+
+      .highlight .highlight-title {
+        color: var(--highlight-color);
+        font-weight: 600;
+        margin: 0 0 8px 0;
+      }
+
+      @media (max-width: 768px) {
+        .page-title {
+          font-size: 2em;
+        }
+        
+        .page-container {
+          padding: 15px;
+        }
+        
+        .faq-section {
+          padding: 20px;
+        }
+
+        .nav-link {
+          display: block;
+          margin: 5px 0;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="page-header">
+      <h1 class="page-title">{title}</h1>
+      {description && <p class="page-description">{description}</p>}
+    </div>
+    
+    <div class="page-container">
+      <div class="navigation">
+        <a href="/" class="nav-link">? Back to Rankings</a>
+      </div>
+      
+      <slot />
+    </div>
+
+    <script is:inline>
+      document.addEventListener('DOMContentLoaded', function() {
+        const questions = document.querySelectorAll('.faq-question');
+        
+        questions.forEach(question => {
+          question.addEventListener('click', function() {
+            const answer = this.nextElementSibling;
+            const isExpanded = answer.classList.contains('expanded');
+            
+            // Close all other answers
+            document.querySelectorAll('.faq-answer.expanded').forEach(openAnswer 
=> {
+              if (openAnswer !== answer) {
+                openAnswer.classList.remove('expanded');
+                openAnswer.previousElementSibling.classList.remove('expanded');
+              }
+            });
+            
+            // Toggle current answer
+            if (isExpanded) {
+              answer.classList.remove('expanded');
+              this.classList.remove('expanded');
+            } else {
+              answer.classList.add('expanded');
+              this.classList.add('expanded');
+            }
+          });
+        });
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file


diff --git a/web/src/layouts/FAQLayout.astro
 b/web/src/layouts/FAQLayout.astro
new file mode 100644
index 0000000..c9e0fa1
--- /dev/null
+++ b/web/src/layouts/FAQLayout.astro
@@ -0,0 +1,252 @@
+---
+export interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" h
ref="/favicon.svg" />
+    <meta name="viewport" content="width=de
vice-width" />
+    <title>{title} - WoW MoP Rankings</titl
e>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        background-color: #282828;
+        color: #ffffff;
+      }
+      
+      .page-header {
+        text-align: center;
+        padding: 30px 20px;
+        background-color: #3a3a3a;
+        border-bottom: 1px solid #4a4a4a;
+      }
+      
+      .page-title {
+        color: var(--highlight-color);
+        margin: 0 0 10px 0;
+        font-size: 2.5em;
+        font-weight: 700;
+      }
+      
+      .page-description {
+        color: #aaaaaa;
+        font-size: 1.1em;
+        margin: 0;
+      }
+
+      .page-container {
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+
+      .navigation {
+        margin-bottom: 30px;
+        padding: 15px 0;
+        text-align: center;
+        border-bottom: 1px solid #4a4a4a;
+      }
+
+      .nav-link {
+        display: inline-block;
+        margin: 0 10px;
+        padding: 10px 15px;
+        background-color: #3a3a3a;
+        border: 1px solid #4a4a4a;
+        border-radius: 4px;
+        color: #ffffff;
+        text-decoration: none;
+        transition: background-color 0.2s e
ase;
+      }
+
+      .nav-link:hover {
+        background-color: #4a4a4a;
+        text-decoration: none;
+      }
+
+      .faq-section {
+        background-color: #3a3a3a;
+        border-radius: 8px;
+        padding: 25px;
+        margin-bottom: 25px;
+        border: 1px solid #4a4a4a;
+      }
+
+      .faq-category-title {
+        color: var(--highlight-color);
+        margin: 0 0 20px 0;
+        font-size: 1.4em;
+        font-weight: 600;
+        border-bottom: 2px solid var(--high
light-color);
+        padding-bottom: 8px;
+      }
+
+      .faq-item {
+        margin-bottom: 20px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #4a4a4a;
+      }
+
+      .faq-item:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border-bottom: none;
+      }
+
+      .faq-question {
+        color: var(--highlight-color);
+        font-size: 1.1em;
+        font-weight: 600;
+        margin: 0 0 10px 0;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .faq-question::before {
+        content: "?";
+        font-size: 0.8em;
+        transition: transform 0.2s ease;
+        color: #a9a9a9;
+      }
+
+      .faq-question.expanded::before {
+        transform: rotate(90deg);
+      }
+
+      .faq-answer {
+        color: #ffffff;
+        line-height: 1.6;
+        margin-left: 20px;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+      }
+
+      .faq-answer.expanded {
+        max-height: 500px;
+      }
+
+      .faq-answer p {
+        margin: 0 0 12px 0;
+      }
+
+      .faq-answer p:last-child {
+        margin-bottom: 0;
+      }
+
+      .faq-answer ul {
+        margin: 8px 0;
+        padding-left: 20px;
+      }
+
+      .faq-answer li {
+        margin-bottom: 5px;
+      }
+
+      .faq-answer code {
+        background-color: #2a2a2a;
+        color: var(--highlight-color);
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-family: 'Courier New', monospa
ce;
+        font-size: 0.9em;
+      }
+
+      .faq-answer a {
+        color: var(--highlight-color);
+        text-decoration: none;
+      }
+
+      .faq-answer a:hover {
+        text-decoration: underline;
+      }
+
+      .highlight {
+        background-color: #4a3838;
+        padding: 15px;
+        border-radius: 6px;
+        border-left: 4px solid var(--highli
ght-color);
+        margin: 15px 0;
+      }
+
+      .highlight .highlight-title {
+        color: var(--highlight-color);
+        font-weight: 600;
+        margin: 0 0 8px 0;
+      }
+
+      @media (max-width: 768px) {
+        .page-title {
+          font-size: 2em;
+        }
+        
+        .page-container {
+          padding: 15px;
+        }
+        
+        .faq-section {
+          padding: 20px;
+        }
+
+        .nav-link {
+          display: block;
+          margin: 5px 0;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="page-header">
+      <h1 class="page-title">{title}</h1>
+      {description && <p class="page-descri
ption">{description}</p>}
+    </div>
+    
+    <div class="page-container">
+      <div class="navigation">
+        <a href="/" class="nav-link">? Back
 to Rankings</a>
+      </div>
+      
+      <slot />
+    </div>
+
+    <script is:inline>
+      document.addEventListener('DOMContent
Loaded', function() {
+        const questions = document.querySel
ectorAll('.faq-question');
+        
+        questions.forEach(question => {
+          question.addEventListener('click'
, function() {
+            const answer = this.nextElement
Sibling;
+            const isExpanded = answer.class
List.contains('expanded');
+            
+            // Close all other answers
+            document.querySelectorAll('.faq
-answer.expanded').forEach(openAnswer => {
+              if (openAnswer !== answer) {
+                openAnswer.classList.remove
('expanded');
+                openAnswer.previousElementS
ibling.classList.remove('expanded');
+              }
+            });
+            
+            // Toggle current answer
+            if (isExpanded) {
+              answer.classList.remove('expa
nded');
+              this.classList.remove('expand
ed');
+            } else {
+              answer.classList.add('expande
d');
+              this.classList.add('expanded'
);
+            }
+          });
+        });
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file

 

diff --git a/web/src/pages/faq.astro b/web/src/pages/faq.astro
new file mode 100644
index 0000000..e344138
--- /dev/null
+++ b/web/src/pages/faq.astro
@@ -0,0 +1,134 @@
+---
+import Navigation from '../components/Navigation.astro';
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <title>FAQ - WoW MoP Rankings</title>
+    <link rel="stylesheet" href="/src/styles/global.css" />
+  </head>
+  <body>
+    <Navigation />
+    
+    <div class="page-header">
+      <h1 class="page-title">Frequently Asked Questions</h1>
+      <p class="page-description">Common questions about WoW MoP simulation ranki
ngs</p>
+    </div>
+    
+    <div class="page-container">
+            <div class="card">
+        
+        <div class="faq-item">
+          <h3 class="faq-question">What features are planned for the future?</h3>
+          <ul class="faq-answer">
+            <li><strong>Tanks:</strong> Tank DPS at different vengeance levels</l
i>
+            <li><strong>Trinket comparisons:</strong> Detailed trinket performanc
e analysis across different specs</li>
+            <li><strong>Race comparisons:</strong> Performance differences betwee
n races for each spec</li>
+            <li><strong>Raid compositions:</strong> Optimal raid setups and syner
gy analysis</li>
+            <li><strong>Challenge modes:</strong> Specialized simulations for cha
llenge mode scenarios</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="card">
+        <h2 class="card-title-large">Understanding the Data</h2>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">What do the different sorting options mean?</h
3>
+          <p class="faq-answer">
+            <strong>Average DPS:</strong> Mean damage across all iterations<br>
+            <strong>Max DPS:</strong> Highest damage achieved in any iteration<br
>
+            <strong>Min DPS:</strong> Lowest damage achieved in any iteration<br>
+            <strong>Consistency:</strong> Specs with lower standard deviation are
 more predictable
+          </p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">Why does <em>x</em> class perform poorly?</h3>
+          <p class="faq-answer">Wowsims is still being actively developed, and as
 such the quality of each spec varies widely. This is particularly noticeable in m
ulti-target encounters where classes APLs have not been fleshed out enough yet.</p
>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">Should I reroll based on these rankings?</h3>
+          <p class="faq-answer">These are theoretical maximums under ideal condit
ions. So no, take these rankings with a grain of salt.</p>
+        </div>
+      </div>
+      <div class="card">
+        <h2 class="card-title-large">General Questions</h2>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">What simulations are being run?</h3>
+          <p class="faq-answer">We simulate all DPS specs using the wowsims cli. 
Simulations include various encounter types (single target, multi-target, cleave) 
and durations (long 5min, short 2min, burst 30s).</p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">Are these live simulations or static results?<
/h3>
+          <p class="faq-answer">This website displays static simulation results t
hat were generated at a specific point in time, not live simulations. The data rep
resents a snapshot of spec performance based on the wowsims engine and configurati
ons available when the simulations were last run. For live, interactive simulation
s where you can customize gear and settings, visit <a href="https://wowsims.com/mo
p" target="_blank" rel="noopener noreferrer">wowsims.com/mop</a>.</p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">How often are rankings updated?</h3>
+          <p class="faq-answer">As of writing the website is still actively being
 developed, so all simulations are being manually run. In the future, simulation r
uns will be triggered by upstream wowsims releases.</p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">What gear and talents are used?</h3>
+          <p class="faq-answer">Each spec pulls gearsets/talents from the wowsims
 presets.</p>
+        </div>
+      </div>
+      
+      <div class="card">
+        <h2 class="card-title-large">Technical Details</h2>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">How many iterations are run per simulation?</h
3>
+          <p class="faq-answer">Currently we are running 10,000 iterations for ea
ch category, we may use more or less in the future.</p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">What raid buffs and debuffs are active?</h3>
+          <p class="faq-answer">For raid simulations we use all standard raid buf
fs are active including Bloodlust, various class buffs, and multiple Stormlash Tot
ems. Full details are shown in the simulation metadata on each ranking page.</p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">How is the simulation being run?</h3>
+          <p class="faq-answer">We use the wowsims CLI, which accepts JSON config
uration files containing all simulation parameters (gear, talents, encounter setti
ngs, etc.). While these files can be manually generated from the wowsims WebUI, we
 use Nix to programmatically create configurations for all specs and encounter typ
es. The Nix build system then orchestrates running thousands of simulations in par
allel, aggregates the results into JSON files, and generates the static website yo
u're viewing. This approach ensures reproducible builds and allows us to efficient
ly simulate entire spec rankings across multiple scenarios.</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+
+<style>
+  .faq-item {
+    margin-bottom: 25px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #4a4a4a;
+  }
+  
+  .faq-item:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+  
+  .faq-question {
+    color: var(--highlight-color);
+    margin: 0 0 10px 0;
+    font-size: 1.1em;
+    font-weight: 600;
+  }
+  
+  .faq-answer {
+    color: var(--text-primary);
+    line-height: 1.6;
+    margin: 0;
+  }
+  
+  .faq-answer strong {
+    color: var(--highlight-color);
+  }
+</style>


diff --git a/web/src/pages/faq.astro b/web/s
rc/pages/faq.astro
new file mode 100644
index 0000000..e344138
--- /dev/null
+++ b/web/src/pages/faq.astro
@@ -0,0 +1,134 @@
+---
+import Navigation from '../components/Navig
ation.astro';
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" h
ref="/favicon.svg" />
+    <meta name="viewport" content="width=de
vice-width" />
+    <title>FAQ - WoW MoP Rankings</title>
+    <link rel="stylesheet" href="/src/style
s/global.css" />
+  </head>
+  <body>
+    <Navigation />
+    
+    <div class="page-header">
+      <h1 class="page-title">Frequently Ask
ed Questions</h1>
+      <p class="page-description">Common qu
estions about WoW MoP simulation rankings</p
>
+    </div>
+    
+    <div class="page-container">
+            <div class="card">
+        
+        <div class="faq-item">
+          <h3 class="faq-question">What fea
tures are planned for the future?</h3>
+          <ul class="faq-answer">
+            <li><strong>Tanks:</strong> Tan
k DPS at different vengeance levels</li>
+            <li><strong>Trinket comparisons
:</strong> Detailed trinket performance anal
ysis across different specs</li>
+            <li><strong>Race comparisons:</
strong> Performance differences between race
s for each spec</li>
+            <li><strong>Raid compositions:<
/strong> Optimal raid setups and synergy ana
lysis</li>
+            <li><strong>Challenge modes:</s
trong> Specialized simulations for challenge
 mode scenarios</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="card">
+        <h2 class="card-title-large">Unders
tanding the Data</h2>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">What do 
the different sorting options mean?</h3>
+          <p class="faq-answer">
+            <strong>Average DPS:</strong> M
ean damage across all iterations<br>
+            <strong>Max DPS:</strong> Highe
st damage achieved in any iteration<br>
+            <strong>Min DPS:</strong> Lowes
t damage achieved in any iteration<br>
+            <strong>Consistency:</strong> S
pecs with lower standard deviation are more 
predictable
+          </p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">Why does
 <em>x</em> class perform poorly?</h3>
+          <p class="faq-answer">Wowsims is 
still being actively developed, and as such 
the quality of each spec varies widely. This
 is particularly noticeable in multi-target 
encounters where classes APLs have not been 
fleshed out enough yet.</p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">Should I
 reroll based on these rankings?</h3>
+          <p class="faq-answer">These are t
heoretical maximums under ideal conditions. 
So no, take these rankings with a grain of s
alt.</p>
+        </div>
+      </div>
+      <div class="card">
+        <h2 class="card-title-large">Genera
l Questions</h2>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">What sim
ulations are being run?</h3>
+          <p class="faq-answer">We simulate
 all DPS specs using the wowsims cli. Simula
tions include various encounter types (singl
e target, multi-target, cleave) and duration
s (long 5min, short 2min, burst 30s).</p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">Are thes
e live simulations or static results?</h3>
+          <p class="faq-answer">This websit
e displays static simulation results that we
re generated at a specific point in time, no
t live simulations. The data represents a sn
apshot of spec performance based on the wows
ims engine and configurations available when
 the simulations were last run. For live, in
teractive simulations where you can customiz
e gear and settings, visit <a href="https://
wowsims.com/mop" target="_blank" rel="noopen
er noreferrer">wowsims.com/mop</a>.</p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">How ofte
n are rankings updated?</h3>
+          <p class="faq-answer">As of writi
ng the website is still actively being devel
oped, so all simulations are being manually 
run. In the future, simulation runs will be 
triggered by upstream wowsims releases.</p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">What gea
r and talents are used?</h3>
+          <p class="faq-answer">Each spec p
ulls gearsets/talents from the wowsims prese
ts.</p>
+        </div>
+      </div>
+      
+      <div class="card">
+        <h2 class="card-title-large">Techni
cal Details</h2>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">How many
 iterations are run per simulation?</h3>
+          <p class="faq-answer">Currently w
e are running 10,000 iterations for each cat
egory, we may use more or less in the future
.</p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">What rai
d buffs and debuffs are active?</h3>
+          <p class="faq-answer">For raid si
mulations we use all standard raid buffs are
 active including Bloodlust, various class b
uffs, and multiple Stormlash Totems. Full de
tails are shown in the simulation metadata o
n each ranking page.</p>
+        </div>
+        
+        <div class="faq-item">
+          <h3 class="faq-question">How is t
he simulation being run?</h3>
+          <p class="faq-answer">We use the 
wowsims CLI, which accepts JSON configuratio
n files containing all simulation parameters
 (gear, talents, encounter settings, etc.). 
While these files can be manually generated 
from the wowsims WebUI, we use Nix to progra
mmatically create configurations for all spe
cs and encounter types. The Nix build system
 then orchestrates running thousands of simu
lations in parallel, aggregates the results 
into JSON files, and generates the static we
bsite you're viewing. This approach ensures 
reproducible builds and allows us to efficie
ntly simulate entire spec rankings across mu
ltiple scenarios.</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+
+<style>
+  .faq-item {
+    margin-bottom: 25px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #4a4a4a;
+  }
+  
+  .faq-item:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+  
+  .faq-question {
+    color: var(--highlight-color);
+    margin: 0 0 10px 0;
+    font-size: 1.1em;
+    font-weight: 600;
+  }
+  
+  .faq-answer {
+    color: var(--text-primary);
+    line-height: 1.6;
+    margin: 0;
+  }
+  
+  .faq-answer strong {
+    color: var(--highlight-color);
+  }
+</style>

 

diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 496898f..91029ee 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -4,5 +4,5 @@ import DynamicRankingsLayout from '../layouts/DynamicRankingsLayou
t.astro';
 
 <DynamicRankingsLayout 
   title="MoP Simulation DPS Rankings"
-  description="Take this all with a grain of salt. Many classes simulation's are 
currently incomplete"
+  description=""
 />


diff --git a/web/src/pages/index.astro b/web
/src/pages/index.astro
index 496898f..91029ee 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -4,5 +4,5 @@ import DynamicRankingsLayout
 from '../layouts/DynamicRankingsLayout.astr
o';
 
 <DynamicRankingsLayout 
   title="MoP Simulation DPS Rankings"
-  description="Take this all with a grain o
f salt. Many classes simulation's are curren
tly incomplete"
+  description=""
 />

 

diff --git a/web/src/styles/global.css b/web/src/styles/global.css
new file mode 100644
index 0000000..f7b9626
--- /dev/null
+++ b/web/src/styles/global.css
@@ -0,0 +1,133 @@
+/* Global styles for WoW MoP Rankings */
+
+/* CSS Variables */
+:root {
+  --highlight-color: #d8a657;
+  --bg-primary: #282828;
+  --bg-secondary: #3a3a3a;
+  --border-color: #4a4a4a;
+  --text-primary: #ffffff;
+  --text-secondary: #aaaaaa;
+  --text-muted: #a9a9a9;
+}
+
+/* Base styles */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+/* Common layout components */
+.page-header {
+  text-align: center;
+  padding: 30px 20px;
+  background-color: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.page-title {
+  color: var(--highlight-color);
+  margin: 0 0 10px 0;
+  font-size: 2.5em;
+  font-weight: 700;
+}
+
+.page-description {
+  color: var(--text-secondary);
+  font-size: 1.1em;
+  margin: 0;
+}
+
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Card/panel styles */
+.card {
+  background-color: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 30px;
+  border: 1px solid var(--border-color);
+}
+
+.card-title {
+  color: var(--highlight-color);
+  margin: 0 0 15px 0;
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+.card-title-large {
+  color: var(--highlight-color);
+  margin: 0 0 20px 0;
+  font-size: 1.4em;
+  font-weight: 600;
+}
+
+/* Text styles */
+.text-accent {
+  color: var(--highlight-color);
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-secondary {
+  color: var(--text-secondary);
+}
+
+/* Links */
+a {
+  color: var(--highlight-color);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Navigation */
+.nav-link {
+  display: inline-block;
+  padding: 10px 15px;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+}
+
+.nav-link:hover {
+  background-color: var(--border-color);
+  text-decoration: none;
+}
+
+/* Utility classes for navigation */
+.nav-active {
+  background-color: var(--highlight-color) !important;
+  border-color: var(--highlight-color) !important;
+  color: var(--text-primary) !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .page-title {
+    font-size: 2em;
+  }
+  
+  .page-container {
+    padding: 15px;
+  }
+  
+  .card {
+    padding: 15px;
+  }
+}
\ No newline at end of file


diff --git a/web/src/styles/global.css b/web
/src/styles/global.css
new file mode 100644
index 0000000..f7b9626
--- /dev/null
+++ b/web/src/styles/global.css
@@ -0,0 +1,133 @@
+/* Global styles for WoW MoP Rankings */
+
+/* CSS Variables */
+:root {
+  --highlight-color: #d8a657;
+  --bg-primary: #282828;
+  --bg-secondary: #3a3a3a;
+  --border-color: #4a4a4a;
+  --text-primary: #ffffff;
+  --text-secondary: #aaaaaa;
+  --text-muted: #a9a9a9;
+}
+
+/* Base styles */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+/* Common layout components */
+.page-header {
+  text-align: center;
+  padding: 30px 20px;
+  background-color: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-col
or);
+}
+
+.page-title {
+  color: var(--highlight-color);
+  margin: 0 0 10px 0;
+  font-size: 2.5em;
+  font-weight: 700;
+}
+
+.page-description {
+  color: var(--text-secondary);
+  font-size: 1.1em;
+  margin: 0;
+}
+
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Card/panel styles */
+.card {
+  background-color: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 30px;
+  border: 1px solid var(--border-color);
+}
+
+.card-title {
+  color: var(--highlight-color);
+  margin: 0 0 15px 0;
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+.card-title-large {
+  color: var(--highlight-color);
+  margin: 0 0 20px 0;
+  font-size: 1.4em;
+  font-weight: 600;
+}
+
+/* Text styles */
+.text-accent {
+  color: var(--highlight-color);
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-secondary {
+  color: var(--text-secondary);
+}
+
+/* Links */
+a {
+  color: var(--highlight-color);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Navigation */
+.nav-link {
+  display: inline-block;
+  padding: 10px 15px;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+}
+
+.nav-link:hover {
+  background-color: var(--border-color);
+  text-decoration: none;
+}
+
+/* Utility classes for navigation */
+.nav-active {
+  background-color: var(--highlight-color) 
!important;
+  border-color: var(--highlight-color) !imp
ortant;
+  color: var(--text-primary) !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .page-title {
+    font-size: 2em;
+  }
+  
+  .page-container {
+    padding: 15px;
+  }
+  
+  .card {
+    padding: 15px;
+  }
+}
\ No newline at end of file

 
[ BACK TO LOG ]
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET