BRAND Netflix 2026 · Recipe: title-modal

HEADER brand: Netflix; design_date: 2026-09; kind: component; used_in: Page: home S5 (click on a Top 10 poster) evidence: measured on https://www.netflix.com/ (US) 2026-09-30 and the nmhpFrameworkClient bundle (enter/exit states) unless marked LOOK Clicking a Top 10 poster dims the page to 70% black and opens a dark preview card in the center: a wide landscape still with the title logo at its lower left, then genre chips, a two-line synopsis and a red Get Started button. The card grows from slightly smaller while fading in; an X closes it. STRUCTURE overlay (fixed, inset 0, flex center, z-index 1000, bg rgba(0,0,0,0.7)) -> dialog (role dialog) -> sticky top bar with the close icon button at the right -> hero (16:9 still, title logo) -> body (chips, synopsis, CTA) KEY PARAMETERS dialog: width 669px at 1440 (max-width 41.8125rem; width 50% and max-height 50% at >=960 before the max applies; 100% width below 960), margin 24px, max-height min(90%, 100% - 48px), bg #161616, 1px rgba(128,128,128,0.4) border, radius 8px, shadow 0 4px 8px rgba(0,0,0,0.8), text rgba(255,255,255,0.7), vertical scroll inside close: 40px round icon button (radius 20px), 24px white X icon, 16px from the top and right, transparent bg (hover Hawkins icon button surface, est rgba(255,255,255,0.1)) hero: 668x376 (16:9) landscape still; bottom scrim to #161616 (est); title logo image ~353x64 at left 40px, bottom 4px of the hero body: padding 16px 40px 40px; chips row: 14px 500 on #414141, radius 4px, padding 3px 4px, 8px gaps ("2026", "PG-13", "Movie", "Comedies", "Romance", "Dramas"); synopsis 16px white 16px below; CTA 40px below: red Get Started 156x48, 18px 500, radius 4px, chevron 24px 8px after the label overlay color rgba(0,0,0,0.7) MOTION open: overlay opacity 0 -> 1, 250ms cubic-bezier(0.32,0.94,0.6,1), delay 67ms; dialog opacity 0 -> 1, 100ms delay 100ms, and transform scale(0.88) -> scale(1), 533ms cubic-bezier(0.32,0.94,0.6,1), delay 4ms close: reverse (dialog to opacity 0 and scale 0.88, overlay to 0), same timings (inf) STATES keyboard: focus moves into the dialog (focus trap), Escape and the X close it (inf); mobile: dialog full width with 24px margins, CTA full width (inf); reduced motion: fade only (inf) HOW TO BUILD Fixed overlay with a centered flex child; animate opacity and transform with CSS transitions toggled by an open class; the hero is a background image with an absolutely placed logo. PITFALLS the dialog is dark grey #161616 (not black) with a thin grey border; the scale starts at 0.88 and the transform is long (533ms) while opacity is short; the CTA is the 4px red button, not a pill SCREENSHOTS - file: netflix_2026_title-modal_d1440_open.jpg shows: modal open over the home page at 1440 for "Why Did I Get Married Again?" (text rendered in the fallback sans because the proxy capture portals the dialog outside the themed root; on the live site it uses Netflix Sans (inf)) do not copy: still, title logo