/*
* content/custom/css/site-theme.css
*
* Site-specific theme for steamlocomotives.org — heritage-railway palette
* applied via the existing site variables so every component inherits the
* new look without per-component rewrites.
*
* Loaded by lib/CustomAssets.php AFTER template/css/style.css so these
* overrides win the cascade. */
/* ============================================================
* 1. Google Fonts — Playfair Display + Inter
* ============================================================
* Roboto Mono kept alongside because it's used for the existing
* tabular-data styling further down (timetables, headcodes, spec rows). */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400&display=swap');
/* ============================================================
* LIGHT theme — overrides template/css/style.css :root
* ============================================================
* Warm off-white page background, crimson accent already in place. */
:root {
--primary-color: #8B1A1A;
--secondary-color: #C9A84C;
--background: #F7F3EE;
--background-alt: #EDE8E0;
--card-bg: #FFFFFF;
--card-hover-bg: #F7F3EE;
--header-bg: #FFFFFF;
--footer-bg: #EDE8E0;
--overlay-bg: rgba(26, 26, 26, 0.55);
--text-color: #1A1A1A;
--text-light: #4A4A4A;
--text-muted: #6B6B6B;
--border-color: #D4CEC6;
--border-strong: #B8B0A4;
--code-bg: #EDE8E0;
}
/* ============================================================
* DARK theme — overrides template/css/style.css [data-theme="dark"]
* ============================================================
* Deep navy page background, brass accent already in place. */
[data-theme="dark"] {
--primary-color: #C9A84C;
--secondary-color: #A52020;
--background: #0F1B2D;
--background-alt: #152236;
--card-bg: #1A2B42;
--card-hover-bg: #213652;
--header-bg: #0F1B2D;
--footer-bg: #152236;
--overlay-bg: rgba(0, 0, 0, 0.65);
--text-color: #F0EDE8;
--text-light: #A8A09A;
--text-muted: #7A7470;
--border-color: #2A3D55;
--border-strong: #3F5675;
--code-bg: #213652;
}
/* ============================================================
* Typography — Playfair on h1–h4, Inter on body + navigation
* ============================================================ */
html, body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Headings up to h4 use the display serif; h5/h6 inherit Inter from body. */
h1, h2, h3, h4 {
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
font-weight: 700;
line-height: 1.2;
}
/* Navigation explicitly Inter (already inherited, but pinned here to keep
intent obvious if a nav child overrides the family elsewhere). */
.site-nav,
.site-nav a,
nav[data-menu],
nav[data-menu] a {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Roboto Mono for tabular / data contexts. */
code, pre, kbd, samp,
.ct-time,
.ct-charter-headcode,
.tsl-spot-num,
.home-today-headcode,
.home-today-date,
.home-tsl-num,
.home-stat-n {
font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-feature-settings: "tnum" 1;
}
/* ============================================================
* Header texture — riveted iron plate
* ============================================================
* Each rivet is an SVG circle with two things happening:
*
* 1. A directional radial gradient INSIDE the circle.
* Gradient center is offset to the top-left of the circle
* (cx=16,cy=16 inside a rivet at 18,18) so the gradient runs
* bright→dark from top-left to bottom-right. That gives the
* embossed-dome shading without a separate highlight overlay.
*
* 2. A real Gaussian-blurred drop shadow via feGaussianBlur +
* feOffset. This produces a soft crescent of darkness on the
* bottom-right of the rivet, hugging the dome edge — i.e.
* how a real cast shadow looks, NOT another offset circle.
*
* 36px tile = comfortable spacing between rivets. The rivet itself
* uses semi-transparent fills so the underlying --header-bg colour
* shows through and the texture composites cleanly over either
* theme's background.
*
* URL-encoded characters in the data URI:
* %23 = # (SVG fragment refs to filters/gradients)
*
* Two rules — dark theme uses slightly stronger contrast so the
* rivets read against the navy bg. */
.site-header {
/* Stack, drawn top-down (first layer = top):
* 1. Diagonal sheen — bright streak running upper-left to lower-right
* 2. Vertical gloss curve — brighter top, slight darken at bottom
* 3. Top row of rivets
* 4. Bottom row of rivets
* 5. Left column of rivets
* 6. Right column of rivets */
background-image:
linear-gradient(110deg,
transparent 36%,
rgba(255, 255, 255, 0.10) 47%,
rgba(255, 255, 255, 0.03) 54%,
transparent 64%),
linear-gradient(180deg,
rgba(255, 255, 255, 0.14) 0%,
rgba(255, 255, 255, 0) 32%,
rgba(0, 0, 0, 0.04) 75%,
rgba(0, 0, 0, 0.10) 100%),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-position:
0 0,
0 0,
center -6px,
center calc(100% - 30px),
calc(50% - 162px) -6px,
calc(50% + 126px) -6px;
background-repeat:
no-repeat,
no-repeat,
repeat-x,
repeat-x,
repeat-y,
repeat-y;
background-size:
100% 100%,
100% 100%,
36px 36px,
36px 36px,
36px 36px,
36px 36px;
}
[data-theme="dark"] .site-header {
background-image:
linear-gradient(110deg,
transparent 36%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.05) 54%,
transparent 64%),
linear-gradient(180deg,
rgba(255, 255, 255, 0.10) 0%,
rgba(255, 255, 255, 0) 35%,
rgba(0, 0, 0, 0.18) 100%),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-position:
0 0,
0 0,
center -6px,
center calc(100% - 30px),
calc(50% - 162px) -6px,
calc(50% + 126px) -6px;
background-repeat:
no-repeat,
no-repeat,
repeat-x,
repeat-x,
repeat-y,
repeat-y;
background-size:
100% 100%,
100% 100%,
36px 36px,
36px 36px,
36px 36px,
36px 36px;
}
/* ============================================================
* Cards and panels — 1px solid brass gold border
* ============================================================
* Same border for both themes; the panel surface colour comes from
* --card-bg above. Comprehensive list of the site's card / panel
* classes so the treatment is uniform. */
.enc-card,
.enc-entry,
.home-today,
.home-finder,
.home-tsl-preview,
.home-today-row,
.home-tsl-preview-list a,
.home-stat-strip-wrap .home-stat-strip,
.tsl-panel,
.tsl-hero,
.tsl-spot,
.tsl-stat,
.tsl-export-card,
.tsl-dialog,
.ct-charter,
.ct-detail-head,
.ct-live-banner {
border: 1px solid #C9A84C;
}
/* Index card headings — template/css/encyclopedia.css hardcodes
.enc-card h3 { color: #2563eb } (the old blue). Override here so
the card titles pick up the theme accent: crimson in light,
brass in dark. Same applies to a handful of other places in
encyclopedia.css that ship the old blue. */
.enc-card h3,
.enc-entry-title,
.enc-quickfacts-item dd a {
color: var(--primary-color);
}
.enc-listing-mode.is-active {
background: var(--primary-color);
color: #fff;
}
.enc-listing-mode.is-active:hover {
background: var(--secondary-color);
}
.enc-related {
border-left-color: var(--primary-color);
}
/* List / list-detail view padding — template/css/encyclopedia.css
ships these modes with vertical-only padding (designed as
borderless dividers). My brass-gold border on .enc-entry makes
the text run flush against the border, so add horizontal padding
back. Cards modes already have padding: 1rem and don't need this. */
.enc-listing.is-mode-list .enc-entry { padding: 0.55rem 0.85rem; }
.enc-listing.is-mode-list-detail .enc-entry { padding: 0.85rem 1rem; }
/* L3 page bullets — template/css/style.css restores list padding for
.page-content / .entry-content / article (a global * { padding: 0 }
reset strips it), but L3 encyclopedia pages render their content
inside other wrappers (.enc-prose for inline prose, .enc-section-body
for narrative sections, .enc-related / .enc-backlinks-group for the
sidebars). Without padding-left, bullets render to the LEFT of the
text and look like they're outside the panel. Forcing
list-style-position: outside is defensive — keeps the default if
anything upstream switches it. */
.enc-prose ul, .enc-prose ol,
.enc-section-body ul, .enc-section-body ol,
.enc-related ul, .enc-related ol,
.enc-backlinks ul, .enc-backlinks ol,
.enc-backlinks-group ul, .enc-backlinks-group ol,
.enc-entry-content ul, .enc-entry-content ol {
padding-left: 1.75rem;
list-style-position: outside;
}
/* ============================================================
* Texture — subtle paper grain on the page background
* ============================================================
* Fixed-position pseudo-element across the viewport with an inline SVG
* fractal-noise pattern. opacity 0.04 keeps it barely perceptible —
* just enough to soften the flat fill. pointer-events:none so it doesn't
* intercept clicks. Same noise + opacity on both themes; the noise tile
* is mid-grey so it darkens light surfaces and lightens dark surfaces
* via the same blend, no theme-specific override needed. */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.04;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
}