/* ── eDelivery Purchase Flow — Shared Stylesheet ── */ /* Mobile-first, dark theme, no external frameworks */ :root { --bg: #0f172a; --bg-card: #1e293b; --bg-input: #334155; --text: #e2e8f0; --text-muted: #94a3b8; --text-dim: #64748b; --amber: #f59e0b; --amber-hover: #d97706; --amber-dim: #92400e; --green: #22c55e; --red: #ef4444; --red-dim: #7f1d1d; --border: #334155; --radius: 0.75rem; --radius-sm: 0.5rem; } /* ── Theme load FOUC prevention ────────────────────────── */ /* The inline shim in sets html.theme-loading, */ /* removes it after the theme fetch resolves (or fails). */ /* visibility: hidden keeps layout stable so reveal is */ /* instant — no reflow. */ .theme-loading body { visibility: hidden; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; min-height: 100dvh; -webkit-font-smoothing: antialiased; } /* ── Layout ── */ .page { max-width: 440px; margin: 0 auto; padding: 0 1rem 1rem; display: flex; flex-direction: column; min-height: 100vh; /* fallback for browsers without dvh */ min-height: 100dvh; /* iOS URL-bar-aware viewport height */ } /* ── Brandbar (back arrow + venue logo grouped left, brand logo right) ── */ .brandbar { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0.75rem 1rem; background: var(--bg-card); border-bottom: 3px solid var(--amber); } .brandbar__logo { height: 28px; width: auto; display: block; object-fit: contain; } /* Right-aligned CaptureWorks brand logo (margin-left: auto pushes it to the far edge under flex-start). Hides itself on load error so venues without a brand.png degrade cleanly. */ .brandbar__brand { height: 28px; width: auto; display: block; object-fit: contain; opacity: 0.85; margin-left: auto; } /* brandbar__name is kept in the DOM for JS compat (buy.js / download.js may query it) but is not displayed — logos convey the identity. */ .brandbar__name { display: none; } /* Back arrow — buy page only (injected before .brandbar__logo in #page-buy) */ .brandbar__back { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -12px; color: var(--amber); text-decoration: none; font-size: 28px; font-weight: 700; flex-shrink: 0; } /* Legacy
is now visually replaced by .brandbar but stays in the DOM so buy.js (#venue-name) and download.js (#dl-venue-name) DOM lookups don't return null. Hide it whenever a brandbar precedes it. */ .brandbar + .header { display: none; } /* dl/index.html: the brandbar lives at page-level (above all state containers) so it shows on loading/preparing/expired/error states. The legacy
inside #state-ready is no longer adjacent to .brandbar (the rule above doesn't fire on it) — hide it explicitly so #state-ready doesn't render two venue-name elements. The #venue-name DOM node stays in the tree for download.js compat. */ #state-ready > .header { display: none; } /* ── Header ── */ .header { text-align: center; padding: 1.25rem 0 0.75rem; } .header__venue { font-size: 1.125rem; font-weight: 700; color: var(--amber); letter-spacing: 0.02em; } /* ── Preview card ── */ /* Height is viewport-driven so the full purchase flow (incl. the Turnstile widget at the bottom) fits one screen without scrolling. Three max-height lines = progressive enhancement: fixed px for ancient browsers, vh clamp where dvh is unsupported, dvh clamp (iOS URL-bar correct) where it is. */ .preview { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-card); aspect-ratio: 9 / 16; max-height: 360px; max-height: clamp(200px, 40vh, 480px); max-height: clamp(200px, 40dvh, 480px); margin: 0 auto 1rem; width: 100%; } .preview img, .preview video { width: 100%; height: 100%; object-fit: cover; display: block; } .preview__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.75rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); display: flex; justify-content: space-between; align-items: flex-end; } .preview__code { font-size: 1rem; font-weight: 700; color: #fff; } .preview__time { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); } /* ── Price hero ── */ .price-hero { text-align: center; padding: 0.75rem 0; } .price-hero__amount { font-size: 2.5rem; font-weight: 800; color: var(--text); line-height: 1.1; } .price-hero__subtitle { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.25rem; } /* ── Cart ── */ .cart { display: none; margin: 1rem 0; } .cart--visible { display: block; } .cart__heading { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .cart__item { display: flex; align-items: center; gap: 0.75rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-bottom: 0.375rem; } .cart__thumb { width: 40px; height: 56px; border-radius: 4px; object-fit: cover; background: var(--bg-input); flex-shrink: 0; } .cart__meta { flex: 1; min-width: 0; } .cart__code { font-weight: 700; font-size: 0.875rem; } .cart__detail { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart__remove { background: none; border: none; color: var(--text-dim); font-size: 1.25rem; cursor: pointer; padding: 0.25rem; line-height: 1; } .cart__remove:hover { color: var(--red); } .cart__savings { text-align: center; padding: 0.5rem; font-size: 0.875rem; color: var(--green); font-weight: 600; } .cart__savings s { color: var(--text-dim); font-weight: 400; } /* ── Buy button ── */ .buy-btn { display: block; width: 100%; background: var(--amber); color: var(--bg); border: none; border-radius: var(--radius); padding: 1rem; font-size: 1.125rem; font-weight: 700; cursor: pointer; transition: background 0.15s; margin-top: 0.75rem; } .buy-btn:hover { background: var(--amber-hover); } .buy-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Token entry ── */ .token-section { text-align: center; margin-top: 1rem; } .token-toggle { background: none; border: none; color: var(--text-muted); font-size: 0.8125rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; } .token-toggle:hover { color: var(--text); } .token-form { display: none; margin-top: 0.75rem; } .token-form--visible { display: flex; gap: 0.5rem; justify-content: center; } .token-form__input { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--text); outline: none; width: 160px; font-family: inherit; } .token-form__input:focus { border-color: var(--amber); } .token-form__submit { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--text); cursor: pointer; } .token-form__submit:hover { border-color: var(--amber); } /* ── Turnstile widget ── */ .turnstile-wrap { display: flex; justify-content: center; margin: 0.75rem 0 0; } /* ── Error / status banners ── */ .banner { border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; font-size: 0.8125rem; margin-bottom: 0.75rem; display: none; } .banner--visible { display: block; } .banner--error { background: var(--red-dim); color: #fca5a5; border: 1px solid #991b1b; } .banner--info { background: #1e3a5f; color: #93c5fd; border: 1px solid #1e40af; } /* ── Skeleton / loading ── */ .skeleton { background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-input) 50%, var(--bg-card) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton--preview { aspect-ratio: 9 / 16; max-height: 360px; max-height: clamp(200px, 40vh, 480px); max-height: clamp(200px, 40dvh, 480px); width: 100%; margin-bottom: 1rem; } .skeleton--price { height: 3.5rem; width: 120px; margin: 0.75rem auto; } /* ── Download page ── */ .dl-title { text-align: center; margin-bottom: 1.25rem; } .dl-title h1 { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.3; } .dl-title p { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.125rem; } .download-all { margin-bottom: 1.25rem; } .download-all__btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; background: var(--amber); color: var(--bg); border: none; border-radius: var(--radius); padding: 0.875rem 1rem; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.15s; font-family: inherit; } .download-all__btn:hover { background: var(--amber-hover); } .download-all__btn:disabled { opacity: 0.5; cursor: not-allowed; } .download-all__btn svg { flex-shrink: 0; } .dl-card { display: flex; align-items: center; gap: 0.75rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin-bottom: 0.5rem; } .dl-card__info { flex: 1; min-width: 0; } .dl-card__title { font-weight: 700; font-size: 0.9375rem; color: var(--text); } .dl-card__meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; display: flex; align-items: center; gap: 0.375rem; } .dl-card__actions { flex-shrink: 0; } .dl-btn { display: inline-flex; align-items: center; gap: 0.375rem; background: var(--amber); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 700; cursor: pointer; transition: background 0.15s; text-decoration: none; font-family: inherit; } .dl-btn:hover { background: var(--amber-hover); text-decoration: none; } .dl-btn svg { flex-shrink: 0; } .format-badge { display: inline-block; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.0625rem 0.375rem; border-radius: 9999px; } .format-badge--av1 { background: rgba(245, 158, 11, 0.15); color: var(--amber); } .format-badge--h265 { background: rgba(99, 102, 241, 0.15); color: #818cf8; } .dl-notice { font-size: 0.8125rem; color: var(--text-dim); text-align: center; margin-top: 1.5rem; line-height: 1.5; } .dl-notice + .dl-notice { margin-top: 0.75rem; } .dl-notice a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; } .dl-notice a:hover { color: var(--text); } /* ── State screens (loading, error, expired, preparing) ── */ .state { text-align: center; padding: 4rem 1rem 2rem; } .state h2 { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; } .state p { font-size: 0.9375rem; color: var(--text-muted); max-width: 280px; margin: 0 auto; line-height: 1.5; } .spinner { width: 2.5rem; height: 2.5rem; border: 3px solid var(--bg-input); border-top-color: var(--amber); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 1.5rem auto 0; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Utilities ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .hidden { display: none !important; } [hidden] { display: none !important; } /* ── Responsive ── */ @media (min-width: 480px) { .page { padding: 0 1.5rem 1.5rem; } .dl-title h1 { font-size: 1.75rem; } } /* ── Short screens: tighten vertical rhythm ─────────────── */ /* Goal: brandbar + preview(40dvh) + price hero + Buy button + Turnstile all within one screen on 360x740 / 390x844 / 414x896 — the Turnstile widget must be visible without scrolling or it never activates and the Buy button stays dead. Budget at 740px viewport: ~48 brandbar + ~308 preview + ~64 hero + ~59 buy + ~73 turnstile + 12 padding = ~564px. (Teaser removed — fold headroom improves by ~45px vs. the previous compacted form.) */ @media (max-height: 850px) { .page { padding-bottom: 0.75rem; } .brandbar { padding: 0.5rem 1rem; } .preview { margin-bottom: 0.75rem; } .price-hero { padding: 0.375rem 0; } .price-hero__amount { font-size: 1.75rem; } .price-hero__subtitle { margin-top: 0.125rem; } .buy-btn { padding: 0.75rem; margin-top: 0.5rem; } .buy-secondary, .basket-toggle-btn { padding: 0.5rem; margin-top: 0.375rem; font-size: 0.875rem; } .turnstile-wrap { margin-top: 0.5rem; } } /* Success state after payment */ .success-icon { display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; margin: 2rem auto 1.5rem; border-radius: 50%; background: #22c55e; color: #fff; font-size: 2.5rem; font-weight: bold; animation: popIn 0.4s ease-out; } @keyframes popIn { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } #state-success h2 { font-size: 1.75rem; margin: 0 0 0.25rem; color: #f1f5f9; } .success-subtitle { color: var(--text-muted); margin: 0 0 2rem; font-size: 1rem; } .success-body { background: var(--bg-card); border-radius: 0.75rem; padding: 1.5rem; margin: 0 0 1.5rem; text-align: center; line-height: 1.6; } .success-body p { margin: 0 0 0.5rem; } .success-note { text-align: center; font-size: 0.85rem; line-height: 1.5; } .success-note p { margin: 0 0 0.25rem; } .text-muted { color: var(--text-muted); } /* Basket actions (shopping basket feature, 2026-06) */ .buy-secondary, .basket-toggle-btn { display: block; width: 100%; margin-top: 0.5rem; padding: 0.65rem; background: transparent; border: 1px solid var(--bg-input); border-radius: 0.5rem; color: var(--text); font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; } .buy-secondary:active, .basket-toggle-btn:active { border-color: var(--amber); } .basket-toggle-btn.in-basket { border-color: var(--amber); color: var(--amber); }