85 lines
2.1 KiB
CSS
Executable File
85 lines
2.1 KiB
CSS
Executable File
/* Reset the default 8px body margin so the image can touch the edges */
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; }
|
|
|
|
/* Optional base text */
|
|
body {
|
|
font-family: 'Iceland';
|
|
color: #BF8915;
|
|
background: #1c1c1c;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Full-bleed banner at the very top */
|
|
.site-header {
|
|
position: relative; /* allows overlay title */
|
|
margin: 0;
|
|
padding: 0;
|
|
/* line-height: 0; /* removes stray gap under inline images */
|
|
}
|
|
.site-header img {
|
|
display: block; /* removes inline whitespace */
|
|
width: 100%; /* full width */
|
|
height: auto; /* keep aspect ratio */
|
|
}
|
|
|
|
/* Overlay title on the banner (optional; keep if you like this look) */
|
|
|
|
.site-title {
|
|
line-height: 1; /* restore readable line height */
|
|
position: absolute; /* overlay on the banner */
|
|
left: 50%;
|
|
bottom: 8%;
|
|
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;
|
|
|
|
/* 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; /* extra safety for WebKit */
|
|
}
|
|
|
|
|
|
|
|
/* Horizontal 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; }
|