/* Stream "Add stream" sheet in the composer look shared by Create, Community, Map Post, Shop Add item and Booking Add service. Doubled ids and !important throughout to beat the page's blanket modal rules. */ #mobileStreamModal#mobileStreamModal { position: fixed !important; inset: 0 !important; z-index: 999999 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; background: #FBFBF9 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; color-scheme: light !important; font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; } #mobileStreamModal#mobileStreamModal * { box-sizing: border-box; font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; } #mobileStreamModal#mobileStreamModal .fa, #mobileStreamModal#mobileStreamModal .fas, #mobileStreamModal#mobileStreamModal .fa-solid { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } #mobileStreamModal#mobileStreamModal .fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; } #mobileStreamModal#mobileStreamModal [hidden], #mobileStreamModal#mobileStreamModal div[hidden] { display: none !important; } #mobileStreamModal#mobileStreamModal button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important; } #mobileStreamModal#mobileStreamModal .mobile-stream-add-shell { width: 100% !important; max-width: 100% !important; min-height: 100dvh !important; margin: 0 !important; padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(112px + env(safe-area-inset-bottom, 0px)) !important; } #mobileStreamModal#mobileStreamModal .stc-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 14px !important; padding: 6px 0 0 !important; } #mobileStreamModal#mobileStreamModal .stc-bar-cancel, #mobileStreamModal#mobileStreamModal .stc-bar-spacer { width: 64px !important; flex: 0 0 64px !important; } #mobileStreamModal#mobileStreamModal .stc-bar-cancel { min-height: 0 !important; margin: 0 !important; padding: 8px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; font-size: 13px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer; } #mobileStreamModal#mobileStreamModal .stc-bar-title { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; } #mobileStreamModal#mobileStreamModal .stc-bar-title strong { font-size: 15px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; } #mobileStreamModal#mobileStreamModal .stc-bar-title small { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; } #mobileStreamModal#mobileStreamModal .stc-posting { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; } #mobileStreamModal#mobileStreamModal .stc-posting-avatar { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 12px !important; overflow: hidden !important; background: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #mobileStreamModal#mobileStreamModal .stc-posting-avatar span { font-size: 13px !important; font-weight: 800 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; } #mobileStreamModal#mobileStreamModal .stc-posting-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } #mobileStreamModal#mobileStreamModal .stc-posting-copy { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; } #mobileStreamModal#mobileStreamModal .stc-posting-label { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; } #mobileStreamModal#mobileStreamModal .stc-posting-name { font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #mobileStreamModal#mobileStreamModal .stc-eyebrow, #mobileStreamModal#mobileStreamModal .stc-eyebrow span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; } #mobileStreamModal#mobileStreamModal .stc-eyebrow { display: flex !important; align-items: baseline !important; justify-content: space-between !important; margin: 16px 0 8px !important; padding: 0 4px !important; } #mobileStreamModal#mobileStreamModal .stc-eyebrow span:last-child:not(:first-child) { letter-spacing: 0.08em !important; text-transform: none !important; } #mobileStreamModal#mobileStreamModal .stc-segment { display: flex !important; gap: 6px !important; margin: 0 !important; padding: 4px !important; border: 0 !important; border-radius: 14px !important; background: #F1F1ED !important; } #mobileStreamModal#mobileStreamModal .stc-segment button { flex: 1 !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; opacity: 1 !important; cursor: pointer; } #mobileStreamModal#mobileStreamModal .stc-segment button i { font-size: 12px !important; color: inherit !important; -webkit-text-fill-color: inherit !important; } #mobileStreamModal#mobileStreamModal .stc-segment button svg { width: 13px !important; height: 13px !important; display: block !important; fill: currentColor !important; } #mobileStreamModal#mobileStreamModal .stc-segment button span { font-size: 12px !important; font-weight: 700 !important; color: inherit !important; -webkit-text-fill-color: inherit !important; } #mobileStreamModal#mobileStreamModal .stc-segment button.is-active { background: #FFFFFF !important; box-shadow: 0 1px 3px rgba(17, 18, 20, 0.10) !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; } #mobileStreamModal#mobileStreamModal .stc-card { margin: 0 !important; padding: 0 !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; overflow: hidden !important; } #mobileStreamModal#mobileStreamModal .stc-row { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 50px !important; padding: 0 14px !important; } #mobileStreamModal#mobileStreamModal .stc-card--link { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 12px 14px !important; } #mobileStreamModal#mobileStreamModal .stc-link-icon { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; border-radius: 11px !important; background: #111214 !important; display: grid !important; place-items: center !important; margin-top: -3px !important; } #mobileStreamModal#mobileStreamModal .stc-link-icon i { font-size: 13px !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; } #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal .stc-card input, #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal .stc-card textarea, #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal .stc-card input:focus, #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal .stc-card textarea:focus { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 50px !important; min-height: 50px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; background-color: transparent !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #0FBFA4 !important; -webkit-appearance: none !important; appearance: none !important; resize: none !important; color-scheme: light !important; } #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal .stc-card--link textarea, #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal .stc-card--link textarea:focus { height: auto !important; min-height: 28px !important; padding: 4px 0 0 !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; overflow: hidden !important; } #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal .stc-card--text { padding: 2px 4px !important; } #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal .stc-card--text textarea, #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal .stc-card--text textarea:focus { height: auto !important; min-height: 88px !important; padding: 14px 10px !important; font-weight: 500 !important; line-height: 1.5 !important; } #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal .stc-card input::placeholder, #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal .stc-card textarea::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; } #mobileStreamModal#mobileStreamModal .stc-hint { margin: 8px 4px 0 !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; } #mobileStreamModal#mobileStreamModal .stc-card--preview { padding: 0 !important; background: #111214 !important; border-color: #111214 !important; } #mobileStreamModal#mobileStreamModal .stc-preview-stage { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; background: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #mobileStreamModal#mobileStreamModal .stc-preview-stage iframe, #mobileStreamModal#mobileStreamModal .stc-preview-stage video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 0 !important; display: block !important; } #mobileStreamModal#mobileStreamModal .stc-preview-stage > div { color: rgba(251, 251, 249, 0.72) !important; -webkit-text-fill-color: rgba(251, 251, 249, 0.72) !important; font-size: 12px !important; } #mobileStreamModal#mobileStreamModal .stc-preview-stage > div i { color: rgba(251, 251, 249, 0.72) !important; -webkit-text-fill-color: rgba(251, 251, 249, 0.72) !important; } #mobileStreamModal#mobileStreamModal .stc-foot { margin: 18px 0 0 !important; } #mobileStreamModal#mobileStreamModal .stc-submit, #mobileStreamModal#mobileStreamModal button.stc-submit, #mobileStreamModal#mobileStreamModal .stc-submit:disabled { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 54px !important; min-height: 54px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important; background: #EDEDE8 !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; } #mobileStreamModal#mobileStreamModal .stc-submit span { font: inherit !important; color: inherit !important; -webkit-text-fill-color: inherit !important; } #mobileStreamModal#mobileStreamModal .stc-submit::before, #mobileStreamModal#mobileStreamModal .stc-submit::after { content: none !important; display: none !important; } #mobileStreamModal#mobileStreamModal .stc-submit.is-ready { background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; } #mobileStreamModal#mobileStreamModal .stc-submit.is-busy { letter-spacing: 0.16em !important; } #mobileStreamModal#mobileStreamModal .stc-note { margin: 9px 0 0 !important; text-align: center !important; font-size: 11.5px !important; font-weight: 500 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; } #mobileStreamModal#mobileStreamModal .mobile-stream-add-status { margin: 10px 0 0 !important; padding: 10px 12px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: 600 !important; } /* Stream pass: owner row under the platform chips, and the explanation / link card. */ #mobileStreamModal#mobileStreamModal .stc-pass-row { display: flex !important; align-items: center !important; gap: 9px !important; width: 100% !important; min-height: 46px !important; margin: 10px 0 0 !important; padding: 0 14px !important; border: 1px dashed #D3D3CD !important; border-radius: 14px !important; background: #FFFFFF !important; box-shadow: none !important; text-align: left !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; cursor: pointer; } #mobileStreamModal#mobileStreamModal .stc-pass-row i { font-size: 12px !important; color: #0FBFA4 !important; -webkit-text-fill-color: #0FBFA4 !important; } #mobileStreamModal#mobileStreamModal .stc-pass-row span { font: inherit !important; color: inherit !important; -webkit-text-fill-color: inherit !important; } #mobileStreamModal#mobileStreamModal .stc-pass-row small { margin-left: auto !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.08em !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; white-space: nowrap !important; } #mobileStreamModal#mobileStreamModal .stc-pass-row.is-active { border-style: solid !important; border-color: #111214 !important; box-shadow: 0 1px 3px rgba(17, 18, 20, 0.10) !important; } #mobileStreamModal#mobileStreamModal .stc-pass-card { padding: 14px !important; } #mobileStreamModal#mobileStreamModal .stc-pass-copy { margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.55 !important; color: #3A3A37 !important; -webkit-text-fill-color: #3A3A37 !important; } #mobileStreamModal#mobileStreamModal .stc-pass-copy strong { font-weight: 800 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; } #mobileStreamModal#mobileStreamModal .stc-pass-link { display: block !important; margin: 12px 0 0 !important; padding: 12px !important; border-radius: 12px !important; background: #F1F1ED !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.45 !important; word-break: break-all !important; text-decoration: none !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; } #mobileStreamModal#mobileStreamModal .stc-pass-meta { margin: 10px 0 0 !important; font-size: 11.5px !important; font-weight: 500 !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; } #mobileStreamModal#mobileStreamModal .stc-pass-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 12px 0 0 !important; } #mobileStreamModal#mobileStreamModal .stc-pass-actions--three { grid-template-columns: 1.2fr 1fr 0.8fr !important; } #mobileStreamModal#mobileStreamModal .stc-pass-actions button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid #EAEAE6 !important; border-radius: 12px !important; background: #FFFFFF !important; box-shadow: none !important; font-size: 12px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; cursor: pointer; } #mobileStreamModal#mobileStreamModal .stc-pass-actions button i, #mobileStreamModal#mobileStreamModal .stc-pass-actions button span { font-size: 12px !important; color: inherit !important; -webkit-text-fill-color: inherit !important; } #mobileStreamModal#mobileStreamModal .stc-pass-actions button.is-primary { border-color: #111214 !important; background: #111214 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; } #mobileStreamModal#mobileStreamModal .stc-pass-actions button.is-danger { color: #A5222D !important; -webkit-text-fill-color: #A5222D !important; } #mobileStreamModal#mobileStreamModal .mobile-stream-add-status.is-starting { background: #F4F5F3 !important; border: 1px solid #E7E9E5 !important; padding: 18px !important; color: #111214 !important; } #mobileStreamModal .stream-start-heading { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; } #mobileStreamModal .stream-start-heading::before { content: ''; width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid #D8DDD8; border-top-color: #158577; border-radius: 50%; animation: stream-start-spin 1s linear infinite; } #mobileStreamModal .stream-start-steps { display: flex; gap: 8px; margin: 18px 0 12px; } #mobileStreamModal .stream-start-steps span { flex: 1; border-top: 3px solid #DDE1DD; padding-top: 8px; color: #777E78; font-size: 11px; font-weight: 500; } #mobileStreamModal .stream-start-steps .is-done { border-color: #158577; color: #158577; } #mobileStreamModal .stream-start-steps .is-current { border-color: #158577; color: #111214; font-weight: 700; } #mobileStreamModal .stream-start-hint { font-size: 12px; line-height: 1.5; font-weight: 400; color: #626962; } @keyframes stream-start-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #mobileStreamModal .stream-start-heading::before { animation: none; } } /* Stream-pass "GO LIVE" screen: a friend holding the phone gets one giant unmistakable button, not the owner's full New Stream form. Full-bleed photo of the app (window.pageAthleteData.image_data) with a dark gradient, matching the Athlete Streamer launch-screen mockup. */ #mobileStreamModal#mobileStreamModal.stc--pass-golive { background: #0A0A0C !important; } #mobileStreamModal#mobileStreamModal .stc-golive { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; min-height: 100vh !important; min-height: 100dvh !important; padding: calc(28px + env(safe-area-inset-top, 0px)) 24px calc(36px + env(safe-area-inset-bottom, 0px)) !important; background-color: #0A0A0C !important; background-size: cover !important; background-position: center 28% !important; box-sizing: border-box !important; } #mobileStreamModal#mobileStreamModal .stc-golive-brand { margin-top: 34px !important; text-align: center !important; } #mobileStreamModal#mobileStreamModal .stc-golive-eyebrow { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.32em !important; text-transform: uppercase !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important; } #mobileStreamModal#mobileStreamModal .stc-golive-tagline { margin-top: 8px !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.72) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important; } #mobileStreamModal#mobileStreamModal .stc-golive-action { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 20px !important; } /* Two rings, offset in time, each expanding out from the button and fading -- reads as a steady live "signal" rather than a single flat glow. */ #mobileStreamModal#mobileStreamModal .stc-golive-action::before, #mobileStreamModal#mobileStreamModal .stc-golive-action::after { content: '' !important; position: absolute !important; top: 0 !important; left: 50% !important; width: 168px !important; height: 168px !important; margin-left: -84px !important; border-radius: 50% !important; border: 1.5px solid rgba(255, 122, 105, 0.8) !important; pointer-events: none !important; animation: stc-golive-ring 2.6s cubic-bezier(.16, .84, .32, 1) infinite !important; } #mobileStreamModal#mobileStreamModal .stc-golive-action::after { animation-delay: 1.3s !important; } @keyframes stc-golive-ring { 0% { transform: scale(0.94); opacity: 0.55; } 70% { opacity: 0.12; } 100% { transform: scale(1.5); opacity: 0; } } #mobileStreamModal#mobileStreamModal .stc-golive-btn { position: relative !important; width: 168px !important; height: 168px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 32%), radial-gradient(circle at 50% 46%, #FF6A5A 0%, #EE2E1E 55%, #B4140C 100%) !important; box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.28), 0 0 34px 4px rgba(233, 39, 27, 0.55), 0 20px 44px -16px rgba(0, 0, 0, 0.75) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; cursor: pointer; transform-origin: 50% 50% !important; animation: stc-golive-pulse 2.6s cubic-bezier(.45, 0, .2, 1) infinite !important; } #mobileStreamModal#mobileStreamModal .stc-golive-btn::after { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; pointer-events: none !important; } #mobileStreamModal#mobileStreamModal .stc-golive-btn i { position: relative !important; font-size: 29px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) !important; } #mobileStreamModal#mobileStreamModal .stc-golive-btn span { position: relative !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; } #mobileStreamModal#mobileStreamModal .stc-golive-btn.is-busy { animation: none !important; opacity: 0.85 !important; transform: none !important; } @keyframes stc-golive-pulse { 0%, 100% { transform: scale(1); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.28), 0 0 34px 4px rgba(233, 39, 27, 0.55), 0 20px 44px -16px rgba(0, 0, 0, 0.75); } 45% { transform: scale(1.045); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.28), 0 0 52px 10px rgba(233, 39, 27, 0.75), 0 20px 44px -16px rgba(0, 0, 0, 0.75); } 70% { transform: scale(1.015); } } @media (prefers-reduced-motion: reduce) { #mobileStreamModal#mobileStreamModal .stc-golive-btn { animation: none !important; } #mobileStreamModal#mobileStreamModal .stc-golive-action::before, #mobileStreamModal#mobileStreamModal .stc-golive-action::after { animation: none !important; display: none !important; } } #mobileStreamModal#mobileStreamModal .stc-golive-status { max-width: 280px !important; text-align: center !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; color: rgba(255, 255, 255, 0.85) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important; } #mobileStreamModal#mobileStreamModal .stc-golive-foot { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.65) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important; text-align: center !important; } /* The starting stages on the pass screen sit on the dark photo. Without these the light-theme sweep paints every line black and the whole block disappears against the picture. Same treatment as the owner's Go Live placeholder on the Stream tab (mobile-stream-empty.css). */ #mobileStreamModal#mobileStreamModal .stc-golive-status.is-starting { background: transparent !important; border: 0 !important; padding: 0 !important; } #mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-heading { justify-content: center !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 13px !important; font-weight: 700 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important; } #mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-heading::before { border-color: rgba(255, 255, 255, 0.25) !important; border-top-color: #6fe3c6 !important; width: 14px !important; height: 14px !important; flex-basis: 14px !important; } #mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-steps { width: 240px !important; margin: 14px auto 10px !important; } #mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-steps span { border-top-color: rgba(255, 255, 255, 0.22) !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.5) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important; } #mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-steps .is-done { border-top-color: #6fe3c6 !important; color: #6fe3c6 !important; -webkit-text-fill-color: #6fe3c6 !important; } #mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-steps .is-current { border-top-color: #FFFFFF !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } #mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-hint { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 10.5px !important; font-weight: 500 !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.7) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important; } #mobileStreamModal#mobileStreamModal .stc-golive-status[role="alert"] { color: #ffb4a8 !important; -webkit-text-fill-color: #ffb4a8 !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important; } /* Quiet dark confirmation for stream-pass copy/share -- a small centered pill instead of the loud green booking-toast gradient. */ body div.stc-copied-toast.stc-copied-toast { position: fixed !important; left: 50% !important; bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; transform: translate(-50%, 10px) !important; z-index: 1000010 !important; display: flex !important; align-items: center !important; gap: 9px !important; padding: 12px 18px !important; border-radius: 999px !important; background: rgba(17, 18, 20, 0.94) !important; -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.55) !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 220ms ease, transform 220ms cubic-bezier(.2, .9, .2, 1) !important; } body div.stc-copied-toast.stc-copied-toast span { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; } body div.stc-copied-toast.stc-copied-toast.is-visible { opacity: 1 !important; transform: translate(-50%, 0) !important; } body div.stc-copied-toast.stc-copied-toast i { display: flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; flex: 0 0 18px !important; border-radius: 50% !important; background: #24c26a !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; font-size: 10px !important; } @media (prefers-reduced-motion: reduce) { body div.stc-copied-toast.stc-copied-toast { transition: opacity 120ms linear !important; } } /* One quiet line under Go Live: school Wi-Fi is the usual reason a stream struggles. Doubled id beats the page's leaf-text repaint that forces black inside modal ids. */ #mobileStreamModal#mobileStreamModal .stc-golive-hint { margin-top: 12px; font-size: 12px; font-weight: 500 !important; line-height: 1.4; text-align: center; color: rgba(255,255,255,.62) !important; -webkit-text-fill-color: rgba(255,255,255,.62) !important; }