/* ============ Per-campaign theme overrides ============ Each blog page's carries one of these classes. Since every component in style.css is built from the --bg / --purple / --gold / --blue-accent tokens, redefining them here re-themes the whole page without touching a single component rule. */ body.theme-strahd { --bg: #0a0505; --bg-panel: #170a0d; --bg-panel-2: #200e12; --purple: #b3273e; --purple-deep: #7a1626; --blue-accent: #8a97a8; --gold: #c9a227; --text: #f2e9e9; --text-muted: #b99a9a; } body.theme-ravenloft { --bg: #060b0c; --bg-panel: #0d1a1c; --bg-panel-2: #12262a; --purple: #2f6f6a; --purple-deep: #1c4744; --blue-accent: #5fb3c7; --gold: #e0a83f; --text: #eef7f6; --text-muted: #9db3b0; } body.theme-crooked-moon { --bg: #07070f; --bg-panel: #10101f; --bg-panel-2: #171728; --purple: #4a3f8f; --purple-deep: #2e2760; --blue-accent: #4fd1c5; --gold: #e8a13a; --text: #f1efe0; --text-muted: #b7ae8f; } body.theme-witchlight { --bg: #140a24; --bg-panel: #1f1036; --bg-panel-2: #29143f; --purple: #b45cf0; --purple-deep: #7c2fb0; --blue-accent: #5fe3e0; --gold: #ffcf6b; --text: #fbf3ff; --text-muted: #cba9db; } body.theme-flying-city { --bg: #06121c; --bg-panel: #0b1e2c; --bg-panel-2: #10293b; --purple: #3f7fae; --purple-deep: #285a80; --blue-accent: #7fd8e8; --gold: #d9b46a; --text: #eaf6fb; --text-muted: #9fc0cf; } /* ============ Back link ============ */ .back-link { display: inline-flex; align-items: center; gap: 0.4em; max-width: 1200px; margin: 1.6em auto 0; padding: 0 1.5em; color: var(--text-muted); font-weight: 700; font-size: 0.9rem; } .back-link:hover { color: var(--text); } .back-link .icon { width: 1em; height: 1em; } /* ============ Article hero ============ */ .article-hero { position: relative; max-width: 1200px; margin: 1.2em auto 0; padding: 0 1.5em; } .article-hero-frame { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); } .article-hero-img { width: 100%; height: auto; display: block; } /* Title sits below the artwork now — the banner art already carries its own logo/title treatment, and overlaying text on top of it duplicated and obscured that art. */ .article-hero-text { max-width: 760px; margin: 1.6em auto 0; padding: 0 1.5em; } .article-hero-text .eyebrow { margin-bottom: 0.3em; } .article-hero-text h1 { color: var(--text); font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 0.4em; } .article-hook { color: var(--text-muted); font-size: 1.05rem; max-width: 60ch; margin: 0; } /* ============ Article body ============ */ .article-body { max-width: 760px; margin: 0 auto; padding: 3em 1.5em 1em; } .article-body h2 { font-size: 1.5rem; margin-top: 1.8em; color: var(--gold); } .article-body p { color: var(--text); font-size: 1.05rem; } .article-body p.lede { font-size: 1.15rem; color: var(--text); } .article-section-icon { display: inline-flex; align-items: center; gap: 0.4em; color: var(--purple); } .article-section-icon .icon { color: var(--purple); } .article-schedule { max-width: 760px; margin: 1em auto 0; padding: 0 1.5em; } .article-schedule .session-list { margin-top: 1em; } /* ============ Payment section ============ */ .blog-payment { max-width: 760px; margin: 3em auto 0; padding: 2.2em 2em; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; } .blog-payment h2 { margin-top: 0; } .blog-payment-price { font-size: 1.3rem; font-weight: 800; color: var(--gold); display: flex; align-items: center; justify-content: center; gap: 0.4em; margin-bottom: 1.2em; } .blog-payment-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; } .article-body + .blog-payment, .article-schedule + .blog-payment { margin-top: 3em; } .blog-footer-space { height: 1px; } @media (max-width: 640px) { .article-hero-overlay { padding: 1.4em; } }