added dark gold animation on h1

This commit is contained in:
2025-08-21 06:07:20 +00:00
parent c482a91015
commit 779c77bf66

View File

@@ -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 */
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;