/* ============================================================ DRAFTRESEARCH.COM — PAYWALL VISUAL PRIMITIVES Loaded on every page that has Pro-gated content. Pairs with /shared/paywall.js, which decides which class to apply where. ============================================================ */ /* ── Tier classes set on by paywall.js ─────────────────────────── .dr-tier-anon — not signed in .dr-tier-free — signed in, no active subscription .dr-tier-pro — active or trialing subscription ─────────────────────────────────────────────────────────────────────── */ /* While paywall.js is figuring out the tier, hide gated content to avoid a flash where free users see Pro content for half a second. */ html:not(.dr-tier-anon):not(.dr-tier-free):not(.dr-tier-pro) [data-pro-gate] { visibility: hidden; } /* ── BLUR: content visible but unreadable for non-Pro ─────────────────── */ html:not(.dr-tier-pro) .dr-pro-blur { filter: blur(4px); user-select: none; pointer-events: none; position: relative; } /* Stronger blur for sensitive numbers (CarProj tier, Signal column, EV, etc.) */ html:not(.dr-tier-pro) .dr-pro-blur--strong { filter: blur(6px); } /* Full-block blur for entire rows/sections (Top 32 rows 11-32, league rows 4-5). Heavier blur + a subtle gradient overlay so the structure is visible but the data is unreadable. */ html:not(.dr-tier-pro) .dr-pro-blur--block { filter: blur(8px); user-select: none; pointer-events: none; } /* ── DIM/GRAY: content visible but de-emphasized (rows 11-32 etc.) ────── */ html:not(.dr-tier-pro) .dr-pro-dim { opacity: 0.32; pointer-events: none; user-select: none; } html:not(.dr-tier-pro) .dr-pro-dim::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(245,247,250,0) 0%, rgba(245,247,250,0.55) 70%, rgba(245,247,250,0.95) 100%); pointer-events: none; } /* ── PP league-row Make% lock (JF 2026-05-29): gray out the make% cell for any prospect not in the global Top 32. Replaces the prior "rows 4+ blurred" rule on .pp-league-row. Single-cell treatment, lighter than .dr-pro-blur--block. ─────────────────────────────── */ html:not(.dr-tier-pro) .pp-league-make.dr-pp-locked { color: #6b7280; opacity: 0.55; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } /* ── DISABLED: looks normal but clicks trigger the paywall ────────────── */ html:not(.dr-tier-pro) .dr-pro-disabled { cursor: pointer; opacity: 0.6; } html:not(.dr-tier-pro) .dr-pro-disabled:hover { opacity: 0.85; } /* ── HIDE: completely removed for non-Pro (rare, used sparingly) ──────── */ html:not(.dr-tier-pro) .dr-pro-only { display: none !important; } /* ── FREE-ONLY HINTS: visible only to free/anon users ─────────────────── */ .dr-free-only, .dr-anon-only { display: none; } html.dr-tier-free .dr-free-only, html.dr-tier-anon .dr-anon-only, html.dr-tier-free .dr-anon-only, html.dr-tier-anon .dr-free-only { display: initial; } /* ── UPGRADE BADGE: small "Pro" pill next to gated controls ───────────── */ .dr-pro-badge { display: inline-block; font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 7px; margin-left: 6px; border-radius: 999px; background: linear-gradient(135deg, #d4a028 0%, #b88820 100%); color: #fff; vertical-align: middle; } /* ── PAYWALL MODAL ────────────────────────────────────────────────────── */ .dr-paywall-overlay { position: fixed; inset: 0; background: rgba(10, 22, 40, 0.72); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 9999; animation: dr-paywall-fade-in 0.18s ease-out; } .dr-paywall-overlay[data-open="true"] { display: flex; } @keyframes dr-paywall-fade-in { from { opacity: 0; } to { opacity: 1; } } .dr-paywall-card { background: #f9f9f9; border-radius: 12px; padding: 40px 36px 32px; max-width: 460px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(0,0,0,0.4); text-align: center; position: relative; animation: dr-paywall-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes dr-paywall-pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .dr-paywall-close { position: absolute; top: 12px; right: 12px; background: none; border: none; width: 32px; height: 32px; cursor: pointer; font-size: 20px; color: #6B7A90; border-radius: 4px; transition: background 0.15s; } .dr-paywall-close:hover { background: rgba(0,0,0,0.06); color: #0a1628; } .dr-paywall-badge { display: inline-block; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, #d4a028 0%, #b88820 100%); color: #fff; margin-bottom: 16px; } .dr-paywall-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 30px; color: #0a1628; letter-spacing: -0.01em; line-height: 1.05; margin-bottom: 12px; } .dr-paywall-body { font-family: 'Inter', 'Barlow', sans-serif; font-size: 15px; color: #6B7A90; line-height: 1.55; margin-bottom: 28px; text-align: left; } .dr-paywall-lede { font-family: 'Inter', 'Barlow', sans-serif; font-size: 14px; color: #6B7A90; line-height: 1.55; margin: 0 0 14px; text-align: center; } .dr-paywall-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .dr-paywall-list li { font-family: 'Inter', 'Barlow', sans-serif; font-size: 14px; line-height: 1.45; color: #1B2A45; padding-left: 22px; position: relative; } .dr-paywall-list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #d4a028 0%, #b88820 100%); box-shadow: 0 0 0 3px rgba(212,160,40,0.12); } .dr-paywall-list li b, .dr-paywall-list li strong { color: #0a1628; font-weight: 700; } .dr-paywall-actions { display: flex; flex-direction: column; gap: 10px; } .dr-paywall-cta { display: inline-block; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 14px; padding: 13px 24px; border-radius: 6px; text-decoration: none; letter-spacing: 0.02em; cursor: pointer; border: none; transition: background 0.18s, transform 0.18s; } .dr-paywall-cta--primary { background: #0a1628; color: #fff; } .dr-paywall-cta--primary:hover { background: #1a2a4a; } .dr-paywall-cta--secondary { background: transparent; color: #0a1628; border: 1.5px solid #0a1628; } .dr-paywall-cta--secondary:hover { background: #0a1628; color: #fff; } .dr-paywall-fineprint { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.05em; color: #8A97AB; margin-top: 16px; } /* ── FLOATING CTA: hovers over a blurred section, prompts upgrade ─────── */ /* Used on PP Top 32 (rows 11-32 area), PP league cards (rows 4-5 area), and ReDraft results leaderboard (rows beyond top 3 + user + actual). */ .dr-pro-cta-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; background: linear-gradient(135deg, #0a1628 0%, #112544 100%); border: 1px solid rgba(212, 160, 40, 0.45); border-radius: 10px; padding: 16px 22px; box-shadow: 0 8px 28px rgba(10, 22, 40, 0.32), 0 0 0 4px rgba(255, 255, 255, 0.4); text-align: center; pointer-events: auto; max-width: min(360px, calc(100% - 32px)); } /* Sticky variant — stays in view as you scroll inside a long blurred region. Combined with the overlay container being position:relative. */ .dr-pro-cta-overlay--sticky { position: sticky; top: 96px; left: auto; transform: none; margin: 12px auto; display: block; } .dr-pro-cta-overlay-eyebrow { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #d4a028; margin-bottom: 6px; } .dr-pro-cta-overlay-title { font-family: 'Inter', 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.25; color: #ffffff; margin-bottom: 10px; } .dr-pro-cta-overlay-btn { display: inline-block; background: linear-gradient(135deg, #d4a028 0%, #b88820 100%); color: #1a1400; font-family: 'Inter', 'Barlow', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; padding: 8px 16px; border-radius: 6px; text-decoration: none; cursor: pointer; border: none; transition: transform 0.15s, box-shadow 0.15s; } .dr-pro-cta-overlay-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212, 160, 40, 0.4); } /* Wrapper that anchors absolute children — apply to whatever container holds the blurred content so the overlay positions correctly. */ .dr-pro-blur-region { position: relative; } /* ── CORNER BADGE: top-right "Unlock with Pro" pill on cards ──────────── */ .dr-pro-corner-badge { position: absolute; top: 12px; right: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #d4a028 0%, #b88820 100%); color: #1a1400; font-family: 'Inter', 'Barlow', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; text-decoration: none; cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(212, 160, 40, 0.3); transition: transform 0.15s, box-shadow 0.15s; white-space: nowrap; } .dr-pro-corner-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(212, 160, 40, 0.45); } .dr-pro-corner-badge::before { content: '★'; font-size: 11px; line-height: 1; } /* ── INLINE COUNTER: trade calc remaining-trades indicator ────────────── */ .dr-pro-counter { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: #6B7A90; padding: 6px 12px; background: rgba(212, 160, 40, 0.08); border: 1px solid rgba(212, 160, 40, 0.25); border-radius: 6px; } .dr-pro-counter strong { font-family: 'Inter', 'Barlow', sans-serif; font-weight: 700; color: #d4a028; font-size: 13px; } .dr-pro-counter--exhausted { background: rgba(217, 69, 53, 0.08); border-color: rgba(217, 69, 53, 0.3); color: #d94535; } .dr-pro-counter--exhausted strong { color: #d94535; } .dr-pro-counter-link { font-family: 'Inter', 'Barlow', sans-serif; font-weight: 700; color: #d4a028; text-decoration: none; font-size: 11px; border-bottom: 1px dotted #d4a028; } .dr-pro-counter-link:hover { color: #b88820; border-bottom-color: #b88820; } /* ── WATCHLIST: star button + floating widget + modal ─────────────────── */ .dr-watch-star { background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #B4BDC9; transition: color 0.15s, transform 0.15s; vertical-align: middle; } .dr-watch-star:hover { color: #d4a028; transform: scale(1.15); } .dr-watch-star.is-watched { color: #d4a028; } .dr-watch-star.is-watched:hover { color: #b88820; } /* Floating "View Watchlist" widget — bottom-right of viewport */ .dr-watch-widget { position: fixed; bottom: 22px; right: 22px; z-index: 200; background: linear-gradient(135deg, #0a1628 0%, #112544 100%); color: #ffffff; border: 1px solid rgba(212, 160, 40, 0.4); border-radius: 999px; padding: 10px 18px 10px 14px; font-family: 'Inter', 'Barlow', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; cursor: pointer; display: none; align-items: center; gap: 8px; box-shadow: 0 6px 22px rgba(10, 22, 40, 0.35); transition: transform 0.15s, box-shadow 0.15s; } .dr-watch-widget:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(10, 22, 40, 0.45); } .dr-watch-widget.is-visible { display: inline-flex; } .dr-watch-widget-star { color: #d4a028; font-size: 15px; line-height: 1; } .dr-watch-widget-count { background: #d4a028; color: #1a1400; font-family: 'Inter', monospace; font-weight: 800; font-size: 11px; padding: 1px 7px; border-radius: 999px; margin-left: 2px; } /* Watchlist modal */ .dr-watch-modal { position: fixed; inset: 0; background: rgba(10, 22, 40, 0.72); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 9998; padding: 16px; } .dr-watch-modal.is-open { display: flex; } .dr-watch-modal-card { background: #f9f9f9; border-radius: 12px; padding: 28px; max-width: 560px; width: 100%; max-height: 78vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .dr-watch-modal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .dr-watch-modal-title { font-family: 'Inter', 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; color: #0a1628; letter-spacing: -0.01em; } .dr-watch-modal-close { background: none; border: none; font-size: 22px; color: #6B7A90; cursor: pointer; width: 32px; height: 32px; border-radius: 4px; } .dr-watch-modal-close:hover { background: rgba(0,0,0,0.06); color: #0a1628; } .dr-watch-modal-sub { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #6B7A90; margin-bottom: 18px; } .dr-watch-modal-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; border-top: 1px solid #E8ECF1; } .dr-watch-modal-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid #E8ECF1; } .dr-watch-row-name { font-family: 'Inter', 'Barlow', sans-serif; font-weight: 600; font-size: 14px; color: #0a1628; } .dr-watch-row-meta { display: block; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.04em; color: #6B7A90; font-weight: 400; margin-top: 2px; } .dr-watch-row-prob { font-family: 'Inter', 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; color: #d4a028; } .dr-watch-row-remove { background: none; border: none; color: #B4BDC9; cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 4px; } .dr-watch-row-remove:hover { color: #d94535; background: rgba(217,69,53,0.08); } .dr-watch-empty { padding: 32px 16px; text-align: center; font-family: 'Inter', 'Barlow', sans-serif; font-size: 14px; color: #6B7A90; } /* ── SOFT WALL: in-page banner replacing content after session limit ──── */ .dr-soft-wall { background: linear-gradient(135deg, #0a1628 0%, #122040 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 32px 28px; text-align: center; color: #fff; margin: 24px 0; } .dr-soft-wall-eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #d4a028; margin-bottom: 10px; } .dr-soft-wall-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -0.01em; line-height: 1.05; margin-bottom: 10px; } .dr-soft-wall-body { font-family: 'Barlow', sans-serif; font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 20px; line-height: 1.55; max-width: 420px; margin-left: auto; margin-right: auto; } .dr-soft-wall .dr-paywall-cta--primary { background: #d4a028; color: #1a1400; } .dr-soft-wall .dr-paywall-cta--primary:hover { background: #b88820; } .dr-soft-wall .dr-paywall-cta--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); } .dr-soft-wall .dr-paywall-cta--secondary:hover { background: rgba(255,255,255,0.08); color: #fff; }