Add theme-aware cinema overlays for homepage videos

Author: rodrix2000

IMPLEMENTATION-NOTES.md

@@ -237,6 +237,55 @@ feedback. Only the existing localhost analytics warning appeared. Preflight,
 HTML validation, contrast/reduced-motion regressions, link policy and public
 packaging passed; no dependencies or separate image assets were added.
 
+### Homepage video cinema — 2026-08-30
+
+Baseline: `5d7b7c898e66cd0d33874ee3fbaaaf9a376b4bc4`.
+The five existing posters now progressively enhance into a centered, native
+dialog with a dimmed backdrop, theme-colored border, video title, 44px close
+control and a direct "Watch on YouTube" link. The homepage layout and scroll
+position remain intact. The iframe is created only after explicit activation
+and removed on close, stopping playback; focus returns to the invoking poster.
+Space activation and deliberate backdrop dismissal supplement native dialog
+behavior. Modified clicks and the existing YouTube URLs are preserved.
+
+This is an intentional, tightly scoped exception to the previous all-new-tab
+video policy. No-JavaScript and unsupported-dialog visitors still receive the
+original five safe new-tab links. All other destination, ISO, same-page and
+email behavior is unchanged. The source audit permits only the five known
+posters to request this enhancement and continues to reject legacy inline
+interception of destination links. No dependencies were added; secondary pages
+and their existing video behavior are untouched.
+
+Files changed: `index.html`, `assets/css/video.css`,
+`assets/js/modules/video.js`, `bin/check`, `tests/home-video.mjs`, `README.md`
+and this document. The dialog uses existing palette tokens and no animations.
+The privacy-enhanced YouTube embed permits inline mobile playback. Its minimum
+height follows [YouTube's player requirements](https://developers.google.com/youtube/player_parameters).
+Focus containment and native Escape dismissal use the platform's
+[`dialog` behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog).
+
+Verification: all five source/destination mappings opened in the in-app browser;
+actual introduction and Alex Finn playback was observed. Close removed the
+iframe, restored focus and returned to the identical scroll offset. Space-key
+activation worked. The Black Turq palette propagated to the dialog border.
+Desktop (1440 × 900), mobile (390 × 844), 320px, tablet 768px and landscape
+844 × 390 checks found no page or dialog horizontal overflow after correcting
+an aspect-ratio/minimum-height interaction on narrow screens. Close remained
+onscreen. Desktop/mobile captures were reviewed; scratch captures stay outside
+the public repository. Only the existing localhost analytics warning appeared.
+
+Preflight, HTML validation, link audit and public packaging passed. New
+dependency-free tests cover lazy loading, all five IDs, close cleanup, focus and
+scroll restoration, Space/modified clicks, backdrop drag protection, invalid
+URLs and missing/failed dialog support. Static fallback checks and motion-free
+CSS checks supplement the existing theme/reduced-motion regressions. Browser
+native Escape/Tab default actions are not dispatched by the current testing
+tool, so these were not claimed as end-to-end verified; no custom keyboard trap
+was added to compensate. A physical keyboard/screen-reader pass and real-device
+Safari testing remain outside this verification. JavaScript-disabled and
+reduced-motion assertions for this slice are source/unit checks, not new browser
+setting captures.
+
 ### Push-to-deploy automation — 2026-08-30
 
 Starting from `f728d6ab0d47da60b49269affa7cced2d2bd94e7`, the existing validation

README.md

@@ -51,9 +51,11 @@ development tool, not a production server.
 - All content and links remain available without JavaScript.
 - Reduced-motion support, keyboard navigation and visible focus states.
 - Responsive layouts verified at 1440px and 390px, with intermediate checks.
-- All five video posters open YouTube in a new tab; no player loads on the homepage.
-- Homepage destination links open new tabs; ISO downloads, home/section navigation
-  and email links retain their native behavior.
+- All five video posters open a theme-aware cinema overlay. The player only loads
+  after a click; closing stops playback and restores focus and scroll position.
+  A direct YouTube link remains available, including without JavaScript.
+- Other homepage destination links open new tabs; ISO downloads, home/section
+  navigation and email links retain their native behavior.
 
 The main changes are in `index.html`, `assets/css/home.css`, and
 `assets/js/modules/home.js`. Existing public routes and upstream history remain.

assets/css/video.css

@@ -93,3 +93,127 @@
   }
 
 }
+
+/* The homepage cinema stays in the top layer: no page reflow, no animation,
+   and the same theme tokens as the rest of the operating-system chrome. */
+html:has(.home) {
+  scrollbar-gutter: stable;
+}
+
+html:has(.home .video-dialog[open]) {
+  overflow: hidden;
+}
+
+.home .video-dialog {
+  background: var(--sm-deep);
+  border: 1px solid var(--sm-cyan);
+  border-radius: 2px;
+  box-shadow: 0 1.5rem 6rem rgb(0 0 0 / 0.65);
+  color: var(--sm-text);
+  inset: 0;
+  margin: auto;
+  max-height: calc(100dvh - 2rem);
+  max-width: calc(100vw - 2rem);
+  overflow: auto;
+  overscroll-behavior: contain;
+  width: min(68rem, calc((100dvh - 10rem) * 16 / 9));
+}
+
+.home .video-dialog:not([open]) {
+  display: none;
+}
+
+.home .video-dialog::backdrop {
+  background: rgb(2 3 5 / 0.88);
+}
+
+.video-dialog__header {
+  align-items: center;
+  background: var(--sm-panel);
+  border-bottom: 1px solid var(--sm-line);
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+}
+
+.video-dialog__eyebrow,
+.video-dialog__footer {
+  font-family: var(--sm-font-interface);
+  font-size: 0.65rem;
+}
+
+.video-dialog__eyebrow {
+  color: var(--sm-gold);
+  letter-spacing: 0.14em;
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+}
+
+.video-dialog__header h2 {
+  font-family: var(--sm-font-interface);
+  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.home .video-dialog__close {
+  align-items: center;
+  border: 1px solid var(--sm-line-strong);
+  color: var(--sm-cyan-soft);
+  cursor: pointer;
+  display: flex;
+  flex: 0 0 2.75rem;
+  height: 2.75rem;
+  justify-content: center;
+}
+
+.video-dialog__close:hover {
+  background: var(--sm-panel-raised);
+  border-color: var(--sm-cyan);
+}
+
+.video-dialog__close svg {
+  fill: none;
+  height: 1.2rem;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  width: 1.2rem;
+}
+
+.video-dialog__screen {
+  aspect-ratio: 16 / 9;
+  background: #000;
+  min-height: 200px;
+  width: 100%;
+}
+
+.video-dialog__screen iframe {
+  border: 0;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.video-dialog__footer {
+  align-items: center;
+  color: var(--sm-muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  justify-content: space-between;
+  min-height: 3.5rem;
+  padding: 0.375rem 1.25rem;
+}
+
+.video-dialog__footer a {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+}
+
+@media (max-width: 39.99rem) {
+  .video-dialog__header { padding: 0.75rem; }
+  .video-dialog__footer { padding-inline: 0.75rem; }
+}

assets/js/modules/video.js

@@ -1,6 +1,6 @@
-// Videos start as linked posters. A poster with data-video upgrades to an
-// inline player; all other posters remain ordinary YouTube links. Nothing is
-// requested from YouTube until someone chooses a video.
+// Linked posters work without JavaScript. Only explicitly marked homepage
+// posters upgrade to the cinema dialog; legacy inline players stay independent.
+// No embed is requested until someone chooses a video.
 
 const PARAMS = 'autoplay=1&rel=0';
 
@@ -21,6 +21,8 @@ function embed(facade) {
 }
 
 function ready() {
+  setupCinema();
+
   for (const facade of document.querySelectorAll('.video__facade[data-video]')) {
     facade.addEventListener('click', (event) => {
       event.preventDefault();
@@ -29,4 +31,85 @@ function ready() {
   }
 }
 
+function setupCinema() {
+  const dialog = document.querySelector('.home .video-dialog');
+  if (!dialog || typeof dialog.showModal !== 'function') return;
+
+  const title = dialog.querySelector('#video-dialog-title');
+  const screen = dialog.querySelector('.video-dialog__screen');
+  const close = dialog.querySelector('.video-dialog__close');
+  const youtube = dialog.querySelector('a');
+  if (!title || !screen || !close || !youtube) return;
+
+  let trigger;
+  let scroll;
+  let pressedBackdrop = false;
+
+  // Native dialog handles modal focus containment and Escape. Removing the
+  // iframe on every close stops both playback and background network activity.
+  dialog.addEventListener('close', () => {
+    screen.replaceChildren();
+    trigger?.focus({ preventScroll: true });
+    if (scroll) window.scrollTo({ ...scroll, behavior: 'instant' });
+    trigger = null;
+    scroll = null;
+  });
+  close.addEventListener('click', () => dialog.close());
+
+  const outside = (event) => {
+    const rect = dialog.getBoundingClientRect();
+    return event.target === dialog && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom);
+  };
+  dialog.addEventListener('pointerdown', (event) => { pressedBackdrop = outside(event); });
+  dialog.addEventListener('click', (event) => {
+    if (pressedBackdrop && outside(event)) dialog.close();
+    pressedBackdrop = false;
+  });
+
+  for (const facade of document.querySelectorAll('.home #watch .video__facade[data-video-dialog]')) {
+    // Derive the embed only from the existing, exact YouTube destination.
+    const id = facade.getAttribute('href')?.match(/^https:\/\/www\.youtube\.com\/watch\?v=([\w-]{11})$/)?.[1];
+    const name = facade.closest('.media-card')?.querySelector('h3')?.textContent.trim();
+    if (!id || !name) continue;
+
+    facade.setAttribute('role', 'button');
+    facade.setAttribute('aria-haspopup', 'dialog');
+    facade.setAttribute('aria-controls', dialog.id);
+    facade.setAttribute('aria-label', `Play ${name} (opens video dialog)`);
+    facade.addEventListener('keydown', (event) => {
+      if (event.key === ' ' && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+        event.preventDefault();
+        if (!event.repeat) facade.click();
+      }
+    });
+    facade.addEventListener('click', (event) => {
+      // Preserve Cmd/Ctrl-click, Shift-click, middle-click and context menus.
+      if (event.defaultPrevented || event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+      if (dialog.open) return;
+
+      title.textContent = name;
+      youtube.href = facade.href;
+      const position = { left: window.scrollX, top: window.scrollY };
+      try {
+        dialog.showModal();
+      } catch {
+        // If enhancement is unavailable, the original link still navigates.
+        return;
+      }
+      event.preventDefault();
+      trigger = facade;
+      scroll = position;
+      close.focus({ preventScroll: true });
+
+      const iframe = document.createElement('iframe');
+      iframe.title = name;
+      iframe.src = `https://www.youtube-nocookie.com/embed/${id}?${PARAMS}&playsinline=1`;
+      iframe.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen';
+      iframe.referrerPolicy = 'strict-origin-when-cross-origin';
+      iframe.allowFullscreen = true;
+      screen.replaceChildren(iframe);
+    });
+  }
+}
+
 export { ready };

bin/check

@@ -61,6 +61,11 @@ Dir.chdir(root) do
   abort "Homepage has an empty or JavaScript-only link" if hrefs.any? { |href| href.empty? || href.match?(/\Ajavascript:/i) }
 
   # A single homepage-wide policy prevents isolated CTA/footer regressions.
+  # Only these five linked posters may enhance into the homepage cinema.
+  video_ids = %w[F7fe9pa8OeE 9SDkU5VDQEQ 5JPYJfN7HY0 qBKMe8AatY0 KO2T0oET9go]
+  video_hrefs = video_ids.map { |id| "https://www.youtube.com/watch?v=#{id}" }
+  cinema_links = tags.select { |name, link| name == "a" && link.key?("data-video-dialog") }.map(&:last)
+  abort "Only the five YouTube posters may open the cinema" unless cinema_links.map { |link| link["href"] } == video_hrefs && cinema_links.all? { |link| link["class"] == "video__facade" && link["data-video-dialog"] == "true" }
   link_counts = Hash.new(0)
   tags.select { |name, _attributes| name == "a" }.each do |_name, link|
     href = link.fetch("href", "")
@@ -83,7 +88,7 @@ Dir.chdir(root) do
       abort "Keep #{kind} link behavior unchanged: #{href}" if link.key?("target")
     end
   end
-  puts "PASS: all #{link_counts[:destination]} homepage destinations open safe, labeled new tabs; #{link_counts[:iso]} ISO downloads, #{link_counts[:same_page]} home/section links and #{link_counts[:email]} email link retain native behavior."
+  puts "PASS: #{link_counts[:destination]} safe, labeled new-tab destinations/fallbacks (only five video posters may enhance into the cinema); #{link_counts[:iso]} ISO downloads, #{link_counts[:same_page]} home/section links and #{link_counts[:email]} email link retain native behavior."
 
   resources = tags.flat_map { |_name, attributes| attributes.values_at("href", "src") }.compact
   local_paths = resources.select { |value| value.start_with?("/") && !value.start_with?("//") }.map { |value| value.split(/[?#]/, 2).first }.uniq
@@ -94,7 +99,6 @@ Dir.chdir(root) do
     abort "Missing homepage link/asset: #{path}" unless exists
   end
 
-  video_ids = %w[F7fe9pa8OeE 9SDkU5VDQEQ 5JPYJfN7HY0 qBKMe8AatY0 KO2T0oET9go]
   video_ids.each do |id|
     abort "Missing static video link: #{id}" unless hrefs.include?("https://www.youtube.com/watch?v=#{id}")
   end
@@ -138,5 +142,6 @@ Dir.chdir(root) do
 
   puts run!("node", "tests/home-themes.mjs").strip
   puts run!("node", "tests/home-reduced-motion.mjs").strip
+  puts run!("node", "tests/home-video.mjs").strip
   puts "PASS: Ruby/JS syntax, whitespace, public-file guard, #{licenses.length} license notices, #{ids.length} unique IDs, #{local_paths.length} local targets, five videos and static content."
 end