/** * EBA Deck Modal — fullscreen iframe popup. */ html.eba-deck-modal-open, body.eba-deck-modal-open { overflow: hidden; } .eba-deck-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; inset: 0; z-index: 999999; display: none; align-items: stretch; justify-content: stretch; padding: 0 !important; margin: 0 !important; width: 100vw; height: 100vh; /* Use dvh on browsers that support it — fixes mobile safari address-bar issue */ height: 100dvh; } .eba-deck-modal.is-open { display: flex; animation: ebaDeckModalFade 0.25s ease-out; } @keyframes ebaDeckModalFade { from { opacity: 0; } to { opacity: 1; } } .eba-deck-modal__backdrop { position: absolute; inset: 0; background: #0f172a; cursor: pointer; } .eba-deck-modal__frame { position: absolute; inset: 0; width: 100%; height: 100%; background: #fafaf7; overflow: hidden; animation: ebaDeckModalSlide 0.35s ease-out; } @keyframes ebaDeckModalSlide { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } .eba-deck-modal__close, .eba-deck-modal__close:visited, button.eba-deck-modal__close { position: absolute; top: 16px; right: 16px; z-index: 10; width: 44px; height: 44px; border-radius: 50% !important; border: 0 !important; background: #0f172a !important; /* charcoal */ background-image: none !important; color: #d4a24c !important; /* gold icon */ cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.4); transition: background 0.18s, color 0.18s, transform 0.18s; backdrop-filter: blur(8px); text-shadow: none !important; padding: 0 !important; } .eba-deck-modal__close:hover, button.eba-deck-modal__close:hover { background: linear-gradient(135deg, #d4a24c, #e0b96b) !important; background-image: linear-gradient(135deg, #d4a24c, #e0b96b) !important; color: #0f172a !important; /* dark icon on gold bg */ transform: scale(1.08); } .eba-deck-modal__close:focus, button.eba-deck-modal__close:focus { outline: 2px solid #d4a24c; outline-offset: 3px; } .eba-deck-modal__close svg { display: block; } .eba-deck-modal__iframe { width: 100%; height: 100%; border: 0; display: block; background: #fafaf7; } .eba-deck-modal__loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; display: inline-flex; flex-direction: column; align-items: center; gap: 14px; color: #64748b; font-size: 14px; font-weight: 500; } .eba-deck-modal__spinner { width: 36px; height: 36px; border: 3px solid #eee9df; border-top-color: #d4a24c; border-radius: 50%; animation: ebaDeckSpin 0.9s linear infinite; } @keyframes ebaDeckSpin { to { transform: rotate(360deg); } } /* When the player page itself is loaded inside our iframe via ?eba_embed=1, we add a class to server-side to hide outer chrome (header/footer). See class-templates.php — eba_embed param handling. */ body.eba-iframe-embed { padding-top: 0 !important; margin-top: 0 !important; background: #fafaf7 !important; } body.eba-iframe-embed > header, body.eba-iframe-embed > footer, body.eba-iframe-embed .eba-header, body.eba-iframe-embed .eba-hdr, body.eba-iframe-embed .eba-footer, body.eba-iframe-embed .eba-ftr, body.eba-iframe-embed .site-header, body.eba-iframe-embed .site-footer, body.eba-iframe-embed #masthead, body.eba-iframe-embed #colophon, body.eba-iframe-embed #wpadminbar, body.eba-iframe-embed .elementor-location-header, body.eba-iframe-embed .elementor-location-footer, body.eba-iframe-embed [data-elementor-type="header"], body.eba-iframe-embed [data-elementor-type="footer"] { display: none !important; } /* Hide the deck-player's OWN close X — modal already shows its own close button. Keep the restart icon so users can replay the deck without exiting. */ body.eba-iframe-embed .eba-cpm__actions a.eba-cpm__icon-btn, body.eba-iframe-embed .eba-clp__actions a.eba-clp__icon-btn, body.eba-iframe-embed .eba-cpm__icon-btn[href]:not([data-cpm-restart]), body.eba-iframe-embed .eba-clp__icon-btn[href]:not([data-clp-restart]) { display: none !important; } html.eba-iframe-embed, body.eba-iframe-embed { padding-top: 0 !important; }