(informational only) -
same visual card either way. Background is the uploaded thumbnail (inline style) when there is
one, else falls back to the same accent/secondary gradient other card-less blocks already use. */
.pub-countdown {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px 16px;
border-radius: 18px;
background: linear-gradient(135deg, var(--accent, #ff5f6d), var(--secondary, #0ea5e9));
background-size: cover;
background-position: center;
text-decoration: none;
color: #fff;
text-align: center;
overflow: hidden;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.pub-countdown:hover {
transform: translateY(-3px);
box-shadow: 0 16px 28px rgba(0, 0, 0, 0.26);
}
.pub-countdown-scrim {
position: absolute;
inset: 0;
z-index: 0;
background: rgba(10, 10, 20, 0.5);
pointer-events: none;
}
.pub-countdown-type-icon,
.pub-countdown-platform-icon {
position: absolute;
top: 12px;
z-index: 1;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(0, 0, 0, 0.32);
color: #fff;
font-size: 0.85rem;
}
.pub-countdown-type-icon {
left: 12px;
}
.pub-countdown-platform-icon {
right: 12px;
}
.pub-countdown-platform-icon svg {
width: 15px;
height: 15px;
}
.pub-countdown-heading {
position: relative;
z-index: 1;
font-weight: 800;
/* Clearly smaller than .pub-countdown-value's 2.3rem, not just technically - a long title
(e.g. "Grand Theft Auto VI: An Extended Look") shouldn't out-compete the countdown itself
for attention just by wrapping across more visual space than four short digits do. The
countdown is the whole point of this block; the title is a label for it, not a headline. */
font-size: 0.85rem;
letter-spacing: -0.01em;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
/* Reserves room for whatever sits absolutely-positioned in each top corner - .pub-countdown-
type-icon (left, always present) and .pub-countdown-platform-icon/.pub-countdown-notify-btn
(right, each conditional but never both at once in the same spot post-fix above) - a long
title truncates cleanly here instead of running underneath either one.
align-self: stretch overrides .pub-countdown's own align-items: center specifically for this
child - without a real, resolvable width to constrain against (align-items: center leaves
every flex item shrink-to-fit sized instead), max-width/overflow/text-overflow below were
silently no-ops: the box still sized itself to the full unwrapped text's natural width. */
align-self: stretch;
text-align: center;
max-width: 100%;
padding: 0 46px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
}
.pub-countdown-timer {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 14px;
}
.pub-countdown-unit {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 40px;
}
.pub-countdown-value {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 800;
font-size: 2.3rem;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pub-countdown-unit-label {
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.85;
}
/* Only present when the "Notify me" button renders (creators/index.php) - .pub-countdown itself
stays the direct .creator-blocks grid child the rest of this file assumes everywhere else, so
this wrapper only exists for the specific countdowns that need somewhere for the button to sit
outside the card's own
/