/** * homepage-dark.css — Epyso Homepage Skin * Loaded only on front-page.php. * * DEFAULT = light (white background, dark ink text). * DARK = activated when [data-theme="dark"] is on . * * All ep- classes are light-first; dark overrides follow in a * clearly labelled block at the bottom. * * Design tokens: * Light: --rr-paper (#faf6ee), --rr-ink (#211d18), etc. * Dark: same tokens flip via [data-theme="dark"] in style.css * * Gold accent (both modes): * --ep-gold #c9963f * --ep-gold-dark #b8872e */ /* ── Local token definitions ──────────────────────────────── */ :root { --ep-gold: #c9963f; --ep-gold-dark: #b8872e; --ep-gold-tint: rgba(201, 150, 63, 0.12); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LIGHT MODE (DEFAULT) — white background, readable ink text ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ── Container ────────────────────────────────────────────── */ .ep-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 600px) { .ep-container { padding-inline: 1.5rem; } } @media (min-width: 1024px) { .ep-container { padding-inline: 2rem; } } /* ── Section shell ────────────────────────────────────────── */ .ep-section { background-color: var(--rr-paper); padding-block: 3rem; } .ep-section + .ep-section { border-top: 1px solid var(--rr-line); } .ep-section--most-read { background-color: var(--rr-paper-2); } /* ── Section header ───────────────────────────────────────── */ .ep-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.25rem; margin-block-end: 1.75rem; } .ep-eyebrow { font-family: var(--rr-font-ui); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ep-gold); width: 100%; } .ep-section-title { font-family: var(--rr-font-display); font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 600; line-height: 1.15; color: var(--rr-ink); margin: 0; flex: 1 0 auto; } .ep-section-more { font-family: var(--rr-font-ui); font-size: 0.8125rem; color: var(--rr-ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; transition: color 0.15s ease; } .ep-section-more:hover, .ep-section-more:focus-visible { color: var(--ep-gold); } .ep-section-more svg { flex-shrink: 0; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ §2 CONTINUE READING ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ep-continue-section { background-color: var(--rr-paper); padding-block: 1.5rem; border-bottom: 1px solid var(--rr-line); } .ep-continue-wrap .continue-reading { display: flex; align-items: center; gap: 1rem; background-color: var(--rr-paper-2); border: 1px solid var(--rr-line); border-radius: var(--rr-radius); padding: 0.875rem 1rem; text-decoration: none; color: var(--rr-ink); min-height: 72px; transition: border-color 0.15s ease; } .ep-continue-wrap .continue-reading:hover, .ep-continue-wrap .continue-reading:focus-visible { border-color: var(--ep-gold); } .ep-continue-wrap .continue-reading__cover { flex-shrink: 0; width: 44px; height: 60px; border-radius: var(--rr-radius); overflow: hidden; background: var(--rr-paper-3); } .ep-continue-wrap .continue-reading__label { font-family: var(--rr-font-ui); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ep-gold); font-weight: 600; margin-block-end: 0.2rem; } .ep-continue-wrap .continue-reading__title { font-family: var(--rr-font-display); font-size: 1rem; font-weight: 600; color: var(--rr-ink); margin-block-end: 0.125rem; line-height: 1.25; } .ep-continue-wrap .continue-reading__episode { font-family: var(--rr-font-ui); font-size: 0.8125rem; color: var(--rr-ink-soft); } .ep-continue-wrap .continue-reading__progress { flex: 1 1 auto; min-width: 0; } .ep-continue-wrap .progress-bar-wrap { margin-block: 0.375rem; height: 3px; background: var(--rr-line); border-radius: 0; overflow: hidden; } .ep-continue-wrap .progress-bar-fill { height: 100%; background: var(--ep-gold); border-radius: 0; } .ep-continue-wrap .continue-reading__cta { flex-shrink: 0; } .ep-continue-wrap .btn--primary { font-family: var(--rr-font-ui); font-size: 0.8125rem; font-weight: 600; color: #fff; background: var(--ep-gold); border: none; border-radius: var(--rr-radius); padding: 0.5rem 1rem; min-height: 36px; text-decoration: none; display: inline-block; white-space: nowrap; transition: background 0.15s ease; } .ep-continue-wrap .btn--primary:hover { background: var(--ep-gold-dark); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ §3 LATEST STORIES + §6 DISCOVER MORE — shared story card grid ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ep-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; } /* Tighten card text at 3-wide mobile so covers stay legible */ @media (max-width: 639px) { .ep-story-grid .ep-story-card__title { font-size: 0.7rem; line-height: 1.2; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .ep-story-grid .ep-story-card__genre { font-size: 0.6rem; } /* Hide below-cover meta row — views shown on cover instead */ .ep-story-grid .ep-story-card__meta { display: none; } /* Gradient behind bottom-of-cover overlay elements */ .ep-story-grid .ep-story-card__cover::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 40px; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%); pointer-events: none; border-radius: 0 0 var(--rr-radius) var(--rr-radius); } /* Views pill — bottom-right, sits beside status badge */ .ep-story-grid .ep-story-card__views-overlay { inset-block-end: 0.35rem; inset-inline-end: 0.35rem; display: inline-flex; align-items: center; gap: 0.2em; font-family: var(--rr-font-ui); font-size: 0.6rem; font-weight: 600; color: #fff; line-height: 1; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,0.6); z-index: 2; } .ep-story-grid .ep-story-card__views-overlay svg { flex-shrink: 0; opacity: 0.9; } } @media (min-width: 640px) { .ep-story-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .ep-story-grid { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; } } .ep-story-card { display: flex; flex-direction: column; } /* Views overlay on the cover — shown only on mobile (<=639px, set above); explicitly hidden at desktop widths so it never leaks through regardless of rule order, since the below-cover meta row already shows views there. */ .ep-story-card__views-overlay { position: absolute; display: none; } @media (min-width: 640px) { .ep-story-card__views-overlay { display: none; } } .ep-story-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--rr-ink); } .ep-story-card__link:focus-visible { outline: 2px solid var(--ep-gold); outline-offset: 3px; border-radius: var(--rr-radius); } /* Cover — portrait 2:3 */ .ep-story-card__cover { position: relative; aspect-ratio: 2 / 3; background-color: var(--rr-paper-3); border-radius: var(--rr-radius); overflow: hidden; flex-shrink: 0; } .ep-story-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .ep-story-card__link:hover .ep-story-card__cover img, .ep-story-card__link:focus-visible .ep-story-card__cover img { transform: scale(1.03); } .ep-story-card__cover-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--rr-ink-faint); } /* Status badge — bottom-left on cover */ .ep-story-card__status { position: absolute; inset-block-end: 0; inset-inline-start: 0; z-index: 3; } .ep-story-card__status .badge { font-size: 0.625rem; padding: 0.2em 0.5em; border-radius: 0 var(--rr-radius) 0 var(--rr-radius); } /* "New Ep" badge — top-right on cover */ .ep-badge--new { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; font-family: var(--rr-font-ui); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--ep-gold); border-radius: var(--rr-radius); padding: 0.25em 0.5em; line-height: 1; pointer-events: none; } /* Card body */ .ep-story-card__body { padding-block: 0.625rem 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.2rem; } .ep-story-card__genre { font-family: var(--rr-font-ui); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ep-gold); font-weight: 600; } .ep-story-card__title { font-family: var(--rr-font-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--rr-ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 1024px) { .ep-story-card__title { font-size: 0.875rem; } } .ep-story-card__meta { display: flex; align-items: center; gap: 0.75rem; margin-block-start: auto; padding-block-start: 0.375rem; } .ep-story-card__stat { display: inline-flex; align-items: center; gap: 0.3em; font-family: var(--rr-font-ui); font-size: 0.75rem; color: var(--rr-ink-faint); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ AD ZONE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ep-ad-zone { padding-block: 1.25rem; } .ep-ad-zone:empty { padding-block: 0; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ §4 BROWSE BY GENRE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ep-section--genre { overflow: hidden; } .ep-genre-scroll-wrap { position: relative; } .ep-genre-scroll-wrap::after { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 3rem; background: linear-gradient(to right, transparent, var(--rr-paper)); pointer-events: none; z-index: 1; } .ep-genre-scroll { display: flex; flex-wrap: nowrap; gap: 0.5rem; overflow-x: auto; padding-block-end: 0.75rem; padding-inline-end: 2rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--rr-line) transparent; } .ep-genre-scroll::-webkit-scrollbar { height: 3px; } .ep-genre-scroll::-webkit-scrollbar-track { background: transparent; } .ep-genre-scroll::-webkit-scrollbar-thumb { background: var(--rr-line); border-radius: 0; } .ep-genre-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.5rem 0.875rem; min-height: 40px; background-color: var(--rr-paper-2); border: 1px solid var(--rr-line); border-radius: var(--rr-radius); text-decoration: none; color: var(--rr-ink-soft); font-family: var(--rr-font-ui); font-size: 0.875rem; white-space: nowrap; scroll-snap-align: start; transition: border-color 0.15s ease, color 0.15s ease; } .ep-genre-pill:hover, .ep-genre-pill:focus-visible { border-color: var(--ep-gold); color: var(--ep-gold); outline: none; } .ep-genre-pill__emoji { font-size: 1em; line-height: 1; } .ep-genre-pill__name { font-weight: 500; } .ep-genre-pill__count { font-size: 0.75rem; color: var(--rr-ink-faint); margin-inline-start: 0.1em; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ §5 MOST READ THIS MONTH ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ep-trending-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ep-trending-scroll-wrap::-webkit-scrollbar { display: none; } .ep-trending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; gap: 0; min-width: max-content; } @media (min-width: 640px) { .ep-trending-scroll-wrap { overflow-x: visible; } .ep-trending-list { flex-direction: column; min-width: auto; } } .ep-trending-item { flex-shrink: 0; width: 240px; } @media (min-width: 640px) { .ep-trending-item { width: auto; } .ep-trending-item + .ep-trending-item { border-top: 1px solid var(--rr-line); } } .ep-trending-item__link { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 0.75rem; text-decoration: none; color: var(--rr-ink); min-height: 72px; border-radius: var(--rr-radius); transition: background 0.15s ease; } @media (max-width: 639px) { .ep-trending-item__link { flex-direction: column; align-items: flex-start; height: 100%; padding: 0.75rem; border: 1px solid var(--rr-line); border-radius: var(--rr-radius); background-color: var(--rr-paper-2); } .ep-trending-item { margin-inline-end: 0.75rem; } } @media (min-width: 640px) { .ep-trending-item__link:hover, .ep-trending-item__link:focus-visible { background-color: var(--rr-paper-2); outline: none; } } .ep-trending-item__rank { font-family: var(--rr-font-display); font-size: 1.375rem; font-weight: 700; color: var(--rr-ink-faint); line-height: 1; min-width: 2ch; flex-shrink: 0; } @media (max-width: 639px) { .ep-trending-item__rank { font-size: 2rem; color: var(--ep-gold); opacity: 0.6; } } .ep-trending-item__cover { flex-shrink: 0; width: 48px; height: 68px; border-radius: var(--rr-radius); overflow: hidden; background-color: var(--rr-paper-3); } @media (max-width: 639px) { .ep-trending-item__cover { width: 100%; height: 120px; } } .ep-trending-item__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .ep-trending-item__cover-fallback { width: 100%; height: 100%; background: var(--rr-paper-3); } .ep-trending-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .ep-trending-item__genre { font-family: var(--rr-font-ui); font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ep-gold); font-weight: 600; } .ep-trending-item__title { font-family: var(--rr-font-display); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--rr-ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ep-trending-item__author { font-family: var(--rr-font-ui); font-size: 0.8125rem; color: var(--rr-ink-faint); } .ep-trending-item__reads { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; } @media (max-width: 639px) { .ep-trending-item__reads { display: flex; flex-direction: row; align-items: center; gap: 0.25em; margin-block-start: 0.25rem; align-self: flex-start; } .ep-trending-item__count { font-size: 0.75rem; font-weight: 700; color: var(--ep-gold); line-height: 1; } .ep-trending-item__reads-label { font-size: 0.65rem; color: var(--rr-ink-faint); letter-spacing: 0.04em; line-height: 1; } } .ep-trending-item__count { font-family: var(--rr-font-ui); font-size: 1rem; font-weight: 700; color: var(--rr-ink); line-height: 1.1; } .ep-trending-item__reads-label { font-family: var(--rr-font-ui); font-size: 0.6875rem; color: var(--rr-ink-faint); text-transform: uppercase; letter-spacing: 0.05em; } @media (min-width: 640px) { .ep-section--most-read .ep-container { max-width: 720px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ §7 THE BREAK (Write + WhatsApp panel) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ep-break { background-color: var(--rr-paper-2); border-top: 1px solid var(--rr-line); border-bottom: 1px solid var(--rr-line); padding-block: 4rem; } .ep-break__inner { text-align: center; max-width: 680px; } .ep-break__heading { font-family: var(--rr-font-display); font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.2; color: var(--rr-ink); margin: 0 0 1rem; } .ep-break__sub { font-family: var(--rr-font-ui); font-size: clamp(0.9375rem, 2vw, 1.0625rem); line-height: 1.65; color: var(--rr-ink-soft); margin: 0 0 2rem; } .ep-break__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; } /* Buttons */ .ep-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--rr-font-ui); font-size: 0.9375rem; font-weight: 600; text-decoration: none; border-radius: var(--rr-radius); padding: 0.75rem 1.5rem; min-height: 48px; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .ep-btn--gold { background-color: var(--ep-gold); border-color: var(--ep-gold); color: #fff; } .ep-btn--gold:hover, .ep-btn--gold:focus-visible { background-color: var(--ep-gold-dark); border-color: var(--ep-gold-dark); outline: none; } .ep-btn--ghost { background-color: transparent; border-color: var(--rr-line); color: var(--rr-ink-soft); } .ep-btn--ghost:hover, .ep-btn--ghost:focus-visible { border-color: var(--rr-ink); color: var(--rr-ink); outline: none; } .ep-break__link { font-family: var(--rr-font-ui); font-size: 0.875rem; color: var(--rr-ink-faint); text-decoration: none; padding: 0.5rem 0; min-height: 48px; display: inline-flex; align-items: center; transition: color 0.15s ease; } .ep-break__link:hover, .ep-break__link:focus-visible { color: var(--ep-gold); outline: none; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DARK MODE OVERRIDES Everything below only activates when [data-theme="dark"] is on the element. No style above this line should assume a dark background. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ── Homepage base background ─────────────────────────────── */ [data-theme="dark"] body.home { background-color: #100d0a; } /* ── Section backgrounds ──────────────────────────────────── */ [data-theme="dark"] .ep-section { background-color: #100d0a; } [data-theme="dark"] .ep-section--most-read { background-color: #1a1511; } [data-theme="dark"] .ep-section + .ep-section { border-top-color: rgba(240, 234, 216, 0.10); } /* ── Eyebrow stays gold (same in both modes) ──────────────── */ /* No change needed — --ep-gold is the same value */ /* ── Section titles: force full white in dark mode ───────── */ [data-theme="dark"] .ep-section-title { color: #f0ead8; } [data-theme="dark"] .ep-section-more { color: #8b8576; } [data-theme="dark"] .ep-section-more:hover, [data-theme="dark"] .ep-section-more:focus-visible { color: var(--ep-gold); } /* ── Continue Reading section ─────────────────────────────── */ [data-theme="dark"] .ep-continue-section { background-color: #100d0a; border-bottom-color: rgba(240, 234, 216, 0.10); } [data-theme="dark"] .ep-continue-wrap .continue-reading { background-color: #1e1813; border-color: rgba(240, 234, 216, 0.10); color: #f0ead8; } [data-theme="dark"] .ep-continue-wrap .continue-reading:hover, [data-theme="dark"] .ep-continue-wrap .continue-reading:focus-visible { border-color: var(--ep-gold); } [data-theme="dark"] .ep-continue-wrap .continue-reading__cover { background: #2a2118; } [data-theme="dark"] .ep-continue-wrap .continue-reading__title { color: #f0ead8; } [data-theme="dark"] .ep-continue-wrap .continue-reading__episode { color: #c9c2b0; } [data-theme="dark"] .ep-continue-wrap .progress-bar-wrap { background: rgba(240, 234, 216, 0.12); } /* ── Story cards ──────────────────────────────────────────── */ [data-theme="dark"] .ep-story-card__cover { background-color: #2a2118; } [data-theme="dark"] .ep-story-card__cover-fallback { color: #8b8576; } [data-theme="dark"] .ep-story-card__link { color: #f0ead8; } [data-theme="dark"] .ep-story-card__title { color: #f0ead8; } [data-theme="dark"] .ep-story-card__stat { color: #8b8576; } /* ── Genre pills ──────────────────────────────────────────── */ [data-theme="dark"] .ep-genre-scroll-wrap::after { background: linear-gradient(to right, transparent, #100d0a); } [data-theme="dark"] .ep-genre-pill { background-color: #1a1511; border-color: rgba(240, 234, 216, 0.10); color: #c9c2b0; } [data-theme="dark"] .ep-genre-pill:hover, [data-theme="dark"] .ep-genre-pill:focus-visible { border-color: var(--ep-gold); color: var(--ep-gold); } [data-theme="dark"] .ep-genre-pill__count { color: #8b8576; } /* ── Most Read ────────────────────────────────────────────── */ [data-theme="dark"] .ep-trending-item + .ep-trending-item { border-top-color: rgba(240, 234, 216, 0.10); } [data-theme="dark"] .ep-trending-item__link { color: #f0ead8; } [data-theme="dark"] .ep-trending-item__link:hover, [data-theme="dark"] .ep-trending-item__link:focus-visible { background-color: #1e1813; } [data-theme="dark"] .ep-trending-item__rank { color: #8b8576; } [data-theme="dark"] .ep-trending-item__cover { background-color: #2a2118; } [data-theme="dark"] .ep-trending-item__cover-fallback { background: #2a2118; } [data-theme="dark"] .ep-trending-item__title { color: #f0ead8; } [data-theme="dark"] .ep-trending-item__author { color: #8b8576; } [data-theme="dark"] .ep-trending-item__count { color: #f0ead8; } [data-theme="dark"] .ep-trending-item__reads-label { color: #8b8576; } @media (max-width: 639px) { [data-theme="dark"] .ep-trending-item__link { background-color: #1e1813; border-color: rgba(240, 234, 216, 0.10); } } /* ── The Break panel ──────────────────────────────────────── */ [data-theme="dark"] .ep-break { background-color: #1a1511; border-top-color: rgba(240, 234, 216, 0.10); border-bottom-color: rgba(240, 234, 216, 0.10); } [data-theme="dark"] .ep-break__heading { color: #f0ead8; } [data-theme="dark"] .ep-break__sub { color: #c9c2b0; } [data-theme="dark"] .ep-btn--ghost { border-color: rgba(240, 234, 216, 0.18); color: #c9c2b0; } [data-theme="dark"] .ep-btn--ghost:hover, [data-theme="dark"] .ep-btn--ghost:focus-visible { border-color: #f0ead8; color: #f0ead8; } [data-theme="dark"] .ep-break__link { color: #8b8576; } [data-theme="dark"] .ep-break__link:hover, [data-theme="dark"] .ep-break__link:focus-visible { color: var(--ep-gold); } /* ── Reduced motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ep-story-card__cover img, .ep-btn, .ep-genre-pill, .ep-section-more, .ep-trending-item__link { transition: none; } } /* ══════════════════════════════════════════════════════════════ LATEST EPISODES SECTION ══════════════════════════════════════════════════════════════ */ .ep-latest-eps-list { list-style: none; margin: 0; padding: 0; } .ep-latest-ep-row { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rr-line-soft); } .ep-latest-ep-row:first-child { border-top: 1px solid var(--rr-line-soft); } /* Already-read row fades out and hides the CTA */ .ep-latest-ep-row--read { opacity: 0.38; } .ep-latest-ep-row--read .ep-latest-ep-row__cta { display: none; } /* Thumbnail — fixed size, no flex shrink */ .ep-latest-ep-row__thumb { flex: 0 0 40px; width: 40px; height: 54px; border-radius: 3px; overflow: hidden; background: var(--rr-paper-2); display: block; text-decoration: none; } .ep-latest-ep-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Body — takes remaining space */ .ep-latest-ep-row__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; } /* Story name — small gold label above */ .ep-latest-ep-row__story { font-family: var(--rr-font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ep-gold); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } /* Episode title */ .ep-latest-ep-row__ep-title { font-family: var(--rr-font-display); font-size: 13px; font-weight: 500; color: var(--rr-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .ep-latest-ep-row__ep-title:hover { color: var(--ep-gold); } /* "Episode 3:" prefix within title */ .ep-latest-ep-row__ep-label { color: var(--rr-ink-faint); font-weight: 400; margin-right: 2px; } /* Meta line: time + read time */ .ep-latest-ep-row__meta { display: flex; align-items: center; gap: 4px; font-family: var(--rr-font-ui); font-size: 11px; color: var(--rr-ink-faint); line-height: 1; margin-top: 3px; } .ep-latest-ep-row__sep { opacity: 0.4; } .ep-latest-ep-row__views { display: inline-flex; align-items: center; gap: 3px; line-height: 1; } .ep-latest-ep-row__views svg { flex-shrink: 0; opacity: 0.75; } /* Read CTA — right side */ .ep-latest-ep-row__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-family: var(--rr-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--ep-gold); text-decoration: none; white-space: nowrap; padding: 4px 0 4px 10px; transition: color 0.15s; } .ep-latest-ep-row__cta:hover { color: var(--rr-ink); } /* Mobile: slightly tighter */ @media (max-width: 639px) { .ep-latest-ep-row { gap: 10px; padding: 11px 0; } .ep-latest-ep-row__thumb { flex: 0 0 36px; width: 36px; height: 48px; } .ep-latest-ep-row__ep-title { font-size: 12px; } .ep-latest-ep-row__cta { font-size: 11px; padding-left: 8px; } }