/* ===== Base / Theme ===== */
:root {
--bg: #0f0f12;
--fg: #f5f5f7;
--muted: #b7b7c2;
--accent: #ffd34d;
--card: #17171c;
--line: #2a2a31;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
margin: 0;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--fg);
line-height: 1.6;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.section { padding: 48px 0; scroll-margin-top: 84px; }
.section h2 { margin: 0 0 12px; }
/* ===== Header / Nav ===== */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(15,15,18,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { color: var(--fg); text-decoration: none; font-weight: 800; letter-spacing: .5px; }
.links a { color: var(--accent); text-decoration: none; margin-left: 18px; }
.links a:hover { text-decoration: underline; }
.hero-title {
font-size: clamp(3rem, 6vw, 4rem); /* slightly bigger than other titles */
margin-bottom: 0.5rem;
text-align: center;
}
.hero-subtitle {
font-size: clamp(1.8rem, 3vw, 2.4rem); /* smaller than hero-title */
font-weight: 400;
text-align: center;
}
/* ===== Buttons / Helpers ===== */
.btn { display: inline-block; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: #111; font-weight: 700; text-decoration: none; }
.btn.outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.section-sub { color: var(--muted); margin-top: -6px; }
/* ===== Hero (OSRS) ===== */
.hero { position: relative; min-height: 100vh; overflow: hidden; }
.hero-osrs .hero-bg {
position: absolute; inset: 0;
background: center/cover no-repeat var(--bg);
background-image: var(--hero);
filter: saturate(1.05) contrast(1.05);
}
.hero-inner { position: relative; z-index: 3; padding-top: -5vh; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.hero-gradient { position: absolute; inset: auto 0 0; height: 36vh; z-index: 2;
background: linear-gradient(to bottom, rgba(15,15,18,0) 0%, rgba(15,15,18,.98) 100%);
}
.hero-title {
font-size: clamp(3rem, 6vw, 4rem); /* slightly bigger than other titles */
margin-bottom: 0.5rem;
text-align: center;
}
.hero-subtitle {
font-size: clamp(1.8rem, 3vw, 2.4rem); /* smaller than hero-title */
font-weight: 400;
text-align: center;
}
/* Pixel-art crispness */
.sprite, .sprite img { image-rendering: pixelated; image-rendering: crisp-edges; }
/* ===== Gold medieval title ===== */
.gold-title {
font-family: Cinzel, serif;
font-weight: 800;
letter-spacing: 2px;
font-size: clamp(1.6rem, 3.2vw, 2.2rem);
background: linear-gradient(#ffe38a, #d6a72b 55%, #8f6b15);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.hero-title {
font-size: clamp(3rem, 6vw, 4rem); /* slightly bigger than other titles */
margin-bottom: 0.5rem;
text-align: center;
}
.hero-subtitle {
font-size: clamp(1.8rem, 3vw, 2.4rem); /* smaller than hero-title */
font-weight: 400;
text-align: center;
}
/* ===== Thumbnails ===== */
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.thumb { display: grid; grid-template-rows: auto auto; gap: 8px; text-decoration: none; color: var(--fg); }
.thumb img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #000; }
.thumb span { font-weight: 600; }
/* ===== About Cards ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.card h3 { margin: 6px 0; font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); }
.pfp { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; border: 1px solid var(--line); background: #000; }
/* ===== Social Links ===== */
MY LINKS
/* --- Social links: force brand colors & remove default link styling --- */
#links .socials { display: flex; gap: 14px; flex-wrap: wrap; }
#links .socials .social {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid transparent;
font-weight: 600;
text-decoration: none !important;
color: #fff !important; /* makes the SVGs white via currentColor */
}
#links .socials .social svg { display: block; }
#links .socials .social path { fill: currentColor; }
/* Brand backgrounds */
#links .socials .social.youtube { background: #FF0000; border-color: #FF0000; }
#links .socials .social.twitch { background: #9146FF; border-color: #9146FF; }
#links .socials .social.x { background: #000000; border-color: #000000; }
#links .socials .social:hover { filter: brightness(1.08); }
/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--line); padding: 18px 0; color: var(--muted); text-align: center; }
/* ===== Responsive tweaks ===== */
@media (max-width: 900px){
.hero-inner { padding-top: 18vh; }
.char { width: min(48vw, 520px); left: 8%; bottom: 8%; }
.goblin{ width: min(30vw, 320px); right: 6%; bottom: 10%; }
.h1 { left: 27%; bottom: 46%; }
.h2 { left: 33%; bottom: 46%; }
}
@media (max-width: 600px){
.links a { margin-left: 12px; }
.hero-inner { padding-top: 16vh; }
.char { width: min(58vw, 520px); left: 4%; bottom: 6%; }
.goblin{ width: min(34vw, 320px); right: 2%; bottom: 8%; }
.h1 { left: 29%; bottom: 47%; }
.h2 { left: 36%; bottom: 47%; }
}
.thumb-placeholder {
width: 100%;
height: 160px;
border-radius: 10px;
border: 1px solid var(--line);
background: #0b0b0e;
}