/** * re:appointment — frontend modal + portal. * * Loaded only on pages where a [reappointment] shortcode actually renders. * The portal lives at level (see Reappt_Frontend::render_portal) so * parent overflow/transform/z-index can't trap or clip the modal. */ /* Button hover color — inline styles can't express :hover, so the static bg * and hover bg are passed as custom properties on the button element. */ .reappt-button:hover { background-color: var(--reappt-btn-bg-hover) !important; } .reappt-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .reappt-button__icon:empty { display: none; } /* Default breathing room between the logo and a button placed in the header * slot next to it. Header-only; other placements are unaffected. The per-button * margin field still wins since it sets margin on the button element itself. */ .reappt-placement--header-after-branding, .reappt-placement--header-mobile { margin-right: 1.75rem; } /* Portal root */ #reappointment-portal { position: fixed; z-index: 999999; /* above everything, including the WP admin bar */ top: 0; left: 0; width: 100%; height: 100%; will-change: transform; /* keeps parent stacking contexts from trapping it */ pointer-events: none; } #reappointment-portal:empty { display: none; } /* Overlay */ .reappt-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); pointer-events: auto; opacity: 0; transition: opacity 0.25s ease; } /* Modal box */ .reappt-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%); background: #fff; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); width: 900px; /* overridden inline from button config */ height: 700px; /* overridden inline from button config */ display: flex; flex-direction: column; overflow: hidden; opacity: 0; pointer-events: auto; transition: opacity 0.25s ease, transform 0.25s ease; } /* Active (faded-in) state, toggled by JS on the next frame */ #reappointment-portal.is-open .reappt-overlay { opacity: 1; } #reappointment-portal.is-open .reappt-modal { opacity: 1; transform: translate(-50%, -50%); } /* Close button */ .reappt-modal__close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: #1a1a1a; cursor: pointer; font-size: 0; transition: background 0.15s ease; } .reappt-modal__close:hover { background: rgba(0, 0, 0, 0.1); } .reappt-modal__close svg { width: 16px; height: 16px; } /* Body fills the modal */ .reappt-modal__body { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; } /* Modal–iFrame type: the body's direct iframe fills the whole modal. */ .reappt-modal__body > iframe { display: block; width: 100%; height: 100%; border: 0; } /* Modal–HTML type: the user's markup sizes itself. The wrapper fills the available height so embeds that ask for height:100% still work, but we don't force a fixed height onto the user's own iframe (that collapses it). */ .reappt-modal__html { width: 100%; min-height: 100%; } .reappt-modal__html iframe { display: block; max-width: 100%; border: 0; } /* No-scroll on the page while a modal is open */ body.reappt-modal-open { overflow: hidden; } /* Mobile: shrink the configured size to fit with a comfortable margin, staying * a centered, rounded dialog rather than filling the whole screen. */ @media (max-width: 640px) { .reappt-modal { width: calc(100vw - 32px) !important; height: calc(100vh - 96px) !important; max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); border-radius: 12px; } }