1 files changed, 149 insertions, 41 deletions

diff --git a/dwalker.xyz/wwwroot/css/site.css b/dwalker.xyz/wwwroot/css/site.css
index 93b6fd5..8885449 100644
--- a/dwalker.xyz/wwwroot/css/site.css
+++ b/dwalker.xyz/wwwroot/css/site.css
@@ -1,12 +1,12 @@
 :root {
-  color-scheme: light;
-  --bg: #f4f1ea;
-  --bg-accent: #e8dfd1;
-  --surface: rgba(255, 255, 255, 0.72);
-  --surface-border: rgba(34, 34, 34, 0.08);
-  --text: #171513;
-  --muted: #61584d;
-  --accent: #0e776d;
+  color-scheme: dark;
+  --bg: #101010;
+  --panel: #151515;
+  --text: #f3f3f3;
+  --muted: #c9c9c9;
+  --accent: #f0f0f0;
+  --link: #9fcfff;
+  --link-hover: #d5e8ff;
 }
 
 * {
@@ -20,65 +20,173 @@ html {
 body {
   margin: 0;
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
   color: var(--text);
-  background:
-    radial-gradient(circle at top left, rgba(14, 119, 109, 0.18), transparent 32%),
-    radial-gradient(circle at bottom right, rgba(184, 129, 74, 0.18), transparent 28%),
-    linear-gradient(180deg, var(--bg) 0%, #fbfaf7 100%);
-  font-family: "Space Grotesk", "Segoe UI", sans-serif;
+  background: var(--bg);
+  font-family: Verdana, Tahoma, "Trebuchet MS", sans-serif;
 }
 
 a {
-  color: inherit;
+  color: var(--link);
+}
+
+a:hover,
+a:focus-visible {
+  color: var(--link-hover);
 }
 
 .app-shell {
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  padding: 2rem;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  padding: 1.25rem 1.5rem;
+}
+
+.site-footer {
+  padding: 0 1.5rem 1.5rem;
+}
+
+.site-footer p {
+  margin: 0 auto;
+  width: min(100%, 72rem);
+  padding-top: 0.85rem;
+  border-top: 1px solid #2f2f2f;
+  color: var(--muted);
+  font-size: 0.95rem;
+  text-align: center;
 }
 
 .hero {
-  width: min(100%, 48rem);
-  padding: clamp(2rem, 5vw, 4rem);
-  border: 1px solid var(--surface-border);
-  border-radius: 2rem;
-  background: var(--surface);
-  backdrop-filter: blur(18px);
-  box-shadow: 0 30px 80px rgba(34, 21, 9, 0.08);
+  width: min(100%, 72rem);
+  margin: auto 0;
+  padding: 0.85rem 1rem;
+  background: transparent;
+}
+
+.hero-header {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
 }
 
-.eyebrow {
-  margin: 0 0 1rem;
+.site-badge {
+  display: inline-block;
+  width: min(8rem, 30vw);
+  height: auto;
+}
+
+.hero h1 {
+  margin: 0;
   color: var(--accent);
-  font-size: 0.9rem;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: clamp(2.2rem, 7vw, 4rem);
+  line-height: 1.05;
+  letter-spacing: 0.01em;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
+}
+
+.hero h3 {
+  margin: 0.45rem 0 0;
+  color: var(--muted);
+  font-size: clamp(1rem, 2.4vw, 1.3rem);
+  font-weight: 700;
+}
+
+.hero p {
+  margin: 0.8rem 0 0;
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1.55;
+  max-width: 62rem;
+}
+
+.hero a {
   font-weight: 700;
-  letter-spacing: 0.12em;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.16em;
+}
+
+.hero b {
+  color: var(--text);
+}
+
+.hero hr {
+  margin: 0.9rem 0;
+  border: 0;
+  border-top: 1px solid #2f2f2f;
+}
+
+.link-groups {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.link-group {
+  padding: 0;
+}
+
+.link-group h4 {
+  margin: 0 0 0.5rem;
+  color: var(--text);
+  font-size: 1rem;
+  text-align: center;
   text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
-.hero h1 {
+.link-group ul {
   margin: 0;
-  font-size: clamp(3rem, 8vw, 5.75rem);
-  line-height: 0.95;
-  letter-spacing: -0.05em;
+  padding-left: 1.25rem;
 }
 
-.lede {
-  max-width: 34rem;
-  margin: 1.5rem 0 0;
-  color: var(--muted);
-  font-size: clamp(1rem, 2vw, 1.15rem);
-  line-height: 1.7;
+.link-group li + li {
+  margin-top: 0.3rem;
+}
+
+@media (min-width: 900px) {
+  .hero {
+    padding: 1rem 1.2rem 1.1rem;
+  }
+
+  .hero-header {
+    gap: 1.2rem;
+  }
+
+  .link-groups {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: start;
+  }
+
+  .link-group:last-child {
+    grid-column: 1 / -1;
+  }
+
+  .link-group:last-child ul {
+    columns: 2;
+    column-gap: 2rem;
+  }
+
+  .link-group:last-child li {
+    break-inside: avoid;
+  }
 }
 
 @media (max-width: 640px) {
   .app-shell {
-    padding: 1rem;
+    padding: 0.9rem 1rem;
+  }
+
+  .site-footer {
+    padding: 0 1rem 1rem;
   }
 
   .hero {
-    border-radius: 1.5rem;
+    margin: 0;
+  }
+
+  .hero-header {
+    flex-direction: column;
+    align-items: flex-start;
   }
 }