BRAND Netflix 2026 · Page: product-detail

HEADER brand: Netflix; design_date: 2026-09; page_type: product-detail (public title page, "LODP"); variants: category-listing (public genre / collection pages "LOCP", e.g. /browse/genre/839338 "Only on Netflix") share the header, hero card, poster rows, paddles and footer example_urls: https://www.netflix.com/title/80057281 (Stranger Things), https://www.netflix.com/browse/genre/839338; evidence: measured on both URLs (US, English, via US-egress proxy) 2026-09-30 unless marked purpose: show one title (trailer, episodes, details) and convert the visitor with Join Now skeleton: page bg #0f0f0f with an ambient key-art layer; outer padding 48px, body inset 104px (content 1136px at 1440); 14 sections; total height desktop ~4010px, mobile ~4720px; sidebar: none overrides: page background #0f0f0f instead of #000000; buttons, inputs and selects are pills (radius 100px); Sign In is a white pill; header 72px; section titles 32px 700; posters radius 16px; paddles are grey pills (radius 256px, bg rgba(128,128,128,0.4)); sections 40px apart SECTIONS S0 ambient backdrop - tint the whole page with the title's colors background: the title key art as a fixed full-viewport image at opacity 0.15 and the trailer video (1728x972, centered) at opacity 0.25, both masked with linear-gradient(#d9d9d9 78.62%, rgba(115,115,115,0) 100%); page color #0f0f0f underneath motion: background image swap 200ms ease-in-out S1 header / gradient - brand and sign in background: linear-gradient(to top, transparent, #000000); height: 72px; padding: 16px 48px elements: NETFLIX wordmark 147x40 (89x24 mobile); white pill Sign In 77x32 (14px 500, radius 100px) S2 sub-nav / sticky jump-links pill - jump to page sections background: rgba(0,0,0,0.7), backdrop blur 12px, radius 100px, shadow 8px 8px 16px rgba(0,0,0,0.5); height: 41px; sticky at top 20px, centered, z-index 4 elements: 4 links "Trailers", "Episodes", "More to Watch", "Plans", 14px 500 rgba(255,255,255,0.7), padding 11px 20px 12px, 16px side padding inside the pill responsive: mobile pill spans the width and scrolls horizontally (est) S3 hero / rounded video card - play the trailer and capture the email background: card rgba(255,255,255,0.15) under the media, radius 20px 20px 16px 16px, bottom edge curved by mask radial-gradient(103% 12% at 50% 102%, ...) (the bottom edge bows upward like a screen); height: 614px at 1440 (401px mobile), 40px below layout: full content width 1344px (outer padding only); left column 312px with 48px 56px 72px margins; controls right elements: autoplay muted trailer video (object-fit cover) with a bottom scrim (transparent 40% -> black); Netflix "N series" logo 75x20; title logo image 312x30; pill email field 312x56 (radius 100px, 32px above); red pill Join Now 240x48 (18px 500, padding 8px 32px) 12px below; note 16px "Endless entertainment starting at $8.99" 8px below; right-bottom video controls: four 40px round icon buttons (pause, mute, fullscreen/expand, subtitles) bg rgba(22,22,22,0.7), 12px apart motion: poster image fades out (opacity 0.4s) when the video starts; container size transitions 0.25s ease-in responsive: <960 the text block moves below the video: logo 240x23 centered, field and button full width stacked, controls overlay the video S4 metadata / glass panel - title facts background: glass panel (rgba(255,255,255,0.1), 2px rgba(255,255,255,0.04) border, radius 16px, blur 16px); padding: 24px 32px; 40px below elements: h2 24px 500 title; facts row 14px 500 ("2025", "5 Seasons", "TV-14", "Sci-Fi") with 30px gaps and dot separators; two columns 16px apart split by a 1px rgba(255,255,255,0.1) rule: synopsis 16px and "Starring:" / "Creators:" lines 14px/21px (label 500, value 400) responsive: <960 columns stack, rule hidden S5 horizontal-gallery / Trailers - watch clips layout: h2 32px 700 then 12px then a row of 16:9 video cards 327px wide, 6px gaps, row faded out at the right edge by mask linear-gradient(to left, transparent, #000 10%) elements: thumbnail 327x184 radius 8px with a 36px round play icon at bottom left (16px 24px padding) and a runtime badge (13px 500, rgba(0,0,0,0.9), radius 4px) at bottom right; eyebrow "TRAILER" 13px 700 caps 0.16em 70% white; title 16px 500 motion: paddle as Recipe top10-shelf (grey pill paddle 24x80, radius 256px, bg rgba(128,128,128,0.4)) S6 horizontal-gallery / Episodes - browse episodes layout: h2 32px 700 + pill season select (179x40, radius 100px) 16px apart; row of episode cards 327x367, 12px gaps, right edge faded elements: episode card = glass panel with 8px padding: still 307x173 radius 16px with runtime badge, body padding 18px 16px 16px: title 16px/24px 500 ("1. Chapter One: The Vanishing of Will Byers"), synopsis 14px/21px 70% (4 lines, clipped) S7 spec-sheet / More Details - languages, genres, cast layout: h2 32px 700; 3 equal glass cards (378x326), 12px gaps, padding 32px 24px elements: h4 14px 500 white label + 14px 500 70% value pairs, 10px apart ("Watch offline / Available to download", "Genres", "This show is ...", "Audio", "Subtitles", "Cast"); inline link "Tudum.com" underlined white responsive: <960 cards stack S8 poster-shelf / You Might Also Like and S9 Trending Now - cross-sell layout: h2 32px 700; row of 2:3 posters 184x258 radius 16px, li padding 10px 6px, 6 visible at 1440; right edge faded; grey pill paddle motion: poster hover scale 1.05 (200ms ease-in-out) S10 pricing / "A Plan To Suit Your Needs" - show the three US plans layout: h2 32px 700; 3 plan cards 371x220, 12px gaps elements: plan card (Overview): "Standard with ads" 1080p, "Good video quality", "Less ads than you might think", "$8.99 /month" (blue gradient); "Standard" 1080p, "No ads", "$19.99 /month" (purple); "Premium" "4K + HDR", "Best video quality", "Immersive sound (spatial audio)", "No ads", "$26.99 /month" (magenta) responsive: <960 cards stack full width, 168-186px tall S11 cta-band / image-bg "home link" - send the visitor to the home page background: image NMHP_LINK (poster collage) under linear-gradient(rgba(16,16,16,0.6), rgba(16,16,16,0.6)), radius 25px; height: 104px; padding: 36px 32px elements: text 24px 700 "Discover your next favorites, plus new releases every week"; dark pill button "More About Netflix" (rgba(22,22,22,0.7), 32px, 14px 500) right responsive: <960 text 2 lines, button below S12 floating CTA - keep Join Now reachable background: none; red pill Join Now 240x48 centered in a 64px sticky bar at the bottom; hidden at bottom -900px and slides in when the hero form leaves the viewport (inf), transition bottom 1s ease-in-out S13 footer / sitemap-columns - as Overview (home footer), wider 4 columns aligned to the body inset VARIANT category-listing (genre page, LOCP) S1 header and S13 footer as above (no jump links); S3 hero card 1329x636 at 1440 holds a static tilted-poster collage instead of a video; text bottom-left: H1 48px 900 "Only on Netflix", description 18px 400 white (3 lines, max ~620px), then a row: pill email field 312x48 + red pill Join Now 240x48 (12px gap), note 16px below then 20+ poster rows ("Your Next Watch", "Documentaries", "Comedy Movies", "New on Netflix", "Reality TV" ...) each h2 32px 700 + posters 184x283 (li padding 10px 6px 10px 8px), red "TOP 10" badges on top-right corners, 400px vertical rhythm per row; focus-visible radius 8/12/16px by breakpoint PAGE COMPONENTS video card, episode card, plan card, jump-links pill: see sections; glass panel and poster: Overview INTERACTIONS - id: jump-links: click scrolls to the section (smooth, est); the pill stays stuck 20px from the top - id: row paging: Recipe top10-shelf (grey pill paddles) - id: trailer card: click plays the clip in an expanded player (hero-expand-player), not measured - id: season select: native select styled as a pill STATES loading: posters #232323 with a dominant-color layer; hero shows the key art until the video plays SCREENSHOTS - file: netflix_2026_title_d1440_full.jpg shows: full title page for Stranger Things at 1440 (1424x4008) source: live https://www.netflix.com/title/80057281 (US) 2026-09-30 key values: header 72px; jump-links pill 432x41; hero card 1344x614 radius 20/16; metadata glass panel; trailers 327px cards; episode cards 327x367; details 3 cards; posters 184x258 radius 16px; plan cards with prices $8.99 / $19.99 / $26.99 do not copy: posters, stills, video, title logos - file: netflix_2026_title_d1440_scrolled.jpg shows: viewport scrolled to Episodes and More Details: sticky jump-links pill, ambient tint behind glass panels, grey pill paddle - file: netflix_2026_title_m390_full.jpg shows: full title page at 390 @2x (the sticky jump-links pill and floating Join Now bar appear in the middle of the stitched capture; ignore them there) - file: netflix_2026_genre_d1440_top.jpg shows: genre page "Only on Netflix" first screen at 1440: collage hero card, H1 48px 900, pill field + red pill Join Now, first row with TOP 10 badges