/** * UR Invited — Preview as Guest * /shared/uv-preview-as-guest.css * v=20260620as * * 1. Unification rules: hide all owner chrome while preview is active. * 2. Floating exit pill styles (gold/cream, fixed top-center). * * Sprint 10.1 — P0-09 preview parity. * Must be loaded in every template's . */ /* ================================================================== */ /* 1. Unification: suppress all owner edit chrome in preview mode */ /* ================================================================== */ body.uv-preview-as-guest .uv-toolbar, body.uv-preview-as-guest .uv-drawer, body.uv-preview-as-guest [data-uv-pencil], body.uv-preview-as-guest .uv-hero-photo__edit-btn, body.uv-preview-as-guest .uv-poly-menu, body.uv-preview-as-guest [contenteditable="true"] { pointer-events: none; } body.uv-preview-as-guest .uv-toolbar, body.uv-preview-as-guest .uv-drawer { display: none !important; } body.uv-preview-as-guest [contenteditable="true"] { outline: none !important; cursor: default; } /* Sprint 16 (B4/B5) — owner-only chrome that previously leaked into guest preview. `uv-mode-draft` persists through preview (only `is-owner-editor` is swapped out), so anything gated solely on draft mode stayed visible: - #uv-onboarding : the "Getting started" panel + its collapsed chip - *--add-prompt : the dashed "+ Add a registry link" editor card - .uv-floatbar : the bottom draft action bar (shown ≤640px) */ body.uv-preview-as-guest #uv-onboarding, body.uv-preview-as-guest .registry-card--add-prompt, body.uv-preview-as-guest .cinema-registry__card--add-prompt, body.uv-preview-as-guest .uv-floatbar { display: none !important; } /* ================================================================== */ /* 2. Floating exit pill — fixed, top-center */ /* ================================================================== */ .uv-preview-bar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; /* Soft white pill with subtle gold-cream gradient */ background: linear-gradient(135deg, #fffef8 0%, #fdf6e3 100%); border: 1px solid rgba(196, 145, 43, 0.28); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(196, 145, 43, 0.08) inset; font-family: inherit; font-size: 13px; line-height: 1; color: #4a3720; /* Animate in */ animation: uv-preview-bar-in 0.28s var(--uv-ease-spring, ease-out) both; /* Don't get hidden by the preview rules */ pointer-events: auto !important; } @keyframes uv-preview-bar-in { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } /* Brand-accent dot — amber/gold */ .uv-preview-bar__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c4912b; box-shadow: 0 0 0 2px rgba(196, 145, 43, 0.22); flex-shrink: 0; /* Gentle pulse to signal an active mode */ animation: uv-preview-dot-pulse 2.4s ease-in-out infinite; } @keyframes uv-preview-dot-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(196, 145, 43, 0.22); } 50% { box-shadow: 0 0 0 5px rgba(196, 145, 43, 0.10); } } /* Label text */ .uv-preview-bar__label { font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; padding-right: 4px; } /* Exit button */ .uv-preview-bar__exit { appearance: none; -webkit-appearance: none; border: none; cursor: pointer; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, #c4912b 0%, #e8b84b 100%); color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; line-height: 1.4; box-shadow: 0 1px 4px rgba(196, 145, 43, 0.35); transition: filter 0.15s ease, transform 0.12s ease; } .uv-preview-bar__exit:hover { filter: brightness(1.08); transform: scale(1.03); } .uv-preview-bar__exit:active { transform: scale(0.97); filter: brightness(0.96); } .uv-preview-bar__exit:focus-visible { outline: 2px solid #c4912b; outline-offset: 2px; } /* ================================================================== */ /* 3. Responsive: collapse label on very narrow screens */ /* ================================================================== */ @media (max-width: 420px) { .uv-preview-bar__label { display: none; } .uv-preview-bar { gap: 8px; padding: 8px 12px; } }