/* story-viewer-magazine.css * * Magazine theme overlay for the WikiMapping Stories renderer. Applies * when the carries data-theme="magazine". Inherits chapter * structure and scroll behavior from the default theme; rewrites the * palette, typography, and card affordances to mirror the standalone * Tyler Grocery Story at html/tyler-grocery-story.html. * * Activation: stories.theme = 'magazine' in the database. Loaded by * html/story-viewer.html as a sibling stylesheet; selectors are scoped * to [data-theme="magazine"] so the default theme is unaffected. * * Selector reference (see html/js/story-viewer/render.js for source): * .story-chapter wrapper, every chapter * .story-narrative narrative + project-card + default * .story-callout data-callout chapter (big number) * .story-title-card hero (first chapter, type='title') * .story-title-chapter mid-story title chapter * .story-text-only text-only chapter (full bleed) * .story-tour tour stops * .story-media-chapter media + caption * .story-gallery-chapter image gallery * .story-card the actual card inside a chapter * .story-card-{left,right,center} * .story-card-dark, .story-card-white-text, .story-card-black-text * .story-body markdown body * .story-stat big number on a callout * .story-stat-suffix small suffix beside it * .story-policy-context disclosure for policy_context content */ [data-theme="magazine"] { --mag-bg: #0b1a2e; --mag-bg-2: #0f2340; --mag-ink: #f6f1e6; --mag-ink-mute: rgba(246, 241, 230, 0.72); --mag-card: #faf7f1; --mag-card-ink: #1a1a2e; --mag-card-body: #2a2f45; --mag-card-rule: #e8e2d4; --mag-rule: rgba(246, 241, 230, 0.14); --mag-accent: #c8e62a; --mag-accent-ink: #0b1a2e; --mag-warn: #f59e0b; --mag-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); } /* ── Page chrome ─────────────────────────────────────────────────── */ body[data-theme="magazine"] { background: var(--mag-bg); color: var(--mag-ink); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } [data-theme="magazine"] #story-topbar { background: rgba(11, 26, 46, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--mag-rule); color: var(--mag-ink); } [data-theme="magazine"] #story-topbar #story-title { color: var(--mag-ink); font-size: 13px; letter-spacing: 0.06em; font-weight: 600; } [data-theme="magazine"] #story-progress span { background: rgba(246, 241, 230, 0.18); } [data-theme="magazine"] #story-progress span.active { background: var(--mag-accent); } /* Topbar buttons (Sections / Share / Legend) */ [data-theme="magazine"] #story-topbar button, [data-theme="magazine"] #story-topbar .btn { background: rgba(246, 241, 230, 0.10); color: var(--mag-ink); border: 1px solid var(--mag-rule); font-size: 12px; letter-spacing: 0.04em; } [data-theme="magazine"] #story-topbar button:hover, [data-theme="magazine"] #story-topbar .btn:hover { background: var(--mag-accent); color: var(--mag-accent-ink); border-color: var(--mag-accent); } /* ── The card itself, default chapter types ─────────────────────── */ [data-theme="magazine"] .story-card { background: var(--mag-card); color: var(--mag-card-ink); border-radius: 14px; padding: 28px 30px 30px; box-shadow: var(--mag-shadow); max-width: min(520px, 92vw); border: 0; } /* ── Magazine affordances: pill, kicker, source note ─────────────── */ [data-theme="magazine"] .story-pill-header { margin-bottom: 14px; } [data-theme="magazine"] .story-pill { display: inline-block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--mag-accent); color: var(--mag-accent-ink); } [data-theme="magazine"] .story-pill-accent { background: var(--mag-accent); color: var(--mag-accent-ink); } [data-theme="magazine"] .story-pill-red { background: #d7191c; color: #fff; } [data-theme="magazine"] .story-pill-teal { background: #0d9488; color: #fff; } [data-theme="magazine"] .story-pill-orange { background: #f59e0b; color: var(--mag-card-ink); } [data-theme="magazine"] .story-pill-navy { background: var(--mag-bg); color: var(--mag-ink); } [data-theme="magazine"] .story-kicker { margin-top: 14px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #56607a; font-weight: 600; } /* When kicker is the only thing in pill-header (no pill above it), * keep the top margin tight. */ [data-theme="magazine"] .story-pill-header > .story-kicker:first-child { margin-top: 0; } [data-theme="magazine"] .story-source-note { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: #6b7488; font-weight: 600; } [data-theme="magazine"] .story-source-note::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mag-accent); flex: 0 0 8px; } /* In dark cards (callout default, title chapter), source note ink lightens. */ [data-theme="magazine"] .story-callout .story-card:not(.story-card-black-text) .story-source-note, [data-theme="magazine"] .story-title-card .story-source-note, [data-theme="magazine"] .story-title-chapter .story-source-note { color: var(--mag-ink-mute); } [data-theme="magazine"] .story-card h1, [data-theme="magazine"] .story-card h2, [data-theme="magazine"] .story-card h3 { color: var(--mag-card-ink); font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; } [data-theme="magazine"] .story-card h3 { font-size: 28px; } [data-theme="magazine"] .story-body, [data-theme="magazine"] .story-card .story-body { font-size: 15px; line-height: 1.6; color: var(--mag-card-body); } [data-theme="magazine"] .story-body p { margin: 0 0 12px; } [data-theme="magazine"] .story-body p:last-child { margin-bottom: 0; } /* Markdown pull quotes */ [data-theme="magazine"] .story-card blockquote, [data-theme="magazine"] .story-body blockquote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--mag-accent); background: #f4f0e3; color: var(--mag-card-ink); font-size: 15px; line-height: 1.55; font-style: italic; } /* Markdown lists — small navy bullets */ [data-theme="magazine"] .story-body ul { margin: 0 0 12px; padding-left: 18px; list-style: none; } [data-theme="magazine"] .story-body ul li { position: relative; padding: 4px 0 4px 16px; font-size: 14px; color: var(--mag-card-body); } [data-theme="magazine"] .story-body ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--mag-bg); } /* Ordered lists */ [data-theme="magazine"] .story-body ol { margin: 0 0 12px; padding-left: 22px; } [data-theme="magazine"] .story-body ol li { font-size: 14px; color: var(--mag-card-body); margin-bottom: 4px; } [data-theme="magazine"] .story-body a { color: var(--mag-bg); text-decoration: underline; text-decoration-color: var(--mag-accent); text-underline-offset: 3px; } /* ── Title chapter (hero, opens the story) ─────────────────────── */ [data-theme="magazine"] .story-title-card .story-card, [data-theme="magazine"] .story-title-chapter .story-card { background: transparent; color: var(--mag-ink); box-shadow: none; padding: 40px 20px; max-width: min(820px, 92vw); text-align: center; border-radius: 0; } [data-theme="magazine"] .story-title-card .story-card h1, [data-theme="magazine"] .story-title-card .story-card h2, [data-theme="magazine"] .story-title-card .story-card h3, [data-theme="magazine"] .story-title-chapter .story-card h1, [data-theme="magazine"] .story-title-chapter .story-card h2, [data-theme="magazine"] .story-title-chapter .story-card h3 { color: var(--mag-ink); font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.015em; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45); margin: 0 0 18px; line-height: 1.05; } [data-theme="magazine"] .story-title-card .story-card .story-body, [data-theme="magazine"] .story-title-chapter .story-card .story-body { color: var(--mag-ink-mute); font-size: 18px; max-width: 60ch; margin: 0 auto; } [data-theme="magazine"] .story-title-card .story-card .story-body p, [data-theme="magazine"] .story-title-chapter .story-card .story-body p { color: var(--mag-ink-mute); } [data-theme="magazine"] .story-title-card .story-card .story-body blockquote, [data-theme="magazine"] .story-title-chapter .story-card .story-body blockquote { background: rgba(255, 255, 255, 0.05); color: var(--mag-ink); border-left-color: var(--mag-accent); } /* ── Data callout chapter (big number) ───────────────────────────── */ [data-theme="magazine"] .story-callout .story-card { background: var(--mag-bg-2); color: var(--mag-ink); border: 1px solid var(--mag-rule); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); max-width: min(620px, 92vw); } /* Callout card with card_style='black-text': bone background, dark ink, * lime numeral preserved. Use this when the chapter's body text is more * than a few sentences — long narrative reads better on cream than on * dark. The story-card-black-text class is set by the chapter's * card_style picker in Project Edit. */ [data-theme="magazine"] .story-callout .story-card.story-card-black-text { background: var(--mag-card); color: var(--mag-card-ink); border: 0; box-shadow: var(--mag-shadow); } [data-theme="magazine"] .story-callout .story-card.story-card-black-text .story-body, [data-theme="magazine"] .story-callout .story-card.story-card-black-text .story-body p { color: var(--mag-card-body); } [data-theme="magazine"] .story-callout .story-card.story-card-black-text .story-body ul li { color: var(--mag-card-body); } [data-theme="magazine"] .story-callout .story-card.story-card-black-text .story-body ul li::before { background: var(--mag-bg); } [data-theme="magazine"] .story-callout .story-card.story-card-black-text .story-body blockquote { background: #f4f0e3; color: var(--mag-card-ink); border-left-color: var(--mag-accent); } /* Numeral stays lime regardless of card_style. */ [data-theme="magazine"] .story-callout .story-stat { color: var(--mag-accent); font-size: 88px; font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; font-feature-settings: "tnum"; margin: 0 0 6px; } [data-theme="magazine"] .story-callout .story-stat-medium { font-size: 64px; } [data-theme="magazine"] .story-callout .story-stat-small { font-size: 44px; } [data-theme="magazine"] .story-callout .story-stat-suffix { color: var(--mag-accent); font-size: 0.42em; margin-left: 6px; letter-spacing: 0; } [data-theme="magazine"] .story-callout .story-body { color: var(--mag-ink); font-size: 16px; line-height: 1.55; margin-top: 6px; } [data-theme="magazine"] .story-callout .story-body p { color: var(--mag-ink); } [data-theme="magazine"] .story-callout .story-body blockquote { background: rgba(255, 255, 255, 0.04); color: var(--mag-ink); border-left-color: var(--mag-accent); } [data-theme="magazine"] .story-callout .story-body ul li { color: var(--mag-ink); } [data-theme="magazine"] .story-callout .story-body ul li::before { background: var(--mag-accent); } /* ── Text-only chapter (full bleed) ──────────────────────────────── */ [data-theme="magazine"] .story-text-only .story-card, [data-theme="magazine"] .story-text-only { background: var(--mag-bg-2); color: var(--mag-ink); } /* ── Policy Context disclosure ───────────────────────────────────── */ [data-theme="magazine"] .story-policy-context { margin-top: 14px; border: 1px solid var(--mag-card-rule); border-radius: 8px; padding: 0; background: #f4f0e3; } [data-theme="magazine"] .story-policy-context summary { padding: 10px 14px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mag-bg); font-weight: 700; cursor: pointer; list-style: none; } [data-theme="magazine"] .story-policy-context summary::-webkit-details-marker { display: none; } [data-theme="magazine"] .story-policy-context summary i { color: var(--mag-bg); margin-right: 8px; } [data-theme="magazine"] .story-policy-context[open] summary { border-bottom: 1px solid var(--mag-card-rule); } [data-theme="magazine"] .story-policy-body { padding: 14px; font-size: 14px; line-height: 1.55; color: var(--mag-card-body); } [data-theme="magazine"] .story-policy-list { margin: 0; padding-left: 0; list-style: none; } [data-theme="magazine"] .story-policy-list li { position: relative; padding: 4px 0 4px 18px; font-size: 14px; color: var(--mag-card-body); } [data-theme="magazine"] .story-policy-list li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--mag-accent); } /* Structured opportunity / dimension blocks inside the disclosure */ [data-theme="magazine"] .story-policy-opp { border-left: 3px solid var(--mag-accent); padding: 4px 0 4px 12px; margin-bottom: 14px; } [data-theme="magazine"] .story-policy-opp:last-child { margin-bottom: 0; } [data-theme="magazine"] .story-policy-opp-title { font-weight: 700; color: var(--mag-card-ink); font-size: 14px; margin-bottom: 4px; } [data-theme="magazine"] .story-policy-opp-desc { font-size: 13.5px; line-height: 1.5; color: var(--mag-card-body); } [data-theme="magazine"] .story-policy-opp-role { margin-top: 6px; font-size: 12px; color: var(--mag-card-body); font-style: italic; } [data-theme="magazine"] .story-policy-readiness { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mag-bg); margin-bottom: 8px; } [data-theme="magazine"] .story-policy-readiness b { color: var(--mag-bg); } [data-theme="magazine"] .story-policy-summary { font-size: 13.5px; line-height: 1.55; color: var(--mag-card-body); margin: 0 0 10px; } [data-theme="magazine"] .story-policy-evidence-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--mag-bg); margin: 8px 0 4px; } [data-theme="magazine"] .story-policy-census { margin: 10px 0 0; padding: 8px 10px; background: rgba(200, 230, 42, 0.12); border-left: 2px solid var(--mag-accent); font-size: 12.5px; color: var(--mag-card-body); } /* ── Tour chapters ──────────────────────────────────────────────── */ [data-theme="magazine"] .story-tour .story-card { background: var(--mag-card); color: var(--mag-card-ink); } /* ── Story TOC (table of contents popover) ───────────────────────── */ [data-theme="magazine"] .story-toc-item { color: var(--mag-ink); background: rgba(246, 241, 230, 0.10); border: 1px solid var(--mag-rule); } [data-theme="magazine"] .story-toc-item:hover { background: var(--mag-accent); color: var(--mag-accent-ink); border-color: var(--mag-accent); } /* ── Locator minimap ─────────────────────────────────────────────── */ [data-theme="magazine"] #locator-map { border: 1px solid var(--mag-rule); border-radius: 8px; overflow: hidden; box-shadow: var(--mag-shadow); } /* ── Mobile ──────────────────────────────────────────────────────── */ @media (max-width: 720px) { [data-theme="magazine"] .story-card { max-width: 92vw; padding: 22px 22px 24px; } [data-theme="magazine"] .story-callout .story-stat { font-size: 64px; } [data-theme="magazine"] .story-title-card .story-card h1, [data-theme="magazine"] .story-title-chapter .story-card h1 { font-size: clamp(36px, 9vw, 60px); } }