/* Installable-app additions kept separate from the storefront visual system. */ html { -webkit-text-size-adjust: 100%; } body { -webkit-tap-highlight-color: transparent; } /* The tab bar and reels controls already own their safe-area padding. */ .app-header { padding-top: env(safe-area-inset-top, 0px); } .ios-install-hint { position: fixed; z-index: 110; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; width: min(420px, calc(100vw - 24px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 14px 14px 10px; direction: rtl; text-align: start; color: var(--ink); background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: var(--radius-panel); box-shadow: var(--shadow-hover); -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); opacity: 0; transform: translateY(24px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); } .ios-install-hint[hidden] { display: none; } .ios-install-hint.is-visible { opacity: 1; transform: translateY(0); } .ios-install-hint__icon { width: 38px; height: 38px; display: grid; place-items: center; flex: none; color: var(--accent); background: var(--accent-tint); border-radius: var(--radius-btn); } .ios-install-hint__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ios-install-hint__copy { min-width: 0; } .ios-install-hint__title { display: block; margin-bottom: 3px; color: var(--ink); font-size: var(--fs-14); font-weight: 800; } .ios-install-hint__body { margin: 0; color: var(--ink-soft); font-size: var(--fs-12); line-height: 1.75; } .ios-install-hint__close { align-self: start; width: 32px; height: 32px; min-height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-pill); color: var(--ink-soft); background: transparent; font-size: 22px; line-height: 1; cursor: pointer; } .ios-install-hint__close:hover { color: var(--ink); background: var(--surface-sunk); } @media (max-width: 767px) { .ios-install-hint { bottom: calc(var(--bottomnav-total-h) + 12px); } .reels-page .ios-install-hint { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } } @media (display-mode: standalone) { body { overscroll-behavior-y: none; } .ios-install-hint { display: none !important; } /* ---- Non-reels pages: fill viewport so short content pages don't leave a gap between content and the bottom tabbar. ---- */ body:not(.reels-page) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body:not(.reels-page) > main { flex: 1 1 auto; } /* ---- Reels standalone layout ---- The JS lockReelsViewport() now sets --reels-viewport on so every element (including body and main) can read it. Drop the old height:100% chain which broke when 100dvh ≠ real viewport on iOS standalone. Let vitrin.css var(--reels-viewport, 100dvh) handle slide/feed/app sizing; only override body to let inset:0 size it to the true viewport instead of a possibly-wrong 100dvh. */ body.reels-page { height: var(--reels-viewport, auto); min-height: 0; padding: 0; } .reels-page .app-header, .reels-page .bottom-tabbar { display: none !important; box-shadow: none !important; } .reels-page .reels-app { box-sizing: border-box; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } .reels-page .reel-stage { box-shadow: none; } } /* On phones in standalone the screen aspect (~9:19.5) is taller than 9:16. The width-first reel-stage (aspect-ratio:9/16) leaves dead space below each slide. Fix: fill the full slide height; the video uses object-fit:cover to crop the narrow excess — same as Instagram Reels / TikTok on iPhone. */ @media (display-mode: standalone) and (max-width: 480px) { .reels-page .reel-stage { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; box-shadow: none; } .reels-page .reel-video { object-fit: cover; aspect-ratio: auto; } } /* Soft pull-to-refresh. JS only enables tracking for touch input on soft-navigable pages at mobile widths; reels and desktop remain native. */ .soft-refresh-indicator { position: fixed; z-index: calc(var(--z-header) - 1); top: calc(var(--header-live, var(--header-h)) + 8px); left: 50%; min-height: 36px; max-width: calc(100vw - 32px); display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; color: var(--ink); background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-pop); opacity: 1; transform: translateX(-50%); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); pointer-events: none; white-space: nowrap; } .soft-refresh-indicator[hidden] { display: none; } .soft-refresh-indicator__icon { width: 22px; height: 22px; display: grid; place-items: center; flex: none; color: var(--accent); font-size: var(--fs-18); font-weight: var(--fw-black); line-height: 1; transition: transform 180ms var(--ease-out); } .soft-refresh-indicator__copy { overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-12); font-weight: var(--fw-bold); } .soft-refresh-indicator[data-state="ready"] .soft-refresh-indicator__icon { transform: rotate(180deg); } .soft-refresh-indicator[data-state="refreshing"] .soft-refresh-indicator__icon { animation: soft-refresh-spin 720ms linear infinite; } .soft-refresh-indicator[data-state="done"] { color: var(--success); border-color: var(--success); } .soft-refresh-indicator[data-state="error"] { color: var(--danger); border-color: var(--danger); } @keyframes soft-refresh-spin { to { transform: rotate(360deg); } } @media (max-width: 820px) { body:not(.reels-page) { overscroll-behavior-y: contain; } /* Pull feedback is indicator-only; body.is-pull-tracking main#content intentionally remains stationary. */ } @media (prefers-reduced-motion: reduce) { .ios-install-hint { transform: none; transition: none; } .soft-refresh-indicator, .soft-refresh-indicator__icon { transition: none; } .soft-refresh-indicator[data-state="refreshing"] .soft-refresh-indicator__icon { animation: none; } } /* ---- Zoom & rotation lock (app behavior) ---- */ html, body { touch-action: pan-y !important; /* vertical scroll only, no pinch zoom */ -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; overscroll-behavior-y: contain; } /* landscape fallback: keep portrait layout centered (visual lock) */ @media (orientation: landscape) and (max-height: 500px) { html, body { transform: none; } }