/** * ath/teaching-media front-end styles. * * The block echoes raw oembed (YouTube) / iframe (Wistia) markup, which * carries fixed width/height attributes. We force a responsive 16:9 box * so both players fill the content column on any viewport. The audio * player stretches full-width beneath. */ .ath-teaching-media__video { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ath-radius-md, 8px); background: var(--wp--preset--color--ink, #2c2a26); } .ath-teaching-media__video iframe, .ath-teaching-media__video object, .ath-teaching-media__video embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Dual-format: gap between the video and the audio player below it. */ .ath-teaching-media__audio { margin-top: var(--wp--preset--spacing--3, 1.5rem); } .ath-teaching-media__audio audio { width: 100%; } .ath-teaching-media__notice--admin { padding: var(--wp--preset--spacing--2, 1rem); border: 1px dashed var(--wp--preset--color--warm-stone, #c8a882); border-radius: var(--ath-radius-sm, 4px); font-size: var(--wp--preset--font-size--small, 0.875rem); color: var(--wp--preset--color--teal-muted, #6b8f9c); } /* ========================================================================= * Sticky mini-player (.ath-player) — built in view.js, appended to . * Appears once playback starts and the inline player scrolls out of view. * ========================================================================= */ /* While the persistent player is visible, reserve bottom space so the * fixed bar can't cover the footer or the last transcript cue, and keep * scroll-into-view (active cue) clear of the bar. */ body.ath-has-player { padding-bottom: 4.75rem; } body.ath-has-player .ath-cue { scroll-margin-bottom: 5.5rem; } .ath-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--wp--preset--color--deep-teal, #2d5462); color: var(--wp--preset--color--teal-pale, #d8eaf0); box-shadow: 0 -2px 16px rgba( 0, 0, 0, 0.18 ); transform: translateY( 100% ); transition: transform 280ms ease; padding: env( safe-area-inset-bottom, 0 ) 0 0; } .ath-player.is-visible { transform: translateY( 0 ); } @media ( prefers-reduced-motion: reduce ) { .ath-player { transition: none; } } .ath-player__inner { display: flex; align-items: center; gap: var(--wp--preset--spacing--2, 1rem); max-width: var(--wp--custom--layout--wide-size, 1180px); margin-inline: auto; padding: 0.625rem clamp( 0.75rem, 4vw, 1.5rem ); } .ath-player__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--ath-radius-pill, 999px); background: transparent; color: inherit; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease; } .ath-player__btn svg { width: 1.25rem; height: 1.25rem; fill: currentColor; } .ath-player__btn:hover, .ath-player__btn:focus-visible { background: rgba( 255, 255, 255, 0.12 ); } /* Play/pause is the primary control — sage fill. */ .ath-player__toggle { background: var(--wp--preset--color--sage, #8fa870 ); color: #fff; width: 2.5rem; height: 2.5rem; } .ath-player__toggle:hover, .ath-player__toggle:focus-visible { background: var(--wp--preset--color--sage-light, #b5c99a ); } .ath-player__back svg { transform: scale( 0.95 ); } .ath-player__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .ath-player__title { font-family: var(--wp--preset--font-family--heading-serif); font-size: 0.9375rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } /* Scrubber — themed range input. */ .ath-player__scrubber { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: rgba( 255, 255, 255, 0.25 ); border-radius: 999px; cursor: pointer; } .ath-player__scrubber::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--wp--preset--color--teal-pale, #d8eaf0 ); cursor: pointer; box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.15 ); } .ath-player__scrubber::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--wp--preset--color--teal-pale, #d8eaf0 ); cursor: pointer; } .ath-player__time { flex: 0 0 auto; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--teal-soft, #a8c5cf ); white-space: nowrap; } /* Follow toggle lights up sage when engaged. */ .ath-player.is-following .ath-player__follow { color: var(--wp--preset--color--sage-light, #b5c99a ); } /* Tighten on small screens: drop the back + time, keep core controls. */ @media ( max-width: 600px ) { .ath-player__back, .ath-player__time { display: none; } .ath-player__title { font-size: 0.875rem; } } /* ========================================================================= * Inline player (.ath-inline-player) — the in-content audio player, * built in view.js to replace the native