/* Brightcove (video.js) skin overrides — aligned to the Investigating Myeloma site palette. Loaded last in so the cascade beats the player's runtime stylesheet (which loads via JS from players.brightcove.net). Targets the video.js DOM rendered by the in-page embed; !important is needed because video.js's own rules have equal-or-higher specificity than ours. Remove the for this file in index.html if BMS later locks the player skin via Brightcove Studio and per-page overrides become unwanted — the player reverts to its default skin instantly. Site palette referenced: Brand navy #24415B Brand lime #B9C762 Body navy #324D66 Light gray #E9ECEF */ /* ========================================================================== Typography — Figtree everywhere video.js renders text we control. ========================================================================== */ .video-js, .video-js .vjs-time-control, .video-js .vjs-control, .video-js .vjs-menu, .video-js .vjs-menu-content, .video-js .vjs-menu-item, .video-js .vjs-tooltip-text, .video-js .vjs-time-tooltip, .video-js .vjs-text-track-display { font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important; letter-spacing: 0.05rem !important; } /* WebVTT cues (captions/subtitles when a is present) */ .video-js ::cue { font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important; background: rgba(36, 65, 91, 0.85) !important; } /* ========================================================================== Progress bar ========================================================================== */ /* Played portion — lime accent. */ .video-js .vjs-play-progress { background-color: #B9C762 !important; } /* Leading-edge dot on the played portion. */ .video-js .vjs-play-progress::before { color: #B9C762 !important; } /* Buffered portion — soft white over the navy bar background. */ .video-js .vjs-load-progress, .video-js .vjs-load-progress div { background-color: rgba(255, 255, 255, 0.35) !important; } /* Unplayed track — subtle, sits on top of the navy control bar. */ .video-js .vjs-progress-holder, .video-js .vjs-slider { background-color: rgba(255, 255, 255, 0.2) !important; } /* Mouse-hover seek preview tooltip + permanent time tooltip. */ .video-js .vjs-time-tooltip, .video-js .vjs-mouse-display .vjs-time-tooltip { background-color: #24415B !important; color: #fff !important; border-radius: 4px !important; font-weight: 500 !important; } /* ========================================================================== Volume control ========================================================================== */ .video-js .vjs-volume-level { background-color: #B9C762 !important; } .video-js .vjs-volume-level::before { color: #B9C762 !important; } /* ========================================================================== Control bar background — brand navy at 85% so the video shows through. ========================================================================== */ .video-js .vjs-control-bar { background-color: rgba(36, 65, 91, 0.85) !important; color: #fff !important; } /* ========================================================================== Big play button (center overlay shown before playback starts) ========================================================================== */ .video-js .vjs-big-play-button { background-color: rgba(36, 65, 91, 0.7) !important; border: 2px solid #B9C762 !important; border-radius: 50% !important; } .video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:hover, .video-js .vjs-big-play-button:focus { background-color: rgba(36, 65, 91, 0.92) !important; border-color: #B9C762 !important; outline: none !important; } .video-js .vjs-big-play-button .vjs-icon-placeholder::before { color: #fff !important; } .video-js .vjs-big-play-button:hover .vjs-icon-placeholder::before, .video-js .vjs-big-play-button:focus .vjs-icon-placeholder::before, .video-js:hover .vjs-big-play-button .vjs-icon-placeholder::before { color: #B9C762 !important; } /* ========================================================================== Control bar buttons (play/pause, mute, fullscreen, captions, settings) ========================================================================== */ .video-js .vjs-control:hover, .video-js .vjs-control:focus { color: #B9C762 !important; outline: none !important; } /* `:focus` is the fallback for Safari < 15.4; modern browsers also see the suppressor below that hides the ring on pointer focus. The base.css suppressor can't reach this because the player uses !important. */ .video-js .vjs-control:focus { outline: 2px solid #B9C762 !important; outline-offset: 2px !important; } .video-js .vjs-control:focus:not(:focus-visible) { outline: none !important; } /* ========================================================================== Settings / captions menus ========================================================================== */ .video-js .vjs-menu-content { background-color: rgba(36, 65, 91, 0.95) !important; color: #fff !important; border-radius: 4px !important; } .video-js .vjs-menu-item { color: #fff !important; } .video-js .vjs-menu-item:hover, .video-js .vjs-menu-item:focus { background-color: rgba(185, 199, 98, 0.25) !important; color: #fff !important; } .video-js .vjs-menu li.vjs-selected { background-color: #B9C762 !important; color: #24415B !important; } .video-js .vjs-menu li.vjs-selected:hover { background-color: #a8b656 !important; color: #24415B !important; }