/* ========================================================================== Content Locker — Frontend Styles Critical blur/overlay CSS is also inlined in via Assets::inline_critical_css() for zero-FOUC. These styles cover the rest of the lock UI. ========================================================================== */ /* ---------- Full-Page Modal Lock ---------- */ .cl-locked-wrapper { position: relative; } .cl-locked-content { filter: blur(8px); user-select: none; pointer-events: none; transition: filter 0.4s ease; } /* Overlay covers viewport below site header. --cl-header-height is set by ThemeCompat or JS auto-detect so the site nav stays visible. */ .cl-modal-overlay { position: fixed; top: var(--cl-header-height, 0px); left: 0; right: 0; bottom: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: cl-fade-in 0.3s ease; } /* Logged-in visitors are verified client-side. Never leave an invisible modal intercepting the page if frontend JavaScript is delayed or unavailable. */ .cl-member-pending .cl-modal-overlay, .cl-member-pending .cl-inline-box-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .cl-member-pending.cl-verify-failed .cl-modal-overlay, .cl-member-pending.cl-verify-failed .cl-inline-box-overlay { opacity: 1; pointer-events: auto; } .cl-modal-card { background: #ffffff; border-radius: 12px; padding: 24px 28px 20px; max-width: 440px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); border: 1px solid rgba(0, 0, 0, 0.08); text-align: center; position: relative; } /* Close/dismiss button — dismisses modal without unlocking, scrolls to locked content */ .cl-modal-close { position: absolute; top: 12px; right: 12px; z-index: 1; background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: #888; padding: 6px 10px; border-radius: 4px; transition: background 0.15s, color 0.15s; } .cl-modal-close:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; } .cl-modal-close:hover { background: #f3f4f6; color: #111; } /* Constrain MemberPress forms inside lock cards */ .cl-modal-card .mp_wrapper, .cl-modal-card .mepr-form, .cl-inline-box-card .mp_wrapper, .cl-inline-box-card .mepr-form { text-align: left; } /* --- Compact form rows --- */ .cl-modal-card .mepr-form .mp-form-row, .cl-inline-box-card .mepr-form .mp-form-row { margin-bottom: 6px; } .cl-modal-card .mepr-form .mp-form-label, .cl-inline-box-card .mepr-form .mp-form-label { margin-bottom: 2px; } .cl-modal-card .mepr-form .mp-form-label label, .cl-inline-box-card .mepr-form .mp-form-label label { font-size: 0.82rem; font-weight: 600; color: #374151; } /* Tighten paragraph spacing MemberPress injects */ .cl-modal-card .mepr-form p, .cl-inline-box-card .mepr-form p { margin: 0 0 2px; } .cl-modal-card .mepr-form input[type="text"], .cl-modal-card .mepr-form input[type="email"], .cl-modal-card .mepr-form input[type="password"], .cl-inline-box-card .mepr-form input[type="text"], .cl-inline-box-card .mepr-form input[type="email"], .cl-inline-box-card .mepr-form input[type="password"] { width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; box-sizing: border-box; } .cl-modal-card .mepr-form input[type="submit"], .cl-modal-card .mepr-form .mepr-submit, .cl-inline-box-card .mepr-form input[type="submit"], .cl-inline-box-card .mepr-form .mepr-submit { width: 100%; padding: 10px 16px; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 4px; } .cl-modal-card .mepr-form input[type="submit"]:hover, .cl-inline-box-card .mepr-form input[type="submit"]:hover { background: #1d4ed8; } /* --- Hide "Price: Free" row (unnecessary noise) --- */ .cl-modal-card .mepr_price, .cl-inline-box-card .mepr_price { display: none; } /* --- Hide password show/hide buttons (dashicons don't load, renders as gray box) --- */ .cl-modal-card .mp-hide-pw > button, .cl-inline-box-card .mp-hide-pw > button { display: none; } /* Make password wrapper not flex when toggle is hidden */ .cl-modal-card .mp-hide-pw, .cl-inline-box-card .mp-hide-pw { display: block; } /* --- Hide validation errors until form is actually submitted --- */ .cl-modal-card .mepr-form .cc-error, .cl-inline-box-card .mepr-form .cc-error, .cl-modal-card .mepr-form .mepr-form-has-errors, .cl-inline-box-card .mepr-form .mepr-form-has-errors { display: none; } /* Show errors only after user attempts submit (JS adds this class) */ .cl-modal-card .mepr-form.cl-show-errors .cc-error, .cl-inline-box-card .mepr-form.cl-show-errors .cc-error { display: block; color: #dc2626; font-size: 0.78rem; margin-top: 1px; } .cl-modal-card .mepr-form.cl-show-errors .mepr-form-has-errors, .cl-inline-box-card .mepr-form.cl-show-errors .mepr-form-has-errors { display: block; color: #dc2626; font-size: 0.82rem; margin-top: 6px; } /* --- Tighten spacer --- */ .cl-modal-card .mepr_spacer, .cl-inline-box-card .mepr_spacer { display: none; } /* --- Compact modal card headings/text in lock context --- */ .cl-modal-card h2 { margin-bottom: 4px; } .cl-modal-card > div > p, .cl-modal-card .wp-block-group > p { margin-bottom: 12px; } /* Compact inline box heading */ .cl-inline-box-card h3 { margin-bottom: 4px; } .cl-inline-box-card > div > p, .cl-inline-box-card .wp-block-group > p { margin-bottom: 10px; } /* Tighten separator above "Already a member" */ .cl-modal-card .wp-block-separator, .cl-inline-box-card .wp-block-separator { margin: 10px 0 8px; } /* "Already a member" text */ .cl-modal-card .has-small-font-size, .cl-inline-box-card .has-small-font-size { margin-bottom: 0; } /* Kill stray
tags MemberPress injects between elements */ .cl-modal-card .mepr-form br, .cl-inline-box-card .mepr-form br { display: none; } /* Hide the loading gif and "please fix errors" by default */ .cl-modal-card .mepr-loading-gif, .cl-inline-box-card .mepr-loading-gif { display: none !important; } /* Tighten the submit row */ .cl-modal-card .mp-form-submit, .cl-inline-box-card .mp-form-submit { margin-top: 4px; } /* Visually hidden honeypot — ensure it stays hidden */ .cl-modal-card .mepr-visuallyhidden, .cl-inline-box-card .mepr-visuallyhidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .cl-modal-card h2 { margin-top: 0; margin-bottom: 12px; font-size: 1.75rem; font-weight: 700; color: #1a1a2e; } .cl-modal-card p { color: #555; line-height: 1.6; margin-bottom: 24px; } /* Mobile: full-screen scrollable modal (below header) */ @media (max-width: 600px) { .cl-modal-overlay { align-items: flex-start; } .cl-modal-card { width: 100%; max-width: 100%; max-height: calc(100vh - var(--cl-header-height, 0px)); min-height: calc(100vh - var(--cl-header-height, 0px)); border-radius: 0; padding: 48px 20px 32px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cl-modal-close { position: fixed; top: calc(var(--cl-header-height, 0px) + 8px); right: 8px; z-index: 100002; background: rgba(255, 255, 255, 0.9); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } } /* ---------- MemberPress Checkout in Modal ---------- */ /* When a MemberPress registration link is clicked, the modal card expands to show the checkout page in an iframe — no page navigation required. */ .cl-modal-card.cl-checkout-active { max-width: 560px; width: 95%; max-height: calc(100vh - var(--cl-header-height, 0px) - 40px); } .cl-checkout-iframe { width: 100%; min-height: 480px; border: none; border-radius: 8px; background: #f9fafb; } .cl-checkout-back { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; font-size: 0.85rem; color: #6b7280; cursor: pointer; padding: 4px 0; margin-bottom: 8px; transition: color 0.15s; } .cl-checkout-back:hover { color: #111; } .cl-checkout-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; color: #6b7280; font-size: 0.9rem; } .cl-checkout-status { min-height: 1.5em; margin: 4px 0 10px; font-size: 0.875rem; color: #374151; } .cl-checkout-status-error { color: #991b1b; } .cl-checkout-recovery { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; } .cl-checkout-new-tab, .cl-checkout-login, .cl-checkout-check { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border: 1px solid #111827; border-radius: 4px; background: #ffffff; color: #111827; font: inherit; font-size: 0.875rem; text-decoration: none; cursor: pointer; } .cl-checkout-new-tab { background: #111827; color: #ffffff; } .cl-checkout-new-tab:focus-visible, .cl-checkout-login:focus-visible, .cl-checkout-check:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; } body.cl-modal-open { overflow: hidden; } /* ---------- Unlocked State ---------- */ .cl-locked-wrapper.cl-unlocked .cl-locked-content { filter: none; pointer-events: auto; user-select: auto; } .cl-locked-wrapper.cl-unlocked .cl-modal-overlay { animation: cl-fade-out 0.35s ease forwards; pointer-events: none; } /* ---------- Inline Box Lock (WPRM) ---------- */ .cl-inline-lock-wrapper { position: relative; --cl-inline-preview-height: min(62vh, 620px); } .cl-recipe-gate-partial:not(.cl-unlocked) .wprm-recipe-instructions-container { position: relative; max-height: var(--cl-inline-preview-height); overflow: hidden; filter: blur(5px); -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 55%, transparent 100% ); mask-image: linear-gradient( to bottom, #000 0%, #000 55%, transparent 100% ); pointer-events: none; user-select: none; transition: filter 0.4s ease; } /* Keep the preview intentionally short. Sections after Instructions return automatically when .cl-unlocked removes this selector from consideration. */ .cl-recipe-gate-partial:not(.cl-unlocked) .wprm-recipe-instructions-container ~ * { display: none; } /* Non-standard or structurally unsafe WPRM templates retain a safe whole-card fallback instead of exposing later recipe sections. */ .cl-recipe-gate-full:not(.cl-unlocked) .wprm-recipe-container { filter: blur(6px); pointer-events: none; user-select: none; transition: filter 0.4s ease; } /* The CTA now sits in normal flow immediately before WPRM Instructions. */ .cl-inline-box-overlay { position: relative; z-index: 10; display: flex; justify-content: center; margin: clamp(24px, 5vw, 48px) 0 -18px; padding: 0 16px 20px; pointer-events: none; } /* Restore interactivity on the card itself */ .cl-inline-box-overlay .cl-inline-box-card { pointer-events: auto; } .cl-inline-box-card { background: #ffffff; border: 1px solid rgba(17, 24, 39, 0.1); border-radius: 12px; padding: 24px 28px; max-width: 480px; width: 92%; box-shadow: 0 12px 36px rgba(17, 24, 39, 0.2); text-align: center; } /* Maintain accessible tap targets for both Gutenberg buttons and embedded forms. */ .cl-inline-box-card .wp-block-button__link, .cl-inline-box-card .wp-element-button, .cl-inline-box-card button, .cl-inline-box-card input[type="submit"] { min-height: 44px; } .cl-inline-box-card :where(a, button, input):focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; } /* Make inputs and form elements fill the card width in inline box */ .cl-inline-box-card .mp_wrapper, .cl-inline-box-card .mepr-form { width: 100%; } .cl-inline-box-card .mepr-form .mp-form-row { width: 100%; } /* Override WP block group flex layout that constrains child width */ .cl-inline-box-card .wp-block-group.is-layout-flex { gap: 4px; } .cl-inline-box-card .wp-block-group .mp_wrapper { width: 100%; } .cl-inline-box-card h3 { margin-top: 0; font-size: 1.25rem; font-weight: 700; color: #1a1a2e; } /* Inline box unlocked state */ .cl-inline-lock-wrapper.cl-unlocked .wprm-recipe-container, .cl-inline-lock-wrapper.cl-unlocked .wprm-recipe-instructions-container { filter: none; pointer-events: auto; user-select: auto; max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; } .cl-inline-lock-wrapper.cl-unlocked .cl-inline-box-overlay { display: none; } /* ---------- Inline Box — Mobile Overrides ---------- */ /* Tested at 390×844 (iPhone 15) and 360×800 (Android). Goal: CTA card visible in first viewport, touchable, not hidden behind mobile sticky bars. */ @media (max-width: 600px) { .cl-inline-lock-wrapper { --cl-inline-preview-height: min(56vh, 440px); } .cl-inline-box-overlay { margin-top: 28px; margin-bottom: -12px; padding: 0 10px 16px; } .cl-inline-box-card { /* Slightly more compact card on small screens */ padding: 16px 20px; /* Full-width card with breathing room */ width: 96%; max-width: none; /* Ensure minimum touch height per WCAG 2.5.5 (44px target areas) */ min-height: 44px; } } /* ---------- Noscript fallback ---------- */ .cl-noscript { background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; padding: 12px 16px; text-align: center; color: #856404; font-size: 0.9rem; } /* ---------- Keyframes ---------- */ @keyframes cl-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cl-fade-out { from { opacity: 1; } to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cl-modal-overlay, .cl-locked-content, .cl-recipe-gate-full:not(.cl-unlocked) .wprm-recipe-container { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }