/**
* gist-shared.css — Epyso Gist Redesign: Shared Component Library
*
* Loaded ONCE, sitewide, via a in header.php (same convention this
* theme already uses for homepage-dark.css: one dedicated file, directly
* linked, cached by the browser across every page load rather than
* duplicated inline per-template).
*
* Contains every component reused across 2+ templates: story cards,
* the genre dial grid, community cards, trending/leaderboard rows.
* Page-specific layout (hero, story detail, reading typography, entry
* forms) stays inline per-template, since those are genuinely one-off.
*
* Depends on the global --clr-*/--font-display variables defined in
* header.php. Do not hardcode colors here — reference the variables so
* a future palette change only has to happen in one place.
*/
/* ============ STORY CARD (2:3 cover, title overlaid on gradient) ============ */
body .ep-story-card{
background:var(--clr-bg-card);
border:1px solid rgba(243,233,221,0.5);
border-radius:18px;
overflow:hidden;
transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.4);
}
body .ep-story-card:hover{ transform:translateY(-4px); border-color:var(--clr-primary-dark); box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,176,32,0.15); }
body .ep-story-card__link{ display:block; color:inherit; text-decoration:none; }
body .ep-story-card__cover{
aspect-ratio:2/3;
position:relative;
overflow:hidden;
display:flex;
align-items:flex-end;
}
body .ep-story-card__cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body .ep-story-card__cover-fallback{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
background:var(--clr-bg-card-hover);
color:var(--clr-text-faint);
opacity:0.5;
}
/* Signature amber glow — the prototype's branded accent on every card cover,
layered over the scrim so real photos still carry the same warm, designed
feel the mockup had (not just a generic photo-with-fade-at-bottom look). */
body .ep-story-card__cover::before{
content:"";
position:absolute; inset:0;
background:radial-gradient(circle at 75% 15%, rgba(255,176,32,0.12), transparent 55%);
z-index:1;
pointer-events:none;
}
body .ep-story-card__scrim{
position:absolute; inset:0;
/* Removed entirely — the overlaid genre/title text this scrim used to
back is gone (the cover art carries the title now), so the gradient
was only dimming the real title baked into the artwork, making the
card look dull next to the clean, bright cover on the story page.
The status pill and view-count chip carry their own background, so
they don't need this for contrast. Cover now reads sharp, like the
single-story cover (.sp-cover), which has no scrim at all. */
background:none;
}
body .ep-story-card__cover-text{ position:relative; z-index:2; padding:16px; }
body .ep-story-card__genre{
display:block;
font-family:'JetBrains Mono',monospace;
font-size:10px;
color:var(--clr-primary);
text-transform:uppercase;
letter-spacing:0.05em;
margin-bottom:6px;
}
body .ep-story-card__title{
font-family:'Fraunces',serif;
font-size:17px;
font-weight:600;
color:#fff;
margin:0;
line-height:1.2;
}
body .ep-story-card__body{ padding:12px 16px 16px; }
body .ep-story-card__meta{
display:flex; gap:14px;
font-family:'JetBrains Mono',monospace;
font-size:11px;
color:var(--clr-text-muted);
}
body .ep-story-card__stat{ display:flex; align-items:center; gap:4px; }
/* ============ AUTH PAGES (Become a Writer / register form) ============
Was completely unstyled — .ep-auth* classes existed in the markup but
had no CSS anywhere in the theme, so the page rendered as raw browser
HTML. This is the missing stylesheet, matching the rest of the theme's
dark-card/amber-accent language. */
body .ep-auth{
min-height:60vh;
display:flex; align-items:center; justify-content:center;
padding:60px 6vw 100px;
}
body .ep-auth__card{
width:100%; max-width:420px;
background:var(--clr-bg-card);
border:1px solid rgba(240,234,216,0.1);
border-radius:20px;
padding:36px 32px;
box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
body .ep-auth__eyebrow{
display:block;
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
color:var(--clr-primary);
margin-bottom:14px;
}
body .ep-auth__title{
font-family:'Fraunces',serif; font-size:clamp(24px,4vw,30px); font-weight:600;
color:var(--clr-text); line-height:1.15; margin:0 0 10px;
}
body .ep-auth__sub{
font-size:14px; line-height:1.55; color:var(--clr-text-muted);
margin:0 0 28px;
}
body .ep-auth__form{ display:flex; flex-direction:column; gap:18px; }
body .ep-auth__field{ display:flex; flex-direction:column; gap:7px; }
body .ep-auth__field span{
font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.04em;
text-transform:uppercase; color:var(--clr-text-muted);
}
body .ep-auth__field input{
background:var(--clr-bg); border:1px solid rgba(240,234,216,0.14);
border-radius:10px; padding:12px 14px;
font-family:'Inter',sans-serif; font-size:15px; color:var(--clr-text);
outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
body .ep-auth__field input:focus{
border-color:var(--clr-primary-dark);
box-shadow:0 0 0 3px var(--clr-primary-glow);
}
body .ep-auth__hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
body .ep-auth__error{
background:rgba(244,69,90,0.12); border:1px solid rgba(244,69,90,0.3);
color:#f4455a; font-size:13px; padding:10px 14px; border-radius:10px; margin:0;
}
body .ep-auth__submit{
display:flex; align-items:center; justify-content:center;
background:var(--grad-primary); color:#1a1206;
border:none; border-radius:100px; padding:14px 20px;
font-family:'Inter',sans-serif; font-size:15px; font-weight:700;
cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
margin-top:6px;
}
body .ep-auth__submit:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,176,32,0.3); }
body .ep-auth__submit.is-loading{ opacity:0.7; cursor:wait; pointer-events:none; }
body .ep-auth__alt{
text-align:center; font-size:13.5px; color:var(--clr-text-muted);
margin:24px 0 0;
}
body .ep-auth__alt a{ color:var(--clr-primary); text-decoration:none; font-weight:600; }
body .ep-auth__alt a:hover{ text-decoration:underline; }
@media(max-width:480px){
body .ep-auth{ padding:40px 6vw 70px; }
body .ep-auth__card{ padding:28px 22px; border-radius:16px; }
}
/* ============ HORIZONTAL SLIDER (Latest Stories, Genres) ============
Real feature, not decorative: mobile shows ~2 items per row via
percentage width + scroll-snap, matching the requested "two cards on
a row for mobile" behavior. Desktop shows more, still scrollable. */
.ep-slider{
display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
padding-bottom:6px; scrollbar-width:none; -ms-overflow-style:none;
}
.ep-slider::-webkit-scrollbar{ display:none; }
.ep-slider > *{ scroll-snap-align:start; scroll-snap-stop:always; flex:0 0 auto; }
.ep-slider .ep-story-card{ width:220px; }
.ep-slider .ep-slide-item{ width:220px; }
@media(max-width:700px){
.ep-slider .ep-story-card{ width:46vw; }
.ep-slider .ep-slide-item{ width:70vw; }
}
/* When ep-story-grid (a plain CSS grid, defined in homepage-dark.css)
ALSO carries ep-slider (this file's scroll-snap carousel), the slider
must win outright — a grid track and a forced child width fighting
each other is what caused the "sliding to the left when I drag it"
half-broken feel. Two-class selector beats either single-class rule
on specificity alone, so this applies regardless of file load order. */
.ep-story-grid.ep-slider{
display:flex;
grid-template-columns:none;
}
.ep-see-all-btn{
display:inline-flex; align-items:center; gap:6px;
font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600;
color:var(--clr-primary); text-decoration:none;
padding:9px 16px; border:1px solid var(--clr-primary-dark); border-radius:100px;
white-space:nowrap;
}
/* Story-level grid wrapper (used for the plain, badge-free listing pattern —
e.g. archive/browse pages, genre listings — as opposed to the homepage's
.ep-story-grid which carries new/challenge badges) */
.ep-card-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
gap:20px;
}
/* ============ REAL SHARED CARD (template-parts/card-story.php) ============
Used by archive-story.php and the AJAX load-more endpoint behind it.
Different class family from .ep-story-card above (that one is the
homepage's own inline markup, with new/challenge badges card-story.php
doesn't have) — NOT unified into one system in this pass, since doing so
would mean touching the AJAX endpoint's response markup, which needs its
own review first rather than being changed as a side effect of a CSS pass. */
body .story-card{
background:var(--clr-bg-card);
border:1px solid rgba(240,234,216,0.1);
border-radius:18px;
overflow:hidden;
transition:transform .2s ease, border-color .2s ease;
}
body .story-card:hover{ transform:translateY(-4px); border-color:var(--clr-primary-dark); }
body .story-card a{ display:block; color:inherit; text-decoration:none; }
body .story-card__cover{
aspect-ratio:2/3;
position:relative;
overflow:hidden;
}
body .story-card__cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body .story-card__cover-fallback{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
background:var(--clr-bg-card-hover);
color:var(--clr-text-faint);
opacity:0.5;
}
/* Same signature amber glow as .ep-story-card, so every card on the site —
homepage, archive, genre pages — carries the same branded accent. */
body .story-card__cover::before{
content:"";
position:absolute; inset:0;
background:radial-gradient(circle at 75% 15%, rgba(255,176,32,0.28), transparent 55%);
z-index:1;
pointer-events:none;
}
body .story-card__cover-overlay{
position:absolute; inset:0;
/* SECOND TIME THIS BUG HAS BITTEN: this selector (body .story-card__cover-overlay)
has higher specificity than the plain .story-card__cover-overlay in
style.css, so it's the one that actually renders on the live site —
style.css's copy was already lightened in an earlier fix, but this
one, the one that actually wins, was never touched, so covers were
still going out with the old heavy 92%-opacity darkening sitting
right over the real title in the artwork. Both files' copies must
be kept in sync whenever this changes — lightened to match
style.css's version now. */
background:linear-gradient(to bottom, transparent 50%, rgba(13,10,15,0.12) 75%, rgba(13,10,15,0.4) 100%);
}
body .story-card__trophy{
position:absolute; top:10px; left:10px; z-index:2;
font-size:14px; background:rgba(13,10,15,0.6); border-radius:50%;
width:26px; height:26px; display:flex; align-items:center; justify-content:center;
}
body .story-card__ep-chip{
position:absolute; bottom:10px; right:10px; z-index:2;
display:flex; align-items:center; gap:4px;
font-family:'JetBrains Mono',monospace; font-size:10px;
background:rgba(13,10,15,0.7); color:var(--clr-text);
padding:4px 8px; border-radius:100px;
}
body .story-card__info{ padding:14px 16px 16px; }
/* body .story-card__genre / __title removed — card-story.php no longer
outputs either; the cover art now carries the title, poster-style. */
body .story-card__stats{ display:flex; gap:12px; }
body .story-card__stat{
display:flex; align-items:center; gap:4px;
font-family:'JetBrains Mono',monospace; font-size:11px;
color:var(--clr-text-muted);
}
/* ============ COMMUNITY CARD ============
Theme-aware, not a permanently-dark island: white card + colored border/
icon in light mode, dark card in dark mode, driven entirely by the
existing --clr-bg-card token — same markup, no per-theme overrides
needed. Brand color (WhatsApp green / Telegram blue) lives in the icon
badge, border and CTA button via --ep-comm-accent, set per card
modifier class below. */
.ep-community-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
gap:18px;
}
.ep-community-card{
display:flex; flex-direction:column; gap:16px;
background:var(--clr-bg-card);
border:1.5px solid var(--ep-comm-border, rgba(240,234,216,0.12));
border-radius:16px;
padding:20px;
text-decoration:none;
color:inherit;
transition:border-color .2s ease, transform .2s ease;
}
.ep-community-card:hover{ transform:translateY(-3px); }
.ep-community-card__top{ display:flex; align-items:center; gap:12px; }
.ep-community-icon{
width:40px; height:40px; border-radius:10px; flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
background:var(--ep-comm-accent, var(--clr-primary));
color:var(--ep-comm-accent-ink, #1d0f14);
}
.ep-community-body{ min-width:0; }
.ep-community-body h4{
font-family:'Fraunces',serif; font-size:16px; font-weight:700;
margin:0; color:var(--clr-text); line-height:1.25;
}
.ep-community-body p{
font-size:12.5px; color:var(--clr-text-muted); line-height:1.5; margin:3px 0 0;
}
.ep-community-cta{
display:flex; align-items:center; justify-content:center; gap:6px;
background:var(--ep-comm-accent, var(--clr-primary));
color:var(--ep-comm-accent-ink, #1d0f14);
font-weight:700; font-size:13.5px; padding:11px; border-radius:9px;
transition:opacity .2s ease;
}
.ep-community-card:hover .ep-community-cta{ opacity:.88; }
.ep-community-card--telegram{ --ep-comm-accent:#2997F6; --ep-comm-accent-ink:#0f1d30; --ep-comm-border:rgba(41,151,246,0.28); }
.ep-community-card--whatsapp{ --ep-comm-accent:#25D366; --ep-comm-accent-ink:#0a2a20; --ep-comm-border:rgba(37,211,102,0.28); }
/* Mobile: collapse the tall stacked cards into compact single-row list
items so this section stops eating a whole screen. The full card is
already the link, so the big "Join channel" button was redundant — it
shrinks to a small round arrow on the right. Desktop keeps the roomier
stacked cards above. */
@media (max-width: 639px){
.ep-community-grid{ gap:10px; }
.ep-community-card{ flex-direction:row; align-items:center; gap:12px; padding:12px 14px; }
.ep-community-card__top{ flex:1 1 auto; min-width:0; }
.ep-community-icon{ width:38px; height:38px; }
.ep-community-body h4{ font-size:15px; }
.ep-community-body p{
font-size:11.5px; margin-top:1px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ep-community-cta{
margin-left:auto; flex:0 0 auto;
width:36px; height:36px; padding:0; border-radius:50%; gap:0;
font-size:0; /* hide the label text; the arrow