From e94aa09ce5ab511d62f3c851c9e0293def83b76a Mon Sep 17 00:00:00 2001
From: Lucas Kalil <lucas.prokalil2020@outlook.com>
Date: Sun, 14 Jun 2026 01:06:14 -0300
Subject: [PATCH] refactor(stadiums): clean up SVG illustrations and fix image
 aspect ratio

- Remove card chrome (background rect, text duplicates, accent bars) from all 17 stadium SVGs
- Crop viewBox tightly to illustration (~10px padding) and remove fixed width/height attributes
- Update .stadium-img aspect ratio from 16/9 to 4/3 to match cropped SVG ratios and prevent aggressive object-fit clipping
---
 assets/css/style.css                    |   2 +-
 assets/images/stadiums/akron.svg        |  45 ++++++++---
 assets/images/stadiums/arrowhead.svg    |  43 +++++++---
 assets/images/stadiums/att.svg          |  45 ++++++++---
 assets/images/stadiums/azteca.svg       |  44 ++++++++---
 assets/images/stadiums/bbva.svg         |  58 +++++++++++---
 assets/images/stadiums/bcplace.svg      | 100 +++++++++++++++++++++---
 assets/images/stadiums/bmo.svg          |  45 ++++++++---
 assets/images/stadiums/gillette.svg     |  49 +++++++++---
 assets/images/stadiums/hardrock.svg     |  47 ++++++++---
 assets/images/stadiums/levis.svg        |  47 ++++++++---
 assets/images/stadiums/lincoln.svg      |  45 ++++++++---
 assets/images/stadiums/lumen.svg        |  49 +++++++++---
 assets/images/stadiums/mercedesbenz.svg |  56 ++++++++++---
 assets/images/stadiums/metlife.svg      |  44 ++++++++---
 assets/images/stadiums/nrg.svg          |  45 ++++++++---
 assets/images/stadiums/sofi.svg         |  44 ++++++++---
 17 files changed, 615 insertions(+), 193 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 6b24701..55ee373 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -755,7 +755,7 @@ button {
 .stadium-img {
   width: 100%;
   height: auto;
-  aspect-ratio: 16 / 9;
+  aspect-ratio: 4 / 3;
   object-fit: cover;
   border-bottom: 1px solid var(--glass-border);
 }
diff --git a/assets/images/stadiums/akron.svg b/assets/images/stadiums/akron.svg
index 31d379e..b2e393b 100644
--- a/assets/images/stadiums/akron.svg
+++ b/assets/images/stadiums/akron.svg
@@ -1,15 +1,36 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Estadio Akron">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="34 132 232 188" role="img" aria-label="Estadio Akron, Guadalajara, Mexico">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">Estadio Akron</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Guadalajara</text>
+  <g>
+    <ellipse cx="150" cy="222" rx="106" ry="80" class="canopy"/>
+    <ellipse cx="150" cy="222" rx="88" ry="64" class="void"/>
+    <ellipse cx="150" cy="222" rx="106" ry="80" class="struct"/>
+    <ellipse cx="150" cy="222" rx="88" ry="64" class="thin"/>
+    <ellipse cx="150" cy="224" rx="78" ry="57" class="stands"/>
+    <ellipse cx="150" cy="224" rx="78" ry="57" class="thin"/>
+    <rect x="104" y="199" width="92" height="50" rx="10" class="pitch"/>
+    <line x1="150" y1="199" x2="150" y2="249" class="pline"/>
+    <rect x="104" y="214" width="12" height="20" class="pline"/>
+    <rect x="184" y="214" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="224" r="9" class="accs"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/arrowhead.svg b/assets/images/stadiums/arrowhead.svg
index 9c20063..948ca9e 100644
--- a/assets/images/stadiums/arrowhead.svg
+++ b/assets/images/stadiums/arrowhead.svg
@@ -1,15 +1,34 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Arrowhead Stadium">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="42 140 216 168" role="img" aria-label="Arrowhead Stadium, Kansas City, USA">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">Arrowhead Stadium</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Kansas City</text>
+  <g>
+    <rect x="52" y="150" width="196" height="148" rx="62" class="stands"/>
+    <rect x="52" y="150" width="196" height="148" rx="62" class="struct"/>
+    <rect x="76" y="172" width="148" height="104" rx="46" class="concrete"/>
+    <rect x="76" y="172" width="148" height="104" rx="46" class="thin"/>
+    <rect x="100" y="196" width="100" height="56" rx="10" class="pitch"/>
+    <line x1="150" y1="196" x2="150" y2="252" class="pline"/>
+    <rect x="100" y="214" width="12" height="20" class="pline"/>
+    <rect x="188" y="214" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="224" r="9" class="accs"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/att.svg b/assets/images/stadiums/att.svg
index 5525fb7..493f625 100644
--- a/assets/images/stadiums/att.svg
+++ b/assets/images/stadiums/att.svg
@@ -1,15 +1,36 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="AT&amp;T Stadium">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="44 140 212 168" role="img" aria-label="AT&amp;T Stadium, Dallas, USA">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">AT&amp;T Stadium</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Dallas</text>
+  <g>
+    <rect x="54" y="150" width="192" height="148" rx="40" class="concrete"/>
+    <rect x="54" y="150" width="192" height="148" rx="40" class="struct"/>
+    <rect x="102" y="186" width="96" height="72" rx="12" class="void"/>
+    <rect x="102" y="186" width="96" height="72" rx="12" class="thin"/>
+    <rect x="102" y="194" width="96" height="56" rx="10" class="pitch"/>
+    <line x1="150" y1="194" x2="150" y2="250" class="pline"/>
+    <rect x="102" y="212" width="12" height="20" class="pline"/>
+    <rect x="186" y="212" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="222" r="9" class="accs"/>
+    <path d="M70,184 Q150,166 230,184" class="struct"/>
+    <path d="M70,260 Q150,278 230,260" class="struct"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/azteca.svg b/assets/images/stadiums/azteca.svg
index ba17d01..f10334c 100644
--- a/assets/images/stadiums/azteca.svg
+++ b/assets/images/stadiums/azteca.svg
@@ -1,15 +1,35 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Estadio Azteca">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="42 140 216 168" role="img" aria-label="Estadio Azteca, Mexico City, Mexico">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">Estadio Azteca</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Mexico City</text>
+  <g>
+    <rect x="52" y="150" width="196" height="148" rx="58" class="concrete"/>
+    <rect x="52" y="150" width="196" height="148" rx="58" class="struct"/>
+    <rect x="62" y="160" width="176" height="128" rx="50" class="ribs"/>
+    <rect x="80" y="178" width="140" height="92" rx="34" class="stands"/>
+    <rect x="80" y="178" width="140" height="92" rx="34" class="thin"/>
+    <rect x="100" y="196" width="100" height="56" rx="10" class="pitch"/>
+    <line x1="150" y1="196" x2="150" y2="252" class="pline"/>
+    <rect x="100" y="214" width="12" height="20" class="pline"/>
+    <rect x="188" y="214" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="224" r="9" class="accs"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/bbva.svg b/assets/images/stadiums/bbva.svg
index cb5e43a..085ddac 100644
--- a/assets/images/stadiums/bbva.svg
+++ b/assets/images/stadiums/bbva.svg
@@ -1,15 +1,49 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Estadio BBVA">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="46 136 208 174" role="img" aria-label="Estadio BBVA, Monterrey, Mexico">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">Estadio BBVA</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Monterrey</text>
+  <g>
+    <rect x="56" y="152" width="188" height="146" rx="22" class="concrete"/>
+    <rect x="56" y="152" width="188" height="146" rx="22" class="struct"/>
+    <rect x="78" y="172" width="132" height="106" rx="16" class="stands"/>
+    <rect x="78" y="172" width="132" height="106" rx="16" class="thin"/>
+    <rect x="101" y="199" width="98" height="54" rx="10" class="pitch"/>
+    <line x1="150" y1="199" x2="150" y2="253" class="pline"/>
+    <rect x="101" y="216" width="12" height="20" class="pline"/>
+    <rect x="187" y="216" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="226" r="9" class="accs"/>
+    <rect x="100" y="146" width="100" height="34" class="void"/>
+    <line x1="100" y1="180" x2="200" y2="180" class="thin"/>
+    <line x1="100" y1="146" x2="100" y2="180" class="thin"/>
+    <line x1="200" y1="146" x2="200" y2="180" class="thin"/>
+    <line x1="86" y1="300" x2="86" y2="290" class="hair"/>
+    <line x1="98" y1="300" x2="98" y2="290" class="hair"/>
+    <line x1="110" y1="300" x2="110" y2="290" class="hair"/>
+    <line x1="122" y1="300" x2="122" y2="290" class="hair"/>
+    <line x1="134" y1="300" x2="134" y2="290" class="hair"/>
+    <line x1="146" y1="300" x2="146" y2="290" class="hair"/>
+    <line x1="158" y1="300" x2="158" y2="290" class="hair"/>
+    <line x1="170" y1="300" x2="170" y2="290" class="hair"/>
+    <line x1="182" y1="300" x2="182" y2="290" class="hair"/>
+    <line x1="194" y1="300" x2="194" y2="290" class="hair"/>
+    <line x1="206" y1="300" x2="206" y2="290" class="hair"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/bcplace.svg b/assets/images/stadiums/bcplace.svg
index 082bb71..bebbe20 100644
--- a/assets/images/stadiums/bcplace.svg
+++ b/assets/images/stadiums/bcplace.svg
@@ -1,15 +1,91 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="BC Place">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="32 128 236 188" role="img" aria-label="BC Place, Vancouver, Canada">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">BC Place</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Vancouver</text>
+  <g>
+    <ellipse cx="150" cy="222" rx="104" ry="80" class="canopy"/>
+    <ellipse cx="150" cy="222" rx="104" ry="80" class="struct"/>
+    <line x1="251.0" y1="222.0" x2="210.0" y2="222.0" class="hair"/>
+    <line x1="248.8" y1="238.0" x2="208.7" y2="231.6" class="hair"/>
+    <line x1="242.3" y1="253.3" x2="204.8" y2="240.7" class="hair"/>
+    <line x1="231.7" y1="267.3" x2="198.5" y2="249.0" class="hair"/>
+    <line x1="217.6" y1="279.2" x2="190.1" y2="256.2" class="hair"/>
+    <line x1="200.5" y1="288.7" x2="180.0" y2="261.8" class="hair"/>
+    <line x1="181.2" y1="295.2" x2="168.5" y2="265.7" class="hair"/>
+    <line x1="160.6" y1="298.6" x2="156.3" y2="267.7" class="hair"/>
+    <line x1="139.4" y1="298.6" x2="143.7" y2="267.7" class="hair"/>
+    <line x1="118.8" y1="295.2" x2="131.5" y2="265.7" class="hair"/>
+    <line x1="99.5" y1="288.7" x2="120.0" y2="261.8" class="hair"/>
+    <line x1="82.4" y1="279.2" x2="109.9" y2="256.2" class="hair"/>
+    <line x1="68.3" y1="267.3" x2="101.5" y2="249.0" class="hair"/>
+    <line x1="57.7" y1="253.3" x2="95.2" y2="240.7" class="hair"/>
+    <line x1="51.2" y1="238.0" x2="91.3" y2="231.6" class="hair"/>
+    <line x1="49.0" y1="222.0" x2="90.0" y2="222.0" class="hair"/>
+    <line x1="51.2" y1="206.0" x2="91.3" y2="212.4" class="hair"/>
+    <line x1="57.7" y1="190.7" x2="95.2" y2="203.3" class="hair"/>
+    <line x1="68.3" y1="176.7" x2="101.5" y2="195.0" class="hair"/>
+    <line x1="82.4" y1="164.8" x2="109.9" y2="187.8" class="hair"/>
+    <line x1="99.5" y1="155.3" x2="120.0" y2="182.2" class="hair"/>
+    <line x1="118.8" y1="148.8" x2="131.5" y2="178.3" class="hair"/>
+    <line x1="139.4" y1="145.4" x2="143.7" y2="176.3" class="hair"/>
+    <line x1="160.6" y1="145.4" x2="156.3" y2="176.3" class="hair"/>
+    <line x1="181.2" y1="148.8" x2="168.5" y2="178.3" class="hair"/>
+    <line x1="200.5" y1="155.3" x2="180.0" y2="182.2" class="hair"/>
+    <line x1="217.6" y1="164.8" x2="190.1" y2="187.8" class="hair"/>
+    <line x1="231.7" y1="176.7" x2="198.5" y2="195.0" class="hair"/>
+    <line x1="242.3" y1="190.7" x2="204.8" y2="203.3" class="hair"/>
+    <line x1="248.8" y1="206.0" x2="208.7" y2="212.4" class="hair"/>
+    <circle cx="256.0" cy="222.0" r="1.6" class="acc"/>
+    <circle cx="253.7" cy="239.0" r="1.6" class="acc"/>
+    <circle cx="246.8" cy="255.4" r="1.6" class="acc"/>
+    <circle cx="235.8" cy="270.2" r="1.6" class="acc"/>
+    <circle cx="220.9" cy="282.9" r="1.6" class="acc"/>
+    <circle cx="203.0" cy="293.0" r="1.6" class="acc"/>
+    <circle cx="182.8" cy="300.0" r="1.6" class="acc"/>
+    <circle cx="161.1" cy="303.6" r="1.6" class="acc"/>
+    <circle cx="138.9" cy="303.6" r="1.6" class="acc"/>
+    <circle cx="117.2" cy="300.0" r="1.6" class="acc"/>
+    <circle cx="97.0" cy="293.0" r="1.6" class="acc"/>
+    <circle cx="79.1" cy="282.9" r="1.6" class="acc"/>
+    <circle cx="64.2" cy="270.2" r="1.6" class="acc"/>
+    <circle cx="53.2" cy="255.4" r="1.6" class="acc"/>
+    <circle cx="46.3" cy="239.0" r="1.6" class="acc"/>
+    <circle cx="44.0" cy="222.0" r="1.6" class="acc"/>
+    <circle cx="46.3" cy="205.0" r="1.6" class="acc"/>
+    <circle cx="53.2" cy="188.6" r="1.6" class="acc"/>
+    <circle cx="64.2" cy="173.8" r="1.6" class="acc"/>
+    <circle cx="79.1" cy="161.1" r="1.6" class="acc"/>
+    <circle cx="97.0" cy="151.0" r="1.6" class="acc"/>
+    <circle cx="117.2" cy="144.0" r="1.6" class="acc"/>
+    <circle cx="138.9" cy="140.4" r="1.6" class="acc"/>
+    <circle cx="161.1" cy="140.4" r="1.6" class="acc"/>
+    <circle cx="182.8" cy="144.0" r="1.6" class="acc"/>
+    <circle cx="203.0" cy="151.0" r="1.6" class="acc"/>
+    <circle cx="220.9" cy="161.1" r="1.6" class="acc"/>
+    <circle cx="235.8" cy="173.8" r="1.6" class="acc"/>
+    <circle cx="246.8" cy="188.6" r="1.6" class="acc"/>
+    <circle cx="253.7" cy="205.0" r="1.6" class="acc"/>
+    <rect x="110" y="198" width="80" height="48" rx="10" class="pitch"/>
+    <line x1="150" y1="198" x2="150" y2="246" class="pline"/>
+    <ellipse cx="150" cy="222" rx="17" ry="12" class="concrete"/>
+    <ellipse cx="150" cy="222" rx="17" ry="12" class="thin"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/bmo.svg b/assets/images/stadiums/bmo.svg
index 44b21ff..799a86b 100644
--- a/assets/images/stadiums/bmo.svg
+++ b/assets/images/stadiums/bmo.svg
@@ -1,15 +1,36 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="BMO Field">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 144 200 152" role="img" aria-label="BMO Field, Toronto, Canada">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">BMO Field</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Toronto</text>
+  <g>
+    <rect x="60" y="158" width="180" height="128" rx="14" class="concrete"/>
+    <rect x="60" y="158" width="180" height="128" rx="14" class="struct"/>
+    <rect x="80" y="184" width="140" height="80" rx="8" class="pitch"/>
+    <line x1="150" y1="184" x2="150" y2="264" class="pline"/>
+    <rect x="80" y="214" width="12" height="20" class="pline"/>
+    <rect x="208" y="214" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="224" r="9" class="accs"/>
+    <rect x="92" y="154" width="116" height="24" class="void"/>
+    <line x1="92" y1="178" x2="208" y2="178" class="thin"/>
+    <line x1="92" y1="154" x2="92" y2="178" class="thin"/>
+    <line x1="208" y1="154" x2="208" y2="178" class="thin"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/gillette.svg b/assets/images/stadiums/gillette.svg
index 75d2270..bdca9ff 100644
--- a/assets/images/stadiums/gillette.svg
+++ b/assets/images/stadiums/gillette.svg
@@ -1,15 +1,40 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Gillette Stadium">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="46 104 208 194" role="img" aria-label="Gillette Stadium, Boston, USA">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">Gillette Stadium</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Boston</text>
+  <g>
+    <rect x="56" y="160" width="188" height="128" rx="26" class="stands"/>
+    <rect x="56" y="160" width="188" height="128" rx="26" class="struct"/>
+    <rect x="80" y="180" width="140" height="88" rx="18" class="concrete"/>
+    <rect x="80" y="180" width="140" height="88" rx="18" class="thin"/>
+    <rect x="98" y="197" width="104" height="54" rx="10" class="pitch"/>
+    <line x1="150" y1="197" x2="150" y2="251" class="pline"/>
+    <rect x="98" y="214" width="12" height="20" class="pline"/>
+    <rect x="190" y="214" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="224" r="9" class="accs"/>
+    <rect x="96" y="154" width="108" height="12" rx="4" class="concrete"/>
+    <rect x="96" y="154" width="108" height="12" rx="4" class="thin"/>
+    <path d="M145,150 L155,150 L153,128 L147,128 Z" class="concrete"/>
+    <path d="M145,150 L155,150 L153,128 L147,128 Z" class="thin"/>
+    <circle cx="150" cy="124" r="4.5" class="acc"/>
+    <circle cx="150" cy="124" r="9" class="accs"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/hardrock.svg b/assets/images/stadiums/hardrock.svg
index 9176a6d..59be029 100644
--- a/assets/images/stadiums/hardrock.svg
+++ b/assets/images/stadiums/hardrock.svg
@@ -1,15 +1,38 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Hard Rock Stadium">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="46 142 208 160" role="img" aria-label="Hard Rock Stadium, Miami, USA">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">Hard Rock Stadium</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Miami</text>
+  <g>
+    <rect x="56" y="152" width="188" height="140" rx="26" class="canopy"/>
+    <rect x="56" y="152" width="188" height="140" rx="26" class="struct"/>
+    <rect x="96" y="182" width="108" height="80" rx="14" class="void"/>
+    <rect x="96" y="182" width="108" height="80" rx="14" class="thin"/>
+    <rect x="102" y="192" width="96" height="60" rx="10" class="pitch"/>
+    <line x1="150" y1="192" x2="150" y2="252" class="pline"/>
+    <rect x="102" y="212" width="12" height="20" class="pline"/>
+    <rect x="186" y="212" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="222" r="9" class="accs"/>
+    <rect x="61" y="157" width="10" height="10" rx="2" transform="rotate(45 66 162)" class="acc"/>
+    <rect x="229" y="157" width="10" height="10" rx="2" transform="rotate(45 234 162)" class="acc"/>
+    <rect x="61" y="277" width="10" height="10" rx="2" transform="rotate(45 66 282)" class="acc"/>
+    <rect x="229" y="277" width="10" height="10" rx="2" transform="rotate(45 234 282)" class="acc"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/levis.svg b/assets/images/stadiums/levis.svg
index 43fb371..052e718 100644
--- a/assets/images/stadiums/levis.svg
+++ b/assets/images/stadiums/levis.svg
@@ -1,15 +1,38 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Levi's Stadium">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="28 132 236 180" role="img" aria-label="Levi's Stadium, San Francisco Bay Area, USA">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">Levi's Stadium</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">San Francisco</text>
+  <g>
+    <ellipse cx="150" cy="222" rx="104" ry="80" class="stands"/>
+    <ellipse cx="150" cy="222" rx="104" ry="80" class="struct"/>
+    <ellipse cx="150" cy="222" rx="84" ry="61" class="concrete"/>
+    <ellipse cx="150" cy="222" rx="84" ry="61" class="thin"/>
+    <rect x="101" y="194" width="98" height="56" rx="10" class="pitch"/>
+    <line x1="150" y1="194" x2="150" y2="250" class="pline"/>
+    <rect x="101" y="212" width="12" height="20" class="pline"/>
+    <rect x="187" y="212" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="222" r="9" class="accs"/>
+    <rect x="38" y="168" width="34" height="108" rx="8" class="concrete"/>
+    <rect x="38" y="168" width="34" height="108" rx="8" class="struct"/>
+    <rect x="44" y="176" width="22" height="92" rx="5" class="green"/>
+    <rect x="44" y="176" width="22" height="92" rx="5" class="thin"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/lincoln.svg b/assets/images/stadiums/lincoln.svg
index db132ff..54ce319 100644
--- a/assets/images/stadiums/lincoln.svg
+++ b/assets/images/stadiums/lincoln.svg
@@ -1,15 +1,36 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Lincoln Financial Field">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="46 138 208 168" role="img" aria-label="Lincoln Financial Field, Philadelphia, USA">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">Lincoln Financial Field</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Philadelphia</text>
+  <g>
+    <rect x="56" y="158" width="188" height="128" rx="30" class="stands"/>
+    <rect x="56" y="158" width="188" height="128" rx="30" class="struct"/>
+    <rect x="95" y="193" width="110" height="58" rx="10" class="pitch"/>
+    <line x1="150" y1="193" x2="150" y2="251" class="pline"/>
+    <rect x="95" y="212" width="12" height="20" class="pline"/>
+    <rect x="193" y="212" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="222" r="9" class="accs"/>
+    <path d="M70,168 L150,148 L230,168 L230,176 L150,160 L70,176 Z" class="canopy"/>
+    <path d="M70,168 L150,148 L230,168" class="thin"/>
+    <path d="M70,276 L150,296 L230,276 L230,268 L150,284 L70,268 Z" class="canopy"/>
+    <path d="M70,276 L150,296 L230,276" class="thin"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/lumen.svg b/assets/images/stadiums/lumen.svg
index 9ba12f5..f24c0a7 100644
--- a/assets/images/stadiums/lumen.svg
+++ b/assets/images/stadiums/lumen.svg
@@ -1,15 +1,40 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Lumen Field">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="34 138 212 168" role="img" aria-label="Lumen Field, Seattle, USA">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">Lumen Field</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Seattle</text>
+  <g>
+    <rect x="54" y="156" width="192" height="132" rx="28" class="stands"/>
+    <rect x="54" y="156" width="192" height="132" rx="28" class="struct"/>
+    <rect x="98" y="193" width="104" height="58" rx="10" class="pitch"/>
+    <line x1="150" y1="193" x2="150" y2="251" class="pline"/>
+    <rect x="98" y="212" width="12" height="20" class="pline"/>
+    <rect x="190" y="212" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="224" r="9" class="accs"/>
+    <rect x="72" y="148" width="156" height="20" rx="10" class="canopy"/>
+    <path d="M78,158 Q150,150 222,158" class="struct"/>
+    <rect x="72" y="276" width="156" height="20" rx="10" class="canopy"/>
+    <path d="M78,286 Q150,294 222,286" class="struct"/>
+    <rect x="44" y="182" width="26" height="80" class="void"/>
+    <line x1="70" y1="182" x2="70" y2="262" class="thin"/>
+    <rect x="222" y="184" width="22" height="76" rx="6" class="concrete"/>
+    <rect x="222" y="184" width="22" height="76" rx="6" class="thin"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/mercedesbenz.svg b/assets/images/stadiums/mercedesbenz.svg
index 7671be3..80229c3 100644
--- a/assets/images/stadiums/mercedesbenz.svg
+++ b/assets/images/stadiums/mercedesbenz.svg
@@ -1,15 +1,47 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Mercedes-Benz Stadium">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="44 136 212 172" role="img" aria-label="Mercedes-Benz Stadium, Atlanta, USA">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">Mercedes-Benz Stadium</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Atlanta</text>
+  <g>
+    <ellipse cx="150" cy="222" rx="96" ry="76" class="struct"/>
+    <path d="M238.4,192.3 L238.4,251.7 L177.1,229.8 Z" class="canopy"/>
+    <path d="M238.4,192.3 L238.4,251.7 L177.1,229.8 Z" class="thin"/>
+    <path d="M239.0,250.5 L186.0,292.5 L162.2,242.7 Z" class="canopy"/>
+    <path d="M239.0,250.5 L186.0,292.5 L162.2,242.7 Z" class="thin"/>
+    <path d="M187.5,292.0 L112.5,292.0 L140.1,243.4 Z" class="canopy"/>
+    <path d="M187.5,292.0 L112.5,292.0 L140.1,243.4 Z" class="thin"/>
+    <path d="M114.0,292.5 L61.0,250.5 L123.9,231.6 Z" class="canopy"/>
+    <path d="M114.0,292.5 L61.0,250.5 L123.9,231.6 Z" class="thin"/>
+    <path d="M61.6,251.7 L61.6,192.3 L122.9,214.2 Z" class="canopy"/>
+    <path d="M61.6,251.7 L61.6,192.3 L122.9,214.2 Z" class="thin"/>
+    <path d="M61.0,193.5 L114.0,151.5 L137.8,201.3 Z" class="canopy"/>
+    <path d="M61.0,193.5 L114.0,151.5 L137.8,201.3 Z" class="thin"/>
+    <path d="M112.5,152.0 L187.5,152.0 L159.9,200.6 Z" class="canopy"/>
+    <path d="M112.5,152.0 L187.5,152.0 L159.9,200.6 Z" class="thin"/>
+    <path d="M186.0,151.5 L239.0,193.5 L176.1,212.4 Z" class="canopy"/>
+    <path d="M186.0,151.5 L239.0,193.5 L176.1,212.4 Z" class="thin"/>
+    <ellipse cx="150" cy="222" rx="30" ry="22" class="void"/>
+    <rect x="125" y="208" width="50" height="28" rx="7" class="pitch"/>
+    <line x1="150" y1="208" x2="150" y2="236" class="pline"/>
+    <ellipse cx="150" cy="222" rx="32" ry="22" class="accs"/>
+    <ellipse cx="150" cy="222" rx="25" ry="16" class="thin"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/metlife.svg b/assets/images/stadiums/metlife.svg
index dc4f7d3..71e04ac 100644
--- a/assets/images/stadiums/metlife.svg
+++ b/assets/images/stadiums/metlife.svg
@@ -1,15 +1,35 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="MetLife Stadium">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="32 128 236 188" role="img" aria-label="MetLife Stadium, New York/New Jersey, USA">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">MetLife Stadium</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">New York</text>
+  <g>
+    <ellipse cx="150" cy="222" rx="108" ry="84" class="canopy"/>
+    <ellipse cx="150" cy="222" rx="108" ry="84" class="struct"/>
+    <ellipse cx="150" cy="222" rx="100" ry="77" class="louver"/>
+    <ellipse cx="150" cy="222" rx="80" ry="60" class="stands"/>
+    <ellipse cx="150" cy="222" rx="80" ry="60" class="thin"/>
+    <rect x="104" y="196" width="92" height="52" rx="10" class="pitch"/>
+    <line x1="150" y1="196" x2="150" y2="248" class="pline"/>
+    <rect x="104" y="212" width="12" height="20" class="pline"/>
+    <rect x="184" y="212" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="222" r="9" class="accs"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/nrg.svg b/assets/images/stadiums/nrg.svg
index de2c316..ae0ce26 100644
--- a/assets/images/stadiums/nrg.svg
+++ b/assets/images/stadiums/nrg.svg
@@ -1,15 +1,36 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="NRG Stadium">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="46 144 208 162" role="img" aria-label="NRG Stadium, Houston, USA">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">NRG Stadium</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Houston</text>
+  <g>
+    <path d="M80,154 L220,154 Q236,154 238,168 L244,290 Q244,296 238,296 L62,296 Q56,296 56,290 L62,168 Q64,154 80,154 Z" class="concrete"/>
+    <path d="M80,154 L220,154 Q236,154 238,168 L244,290 Q244,296 238,296 L62,296 Q56,296 56,290 L62,168 Q64,154 80,154 Z" class="struct"/>
+    <rect x="104" y="188" width="92" height="68" rx="10" class="void"/>
+    <rect x="104" y="188" width="92" height="68" rx="10" class="thin"/>
+    <rect x="104" y="195" width="92" height="54" rx="10" class="pitch"/>
+    <line x1="150" y1="195" x2="150" y2="249" class="pline"/>
+    <rect x="104" y="212" width="12" height="20" class="pline"/>
+    <rect x="184" y="212" width="12" height="20" class="pline"/>
+    <circle cx="150" cy="222" r="9" class="accs"/>
+    <line x1="56" y1="222" x2="104" y2="222" class="thin"/>
+    <line x1="196" y1="222" x2="244" y2="222" class="thin"/>
+  </g>
 </svg>
diff --git a/assets/images/stadiums/sofi.svg b/assets/images/stadiums/sofi.svg
index 5a79d78..ee3533a 100644
--- a/assets/images/stadiums/sofi.svg
+++ b/assets/images/stadiums/sofi.svg
@@ -1,15 +1,35 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="SoFi Stadium">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="32 132 236 184" role="img" aria-label="SoFi Stadium, Los Angeles, USA">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#10243b"/>
-      <stop offset="1" stop-color="#081421"/>
-    </linearGradient>
+    <style>
+    .struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+    .thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
+    .hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
+    .concrete{fill:#E7EBF0}
+    .stands{fill:#CDD6E0}
+    .canopy{fill:#EDF0F4}
+    .void{fill:#FFFFFF}
+    .pitch{fill:#3D9A6A}
+    .pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
+    .acc{fill:#E1593A}
+    .accs{fill:none;stroke:#E1593A;stroke-width:2}
+    .green{fill:#6FB98F}
+    .ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
+    .louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
+</style>
+    <pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
+    </pattern>
   </defs>
-  <rect width="400" height="225" fill="url(#bg)"/>
-  <ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
-  <rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
-  <text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">SoFi Stadium</text>
-  <text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Los Angeles</text>
+  <g>
+    <ellipse cx="150" cy="224" rx="108" ry="82" class="canopy"/>
+    <ellipse cx="150" cy="224" rx="108" ry="82" fill="url(#frit)"/>
+    <ellipse cx="150" cy="224" rx="108" ry="82" class="struct"/>
+    <ellipse cx="150" cy="226" rx="74" ry="54" class="void"/>
+    <ellipse cx="150" cy="226" rx="74" ry="54" class="thin"/>
+    <rect x="110" y="206" width="80" height="40" rx="8" class="pitch"/>
+    <line x1="150" y1="206" x2="150" y2="246" class="pline"/>
+    <circle cx="150" cy="226" r="9" class="accs"/>
+    <ellipse cx="150" cy="226" rx="30" ry="19" class="accs"/>
+    <ellipse cx="150" cy="226" rx="22" ry="12" class="thin"/>
+  </g>
 </svg>