/*
* theme.css — Boston 2026 Philatelic Archive
* CSS custom properties: dark theme (default) and light theme.
* Both themes define the same token set; swap the data-theme attribute on .
*
* Load order: theme.css → main.css → gallery.css → modal.css
*/
/* ─────────────────────────────────────────────
Google Fonts — Playfair Display (headings) + Cormorant Garamond (body)
───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');
/* ─────────────────────────────────────────────
DARK THEME (default)
───────────────────────────────────────────── */
:root,
[data-theme="dark"] {
/* Backgrounds */
--color-bg: #0f1117;
--color-surface: #1a1d27;
--color-surface-raised: #222638;
--color-border: #2d3147;
/* Text */
--color-text: #e8e4d9;
--color-text-muted: #8b8a8e;
--color-text-inverse: #0f1117;
/* Accents */
--color-accent-gold: #c9a84c;
--color-accent-gold-light: #e8c96d;
--color-accent-gold-dim: #8a6e2a;
/* Medal colours */
--color-medal-lg: #f0c040;
--color-medal-g: #d4a020;
--color-medal-lv: #cc6644;
--color-medal-v: #b85533;
--color-medal-ls: #a0b0c0;
--color-medal-s: #8090a0;
--color-medal-lb: #a08060;
--color-medal-b: #806040;
/* Medal text contrast (always legible on pill bg) */
--color-medal-text-lg: #1a1400;
--color-medal-text-g: #1a1400;
--color-medal-text-lv: #fff0eb;
--color-medal-text-v: #fff0eb;
--color-medal-text-ls: #0d1520;
--color-medal-text-s: #0d1520;
--color-medal-text-lb: #1a1000;
--color-medal-text-b: #ede8e0;
/* Special-prize badge colours */
--color-badge-sp: #4a9edd;
--color-badge-fel: #9b59b6;
--color-badge-gp: #e74c3c;
/* UI states */
--color-focus-ring: #c9a84c;
--color-hover-overlay: rgba(201, 168, 76, 0.08);
--color-active-chip: #c9a84c;
--color-chip-text: #0f1117;
/* Shadows */
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.45);
--shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.70);
--shadow-raised: 0 4px 20px rgba(0, 0, 0, 0.55);
/* Scrollbar */
--scrollbar-track: #0f1117;
--scrollbar-thumb: #2d3147;
--scrollbar-thumb-hover: #4a4f6e;
/* Theme-color for */
--theme-meta-color: #0f1117;
}
/* ─────────────────────────────────────────────
LIGHT THEME
───────────────────────────────────────────── */
[data-theme="light"] {
/* Backgrounds — warm parchment / ivory */
--color-bg: #f4efe3;
--color-surface: #fbf8f0;
--color-surface-raised: #ffffff;
--color-border: #ddd3bd;
/* Text — charcoal / warm dark */
--color-text: #2a2a2e;
--color-text-muted: #6b6a6e;
--color-text-inverse: #fbf8f0;
/* Accents — gold darkened for contrast on light */
--color-accent-gold: #a8841f;
--color-accent-gold-light: #c9a84c;
--color-accent-gold-dim: #d4b870;
/* Medal colours — darkened for contrast on light bg */
--color-medal-lg: #b8920a;
--color-medal-g: #9a7a08;
--color-medal-lv: #b04422;
--color-medal-v: #963311;
--color-medal-ls: #506070;
--color-medal-s: #405060;
--color-medal-lb: #705030;
--color-medal-b: #503818;
/* Medal text contrast on light-theme pills */
--color-medal-text-lg: #2a1a00;
--color-medal-text-g: #2a1a00;
--color-medal-text-lv: #fff0eb;
--color-medal-text-v: #fff0eb;
--color-medal-text-ls: #ffffff;
--color-medal-text-s: #ffffff;
--color-medal-text-lb: #ffffff;
--color-medal-text-b: #ffffff;
/* Special-prize badges */
--color-badge-sp: #1a6fac;
--color-badge-fel: #7b2f9e;
--color-badge-gp: #c0392b;
/* UI states */
--color-focus-ring: #a8841f;
--color-hover-overlay: rgba(168, 132, 31, 0.08);
--color-active-chip: #a8841f;
--color-chip-text: #fbf8f0;
/* Shadows — softer on light */
--shadow-card: 0 2px 10px rgba(0, 0, 0, 0.10);
--shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.22);
--shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.14);
/* Scrollbar */
--scrollbar-track: #f4efe3;
--scrollbar-thumb: #ddd3bd;
--scrollbar-thumb-hover: #b8a890;
/* Theme-color for */
--theme-meta-color: #f4efe3;
}
/* ─────────────────────────────────────────────
SMOOTH THEME TRANSITIONS
───────────────────────────────────────────── */
*,
*::before,
*::after {
transition:
background-color 0.25s ease,
border-color 0.25s ease,
color 0.20s ease,
box-shadow 0.25s ease;
}
/* Don't transition transforms or opacity (causes animation flicker) */
img,
svg,
video {
transition: none;
}
/* ─────────────────────────────────────────────
TYPOGRAPHY SCALE
───────────────────────────────────────────── */
:root {
--font-body: 'Cormorant Garamond', 'Georgia', serif;
--font-display: 'Playfair Display', 'Georgia', serif;
--font-mono: 'Courier New', 'Courier', monospace;
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed:1.625;
/* Spacing scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
/* Border radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* Z-index layers */
--z-base: 0;
--z-card: 10;
--z-sticky: 100;
--z-overlay: 200;
--z-modal: 300;
--z-toast: 400;
}
/* ─────────────────────────────────────────────
BASE ELEMENT STYLES
───────────────────────────────────────────── */
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: var(--text-lg);
font-weight: 400;
line-height: var(--leading-relaxed);
color: var(--color-text);
background-color: var(--color-bg);
margin: 0;
padding: 0;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Headings — Playfair Display */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 600;
line-height: var(--leading-tight);
color: var(--color-text);
margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-3xl); letter-spacing: -0.01em; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }
@media (max-width: 768px) {
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
}
p {
margin: 0 0 var(--space-4);
}
/* Links */
a {
color: var(--color-accent-gold);
text-decoration: underline;
text-underline-offset: 0.15em;
text-decoration-thickness: 1px;
}
a:hover {
color: var(--color-accent-gold-light);
text-decoration-thickness: 2px;
}
a:visited {
color: var(--color-accent-gold);
}
/* Focus rings — accessible, gold-tinted */
:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) {
outline: none;
}
/* Monospace for frame numbers */
code, kbd, samp, .frame-number {
font-family: var(--font-mono);
font-size: 0.9em;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
padding: 0.1em 0.35em;
border-radius: var(--radius-sm);
}
/* Images */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Lists */
ul, ol {
padding-left: var(--space-6);
margin: 0 0 var(--space-4);
}
/* Horizontal rule */
hr {
border: none;
border-top: 1px solid var(--color-border);
margin: var(--space-8) 0;
}
/* ─────────────────────────────────────────────
CUSTOM SCROLLBARS (Webkit)
───────────────────────────────────────────── */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* ─────────────────────────────────────────────
UTILITY CLASSES
───────────────────────────────────────────── */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent-gold); }
.font-display{ font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }