From f246f401dc8c39f5ce4f706ea06672f8bfb23b22 Mon Sep 17 00:00:00 2001
From: SowinskiBraeden <braeden@sowinski.dev>
Date: Sun, 15 Mar 2026 15:30:55 -0700
Subject: [PATCH] get rid of that damn blue

---
 static/css/style.css | 708 ++++++++++++++++++++++---------------------
 1 file changed, 368 insertions(+), 340 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 8455a19..8aacde9 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,123 +1,234 @@
 :root {
-    --bg: #07111f;
-    --bg-accent: #0b1830;
-    --panel: rgba(11, 24, 48, 0.82);
-    --panel-strong: rgba(13, 28, 55, 0.95);
-    --line: rgba(157, 176, 199, 0.14);
-    --text: #e5eefb;
-    --text-muted: #9db0c7;
-    --green: #22c55e;
-    --red: #ef4444;
-    --amber: #f59e0b;
-    --gold: #f5c76a;
-    --shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
-    --radius: 24px;
+    --bg: #0f1113;
+    --bg-elevated: #14171b;
+    --bg-panel: rgba(20, 23, 27, 0.92);
+    --bg-panel-strong: rgba(24, 28, 33, 0.98);
+    --bg-soft: rgba(255, 255, 255, 0.028);
+    --line: rgba(255, 255, 255, 0.08);
+    --line-strong: rgba(255, 255, 255, 0.12);
+    --text: #f3f4f6;
+    --text-muted: #a8adb7;
+    --text-soft: #8b919c;
+    --accent: #f08a38;
+    --accent-2: #ffb36a;
+    --accent-soft: rgba(240, 138, 56, 0.14);
+    --positive: #59d98e;
+    --negative: #f06c72;
+    --neutral: #e4bf65;
+    --shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
+    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.18);
+    --radius-sm: 10px;
+    --radius: 14px;
+    --radius-lg: 18px;
 }
 
 * {
     box-sizing: border-box;
 }
 
+html {
+    color-scheme: dark;
+}
+
 body {
     margin: 0;
+    min-height: 100vh;
     font-family: "Inter", sans-serif;
     color: var(--text);
     background:
-        radial-gradient(circle at top left, rgba(124, 156, 255, 0.16), transparent 22%),
-        radial-gradient(circle at top right, rgba(94, 234, 212, 0.11), transparent 18%),
-        linear-gradient(180deg, #06101d 0%, #091426 100%);
-    min-height: 100vh;
+        radial-gradient(
+            circle at top left,
+            rgba(240, 138, 56, 0.1),
+            transparent 22%
+        ),
+        radial-gradient(
+            circle at top right,
+            rgba(255, 179, 106, 0.06),
+            transparent 18%
+        ),
+        linear-gradient(180deg, #0d0f11 0%, #121519 100%);
 }
 
 body::before {
     content: "";
     position: fixed;
     inset: 0;
-    background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
-    background-size: 34px 34px;
+    background-image:
+        linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
+    background-size: 38px 38px;
+    opacity: 0.28;
     pointer-events: none;
-    opacity: 0.4;
 }
 
- a {
-    color: var(--text);
+body.modal-open {
+    overflow: hidden;
+}
+
+img,
+canvas {
+    display: block;
+    max-width: 100%;
+}
+
+a {
+    color: inherit;
     text-decoration: none;
 }
 
+button,
+input,
+select,
+textarea {
+    font: inherit;
+}
+
+button {
+    color: inherit;
+}
+
 .site-shell {
-    width: min(1260px, calc(100% - 32px));
+    width: min(1280px, calc(100% - 40px));
     margin: 0 auto;
-    padding: 28px 0 52px;
+    padding: 26px 0 44px;
 }
 
 .topbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 24px;
-    margin-bottom: 28px;
-    padding: 18px 22px;
+    gap: 20px;
+    padding: 18px 20px;
+    margin-bottom: 26px;
     border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: rgba(16, 18, 22, 0.82);
+    backdrop-filter: blur(10px);
+    box-shadow: var(--shadow-soft);
+}
+
+.brand-lockup {
+    min-width: 0;
+}
+
+.brand-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.brand-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    padding: 0 9px;
     border-radius: 999px;
-    background: rgba(6, 16, 29, 0.74);
-    backdrop-filter: blur(16px);
-    box-shadow: var(--shadow);
+    background: var(--accent-soft);
+    border: 1px solid rgba(240, 138, 56, 0.24);
+    color: var(--accent-2);
+    font-family: "IBM Plex Mono", monospace;
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
 }
 
 .brand {
-    font-size: 1.3rem;
+    font-size: 1.25rem;
     font-weight: 800;
-    letter-spacing: -0.03em;
+    letter-spacing: -0.04em;
 }
 
 .brand-subtitle {
-    margin: 4px 0 0;
+    margin: 6px 0 0;
     color: var(--text-muted);
-    font-size: 0.93rem;
+    font-size: 0.94rem;
 }
 
 .nav-links {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 10px;
     flex-wrap: wrap;
 }
 
 .nav-links a,
-.ghost-button {
-    color: var(--text);
+.ghost-button,
+.secondary-button,
+.sort-button {
+    transition:
+        background-color 140ms ease,
+        border-color 140ms ease,
+        color 140ms ease,
+        transform 140ms ease;
+}
+
+.nav-links a,
+.ghost-button,
+.secondary-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 42px;
+    padding: 0 14px;
+    border-radius: 12px;
+    border: 1px solid transparent;
     background: transparent;
-    border: none;
-    font: inherit;
+    color: var(--text);
     cursor: pointer;
-    padding: 10px 14px;
-    border-radius: 999px;
 }
 
 .nav-links a:hover,
-.ghost-button:hover {
-    background: rgba(124, 156, 255, 0.12);
+.ghost-button:hover,
+.secondary-button:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: var(--line);
+}
+
+.nav-accent,
+.secondary-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: var(--line);
+}
+
+.nav-accent:hover,
+.secondary-button:hover {
+    border-color: rgba(240, 138, 56, 0.26);
+    box-shadow: inset 0 0 0 1px rgba(240, 138, 56, 0.12);
 }
 
 .flash-stack {
     display: grid;
     gap: 10px;
-    margin-bottom: 20px;
+    margin-bottom: 18px;
 }
 
 .flash {
-    border-radius: 18px;
     padding: 14px 16px;
     border: 1px solid var(--line);
-    backdrop-filter: blur(14px);
+    border-radius: var(--radius);
+    background: var(--bg-panel);
+    color: var(--text);
+    box-shadow: var(--shadow-soft);
 }
 
 .flash.success {
-    background: rgba(34, 197, 94, 0.12);
+    border-color: rgba(89, 217, 142, 0.18);
+    background: linear-gradient(
+        180deg,
+        rgba(89, 217, 142, 0.1),
+        rgba(20, 23, 27, 0.94)
+    );
 }
 
 .flash.error {
-    background: rgba(244, 63, 94, 0.12);
+    border-color: rgba(240, 108, 114, 0.18);
+    background: linear-gradient(
+        180deg,
+        rgba(240, 108, 114, 0.1),
+        rgba(20, 23, 27, 0.94)
+    );
 }
 
 .page-content {
@@ -127,18 +238,29 @@ body::before {
 
 .hero-card,
 .panel {
-    border-radius: var(--radius);
+    position: relative;
+    overflow: hidden;
     border: 1px solid var(--line);
-    background: var(--panel);
-    box-shadow: var(--shadow);
-    backdrop-filter: blur(18px);
+    border-radius: var(--radius-lg);
+    background: var(--bg-panel);
+    box-shadow: var(--shadow-soft);
+}
+
+.hero-card::before,
+.panel::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.018),
+        transparent 34%
+    );
+    pointer-events: none;
 }
 
 .hero-card {
-    padding: 28px;
-    background:
-        linear-gradient(135deg, rgba(124, 156, 255, 0.13), transparent 40%),
-        linear-gradient(180deg, rgba(11, 24, 48, 0.96), rgba(9, 20, 38, 0.92));
+    padding: 30px;
 }
 
 .hero-card.compact {
@@ -146,52 +268,48 @@ body::before {
 }
 
 .panel {
-    padding: 24px;
-}
-
-.panel-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 12px;
-    margin-bottom: 18px;
+    padding: 22px;
 }
 
 .eyebrow {
-    margin: 0 0 6px;
-    text-transform: uppercase;
-    letter-spacing: 0.14em;
+    margin: 0 0 8px;
+    color: var(--accent-2);
+    font-family: "IBM Plex Mono", monospace;
     font-size: 0.74rem;
-    color: var(--gold);
-    font-weight: 700;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
 }
 
 h1,
 h2 {
     margin: 0;
-    letter-spacing: -0.04em;
+    letter-spacing: -0.045em;
 }
 
 h1 {
-    font-size: clamp(2rem, 4vw, 3.2rem);
+    font-size: clamp(2.2rem, 4.2vw, 3.7rem);
+    line-height: 0.98;
 }
 
 h2 {
-    font-size: 1.38rem;
+    font-size: 1.32rem;
+    line-height: 1.15;
 }
 
 .muted-text {
+    margin: 0;
     color: var(--text-muted);
-    line-height: 1.6;
+    line-height: 1.65;
 }
 
 .muted-text.small,
 .tiny-text {
-    font-size: 0.88rem;
+    font-size: 0.9rem;
 }
 
 .tiny-text {
-    color: #8092ab;
+    color: var(--text-soft);
 }
 
 .grid {
@@ -200,11 +318,31 @@ h2 {
 }
 
 .two-col {
-    grid-template-columns: 1.7fr 1fr;
+    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
 }
 
 .three-col {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.panel-header {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 14px;
+    margin-bottom: 18px;
+}
+
+.panel-header-with-actions {
+    align-items: center;
+}
+
+.panel-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
 .chart-panel {
@@ -212,12 +350,13 @@ h2 {
 }
 
 .chart-panel-large {
-    min-height: 500px;
+    min-height: 520px;
 }
 
-.chart-frame {
+.chart-frame,
+.chart-modal-frame {
     position: relative;
-    min-height: 360px;
+    min-height: 340px;
 }
 
 .chart-panel-large .chart-frame {
@@ -229,8 +368,8 @@ h2 {
 }
 
 .chart-frame-interactive:focus-visible {
-    outline: 2px solid rgba(245, 199, 106, 0.7);
-    outline-offset: 6px;
+    outline: 2px solid rgba(240, 138, 56, 0.55);
+    outline-offset: 5px;
 }
 
 .chart-panel canvas,
@@ -248,32 +387,54 @@ h2 {
 
 .stat-list {
     display: grid;
-    gap: 14px;
+    gap: 8px;
+    position: relative;
+    z-index: 1;
 }
 
 .stat-row {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     gap: 14px;
-    padding: 12px 0;
+    padding: 14px 0;
     border-bottom: 1px solid var(--line);
 }
 
-.stat-card {
-    gap: 8px;
+.stat-row:last-child {
+    border-bottom: none;
 }
 
-.stat-card span {
+.stat-row span {
     color: var(--text-muted);
 }
 
+.stat-card {
+    gap: 10px;
+    min-height: 128px;
+}
+
+.stat-card span {
+    color: var(--text-soft);
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
 .stat-card strong {
-    font-size: 1.75rem;
-    letter-spacing: -0.04em;
+    font-size: clamp(1.8rem, 3vw, 2.35rem);
+    line-height: 1;
+    letter-spacing: -0.06em;
 }
 
 .table-wrap {
+    position: relative;
+    z-index: 1;
     overflow-x: auto;
+    border-radius: 12px;
+    border: 1px solid var(--line);
+    background: rgba(255, 255, 255, 0.018);
 }
 
 table {
@@ -283,327 +444,194 @@ table {
 
 th,
 td {
-    text-align: left;
     padding: 14px 14px;
     border-bottom: 1px solid var(--line);
+    text-align: left;
     white-space: nowrap;
 }
 
 th {
-    color: var(--text-muted);
-    font-size: 0.83rem;
+    color: var(--text-soft);
+    font-size: 0.76rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+}
+
+tbody tr {
+    transition: background-color 140ms ease;
 }
 
 tbody tr:hover {
-    background: rgba(124, 156, 255, 0.06);
+    background: rgba(255, 255, 255, 0.026);
 }
 
-.positive {
-    color: var(--green);
-    font-weight: 700;
+tbody tr:last-child td,
+tbody tr:last-child th {
+    border-bottom: none;
 }
 
-.negative {
-    color: var(--red);
-    font-weight: 700;
-}
-
-.neutral {
-    color: var(--amber);
-    font-weight: 700;
-}
-
-.form-shell {
-    display: flex;
-    justify-content: center;
-}
-
-.form-shell.narrow {
-    min-height: 55vh;
-    align-items: center;
-}
-
-.form-card {
-    display: grid;
-    gap: 16px;
-}
-
-.form-card label {
-    display: grid;
-    gap: 8px;
-}
-
-.form-card span {
-    font-size: 0.94rem;
-    color: var(--text-muted);
-}
-
-input,
-select,
-textarea,
-button {
-    font: inherit;
-}
-
-input,
-select,
-textarea {
-    width: 100%;
-    padding: 13px 14px;
-    border-radius: 16px;
-    border: 1px solid rgba(157, 176, 199, 0.18);
-    background: rgba(7, 17, 31, 0.78);
-    color: var(--text);
-    outline: none;
-}
-
-input:focus,
-select:focus,
-textarea:focus {
-    border-color: rgba(124, 156, 255, 0.7);
-    box-shadow: 0 0 0 4px rgba(124, 156, 255, 0.14);
-}
-
-.primary-button {
-    padding: 14px 18px;
-    border: none;
-    border-radius: 16px;
-    background: linear-gradient(135deg, #f4a261 0%, #2a9d8f 100%);
-    color: #07111f;
-    font-weight: 800;
-    cursor: pointer;
-}
-
-.secondary-button {
-    padding: 11px 14px;
-    border: 1px solid var(--line);
-    border-radius: 14px;
-    background: rgba(255, 255, 255, 0.04);
-    color: var(--text);
+td a {
     font-weight: 600;
-    cursor: pointer;
 }
 
-.secondary-button:hover {
-    background: rgba(255, 255, 255, 0.08);
-}
-
-.helper-box {
-    display: flex;
-    gap: 10px;
-    align-items: flex-start;
-    border-radius: 18px;
-    border: 1px solid var(--line);
-    padding: 14px 16px;
-    color: var(--text-muted);
-    background: rgba(244, 162, 97, 0.06);
-}
-
-.note-list {
-    margin: 0;
-    padding-left: 18px;
-    color: var(--text-muted);
-    white-space: normal;
-}
-
-.event-feed {
-    display: grid;
-    gap: 12px;
-    max-height: 580px;
-    overflow-y: auto;
-    padding-right: 2px;
-}
-
-.event-feed.condensed {
-    max-height: 420px;
-}
-
-.event-card {
-    padding: 16px;
-    border-radius: 20px;
-    border: 1px solid var(--line);
-    background: rgba(7, 17, 31, 0.72);
-}
-
-.event-card-top {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    align-items: center;
-}
-
-.event-amount {
-    margin: 10px 0 6px;
-    font-size: 1.2rem;
-    font-weight: 700;
-    letter-spacing: -0.04em;
-}
-
-.pill {
-    border-radius: 999px;
-    padding: 6px 10px;
-    background: rgba(244, 162, 97, 0.12);
-    color: #ffd3ab;
-    font-size: 0.77rem;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-
-.stack-gap {
-    display: grid;
-    gap: 24px;
-}
-
-.narrow {
-    max-width: 520px;
-    width: 100%;
-}
-
-.small-table table th,
-.small-table table td {
-    padding: 12px;
-}
-
-@media (max-width: 980px) {
-    .two-col,
-    .three-col,
-    .session-layout,
-    .admin-layout {
-        grid-template-columns: 1fr;
-    }
-
-    .topbar {
-        border-radius: 28px;
-        padding: 20px;
-        align-items: flex-start;
-        flex-direction: column;
-    }
-}
-
-@media (max-width: 640px) {
-    .site-shell {
-        width: min(100% - 18px, 100%);
-        padding-top: 18px;
-    }
-
-    .panel,
-    .hero-card {
-        padding: 18px;
-        border-radius: 22px;
-    }
-
-    h1 {
-        font-size: 2rem;
-    }
-
-    .nav-links {
-        width: 100%;
-    }
-}
-
-
-.panel-header-with-actions {
-    align-items: center;
-}
-
-.panel-actions {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.sortable-table th {
-    padding-top: 10px;
-    padding-bottom: 10px;
+td a:hover {
+    color: var(--accent-2);
 }
 
 .sort-button {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
     width: 100%;
     padding: 0;
-    border: none;
+    border: 0;
     background: transparent;
     color: inherit;
-    text-transform: inherit;
-    letter-spacing: inherit;
-    font: inherit;
+    text-align: left;
     cursor: pointer;
 }
 
-.sort-button:hover,
-.sort-button.is-active {
+.sort-button:hover {
     color: var(--text);
 }
 
+.sort-button.is-active {
+    color: var(--accent-2);
+}
+
 .sort-indicator {
-    color: var(--text-soft, #8092ab);
+    color: var(--text-soft);
     font-size: 0.9em;
 }
 
+.sort-button.is-active .sort-indicator {
+    color: var(--accent-2);
+}
+
+.positive,
+.negative,
+.neutral {
+    font-weight: 700;
+}
+
+.positive {
+    color: var(--positive);
+}
+
+.negative {
+    color: var(--negative);
+}
+
+.neutral {
+    color: var(--neutral);
+}
+
 .chart-modal {
     position: fixed;
     inset: 0;
+    z-index: 80;
     display: none;
-    align-items: stretch;
-    justify-content: center;
-    padding: 24px;
-    z-index: 200;
 }
 
 .chart-modal.is-open {
-    display: flex;
+    display: block;
 }
 
 .chart-modal-backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(3, 6, 12, 0.76);
-    backdrop-filter: blur(10px);
+    background: rgba(8, 10, 12, 0.76);
+    backdrop-filter: blur(6px);
 }
 
 .chart-modal-card {
     position: relative;
     z-index: 1;
-    width: min(1280px, 100%);
-    min-height: calc(100vh - 48px);
-    border-radius: 28px;
-    border: 1px solid var(--line);
-    background: rgba(11, 17, 24, 0.96);
+    width: min(1320px, calc(100vw - 48px));
+    max-height: calc(100vh - 48px);
+    margin: 24px auto;
+    padding: 22px;
+    border: 1px solid var(--line-strong);
+    border-radius: 20px;
+    background: var(--bg-panel-strong);
     box-shadow: var(--shadow);
-    padding: 24px;
-    display: grid;
-    grid-template-rows: auto 1fr;
-    gap: 18px;
 }
 
 .chart-modal-frame {
-    min-height: 70vh;
+    height: min(74vh, 820px);
 }
 
-body.modal-open {
-    overflow: hidden;
+.leaderboard-layout {
+    align-items: stretch;
 }
 
 @media (max-width: 980px) {
+    .site-shell {
+        width: min(100% - 24px, 100%);
+    }
+
+    .topbar {
+        align-items: flex-start;
+        flex-direction: column;
+        border-radius: 16px;
+    }
+
+    .two-col,
+    .three-col,
     .leaderboard-layout {
         grid-template-columns: 1fr;
     }
 
-    .chart-modal {
-        padding: 12px;
+    .chart-panel-large .chart-frame {
+        min-height: 360px;
+    }
+}
+
+@media (max-width: 640px) {
+    .site-shell {
+        padding-top: 16px;
+    }
+
+    .topbar,
+    .hero-card,
+    .panel {
+        border-radius: 14px;
+    }
+
+    .topbar,
+    .hero-card,
+    .panel,
+    .chart-modal-card {
+        padding-left: 16px;
+        padding-right: 16px;
+    }
+
+    h1 {
+        font-size: 1.95rem;
+    }
+
+    .nav-links {
+        width: 100%;
+    }
+
+    .nav-links a,
+    .ghost-button,
+    .secondary-button {
+        min-height: 40px;
+    }
+
+    th,
+    td {
+        padding: 12px 12px;
     }
 
     .chart-modal-card {
-        min-height: calc(100vh - 24px);
-        padding: 18px;
+        width: min(100vw - 20px, 100%);
+        margin: 10px auto;
     }
 
     .chart-modal-frame {
-        min-height: 62vh;
+        height: min(68vh, 620px);
     }
 }