Match listing heroes to site styling

README.md

@@ -92,7 +92,7 @@ through `templates/section.html`:
 | --- | --- |
 | `/projects/` | Green system-architecture and project-matrix display |
 | `/articles/` | Cyan intelligence-briefing and knowledge-system display |
-| `/blog/` | Pink transmission and live-signal display |
+| `/blog/` | Purple transmission and live-signal display |
 
 These heroes apply only to the top-level Projects, Articles, and Blog listing
 pages. Individual project pages, project devlogs, articles, and blog posts keep

assets/static/style.css

@@ -80,21 +80,21 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
   --section-node: #157995;
 }
 .section-hero--blog {
-  --section-accent: #ff2a9d;
-  --section-accent-rgb: 255, 42, 157;
-  --section-accent-soft: #d80f7e;
-  --section-alt: #7e36ff;
-  --section-bg: #050307;
+  --section-accent: var(--violet);
+  --section-accent-rgb: 140, 120, 216;
+  --section-accent-soft: #7563c4;
+  --section-alt: var(--violet);
+  --section-bg: #050407;
   --section-copy: #ded5dc;
   --section-muted: #a992a5;
-  --section-trace: #5a173e;
-  --section-trace-soft: #301126;
-  --section-node: #8b235f;
+  --section-trace: #40366d;
+  --section-trace-soft: #25213f;
+  --section-node: #6556a0;
   background:
     linear-gradient(rgba(var(--section-accent-rgb), .022) 1px, transparent 1px),
     linear-gradient(90deg, rgba(var(--section-accent-rgb), .022) 1px, transparent 1px),
     radial-gradient(circle at 78% 48%, rgba(var(--section-accent-rgb), .09), transparent 250px),
-    radial-gradient(circle at 66% 68%, rgba(126, 54, 255, .05), transparent 220px),
+    radial-gradient(circle at 66% 68%, rgba(var(--section-accent-rgb), .05), transparent 220px),
     var(--section-bg);
   background-size: 22px 22px, 22px 22px, auto, auto, auto;
 }
@@ -223,7 +223,7 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
 .section-hero h1 {
   max-width: none;
   margin: 0;
-  font: 900 clamp(2.65rem, 6vw, 4.8rem)/.82 Arial, Helvetica, sans-serif;
+  font: 700 clamp(2.65rem, 6vw, 4.8rem)/.82 var(--serif);
   font-style: normal;
   letter-spacing: .035em;
   text-transform: uppercase;
@@ -247,7 +247,7 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
   max-width: 600px;
   margin: 10px 0 0;
   color: var(--section-copy);
-  font: 1rem/1.6 Georgia, "Times New Roman", serif;
+  font: 1rem/1.6 var(--sans);
 }
 .section-hero--articles .section-hero__intro,
 .section-hero--blog .section-hero__intro { font-size: .98rem; line-height: 1.45; }
@@ -318,7 +318,7 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
 .section-hero--projects .section-hero__status-card { width: 170px; background: rgba(4, 10, 7, .8); }
 .section-hero--articles .section-hero__status-card,
 .section-hero--blog .section-hero__status-card { top: 2px; right: 2px; }
-.section-hero--blog .section-hero__status-card { background: rgba(11, 3, 8, .8); }
+.section-hero--blog .section-hero__status-card { background: rgba(8, 6, 14, .8); }
 .section-hero__widget-label {
   display: block;
   color: var(--section-accent);
@@ -1186,7 +1186,7 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
 
 @media (max-width: 760px) {
   .section-hero { width: calc(100% - 28px); margin-top: 20px; }
-  .section-hero__content { grid-template-columns: 1fr; padding: 24px 22px 20px; }
+  .section-hero .section-hero__content { grid-template-columns: 1fr; padding: 24px 22px 20px; }
   .section-hero h1 { font-size: clamp(42px, 13vw, 68px); }
   .section-hero__visual { min-height: 125px; }
   .section-hero--articles .section-hero__visual,

templates/base.html

@@ -10,7 +10,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,500;1,600&display=swap" rel="stylesheet">
   <link rel="icon" href="{{ '/static/favicon.svg'|url }}" type="image/svg+xml">
-  <link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=19">
+  <link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=20">
   <script src="{{ '/static/tags.js'|url }}?v=1" defer></script>
   <script src="{{ '/static/activity.js'|url }}?v=1" defer></script>
   <script src="{{ '/static/hero-circuit.js'|url }}?v=2" defer></script>