/* * AI Workflow Toolkit — NPSOA free-tier upgrade modal. * * Loaded only on the member dashboard page AND only for users whose sole * role is aiwftk_npsoa_member (see AIWFTK_Public::enqueue_styles()). * * The modal itself is rendered by render_dashboard() inside the * .aiwftk-dashboard wrapper, with HTML `hidden` attribute set initially. * JavaScript (aiwftk-public.js, openUpgradeModal() / closeUpgradeModal()) * toggles the attribute to show and hide. * * Divi compatibility — brute-force version: * * The first iteration of this stylesheet used `body .aiwftk-dashboard` + * `!important` on a few key properties, following the project's existing * Divi CSS pattern. That wasn't enough — Divi's theme CSS still won on * the dialog's background, box-shadow, border-radius, and typography, * leaving the modal content floating un-contained over the dashboard * with the title rendered in Divi's big all-caps blue h2 treatment. * * This version takes no chances: * * - Every selector is prefixed with `body #aiwftk-npsoa-modal` — an * ID-qualified selector that beats almost anything Divi throws at * structural divs. * - Every visual property carries !important. Background, shadow, * radius, padding, font sizing, text-transform, font-family — if * the theme could plausibly override it, we force it. * - The title explicitly resets text-transform, font-family, letter- * spacing, line-height so Divi's h2 treatment (all-caps, theme font, * wide tracking) can't leak through. * - Both the overlay and the dialog have their backgrounds forced. * Even if one fails, the other provides the visual separation from * the dashboard behind. * * The cost is ugly-looking CSS. The benefit is the modal reliably looks * like a modal on a Divi site without requiring theme-level rule hunts * for whichever specific Divi selector is winning on any given property. * * Z-index policy: the modal sits above Divi's sticky header (z-index * 99999 in Divi). 2147483000 leaves room below the 32-bit int ceiling. * * @package AI_Workflow_Toolkit * @subpackage AI_Workflow_Toolkit/assets/css * @since 1.24.0 */ /* ============================================================== Root container — full-viewport fixed positioning. ============================================================== */ body #aiwftk-npsoa-modal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 2147483000 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; box-sizing: border-box !important; /* Own backdrop — fills the fixed container with a semi-transparent dark tint. The separate .aiwftk-npsoa-modal-overlay child is kept for the click-to-close target, but the dim itself lives here so we're guaranteed a visible backdrop even if the child's background gets stripped. */ background-color: rgba(17, 24, 39, 0.65) !important; /* * Fade-in / fade-out transitions. * * The modal's "closed" CSS state is opacity: 0 + visibility: hidden * + pointer-events: none — fully invisible, non-interactive, and * removed from the accessibility tree (visibility: hidden is the * AT-hide signal; we rely on that rather than also juggling * aria-hidden to avoid the aria-modal/aria-hidden conflict). * * Opening adds the .is-open class (see rule below) which transitions * opacity from 0 to 1 over 500ms and flips visibility instantly so * the fade is visible. Closing removes the class, which reverses * the opacity transition over 500ms and — via the `visibility 0s * linear 500ms` delay — flips visibility to hidden only AFTER the * opacity fade completes. That keeps screen readers from losing the * element mid-fade and prevents the element from being click- * interceptable after it's visually gone. * * The transitions carry !important because Divi occasionally sets * transition: all 0.3s ease on section/module children and we want * the modal's own timing to win. */ opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.5s ease, visibility 0s linear 0.5s !important; } body #aiwftk-npsoa-modal.is-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; /* Open direction: visibility changes immediately so we can see the fade start. Close direction (rule above) delays visibility until after the opacity fade ends. */ transition: opacity 0.5s ease, visibility 0s linear 0s !important; } /* * No-JS fallback. Keeps the server-rendered modal fully hidden when * JavaScript doesn't run. On page load with JS, aiwftk-public.js * strips the hidden attribute during init and from then on the * .is-open class controls visibility via the transitions above. */ body #aiwftk-npsoa-modal[hidden] { display: none !important; } /* * Respect prefers-reduced-motion. * Users who request reduced motion (OS-level setting) skip the fade * and get instant visibility toggles. Accessibility best practice * per WCAG 2.1 SC 2.3.3 (Animation from Interactions — AAA) and * common sense for vestibular-sensitive users. */ @media (prefers-reduced-motion: reduce) { body #aiwftk-npsoa-modal, body #aiwftk-npsoa-modal.is-open { transition: none !important; } } /* Lock body scroll while the modal is open. JS toggles this class on via openUpgradeModal() / closeUpgradeModal(). */ body.aiwftk-npsoa-modal-open { overflow: hidden !important; } /* ============================================================== Overlay — click target that fills the modal behind the dialog. Transparent by design because the backdrop now lives on the modal itself (above). Kept as a separate element so the click handler has a dedicated target that isn't the dialog's own chrome. ============================================================== */ body #aiwftk-npsoa-modal .aiwftk-npsoa-modal-overlay { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: transparent !important; cursor: pointer !important; } /* ============================================================== Dialog — the white card containing title, body, and actions. ============================================================== */ body #aiwftk-npsoa-modal .aiwftk-npsoa-modal-dialog { position: relative !important; z-index: 1 !important; /* stack above the overlay sibling */ background: #ffffff !important; background-color: #ffffff !important; border-radius: 10px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1) !important; max-width: 480px !important; width: 100% !important; padding: 36px 32px 28px !important; box-sizing: border-box !important; max-height: calc(100vh - 32px) !important; overflow-y: auto !important; text-align: left !important; } /* Close button — circular X in the top-right corner of the dialog. */ body #aiwftk-npsoa-modal .aiwftk-npsoa-modal-close { position: absolute !important; top: 10px !important; right: 10px !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; background: transparent !important; background-color: transparent !important; border: 0 !important; color: #6b7280 !important; font-size: 26px !important; font-weight: 400 !important; line-height: 1 !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; border-radius: 50% !important; transition: color 0.15s ease, background-color 0.15s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body #aiwftk-npsoa-modal .aiwftk-npsoa-modal-close:hover, body #aiwftk-npsoa-modal .aiwftk-npsoa-modal-close:focus { color: #111827 !important; background: #f3f4f6 !important; background-color: #f3f4f6 !important; } body #aiwftk-npsoa-modal .aiwftk-npsoa-modal-close:focus-visible { outline: 2px solid var(--aiwftk-primary, #2271b1) !important; outline-offset: 2px !important; } /* Kill Divi's ::after arrow on buttonish elements — the close button is a