/* ==========================================================================
THEME VARIABLES — BORDER CONTROL
Edit these to reskin the entire site.
========================================================================== */
:root {
/* ------------------------------------------------------------------
COLOR PALETTE - change these values to re-theme the entire site
Each line below sets one color that's reused across every page.
Change a value here (the #code) and it updates everywhere that
color is used, site-wide, with no need to edit any HTML file.
------------------------------------------------------------------ */
/* background color behind all page content */
--color-bg: #121110;
/* a slightly lighter background, used behind the nav bar, the page title area, and the footer */
--color-bg-alt: #1a1714;
/* background color for cards and boxed content, like the image frame */
--color-panel: #2b2622;
/* background color a card/box switches to when your mouse hovers over it */
--color-panel-hover: #35302a;
/* color of the thin lines/borders around cards, boxes, and dividers */
--color-border: #423731;
/* main rust-brown color, used for headings, links, and borders */
--color-rust: #8a4b32;
/* a darker version of the rust color, used for subtle outlines */
--color-rust-dim: #5e3524;
/* accent color used sparingly for highlights, active nav tab, hover states */
--color-accent: #e8c547;
/* main color for regular paragraph text */
--color-text: #d8d2c9;
/* dimmer text color, used for descriptions and less important text */
--color-text-muted: #8f887d;
/* ------------------------------------------------------------------
FONTS - change these to swap the site's typefaces
--font-heading is used for page titles and section headings.
--font-nav is used for the top nav bar links and the site logo text.
--font-body is used for regular paragraph text everywhere else.
To use a different font: find one at https://fonts.google.com,
put its name here (keeping the quote marks), and also update the
matching tag near the top of the in every HTML file,
so the browser knows to download that font.
------------------------------------------------------------------ */
--font-heading: 'DotGothic16', monospace;
--font-nav: 'Jersey 10', monospace;
--font-body: 'VT323', 'Courier New', monospace;
--font-size-base: 20px;
--line-height-base: 1.5;
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 4rem;
/* Layout */
--content-max-width: 1100px;
--radius: 2px;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
/* Nav */
--nav-height: 68px;
}
/* ==========================================================================
RESET & BASE
========================================================================== */
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
img {
max-width: 100%;
display: block;
}
a {
color: var(--color-rust);
text-decoration: none;
}
a:hover {
color: var(--color-accent);
text-decoration: underline;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
color: var(--color-rust);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.6;
margin-top: 0;
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 0.85rem; }
p {
margin-top: 0;
color: var(--color-text);
}
.container {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--space-md);
}
/* ==========================================================================
NAVIGATION
========================================================================== */
.site-nav {
background-color: var(--color-bg-alt);
border-bottom: 2px solid var(--color-rust);
position: sticky;
top: 0;
z-index: 100;
}
.nav-inner {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--space-md);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: var(--space-sm);
min-height: var(--nav-height);
}
.nav-brand {
font-family: var(--font-nav);
font-size: 1.3rem;
color: var(--color-rust);
letter-spacing: 0.04em;
white-space: nowrap;
justify-self: start;
}
.nav-brand:hover {
color: var(--color-accent);
text-decoration: none;
}
/* Invisible mirror of .nav-brand — keeps the two outer grid columns the
same width as the logo so the nav column lands on true center, no
matter how long the brand text is. Keep its text in sync with .nav-brand. */
.nav-spacer {
font-family: var(--font-nav);
font-size: 1.3rem;
letter-spacing: 0.04em;
white-space: nowrap;
visibility: hidden;
justify-self: end;
}
.nav-links {
list-style: none;
display: flex;
flex-wrap: nowrap;
justify-self: center;
gap: var(--space-xs);
margin: 0;
padding: 0;
}
.nav-links li {
margin: 0;
}
.nav-links a {
display: inline-block;
font-family: var(--font-nav);
font-size: 1.15rem;
padding: 0.65rem 0.8rem;
border-radius: var(--radius);
color: var(--color-text-muted);
letter-spacing: 0.02em;
white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover {
background-color: var(--color-panel-hover);
color: var(--color-text);
text-decoration: none;
}
.nav-links a.active {
background-color: var(--color-accent);
color: var(--color-bg);
}
/* ==========================================================================
PAGE HEADER
========================================================================== */
.page-header {
padding: var(--space-xl) 0 var(--space-lg);
text-align: center;
border-bottom: 1px solid var(--color-border);
background: linear-gradient(var(--color-bg-alt), var(--color-bg));
}
.page-header .subtitle {
color: var(--color-text-muted);
font-size: 1.1rem;
max-width: 640px;
margin: var(--space-sm) auto 0;
}
/* ==========================================================================
MAIN CONTENT
========================================================================== */
main {
padding: var(--space-lg) 0 var(--space-xl);
}
.section-intro {
color: var(--color-text-muted);
max-width: 720px;
margin-bottom: var(--space-lg);
}
/* ==========================================================================
CARD COMPONENT
Copy one .card block, change the href, image src, title, and text.
The whole card is a link (), not just the title.
========================================================================== */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-md);
}
.card {
background-color: var(--color-panel);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
transition: transform 0.15s ease, border-color 0.15s ease;
}
.card:hover {
transform: translateY(-3px);
border-color: var(--color-accent);
color: inherit;
text-decoration: none;
}
.card-image {
width: 100%;
height: 180px;
object-fit: cover;
background-color: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
}
.card-body {
padding: var(--space-sm);
flex: 1;
display: flex;
flex-direction: column;
}
.card-title {
font-size: 0.85rem;
margin-bottom: var(--space-xs);
color: var(--color-rust);
}
.card-tag {
display: inline-block;
align-self: flex-start;
font-family: var(--font-heading);
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-rust);
border: 1px solid var(--color-rust-dim);
border-radius: var(--radius);
padding: 0.3rem 0.6rem;
margin-bottom: var(--space-xs);
}
.card-description {
color: var(--color-text-muted);
font-size: 1.05rem;
margin: 0;
}
/* ==========================================================================
LONG-FORM CONTENT
Used on section pages (Historical Events, Nations, NPCs, Factions, Locations).
Plain heading + paragraph HTML the site owner writes by hand.
========================================================================== */
.content-column {
max-width: 700px;
margin: 0 auto;
}
.content-column h2 {
margin-top: var(--space-lg);
}
.content-column h2:first-child {
margin-top: 0;
}
.content-column h3 {
margin-top: var(--space-md);
}
.content-column p {
margin-bottom: var(--space-sm);
}
.content-column hr {
border: none;
border-top: 1px solid var(--color-border);
margin: var(--space-lg) 0;
}
.content-image {
display: block;
max-width: 480px;
width: 100%;
margin: var(--space-md) auto;
padding: var(--space-xs);
background-color: var(--color-panel);
border: 1px solid var(--color-border);
}
/* ==========================================================================
TIMELINE / CHRONOLOGY COMPONENT
Copy one .timeline-item block, change the date, title, and text.
========================================================================== */
.timeline {
position: relative;
max-width: 760px;
margin: 0 auto;
padding-left: var(--space-lg);
}
.timeline::before {
content: '';
position: absolute;
left: 8px;
top: 6px;
bottom: 6px;
width: 2px;
background-color: var(--color-rust);
}
.timeline-item {
position: relative;
padding-bottom: var(--space-lg);
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-marker {
position: absolute;
left: calc(-1 * var(--space-lg) + 3px);
top: 6px;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: var(--color-accent);
border: 2px solid var(--color-bg);
box-shadow: 0 0 0 2px var(--color-rust-dim);
}
.timeline-date {
display: inline-block;
font-family: var(--font-heading);
color: var(--color-rust);
font-size: 0.7rem;
letter-spacing: 0.03em;
margin-bottom: var(--space-xs);
}
.timeline-content {
background-color: var(--color-panel);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-sm) var(--space-md);
}
.timeline-content h3 {
margin-bottom: var(--space-xs);
}
.timeline-content p {
color: var(--color-text-muted);
margin: 0;
font-size: 1.05rem;
}
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer {
border-top: 2px solid var(--color-rust);
background-color: var(--color-bg-alt);
padding: var(--space-md) 0;
text-align: center;
color: var(--color-text-muted);
font-size: 0.9rem;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 640px) {
h1 { font-size: 1.3rem; }
h2 { font-size: 1rem; }
.nav-inner {
grid-template-columns: 1fr;
justify-items: center;
row-gap: var(--space-xs);
padding-top: var(--space-sm);
padding-bottom: var(--space-sm);
text-align: center;
}
.nav-brand {
justify-self: center;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
justify-self: center;
}
.nav-spacer {
display: none;
}
.page-header {
padding: var(--space-lg) 0 var(--space-md);
}
.timeline {
padding-left: var(--space-md);
}
.timeline-marker {
left: calc(-1 * var(--space-md) + 3px);
}
}