Visual updates

src/Fragalytics.Web/wwwroot/css/site.css

@@ -1,15 +1,17 @@
 :root {
-  --bg: #efe8db;
+  --bg: #efe6d5;
-  --panel: #fffdf8;
+  --panel: rgba(255, 251, 244, 0.92);
-  --panel-2: #f8f2e7;
+  --panel-2: #f7efdf;
-  --ink: #1f2421;
+  --panel-3: #f2e7d1;
-  --muted: #5a645e;
+  --ink: #1b1d1c;
-  --accent: #b6482f;
+  --muted: #5c615b;
-  --accent-2: #24584f;
+  --accent: #b5532f;
-  --accent-3: #7f6a2d;
+  --accent-2: #1f5a52;
-  --line: #d8cec0;
+  --accent-3: #846726;
-  --soft: #efe7da;
+  --line: rgba(74, 62, 40, 0.14);
-  --shadow: 0 18px 50px rgba(38, 31, 23, 0.08);
+  --soft: rgba(239, 231, 218, 0.85);
+  --shadow: 0 22px 60px rgba(42, 31, 17, 0.09);
+  --shadow-soft: 0 10px 24px rgba(35, 29, 20, 0.06);
 }
 
 * { box-sizing: border-box; }
@@ -19,9 +21,9 @@ body {
   font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
   color: var(--ink);
   background:
-    radial-gradient(circle at top left, rgba(182, 72, 47, 0.16), transparent 24rem),
+    radial-gradient(circle at top left, rgba(181, 83, 47, 0.2), transparent 22rem),
-    radial-gradient(circle at top right, rgba(36, 88, 79, 0.1), transparent 28rem),
+    radial-gradient(circle at top right, rgba(31, 90, 82, 0.14), transparent 26rem),
-    linear-gradient(180deg, #f8f4ed, var(--bg));
+    linear-gradient(180deg, #f8f3ea, var(--bg));
   min-height: 100vh;
 }
 
@@ -40,9 +42,23 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
 }
 
 .site-shell {
+  position: relative;
   padding-bottom: 3rem;
 }
 
+.site-shell::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(rgba(27, 29, 28, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(27, 29, 28, 0.03) 1px, transparent 1px);
+  background-size: 36px 36px;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 70%);
+  opacity: 0.24;
+}
+
 .site-header {
   display: flex;
   justify-content: space-between;
@@ -53,6 +69,19 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
 
 .site-branding {
   max-width: 44rem;
+  position: relative;
+  padding-left: 1rem;
+}
+
+.site-branding::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.4rem;
+  bottom: 0.4rem;
+  width: 3px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, var(--accent), var(--accent-2));
 }
 
 .brand {
@@ -74,8 +103,17 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
   padding: 0.65rem 1rem;
   border: 1px solid rgba(31, 36, 33, 0.08);
   border-radius: 999px;
-  background: rgba(255, 253, 248, 0.8);
+  background: rgba(255, 251, 244, 0.8);
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(8px);
+  box-shadow: var(--shadow-soft);
+  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
+}
+
+.nav a:hover {
+  text-decoration: none;
+  transform: translateY(-1px);
+  background: rgba(255, 251, 244, 0.96);
+  border-color: rgba(31, 90, 82, 0.16);
 }
 
 .site-tagline {
@@ -88,11 +126,22 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
 }
 
 .card {
+  position: relative;
+  overflow: hidden;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 24px;
   padding: 1.4rem;
   box-shadow: var(--shadow);
+  backdrop-filter: blur(10px);
+}
+
+.card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(140deg, rgba(255, 255, 255, 0.22), transparent 40%);
 }
 
 .hero,
@@ -119,6 +168,7 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
   letter-spacing: 0.16em;
   color: var(--accent-3);
   margin-bottom: 0.45rem;
+  font-weight: 700;
 }
 
 .upload-form {
@@ -130,7 +180,7 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
 .hero-copy h1,
 .detail-hero h1 {
   font-size: clamp(2.2rem, 5vw, 3.6rem);
-  line-height: 0.95;
+  line-height: 0.92;
   letter-spacing: -0.05em;
   margin-bottom: 0.85rem;
 }
@@ -140,6 +190,12 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
   font-size: 1.05rem;
 }
 
+.hero {
+  background:
+    radial-gradient(circle at right top, rgba(31, 90, 82, 0.08), transparent 18rem),
+    linear-gradient(135deg, rgba(255, 251, 244, 0.94), rgba(247, 239, 223, 0.94));
+}
+
 .hero-actions {
   display: flex;
   gap: 0.75rem;
@@ -148,20 +204,34 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
 }
 
 .upload-panel {
-  background: linear-gradient(180deg, rgba(36, 88, 79, 0.06), rgba(182, 72, 47, 0.02));
+  background:
-  border: 1px solid rgba(36, 88, 79, 0.12);
+    linear-gradient(180deg, rgba(31, 90, 82, 0.07), rgba(181, 83, 47, 0.02)),
+    rgba(255, 251, 244, 0.72);
+  border: 1px solid rgba(31, 90, 82, 0.14);
   border-radius: 18px;
   padding: 1.2rem;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
 .stat-card {
-  background: linear-gradient(180deg, var(--panel), var(--panel-2));
+  background:
+    linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(242, 231, 209, 0.92));
+  min-height: 10.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .stat-card h2 {
   font-size: clamp(2rem, 4vw, 3rem);
   margin-bottom: 0.25rem;
   letter-spacing: -0.05em;
+  line-height: 1;
+}
+
+.stat-card p {
+  margin-bottom: 0;
+  color: var(--muted);
 }
 
 .section-head {
@@ -172,6 +242,12 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
   margin-bottom: 1rem;
 }
 
+.section-head h2 {
+  font-size: 1.5rem;
+  letter-spacing: -0.03em;
+  margin-bottom: 0;
+}
+
 .muted {
   color: var(--muted);
 }
@@ -189,6 +265,7 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
   border: 1px solid var(--line);
   font-size: 0.8rem;
   line-height: 1.2;
+  font-weight: 600;
 }
 
 .status-uploaded,
@@ -211,6 +288,15 @@ input[type="submit"] {
   font: inherit;
   cursor: pointer;
   text-decoration: none;
+  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
+  box-shadow: var(--shadow-soft);
+}
+
+button:hover,
+.button-link:hover,
+input[type="submit"]:hover {
+  transform: translateY(-1px);
+  text-decoration: none;
 }
 
 button.secondary {
@@ -244,8 +330,8 @@ dd {
 
 .detail-hero {
   background:
-    radial-gradient(circle at top right, rgba(36, 88, 79, 0.08), transparent 18rem),
+    radial-gradient(circle at top right, rgba(31, 90, 82, 0.1), transparent 18rem),
-    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(248, 242, 231, 0.98));
+    linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(242, 231, 209, 0.96));
 }
 
 .detail-hero-actions {
@@ -263,8 +349,10 @@ dd {
 .round-card {
   border: 1px solid rgba(31, 36, 33, 0.08);
   border-radius: 18px;
-  background: rgba(255, 253, 248, 0.7);
+  background:
+    linear-gradient(180deg, rgba(255, 251, 244, 0.9), rgba(250, 243, 231, 0.78));
   padding: 1rem;
+  box-shadow: var(--shadow-soft);
 }
 
 .list-card-title-row,
@@ -286,7 +374,7 @@ dd {
   border: 1px dashed var(--line);
   border-radius: 18px;
   padding: 1.25rem;
-  background: rgba(239, 231, 218, 0.5);
+  background: rgba(242, 231, 209, 0.4);
 }
 
 .highlight-card h3,
@@ -296,11 +384,19 @@ dd {
 }
 
 .highlight-score {
-  font-size: 0.82rem;
+  display: inline-flex;
-  color: var(--accent-3);
+  align-items: center;
+  justify-content: center;
+  min-width: 5rem;
+  padding: 0.38rem 0.7rem;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(181, 83, 47, 0.12), rgba(132, 103, 38, 0.12));
+  color: var(--accent);
   text-transform: uppercase;
   letter-spacing: 0.16em;
-  margin-bottom: 0.4rem;
+  margin-bottom: 0.55rem;
+  font-size: 0.78rem;
+  font-weight: 700;
 }
 
 .highlight-meta {
@@ -321,10 +417,10 @@ dd {
   gap: 0.3rem;
   padding: 0.32rem 0.7rem;
   border-radius: 999px;
-  background: rgba(36, 88, 79, 0.08);
+  background: rgba(31, 90, 82, 0.08);
   color: var(--accent-2);
   font-size: 0.84rem;
-  border: 1px solid rgba(36, 88, 79, 0.12);
+  border: 1px solid rgba(31, 90, 82, 0.12);
 }
 
 .highlight-explainer,
@@ -340,7 +436,7 @@ dd {
   align-items: start;
   gap: 1rem;
   padding: 0.65rem 0.8rem;
-  background: var(--panel-2);
+  background: linear-gradient(180deg, rgba(247, 239, 223, 0.92), rgba(242, 231, 209, 0.82));
   border-radius: 14px;
 }
 
@@ -357,7 +453,8 @@ dd {
   min-height: 10rem;
   border: 1px dashed var(--line);
   border-radius: 14px;
-  background: rgba(31, 36, 33, 0.03);
+  background:
+    linear-gradient(135deg, rgba(31, 90, 82, 0.04), rgba(181, 83, 47, 0.04));
 }
 
 .compact-list .compact-card {
@@ -376,12 +473,21 @@ dd {
   font-weight: 600;
 }
 
+.round-card {
+  min-height: 11rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
 .compact-upload {
   margin-top: 0.35rem;
 }
 
 .callout {
   border-left: 4px solid var(--accent-2);
+  background:
+    linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(246, 238, 224, 0.94));
 }
 
 .callout-success {
@@ -420,6 +526,10 @@ dd {
   .highlight-meta {
     justify-items: start;
   }
+
+  .site-shell::before {
+    opacity: 0.14;
+  }
 }
 
 @media (max-width: 640px) {