/* Paywall component styling. * * Two siblings live inside a `.paywall-section`: * - `.paywall-content` (hidden by default; revealed when entitled) * - `.paywall-card` (injected by paywall.js; the CTA surface) * * Keep the visual weight modest — this lives next to dossier content * and should not compete with the underlying research for attention. */ .paywall-section .paywall-content { display: none; } .paywall-section.is-unlocked .paywall-content { display: block; } .paywall-section.is-unlocked .paywall-card { display: none; } .paywall-card { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; padding: 20px 22px; background: #fafafa; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1a1a1a; max-width: 540px; } .paywall-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; } .paywall-card p { margin: 0 0 12px; color: #4a4a4a; } .paywall-card .paywall-cta { display: inline-block; padding: 9px 16px; background: #1a1a1a; color: #fff; border: 0; border-radius: 6px; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; } .paywall-card .paywall-cta:hover { background: #333; } .paywall-card .paywall-cta[disabled] { background: #888; cursor: not-allowed; } .paywall-card .paywall-secondary { margin-left: 8px; color: #555; font-size: 13px; text-decoration: underline; } .paywall-card .paywall-meta { margin-top: 10px; font-size: 12px; color: #777; } .paywall-card .paywall-error { margin-top: 10px; color: #b00020; font-size: 13px; } /* ---- pass gate: blurred paid fields -------------------------------------- * * Any element with .paid-blur is unreadable until /api/me reports an * active pass, at which point paywall.js adds `has-pass` to . * This is deliberate client-side-only gating for low-stakes scalar * fields (the full dossier is server-gated — see api/dossier_content.py). */ .paid-blur { filter: blur(5px); user-select: none; pointer-events: none; } body.has-pass .paid-blur { filter: none; user-select: auto; pointer-events: auto; } .paid-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #92400e; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 4px; padding: 2px 7px; vertical-align: middle; text-decoration: none; line-height: 1.4; cursor: pointer; } .paid-chip::before { content: ""; display: inline-block; width: 9px; height: 9px; flex: 0 0 auto; background: url('data:image/svg+xml,') no-repeat center / contain; } a.paid-chip:hover { background: #fde68a; text-decoration: none; } body.has-pass .paid-chip { display: none; } /* ---- unlocked dossier article -------------------------------------------- */ .dossier-article { font-size: 15px; line-height: 1.65; } .dossier-article h1 { font-size: 24px; line-height: 1.3; margin: 0 0 14px; } .dossier-article h2 { font-size: 18px; margin: 26px 0 10px; } .dossier-article h3 { font-size: 15px; margin: 20px 0 8px; } .dossier-article p { margin: 0 0 12px; } .dossier-article ul { margin: 0 0 14px; padding-left: 22px; } .dossier-article li { margin-bottom: 6px; } .dossier-article code { background: rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 1px 5px; font-size: 13px; }