/* ============================================================ SHARED · BioStagePlayer styles (.bsp) Responsive SVG stage + transport controls. Reader text #111111. ============================================================ */ .bsp { max-width: 980px; margin: 0 auto; color: #111111; } .bsp-stage { position: relative; border-radius: 14px; overflow: hidden; background: #0e1626; box-shadow: 0 10px 30px rgba(8, 12, 24, 0.18); } .bsp-svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; } /* Prev / Next as side arrows flanking the stage */ .bsp-side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(14, 22, 38, 0.55); color: #fff; font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: 0 3px 10px rgba(8, 12, 24, 0.35); transition: background .15s, border-color .15s, transform .12s; } .bsp-side:hover { background: rgba(14, 22, 38, 0.8); border-color: rgba(255, 255, 255, 0.6); } .bsp-side:active { transform: translateY(-50%) scale(0.94); } .bsp-side:focus-visible { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.55); outline: none; } .bsp-side--prev { left: 12px; } .bsp-side--next { right: 12px; } .bsp-side[disabled] { opacity: 0.35; cursor: default; } /* Expand → fullscreen affordance (top-right of the stage, like an image ⤢) */ .bsp-expand { position: absolute; top: 10px; right: 10px; z-index: 6; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(14, 22, 38, 0.55); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: 0 3px 10px rgba(8, 12, 24, 0.35); transition: background .15s, border-color .15s; } .bsp-expand:hover { background: rgba(14, 22, 38, 0.85); border-color: rgba(255, 255, 255, 0.6); } .bsp-expand:focus-visible { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.55); outline: none; } .bsp-expand__close { display: none; } .bsp--fs .bsp-expand__open { display: none; } .bsp--fs .bsp-expand__close { display: inline; } /* Fullscreen overlay — the player is moved to and blown up; steps still work */ body.bsp-fs-lock { overflow: hidden; } .bsp.bsp--fs { position: fixed; inset: 0; z-index: 4000; max-width: none; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 2.5vh 3vw; background: #0a0f1c; } .bsp--fs .bsp-stage { width: min(94vw, 132vh); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); } .bsp--fs .bsp-controls { width: min(94vw, 132vh); margin-top: 12px; } .bsp--fs .bsp-caption { font-size: 20px; min-height: 58px; color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); } .bsp--fs .bsp-counter { color: #cbd5e6; } .bsp--fs .bsp-side { width: 54px; height: 54px; font-size: 30px; } .bsp-controls { margin: 12px 2px 0; } .bsp-caption { min-height: 52px; padding: 13px 18px; border-radius: 12px; border: 1px solid rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.02); font-size: 17px; line-height: 1.5; font-weight: 600; color: #111111; } .bsp-transport { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; } .bsp-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.16); background: #fff; color: #111111; font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; } .bsp-btn:hover { background: #f6f8fc; border-color: rgba(15, 23, 42, 0.3); } .bsp-btn:focus-visible { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35); outline: none; } .bsp-btn--play { min-width: 96px; } .bsp-counter { margin-left: auto; font-size: 13px; color: #5b6b86; font-variant-numeric: tabular-nums; } .bsp-scrub { width: 100%; accent-color: #0a84ff; cursor: pointer; } /* ------------------------------------------------------------ Bordetella pertussis-toxin instance: crop the dark frame a touch (~20px sides + bottom, ~10px top on the 980px stage). The SVG is scaled up slightly and the stage clips the overflow. ------------------------------------------------------------ */ .bp-toxin-anim .bsp-stage { aspect-ratio: 96 / 53; } .bp-toxin-anim .bsp-svg { position: absolute; top: -1.4%; left: -2%; width: 104%; height: auto; }