s8n
520f0fbee3
Saved variant 1 "Netflix-cinema" detail-page redesign to web-overrides/skins/detail-variant-01-netflix-cinema.html for future reference. Not applied to dev/prod. Imported Star Wars: Maul - Shadow Lord S01 2160p WEB-DL HEVC SDR (10 episodes, ~21 GB) per playbooks/import-media/ v1.0. First "replace-with-comparison" run: - Existing 1080p upscale renamed in-place to "Star Wars - Maul - Shadow Lord [Before Upscale] (2026)/" with tvshow.nfo <lockdata>true</lockdata> to suppress Jellyfin TMDb auto-merge with the new canonical. - New 2160p staged on onyx, rsync'd to nullstone canonical path /home/user/media/tv/Star Wars - Maul - Shadow Lord (2026)/Season 01/ - Both series live as separate items; Items/Counts bumped Series 10->11, Episodes 197->207. Run log at playbooks/import-media/runs/star-wars-maul-shadow-lord- 2026-2160p.md flags v1.1 follow-ups: document the [Before Upscale] pattern, rsync resume idempotency, and [tmdbid-NNNN] folder token for titles that fail auto-match. ffprobe confirmed E01 = HEVC Main 8-bit 3840x2160 SDR @ 12 Mbps, EAC3 5.1 ENG Atmos + ITA dub, 4x embedded subrip per episode. Direct-play on capable clients. TMDb match failed auto on both folders (recent Disney+ release); operator to manually identify via UI.
968 lines
43 KiB
HTML
968 lines
43 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>ARRFLIX detail-page redesign — 4 variants</title>
|
|
<style>
|
|
/* ============================================================
|
|
ARRFLIX detail-page redesign preview
|
|
4 viewport-shaped variants stacked vertically for comparison
|
|
============================================================ */
|
|
|
|
:root {
|
|
--arr-red: #E50914;
|
|
--arr-red-deep: #B0060F;
|
|
--ink: #f2f2f2;
|
|
--ink-2: #b8b8b8;
|
|
--ink-3: #7a7a7a;
|
|
--hairline: rgba(255,255,255,0.08);
|
|
--chrome-h: 56px;
|
|
|
|
/* Lilo & Stitch backdrop simulation: hawaiian dusk, teal sea, orange sky */
|
|
--backdrop:
|
|
radial-gradient(120% 70% at 80% 20%, #ff8a4c 0%, #ff5e2c 12%, #c43412 30%, transparent 60%),
|
|
radial-gradient(140% 90% at 10% 95%, #0b3a3a 0%, #0a2628 30%, #050d10 70%),
|
|
linear-gradient(180deg, #1d4d52 0%, #0a2528 45%, #030a0c 100%);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; background: #000; color: var(--ink); }
|
|
body {
|
|
font-family: "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* page wrapper sized to PNG render width */
|
|
.page {
|
|
width: 1440px;
|
|
margin: 0 auto;
|
|
padding: 48px 0 80px;
|
|
background: #000;
|
|
}
|
|
|
|
/* variant header (the "1/2/3/4 — name — description" block) */
|
|
.vhdr {
|
|
display: grid;
|
|
grid-template-columns: 92px 1fr;
|
|
gap: 28px;
|
|
align-items: end;
|
|
padding: 0 80px 24px;
|
|
border-bottom: 1px solid var(--hairline);
|
|
margin-bottom: 24px;
|
|
}
|
|
.vhdr .num {
|
|
font-family: "Times New Roman", Georgia, serif;
|
|
font-weight: 700;
|
|
font-size: 96px;
|
|
line-height: 0.85;
|
|
color: var(--arr-red);
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.vhdr h2 {
|
|
margin: 0 0 6px;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.vhdr p {
|
|
margin: 0;
|
|
color: var(--ink-2);
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
max-width: 760px;
|
|
}
|
|
|
|
/* the simulated viewport-shaped frame */
|
|
.frame {
|
|
width: 1280px;
|
|
height: 900px;
|
|
margin: 0 auto 96px;
|
|
background: #000;
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* ============== shared header chrome (matches stock theme) ============== */
|
|
.chrome {
|
|
position: absolute; inset: 0 0 auto 0;
|
|
height: var(--chrome-h);
|
|
z-index: 50;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
padding: 0 22px;
|
|
background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0) 100%);
|
|
}
|
|
.chrome .left { display: flex; align-items: center; gap: 22px; }
|
|
.chrome .right { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
|
|
.chrome .ico {
|
|
width: 28px; height: 28px;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
color: #d8d8d8;
|
|
cursor: pointer;
|
|
}
|
|
.chrome .ico:hover { color: #fff; }
|
|
.chrome .nav {
|
|
color: #d8d8d8;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
}
|
|
.chrome .wordmark {
|
|
width: 162px; height: 32px;
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOsAAABVCAYAAACoyhPQAAAgAElEQVR4Ae1dC7AlR1m+eWgUEBFMIsnunZ7dS5I903OTuJaAYHHxUfgWLCKoKUXKJ1UgFgoiKoqKBCnwrRVeIpZUBUFQISiGhKigsBCSLLt7p+fuJiQkIS+yeZDdzd5z3a+nvzl9ZmdO/3POnLthna262/M43f3/X/+vfs7CQv+vR6BHoEegR6BHoEegR6BHoEegR6BHoEegR6BHoEegR6BHoEegR6BHoEegR6BHoEegR6BHoEegR6BHoEegR6BHoEegR+CkQeD/AO7PdhOwCsvkAAAAAElFTkSuQmCC');
|
|
background-size: contain; background-repeat: no-repeat; background-position: center;
|
|
/* Note: above is a tiny placeholder; the real long b64 is injected per-frame to avoid a 11kb repeat */
|
|
}
|
|
|
|
.chrome .wordmark-real {
|
|
width: 178px; height: 36px;
|
|
background-size: contain; background-repeat: no-repeat; background-position: center;
|
|
}
|
|
|
|
/* tiny stub icons (svg-as-data isn't worth the bytes; use unicode + tracking) */
|
|
.ic-burger::before { content: "\\2261"; font-size: 22px; }
|
|
.ic-search::before { content: "\\1F50D"; font-size: 16px; }
|
|
|
|
/* ============== VARIANT 1 — Netflix-cinema ============== */
|
|
.v1 .hero {
|
|
position: absolute; inset: 0;
|
|
background: var(--backdrop);
|
|
}
|
|
.v1 .hero::after {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
background:
|
|
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.85) 90%, #000 100%),
|
|
radial-gradient(60% 60% at 30% 60%, rgba(0,0,0,0.5), transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
/* fake film grain */
|
|
.v1 .hero::before {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
background-image:
|
|
radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
|
radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
|
|
background-size: 3px 3px, 5px 5px;
|
|
background-position: 0 0, 1px 2px;
|
|
mix-blend-mode: overlay;
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
.v1 .info {
|
|
position: absolute;
|
|
left: 80px; right: 80px; bottom: 80px;
|
|
z-index: 10;
|
|
max-width: 720px;
|
|
}
|
|
.v1 .meta-top {
|
|
display: flex; align-items: center; gap: 14px;
|
|
color: var(--ink-2);
|
|
font-size: 13px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 18px;
|
|
}
|
|
.v1 .meta-top .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--arr-red); display: inline-block; }
|
|
.v1 .meta-top .pg {
|
|
border: 1px solid rgba(255,255,255,0.4);
|
|
padding: 2px 8px;
|
|
font-size: 11px;
|
|
letter-spacing: 0.1em;
|
|
color: #fff;
|
|
}
|
|
.v1 h1 {
|
|
font-family: "Helvetica Neue", "Arial Black", sans-serif;
|
|
font-weight: 900;
|
|
font-size: 92px;
|
|
line-height: 0.92;
|
|
letter-spacing: -0.035em;
|
|
margin: 0 0 18px;
|
|
color: #fff;
|
|
text-shadow: 0 4px 30px rgba(0,0,0,0.7);
|
|
}
|
|
.v1 .tagline {
|
|
font-family: "Times New Roman", Georgia, serif;
|
|
font-style: italic;
|
|
font-size: 20px;
|
|
color: #f0d6b3;
|
|
margin: 0 0 14px;
|
|
letter-spacing: 0.005em;
|
|
}
|
|
.v1 .overview {
|
|
font-size: 15.5px;
|
|
line-height: 1.55;
|
|
color: var(--ink-2);
|
|
margin: 0 0 26px;
|
|
max-width: 640px;
|
|
}
|
|
.v1 .actions {
|
|
display: flex; align-items: center; gap: 14px;
|
|
margin-bottom: 26px;
|
|
}
|
|
.v1 .play {
|
|
background: var(--arr-red);
|
|
color: #fff;
|
|
border: none;
|
|
padding: 14px 32px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
border-radius: 2px;
|
|
transition: background 0.15s;
|
|
}
|
|
.v1 .play::before {
|
|
content: "";
|
|
width: 0; height: 0;
|
|
border-style: solid;
|
|
border-width: 7px 0 7px 12px;
|
|
border-color: transparent transparent transparent #fff;
|
|
}
|
|
.v1 .play:hover { background: var(--arr-red-deep); }
|
|
.v1 .iconbtn {
|
|
width: 46px; height: 46px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid rgba(255,255,255,0.5);
|
|
background: rgba(0,0,0,0.35);
|
|
color: #fff;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
}
|
|
.v1 .iconbtn:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
|
|
.v1 .selectors { display: flex; gap: 12px; }
|
|
.v1 .selectors .sel {
|
|
background: rgba(0,0,0,0.55);
|
|
border: 1px solid rgba(255,255,255,0.18);
|
|
padding: 9px 14px;
|
|
font-size: 12.5px;
|
|
color: var(--ink-2);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
border-radius: 2px;
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
.v1 .selectors .sel .label { color: #fff; font-weight: 600; }
|
|
.v1 .selectors .sel::after {
|
|
content: "\\25BE";
|
|
color: var(--ink-3);
|
|
font-size: 10px;
|
|
margin-left: 4px;
|
|
}
|
|
.v1 .chips {
|
|
position: absolute;
|
|
right: 80px; bottom: 80px;
|
|
z-index: 10;
|
|
width: 320px;
|
|
border-left: 1px solid var(--hairline);
|
|
padding-left: 24px;
|
|
}
|
|
.v1 .chip-row { margin-bottom: 14px; }
|
|
.v1 .chip-row .k {
|
|
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
|
|
color: var(--ink-3); margin-bottom: 6px;
|
|
}
|
|
.v1 .chip-row .v { font-size: 13.5px; color: #e8e8e8; line-height: 1.4; }
|
|
.v1 .chip-row .v .sep { color: var(--ink-3); margin: 0 6px; }
|
|
|
|
/* ============== VARIANT 2 — Editorial poster ============== */
|
|
.v2 { background: #faf6ee; color: #1a1a1a; }
|
|
.v2 .chrome {
|
|
background: linear-gradient(180deg, rgba(250,246,238,0.95) 0%, rgba(250,246,238,0) 100%);
|
|
}
|
|
.v2 .chrome .ico, .v2 .chrome .nav { color: #1a1a1a; }
|
|
.v2 .chrome .wordmark-real { filter: invert(1) brightness(0.1); }
|
|
|
|
.v2 .body {
|
|
position: absolute;
|
|
inset: var(--chrome-h) 0 0 0;
|
|
display: grid;
|
|
grid-template-columns: 480px 1fr;
|
|
gap: 0;
|
|
}
|
|
.v2 .poster {
|
|
background: var(--backdrop);
|
|
background-blend-mode: normal;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.v2 .poster::after {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.7) 100%);
|
|
}
|
|
.v2 .poster .stamp {
|
|
position: absolute;
|
|
top: 28px; left: 28px;
|
|
color: #fff;
|
|
font-family: "Times New Roman", Georgia, serif;
|
|
font-style: italic;
|
|
font-size: 13px;
|
|
letter-spacing: 0.08em;
|
|
opacity: 0.85;
|
|
}
|
|
.v2 .poster .stamp::before {
|
|
content: ""; display: block; width: 36px; height: 1px; background: #fff; margin-bottom: 8px;
|
|
}
|
|
.v2 .poster .ohana {
|
|
position: absolute;
|
|
bottom: 32px; left: 28px; right: 28px;
|
|
color: #fff;
|
|
font-family: "Times New Roman", Georgia, serif;
|
|
font-style: italic;
|
|
font-size: 28px;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.005em;
|
|
text-shadow: 0 2px 20px rgba(0,0,0,0.6);
|
|
}
|
|
.v2 .col {
|
|
padding: 56px 64px 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.v2 .col .kicker {
|
|
font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
|
|
color: var(--arr-red); font-weight: 700;
|
|
margin-bottom: 18px;
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.v2 .col .kicker::after {
|
|
content: ""; flex: 1; height: 1px; background: rgba(0,0,0,0.18);
|
|
}
|
|
.v2 h1 {
|
|
font-family: "Times New Roman", Georgia, serif;
|
|
font-weight: 400;
|
|
font-size: 86px;
|
|
line-height: 0.98;
|
|
letter-spacing: -0.025em;
|
|
margin: 0 0 22px;
|
|
color: #0a0a0a;
|
|
}
|
|
.v2 h1 .amp {
|
|
font-style: italic;
|
|
color: var(--arr-red);
|
|
font-weight: 400;
|
|
}
|
|
.v2 .meta {
|
|
display: flex; align-items: center; gap: 0;
|
|
font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
|
|
color: #555;
|
|
margin-bottom: 28px;
|
|
border-top: 1px solid rgba(0,0,0,0.15);
|
|
border-bottom: 1px solid rgba(0,0,0,0.15);
|
|
padding: 14px 0;
|
|
}
|
|
.v2 .meta > span { padding-right: 22px; margin-right: 22px; border-right: 1px solid rgba(0,0,0,0.15); }
|
|
.v2 .meta > span:last-child { border-right: none; padding-right: 0; margin-right: 0; }
|
|
.v2 .meta .pg {
|
|
border: 1px solid #1a1a1a; padding: 2px 6px; font-weight: 700; color: #1a1a1a; letter-spacing: 0.08em;
|
|
}
|
|
.v2 .overview {
|
|
font-size: 16px;
|
|
line-height: 1.65;
|
|
color: #2a2a2a;
|
|
margin: 0 0 26px;
|
|
max-width: 580px;
|
|
column-count: 1;
|
|
}
|
|
.v2 .overview::first-letter {
|
|
font-family: "Times New Roman", Georgia, serif;
|
|
font-size: 56px; line-height: 0.85;
|
|
float: left; padding: 6px 10px 0 0;
|
|
color: var(--arr-red); font-weight: 400;
|
|
}
|
|
.v2 .actions { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
|
|
.v2 .play {
|
|
background: #0a0a0a; color: #fff; border: none;
|
|
padding: 14px 26px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
|
|
cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
|
|
border-radius: 0;
|
|
}
|
|
.v2 .play::before {
|
|
content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
|
|
border-color: transparent transparent transparent #fff;
|
|
}
|
|
.v2 .play:hover { background: var(--arr-red); }
|
|
.v2 .iconbtn {
|
|
width: 44px; height: 44px; border: 1px solid #1a1a1a; background: transparent; color: #1a1a1a;
|
|
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
|
|
}
|
|
.v2 .selrow { display: flex; gap: 10px; margin-bottom: 28px; }
|
|
.v2 .sel {
|
|
background: transparent; border: 1px solid rgba(0,0,0,0.25); padding: 8px 14px;
|
|
font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #1a1a1a;
|
|
}
|
|
.v2 .sel .lbl { color: #888; margin-right: 6px; }
|
|
.v2 .credits {
|
|
display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 36px;
|
|
border-top: 1px solid rgba(0,0,0,0.15); padding-top: 22px;
|
|
}
|
|
.v2 .credits .row .k {
|
|
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #888; margin-bottom: 4px;
|
|
}
|
|
.v2 .credits .row .v { font-family: "Times New Roman", Georgia, serif; font-size: 16px; color: #1a1a1a; line-height: 1.35; }
|
|
|
|
/* ============== VARIANT 3 — Brutalist marquee ============== */
|
|
.v3 .hero {
|
|
position: absolute; inset: 0;
|
|
background: var(--backdrop);
|
|
filter: grayscale(0.55) contrast(1.1);
|
|
}
|
|
.v3 .hero::after {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
background:
|
|
linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.85) 100%);
|
|
}
|
|
.v3 .hero::before {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
background-image:
|
|
repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px);
|
|
pointer-events: none;
|
|
}
|
|
.v3 .marquee {
|
|
position: absolute; left: 0; right: 0;
|
|
top: 100px;
|
|
text-align: center;
|
|
z-index: 10;
|
|
padding: 0 40px;
|
|
}
|
|
.v3 .marquee .ribbon {
|
|
display: inline-flex; align-items: center; gap: 14px;
|
|
font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
|
|
color: var(--arr-red); font-weight: 700;
|
|
margin-bottom: 22px;
|
|
}
|
|
.v3 .marquee .ribbon::before, .v3 .marquee .ribbon::after {
|
|
content: ""; width: 80px; height: 1px; background: var(--arr-red);
|
|
}
|
|
.v3 .marquee h1 {
|
|
font-family: "Arial Black", "Helvetica Neue", sans-serif;
|
|
font-weight: 900;
|
|
font-size: 220px;
|
|
line-height: 0.82;
|
|
letter-spacing: -0.06em;
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
color: #fff;
|
|
-webkit-text-stroke: 0;
|
|
position: relative;
|
|
}
|
|
.v3 .marquee h1 .amp {
|
|
color: var(--arr-red);
|
|
font-style: italic;
|
|
font-family: "Times New Roman", Georgia, serif;
|
|
font-weight: 700;
|
|
font-size: 0.7em;
|
|
vertical-align: 0.05em;
|
|
margin: 0 -0.05em;
|
|
}
|
|
.v3 .marquee h1::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%; transform: translateX(-50%);
|
|
bottom: -14px;
|
|
width: 70%; height: 6px;
|
|
background: var(--arr-red);
|
|
}
|
|
.v3 .submeta {
|
|
margin-top: 36px;
|
|
display: flex; align-items: center; justify-content: center; gap: 22px;
|
|
font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase;
|
|
color: #d8d8d8;
|
|
}
|
|
.v3 .submeta .pg { border: 2px solid var(--arr-red); color: #fff; padding: 3px 9px; font-weight: 800; letter-spacing: 0.1em; }
|
|
.v3 .submeta .sep { color: var(--arr-red); }
|
|
.v3 .tagline {
|
|
margin-top: 24px;
|
|
text-align: center;
|
|
font-family: "Times New Roman", Georgia, serif;
|
|
font-style: italic;
|
|
font-size: 22px;
|
|
color: #f0d6b3;
|
|
letter-spacing: 0.005em;
|
|
}
|
|
.v3 .grid {
|
|
position: absolute;
|
|
left: 56px; right: 56px; bottom: 56px;
|
|
display: grid;
|
|
grid-template-columns: 320px 1fr 380px;
|
|
gap: 0;
|
|
z-index: 10;
|
|
border-top: 2px solid var(--arr-red);
|
|
padding-top: 22px;
|
|
}
|
|
.v3 .grid .cell { padding: 0 24px; border-right: 1px solid rgba(255,255,255,0.12); }
|
|
.v3 .grid .cell:first-child { padding-left: 0; }
|
|
.v3 .grid .cell:last-child { border-right: none; padding-right: 0; }
|
|
.v3 .grid .cell .k {
|
|
font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--arr-red);
|
|
margin-bottom: 10px; font-weight: 800;
|
|
}
|
|
.v3 .grid .cell .v {
|
|
font-size: 13px; color: #d8d8d8; line-height: 1.55;
|
|
}
|
|
.v3 .grid .cell .overview {
|
|
font-size: 13.5px; color: #c8c8c8; line-height: 1.55;
|
|
}
|
|
.v3 .actions {
|
|
margin-top: 14px;
|
|
display: flex; gap: 10px; align-items: center;
|
|
}
|
|
.v3 .play {
|
|
background: var(--arr-red); color: #fff; border: none;
|
|
padding: 12px 22px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800;
|
|
cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
|
|
border-radius: 0;
|
|
}
|
|
.v3 .play::before {
|
|
content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
|
|
border-color: transparent transparent transparent #fff;
|
|
}
|
|
.v3 .selrow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
|
|
.v3 .sel {
|
|
background: transparent; border: 1px solid rgba(255,255,255,0.25); padding: 6px 10px;
|
|
font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #d8d8d8;
|
|
}
|
|
|
|
/* ============== VARIANT 4 — Streaming compact ============== */
|
|
.v4 { background: #0a0a0a; }
|
|
.v4 .hero {
|
|
position: absolute; left: 0; right: 0; top: 0;
|
|
height: 460px;
|
|
background: var(--backdrop);
|
|
overflow: hidden;
|
|
}
|
|
.v4 .hero::after {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 30%, rgba(10,10,10,0.4) 70%, #0a0a0a 100%);
|
|
}
|
|
.v4 .hero-info {
|
|
position: absolute;
|
|
left: 56px; bottom: 36px;
|
|
z-index: 10;
|
|
max-width: 620px;
|
|
}
|
|
.v4 .hero-info h1 {
|
|
font-family: "Helvetica Neue", "Arial Black", sans-serif;
|
|
font-weight: 900;
|
|
font-size: 56px;
|
|
line-height: 0.95;
|
|
letter-spacing: -0.025em;
|
|
margin: 0 0 12px;
|
|
color: #fff;
|
|
text-shadow: 0 2px 20px rgba(0,0,0,0.6);
|
|
}
|
|
.v4 .hero-info .tagline {
|
|
font-family: "Times New Roman", Georgia, serif;
|
|
font-style: italic;
|
|
font-size: 16px;
|
|
color: #f0d6b3;
|
|
margin: 0 0 18px;
|
|
}
|
|
.v4 .hero-info .meta-row {
|
|
display: flex; align-items: center; gap: 14px;
|
|
margin-bottom: 18px;
|
|
font-size: 12.5px; letter-spacing: 0.08em;
|
|
color: #d8d8d8;
|
|
}
|
|
.v4 .hero-info .meta-row .pg {
|
|
border: 1px solid rgba(255,255,255,0.4); padding: 2px 7px;
|
|
font-size: 10.5px; letter-spacing: 0.1em; color: #fff;
|
|
}
|
|
.v4 .hero-info .meta-row .dot {
|
|
width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.4);
|
|
}
|
|
.v4 .actions { display: flex; align-items: center; gap: 10px; }
|
|
.v4 .play {
|
|
background: var(--arr-red); color: #fff; border: none;
|
|
padding: 11px 26px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
|
|
cursor: pointer; display: inline-flex; align-items: center; gap: 9px; border-radius: 2px;
|
|
}
|
|
.v4 .play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
|
|
.v4 .iconbtn {
|
|
width: 38px; height: 38px; border-radius: 50%;
|
|
border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.4); color: #fff;
|
|
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.v4 .body {
|
|
position: absolute;
|
|
left: 0; right: 0; top: 460px; bottom: 0;
|
|
padding: 28px 56px;
|
|
overflow: hidden;
|
|
}
|
|
.v4 .rows {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0 56px;
|
|
}
|
|
.v4 .row {
|
|
display: grid;
|
|
grid-template-columns: 110px 1fr;
|
|
align-items: baseline;
|
|
padding: 11px 0;
|
|
border-bottom: 1px solid rgba(255,255,255,0.07);
|
|
}
|
|
.v4 .row .k {
|
|
font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3);
|
|
}
|
|
.v4 .row .v {
|
|
font-size: 13.5px; color: #e8e8e8; line-height: 1.45;
|
|
}
|
|
.v4 .row .v .pill {
|
|
display: inline-block;
|
|
padding: 3px 10px;
|
|
border: 1px solid rgba(255,255,255,0.18);
|
|
border-radius: 2px;
|
|
margin: 2px 4px 2px 0;
|
|
font-size: 12px;
|
|
color: #d8d8d8;
|
|
}
|
|
.v4 .row.full { grid-column: 1 / -1; }
|
|
.v4 .overview {
|
|
font-size: 14px; color: #c8c8c8; line-height: 1.6;
|
|
max-width: 980px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.v4 .selrow { display: flex; gap: 10px; }
|
|
.v4 .sel {
|
|
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
|
|
padding: 7px 12px;
|
|
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #d8d8d8;
|
|
border-radius: 2px;
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
}
|
|
.v4 .sel .lbl { color: var(--ink-3); }
|
|
.v4 .sel::after { content: "\\25BE"; color: var(--ink-3); margin-left: 4px; font-size: 9px; }
|
|
|
|
/* ============== shared backdrop note ============== */
|
|
.note {
|
|
text-align: center;
|
|
color: var(--ink-3);
|
|
font-size: 11px;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
padding: 0 0 32px;
|
|
}
|
|
|
|
/* ============== top-of-page title ============== */
|
|
.head {
|
|
padding: 0 80px 36px;
|
|
border-bottom: 1px solid var(--hairline);
|
|
margin-bottom: 48px;
|
|
}
|
|
.head h1 {
|
|
font-family: "Helvetica Neue", "Arial Black", sans-serif;
|
|
font-weight: 900;
|
|
font-size: 38px;
|
|
margin: 0 0 6px;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
.head h1 em { color: var(--arr-red); font-style: normal; }
|
|
.head p { margin: 0; color: var(--ink-2); font-size: 14px; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page">
|
|
|
|
<div class="head">
|
|
<h1>ARRFLIX <em>·</em> Detail-page redesign</h1>
|
|
<p>Four directions for the Lilo & Stitch (2002) movie page. Same content, different aesthetic. Compare and pick.</p>
|
|
</div>
|
|
|
|
<!-- ====================== VARIANT 1 ====================== -->
|
|
<div class="vhdr">
|
|
<div class="num">1</div>
|
|
<div>
|
|
<h2>Netflix-cinema</h2>
|
|
<p>Full-bleed backdrop dominates the viewport; left-anchored title block sits over the bottom third with a red Play CTA. Big type, generous spacing, dramatic gradient wash. Built for "lean back" browsing on a TV or large desktop.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="frame v1">
|
|
<div class="hero"></div>
|
|
|
|
<div class="chrome">
|
|
<div class="left">
|
|
<span class="ico ic-burger"></span>
|
|
<span class="nav">Movies</span>
|
|
<span class="nav">Series</span>
|
|
</div>
|
|
<div class="wordmark-real" style="background-image: url('https://placeholder')"></div>
|
|
<div class="right">
|
|
<span class="ico ic-search"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info">
|
|
<div class="meta-top">
|
|
<span>2002</span><span class="dot"></span>
|
|
<span>1h 25m</span><span class="dot"></span>
|
|
<span class="pg">PG</span><span class="dot"></span>
|
|
<span>HD</span>
|
|
</div>
|
|
<h1>Lilo & Stitch</h1>
|
|
<p class="tagline">"There's one in every family."</p>
|
|
<p class="overview">A young and lonely Hawaiian girl finds a knack for raising the ultimate bad dog: a fugitive baby alien on the run from intergalactic authorities. Together they teach each other the meaning of <em>ohana</em> — family.</p>
|
|
<div class="actions">
|
|
<button class="play">Play</button>
|
|
<button class="iconbtn">+</button>
|
|
<button class="iconbtn">♥</button>
|
|
<button class="iconbtn">☰</button>
|
|
</div>
|
|
<div class="selectors">
|
|
<span class="sel"><span class="lbl">Audio</span> English 5.1</span>
|
|
<span class="sel"><span class="lbl">Subs</span> English</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chips">
|
|
<div class="chip-row">
|
|
<div class="k">Genres</div>
|
|
<div class="v">Animation <span class="sep">·</span> Family <span class="sep">·</span> Comedy <span class="sep">·</span> Sci-Fi</div>
|
|
</div>
|
|
<div class="chip-row">
|
|
<div class="k">Directors</div>
|
|
<div class="v">Chris Sanders, Dean DeBlois</div>
|
|
</div>
|
|
<div class="chip-row">
|
|
<div class="k">Studio</div>
|
|
<div class="v">Walt Disney Pictures</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====================== VARIANT 2 ====================== -->
|
|
<div class="vhdr">
|
|
<div class="num">2</div>
|
|
<div>
|
|
<h2>Editorial poster</h2>
|
|
<p>Split layout — vertical poster on the left, magazine-style info column on the right. Serif display type, drop-cap overview, hairline rules, ivory paper. Reads like a Criterion sleeve. Best when the poster art is the star.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="frame v2">
|
|
<div class="body">
|
|
<div class="poster">
|
|
<div class="stamp">ARRFLIX FEATURE NO. 042</div>
|
|
<div class="ohana">Ohana means family.<br/>Family means nobody gets left behind —<br/>or forgotten.</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="kicker">Animation · Family</div>
|
|
<h1>Lilo <span class="amp">&</span> Stitch</h1>
|
|
<div class="meta">
|
|
<span>2002</span>
|
|
<span>1h 25m</span>
|
|
<span><span class="pg">PG</span></span>
|
|
<span>Walt Disney Pictures</span>
|
|
</div>
|
|
<p class="overview">A young and lonely Hawaiian girl finds a knack for raising the ultimate bad dog: a fugitive baby alien on the run from intergalactic authorities. Together they teach each other the meaning of ohana — family. A small, strange, surprisingly tender movie about being broken in the same shape as someone else.</p>
|
|
<div class="actions">
|
|
<button class="play">Play feature</button>
|
|
<button class="iconbtn">+</button>
|
|
<button class="iconbtn">♥</button>
|
|
</div>
|
|
<div class="selrow">
|
|
<span class="sel"><span class="lbl">Audio</span> English 5.1</span>
|
|
<span class="sel"><span class="lbl">Subs</span> English</span>
|
|
</div>
|
|
<div class="credits">
|
|
<div class="row">
|
|
<div class="k">Directed by</div>
|
|
<div class="v">Chris Sanders<br/>Dean DeBlois</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="k">Studio</div>
|
|
<div class="v">Walt Disney Pictures</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="k">Genres</div>
|
|
<div class="v">Animation, Family, Comedy, Science Fiction</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="k">Year</div>
|
|
<div class="v">2002</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chrome">
|
|
<div class="left">
|
|
<span class="ico ic-burger"></span>
|
|
<span class="nav">Movies</span>
|
|
<span class="nav">Series</span>
|
|
</div>
|
|
<div class="wordmark-real"></div>
|
|
<div class="right">
|
|
<span class="ico ic-search"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====================== VARIANT 3 ====================== -->
|
|
<div class="vhdr">
|
|
<div class="num">3</div>
|
|
<div>
|
|
<h2>Brutalist marquee</h2>
|
|
<p>Title slammed huge dead-center, ALL CAPS, with red accent strokes and a crimson underline rule. Backdrop desaturated and darkened. Three-column metadata grid pinned to the bottom. Loud, cinematic, unapologetic.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="frame v3">
|
|
<div class="hero"></div>
|
|
|
|
<div class="chrome">
|
|
<div class="left">
|
|
<span class="ico ic-burger"></span>
|
|
<span class="nav">Movies</span>
|
|
<span class="nav">Series</span>
|
|
</div>
|
|
<div class="wordmark-real"></div>
|
|
<div class="right">
|
|
<span class="ico ic-search"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="marquee">
|
|
<div class="ribbon">Now Playing · ARRFLIX Feature</div>
|
|
<h1>LILO<span class="amp">&</span>STITCH</h1>
|
|
<div class="submeta">
|
|
<span>2002</span><span class="sep">/</span>
|
|
<span>1H 25M</span><span class="sep">/</span>
|
|
<span class="pg">PG</span><span class="sep">/</span>
|
|
<span>WALT DISNEY PICTURES</span>
|
|
</div>
|
|
<div class="tagline">"There's one in every family."</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="cell">
|
|
<div class="k">The Story</div>
|
|
<div class="overview">A lonely Hawaiian girl raises the ultimate bad dog: a fugitive baby alien. Together they learn the meaning of <em>ohana</em>.</div>
|
|
</div>
|
|
<div class="cell">
|
|
<div class="k">Direction & Genre</div>
|
|
<div class="v"><strong style="color:#fff">Chris Sanders</strong>, <strong style="color:#fff">Dean DeBlois</strong></div>
|
|
<div class="v" style="margin-top:8px; color: var(--ink-3); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;">Animation · Family · Comedy · Sci-Fi</div>
|
|
<div class="selrow">
|
|
<span class="sel">Audio · English 5.1</span>
|
|
<span class="sel">Subs · English</span>
|
|
</div>
|
|
</div>
|
|
<div class="cell">
|
|
<div class="k">Watch</div>
|
|
<div class="actions">
|
|
<button class="play">Play feature</button>
|
|
</div>
|
|
<div class="v" style="margin-top:14px; color: var(--ink-3); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;">+ My List · ♥ Like · Share</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====================== VARIANT 4 ====================== -->
|
|
<div class="vhdr">
|
|
<div class="num">4</div>
|
|
<div>
|
|
<h2>Streaming compact</h2>
|
|
<p>Info-dense Netflix-app style. Hero capped at ~half the viewport; title and Play sit at the bottom of the hero. Below, every metadata field gets its own row in a two-column ledger — Audio, Subs, Genres, Directors, Studio. More content visible without scrolling.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="frame v4">
|
|
<div class="hero"></div>
|
|
|
|
<div class="chrome">
|
|
<div class="left">
|
|
<span class="ico ic-burger"></span>
|
|
<span class="nav">Movies</span>
|
|
<span class="nav">Series</span>
|
|
</div>
|
|
<div class="wordmark-real"></div>
|
|
<div class="right">
|
|
<span class="ico ic-search"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-info">
|
|
<h1>Lilo & Stitch</h1>
|
|
<p class="tagline">"There's one in every family."</p>
|
|
<div class="meta-row">
|
|
<span>2002</span><span class="dot"></span>
|
|
<span>1h 25m</span><span class="dot"></span>
|
|
<span class="pg">PG</span><span class="dot"></span>
|
|
<span>HD · 5.1</span>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="play">Play</button>
|
|
<button class="iconbtn">+</button>
|
|
<button class="iconbtn">♥</button>
|
|
<button class="iconbtn">☰</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="body">
|
|
<p class="overview">A young and lonely Hawaiian girl finds a knack for raising the ultimate bad dog: a fugitive baby alien on the run from intergalactic authorities. Together they teach each other the meaning of ohana — family.</p>
|
|
|
|
<div class="rows">
|
|
<div class="row">
|
|
<div class="k">Audio</div>
|
|
<div class="v"><span class="pill">English 5.1</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="k">Subtitles</div>
|
|
<div class="v"><span class="pill">English</span> <span class="pill">Off</span></div>
|
|
</div>
|
|
<div class="row full">
|
|
<div class="k">Genres</div>
|
|
<div class="v">
|
|
<span class="pill">Animation</span>
|
|
<span class="pill">Family</span>
|
|
<span class="pill">Comedy</span>
|
|
<span class="pill">Science Fiction</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="k">Directors</div>
|
|
<div class="v">Chris Sanders, Dean DeBlois</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="k">Studio</div>
|
|
<div class="v">Walt Disney Pictures</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="note">end of preview · arrflix detail-page directions 1–4</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// Inject the real ARRFLIX wordmark into all .wordmark-real backgrounds.
|
|
// Embedded once here, applied to all four variants — keeps the HTML lighter than
|
|
// pasting the 11kb data-url four times.
|
|
const W = "data:image/png;base64,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";
|
|
document.querySelectorAll(".wordmark-real").forEach(el => {
|
|
el.style.backgroundImage = "url('" + W + "')";
|
|
});
|
|
// V2 is on light paper — invert the wordmark there (already filtered via CSS).
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|