/* ========================================================= FUNDS ON FIRE — article-light.css Light "reading mode" theme for individual blog post pages. Applied via . Nav and footer stay on the dark midnight palette; only the article surface flips to warm paper for long-form reading. Ember stays as the accent. ========================================================= */ /* Page surface — warm paper, not pure white */ body.article-light { background: var(--paper); color: var(--ink); } /* Soften the grain overlay so it doesn't muddy the paper */ body.article-light::before { opacity: 0.018; mix-blend-mode: multiply; } /* Selection — ember on paper still pops */ body.article-light ::selection { background: var(--ember); color: var(--paper); } /* Keep nav + footer on midnight so the article feels like a card floating between two dark bands (intentional editorial framing). */ body.article-light .nav { background: var(--midnight); border-bottom: 1px solid var(--midnight-3); } body.article-light .footer { background: var(--ink); color: var(--bone); } /* ========================================================= BREADCRUMB ========================================================= */ body.article-light .breadcrumb { color: var(--muted); } body.article-light .breadcrumb a { color: var(--muted); } body.article-light .breadcrumb a:hover { color: var(--ink); } body.article-light .breadcrumb .sep { color: rgba(14,24,40,0.18); } /* ========================================================= ARTICLE HEAD (meta, h1, deck, author) ========================================================= */ body.article-light .article-head { border-bottom: 1px solid rgba(14,24,40,0.10); } body.article-light .article-meta { color: var(--muted); } body.article-light .article-meta > span:not(.cat):not(.dot) { color: var(--muted); } body.article-light .article-meta .dot { background: var(--muted); } body.article-light .article-meta .cat { color: var(--ember); } body.article-light .article h1 { color: var(--ink); } body.article-light .article-deck { color: rgba(14,24,40,0.72); } body.article-light .article-author { border-top: 1px dashed rgba(14,24,40,0.14); } body.article-light .article-author img { background: var(--bone-2); border: 1px solid var(--ember); } body.article-light .article-author-name { color: var(--ink); } body.article-light .article-author-role { color: var(--muted); } /* ========================================================= AUDIO PLAYER SLOT (Buzzsprout embed at top of article) ========================================================= */ body.article-light .audio-player-slot { margin: var(--s-6) 0 var(--s-8) 0; padding: 0.9em 1.1em 0.6em 1.1em; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(242,107,31,0.06), rgba(242,107,31,0.02)); border: 1px solid rgba(242,107,31,0.22); position: relative; } body.article-light .audio-player-slot::before { content: 'Listen to this episode'; display: block; font-family: var(--f-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember); margin-bottom: 0.5em; } body.article-light .audio-player-slot iframe { display: block; width: 100%; border: 0; } /* Buzzsprout's injected player adapts to the container width */ body.article-light .audio-player-slot[data-buzzsprout-id]:empty { min-height: 56px; } /* Fallback message when no episode_id is set yet */ body.article-light .audio-player-slot:not([data-buzzsprout-id])::after, body.article-light .audio-player-slot[data-buzzsprout-id=""]::after { content: 'Audio coming soon — full episode publishes on Buzzsprout, Apple, Spotify, and YouTube.'; display: block; font-size: 0.92rem; color: var(--muted); font-style: italic; } /* "Or jump to your platform" — Apple / Spotify / YouTube links injected by audio-player.js below the Buzzsprout embed. */ body.article-light .audio-player-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin-top: 0.9em; padding-top: 0.7em; border-top: 1px dashed rgba(242,107,31,0.22); } body.article-light .audio-player-or { font-family: var(--f-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); margin-right: 0.2em; } body.article-light .audio-player-platform { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(14,24,40,0.04); border: 1px solid rgba(14,24,40,0.12); color: var(--ink); font-family: var(--f-headline); font-weight: 600; font-size: 0.85rem; line-height: 1; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } body.article-light .audio-player-platform:hover { background: rgba(242,107,31,0.10); border-color: rgba(242,107,31,0.45); color: var(--ember); transform: translateY(-1px); } body.article-light .audio-player-platform svg { width: 14px; height: 14px; flex-shrink: 0; } /* ========================================================= HERO IMAGE ========================================================= */ body.article-light .article-hero-img { background: var(--bone-2); border-block: 1px solid rgba(14,24,40,0.10); } body.article-light .article-hero-img::after { background: linear-gradient(180deg, transparent 60%, rgba(14,24,40,0.18) 100%); } body.article-light .article-hero-img figcaption { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.92)); color: var(--ink); } /* Inline figures */ body.article-light .article-body figure { border: 1px solid rgba(14,24,40,0.10); background: var(--bone-2); } body.article-light .article-body figure figcaption { background: rgba(255,255,255,0.7); border-top: 1px solid rgba(14,24,40,0.08); color: var(--muted); } /* ========================================================= ARTICLE BODY TYPOGRAPHY ========================================================= */ body.article-light .article-body { color: rgba(14,24,40,0.88); font-size: 1.08rem; line-height: 1.78; max-width: 65ch; } body.article-light .article-body p strong, body.article-light .article-body strong { color: var(--ink); } body.article-light .article-body em { color: var(--ink); } body.article-light .article-body a { color: var(--rust); border-bottom: 1px solid rgba(181,58,20,0.35); } body.article-light .article-body a:hover { color: var(--ember); border-color: var(--ember); } body.article-light .article-body h2 { color: var(--ink); } body.article-light .article-body h3 { color: var(--ink); } body.article-light .article-body li::marker { color: var(--ember); } /* Pull-quote */ body.article-light .article-body .pullquote { border-block: 1px solid rgba(14,24,40,0.14); color: var(--ink); } body.article-light .article-body .pullquote::before { color: var(--ember); } /* Blockquote */ body.article-light .article-body blockquote { border-left: 3px solid var(--ember); background: rgba(242,107,31,0.06); color: var(--ink); } body.article-light .article-body blockquote cite { color: var(--muted); } /* Tables */ body.article-light .article-body table { border: 1px solid rgba(14,24,40,0.12); background: var(--paper); } body.article-light .article-body th, body.article-light .article-body td { border-bottom: 1px solid rgba(14,24,40,0.10); color: var(--ink); } body.article-light .article-body th { background: rgba(43,95,184,0.08); color: var(--ink); } body.article-light .article-body tr:hover td { background: rgba(14,24,40,0.025); } /* ========================================================= TL;DR + Answer Capsule ========================================================= */ body.article-light .article-body .tldr { background: linear-gradient(180deg, rgba(242,107,31,0.10), rgba(242,107,31,0.03)); border: 1px solid rgba(242,107,31,0.30); color: var(--ink); } body.article-light .article-body .tldr::before { color: var(--ember); } body.article-light .article-body .answer-capsule { background: rgba(43,95,184,0.07); border-left: 3px solid var(--capital); color: var(--ink); } /* ========================================================= STAT CALLOUT ========================================================= */ body.article-light .article-body .stat-callout { background: linear-gradient(180deg, var(--bone-2), var(--paper)); border: 1px solid rgba(14,24,40,0.12); } body.article-light .article-body .stat-callout .lbl { color: var(--muted); } /* .num keeps its ember gradient — already legible on paper */ /* ========================================================= LISTEN CARD (bottom-of-post listen-on bar) ========================================================= */ body.article-light .article-body .listen-card { background: radial-gradient(circle at top right, rgba(43,95,184,0.10), transparent 60%), linear-gradient(180deg, var(--bone-2), var(--paper)); border: 1px solid rgba(14,24,40,0.12); } body.article-light .article-body .listen-card h3 { color: var(--ink); } body.article-light .article-body .listen-card p { color: rgba(14,24,40,0.72); } body.article-light .article-body .listen-card .listen-on { background: rgba(14,24,40,0.04); border: 1px solid rgba(14,24,40,0.12); color: var(--ink); } body.article-light .article-body .listen-card .listen-on:hover { background: rgba(14,24,40,0.08); border-color: rgba(14,24,40,0.22); } /* ========================================================= ARTICLE CTA (Fund Flow OS / FIRE promo box) Keep this one DARKER than surrounding text to make it pop against the paper background — it's a sponsor break. ========================================================= */ body.article-light .article-cta { background: radial-gradient(ellipse at top right, rgba(242,107,31,0.30), transparent 60%), linear-gradient(180deg, var(--midnight-2), var(--midnight)); border: 1px solid var(--midnight-3); color: var(--bone); } body.article-light .article-cta h3 { color: var(--bone); } body.article-light .article-cta p { color: rgba(245,239,226,0.85); } /* ========================================================= FAQ ========================================================= */ body.article-light .article-faq { border-top: 1px solid rgba(14,24,40,0.12); } /* Override the inline border-top on the h2.article-faq element */ body.article-light h2.article-faq { border-top: 1px solid rgba(14,24,40,0.12) !important; color: var(--ink); } body.article-light .article-faq details { border: 1px solid rgba(14,24,40,0.12); background: rgba(14,24,40,0.025); } body.article-light .article-faq summary { color: var(--ink); } body.article-light .article-faq summary::after { color: var(--ember); } body.article-light .article-faq details[open] summary { background: rgba(242,107,31,0.06); } body.article-light .article-faq details > div { color: rgba(14,24,40,0.82); } /* ========================================================= SIGNOFF + RELATED POSTS ========================================================= */ body.article-light .article-signoff { border-top: 1px solid rgba(14,24,40,0.12); color: var(--ember); } body.article-light .related-posts { border-top: 1px solid rgba(14,24,40,0.12); } body.article-light .related-posts h2 { color: var(--ink); } /* Related-posts cards: lift them with a soft paper card */ body.article-light .related-posts .post-card { background: var(--paper); border: 1px solid rgba(14,24,40,0.10); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } body.article-light .related-posts .post-card:hover { transform: translateY(-2px); border-color: rgba(242,107,31,0.35); box-shadow: 0 8px 24px rgba(14,24,40,0.06); } body.article-light .related-posts .post-card-art { background: var(--bone-2); } body.article-light .related-posts .post-card-cat .tag.bone { background: rgba(14,24,40,0.85); color: var(--bone); border-color: transparent; } body.article-light .related-posts .post-card-meta { color: var(--muted); } body.article-light .related-posts .post-card h3 { color: var(--ink); } body.article-light .related-posts .post-card h3 a { color: var(--ink); } body.article-light .related-posts .post-card h3 a:hover { color: var(--ember); } body.article-light .related-posts .post-card p { color: rgba(14,24,40,0.72); }