/* --------------------------------------------------------------------------- * Uros Invitation Editor — modal shell + product page trigger * Mobile first. The dialog is sized from --uie-app-height (set in JS from * visualViewport) so iOS/Android browser chrome can never hide the cart bar. * ------------------------------------------------------------------------- */ .uie-modal { --uie-ink: #16161a; --uie-muted: #6b6b74; --uie-line: #e3e3e8; --uie-line-strong: #cfcfd6; --uie-surface: #ffffff; --uie-surface-2: #f6f6f8; --uie-stage: #ececed; --uie-danger: #c0332f; /* The sheets sit beside .uie-direct-editor, not in it, so the tap size has to be defined here too or var(--uie-tap) collapses to nothing. */ --uie-tap: 44px; --uie-focus: 0 0 0 3px rgba(23, 23, 23, 0.18); --uie-safe-top: env(safe-area-inset-top, 0px); --uie-safe-bottom: env(safe-area-inset-bottom, 0px); --uie-safe-left: env(safe-area-inset-left, 0px); --uie-safe-right: env(safe-area-inset-right, 0px); /* Visual-viewport metrics, kept in sync by frontend-editor.js. There is deliberately no keyboard variable: visualViewport.height already shrinks when the on-screen keyboard opens, so --uie-app-height accounts for it. Adding a second offset would push the sheet up twice. */ --uie-viewport-offset: 0px; --uie-app-height: 100vh; position: fixed; inset: 0; z-index: 999999; display: none; font-family: var(--uie-interface-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @supports (height: 100dvh) { .uie-modal { --uie-app-height: 100dvh; } } .uie-modal.is-open { display: block; } .uie-modal *, .uie-modal *::before, .uie-modal *::after { box-sizing: border-box; } .uie-modal [hidden] { display: none !important; } .uie-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Scroll lock. JS also pins so iOS cannot rubber-band behind the modal. */ body.uie-modal-open { overflow: hidden !important; overscroll-behavior: none; touch-action: manipulation; } .uie-modal-overlay { position: absolute; inset: 0; background: rgba(14, 14, 16, 0.62); opacity: 0; transition: opacity 220ms ease; -webkit-tap-highlight-color: transparent; } .uie-modal.is-open .uie-modal-overlay { opacity: 1; } @supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) { .uie-modal-overlay { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } } /* The dialog tracks the *visual* viewport: when the mobile keyboard or the browser chrome appears, the editor shrinks instead of being cut off. */ .uie-modal-dialog { position: absolute; left: 0; right: 0; top: var(--uie-viewport-offset, 0px); display: flex; width: 100%; height: var(--uie-app-height); overflow: hidden; border-radius: 0; background: var(--uie-surface); transform: translateY(14px); opacity: 0; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease; } .uie-modal.is-open .uie-modal-dialog { transform: translateY(0); opacity: 1; } /* Tablet and up: a real dialog card, centred in the viewport. */ @media (min-width: 768px) { .uie-modal-dialog { right: auto; left: 50%; top: calc(var(--uie-viewport-offset, 0px) + 50%); width: min(1280px, 94vw); height: min(920px, calc(var(--uie-app-height) - 48px)); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 18px; box-shadow: 0 32px 80px rgba(10, 10, 14, 0.34); transform: translate(-50%, calc(-50% + 14px)); } .uie-modal.is-open .uie-modal-dialog { transform: translate(-50%, -50%); } } /* A phone on its side is wide enough for the tablet card, but every pixel of its height is needed: full screen, like in portrait. */ @media (max-height: 480px) and (orientation: landscape) { .uie-modal-dialog { right: 0; left: 0; top: var(--uie-viewport-offset, 0px); width: 100%; height: var(--uie-app-height); border: 0; border-radius: 0; box-shadow: none; transform: translateY(14px); } .uie-modal.is-open .uie-modal-dialog { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .uie-modal-overlay, .uie-modal-dialog { transition: none; } } /* -------------------------------------------------------------------------- * Product page trigger * ------------------------------------------------------------------------ */ .uie-preview-trigger-wrap { margin: 16px 0 0; font-family: var(--uie-interface-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); } .uie-preview-trigger-wrap .uie-open-editor.button, .uie-preview-trigger-wrap .uie-open-editor.button.alt { display: inline-flex; width: 100%; min-height: 52px; padding: 12px 22px; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--uie-preview-button-bg, #171717); border-radius: 10px; background: var(--uie-preview-button-bg, #171717); color: var(--uie-preview-button-color, #fff); box-shadow: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 650; line-height: 1.25; letter-spacing: 0; text-align: center; text-transform: none; touch-action: manipulation; transition: filter 180ms ease, transform 120ms ease, box-shadow 180ms ease; -webkit-tap-highlight-color: transparent; } @media (min-width: 600px) { .uie-preview-trigger-wrap .uie-open-editor.button, .uie-preview-trigger-wrap .uie-open-editor.button.alt { width: auto; min-width: 280px; } } /* Phones: 48px, 14px — the size of the site's other buttons there. */ @media (max-width: 767px) { .uie-preview-trigger-wrap .uie-open-editor.button, .uie-preview-trigger-wrap .uie-open-editor.button.alt { min-height: 48px; font-size: 14px; } } .uie-preview-trigger-wrap .uie-open-editor.button:hover, .uie-preview-trigger-wrap .uie-open-editor.button.alt:hover { filter: brightness(0.9); border-color: var(--uie-preview-button-bg, #171717); background: var(--uie-preview-button-bg, #171717); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); } .uie-preview-trigger-wrap .uie-open-editor.button:active { transform: translateY(1px); } .uie-preview-trigger-wrap .uie-open-editor.button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.25); } .uie-preview-trigger-wrap .uie-open-editor.is-loading { cursor: progress; opacity: 0.72; } .uie-preview-trigger-wrap .uie-open-editor.is-loading::after { content: ""; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: uie-spin 700ms linear infinite; } /* Toast used before the modal exists (e.g. the template failed to load). */ .uie-floating-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 1000000; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 12px; background: rgba(22, 22, 26, 0.95); color: #fff; font-family: var(--uie-interface-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-size: 13px; font-weight: 580; line-height: 1.4; text-align: center; box-shadow: 0 12px 32px rgba(10, 10, 14, 0.32); opacity: 0; transform: translate(-50%, 12px); transition: opacity 200ms ease, transform 200ms ease; pointer-events: none; } .uie-floating-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .uie-floating-toast.is-error { background: #8f2620; } .uie-floating-toast[hidden] { display: none !important; } .uie-preview-disclaimer { margin: 10px 0 0; max-width: 460px; color: #6f6f78; font-size: 13px; line-height: 1.55; } @keyframes uie-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .uie-preview-trigger-wrap .uie-open-editor.is-loading::after { animation-duration: 2s; } }