94 lines
2.3 KiB
CSS
Executable File
94 lines
2.3 KiB
CSS
Executable File
/* Reset */
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; }
|
|
|
|
/* Base */
|
|
body {
|
|
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 */
|
|
.site-header {
|
|
position: relative; /* allows overlay title */
|
|
margin: 0;
|
|
padding: 0;
|
|
/* Do NOT set line-height:0 here or the H1 may vanish */
|
|
}
|
|
.site-header img {
|
|
display: block; /* removes inline image gap */
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Overlay title on the banner */
|
|
.site-title {
|
|
font-size: clamp(2rem, 4vw + 1rem, 6rem);
|
|
line-height: 1;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 10%; /* nudge higher/lower as needed */
|
|
transform: translateX(-50%);
|
|
margin: 0;
|
|
text-align: center;
|
|
z-index: 1;
|
|
|
|
/* 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);
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
-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; }
|
|
}
|
|
|
|
/* Sticky nav under header */
|
|
.site-nav {
|
|
position: sticky;
|
|
top: 0;
|
|
background: rgba(20,20,20,.75);
|
|
backdrop-filter: blur(6px);
|
|
border-top: 1px solid rgba(255,255,255,.07);
|
|
border-bottom: 1px solid rgba(255,255,255,.07);
|
|
}
|
|
.site-nav ul {
|
|
margin: 0 auto;
|
|
padding: .5rem 1rem;
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
max-width: 1000px;
|
|
}
|
|
.site-nav a {
|
|
color: #efefef;
|
|
text-decoration: none;
|
|
padding: .5rem .75rem;
|
|
border-radius: .5rem;
|
|
}
|
|
.site-nav a:hover, .site-nav a:focus-visible {
|
|
background: rgba(255,255,255,.08);
|
|
}
|
|
|
|
/* Content + footer */
|
|
.content { max-width: 1000px; margin: 2rem auto; padding: 0 1rem 3rem; }
|
|
.site-footer { text-align: center; color: #bdbdbd; padding: 1.5rem 1rem 3rem; }
|