/* ========================================================= * LocalPublic Job Funnel — front-end styles * Colors are driven by CSS variables set inline via wp_head * (see lpjf_enqueue_scripts in main plugin file). * ========================================================= */ /* Fallbacks — used when variables are not set (e.g. cache miss) */ :root { --lpjf-cta-border: #f4b5c4; --lpjf-cta-bg: #fff8fa; --lpjf-cta-headline: #b34400; --lpjf-btn-bg: #57b846; --lpjf-btn-color: #ffffff; --lpjf-heading: #000000; --lpjf-pill-a: #e73486; --lpjf-pill-b: #c23289; --lpjf-pill-c: #6c2aae; --lpjf-pill-border: #63cdf3; --lpjf-pill-text: #ffffff; --lpjf-pill-seat: #f0ff00; --lpjf-int-border: #f2a63c; --lpjf-int-bg: #fffdf7; --lpjf-int-heading: #b34400; --lpjf-int-yes: #5cc25a; --lpjf-int-no: #e64545; --lpjf-int-btn-text: #ffffff; --lpjf-rw-border: #f2a63c; --lpjf-rw-bg: #fffdf7; --lpjf-rw-heading: #b34400; --lpjf-rw-sub: #4a4a4a; --lpjf-rw-btn-bg: #7cc474; --lpjf-rw-btn-color: #ffffff; } /* ---------- Step-1 Interest question ---------------- */ .lpjf-interest, .entry-content .lpjf-interest, .l-post .lpjf-interest, .the-post-header + .lpjf-interest, .main-content > .lpjf-interest { display: block !important; width: auto !important; border: 3px dashed var(--lpjf-int-border) !important; background: var(--lpjf-int-bg) !important; border-radius: 28px !important; padding: 15px 10px 15px !important; margin: 5px 0 5px 0 !important; text-align: center !important; max-width: none !important; box-sizing: border-box !important; box-shadow: 0 4px 22px rgba(178, 68, 0, 0.08) !important; } .lpjf-interest .lpjf-interest-heading, .entry-content .lpjf-interest .lpjf-interest-heading { color: var(--lpjf-int-heading) !important; font-size: 34px !important; font-weight: 800 !important; line-height: 1.3 !important; margin: 0 0 20px 0 !important; padding: 0 !important; font-family: inherit !important; text-align: center !important; letter-spacing: .2px !important; background: transparent !important; border: 0 !important; } .lpjf-interest .lpjf-interest-sub, .entry-content .lpjf-interest .lpjf-interest-sub { color: #4a4a4a !important; font-size: 19px !important; font-weight: 500 !important; margin: 0 0 26px 0 !important; padding: 0 !important; text-align: center !important; background: transparent !important; border: 0 !important; } .lpjf-interest .lpjf-interest-btns { display: flex !important; gap: 24px !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Buttons — extra defensive selectors, override any theme .l-post a rules */ .lpjf-interest .lpjf-int-btn, .entry-content .lpjf-interest a.lpjf-int-btn, .l-post .lpjf-interest a.lpjf-int-btn { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; padding: 16px 40px 16px 12px !important; border-radius: 60px !important; font-size: 24px !important; font-weight: 800 !important; text-decoration: none !important; color: var(--lpjf-int-btn-text) !important; line-height: 1 !important; letter-spacing: 1px !important; box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important; transition: transform .15s ease, filter .15s ease !important; border: 0 !important; min-width: 210px !important; box-sizing: border-box !important; } .lpjf-interest .lpjf-int-btn:hover, .lpjf-interest .lpjf-int-btn:focus { transform: translateY(-1px) !important; filter: brightness(.96) !important; color: var(--lpjf-int-btn-text) !important; text-decoration: none !important; } .lpjf-interest .lpjf-int-btn--yes { background: var(--lpjf-int-yes) !important; } .lpjf-interest .lpjf-int-btn--no { background: var(--lpjf-int-no) !important; } .lpjf-interest .lpjf-int-btn .lpjf-int-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 50% !important; background: #ffffff !important; font-size: 22px !important; font-weight: 900 !important; line-height: 1 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important; flex: 0 0 44px !important; } .lpjf-interest .lpjf-int-btn--yes .lpjf-int-icon { color: #2e7d32 !important; } .lpjf-interest .lpjf-int-btn--no .lpjf-int-icon { color: #c62828 !important; } @media (max-width: 640px) { .lpjf-interest { padding: 28px 14px 26px !important; border-radius: 22px !important; margin: 28px auto !important; } .lpjf-interest .lpjf-interest-heading { font-size: 22px !important; margin-bottom: 14px !important; } .lpjf-interest .lpjf-interest-sub { font-size: 15px !important; margin-bottom: 18px !important; } .lpjf-interest .lpjf-interest-btns { gap: 14px !important; } .lpjf-interest .lpjf-int-btn { font-size: 18px !important; padding: 12px 24px 12px 10px !important; min-width: 150px !important; gap: 10px !important; } .lpjf-interest .lpjf-int-btn .lpjf-int-icon { width: 34px !important; height: 34px !important; min-width: 34px !important; flex-basis: 34px !important; font-size: 18px !important; } } /* ===================================================================== * Button animations — gentle pulse + shine sweep + icon bounce * ================================================================== */ @keyframes lpjf-pulse { 0%, 100% { transform: translateZ(0) scale(1); box-shadow: 0 6px 18px rgba(0,0,0,0.18); } 50% { transform: translateZ(0) scale(1.04); box-shadow: 0 12px 28px rgba(0,0,0,0.28); } } @keyframes lpjf-shine { 0% { transform: translateX(-140%) skewX(-22deg); opacity: 0; } 18% { opacity: 1; } 60% { opacity: 1; } 100% { transform: translateX(240%) skewX(-22deg); opacity: 0; } } @keyframes lpjf-icon-bounce { 0%, 100% { transform: scale(1) rotate(0deg); } 40% { transform: scale(1.18) rotate(-6deg); } 60% { transform: scale(1.18) rotate(6deg); } } /* Apply to every funnel button — interest, reward, apply CTA */ .lpjf-interest a.lpjf-int-btn, .lpjf-reward-gate a.lpjf-reward-btn, .lpjf-apply-cta a.lpjf-yaha-dekhe { position: relative !important; overflow: hidden !important; animation: lpjf-pulse 2.4s ease-in-out infinite !important; will-change: transform !important; } .lpjf-interest a.lpjf-int-btn::before, .lpjf-reward-gate a.lpjf-reward-btn::before, .lpjf-apply-cta a.lpjf-yaha-dekhe::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 45% !important; height: 100% !important; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%) !important; animation: lpjf-shine 3.2s ease-in-out infinite !important; pointer-events: none !important; border-radius: inherit !important; } /* Slightly offset the shine on each button so they don't all pulse in unison */ .lpjf-interest a.lpjf-int-btn--no::before { animation-delay: 0.9s !important; } .lpjf-reward-gate a.lpjf-reward-btn::before { animation-delay: 0.5s !important; } .lpjf-interest a.lpjf-int-btn .lpjf-int-icon, .lpjf-reward-gate a.lpjf-reward-btn .lpjf-reward-icon, .lpjf-apply-cta a.lpjf-yaha-dekhe .lpjf-check { animation: lpjf-icon-bounce 2s ease-in-out infinite !important; transform-origin: center center !important; } /* Pause the pulse when the visitor hovers/focuses — clearer feedback */ .lpjf-interest a.lpjf-int-btn:hover, .lpjf-interest a.lpjf-int-btn:focus, .lpjf-reward-gate a.lpjf-reward-btn:hover, .lpjf-reward-gate a.lpjf-reward-btn:focus, .lpjf-apply-cta a.lpjf-yaha-dekhe:hover, .lpjf-apply-cta a.lpjf-yaha-dekhe:focus { animation-play-state: paused !important; } /* Accessibility — kill motion for users who ask for it */ @media (prefers-reduced-motion: reduce) { .lpjf-interest a.lpjf-int-btn, .lpjf-reward-gate a.lpjf-reward-btn, .lpjf-apply-cta a.lpjf-yaha-dekhe, .lpjf-interest a.lpjf-int-btn::before, .lpjf-reward-gate a.lpjf-reward-btn::before, .lpjf-apply-cta a.lpjf-yaha-dekhe::before, .lpjf-interest a.lpjf-int-btn .lpjf-int-icon, .lpjf-reward-gate a.lpjf-reward-btn .lpjf-reward-icon, .lpjf-apply-cta a.lpjf-yaha-dekhe .lpjf-check { animation: none !important; } } /* ---------- Reward Ad Gate --------------------------- */ .lpjf-reward-gate, .entry-content .lpjf-reward-gate, .l-post .lpjf-reward-gate, .main-content > .lpjf-reward-gate { display: block !important; width: auto !important; border: 3px dashed var(--lpjf-rw-border) !important; background: var(--lpjf-rw-bg) !important; border-radius: 28px !important; padding: 48px 28px 44px !important; margin: 24px 0 32px 0 !important; text-align: center !important; max-width: none !important; box-sizing: border-box !important; box-shadow: 0 4px 22px rgba(178, 68, 0, 0.08) !important; } .lpjf-reward-gate .lpjf-reward-heading, .entry-content .lpjf-reward-gate .lpjf-reward-heading { color: var(--lpjf-rw-heading) !important; font-size: 34px !important; font-weight: 800 !important; line-height: 1.3 !important; margin: 0 0 22px 0 !important; padding: 0 !important; text-align: center !important; font-family: inherit !important; letter-spacing: .2px !important; background: transparent !important; border: 0 !important; } .lpjf-reward-gate .lpjf-reward-sub, .entry-content .lpjf-reward-gate .lpjf-reward-sub { color: var(--lpjf-rw-sub) !important; font-size: 19px !important; font-weight: 500 !important; margin: 0 0 28px 0 !important; padding: 0 !important; text-align: center !important; background: transparent !important; border: 0 !important; } .lpjf-reward-gate .lpjf-reward-btn-wrap { display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } .lpjf-reward-gate .lpjf-reward-btn, .entry-content .lpjf-reward-gate a.lpjf-reward-btn, .l-post .lpjf-reward-gate a.lpjf-reward-btn { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; padding: 18px 44px 18px 14px !important; border-radius: 60px !important; font-size: 24px !important; font-weight: 800 !important; text-decoration: none !important; color: var(--lpjf-rw-btn-color) !important; background: var(--lpjf-rw-btn-bg) !important; line-height: 1 !important; letter-spacing: .3px !important; box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important; transition: transform .15s ease, filter .15s ease !important; border: 0 !important; min-width: 240px !important; box-sizing: border-box !important; cursor: pointer !important; } .lpjf-reward-gate .lpjf-reward-btn:hover, .lpjf-reward-gate .lpjf-reward-btn:focus { transform: translateY(-1px) !important; filter: brightness(.96) !important; color: var(--lpjf-rw-btn-color) !important; text-decoration: none !important; } .lpjf-reward-gate .lpjf-reward-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 50% !important; background: #ffffff !important; color: #2e7d32 !important; font-size: 22px !important; font-weight: 900 !important; line-height: 1 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important; flex: 0 0 44px !important; } @media (max-width: 640px) { .lpjf-reward-gate { padding: 30px 14px 28px !important; border-radius: 22px !important; margin: 20px 5px 24px 5px !important; } .lpjf-reward-gate .lpjf-reward-heading { font-size: 22px !important; margin-bottom: 14px !important; } .lpjf-reward-gate .lpjf-reward-sub { font-size: 15px !important; margin-bottom: 20px !important; } .lpjf-reward-gate .lpjf-reward-btn { font-size: 18px !important; padding: 14px 28px 14px 10px !important; min-width: 190px !important; gap: 10px !important; } .lpjf-reward-gate .lpjf-reward-icon { width: 34px !important; height: 34px !important; min-width: 34px !important; flex-basis: 34px !important; font-size: 18px !important; } } /* ---------- Apply CTA -------------------------------- */ .lpjf-apply-cta { border: 2px dashed var(--lpjf-cta-border); background: var(--lpjf-cta-bg); border-radius: 24px; padding: 34px 20px 30px; margin: 40px auto; text-align: center; max-width: 900px; box-sizing: border-box; } .lpjf-apply-headline { color: var(--lpjf-cta-headline); font-size: 26px; font-weight: 800; line-height: 1.35; margin-bottom: 26px; font-family: inherit; } .lpjf-apply-headline .lpjf-hand { color: #f2b64c; font-size: 28px; margin-right: 6px; } .lpjf-yaha-dekhe { display: inline-block; background: var(--lpjf-btn-bg); color: var(--lpjf-btn-color) !important; padding: 14px 34px 14px 26px; border-radius: 40px; font-size: 20px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,0.15); transition: transform .15s ease, filter .15s ease; } .lpjf-yaha-dekhe:hover, .lpjf-yaha-dekhe:focus { filter: brightness(.95); transform: translateY(-1px); } .lpjf-yaha-dekhe .lpjf-check { display: inline-block; width: 22px; height: 22px; line-height: 22px; background: #ffffff; color: #2e7d32; border-radius: 50%; font-size: 14px; font-weight: 900; margin-right: 10px; vertical-align: -3px; text-align: center; } /* ---------- Picker container ------------------------- */ .lpjf-picker { margin: 5px auto; max-width: 1080px; padding: 0 4px; box-sizing: border-box; } .lpjf-picker-heading { color: var(--lpjf-heading); font-size: 24px; font-weight: 800; margin: 0 0 22px 6px; font-family: inherit; letter-spacing: .2px; } /* ---------- Gradient pill list ----------------------- */ .lpjf-pill-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } .lpjf-pill-list > li { margin: 0 0 16px 0 !important; padding: 0 !important; list-style: none !important; } .lpjf-pill-list > li::before { content: none !important; } .lpjf-pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(90deg, var(--lpjf-pill-a) 0%, var(--lpjf-pill-b) 40%, var(--lpjf-pill-c) 100%); color: var(--lpjf-pill-text) !important; padding: 16px 22px; border-radius: 44px; text-decoration: none !important; font-size: 18px; font-weight: 500; line-height: 1.3; box-shadow: inset 0 0 0 1.5px var(--lpjf-pill-border), 0 3px 10px rgba(0,0,0,0.18); transition: transform .15s ease, filter .15s ease; } .lpjf-pill:hover, .lpjf-pill:focus { transform: translateY(-1px); filter: brightness(1.05); } .lpjf-pill-arrow-left { color: #ffe6a8; font-size: 15px; flex: 0 0 auto; line-height: 1; } .lpjf-pill-label { flex: 1 1 auto; text-align: center; color: var(--lpjf-pill-text); } .lpjf-pill-label em { color: var(--lpjf-pill-seat); font-style: normal; font-weight: 700; margin-left: 4px; } .lpjf-pill-arrow-right { color: var(--lpjf-pill-text); opacity: .95; font-size: 18px; font-weight: 700; flex: 0 0 auto; line-height: 1; } /* ---------- Mobile ---------------------------------- */ @media (max-width: 640px) { .lpjf-apply-cta { padding: 24px 14px 22px; border-radius: 20px; } .lpjf-design-card .lpjf-pill-label em{ display:block; } .lpjf-apply-headline { font-size: 20px; margin-bottom: 18px; } .lpjf-yaha-dekhe { font-size: 17px; padding: 12px 26px 12px 20px; } .lpjf-picker-heading { font-size: 20px; margin-bottom: 16px; } .lpjf-pill { font-size: 15px; padding: 14px 16px; border-radius: 36px; } .lpjf-pill-arrow-right { font-size: 16px; } } /* LPJF-FULLWIDTH-PILLS: make picker + role pills span full content width */ .lpjf-picker{width:100%;max-width:100%;margin-left:0;margin-right:0;grid-column:1 / -1;} .lpjf-pill-list{width:100%;} .lpjf-pill-list>li{width:100%;} .lpjf-pill{width:100%;} /* LPJF-STEP4-FULLWIDTH: reward gate / apply CTA span full grid width on archives */ .lpjf-reward-gate,.lpjf-apply-cta{grid-column:1 / -1;width:100%;max-width:100%;} /* LPJF-GREEN-BUTTONS: green double-ring animated pill for STEP-4 button ONLY (pills unchanged) */ .lpjf-reward-gate a.lpjf-reward-btn,.entry-content .lpjf-reward-gate a.lpjf-reward-btn,.l-post .lpjf-reward-gate a.lpjf-reward-btn,.lpjf-apply-cta a.lpjf-yaha-dekhe{position:relative!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;background:linear-gradient(180deg,#6cc23f 0%,#4fa62c 55%,#3c8a20 100%)!important;border:3px solid #2c7d1e!important;border-radius:999px!important;box-shadow:inset 0 0 0 4px #fff,0 0 0 0 rgba(90,178,48,.55),0 10px 22px rgba(40,110,25,.35)!important;color:#fff!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.4px!important;padding:18px 26px!important;min-height:64px!important;text-shadow:0 1px 2px rgba(0,0,0,.28)!important;transition:transform .18s ease,filter .18s ease!important;animation:lpjfGreenPulse 2.2s ease-in-out infinite,lpjfPop 1.5s ease-in-out infinite!important;} .lpjf-reward-gate a.lpjf-reward-btn::before,.lpjf-apply-cta a.lpjf-yaha-dekhe::before{content:""!important;position:absolute!important;top:0!important;left:-60%!important;width:38%!important;height:100%!important;background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent)!important;transform:skewX(-20deg)!important;pointer-events:none!important;border:0!important;margin:0!important;animation:lpjfGreenShine 3.4s ease-in-out infinite!important;} .lpjf-reward-gate .lpjf-reward-icon,.lpjf-apply-cta .lpjf-check{display:none!important;} .lpjf-reward-gate a.lpjf-reward-btn::after,.lpjf-apply-cta a.lpjf-yaha-dekhe::after{content:"\203A"!important;position:absolute!important;right:12px!important;top:50%!important;left:auto!important;width:38px!important;height:38px!important;background:#fff!important;color:#2f7d1c!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:24px!important;font-weight:900!important;box-shadow:0 2px 5px rgba(0,0,0,.2)!important;text-shadow:none!important;transform:translateY(-50%)!important;animation:lpjfGreenArrow 1.4s ease-in-out infinite!important;} .lpjf-reward-gate a.lpjf-reward-btn:hover,.lpjf-apply-cta a.lpjf-yaha-dekhe:hover{transform:translateY(-2px)!important;filter:brightness(1.07)!important;} @keyframes lpjfGreenPulse{0%,100%{box-shadow:inset 0 0 0 4px #fff,0 0 0 0 rgba(90,178,48,.55),0 10px 22px rgba(40,110,25,.35);}50%{box-shadow:inset 0 0 0 4px #fff,0 0 0 12px rgba(90,178,48,0),0 10px 22px rgba(40,110,25,.35);}} @keyframes lpjfGreenShine{0%{left:-60%}55%{left:130%}100%{left:130%}} @keyframes lpjfGreenArrow{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(3px)}} /* pop in / pop out (Step-4 button only) */ @keyframes lpjfPop{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @media(prefers-reduced-motion:reduce){.lpjf-reward-gate a.lpjf-reward-btn,.entry-content .lpjf-reward-gate a.lpjf-reward-btn,.l-post .lpjf-reward-gate a.lpjf-reward-btn,.lpjf-apply-cta a.lpjf-yaha-dekhe,.lpjf-reward-gate a.lpjf-reward-btn::before,.lpjf-apply-cta a.lpjf-yaha-dekhe::before,.lpjf-reward-gate a.lpjf-reward-btn::after,.lpjf-apply-cta a.lpjf-yaha-dekhe::after{animation:none!important;}} /* LPJF-GAP: tighten space between the interest box (Step 1) and the pill picker */ .main-content > .lpjf-interest,.l-post .lpjf-interest,.lpjf-interest{margin-bottom:14px!important;} .lpjf-picker{margin-top:10px!important;} /* LPJF-PILL-GAP: tighten vertical spacing between pills */ .lpjf-pill-list > li{margin-bottom:8px!important;} /* LPJF-INT-FIX: tighter interest box vertical spacing + remove glitchy YES/NO button shine band */ .lpjf-interest .lpjf-interest-heading,.entry-content .lpjf-interest .lpjf-interest-heading{margin-bottom:10px!important;} .lpjf-interest .lpjf-interest-sub,.entry-content .lpjf-interest .lpjf-interest-sub{margin-bottom:14px!important;} .lpjf-interest a.lpjf-int-btn::before,.entry-content .lpjf-interest a.lpjf-int-btn::before{display:none!important;} /* LPJF-INT-PAD: reduce top/bottom padding of the interest box on mobile (was 28/26) */ @media(max-width:640px){.lpjf-interest{padding:10px 16px 10px!important;}} /* LPJF-INT-COMPACT: further tighten interest box top/bottom (desktop + mobile) */ .lpjf-interest .lpjf-interest-heading,.entry-content .lpjf-interest .lpjf-interest-heading{margin-bottom:6px!important;} .lpjf-interest .lpjf-interest-sub,.entry-content .lpjf-interest .lpjf-interest-sub{margin-bottom:8px!important;} .lpjf-interest a.lpjf-int-btn,.entry-content .lpjf-interest a.lpjf-int-btn{padding-top:12px!important;padding-bottom:12px!important;} /* LPJF-CALL-BTN: Step-1 Call HR button — pop-in/pop-out animation (colour comes from inline gradient) */ .lpjf-call-btn{animation:lpjfCallPop 1.5s ease-in-out infinite!important;} @keyframes lpjfCallPop{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}} @media(prefers-reduced-motion:reduce){.lpjf-call-btn{animation:none!important;}} /* LPJF-REWARD-BTN-WIDTH: keep the Step-4 reward button full width (it's a flex item that shrank to content) */ .lpjf-reward-gate a.lpjf-reward-btn,.entry-content .lpjf-reward-gate a.lpjf-reward-btn,.l-post .lpjf-reward-gate a.lpjf-reward-btn,.lpjf-apply-cta a.lpjf-yaha-dekhe{width:100%!important;flex:1 1 100%!important;max-width:100%!important;} /* ========================================================= * LPJF-REWARD-LOCK: Blur the whole page behind a fixed * overlay until the reward ad on the Step-4 gate button * (.av-rewarded[data-av-rewarded="true"]) is completed. * The .lpjf-reward-gate itself is lifted above the overlay * so it stays sharp and clickable. * ========================================================= */ html.lpjf-reward-lock, body.lpjf-reward-lock { overflow: hidden !important; height: 100% !important; touch-action: none !important; } .lpjf-reward-overlay { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(15, 15, 25, 0.42) !important; -webkit-backdrop-filter: blur(12px) saturate(120%) !important; backdrop-filter: blur(12px) saturate(120%) !important; z-index: 999998 !important; pointer-events: auto !important; animation: lpjfRewardFade .28s ease-out both !important; } @keyframes lpjfRewardFade { from { opacity: 0; } to { opacity: 1; } } /* Lift the reward gate above the overlay and keep it sharp+clickable */ body.lpjf-reward-lock .lpjf-reward-gate { position: relative !important; z-index: 999999 !important; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255,255,255,0.05) !important; animation: lpjfRewardPop .35s cubic-bezier(.2,.9,.3,1.15) both !important; } @keyframes lpjfRewardPop { 0% { transform: scale(.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* Fallback for browsers without backdrop-filter: blur the page contents directly */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.lpjf-reward-lock > *:not(#lpjf-reward-overlay) { filter: blur(9px) !important; -webkit-filter: blur(9px) !important; } /* Un-blur the reward gate and all its ancestors so it stays sharp */ body.lpjf-reward-lock .lpjf-reward-gate, body.lpjf-reward-lock .lpjf-reward-gate * { filter: none !important; -webkit-filter: none !important; } } /* ========================================================= * LPJF-STEP4-PILL: Green pill + right-side white chevron * matching the reference screenshot. Scoped strictly to the * Step-4 reward gate's button so no other CTA is affected. * ========================================================= */ .lpjf-reward-gate .lpjf-reward-btn, .lpjf-reward-gate button.lpjf-reward-btn, .entry-content .lpjf-reward-gate .lpjf-reward-btn, .l-post .lpjf-reward-gate .lpjf-reward-btn { /* Reset native