/*
* paywall_v2.css — styles for the redesigned in-article paywall blocks.
*
* Two block variants share the same visual frame (.paywall-v2-card):
* 1. Subscribe — anonymous OR logged-in without subscription. Renders
* a $1-promo strip when welcome_offer_state.available is true,
* otherwise a plain CTA to /pricing/.
* 2. News-pack open — user has remaining credits in a news_pack
* subscription. Big balance number + "Open" button.
*
* Visual language inherited from pricing_v2 / gift_v2:
* - Brand blue #245494 — primary CTA, locked-content lock
* - Emerald accent #059669 — "you have access" pack-unlock state
* - Card border #e7eaf1
* - Soft shadow 0 4px 24px rgba(17,24,39,0.06)
*
* Loaded via direct from the article controller (or via
* news_content_paid.tpl.php). Doesn't pollute the global stylesheet —
* scoped under .paywall-v2.
*/
.paywall-v2 {
margin: 24px 0 32px;
}
.paywall-v2-card {
max-width: 560px;
margin: 0 auto;
padding: 32px 28px 28px;
background: #ffffff;
border: 1px solid #e7eaf1;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(17, 24, 39, 0.06);
text-align: center;
}
/* ---------- Lock icon ---------- */
.paywall-v2-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin: 0 auto 16px;
border-radius: 50%;
background: #E8EEF6;
color: #245494;
}
.paywall-v2-icon svg {
width: 32px;
height: 32px;
}
/* News-pack open state uses an emerald variant — visual cue that this
is the "good news, you have access" branch, not the locked-out one. */
.paywall-v2-icon--unlock {
background: #D1FAE5;
color: #059669;
}
/* ---------- Title / body ---------- */
.paywall-v2-title {
margin: 0 0 10px;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
color: #111827;
}
.paywall-v2-body {
margin: 0 0 20px;
font-size: 15px;
line-height: 1.55;
color: #4b5563;
}
/* ---------- Welcome-offer strip (Subscribe block, only when active) ---------- */
/* Compact pill stack: label / amount / rollover / deadline. The whole
block sits between body copy and the CTA so the eye flows
title → description → offer → button. */
.paywall-v2-offer {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin: 0 0 20px;
padding: 14px 18px;
background: #f0f7ff;
border: 1px solid #c2d6ee;
border-radius: 10px;
}
.paywall-v2-offer-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #245494;
}
.paywall-v2-offer-amount {
font-size: 18px;
line-height: 1.2;
color: #111827;
}
.paywall-v2-offer-amount strong {
font-size: 26px;
font-weight: 800;
color: #245494;
}
/* Struck-through "was" price — same was/now idiom as .pricing-v2-price-old
on the Monthly card. We deliberately AVOID `text-decoration: line-through`
in favour of a hand-drawn SVG curve laid over the digits via ::after.
Two reasons (same as on the pricing card):
1. text-decoration breaks across inline boundaries — for "$10" the line
would visually disjoint between the $ symbol and the digits.
2. A single curved stroke across the whole block reads as a deliberate
"crossed out" gesture rather than mechanical underline. The SVG path
is a gentle quadratic bezier (M 1 7 Q 50 2 99 5) — looks hand-drawn,
draws the eye without shouting.
Brand red #C8101A matches the Trend logo accent — the strikethrough
becomes a brand cue, not just a generic "discount" line. */
.paywall-v2-offer-was {
position: relative;
display: inline-block;
font-size: 17px;
font-weight: 500;
color: #9ca3af;
margin-right: 8px;
}
.paywall-v2-offer-was::after {
content: '';
position: absolute;
/* Extend slightly past the text edges so the stroke enters/exits the
digits rather than starting flush — same 5px overshoot as on
.pricing-v2-price-old. */
left: -4px;
right: -4px;
top: 50%;
height: 10px;
transform: translateY(-50%);
pointer-events: none;
background: url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
}
.paywall-v2-offer-rollover {
font-size: 13px;
color: #6b7280;
}
.paywall-v2-offer-deadline {
font-size: 12px;
color: #9ca3af;
margin-top: 2px;
}
/* ---------- News-pack balance (open block) ---------- */
.paywall-v2-balance {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin: 0 0 16px;
}
.paywall-v2-balance-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #6b7280;
}
.paywall-v2-balance-num {
font-size: 36px;
font-weight: 800;
line-height: 1;
color: #059669;
}
/* ---------- Primary CTA ---------- */
.paywall-v2-cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 28px;
font-size: 15px;
font-weight: 700;
line-height: 1;
background: #245494;
color: #ffffff;
border: 1px solid #245494;
border-radius: 10px;
text-decoration: none;
cursor: pointer;
transition: background 120ms, border-color 120ms;
}
.paywall-v2-cta:hover {
background: #1d447a;
border-color: #1d447a;
}
.paywall-v2-cta:focus-visible {
outline: 2px solid #245494;
outline-offset: 2px;
}
/* News-pack open variant — emerald, matches the unlock-state icon. */
.paywall-v2-cta--open {
background: #059669;
border-color: #059669;
}
.paywall-v2-cta--open:hover {
background: #047857;
border-color: #047857;
}
/* ---------- Sign-in line (anonymous visitors only) ---------- */
.paywall-v2-signin {
margin: 16px 0 0;
font-size: 13px;
color: #6b7280;
}
.paywall-v2-signin a {
color: #245494;
font-weight: 600;
text-decoration: none;
margin-left: 4px;
}
.paywall-v2-signin a:hover {
text-decoration: underline;
}
/* ---------- Mobile ---------- */
@media (max-width: 600px) {
.paywall-v2 { margin: 18px 0 24px; }
.paywall-v2-card {
padding: 24px 18px 20px;
border-radius: 12px;
}
.paywall-v2-icon {
width: 56px;
height: 56px;
margin-bottom: 12px;
}
.paywall-v2-icon svg { width: 28px; height: 28px; }
.paywall-v2-title { font-size: 19px; }
.paywall-v2-body { font-size: 14px; }
.paywall-v2-offer-amount strong { font-size: 22px; }
.paywall-v2-balance-num { font-size: 32px; }
.paywall-v2-cta { height: 44px; padding: 0 22px; font-size: 14px; }
}