/* ========================================================================================== Layout variants - every part is selected independently through data attributes on : data-shell (sidebar|topnav|rail|dock) · data-categories (tree|chips|tiles|mega|rail) data-listing (grid|masonry|list|carousels) · data-card (standard|overlay|poster|compact) data-detail (stacked|side|theater|tabs|hero|split) · data-related (grid|side|rail|masonry|list) ========================================================================================== */ /* ------------------------------------------------------------------------------ shell: shared */ .brand-logo { width: auto; height: 32px; max-width: 160px; object-fit: contain; } .toplinks { display: none; align-items: center; gap: 2px; min-width: 0; } .toplink { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); padding: 0 var(--s3); border: 0; border-radius: var(--btn-radius); background: none; color: var(--text-muted); font-weight: 600; font-size: calc(14px * var(--font-scale)); white-space: nowrap; } .toplink:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .toplink.is-active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); } .app.has-own-search .topsearch { visibility: hidden; } .site-footer { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-top: var(--s7); padding: var(--s5) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); text-align: center; } .site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s4); } .site-footer-links a { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--text-muted); } .catbar { position: sticky; top: var(--topbar-h); z-index: 80; display: flex; gap: var(--s2); padding: var(--s2) var(--s4); overflow-x: auto; background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); scrollbar-width: none; } .catbar::-webkit-scrollbar { display: none; } .catbar .chip { flex: none; } .chip-root { font-weight: 700; } /* icon rail (shell "rail") */ .rail { display: none; } .rail-link, .dock-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 6px 2px; border: 0; border-radius: var(--radius); background: none; color: var(--text-muted); font-size: calc(10.5px * var(--font-scale)); font-weight: 600; text-align: center; line-height: 1.15; overflow-wrap: anywhere; } .rail-link:hover, .dock-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .rail-link.is-active, .dock-link.is-active { color: var(--accent-text); background: var(--accent-soft); } /* bottom dock (shell "dock", phones) */ .dock { display: none; } /* mega menu */ .mega { position: relative; } .mega-panel { position: fixed; top: calc(var(--topbar-h) + 6px); left: var(--s4); right: var(--s4); z-index: 120; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s5); max-width: 1100px; max-height: calc(100vh - var(--topbar-h) - 32px); margin: 0 auto; padding: var(--s5); overflow-y: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-3); animation: pop 0.16s var(--ease); } .mega-title { margin-bottom: var(--s2); font-size: calc(15px * var(--font-scale)); } .mega-title a { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--hit); color: var(--text); } .mega-col ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 var(--s3); } .mega-link { display: flex; align-items: center; gap: 6px; min-height: var(--hit); color: var(--text-muted); } .mega-link:hover, .mega-link.is-active { color: var(--accent-text); } @media (min-width: 961px) { /* ---- sidebar shell (and always the administration) */ :root[data-shell="sidebar"] .sidebar, .app.is-admin .sidebar { top: var(--topbar-h); z-index: 90; width: var(--sidebar-w); padding: var(--s3) var(--s2) var(--s6); box-shadow: none; transform: none; transition: none; visibility: visible; } :root[data-shell="sidebar"] .app.has-mini .sidebar, .app.is-admin.has-mini .sidebar { bottom: calc(var(--mini-h) + env(safe-area-inset-bottom, 0px)); } :root[data-shell="sidebar"] .main, :root[data-shell="sidebar"] .site-footer, :root[data-shell="sidebar"] .catbar, .app.is-admin .main { margin-left: var(--sidebar-w); } :root[data-shell="sidebar"] .topbar .topbar-menu, .app.is-admin .topbar .topbar-menu { display: none; } :root[data-shell="sidebar"] .scrim, .app.is-admin .scrim { display: none; } /* ---- rail shell */ :root[data-shell="rail"] .app:not(.is-admin) .rail { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 88; display: flex; flex-direction: column; gap: 4px; width: var(--rail-w); padding: var(--s2) 6px; overflow-y: auto; background: var(--bg); } :root[data-shell="rail"] .app:not(.is-admin) .main, :root[data-shell="rail"] .app:not(.is-admin) .site-footer, :root[data-shell="rail"] .app:not(.is-admin) .catbar { margin-left: var(--rail-w); } /* ---- topnav + dock shells: links live in the top bar */ :root[data-shell="topnav"] .toplinks, :root[data-shell="dock"] .toplinks, :root[data-categories="rail"] .toplinks, :root[data-categories="mega"] .toplinks { display: flex; } :root[data-shell="sidebar"] .toplink:not(.mega-btn), :root[data-shell="rail"] .toplink:not(.mega-btn) { display: none; } :root[data-shell="sidebar"][data-categories="rail"] .toplink, :root[data-shell="rail"][data-categories="rail"] .toplink { display: inline-flex; } :root[data-shell="sidebar"] .toplink-extra, :root[data-shell="rail"] .toplink-extra { display: none !important; } } /* dock shell: floating top bar everywhere, bottom dock on phones / tablets */ :root[data-shell="dock"] .app:not(.is-admin) .topbar { top: var(--s2); left: var(--s2); right: var(--s2); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); } :root[data-shell="dock"] .app:not(.is-admin) { padding-top: calc(var(--topbar-h) + var(--s3)); } :root[data-shell="dock"] .app:not(.is-admin) .catbar { top: calc(var(--topbar-h) + var(--s2)); } @media (max-width: 960px) { :root[data-shell="dock"] .app:not(.is-admin) .dock { position: fixed; left: var(--s2); right: var(--s2); bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px)); z-index: 94; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: var(--shadow-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } :root[data-shell="dock"] .app:not(.is-admin) { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } :root[data-shell="dock"] .app.has-mini:not(.is-admin) .dock { bottom: calc(var(--mini-h) + var(--s2) + env(safe-area-inset-bottom, 0px)); } :root[data-shell="dock"] .app.has-mini:not(.is-admin) { padding-bottom: calc(var(--mini-h) + 84px + env(safe-area-inset-bottom, 0px)); } :root[data-shell="dock"] .app:not(.is-admin) .topbar .topbar-menu { display: none; } .mega-btn span { display: none; } } /* ------------------------------------------------------------------------------ listing */ .listing { min-width: 0; } .media-grid { grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); } .mcard { content-visibility: auto; contain-intrinsic-size: auto 300px; } .mcard.is-list { contain-intrinsic-size: auto 120px; } .mcard-thumb { aspect-ratio: var(--thumb-ratio); } .mcard-img { /* width / height attributes reserve the box; the ratio comes from the theme */ height: 100%; } .mcard-heading { font-family: var(--font); font-size: inherit; font-weight: inherit; } .mcard-cols { display: none; } /* masonry: columns are filled by JS in list order (stable while results stream in) */ .masonry { display: flex; align-items: flex-start; gap: var(--s4); } .masonry-col { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--s4); min-width: 0; } .masonry .mcard { contain-intrinsic-size: auto 260px; } /* carousels */ .rails { display: flex; flex-direction: column; gap: var(--s6); } .rail-block { min-width: 0; } .rail-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); } .rail-title { min-width: 0; font-size: calc(19px * var(--font-scale)); line-height: 1.3; } .rail-title a { color: var(--text); } .rail-all { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--text-muted); font-size: calc(13px * var(--font-scale)); font-weight: 600; white-space: nowrap; } .rail-arrows { display: flex; gap: 2px; margin-left: auto; } .rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 22vw, 300px); gap: var(--s3); padding: 6px 2px var(--s3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: 2px; scrollbar-width: thin; } .rail-cell { min-width: 0; scroll-snap-align: start; } .rail-track .mcard { content-visibility: visible; } :root[data-card="poster"] .rail-track { grid-auto-columns: clamp(190px, 20vw, 280px); } .rail-block.is-vertical .rail-track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); max-height: min(78vh, 900px); overflow-x: hidden; overflow-y: auto; scroll-snap-type: y proximity; } @media (hover: none), (pointer: coarse) { .rail-arrows { display: none; } } /* ------------------------------------------------------------------------------ cards */ /* overlay: text sits on the image (always visible - nothing depends on hover) */ :root[data-card="overlay"] .mcard:not(.is-list), :root[data-card="poster"] .mcard:not(.is-list) { gap: 0; overflow: hidden; border-radius: var(--radius); } :root[data-card="overlay"] .mcard:not(.is-list) .mcard-body, :root[data-card="poster"] .mcard:not(.is-list) .mcard-body { position: absolute; inset: auto 0 0 0; padding: var(--s6) var(--s3) var(--s3); background: linear-gradient(transparent, rgba(5, 7, 10, 0.92) 62%); color: #fff; pointer-events: none; } :root[data-card="overlay"] .mcard:not(.is-list) .mcard-body a, :root[data-card="poster"] .mcard:not(.is-list) .mcard-body a { pointer-events: auto; } :root[data-card="overlay"] .mcard:not(.is-list) .mcard-title, :root[data-card="poster"] .mcard:not(.is-list) .mcard-title { color: #fff; } :root[data-card="overlay"] .mcard:not(.is-list) .mcard-meta, :root[data-card="overlay"] .mcard:not(.is-list) .mcard-persons, :root[data-card="overlay"] .mcard:not(.is-list) .mcard-persons a, :root[data-card="poster"] .mcard:not(.is-list) .mcard-meta { color: rgba(255, 255, 255, 0.82); } :root[data-card="overlay"] .mcard:not(.is-list) .mcard-duration, :root[data-card="poster"] .mcard:not(.is-list) .mcard-duration { top: 6px; right: 6px; bottom: auto; } :root[data-card="overlay"] .mcard:not(.is-list) .mcard-fav, :root[data-card="poster"] .mcard:not(.is-list) .mcard-fav, :root[data-card="overlay"] .mcard:not(.is-list) .mcard-add, :root[data-card="poster"] .mcard:not(.is-list) .mcard-add { top: 34px; } :root[data-card="overlay"] .mcard:not(.is-list) .mcard-thumb, :root[data-card="poster"] .mcard:not(.is-list) .mcard-thumb { border-radius: var(--radius); } /* poster: image first, one line of text, grows on hover / keyboard focus */ :root[data-card="poster"] .mcard:not(.is-list) .mcard-persons { display: none; } :root[data-card="poster"] .mcard:not(.is-list) .mcard-title { -webkit-line-clamp: 1; line-clamp: 1; } :root[data-card="poster"] .mcard:not(.is-list) { transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); } @media (hover: hover) { :root[data-card="poster"] .mcard:not(.is-list):hover, :root[data-card="poster"] .mcard:not(.is-list):focus-within { z-index: 2; transform: scale(1.06); box-shadow: var(--shadow-3); } } /* compact: small thumbnail left, text right - also inside grids */ :root[data-card="compact"] .mcard:not(.is-list) { flex-direction: row; align-items: flex-start; gap: var(--s3); padding: var(--s2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } :root[data-card="compact"] .mcard:not(.is-list) .mcard-thumb { flex: none; width: 42%; max-width: 168px; border-radius: var(--radius-sm); } :root[data-card="compact"] .mcard:not(.is-list) .mcard-body { flex: 1 1 auto; padding-right: 30px; } :root[data-card="compact"] .mcard:not(.is-list) .mcard-fav, :root[data-card="compact"] .mcard:not(.is-list) .mcard-add { top: 2px; right: 2px; background: transparent; color: var(--text-muted); opacity: 1; } /* compact cards are wider than tall: the two controls stack in the corner */ :root[data-card="compact"] .mcard:not(.is-list) .mcard-fav ~ .mcard-add { top: calc(2px + var(--hit)); right: 2px; } :root[data-card="compact"] .mcard .mcard-add:hover { color: var(--text); } :root[data-card="compact"] .mcard:not(.is-list) .mcard-fav.is-on { color: #ff5d7a; } :root[data-card="compact"] .media-grid:not(.is-list) { grid-template-columns: repeat(auto-fill, minmax(max(320px, var(--card-min)), 1fr)); gap: var(--s2); } /* compact list rows: a table-like row with many meta columns */ :root[data-card="compact"] .mcard.is-list { align-items: center; gap: var(--s3); padding: 6px var(--s2); border-bottom: 1px solid var(--border); border-radius: 0; } :root[data-card="compact"] .media-grid.is-list { gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } :root[data-card="compact"] .mcard.is-list .mcard-thumb { width: clamp(88px, 12vw, 132px); } :root[data-card="compact"] .mcard.is-list .mcard-title { font-size: calc(14px * var(--font-scale)); -webkit-line-clamp: 1; line-clamp: 1; } :root[data-card="compact"] .mcard.is-list .mcard-bit { display: none; } :root[data-card="compact"] .mcard.is-list .mcard-body { padding-right: 0; } :root[data-card="compact"] .mcard.is-list .mcard-fav, :root[data-card="compact"] .mcard.is-list .mcard-add { position: static; order: 5; flex: none; transform: none; } :root[data-card="compact"] .mcard.is-list .mcard-add { order: 6; } @media (min-width: 900px) { :root[data-card="compact"] .mcard.is-list .mcard-cols { display: grid; flex: none; grid-template-columns: 70px 78px 58px 62px 112px; gap: var(--s2); margin: 0; font: calc(12.5px * var(--font-scale))/1.3 var(--mono); color: var(--text-muted); text-align: right; } :root[data-card="compact"] .mcard-cols dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } :root[data-card="compact"] .mcard-cols dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ------------------------------------------------------------------------------ home + category pages */ .home-hero { display: flex; flex-direction: column; align-items: center; gap: var(--s4); padding: var(--s6) 0 var(--s4); text-align: center; } .home-hero h1 { max-width: 900px; font-size: clamp(calc(26px * var(--font-scale)), 4.2vw, calc(44px * var(--font-scale))); line-height: 1.12; letter-spacing: -0.02em; } .home-hero .searchbox { width: min(760px, 100%); } .home-lead { max-width: 680px; color: var(--text-muted); font-size: calc(16px * var(--font-scale)); } .featured { position: relative; display: flex; align-items: flex-end; min-height: clamp(280px, 46vh, 520px); overflow: hidden; border-radius: var(--radius-lg); background: #05070a; color: #fff; isolation: isolate; } .featured-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; } .featured::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 7, 10, 0.9) 0%, rgba(5, 7, 10, 0.55) 45%, rgba(5, 7, 10, 0.1) 100%), linear-gradient(transparent 50%, rgba(5, 7, 10, 0.85)); } .featured-body { display: flex; flex-direction: column; gap: var(--s3); max-width: 720px; padding: var(--s6); } .featured-kicker { color: rgba(255, 255, 255, 0.75); font-size: calc(12px * var(--font-scale)); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .featured-title { font-size: clamp(calc(24px * var(--font-scale)), 3.6vw, calc(42px * var(--font-scale))); line-height: 1.1; overflow-wrap: anywhere; } .featured-title a { color: #fff; } .featured-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); color: rgba(255, 255, 255, 0.82); } .cat-tiles { padding: 0; list-style: none; } .cat-tile-icon { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: var(--s5); color: color-mix(in srgb, var(--text) 45%, transparent); } .cat-tile { color: var(--text); } .cat-tile:has(img) { color: #fff; } .cat-tile:not(:has(img)) .cat-tile-label { background: none; color: var(--text); } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); } .section-head h2 { font-size: calc(19px * var(--font-scale)); } .gate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s4); } .gate > .icon { color: var(--accent-text); } .pagelinks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s4) 0; } .pagelinks .btn[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); } /* ------------------------------------------------------------------------------ detail: shared */ .detail { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; } .detail-bar { position: sticky; top: calc(var(--topbar-h) + 6px); z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .app.has-catbar .detail-bar { top: calc(var(--topbar-h) + 62px); } .detail.is-modal .detail-bar { top: 0; } .detail-pos { min-width: 72px; color: var(--text-muted); font-size: calc(13px * var(--font-scale)); font-variant-numeric: tabular-nums; text-align: center; } .detail-bar .switch-row { min-height: 0; margin-left: auto; font-size: calc(13px * var(--font-scale)); color: var(--text-muted); } .detail-stage { position: relative; min-width: 0; } .detail-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; min-width: 0; } .detail-main { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; } .detail-related { min-width: 0; } .detail-tabs { display: none; } .detail-tech summary { display: flex; align-items: center; min-height: var(--hit); padding: 0 var(--s4); font-weight: 700; cursor: pointer; } .detail .player-wrap { max-height: min(78vh, calc(100vh - var(--topbar-h) - 120px)); margin-inline: auto; } .detail.is-wide .player-wrap { max-height: calc(100vh - var(--topbar-h) - 16px); } /* compact side list used by "side" related / detail */ .related-side .mcard.is-list { gap: var(--s3); padding: 4px; } .related-side .mcard.is-list .mcard-thumb { width: 148px; } .related-side .mcard.is-list .mcard-title { font-size: calc(14px * var(--font-scale)); } .related-side .mcard.is-list .mcard-body { padding-right: 0; } .related-side .mcard.is-list .mcard-fav, .related-side .mcard.is-list .mcard-add, .related-side .mcard-persons, .related-side .mcard-cols { display: none !important; } /* ---- stacked: everything in one centred column; related follows data-related */ :root[data-detail="stacked"] .page-media, :root[data-detail="tabs"] .page-media { max-width: 1320px; } /* ---- side: player + info left, related right */ /* ---- related "side": same two-column body for the other details */ @media (min-width: 1180px) { :root[data-detail="side"] .detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-areas: "bar bar" "stage related" "main related"; column-gap: var(--s5); } :root[data-detail="side"] .detail .detail-bar { grid-area: bar; } :root[data-detail="side"] .detail .detail-stage { grid-area: stage; } :root[data-detail="side"] .detail .detail-body { display: contents; } :root[data-detail="side"] .detail .detail-main { grid-area: main; } :root[data-detail="side"] .detail .detail-related { grid-area: related; } :root[data-related="side"]:not([data-detail="side"]):not([data-detail="split"]) .detail:not(.is-modal) .detail-body.has-related { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); } } /* ---- theater: full-bleed dark stage with an ambient glow from the poster */ :root[data-detail="theater"] .detail:not(.is-modal) .detail-stage { margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0; padding: var(--s4) var(--s5) var(--s5); background: #050507; isolation: isolate; overflow: hidden; } :root[data-detail="theater"] .detail-glow { position: absolute; inset: -12%; z-index: -1; background-position: center; background-size: cover; filter: blur(70px) saturate(1.6) brightness(0.55); opacity: 0.85; transform: scale(1.1); } :root[data-detail="theater"] .detail:not(.is-modal) .player-wrap { max-width: min(1500px, calc((100vh - var(--topbar-h) - 90px) * 16 / 9)); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7); } :root[data-detail="theater"] .detail:not(.is-modal) .detail-bar { position: static; } /* ---- tabs: one section at a time */ :root[data-detail="tabs"] .detail-tabs { display: block; } :root[data-detail="tabs"] .detail-related .section-title { display: none; } /* ---- hero: big backdrop header; the player opens in place */ .hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(300px, 56vh, 640px); overflow: hidden; border-radius: var(--radius-lg); background: #05070a; color: #fff; isolation: isolate; } :root[data-detail="hero"] .detail:not(.is-modal) .detail-stage { margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0; } :root[data-detail="hero"] .detail:not(.is-modal) .hero, :root[data-detail="hero"] .detail:not(.is-modal) .detail-stage .player-wrap { border-radius: 0; } :root[data-detail="hero"] .detail:not(.is-modal) .detail-stage .player-wrap { max-height: calc(100vh - var(--topbar-h)); background: #000; } .hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(0.7); transform: scale(1.12); } .hero-poster { position: absolute; top: 50%; right: 6%; z-index: -1; width: min(44%, 620px); aspect-ratio: 16 / 9; border-radius: var(--radius); object-fit: cover; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); transform: translateY(-50%); } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 7, 10, 0.92) 0%, rgba(5, 7, 10, 0.6) 48%, rgba(5, 7, 10, 0.15) 100%), linear-gradient(transparent 55%, var(--bg)); } .hero-body { display: flex; flex-direction: column; gap: var(--s3); width: min(100%, 760px); padding: var(--s7) var(--s6) var(--s6); } .hero-title { font-size: clamp(calc(26px * var(--font-scale)), 4vw, calc(48px * var(--font-scale))); line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; } .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); color: rgba(255, 255, 255, 0.84); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); } .hero .btn:not(.btn-primary) { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.14); color: #fff; } .hero .btn-play { min-height: 52px; padding: 0 var(--s6); font-size: calc(17px * var(--font-scale)); } /* while the hero header is showing it already carries the stats and the favorite / share actions */ .detail.has-hero .media-stats, .detail.has-hero .in-hero-too { display: none; } .hero-title { display: none; } :root[data-detail="hero"] .hero-title { display: block; } :root[data-detail="hero"] .detail.has-hero .media-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (max-width: 900px) { .hero-poster { display: none; } .hero-bg { filter: brightness(0.6); transform: none; } } /* ---- split: sticky player left, scrolling content right */ @media (min-width: 1180px) { :root[data-detail="split"] .detail:not(.is-modal) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); grid-template-areas: "bar bar" "stage body"; column-gap: var(--s5); align-items: start; } :root[data-detail="split"] .detail:not(.is-modal) .detail-bar { grid-area: bar; } :root[data-detail="split"] .detail:not(.is-modal) .detail-stage { grid-area: stage; position: sticky; top: calc(var(--topbar-h) + var(--s5)); } :root[data-detail="split"] .detail:not(.is-modal) .detail-body { grid-area: body; } } /* ------------------------------------------------------------------------------ detail modal */ .detail-modal-backdrop { position: fixed; inset: 0; z-index: 190; display: flex; justify-content: center; padding: var(--s4); overflow-y: auto; overscroll-behavior: contain; background: var(--scrim); animation: fade 0.16s var(--ease); } .detail-modal { width: 100%; max-width: 1240px; height: fit-content; min-height: 60vh; margin: auto 0; padding: var(--s4); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-3); animation: pop 0.18s var(--ease); } .detail-modal:focus { outline: none; } .detail-modal .page { padding: 0; } .detail.is-modal .player-wrap { max-height: min(64vh, 720px); } .detail.is-modal .hero { min-height: clamp(260px, 44vh, 480px); } @media (max-width: 720px) { .detail-modal-backdrop { padding: 0; } .detail-modal { min-height: 100%; margin: 0; padding: var(--s3); border: 0; border-radius: 0; } :root[data-detail="theater"] .detail:not(.is-modal) .detail-stage, :root[data-detail="hero"] .detail:not(.is-modal) .detail-stage { margin: calc(-1 * var(--s4)) calc(-1 * var(--s3)) 0; } :root[data-detail="theater"] .detail:not(.is-modal) .detail-stage { padding: 0 0 var(--s3); } .hero-body { padding: var(--s6) var(--s4) var(--s4); } .featured-body { padding: var(--s4); } .detail-bar { top: calc(var(--topbar-h) + 2px); } .detail-bar .btn span.hide-xs { display: none; } .rail-track { grid-auto-columns: clamp(150px, 44vw, 220px); } .masonry, .masonry-col { gap: var(--s3); } } @media (min-width: 961px) { .app.is-admin .savebar { left: calc(var(--sidebar-w) + var(--s4)); } } /* ------------------------------------------------------------------------------ appearance admin + prefs */ .tpl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3); } .tpl-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border: 2px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-align: left; } .tpl-card:hover { border-color: var(--border-strong); } .tpl-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .tpl-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-weight: 700; } .wire { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); } .part-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s2); } .part-option { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-sunken); color: var(--text-muted); font-size: calc(12px * var(--font-scale)); font-weight: 600; text-align: center; } .part-option:hover { border-color: var(--border-strong); color: var(--text); } .part-option.is-active { border-color: var(--accent); color: var(--accent-text); } .part-option.is-default::after { content: attr(data-note); font-weight: 400; font-size: calc(11px * var(--font-scale)); color: var(--text-faint); } .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s3); } .color-field { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-sunken); } .color-field input[type="color"] { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: none; cursor: pointer; } .color-field-info { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; font-size: calc(13px * var(--font-scale)); } .specimen { padding: var(--s3); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-sunken); } .specimen-heading { font-size: calc(22px * var(--font-scale)); line-height: 1.2; } .range-row { display: flex; align-items: center; gap: var(--s3); } .range-row input[type="range"] { flex: 1 1 auto; min-width: 120px; height: var(--hit); accent-color: var(--accent); } .range-value { min-width: 64px; font-variant-numeric: tabular-nums; text-align: right; } .sample-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .choice-row { display: flex; flex-wrap: wrap; gap: var(--s2); } .choice { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--hit); padding: 0 var(--s3); border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-sunken); color: var(--text-muted); font-weight: 600; font-size: calc(13px * var(--font-scale)); } .choice.is-active { border-color: var(--accent); color: var(--accent-text); } .appearance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); }