/** * Premium Sticky Player + Viewport Flex Layout * * Body is a viewport-height flex column. Everything stacks: * nav → main (flex:1, scrolls) → queue-strip → player → tabs * No position:fixed (except video fullscreen), no z-index wars. */ /* ============================================ Viewport flex column — applied via Jinja2 for logged-in users. has-viewport-layout is set on server-side so the constraint is present before any JS runs — eliminating the layout-shift dance. has-bottom-tabs kept for backward-compat with any JS that adds it. ============================================ */ /* Clip the document at html level so iOS Safari doesn't swallow touch events on position:fixed children (the nav bar). body keeps overflow:visible so fixed elements stay tappable. */ html:has(body.has-viewport-layout), html:has(body.has-bottom-tabs) { height: 100dvh; overflow: hidden; } body.has-viewport-layout, body.has-bottom-tabs { min-height: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } body.has-viewport-layout main, body.has-bottom-tabs main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; /* anchor for talk panel */ } /* Footer hides when player is active to reclaim space */ body.player-active > footer { display: none; } /* ============================================ Player — normal-flow flex child ============================================ */ .sticky-player { display: none; height: 72px; background: linear-gradient(180deg, rgba(10, 10, 15, 0.98) 0%, rgba(18, 18, 24, 0.98) 100%); border-top: 1px solid var(--border-subtle); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3), 0 -1px 3px rgba(26, 90, 148, 0.1); padding: 0 12px; width: 100%; box-sizing: border-box; flex-shrink: 0; position: relative; z-index: var(--z-sticky); /* below --z-tabs so talk button overshoot paints above */ /* Dark island in light theme — force light text */ color: var(--dark-text); } .sticky-player.active { display: flex; align-items: center; gap: 10px; } /* Artwork */ .sticky-player__artwork { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(26, 90, 148, 0.3); } /* Artwork cover image (hidden by default, shown when episode has cover) */ .sticky-player__artwork-img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: none; } .sticky-player__artwork--has-cover { background: transparent; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .sticky-player__artwork--has-cover .sticky-player__artwork-img { display: block; } .sticky-player__artwork--has-cover svg { display: none; } /* Info (title + meta row) */ .sticky-player__info { flex: 1; min-width: 0; } .sticky-player__title { font-size: 14px; font-weight: 600; color: var(--dark-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; letter-spacing: -0.2px; line-height: 1.3; } /* Meta row: creator + date + time, single line */ .sticky-player__meta { display: flex; align-items: center; gap: 0; font-size: 11px; color: rgba(255, 255, 255, 0.55); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-player__creator:not(:empty)::after { content: "\00b7"; margin: 0 4px; } .sticky-player__date:not(:empty)::after { content: "\00b7"; margin: 0 4px; } .sticky-player__time { font-variant-numeric: tabular-nums; flex-shrink: 0; } /* Copy URL button */ .sticky-player__btn--copy { flex-shrink: 0; } /* Permalink button */ .sticky-player__btn--permalink { flex-shrink: 0; text-decoration: none; } /* Transport controls (prev, play, next) */ .sticky-player__controls { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } /* All buttons */ .sticky-player__btn { width: 44px; height: 44px; border-radius: 50%; background: transparent; border: none; color: var(--dark-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; position: relative; } .sticky-player__btn:hover { color: var(--dark-text); background: rgba(255, 255, 255, 0.1); } .sticky-player__btn:active { transform: scale(0.9); } /* Play button - accent */ .sticky-player__btn--play { width: 52px; height: 52px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--dark-text); box-shadow: 0 4px 12px rgba(26, 90, 148, 0.4); } .sticky-player__btn--play:hover { box-shadow: 0 6px 16px rgba(26, 90, 148, 0.5); background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); } /* Progress bar */ .sticky-player__progress { position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: var(--glass-bg); cursor: pointer; transition: height 0.15s; z-index: 2; } .sticky-player__progress:hover { height: 6px; } .sticky-player__progress-fill { height: 100%; background: var(--gradient-primary, linear-gradient(90deg, #1a5a94 0%, #003A70 100%)); width: 0%; transition: width 0.1s linear; position: relative; box-shadow: 0 0 8px rgba(26, 90, 148, 0.4); } .sticky-player__progress-fill::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: var(--dark-text); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.15s; } .sticky-player__progress:hover .sticky-player__progress-fill::after { opacity: 1; } /* ============================================ Generating State — visible from all tabs ============================================ */ .sticky-player--generating { display: flex; align-items: center; gap: 10px; border-top-color: rgba(26, 90, 148, 0.4); } .sticky-player--generating .sticky-player__artwork { background: var(--gradient-generating); background-size: 200% 100%; animation: gen-gradient-shift 2s ease-in-out infinite; box-shadow: 0 4px 12px rgba(26, 90, 148, 0.3); } .sticky-player--generating .sticky-player__progress-fill { background: var(--gradient-generating); background-size: 200% 100%; animation: gen-gradient-shift 2s ease-in-out infinite; box-shadow: 0 0 8px rgba(26, 90, 148, 0.4); } .sticky-player--generating .sticky-player__btn--play { display: none; } .sticky-player--generating .sticky-player__controls { display: none; } .sticky-player--generating .sticky-player__btn--copy { display: none; } .sticky-player--generating .sticky-player__btn--permalink { display: none; } @keyframes gen-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Video pip button in player bar */ .sticky-player__btn--video-pip { flex-shrink: 0; } /* ============================================ Floating Video Window 3 states: hidden (default) | pip | fullscreen ============================================ */ .video-window { display: none; position: fixed; background: #000; overflow: hidden; z-index: var(--z-video-fs); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); } /* video fills the window, letterboxed — never stretches */ .video-window video { width: 100%; height: 100%; object-fit: contain; display: block; } /* ── PiP mode: small floating window ── */ .video-window--pip { display: block; width: 280px; aspect-ratio: 16 / 9; border-radius: 12px; /* bottom-left, above the player bar */ bottom: 80px; left: 16px; } /* Mobile PiP: snap to bottom edge, full width */ @media (max-width: 768px) { .video-window--pip { left: 0; right: 0; width: 100%; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); border-radius: 12px 12px 0 0; aspect-ratio: 16 / 9; } .video-window__btn { width: 40px; height: 40px; } /* Always show chrome on mobile (no hover) */ .video-window--pip .video-window__chrome { opacity: 1; } } /* ── Fullscreen mode ── */ .video-window--fullscreen { display: block; inset: 0; width: 100%; height: 100%; border-radius: 0; } /* Desktop fullscreen: center the video with letterbox, black surround */ @media (min-width: 769px) { .video-window--fullscreen video { width: 100%; height: 100%; object-fit: contain; } } /* ── Chrome: minimize / expand / close buttons ── */ .video-window__chrome { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; } .video-window:hover .video-window__chrome { opacity: 1; } /* In fullscreen, overlay handles controls — hide video-window chrome (it sits at z-index 4001, overlay at 4002 blocks clicks anyway) */ .video-window--fullscreen .video-window__chrome { display: none; } .video-window__btn { width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); border: none; color: var(--dark-text); cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 0.1s; } .video-window__btn:hover { background: rgba(0, 0, 0, 0.8); } .video-window__btn--close:hover { background: rgba(200, 30, 30, 0.75); } /* Swipe handle on mobile pip (visual hint) */ @media (max-width: 768px) { .video-window--pip::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); z-index: var(--z-base); } } /* Fullscreen overlay chrome */ .video-fs-overlay { position: fixed; inset: 0; z-index: var(--z-video-fs-chrome); display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } .video-fs-overlay.active { opacity: 1; visibility: visible; } .video-fs-overlay__close { position: absolute; top: max(16px, env(safe-area-inset-top, 16px)); right: 16px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); border: none; color: var(--dark-text); cursor: pointer; pointer-events: all; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .video-fs-overlay__close:hover { background: rgba(0, 0, 0, 0.75); } .video-fs-overlay__tap { position: absolute; inset: 0; z-index: var(--z-base); cursor: pointer; pointer-events: all; } .video-fs-overlay__bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; padding: 0 0 max(24px, env(safe-area-inset-bottom, 24px)) 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); pointer-events: none; } .video-fs-overlay__progress-bar { width: 100%; height: 3px; background: var(--glass-bg-hover); cursor: pointer; pointer-events: all; } .video-fs-overlay__progress-fill { height: 100%; background: var(--gradient-primary, linear-gradient(90deg, #1a5a94 0%, #003A70 100%)); width: 0%; transition: width 0.25s linear; } .video-fs-overlay__title { padding: 10px 16px 0; font-size: 14px; font-weight: 600; color: var(--dark-text); line-height: 1.3; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .video-fs-overlay__flash { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); z-index: 6; width: 72px; height: 72px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; color: var(--dark-text); font-size: 28px; pointer-events: none; transition: transform 0.15s ease-out, opacity 0.3s ease-out; opacity: 0; } .video-fs-overlay__flash.show { transform: translate(-50%, -50%) scale(1); opacity: 1; } .video-fs-overlay__flash.hide { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } /* Full-width audio element inside .audio-player */ .audio-player__audio { width: 100%; } /* ============================================ Responsive - Mobile (hide actions + time) ============================================ */ @media (max-width: 768px) { .sticky-player { height: 64px; padding: 0 8px; } .sticky-player__artwork { width: 48px; height: 48px; } .sticky-player__title { font-size: 13px; } .sticky-player__btn--copy { display: none; } .sticky-player__btn--permalink { display: none; } .sticky-player__date { display: none; } .sticky-player__btn--play { width: 48px; height: 48px; } .sticky-player__btn { width: 40px; height: 40px; } } /* ============================================ Responsive - Tablet+ (more breathing room) ============================================ */ @media (min-width: 769px) { .sticky-player { padding: 0 16px; } .sticky-player.active { gap: 14px; } .sticky-player__controls { gap: 6px; } }