/* ============================================================================ MVPhysics Course Player — styles Kept as a separate stylesheet (not inline) for clean SCORM / cmi5 packaging. Motion tokens (see guidelines/motion.html): Fast 120 · Base 220 · Pop 320 overshoot. Standard ease cubic-bezier(.2,.7,.3,1); overshoot ease cubic-bezier(.34,1.56,.64,1). ============================================================================ */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: #0A1023; overflow: hidden; } a { color: #00A3DD; } a:hover { color: #008EC1; } #stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; } #frame { transform-origin: center center; box-shadow: 0 30px 80px rgba(0,0,0,0.55); } /* --- Responsive mode (at/below RESPONSIVE_MAX in player.js) --- Above the breakpoint the course is a fixed 1920×1080 stage scaled to fit (aspect preserved). At/below it — tablets, phones — we abandon the fixed canvas: fit() clears the transform and flags + , and these rules make the document scroll and every fixed-canvas ancestor (html, body, stage, frame, player root) flow fluidly so the layout reflows to the viewport. The base `html,body{height:100%;overflow:hidden}` is the thing that otherwise clips the tall flowed player, so it must be undone here. */ html.responsive { height: auto; overflow-x: hidden; overflow-y: auto; } body.responsive { height: auto; min-height: 100%; overflow: visible; } body.responsive #stage { position: static; inset: auto; display: block; height: auto; min-height: 100vh; } body.responsive #frame { width: 100%; height: auto; min-height: 100vh; box-shadow: none; transform: none !important; } body.responsive #root { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 100vh !important; transform: none !important; } /* The CoursePlayer root ships position:absolute for the fixed canvas — put it back in flow (relative, so it stays the context for its menu/resources overlays) and make it fluid + fill the viewport, so its header→content→footer flex column flows top-to-bottom. EXCLUDE the visually-hidden .ppt-sr live regions — forcing 100vh on them injects a huge empty block. */ body.responsive #root > *:not(.ppt-sr) { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 100vh !important; position: relative !important; transform: none !important; inset: auto !important; } /* ================= Course-owned responsive chrome (tablet & phone) ================= Rendered by chrome-responsive.js at/below 1024px INSTEAD of the vendored CoursePlayer. Header + bottom bar are fixed to the VIEWPORT (not the canvas), so the Menu/References controls hug the real screen edges and stay put while the page scrolls. */ .rc-shell { display: block; width: 100%; min-height: 100vh; background: #0A1023; --rc-header-h: 56px; } /* --- sticky top header (viewport-anchored) --- */ /* z-index 70 keeps the header (and its Menu/References buttons) ABOVE the open drawers (vendored overlay = z-index 60), so the header's own button is the single, persistent close control — see the drawer block below. */ .rc-header { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: var(--rc-header-h); display: flex; align-items: center; gap: 8px; padding: 0 12px; /* controls land within ~12px (< 15px) of the edges */ background: var(--navy, #132554); box-sizing: border-box; transform: translateZ(0); /* own layer — steadier repaint while zooming/scrolling */ } /* course-progress bar along the header's bottom edge — replaces the old static blue border. The dim track spans the full width; the signal-blue fill grows with the current page of the course. */ .rc-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.16); overflow: hidden; } .rc-progress-fill { height: 100%; background: var(--blue, #00A3DD); transition: width .35s cubic-bezier(.3, .7, .3, 1); } /* Menu / References: borderless, transparent, signal-blue icon buttons — identical to desktop, symbols only (no text). Each toggles to a blue × when its drawer is open. */ .rc-icon-btn { flex: 0 0 auto; min-width: 44px; min-height: 44px; /* touch target */ display: inline-flex; align-items: center; justify-content: center; padding: 6px; margin: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .rc-icon-btn:focus-visible { outline: 3px solid var(--blue, #00A3DD); outline-offset: 2px; border-radius: 8px; } .rc-menu { margin-right: 2px; } .rc-ref { margin-left: auto; } /* pinned to the right edge */ .rc-pin { flex: 0 0 auto; display: flex; align-items: center; height: 34px; } /* wraps the vector PinMark (was a 2MB PNG) */ .rc-logo { flex: 0 0 auto; display: flex; align-items: center; height: 34px; } .rc-logo svg { height: 28px; width: auto; } /* Titles take the middle, shifted right off the brand, and TRUNCATE before touching a control (min-width:0 + ellipsis: the title shrinks/ellipsises, it never overlaps a button). A run-time collision check (chrome-responsive.js) additionally drops the wide tablet logo when the title would still be squeezed, so the title/controls stay readable (§5 lets a strictly-necessary responsive adjustment keep controls visible). */ .rc-titles { flex: 1 1 auto; min-width: 0; overflow: hidden; margin: 0 8px 0 12px; } .rc-shell.rc-cramped .rc-logo { display: none; } .rc-title-course { color: #fff; font: 800 14px/1.15 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-title-sub { color: rgba(255,255,255,0.72); font: 500 12px/1.2 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* phone: the label text on the buttons is hidden to save room (icon only); tablet keeps labels */ .rc-shell.is-phone .rc-header .rc-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rc-shell.is-tablet .rc-pin { display: none; } /* tablet keeps the full logo, not the pin */ /* Tablet: centre the branding + course/scene title as a group between the edge buttons, instead of hugging the left. References already has margin-left:auto (right edge); giving the logo margin-left:auto too makes the two auto-margins split the free space equally, centring the logo+titles group. Titles stop flex-growing so the group stays compact, and their text centres. */ .rc-shell.is-tablet .rc-logo { margin-left: auto; } .rc-shell.is-tablet .rc-titles { flex: 0 1 auto; text-align: center; } /* phone: center the course/module title in the header. The menu+pin (left) are wider than the References icon (right), so flex-centering lands off-center; take the title out of flow and center it on the header instead, clamped so it never reaches the flanking controls. */ .rc-shell.is-phone .rc-titles { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; margin: 0; max-width: calc(100% - 180px); } /* --- scrolling content: clear the fixed header + bottom bar --- */ .rc-content { padding-top: var(--rc-header-h); padding-bottom: 96px; min-height: 100vh; box-sizing: border-box; } .rc-stage { display: block; } /* --- sticky bottom control bar (viewport-anchored) --- */ .rc-bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--navy, #132554); border-top: 1px solid rgba(255,255,255,0.14); padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; transform: translateZ(0); /* own layer — steadier repaint while zooming/scrolling */ } .rc-scrub { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.16); margin: 4px 0 8px; cursor: pointer; } .rc-scrub:focus-visible { outline: 3px solid var(--blue, #00A3DD); outline-offset: 3px; } .rc-scrub-fill { height: 100%; border-radius: 3px; background: var(--blue, #00A3DD); } /* Fixed layout at EVERY size (absolute, not flex): Play/Pause/Restart is always dead-centre, Back hugs the left, Continue the right. The media controls sit CLOSE to Play (like the desktop CC / volume icons): Captions just left of Play, volume/mute or the phone cog just right of it — centres at 50% ± 54px (Play half 26 + 6 gap + control half 22). */ .rc-bottom-row { position: relative; min-height: 52px; } /* Prev / Play / Next are the EXACT desktop controls (same SVG icons, same colors): circular buttons — Back is a bare white arrow on transparent; Play + Continue are navy icons on the signal-blue circle. */ .rc-bottom-row .rc-nav, .rc-bottom-row .rc-play { position: absolute; top: 50%; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .rc-prev { left: 0; transform: translateY(-50%); background: transparent; } /* Back: bare white arrow */ .rc-next { right: 0; transform: translateY(-50%); background: var(--blue, #00A3DD); } /* Continue: navy arrow on blue */ .rc-play { left: 50%; transform: translate(-50%, -50%); background: var(--blue, #00A3DD); } /* Play: always centred */ .rc-bottom-row .rc-nav:disabled { opacity: 0.4; cursor: default; } /* Media controls flanking Play — transparent, signal-blue icons like the desktop CC/volume. */ .rc-cc, .rc-vol { position: absolute; top: 50%; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .rc-cc { left: calc(50% - 54px); transform: translate(-50%, -50%); } /* Captions: left of Play (tablet) */ .rc-vol { left: calc(50% + 54px); transform: translate(-50%, -50%); } /* volume/mute: right of Play (tablet) */ /* Phone media cog — NOT a button box: just a bold signal-blue cog, right of Play. */ .rc-gear-wrap { position: absolute; top: 50%; left: calc(50% + 54px); transform: translate(-50%, -50%); } .rc-cog { border: 0; background: transparent; padding: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .rc-bottom .rc-nav:focus-visible, .rc-bottom .rc-play:focus-visible, .rc-bottom .rc-cc:focus-visible, .rc-bottom .rc-vol:focus-visible, .rc-bottom .rc-cog:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 8px; } /* Hover is a POINTER-only affordance — gated so it never appears (or sticks) on touch, which is the one intended desktop/mobile difference. Focus + :active feedback stay on all devices. */ @media (hover: hover) { .rc-prev:not(:disabled):hover { background: rgba(255,255,255,0.12); } .rc-next:not(:disabled):hover, .rc-play:hover { filter: brightness(1.08); } .rc-cc:hover, .rc-vol:hover, .rc-cog:hover { filter: brightness(1.18); } .rc-icon-btn:hover svg { opacity: 0.82; } } /* Popover uses the player-chrome colour (--navy), so it reads as part of the chrome rather than a white card. A subtle light border + the shadow separate it from the navy bottom bar it sits over. */ .rc-gear-panel { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 60; min-width: 200px; max-width: 78vw; max-height: 50vh; overflow-y: auto; background: var(--navy, #132554); color: #fff; border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; padding: 12px; box-shadow: 0 12px 30px rgba(10,16,35,0.5); display: none; } .rc-gear-panel.is-open { display: block; } .rc-gear-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 13px/1.2 system-ui, sans-serif; margin-bottom: 10px; } .rc-gear-row input[type=range] { flex: 1 1 auto; accent-color: var(--blue, #00A3DD); } /* Popover toggles carry the SAME icons as the desktop/tablet controls (CC, speaker, muted speaker), with a text label beside them. Translucent pills on the navy panel, white text, signal-blue icons. */ .rc-gear-toggle { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; margin-top: 8px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: rgba(255,255,255,0.08); font: 700 13px/1 system-ui, sans-serif; color: #fff; cursor: pointer; } .rc-gear-toggle svg { flex: 0 0 auto; } .rc-gear-toggle[aria-pressed="true"] { background: rgba(0,163,221,0.28); border-color: var(--blue, #00A3DD); } /* captions on/off is shown by the pill highlight + label, so the CC icon stays full signal blue */ /* ============================================================================ Menu & References drawers (tablet & phone). The shell reuses the vendored CourseMenu / ResourcesPanel overlays, which each ship (a) their OWN close × and (b) a fixed ~560px desktop width. The course owns both problems here — WITHOUT touching the bundle: 1. Single persistent close control. The header's Menu/References button is one element that toggles icon -> × in place (same box, same center). The header is z-index 70 (above the z-index-60 overlay), so that button is the visible close; each panel's built-in × is hidden. No second button, no second tab stop, and the close center equals the trigger center (they are the same element). 2. Genuine responsive sizing (no transform:scale, no fixed desktop width). Each panel is re-sized in vw/px and pushed below the fixed header so its own title and its internal overflow-y:auto list are fully visible; the list owns the scroll and the last item stays reachable. Desktop (CoursePlayer) is untouched. */ /* The vendored overlay root is position:absolute; in a scrolling responsive page it would scroll away with the document — pin it to the viewport, full-bleed. */ #rc-menu-drawer > div, #rc-ref-drawer > div { position: fixed !important; inset: 0 !important; } /* Hide each panel's built-in × (the header button is the one persistent close). */ #rc-menu-drawer button[aria-label="Close menu"], #rc-ref-drawer button[aria-label="Close resources"] { display: none !important; } /* Panel = the overlay's 2nd child (1st is the backdrop). Sit it below the header and run it to the viewport bottom so the panel's own flex column (fixed title + progress, then the overflow-y:auto list) sizes correctly and the list scrolls internally. */ #rc-menu-drawer > div > div:nth-child(2), #rc-ref-drawer > div > div:nth-child(2) { top: var(--rc-header-h) !important; bottom: 0 !important; height: auto !important; } #rc-menu-drawer > div > div:nth-child(2) { /* menu: left-anchored */ left: 0 !important; right: auto !important; width: min(56vw, 430px) !important; max-width: calc(100vw - 30px) !important; } #rc-ref-drawer > div > div:nth-child(2) { /* references: right-anchored */ left: auto !important; right: 0 !important; width: min(52vw, 420px) !important; max-width: calc(100vw - 30px) !important; } /* Keep the last list item clear of the phone home indicator. */ #rc-menu-drawer > div > div:nth-child(2) > div:last-child, #rc-ref-drawer > div > div:nth-child(2) > div:last-child { padding-bottom: env(safe-area-inset-bottom, 0px) !important; } /* Phone (<= 600px): narrower panels, tighter edge gap. */ @media (max-width: 600px) { #rc-menu-drawer > div > div:nth-child(2), #rc-ref-drawer > div > div:nth-child(2) { width: min(88vw, 360px) !important; max-width: calc(100vw - 24px) !important; } } /* While a drawer is open the underlying page must not scroll behind it. */ html.rc-drawer-open, body.rc-drawer-open { overflow: hidden !important; } @media (prefers-reduced-motion: reduce) { .rc-gear-panel, .rc-header, .rc-bottom { transition: none; } } /* --- keyframes --- */ @keyframes mvModalIn { 0% { opacity: 0; transform: translateY(14px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes mvPopIn { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } } /* Canonical feedback pop — overshoot. Used by every feedback surface, modal or inline. */ @keyframes mvPop { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } /* Scenario choice-column entrance — base slide from the right. */ @keyframes mvSlide { 0% { opacity: 0; transform: translateX(28px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes mvImageFade { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes mvPulse { 0% { transform: scale(0.55); opacity: 0.75; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes mvTwinkle { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } } @keyframes mvFadeInSlow { from { opacity: 0; } to { opacity: 1; } } @keyframes gsIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } @keyframes gsInBack { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } } /* --- Sequence (DragSequence) --- */ .seq-focusable:focus-visible { outline: 3px solid #00A3DD; outline-offset: 2px; } .seq-cta { transition: background 140ms ease; } .seq-cta:not(:disabled):hover { background: #008ec2 !important; } .seq-card[aria-pressed="true"] { position: relative; } /* --- GuidedStepper --- */ .gs-focusable:focus-visible { outline: 3px solid #00A3DD; outline-offset: 2px; border-radius: 12px; } .gs-panel { animation: gsIn 200ms cubic-bezier(.2,.7,.3,1); } .gs-panel[data-dir="-1"] { animation-name: gsInBack; } .gs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- CategoryMatch — non-modal (inline, per-row) feedback: overshoot pop --- */ .cm-focusable:focus-visible { outline: 3px solid #00A3DD; outline-offset: 2px; border-radius: 10px; } .cm-fb { animation: mvPop 320ms cubic-bezier(.34,1.56,.64,1); } /* Compact legend (after submit) — hover/focus reveals each category's definition */ .cm-legend-item { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; cursor: help; outline: none; } .cm-legend-item:focus-visible { outline: 3px solid #00A3DD; outline-offset: 3px; border-radius: 6px; } .cm-legend-tip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); width: 230px; background: #fff; color: #16203A; border: 1px solid #DCE2EC; border-radius: 10px; padding: 11px 13px; font-size: 13px; font-weight: 500; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: normal; box-shadow: 0 12px 30px rgba(19,37,84,0.24); opacity: 0; visibility: hidden; transition: opacity 140ms ease, transform 140ms ease; z-index: 30; pointer-events: none; } .cm-legend-tip::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-bottom-color: #fff; } .cm-legend-item:hover .cm-legend-tip, .cm-legend-item:focus-visible .cm-legend-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* --- Scenario slide — choice column entrance + inline (non-modal) feedback chip --- */ .sc-choice { animation: mvSlide 220ms cubic-bezier(.2,.7,.3,1); } .sc-fb { animation: mvPop 320ms cubic-bezier(.34,1.56,.64,1); } /* --- Reduced motion: replace entrances/pops with a brief fade (per motion guideline) --- */ @media (prefers-reduced-motion: reduce) { .gs-panel, .gs-panel[data-dir="-1"], .cm-fb, .sc-choice, .sc-fb { animation: mvFadeInSlow 120ms ease !important; } #frame [style*="animation"] { animation: mvFadeInSlow 120ms ease !important; } }