fixed h1 and nav, h1 pops up from nav but tweak little

resources/css/index.css

@@ -9,6 +9,7 @@
 
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; }
+
 body {
   background: var(--bg);
   color: var(--text);
@@ -16,10 +17,10 @@ body {
 }
 
 /* ========== Sticky Nav ========== */
-.topnav {
+.site-nav {
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: 20;
   height: var(--nav-h);
   display: flex;
   gap: 1rem;
@@ -30,29 +31,40 @@ body {
   backdrop-filter: blur(6px);
   border-bottom: 1px solid var(--ring);
 }
-.topnav a {
+.site-nav ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+.site-nav a {
   font-family: 'Iceland', sans-serif;
   text-decoration: none;
   color: #ddd;
   padding: .35rem .6rem;
   border-radius: .5rem;
 }
-.topnav a:hover, .topnav a:focus-visible {
+.site-nav a:hover,
+.site-nav a:focus-visible {
   background: rgba(255,255,255,.08);
 }
 
-/* ========== Hero Title (pop from nav) ========== */
-.hero {
+/* ========== Header + Banner ========== */
+.site-header {
   position: relative;
-  padding-top: calc(var(--nav-h) + 2.5rem); /* space for the title */
-  padding-bottom: 2.5rem;
-  text-align: center;
-  /* Optional hero background image: 
-     background: url("/resources/img/pb.png") center/cover no-repeat; */
+  margin: 0;
+  padding: 0;
+}
+.site-header img {
+  display: block;
+  width: 100%;
+  height: auto;
 }
 
-/* The title animates UP from the nav area and settles above it */
-.pop-title {
+/* ========== Title (pops from nav) ========== */
+.site-title {
   font-family: 'Iceland', sans-serif;
   font-size: clamp(2.4rem, 6vw, 6rem);
   line-height: 1;
@@ -60,70 +72,62 @@ body {
   color: var(--gold);
   text-shadow: 0 4px 12px rgba(0,0,0,.6);
 
-  /* Start as if hidden behind the nav, then pop up */
+  position: absolute;
+  left: 50%;
+  bottom: calc(var(--nav-h) * 0.15);
+  transform: translate(-50%, 0);
+
   opacity: 0;
-  transform: translateY(calc(-1 * var(--nav-h))) scale(.98);
   animation: popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards,
-             settleGlow 2400ms ease-out 900ms both;
+             underlineIn 700ms ease-out 650ms forwards;
 }
 
-/* subtle underline that grows in after the pop (classy accent) */
-.pop-title::after {
+.site-title::after {
   content: "";
   display: block;
   height: 3px;
   width: 0%;
-  margin: .6rem auto 0;
-  background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b);
+  margin: .55rem auto 0;
+  background: var(--gold);
   border-radius: 999px;
-  animation: underlineGrow 700ms ease-out 600ms forwards;
 }
 
 /* ========== Keyframes ========== */
 @keyframes popFromNav {
-  0%   { opacity: 0; transform: translateY(calc(-1 * var(--nav-h))) scale(.98); }
-  60%  { opacity: 1; transform: translateY(-8px) scale(1.02); } /* overshoot */
-  100% { opacity: 1; transform: translateY(0) scale(1); }
+  0%   { opacity: 0; transform: translate(-50%, calc(var(--nav-h) * .6)); }
+  60%  { opacity: 1; transform: translate(-50%, -8px); }
+  100% { opacity: 1; transform: translate(-50%, 0); }
 }
+@keyframes underlineIn { to { width: 56%; } }
 
-@keyframes underlineGrow {
-  to { width: 54%; }
-}
-
-/* very subtle radiance after settling (no cheesy shimmer loop) */
-@keyframes settleGlow {
-  0%   { text-shadow: 0 4px 12px rgba(0,0,0,.6); }
-  50%  { text-shadow: 0 6px 18px rgba(0,0,0,.7); }
-  100% { text-shadow: 0 4px 12px rgba(0,0,0,.6); }
-}
-
-/* ========== Content container ========== */
+/* ========== Content + Footer ========== */
 .content {
   max-width: 1000px;
   margin: 2rem auto 4rem;
   padding: 0 1rem;
 }
+.site-footer {
+  text-align: center;
+  color: #bdbdbd;
+  padding: 1.5rem 1rem 3rem;
+}
 
-/* ========== Responsive tweaks ========== */
+/* ========== Responsive Tweaks ========== */
 @media (max-width: 800px) {
   :root { --nav-h: 56px; }
-  .pop-title::after { height: 2px; }
+  .site-title::after { height: 2px; }
 }
-
 @media (max-width: 480px) {
   :root { --nav-h: 52px; }
-  .hero { padding-top: calc(var(--nav-h) + 2rem); }
-  .pop-title { font-size: clamp(2rem, 9vw, 3.2rem); }
-  .pop-title::after { width: 60%; }
+  .site-title { font-size: clamp(2rem, 9vw, 3.2rem); }
+  .site-title::after { width: 60%; }
 }
-
-/* Respect reduced motion */
 @media (prefers-reduced-motion: reduce) {
-  .pop-title,
-  .pop-title::after {
+  .site-title,
+  .site-title::after {
     animation: none !important;
     opacity: 1 !important;
-    transform: none !important;
-    width: 54%;
+    transform: translate(-50%, 0) !important;
+    width: 56%;
   }
 }