/* * share_sheet.css — Universal Share Sheet (S1) + interaction states (S2) * Grailsome Design System * * Mounted as a singleton element appended to by share_sheet_trigger_controller. * The .share-sheet--ready class is added on the next animation frame after mount, * which triggers the slide-up + backdrop fade-in transitions. */ /* ---- Sheet container ---- */ .share-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; pointer-events: auto; } .share-sheet__backdrop { position: absolute; inset: 0; background: rgba(26, 13, 8, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--duration-normal, 400ms) var(--ease-out, ease-out); } .share-sheet--ready .share-sheet__backdrop { opacity: 1; } .share-sheet__sheet { position: relative; background: var(--color-cream-card); border-radius: 20px 20px 0 0; padding: var(--space-5) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); width: 100%; max-width: 480px; border-top: var(--border-brand); box-shadow: 0 -12px 40px rgba(26, 13, 8, 0.18); transform: translateY(100%); transition: transform var(--duration-normal, 400ms) var(--ease-out, ease-out); } .share-sheet--ready .share-sheet__sheet { transform: translateY(0); } /* Dismissing state — slides back down */ .share-sheet--dismissing .share-sheet__sheet { transform: translateY(100%); } .share-sheet--dismissing .share-sheet__backdrop { opacity: 0; } /* ---- Header ---- */ .share-sheet__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .share-sheet__header--with-back { gap: var(--space-2); } .share-sheet__header--with-back .share-sheet__close { margin-left: auto; } .share-sheet__title { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.06em; color: var(--color-ink); margin: 0; } .share-sheet__back { width: 32px; height: 32px; border: 1.5px solid rgba(26, 13, 8, 0.10); border-radius: 8px; background: var(--color-cream-card, var(--color-ivory)); color: var(--color-ink-2, var(--color-ink)); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--duration-fast, 120ms) var(--ease-out, ease-out), border-color var(--duration-fast, 120ms) var(--ease-out, ease-out); } .share-sheet__back:hover { background: var(--color-parch); border-color: rgba(26, 13, 8, 0.20); } .share-sheet__close { background: none; border: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-ink); opacity: 0.55; transition: opacity var(--duration-fast, 120ms) var(--ease-out, ease-out), background var(--duration-fast, 120ms) var(--ease-out, ease-out); } .share-sheet__close:hover { opacity: 1; background: var(--color-parch); } /* ---- Subject preview ---- */ .share-preview { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--color-ivory); border: 1.5px solid rgba(26, 13, 8, 0.08); border-radius: 10px; margin-bottom: var(--space-5); } .share-preview__thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: 10px; background: rgba(192, 48, 26, 0.07); color: var(--color-red); display: flex; align-items: center; justify-content: center; overflow: hidden; } .share-preview__thumb-image { width: 100%; height: 100%; object-fit: cover; } .share-preview__meta { flex: 1; min-width: 0; } .share-preview__label { font-family: var(--font-body); font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-red); margin-bottom: 2px; } .share-preview__title { font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--color-ink); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .share-preview__sub { font-family: var(--font-body); font-weight: 300; font-size: 12px; color: var(--color-ink-muted); margin: 0; } .share-preview__value { font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: 18px; color: var(--color-ink); flex-shrink: 0; } /* ---- Method tiles ---- */ .share-methods { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .share-method { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-3); background: var(--color-cream-card); border: 1.5px solid rgba(26, 13, 8, 0.08); border-radius: 10px; cursor: pointer; text-align: left; font-family: var(--font-body); color: var(--color-ink); transition: background var(--duration-fast, 120ms) var(--ease-out, ease-out), border-color var(--duration-fast, 120ms) var(--ease-out, ease-out), transform var(--duration-fast, 120ms) var(--ease-out, ease-out), opacity var(--duration-fast, 120ms) var(--ease-out, ease-out); } .share-method:hover { background: var(--color-parch); } .share-method:active { transform: scale(0.985); background: var(--color-amber-light); border-color: var(--color-amber); } .share-method__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: rgba(192, 48, 26, 0.07); color: var(--color-red); display: flex; align-items: center; justify-content: center; } .share-method__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .share-method__title { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--color-ink); letter-spacing: 0.01em; } .share-method__desc { font-family: var(--font-body); font-weight: 300; font-size: 13px; color: var(--color-ink-muted); } .share-method__chevron { color: var(--color-ink-muted); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* S2 — Success state (mint flip) */ .share-method--success { background: var(--color-mint-light); border-color: var(--color-mint); } .share-method--success .share-method__icon { background: rgba(0, 168, 107, 0.18); color: var(--color-mint); } .share-method--success .share-method__title { color: var(--color-mint); } .share-method--success .share-method__desc { color: var(--color-mint); opacity: 0.75; } .share-method--success .share-method__chevron { visibility: hidden; } /* S2 — Dimmed siblings during success */ .share-method--dimmed { opacity: 0.45; } /* S3 — Hide Native OS Share tile when navigator.share is unavailable */ .share-method--unavailable { display: none !important; } /* ---- URL row ---- */ .share-url { display: flex; align-items: center; padding: var(--space-3) var(--space-4); background: var(--color-parch); border: 1.5px solid var(--color-parch-2); border-radius: 10px; margin-bottom: var(--space-4); gap: var(--space-3); } .share-url__hint { font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); flex-shrink: 0; } .share-url__text { flex: 1; min-width: 0; font-family: 'Sora', monospace; font-weight: 400; font-size: 12px; color: var(--color-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Footer ---- */ .share-sheet__footer { display: flex; align-items: center; justify-content: center; padding-top: var(--space-3); border-top: 1px solid rgba(26, 13, 8, 0.08); } .share-sheet__manage { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--color-ink-2); letter-spacing: 0.04em; padding: var(--space-2) var(--space-3); text-decoration: none; transition: color var(--duration-fast, 120ms) var(--ease-out, ease-out); } .share-sheet__manage:hover { color: var(--color-red); } .share-sheet__manage strong { color: var(--color-red); font-weight: 600; } /* ---- Share button (entry-point trigger) ---- */ .share-button { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--color-ink); padding: 0; font-family: var(--font-body); } .share-button__label { font-weight: 500; font-size: 13px; letter-spacing: 0.02em; } /* ---- Desktop refinement ---- */ @media (min-width: 601px) { .share-sheet { align-items: center; } .share-sheet__sheet { border-radius: 20px; border: var(--border-brand); max-width: 420px; } } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .share-sheet__backdrop, .share-sheet__sheet, .share-method, .share-sheet__back, .share-sheet__close { transition: none !important; } .share-sheet__sheet { transform: none; } .share-sheet--dismissing .share-sheet__sheet { transform: none; display: none; } } /* When the universal share sheet is open and the user opens an Edit or New Share secondary modal from the manage view, that modal layers ABOVE the sheet — not behind it. Share-sheet sits at z-index 1000; modal defaults to 200/300. While a share-sheet is mounted in the DOM, elevate the modal stack above it. */ body:has(#share-sheet) .modal-overlay { z-index: 1100; } body:has(#share-sheet) .modal-sheet { z-index: 1101; } /* === S5 Manage view (in-place) ================================== */ /* The methods/empty body wrapper uses display:contents so its children participate in the share-sheet__sheet's natural block flow. */ .share-sheet__body { display: contents; } /* Manage mode keeps the canonical sheet chrome (rounded top, padding, slide-up). The sheet itself is a flex column — header stays its normal size, and the manage container claims everything below. */ .share-sheet__sheet:has(.share-sheet-manage) { height: 92vh; max-height: 92vh; display: flex; flex-direction: column; } .share-sheet__sheet:has(.share-sheet-manage) .share-sheet__header { flex: 0 0 auto; margin-bottom: var(--space-3); } /* Stacked title + small italic subtitle inside the manage header. */ .share-sheet__title-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 auto; } .share-sheet__subtitle { font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: 12px; color: var(--color-ink-muted); letter-spacing: -0.01em; line-height: 1; } /* Manage container — single flex container with two children: the New Share button (auto) and the scrollable list (fills). */ .share-sheet-manage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .share-sheet-manage__new { flex: 0 0 auto; padding: 0 0 var(--space-3); } .share-sheet-manage__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; padding-bottom: 0; } .share-sheet-manage__empty { font-family: var(--font-body); font-size: 13px; color: var(--color-ink-muted); text-align: center; padding: var(--space-4) 0; margin: 0; } @media (min-width: 601px) { .share-sheet__sheet:has(.share-sheet-manage) { height: 80vh; max-height: 720px; } } /* === S4 QR view (in-place) ====================================== */ .qr-view { display: block; margin-bottom: var(--space-4); opacity: 0; transform: translateY(4px); transition: opacity var(--duration-normal, 400ms) var(--ease-out, ease-out), transform var(--duration-normal, 400ms) var(--ease-out, ease-out); } .qr-view--ready { opacity: 1; transform: translateY(0); } .qr-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-2) 0 var(--space-3); } .qr-card { width: 100%; padding: var(--space-4); background: var(--color-ivory); border: 1.5px solid rgba(26, 13, 8, 0.10); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .qr-stage__svg { width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; } .qr-svg { width: 100%; height: 100%; max-width: 240px; max-height: 240px; display: block; cursor: pointer; shape-rendering: crispEdges; } .qr-svg--placeholder { opacity: 0.35; } .qr-hint { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: none; padding: var(--space-1) var(--space-2); cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-red); } .qr-hint:hover { color: var(--color-ink); } .qr-actions { display: flex; gap: var(--space-2); width: 100%; } .qr-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); border-radius: 8px; font-family: var(--font-body); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; transition: background var(--duration-fast, 120ms) var(--ease-out, ease-out), color var(--duration-fast, 120ms) var(--ease-out, ease-out), border-color var(--duration-fast, 120ms) var(--ease-out, ease-out); } .qr-action--primary { background: var(--color-ink); color: var(--color-ivory); border: 1.5px solid var(--color-ink); } .qr-action--primary:hover { background: var(--color-red); border-color: var(--color-red); } .qr-action--secondary { background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-ink); } .qr-action--secondary:hover { background: var(--color-ink); color: var(--color-ivory); } /* === S4a QR fullscreen ========================================== */ body.qr-fullscreen-locked { overflow: hidden; } .fullscreen { position: fixed; inset: 0; z-index: 1100; background: var(--color-ivory); display: flex; flex-direction: column; padding: calc(var(--space-5) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); opacity: 0; transition: opacity var(--duration-normal, 400ms) var(--ease-out, ease-out); } .fullscreen--ready { opacity: 1; } .fullscreen--dismissing { opacity: 0; } .fullscreen__topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .fullscreen__subject { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; } .fullscreen__thumb { width: 36px; height: 36px; border-radius: 8px; background: rgba(192, 48, 26, 0.07); color: var(--color-red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .fullscreen__thumb--photo { background: var(--color-cream-card); } .fullscreen__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .fullscreen__title { font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; color: var(--color-ink); } .fullscreen__close { width: 36px; height: 36px; border: 1.5px solid rgba(26, 13, 8, 0.16); border-radius: 50%; background: var(--color-cream-card); color: var(--color-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .fullscreen__close:hover { background: var(--color-parch); } .fullscreen__qr-wrap { flex: 1; display: flex; align-items: center; justify-content: center; } .fullscreen .qr-svg--full { width: 78vw; height: 78vw; max-width: 480px; max-height: 480px; } .fullscreen__caption { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: var(--space-3); } .fullscreen__caption-eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-red); } .fullscreen__caption-name { font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--color-ink); } .fullscreen__brand { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-1); } .fullscreen__brand-logo { width: 18px; height: 18px; flex-shrink: 0; } .fullscreen__brand-wordmark { font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: 0.02em; color: var(--color-ink); line-height: 1; } .fullscreen__brand-wordmark-ai { color: var(--color-ink-muted); } @media (prefers-reduced-motion: reduce) { .qr-view, .fullscreen { transition: none !important; } .qr-view { transform: none; opacity: 1; } .fullscreen--dismissing { opacity: 0; } }