Refine calculator layout and about page

static/style.css

@@ -550,6 +550,12 @@ body.menu-open {
     display: flex;
     align-items: center;
     gap: 16px;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.af-brand > div {
+    min-width: 0;
 }
 
 .af-logo {
@@ -580,6 +586,10 @@ body.menu-open {
     margin: 4px 0 0;
     color: #94a3b8;
     font-size: 0.95rem;
+    max-width: 240px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .af-nav {
@@ -1249,6 +1259,77 @@ body.menu-open {
     color: #444;
 }
 
+.af-about-page .af-card {
+    background: rgba(15, 23, 42, 0.82);
+}
+
+.af-about-page h1,
+.af-about-page h2,
+.af-about-page h3 {
+    color: #f8fafc;
+}
+
+.af-about-page p,
+.af-about-page li {
+    color: #cbd5f5;
+}
+
+.af-about-kicker {
+    margin: 0 0 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    font-size: 0.75rem;
+    color: #94a3b8;
+}
+
+.af-about-hero {
+    display: grid;
+    gap: 24px;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    margin-bottom: 24px;
+}
+
+.af-about-grid {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    margin: 16px 0 24px;
+}
+
+.af-about-card {
+    padding: 16px;
+    border-radius: 16px;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    background: rgba(2, 6, 23, 0.6);
+    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.3);
+}
+
+.af-about-card h3 {
+    margin-top: 0;
+}
+
+.af-about-banner {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    border-radius: 16px;
+    border: 1px solid rgba(56, 189, 248, 0.3);
+    background: rgba(56, 189, 248, 0.12);
+    margin-top: 20px;
+}
+
+.af-about-pill {
+    padding: 6px 12px;
+    border-radius: 999px;
+    border: 1px solid rgba(56, 189, 248, 0.4);
+    background: rgba(15, 23, 42, 0.7);
+    color: #e2e8f0;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
 .highlight {
     font-weight: bold;
     color: #d32f2f;
@@ -1340,11 +1421,18 @@ main {
     box-shadow: var(--shadow);
 }
 
-h1, h2, h3 {
+body:not(.af-body) h1,
+body:not(.af-body) h2,
+body:not(.af-body) h3 {
     color: var(--text-900);
 }
 
-.about_us_text, p, label, th, td, a {
+body:not(.af-body) .about_us_text,
+body:not(.af-body) p,
+body:not(.af-body) label,
+body:not(.af-body) th,
+body:not(.af-body) td,
+body:not(.af-body) a {
     color: var(--text-700);
 }
 
@@ -1359,14 +1447,22 @@ a:hover {
 }
 
 /* Inputs */
-input[type="text"], input[type="number"], textarea, select, #search {
+body:not(.af-body) input[type="text"],
+body:not(.af-body) input[type="number"],
+body:not(.af-body) textarea,
+body:not(.af-body) select,
+body:not(.af-body) #search {
     border: 1px solid var(--border);
     background-color: #f8fafc;
     border-radius: 10px;
     padding: 10px 14px;
 }
 
-input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus, #search:focus {
+body:not(.af-body) input[type="text"]:focus,
+body:not(.af-body) input[type="number"]:focus,
+body:not(.af-body) textarea:focus,
+body:not(.af-body) select:focus,
+body:not(.af-body) #search:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 4px var(--primary-50);
 }

templates/about_us.html

@@ -6,7 +6,7 @@
     <title>About | Anomaly Front Toolkit</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
 </head>
-<body class="af-body">
+<body class="af-body af-about-page">
 <header class="af-header">
     <div class="af-brand">
         <div class="af-logo" aria-hidden="true">
@@ -32,18 +32,49 @@
 <main class="af-shell">
     <section class="af-card">
         <div class="af-card-header">
+            <p class="af-about-kicker">Anomaly Front Toolkit</p>
             <h1>Hey there! You found the Anomaly Front Stats Page by Fretux and Losernoob124</h1>
         </div>
 
-        <h2>Our Mission</h2>
+        <div class="af-about-hero">
-        <p>
+            <div>
-            We created this platform to help the Anomaly Front community quickly and easily calculate gun DPS and DPM.
+                <h2>Our Mission</h2>
-            No spreadsheets, no hassle. Whether you're theorycrafting a Deathwish loadout or comparing your sidearms,
+                <p>
-            our tool’s built to support your grind.
+                    We created this platform to help the Anomaly Front community quickly and easily calculate gun DPS and DPM.
-        </p>
+                    No spreadsheets, no hassle. Whether you're theorycrafting a Deathwish loadout or comparing your sidearms,
-        <p>
+                    our tool’s built to support your grind.
-            Got ideas or stat suggestions? Hit us up on Discord or submit feedback via our Suggestions Page.
+                </p>
-        </p>
+                <p>
+                    Got ideas or stat suggestions? Hit us up on Discord or submit feedback via our Suggestions Page.
+                </p>
+                <div class="af-about-banner">
+                    <div>
+                        <p class="af-about-kicker">Built for</p>
+                        <p>Fast comparisons, squad planning, and experimental build crafting.</p>
+                    </div>
+                    <div class="af-about-pill">Theorycrafters</div>
+                    <div class="af-about-pill">Squad leaders</div>
+                    <div class="af-about-pill">Balance nerds</div>
+                </div>
+            </div>
+            <div>
+                <h2>Toolkit highlights</h2>
+                <div class="af-about-grid">
+                    <div class="af-about-card">
+                        <h3>Live pacing snapshots</h3>
+                        <p>Instant readouts for burst and sustained DPS so you can spot outliers quickly.</p>
+                    </div>
+                    <div class="af-about-card">
+                        <h3>Modifier stacking</h3>
+                        <p>Layer operative perks, items, and abilities to mimic real in-game loadouts.</p>
+                    </div>
+                    <div class="af-about-card">
+                        <h3>Community-first data</h3>
+                        <p>Weapon stats are curated with the community, then converted into a fast lookup library.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <h2>Our Story</h2>
         <p>
@@ -51,6 +82,20 @@
             do better. What began as a side hobby by Losernoob124 was reignited by Fretux and evolved into a full web app
             through plenty of bug fixing, community help, and caffeine.
         </p>
+        <div class="af-about-grid">
+            <div class="af-about-card">
+                <h3>Phase one</h3>
+                <p>Spreadsheet-first calculations for a handful of early weapons.</p>
+            </div>
+            <div class="af-about-card">
+                <h3>Phase two</h3>
+                <p>Community testing, patch tracking, and a JSON-based weapon library.</p>
+            </div>
+            <div class="af-about-card">
+                <h3>Phase three</h3>
+                <p>Interactive calculator, modifier stacking, and rapid iteration.</p>
+            </div>
+        </div>
 
         <h2>The Team</h2>
         <ul class="af-list">

templates/calculator.html

@@ -143,9 +143,6 @@
                 </ul>
             </div>
         </div>
-    </section>
-
-    <section class="af-grid">
         <div class="af-card">
             <div class="af-card-header">
                 <h2>Modifiers &amp; operatives</h2>
@@ -201,13 +198,6 @@
                 </div>
             </div>
         </div>
-        <div class="af-card">
-            <div class="af-card-header">
-                <h2>Loadout notes</h2>
-                <p>Capture ideas for upgrades, attachments, or role identity.</p>
-            </div>
-            <textarea class="af-notes" placeholder="Example: Assault rifle tuned for mid-range suppression."></textarea>
-        </div>
     </section>
 </main>
 <script src="{{ url_for('static', filename='filterWeapons.js') }}"></script>