feat(ui): implement client-side [PAYWALL_TRIGGER] token parser, styling and tests

This commit is contained in:
2026-06-06 11:07:21 +02:00
parent 93133a49b6
commit e9bb51af77
4 changed files with 232 additions and 48 deletions
@@ -106,27 +106,25 @@
}
/* Paywall Blur Styles */
.teaser-blur {
.paywall-teaser {
position: relative;
filter: blur(5px);
margin-bottom: 1.5rem;
-webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
filter: blur(2px);
pointer-events: none;
-webkit-user-select: none;
user-select: none;
opacity: 0.35;
margin-top: 1rem;
margin-bottom: 1.5rem;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
}
/* Upsell Card */
.upsell-card {
background: #1a1a1e;
border-radius: 12px;
border: 1px solid rgba(16, 185, 129, 0.2);
border: 1px solid rgba(16, 185, 129, 0.25);
padding: 1.5rem;
margin-top: 1rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08), 0 4px 12px rgba(0, 0, 0, 0.4);
animation: card-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}