/**
* 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);
--ep-indigo: #2b2a6b;
--ep-indigo-tint: rgba(43, 42, 107, 0.16);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
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(--font-mono);
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.8125rem;
font-weight: 700;
line-height: 1.25;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.6);
}
.ep-story-grid .ep-story-card__genre {
font-size: 0.6rem;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
/* 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 — was only 40px
tall, which didn't fully cover a wrapped 2-line title (the top
line sat in the fading part of the gradient, where the photo
shows through more — exactly where legibility would strain).
Taller now, with a solid base instead of fading from full black
at 0%, so a two-line title is fully backed with margin to spare. */
/* Removed the heavy bottom band (was black 0.85, 78px tall). It existed
to back overlaid title text that no longer renders here, so it was
only dimming the title baked into the poster art — the exact "dull"
look the story-page cover (.sp-cover, no gradient) doesn't have. The
only thing at the bottom now is the small views chip, which carries
its own background pill (below) for contrast. */
.ep-story-grid .ep-story-card__cover::after { content: none; }
/* Views pill — bottom-right, sits beside status badge */
.ep-story-grid .ep-story-card__views-overlay {
inset-block-start: 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;
/* Own background pill — since the bottom scrim/band were removed so
the poster art reads sharp, this chip needs its own backing to
stay legible over any cover. */
padding: 3px 7px;
border-radius: 100px;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
text-shadow: 0 1px 2px 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; } }
/* ============================================================
NETFLIX-STYLE POSTER TILE — ep-story-card redesign
Was: poster on top + a separate flat-color info strip below it
(title/genre lived TWICE — once as an overlay, once again below —
and the plain strip is why the card needed a border to read as
a "card" at all against the dark page). Now: the card IS the
poster. Everything (genre, title, status, view count) overlays
the image directly, the way Netflix/streaming tiles work — no
separate panel, no border needed, separation comes from shadow +
the poster art itself. This file loads last on the homepage, so
these rules win over the earlier body-panel styles further up.
============================================================ */
.ep-story-card__body { display: none; }
.ep-story-card {
border: none;
border-radius: 10px;
background: transparent;
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
transition: transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s ease;
will-change: transform;
}
.ep-story-card:hover,
.ep-story-card:focus-within {
transform: translateY(-6px) scale(1.035);
box-shadow: 0 18px 34px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,176,32,0.4);
z-index: 5;
}
.ep-story-card__cover {
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.28);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 10px rgba(255,255,255,0.08);
}
/* Tighter overlay typography now that it's the ONLY text on the card */
.ep-story-card__cover-text { padding: 12px 11px; }
.ep-story-card__genre { font-size: 9.5px; }
.ep-story-card__title {
font-size: 13.5px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 1024px) { .ep-story-card__title { font-size: 14px; } }
/* View count — always-on corner chip (Netflix-badge style), not just
a mobile-only fallback for a now-deleted below-cover row. */
.ep-story-card__views-overlay {
display: inline-flex !important;
position: absolute;
/* Moved to the TOP-right corner so it no longer sits over the title,
which on many covers runs to the bottom of the art. */
inset-block-start: 0.55rem;
inset-inline-end: 0.55rem;
align-items: center;
gap: 3px;
background: rgba(10,10,14,0.6);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
padding: 3px 7px;
border-radius: 100px;
font-family: var(--rr-font-ui);
font-size: 10px;
font-weight: 600;
color: #fff;
line-height: 1;
z-index: 4;
pointer-events: none;
}
.ep-story-card__views-overlay svg { flex-shrink: 0; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
.ep-story-card, .ep-story-card:hover { transform: none; transition: 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;
/* Netflix-style poster punch — boosts the cover's contrast and colour
so the artwork (and the title baked into it) reads bold and vivid on
the grid, instead of flat/dull. This does NOT add a text title; it
makes the writer's own design pop. Hover pushes it a touch further. */
filter: contrast(1.08) saturate(1.16) brightness(1.02);
transition: transform 0.3s ease, filter 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);
filter: contrast(1.12) saturate(1.22) brightness(1.04);
}
.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 {
/* Shrunk so the badge takes less of the bottom edge, leaving more of
the poster's title art clear. */
font-size: 0.5rem;
padding: 0.15em 0.42em;
letter-spacing: 0.01em;
border-radius: 0 var(--rr-radius) 0 var(--rr-radius);
}
/* Episode count folded into the status pill (e.g. "Ongoing · 8 ep") —
slightly lighter than the status word so the status still leads. */
.ep-story-card__status .badge .ep-story-card__epcount {
font-weight: 600;
opacity: 0.85;
}
/* Winner chip — top-left on cover, the one corner not already taken by
the New badge (top-right), status badge (bottom-left), or view count
(bottom-right). Amber-filled so it reads as a genuine accolade, not
just another status label. */
.ep-story-card__winner-chip {
position: absolute;
inset-block-start: 0.5rem;
inset-inline-start: 0.5rem;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 3px;
background: var(--ep-gold, #c9963f);
color: #1a1206;
font-family: var(--rr-font-ui);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.02em;
padding: 0.25em 0.55em;
border-radius: 100px;
line-height: 1.3;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
/* Card body — intentionally hidden (see .ep-story-card__body rule above,
"NETFLIX-STYLE POSTER TILE" comment): genre/title/status/views all
overlay the cover directly, so this panel stays display:none. This
used to be redeclared here as display:flex/flex:1 1 auto, which
silently undid that hide and left a near-empty flex panel that
CSS Grid stretched to match row height — the blank strip under
each card. Keeping it hidden removes that dead space entirely. */
.ep-story-card__body {
display: none;
}
.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: 700;
line-height: 1.3;
color: var(--rr-ink);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}
@media (min-width: 1024px) { .ep-story-card__title { font-size: 0.9375rem; } }
.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: Georgia, 'Times New Roman', serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--ep-gold);
opacity: 0.85;
line-height: 1;
min-width: 2ch;
flex-shrink: 0;
background: none;
}
@media (max-width: 639px) {
.ep-trending-item__rank { font-size: 2.25rem; color: var(--ep-gold); opacity: 0.85; }
}
.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: auto; aspect-ratio: 2 / 3; }
}
.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;
}
}
/* ── Tabular data treatment ──────────────────────────────────────
View counts, episode counts, read counts and genre pill counts
all switch to the mono face used elsewhere for schedule/data
text (hero eyebrow, section eyebrows) so numbers read as data
consistently sitewide rather than inheriting body text styling. */
.story-card__stat,
.ep-story-card__stat,
.ep-story-card__views-overlay,
.ep-trending-item__count,
.ep-genre-pill__count,
.ep-latest-ep-row__views,
.ep-latest-ep-row__readtime,
.continue-reading__percent {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* ══════════════════════════════════════════════════════════════
HOMEPAGE SECTION ORDER — reader-first flow
Reordered with flex `order` instead of physically moving the PHP
section blocks, so this is CSS-only (no risk to the live template)
and fully reversible. DOM/source order is unchanged, so SEO and the
original reading order are preserved; only the visual stacking moves.
New flow: Hero → Continue Reading (resume) → Challenge (if live) →
Top 5 Today (trending / social proof — pulled up from the bottom) →
Pick a lane (genres) → Latest Episodes (updates) → New Stories →
mid-page ad → Challenge Stories → Community → Write-with-us. This
puts "resume" and "what everyone's reading" near the top, and sinks
the writer/community CTAs below the reading content.
Note: only the direct children of #main-content are ordered; the
invisible /