From 779c77bf6679748520d9a0eb8de467fe253d5b80 Mon Sep 17 00:00:00 2001
From: petruspistor <connect+gitea@petruspistor.com>
Date: Thu, 21 Aug 2025 06:07:20 +0000
Subject: [PATCH] added dark gold animation on h1

---
 resources/css/index.css | 55 ++++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 23 deletions(-)

diff --git a/resources/css/index.css b/resources/css/index.css
index 70fa586..4dab342 100755
--- a/resources/css/index.css
+++ b/resources/css/index.css
@@ -1,44 +1,44 @@
-/* Reset the default 8px body margin so the image can touch the edges */
+/* Reset */
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; }
 
-/* Optional base text */
+/* Base */
 body {
-  font-family: 'Iceland';
-  color: #BF8915;
-  background: #1c1c1c;
+  font-family: 'Iceland', sans-serif;
+  color: #BF8915;           /* dark yellowish gold text color for body */
+  background: #1c1c1c;      /* slate/charcoal background */
   line-height: 1.5;
 }
 
-/* Full-bleed banner at the very top */
+/* Full-bleed banner */
 .site-header {
-  position: relative;   /* allows overlay title */
+  position: relative;  /* allows overlay title */
   margin: 0;
   padding: 0;
-/*  line-height: 0;       /* removes stray gap under inline images */
+  /* Do NOT set line-height:0 here or the H1 may vanish */
 }
 .site-header img {
-  display: block;       /* removes inline whitespace */
-  width: 100%;          /* full width */
-  height: auto;         /* keep aspect ratio */
+  display: block;      /* removes inline image gap */
+  width: 100%;
+  height: auto;
 }
 
-/* Overlay title on the banner (optional; keep if you like this look) */
-
+/* Overlay title on the banner */
 .site-title {
-  line-height: 1;                /* restore readable line height */
-  position: absolute;            /* overlay on the banner */
+  font-size: clamp(2rem, 4vw + 1rem, 6rem);
+  line-height: 1;
+  position: absolute;
   left: 50%;
-  bottom: 8%;
+  bottom: 10%;                     /* nudge higher/lower as needed */
   transform: translateX(-50%);
   margin: 0;
   text-align: center;
   z-index: 1;
 
-  /* animations */
-  opacity: 1;
-  animation: fadeSlideIn 2s ease-out forwards, goldShine 4s ease-in-out infinite;
-  animation-delay: 0s, 2s;
+  /* start hidden; animate in and stay */
+  opacity: 0;
+  animation: fadeSlideIn 1.2s ease-out forwards, goldShine 4s ease-in-out infinite;
+  animation-delay: 0s, 1.2s;
 
   /* gold shine */
   background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b);
@@ -46,12 +46,21 @@ body {
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
-  -webkit-text-fill-color: transparent; /* extra safety for WebKit */
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 1px 2px rgba(0,0,0,.35); /* subtle contrast on light banner zones */
 }
 
+/* Keyframes */
+@keyframes fadeSlideIn {
+  0%   { opacity: 0; transform: translate(-50%, -16px); }
+  100% { opacity: 1; transform: translate(-50%, 0); }
+}
+@keyframes goldShine {
+  0%   { background-position: 200% center; }
+  100% { background-position: -200% center; }
+}
 
-
-/* Horizontal nav under header */
+/* Sticky nav under header */
 .site-nav {
   position: sticky;
   top: 0;