From 83a1aeaebe33af31e083f8cc708fdbcc6d94220a Mon Sep 17 00:00:00 2001
From: Alex <alexpolo2850@gmail.com>
Date: Sun, 1 Mar 2026 21:22:32 +0100
Subject: [PATCH] Refine card layout: smaller art box, bigger stats text,
 footer bar

- Art box reduced from 32mm to 26mm height, icon enlarged to 22pt
- Stats font increased from 6pt to 7pt with more line spacing
- Replaced floating source pip with proper footer bar showing
  renown requirement (left) and source book (right)
- Footer bar colour-coded by weapon category to match title bar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/cards.html | 49 +++++++++++++++++++++++++++++------------------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/public/cards.html b/public/cards.html
index ebf068c..24f5582 100644
--- a/public/cards.html
+++ b/public/cards.html
@@ -126,7 +126,7 @@
 
     /* art box */
     .card-art {
-      flex: 0 0 32mm;
+      flex: 0 0 26mm;
       margin: 1.5mm 2mm 1mm;
       border-radius: 4mm;
       border: 1.5pt solid #333;
@@ -155,7 +155,7 @@
       gap: 1mm;
     }
     .card-art-icon {
-      font-size: 18pt;
+      font-size: 22pt;
       filter: drop-shadow(0 0 3px rgba(200,169,110,0.8));
       line-height: 1;
     }
@@ -182,22 +182,22 @@
 
     /* stats block */
     .card-stats {
-      padding: 1mm 2mm;
+      padding: 1.5mm 2mm 1mm;
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 0.5mm;
+      gap: 1mm;
       overflow: hidden;
     }
     .stat-row {
       display: flex;
       flex-wrap: wrap;
-      gap: 1.5mm;
-      line-height: 1.5;
+      gap: 2mm;
+      line-height: 1.6;
     }
     .stat-item {
       white-space: nowrap;
-      font-size: 6pt;
+      font-size: 7pt;
     }
     .stat-label {
       font-weight: bold;
@@ -208,25 +208,34 @@
       color: #111;
     }
     .card-rules {
-      font-size: 5.5pt;
+      font-size: 6pt;
       font-style: italic;
       color: #444;
-      margin-top: 0.5mm;
+      margin-top: 1mm;
       line-height: 1.4;
       border-top: 0.5pt solid #aaa;
-      padding-top: 0.5mm;
+      padding-top: 1mm;
     }
 
-    /* renown pip */
-    .renown-pip {
-      position: absolute;
-      bottom: 1mm;
-      right: 2mm;
-      font-size: 5pt;
+    /* bottom bar */
+    .card-footer {
+      flex-shrink: 0;
+      background: #d8ccb8;
+      border-top: 1pt solid #888;
+      padding: 1mm 2mm;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 5.5pt;
       font-family: Arial, sans-serif;
+      color: #555;
       font-style: italic;
-      color: #666;
     }
+    .card[data-cat="Melee Weapon"]  .card-footer { background: #d8c4b4; }
+    .card[data-cat="Ranged Weapon"] .card-footer { background: #bcc8d8; }
+    .card[data-cat="Grenade"]       .card-footer { background: #d8d0b4; }
+    .card[data-cat="Armour"]        .card-footer { background: #bcd8bc; }
+    .card[data-cat="Other"]         .card-footer { background: #cebcd8; }
 
     /* category colour accents */
     .card[data-cat="Melee Weapon"]  .card-title-bar { background: #e8d0c0; border-bottom-color: #7a2a1a; }
@@ -414,9 +423,11 @@ function buildCard(w) {
     <div class="card-type-line">${esc(typeLine)}</div>
     <div class="card-stats">
       ${statsHtml}
-      ${renown ? `<div class="stat-row" style="margin-top:auto"><span class="stat-item" style="font-style:italic;color:#666">Renown: ${esc(renown)}</span></div>` : ''}
     </div>
-    <div class="renown-pip">${esc(srcShort)}</div>
+    <div class="card-footer">
+      <span>${renown ? 'Renown: ' + esc(renown) : ''}</span>
+      <span>${esc(srcShort)}</span>
+    </div>
   </div>`
 }