/* * CineVerse – "Evening of the series": a streaming theme for people who follow their series every evening. * Dark (night blue) by default, light via [data-theme="light"]. Every accent has one meaning: * --accent (pomegranate) = new / play, --accent-2 (turquoise) = your progress, --rank (brass) = ranking. * Accent colours come from the Customizer. Fonts: Bricolage Grotesque (display, episode numbers) and * Atkinson Hyperlegible Next (text); Outfit and Inter stay selectable. All SIL Open Font License. */ /* ---------- Fonts ---------- */ @font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-next-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-next-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-wdth-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-wdth-latin.woff2") format("woff2"); font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokens ---------- */ :root { --accent: #d6334a; --accent-2: #2bb3a6; --new-text: #e85468; --rank: #e2b04a; --on-accent: #fff; --bg: #101a2c; --bg-2: #0b1220; --surface: #172540; --surface-2: #21304f; --surface-3: #2e3f63; --line: rgb(154 167 189 / .16); --line-strong: rgb(154 167 189 / .3); --ink: #f4f6fa; --ink-2: #d3d9e4; --muted: #9aa7bd; --faint: #7d8aa3; --glass: rgb(244 246 250 / .1); --glass-strong: rgb(244 246 250 / .18); --shadow: 0 18px 50px rgb(3 7 16 / .55); --shadow-sm: 0 6px 18px rgb(3 7 16 / .35); --fade-to-bg: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 18%, transparent 55%); --fade-side: linear-gradient(90deg, rgb(16 26 44 / .95) 0%, rgb(16 26 44 / .7) 30%, rgb(16 26 44 / 0) 65%); --radius: 14px; --radius-sm: 10px; --radius-xs: 6px; --header-h: 72px; --gutter: clamp(16px, 4vw, 56px); --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --font-text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(.2, .8, .2, 1); color-scheme: dark; } [data-theme="light"] { --new-text: #a8233a; --rank: #8a6416; --bg: #f4f6fa; --bg-2: #e7ebf2; --surface: #ffffff; --surface-2: #eef1f6; --surface-3: #dfe4ed; --line: rgb(20 27 41 / .1); --line-strong: rgb(20 27 41 / .2); --ink: #141b29; --ink-2: #21304f; --muted: #5b6880; --faint: #7a869c; --glass: rgb(20 27 41 / .06); --glass-strong: rgb(20 27 41 / .12); --shadow: 0 18px 50px rgb(16 26 44 / .16); --shadow-sm: 0 6px 18px rgb(16 26 44 / .1); color-scheme: light; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html.no-scroll { overflow: hidden; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--font-size, 15px)/1.6 var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } img.is-broken { visibility: hidden; } a { color: inherit; text-decoration: none; } a:hover { color: var(--ink); } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.015em; font-weight: 700; } p { margin: 0 0 1em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--accent); color: #fff; } .icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 10px 16px; background: var(--accent); color: #fff; border-radius: var(--radius-sm); font-weight: 700; } .skip-link:focus { top: 12px; color: #fff; } .container { width: 100%; max-width: var(--container, 1680px); margin: 0 auto; padding-inline: var(--gutter); } .narrow { max-width: 860px; } .site-main { min-height: 70vh; } body:not(.has-hero) .site-main { padding-top: var(--header-h); } .page-pad { padding-block: 8px 48px; } .rows { position: relative; z-index: 2; margin-top: -90px; padding-bottom: 40px; } body:not(.has-hero) .rows { margin-top: 24px; } /* ---------- Buttons & small parts ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px; font-weight: 650; font-size: .95rem; white-space: nowrap; transition: background-color .2s, border-color .2s, transform .2s var(--ease), color .2s; } .btn:active { transform: scale(.98); } .btn-lg { min-height: 52px; padding: 0 26px; font-size: 1.02rem; border-radius: 12px; } .btn .icon { width: 20px; height: 20px; } .btn-light { background: #fff; color: #07080c; } .btn-light:hover { background: rgb(255 255 255 / .82); color: #07080c; } .btn-light .icon, .icon-solid { fill: currentColor; stroke: none; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 82%, #fff); color: #fff; } .btn-glass { background: rgb(255 255 255 / .14); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgb(255 255 255 / .08); } .btn-glass:hover { background: rgb(255 255 255 / .24); color: #fff; } [data-theme="light"] .watch .btn-glass, [data-theme="light"] .page-pad .btn-glass { background: var(--glass-strong); color: var(--ink); } .btn-glass .icon-added, [data-list-toggle] .icon-added { display: none; } [data-list-toggle].is-on .icon-added { display: block; } [data-list-toggle].is-on .icon-add { display: none; } .icon-btn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; flex: none; transition: background-color .2s; } .icon-btn:hover { background: var(--glass); } .has-count .count { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 .66rem/18px var(--font-text); text-align: center; } .pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: .76rem; font-weight: 700; letter-spacing: .01em; } .pill--finished { background: var(--surface-3); color: var(--ink-2); } .pill--ongoing { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--new-text); } .meta-item { display: inline-flex; align-items: center; gap: 5px; } .meta-item .icon { width: 15px; height: 15px; } .notice-box { margin: 24px 0; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--muted); } .hero-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--ink-2); font: 700 .9rem/1.2 var(--font-text); } .hero-kicker a { color: inherit; } .kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent); } .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 16px; color: var(--ink-2); font-size: .94rem; } .hero-meta > .pill { margin-inline: 0; } /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h); transition: background-color .3s, box-shadow .3s, backdrop-filter .3s; background: linear-gradient(180deg, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / 0) 100%); color: #fff; } .site-header.is-scrolled, body:not(.has-hero) .site-header { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--line); color: var(--ink); } .header-inner { display: flex; align-items: center; gap: 28px; height: 100%; max-width: var(--container, 1680px); margin: 0 auto; padding-inline: var(--gutter); } .menu-toggle { display: none; margin-left: -8px; } .brand { flex: none; } .brand img { max-height: var(--logo-h, 42px); width: auto; } .brand-text { font: 800 1.55rem/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); } .main-nav { flex: 1; min-width: 0; } .main-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .main-nav ul::-webkit-scrollbar { display: none; } .main-nav a { position: relative; display: block; padding: 9px 13px; border-radius: 8px; font-weight: 550; font-size: .93rem; opacity: .78; white-space: nowrap; transition: opacity .2s, background-color .2s; } .main-nav a:hover { opacity: 1; color: inherit; } .main-nav .current-menu-item > a { opacity: 1; font-weight: 700; } .main-nav .current-menu-item > a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent); } .header-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; } .header-search { position: relative; display: flex; align-items: center; } .header-search input { width: 0; height: 40px; padding: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; opacity: 0; transition: width .3s var(--ease), padding .3s, opacity .2s, background-color .2s; } .header-search.is-open input, .header-search input:focus { width: min(300px, 40vw); padding: 0 44px 0 16px; border-color: var(--line-strong); background: color-mix(in srgb, var(--bg) 70%, transparent); opacity: 1; } .header-search .search-toggle { position: relative; } .header-search.is-open .search-toggle { position: absolute; right: 0; } .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Drawer (mobile menu) */ .drawer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; background: rgb(0 0 0 / .6); backdrop-filter: blur(4px); animation: fade .2s; } .drawer-panel { display: flex; flex-direction: column; gap: 14px; width: min(340px, 88vw); height: 100%; overflow-y: auto; padding: 18px; background: var(--bg-2); box-shadow: var(--shadow); animation: slide-in .3s var(--ease); } .drawer-head { display: flex; align-items: center; justify-content: space-between; } .drawer-search { position: relative; } .drawer-search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); } .drawer-search input { width: 100%; height: 46px; padding: 0 14px 0 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .drawer-menu { list-style: none; margin: 0; padding: 0; } .drawer-menu a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; font-weight: 600; } .drawer-menu a:hover { background: var(--surface); } .drawer-menu .icon { color: var(--muted); } .drawer-theme { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 600; } /* ---------- Hero ---------- */ .hero { position: relative; height: clamp(560px, 92vh, 920px); overflow: hidden; background: var(--bg); --hero-duration: 8000ms; } .hero-slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 1s; } .hero-slide.is-active { opacity: 1; visibility: visible; } .hero-media, .title-hero-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .hero-poster { display: none; } .hero-media::after, .title-hero-media::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--fade-to-bg), var(--fade-side), linear-gradient(180deg, rgb(0 0 0 / .45) 0%, transparent 22%); } .hero-bg, .title-hero-bg { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .hero-slide.is-active .hero-bg { animation: kenburns calc(var(--hero-duration) + 2s) ease-out both; } .hero-content { position: absolute; inset: auto 0 clamp(150px, 24vh, 230px) 0; z-index: 2; color: #fff; } .hero-content > * { max-width: 640px; } .hero-slide.is-active .hero-content > * { animation: rise .8s var(--ease) both; } .hero-slide.is-active .hero-content > *:nth-child(2) { animation-delay: .06s; } .hero-slide.is-active .hero-content > *:nth-child(3) { animation-delay: .12s; } .hero-slide.is-active .hero-content > *:nth-child(4) { animation-delay: .18s; } .hero-slide.is-active .hero-content > *:nth-child(5) { animation-delay: .24s; } .hero-title { max-width: 760px; font-size: clamp(2.3rem, 4.6vw, 4.4rem); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: .06em; font-weight: 800; letter-spacing: -.035em; line-height: .98; margin-bottom: 16px; text-wrap: balance; text-shadow: 0 4px 30px rgb(0 0 0 / .4); } .hero-title a:hover { color: #fff; } .hero .hero-meta, .title-hero .hero-meta { color: rgb(255 255 255 / .85); } .hero-excerpt { color: rgb(255 255 255 / .78); font-size: 1.04rem; max-width: 56ch; margin-bottom: 26px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero-thumbs { position: absolute; inset: auto 0 clamp(110px, 16vh, 150px) 0; z-index: 3; display: flex; justify-content: flex-end; gap: 10px; pointer-events: none; } .hero-thumb { position: relative; width: 62px; aspect-ratio: 2 / 3; padding: 0; border: 2px solid rgb(255 255 255 / .2); border-radius: 8px; overflow: hidden; background: var(--surface); opacity: .6; pointer-events: auto; transition: opacity .3s, transform .3s var(--ease), border-color .3s; } .hero-thumb img { width: 100%; height: 100%; object-fit: cover; } .hero-thumb:hover { opacity: .9; } .hero-thumb.is-active { opacity: 1; border-color: #fff; transform: translateY(-6px); } .thumb-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); } .hero-thumb.is-active .thumb-progress { animation: progress var(--hero-duration) linear forwards; } .hero.is-paused .hero-thumb.is-active .thumb-progress { animation-play-state: paused; } .hero.is-static .thumb-progress { display: none; } /* ---------- Rows ---------- */ .row-section { margin: 0 0 clamp(26px, 3.4vw, 42px); } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; } .section-title { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 700; letter-spacing: -.01em; } .see-all { display: inline-flex; align-items: center; gap: 4px; padding: 6px 4px; border: 0; background: none; color: var(--muted); font-weight: 600; font-size: .88rem; white-space: nowrap; } .see-all:hover { color: var(--ink); } .see-all .icon { width: 16px; height: 16px; transition: transform .2s; } .see-all:hover .icon { transform: translateX(3px); } .row-wrap { position: relative; margin-inline: calc(var(--gutter) * -1); } .row { display: grid; grid-auto-flow: column; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 14px var(--gutter) 18px; scrollbar-width: none; } .row::-webkit-scrollbar { display: none; } .row > * { scroll-snap-align: start; } .row--poster { grid-auto-columns: clamp(132px, 12.2vw, 196px); } .row--landscape { grid-auto-columns: clamp(230px, 20vw, 320px); } .row--top10 { grid-auto-columns: clamp(190px, 16vw, 260px); gap: 6px; } @media (min-width: 721px) { .row.has-cols { grid-auto-columns: calc((100% - (var(--cols) - 1) * 14px) / var(--cols)); } .row--top10.has-cols { grid-auto-columns: calc((100% - (var(--cols) - 1) * 6px) / var(--cols)); } } .cv-blocks > .cv-block-row { position: relative; z-index: 2; } .cv-blocks > .hero + .cv-block-row { margin-top: -90px; } .cv-blocks > .cv-block-row:has(> [data-continue][hidden]) { display: contents; } .cv-blocks > .cv-block-row:first-child { margin-top: 24px; } .cv-blocks > .cv-block-row:last-child { padding-bottom: 40px; } .row-nav { position: absolute; z-index: 6; top: 14px; bottom: 18px; width: var(--gutter); min-width: 44px; display: grid; place-items: center; border: 0; color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 85%, transparent), transparent); opacity: 0; transition: opacity .25s; } .row-next { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--bg) 85%, transparent), transparent); } .row-prev { left: 0; } .row-nav .icon { width: 30px; height: 30px; stroke-width: 2.2; } .row-wrap:hover .row-nav:not([disabled]) { opacity: 1; } .row-nav[disabled] { pointer-events: none; } [data-theme="light"] .row-nav { color: var(--ink); } /* ---------- Cards ---------- */ .card { position: relative; min-width: 0; } .card-frame { position: relative; border-radius: var(--radius-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .card-media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); aspect-ratio: 16 / 9; isolation: isolate; } .card--poster .card-media { aspect-ratio: 2 / 3; } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), opacity .3s; } .card-placeholder { display: grid; place-content: center; justify-items: center; gap: 8px; height: 100%; padding: 12px; color: var(--faint); text-align: center; font-size: .8rem; } .card-placeholder .icon { width: 30px; height: 30px; } .badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 6px; background: rgb(0 0 0 / .62); backdrop-filter: blur(6px); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .02em; } .badge-new { position: absolute; top: 8px; right: 8px; z-index: 3; padding: 3px 9px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font: 700 .74rem/1.5 var(--font-text); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent); pointer-events: none; } .badge-status { position: absolute; left: 8px; bottom: 8px; z-index: 3; padding: 2px 8px; border-radius: 6px; font: 700 .68rem/1.5 var(--font-text); letter-spacing: .02em; pointer-events: none; backdrop-filter: blur(6px); } .badge-status--finished { background: rgb(0 0 0 / .66); color: #fff; } .badge-status--ongoing { background: color-mix(in srgb, var(--accent) 88%, #000); color: var(--on-accent); } .card--poster .badge-status { top: 8px; bottom: auto; } .badge-new--inline { position: static; display: inline-block; margin-right: 4px; box-shadow: none; } /* "Updated": own colour (Settings → Order & “New”), icon and a soft glow so it stands out from "New". */ .badge-updated { display: inline-flex; align-items: center; gap: 4px; background: var(--upd, #f59e0b); color: #1b1300; box-shadow: 0 0 0 2px color-mix(in srgb, var(--upd, #f59e0b) 35%, transparent), 0 4px 16px color-mix(in srgb, var(--upd, #f59e0b) 55%, transparent); animation: cv-upd-glow 2.4s ease-in-out infinite; } .badge-updated .icon { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .badge-updated.badge-new--inline { display: inline-flex; vertical-align: middle; } @keyframes cv-upd-glow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--upd, #f59e0b) 20%, transparent), 0 4px 22px color-mix(in srgb, var(--upd, #f59e0b) 70%, transparent); } } @media (prefers-reduced-motion: reduce) { .badge-updated { animation: none; } } /* "This video has been fixed" notice for visitors who reported it */ .cv-toast { position: fixed; z-index: 1000; right: 16px; bottom: 16px; display: flex; align-items: flex-start; gap: 12px; max-width: min(420px, calc(100vw - 32px)); padding: 14px 16px; border: 1px solid color-mix(in srgb, #22c55e 45%, transparent); border-radius: 14px; background: var(--surface, #111827); color: var(--ink, #fff); box-shadow: 0 18px 40px rgb(0 0 0 / .45); animation: cv-toast-in .3s ease-out; } .cv-toast-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #22c55e; color: #052e14; font-weight: 800; } .cv-toast strong { display: block; margin-bottom: 2px; } .cv-toast a { color: var(--accent); font-weight: 600; } .cv-toast-close { flex: none; margin-left: auto; border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; } @keyframes cv-toast-in { from { transform: translateY(16px); opacity: 0; } } @media (max-width: 640px) { .cv-toast { left: 16px; right: 16px; bottom: 12px; max-width: none; } } .hero-kicker .badge-new--inline + .kicker-dot { display: none; } .duration { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 5px; background: rgb(0 0 0 / .72); color: #fff; font-size: .72rem; font-weight: 600; } .card-play { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent, rgb(0 0 0 / .45)); opacity: 0; transition: opacity .25s; } .card-play .icon { width: 50px; height: 50px; padding: 14px; border-radius: 50%; background: rgb(255 255 255 / .92); color: #07080c; fill: currentColor; stroke: none; transform: scale(.85); transition: transform .25s var(--ease); } .card:hover .card-play, .ep-row a:hover .card-play, .up-next:hover .card-play { opacity: 1; } .card:hover .card-play .icon { transform: scale(1); } .card--landscape:hover .card-media img { transform: scale(1.06); } .card-body { padding: 10px 2px 0; } .card-title { margin: 0 0 3px; font: 600 .94rem/1.35 var(--font-text); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-title a:hover { color: var(--accent); } .card-title--below { margin-top: 9px; font-size: .88rem; color: var(--ink-2); -webkit-line-clamp: 1; } .card-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--muted); font-size: .8rem; } .card-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Poster hover: lift + info panel */ .card-hover { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 46px 12px 12px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: linear-gradient(0deg, rgb(8 9 14 / .97) 0%, rgb(8 9 14 / .9) 55%, transparent 100%); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .35s var(--ease); pointer-events: none; } /* The whole panel opens the card's page; only the round buttons do something else. */ .card-hover-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; border-radius: inherit; } .card-hover-title, .card-hover-meta { position: relative; pointer-events: none; } .card-actions { position: relative; z-index: 1; display: flex; gap: 7px; margin-bottom: 9px; } .round-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1.5px solid rgb(255 255 255 / .55); border-radius: 50%; background: rgb(0 0 0 / .35); color: #fff; transition: border-color .2s, background-color .2s, transform .2s; } .round-btn:hover { border-color: #fff; background: rgb(255 255 255 / .12); transform: scale(1.08); color: #fff; } .round-btn .icon { width: 17px; height: 17px; stroke-width: 2.2; } .round-btn--play { border-color: #fff; background: #fff; color: #07080c; } .round-btn--play:hover { background: rgb(255 255 255 / .85); color: #07080c; } .round-btn--play .icon { fill: currentColor; stroke: none; width: 15px; height: 15px; margin-left: 2px; } .round-btn--end { margin-left: auto; } .round-btn.is-on { border-color: var(--accent); background: var(--accent); } .card-hover-title { margin: 0 0 3px; font: 700 .92rem/1.25 var(--font-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-hover-stats { position: relative; pointer-events: none; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; color: rgb(255 255 255 / .7); font-size: .72rem; line-height: 1.4; } .card-hover-stats .icon { width: 13px; height: 13px; } .card-hover-meta { margin: 0; color: rgb(255 255 255 / .7); font-size: .72rem; line-height: 1.4; } @media (hover: hover) { .card--poster:hover .card-frame, .card--poster:focus-within .card-frame { transform: scale(1.07); z-index: 5; box-shadow: var(--shadow); } .card--poster:hover .card-hover, .card--poster:focus-within .card-hover { opacity: 1; transform: none; pointer-events: auto; } .card--poster:hover .card-media img { transform: scale(1.03); } } /* Customizer: hover panel off → plain zoom; tab bar off */ .cv-hover-simple .card-hover { display: none; } @media (max-width: 720px) { .cv-no-tabbar { padding-bottom: 0; } .cv-no-tabbar .tabbar { display: none; } } /* Top 10 */ .card--top10 { display: flex; align-items: flex-end; } .card--top10 .card-frame { flex: 0 0 64%; margin-left: auto; } .rank { position: absolute; left: -2%; bottom: -8%; z-index: 0; font: 800 clamp(7rem, 11vw, 11.5rem)/1 var(--font-display); letter-spacing: -.06em; color: var(--rank); -webkit-text-stroke: 0; text-shadow: 0 6px 24px rgb(3 7 16 / .55); user-select: none; pointer-events: none; } [data-theme="light"] .rank { text-shadow: none; } /* Continue watching / my list cards (built in JS) */ .card-remove { position: absolute; top: 6px; right: 6px; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / .65); color: #fff; opacity: 0; transition: opacity .2s; } .card-remove .icon { width: 15px; height: 15px; } .card:hover .card-remove, .card-remove:focus-visible { opacity: 1; } .card-when:empty, .card-sub:empty { display: none; } /* Grids */ .grid { display: grid; gap: 26px 16px; } .grid--poster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .grid--landscape { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid-section { margin-bottom: 40px; } .grid-section .section-head { margin-bottom: 14px; } /* ---------- Page heads ---------- */ .page-hero { position: relative; padding: clamp(36px, 6vw, 72px) 0 28px; background: radial-gradient(1200px 300px at 10% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent), radial-gradient(900px 260px at 90% 0%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent); } .page-title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 10px; } .page-desc { color: var(--muted); max-width: 70ch; } .big-search { position: relative; max-width: 620px; margin-top: 18px; } .big-search .icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--faint); width: 22px; height: 22px; } .big-search input { width: 100%; height: 56px; padding: 0 20px 0 54px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); font-size: 1.05rem; } .big-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } .empty-hint { display: flex; align-items: center; gap: 12px; padding: 22px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); } /* ---------- Series page ---------- */ .title-hero { position: relative; min-height: clamp(560px, 82vh, 820px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; } .title-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: clamp(170px, 17vw, 260px) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: end; padding-top: calc(var(--header-h) + 40px); padding-bottom: 48px; } .title-poster img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 80px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .08); } .title-name { font-size: clamp(2.2rem, 4.6vw, 4.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin-bottom: 14px; text-wrap: balance; } .title-desc { max-width: 70ch; color: rgb(255 255 255 / .8); } .title-desc p:last-child { margin-bottom: 0; } .title-cast { margin: 14px 0 0; color: rgb(255 255 255 / .75); font-size: .92rem; } .title-cast span { color: rgb(255 255 255 / .5); } .title-cast a:hover { color: #fff; text-decoration: underline; } .title-info .hero-actions { margin-top: 22px; } .title-info .hero-meta { color: rgb(255 255 255 / .85); } .episodes-block { margin: 34px 0 48px; } .episodes-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .tab { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 650; font-size: .9rem; white-space: nowrap; transition: background-color .2s, border-color .2s; } .tab:hover { border-color: var(--line-strong); } .tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); } .ep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .ep-row a { display: grid; grid-template-columns: 44px clamp(150px, 16vw, 220px) minmax(0, 1fr); align-items: center; gap: 18px; padding: 14px; border-radius: var(--radius); transition: background-color .2s; } .ep-row a:hover { background: var(--surface); } .ep-num { color: var(--faint); font: 700 1.6rem/1 var(--font-display); text-align: center; } .ep-row .ep-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); } .ep-row .ep-thumb img { width: 100%; height: 100%; object-fit: cover; } .ep-row .ep-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ep-row .ep-title { font: 650 1.02rem/1.3 var(--font-text); } .ep-meta { color: var(--muted); font-size: .84rem; } .ep-desc { color: var(--muted); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Watch page ---------- */ .watch-stage { position: relative; isolation: isolate; } .watch-ambient { position: absolute; inset: 0 0 auto 0; height: 720px; z-index: -1; overflow: hidden; opacity: .5; pointer-events: none; } .watch-ambient img { width: 100%; height: 100%; object-fit: cover; filter: blur(80px) saturate(1.6); transform: scale(1.2); } .watch-ambient::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent), var(--bg) 92%); } [data-theme="light"] .watch-ambient { opacity: .25; } .watch { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 400px); gap: clamp(20px, 2.4vw, 34px); padding-top: 28px; padding-bottom: 20px; } .player-wrap { position: relative; } .cv-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #000; box-shadow: 0 30px 80px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .06); } .cv-player iframe, .cv-player video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .cv-player--empty { display: grid; place-items: center; color: var(--muted); } .player-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; } .player-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .3s; } .player-cover::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle at center, rgb(0 0 0 / .05), rgb(0 0 0 / .45)); } .player-cover:hover img { transform: scale(1.03); filter: brightness(.9); } .player-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 92px; height: 92px; transform: translate(-50%, -50%); border-radius: 50%; background: rgb(255 255 255 / .95); box-shadow: 0 0 0 14px rgb(255 255 255 / .16), 0 20px 50px rgb(0 0 0 / .5); transition: transform .3s var(--ease), box-shadow .3s; } .player-play::after { content: ""; position: absolute; left: 37px; top: 29px; border-style: solid; border-width: 17px 0 17px 28px; border-color: transparent transparent transparent #07080c; } .player-cover:hover .player-play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 20px rgb(255 255 255 / .12), 0 20px 50px rgb(0 0 0 / .5); } .preroll { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgb(0 0 0 / .9); } .preroll-slot { width: 100%; display: flex; justify-content: center; } .preroll .preroll-slot iframe { position: static; inset: auto; width: 100%; height: 100%; max-width: 100%; border: 0; background: transparent; color-scheme: light; } /* same scheme as the ad page, so the frame stays transparent on the dark theme */ .preroll-slot img { max-width: 100%; height: auto; border-radius: 8px; } .preroll-label { position: absolute; top: 14px; left: 14px; padding: 3px 9px; border-radius: 5px; background: #f5c518; color: #1b1400; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .preroll-skip { position: absolute; right: 14px; bottom: 14px; min-height: 40px; padding: 0 18px; border: 1px solid rgb(255 255 255 / .3); border-radius: 8px; background: rgb(0 0 0 / .6); color: #fff; font-weight: 650; } .preroll-skip:disabled { opacity: .7; cursor: default; } .preroll-skip:not(:disabled):hover { background: #fff; color: #000; } .source-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; } .source-btn { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-weight: 600; font-size: .84rem; transition: border-color .2s, background-color .2s; } .source-btn:hover { border-color: var(--line-strong); } .source-btn { display: inline-flex; align-items: center; gap: 8px; } .player-fs { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-weight: 600; font-size: .84rem; transition: border-color .2s; } .player-fs:hover { border-color: var(--line-strong); } .cv-player:fullscreen, .cv-player:-webkit-full-screen { position: relative !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0 !important; margin: 0 !important; animation: none !important; } .cv-player.is-pseudo-fs { position: fixed !important; inset: 0 !important; z-index: 9998; width: 100% !important; height: 100% !important; height: 100dvh !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0 !important; margin: 0 !important; animation: none !important; } .player-fs.is-exit { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 9999; background: rgb(0 0 0 / .7); color: #fff; border-color: rgb(255 255 255 / .4); } .cv-fs-lock { overflow: hidden; } .player-fs-exit { position: absolute; z-index: 20; top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgb(255 255 255 / .4); border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; } .source-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 2px rgb(255 255 255 / .35); } .source-btn[data-light="green"] .source-dot { background: #22c55e; } .source-btn[data-light="red"] .source-dot { background: #ef4444; } .source-btn[data-light="orange"] .source-dot { background: #f59e0b; } .source-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); } .autoplay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; border-radius: var(--radius); background: rgb(0 0 0 / .86); color: #fff; text-align: center; } .autoplay-label { margin: 0; color: rgb(255 255 255 / .7); } .autoplay-label strong { color: var(--accent); font-size: 1.25em; } .autoplay-title { margin: 0 0 14px; font: 700 1.5rem/1.2 var(--font-display); } .autoplay-actions { display: flex; gap: 10px; } .watch-head { margin: 22px 0 14px; } .watch-series { display: inline-block; margin-bottom: 6px; color: var(--muted); font-weight: 700; font-size: .92rem; } .watch-series:hover { color: var(--ink); text-decoration: underline; } .watch-title { font-size: clamp(1.5rem, 2.6vw, 2.25rem); margin-bottom: 10px; } .watch-head .hero-meta { color: var(--muted); margin: 0; } .watch-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 18px; border-bottom: 1px solid var(--line); } .watch-actions { display: flex; flex-wrap: wrap; gap: 8px; } .segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; } .seg-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 0; background: transparent; font-weight: 650; font-size: .88rem; } .seg-btn + .seg-btn { border-left: 1px solid var(--line); } .hero-actions .segmented { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .25); color: #fff; } .hero-actions .seg-btn { min-height: 48px; } .hero-actions .seg-btn:hover { background: rgb(255 255 255 / .18); } .seg-btn:hover { background: var(--surface-2); } .seg-btn[aria-pressed="true"] { color: var(--accent); } .seg-btn[aria-pressed="true"] .icon { fill: color-mix(in srgb, var(--accent) 30%, transparent); } .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 650; font-size: .88rem; transition: border-color .2s, background-color .2s; } .chip .icon { width: 18px; height: 18px; } .chip:hover { border-color: var(--line-strong); } .chip.is-on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); } .chip-quiet { color: var(--muted); } .chip:disabled { opacity: .55; cursor: default; } .episode-nav { display: flex; gap: 8px; } .watch-desc { margin-top: 18px; color: var(--ink-2); max-width: 80ch; } .facts { display: grid; gap: 10px; margin: 18px 0; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); } .facts div { display: flex; gap: 14px; } .facts dt { min-width: 100px; color: var(--faint); font-weight: 600; } .facts dd { margin: 0; } .facts dd a:hover { color: var(--accent); } .watch-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; grid-row: span 2; } .watch-main, .watch-comments { grid-column: 1; min-width: 0; } .up-next { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; } .up-next:hover { border-color: var(--line-strong); } .up-next-label { color: var(--new-text); font-size: .85rem; font-weight: 700; } .up-next-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); } .up-next-media img { width: 100%; height: 100%; object-fit: cover; } .up-next-title { font-weight: 650; } .side-panel { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; } .side-title { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 14px 16px; font-size: 1rem; border-bottom: 1px solid var(--line); } .side-title span { color: var(--faint); font: 600 .82rem var(--font-text); } .episode-list { position: relative; list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; max-height: 560px; overflow-y: auto; scrollbar-width: thin; } .episode-list a { display: flex; gap: 12px; align-items: center; padding: 7px; border-radius: var(--radius-sm); transition: background-color .2s; } .episode-list a:hover { background: var(--surface-2); } .episode-list .is-current a { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--ink); } .episode-list li.is-watched:not(.is-current) .ep-thumb { position: relative; } .episode-list li.is-watched:not(.is-current) .ep-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent-2); } .episode-list li.is-watched:not(.is-current) .ep-title { color: var(--muted); } .episode-list .ep-thumb, .qv-episodes .ep-thumb { flex: none; width: 112px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7px; background: var(--surface-2); } .episode-list .ep-thumb img, .qv-episodes .ep-thumb img { width: 100%; height: 100%; object-fit: cover; } .ep-text { display: flex; flex-direction: column; min-width: 0; } .ep-label { color: var(--muted); font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; } .episode-list .ep-title, .qv-episodes .ep-title { font-weight: 600; font-size: .88rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cv-ad { display: flex; justify-content: center; margin: 18px 0; overflow: hidden; } .watch-side .cv-ad { margin: 0; } /* Comments */ .comments { margin-top: 34px; } .comment-list { list-style: none; padding: 0; } .comment-body { padding: 14px 0; border-bottom: 1px solid var(--line); } .comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); } .comment-form .submit { min-height: 44px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; } /* ---------- Modals ---------- */ .cv-modal { width: min(880px, 94vw); max-height: 90vh; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); color: var(--ink); box-shadow: 0 40px 120px rgb(0 0 0 / .7); overflow: hidden auto; } .cv-modal[open] { animation: pop .35s var(--ease); } .cv-modal::backdrop { background: rgb(0 0 0 / .72); backdrop-filter: blur(6px); } .cv-modal--video { width: min(1100px, 94vw); background: #000; border: 0; overflow: visible; } .modal-close { position: absolute; top: 14px; right: 14px; z-index: 5; background: rgb(0 0 0 / .55); color: #fff; } .modal-close:hover { background: rgb(0 0 0 / .8); } .cv-modal--video .modal-close { top: -52px; right: 0; background: rgb(255 255 255 / .15); } .qv-top { position: relative; min-height: 340px; display: flex; align-items: flex-end; color: #fff; background: #000; } .qv-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .qv-top::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(0deg, var(--bg-2) 2%, rgb(11 13 19 / .55) 45%, transparent 75%); } .qv-info { position: relative; z-index: 2; padding: 28px 32px 8px; } .qv-title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 10px; } .qv-info .hero-meta { color: rgb(255 255 255 / .85); } .qv-content { padding: 16px 32px 30px; } .qv-excerpt { color: var(--ink-2); } .qv-content .side-title { padding: 0; border: 0; margin: 22px 0 10px; } .qv-episodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; } .qv-episodes a { display: flex; gap: 12px; align-items: center; padding: 7px; border-radius: var(--radius-sm); } .qv-episodes a:hover { background: var(--surface); } .qv-loading { height: 340px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; } /* ---------- Audio ---------- */ .card--square .card-media { aspect-ratio: 1; } .card--square:hover .card-media img { transform: scale(1.05); } .row--square { grid-auto-columns: clamp(150px, 13vw, 210px); } .grid--square { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .audio-stage { position: relative; isolation: isolate; } .audio-page { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px); gap: clamp(20px, 3vw, 40px); padding-top: 32px; padding-bottom: 24px; align-items: start; } .audio-page:only-child, .audio-page > .audio-main:only-child { grid-column: 1 / -1; } .audio-hero, .collection-head { display: grid; grid-template-columns: clamp(180px, 22vw, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: end; } .collection-head { padding-top: 40px; padding-bottom: 32px; } .audio-cover { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); box-shadow: 0 30px 80px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .06); } .audio-cover img { width: 100%; height: 100%; object-fit: cover; } .audio-cover .card-placeholder .icon { width: 56px; height: 56px; } .audio-title { font-size: clamp(1.7rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 10px; text-wrap: balance; } .audio-info .hero-meta { color: var(--ink-2); } .audio-info .hero-meta a:hover { color: var(--accent); } .audio-actions { margin-top: 16px; } .ap { margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); backdrop-filter: blur(14px); } .ap-row { display: flex; align-items: center; gap: 16px; } .ap-play { display: grid; place-items: center; flex: none; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .2s var(--ease); } .ap-play:hover { transform: scale(1.06); } .ap-play .icon { width: 24px; height: 24px; fill: currentColor; stroke: none; } .ap-play .ap-icon-play { margin-left: 3px; } .ap .ap-icon-pause, .ap.is-playing .ap-icon-play { display: none; } .ap.is-playing .ap-icon-pause { display: block; } .ap-track { flex: 1; min-width: 0; } .ap-seek { --p: 0%; width: 100%; height: 6px; margin: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--p), var(--glass-strong) var(--p)); -webkit-appearance: none; appearance: none; cursor: pointer; } .ap-seek::-webkit-slider-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .35); -webkit-appearance: none; appearance: none; } .ap-seek::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; } .ap-times { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; } .ap-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; } .ap-skip { position: relative; } .ap-skip span { position: absolute; font-size: .52rem; font-weight: 800; } .ap-speed select { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-weight: 650; } .ap-resume { margin-top: 12px; } .ap-embed iframe { width: 100%; min-height: 166px; margin-top: 18px; border: 0; border-radius: var(--radius); } .track-list { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; max-height: 560px; overflow-y: auto; } .track-list a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); transition: background-color .2s; } .track-list a:hover { background: var(--surface-2); } .track-list .is-current a { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--accent); } .track-num { color: var(--faint); font: 700 .95rem/1 var(--font-display); text-align: center; } .track-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .track-title .badge-new--inline { margin-left: 8px; vertical-align: 1px; } .track-dur { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; } .track-list--page { max-height: none; padding: 0; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); } .track-list--page a { padding: 14px 16px; } /* ---------- Ratings ---------- */ .rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 12px 0 0; } .rating-stars { display: inline-flex; } .star { padding: 0 2px; border: 0; background: none; color: rgb(255 255 255 / .28); font-size: 1.45rem; line-height: 1; transition: color .15s, transform .15s; } [data-theme="light"] .watch .star, [data-theme="light"] .audio-info .star { color: rgb(10 14 25 / .2); } .star.is-on { color: #fbbf24; } .star:hover { transform: scale(1.15); } .rating-avg { font: 800 1.05rem/1 var(--font-display); } .rating-count { color: var(--muted); font-size: .85rem; } .title-hero .rating-count { color: rgb(255 255 255 / .7); } /* ---------- Lights off ---------- */ .lights-shade { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 80; background: rgb(0 0 0 / .92); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; } .lights-off .lights-shade { opacity: 1; visibility: visible; } .lights-off .watch-stage { z-index: 61; } .lights-off .player-wrap { position: relative; z-index: 81; } .lights-off [data-lights] { position: relative; z-index: 81; } /* ---------- Mini player ---------- */ .cv-player.is-floating { position: fixed; right: 20px; bottom: 20px; z-index: 75; width: min(400px, 46vw); border-radius: 12px; box-shadow: 0 24px 60px rgb(0 0 0 / .6); animation: pop .3s var(--ease); } .mini-bar { position: absolute; top: 6px; right: 6px; z-index: 5; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; } .cv-player.is-floating:hover .mini-bar, .cv-player.is-floating:focus-within .mini-bar { opacity: 1; } .mini-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / .7); color: #fff; } .mini-btn .icon { width: 16px; height: 16px; } @media (hover: none) { .mini-bar { opacity: 1; } } /* ---------- Instant search ---------- */ .search-suggest { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: min(420px, 92vw); max-height: 70vh; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); color: var(--ink); box-shadow: var(--shadow); } .suggest-item { display: flex; align-items: center; gap: 12px; padding: 7px; border-radius: 10px; } .suggest-item:hover, .suggest-item.is-active { background: var(--surface-2); } .suggest-thumb { flex: none; width: 76px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--surface-2); } .suggest-item.is-tall .suggest-thumb { width: 44px; aspect-ratio: 2 / 3; } .suggest-thumb img { width: 100%; height: 100%; object-fit: cover; } .suggest-text { display: flex; flex-direction: column; min-width: 0; } .suggest-text strong { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .suggest-text small { color: var(--muted); font-size: .76rem; } .suggest-empty { margin: 0; padding: 12px; color: var(--muted); } .suggest-all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--line); color: var(--accent); font-weight: 650; font-size: .88rem; text-align: center; } /* ---------- VAST, credits, trending ---------- */ .preroll--vast { padding: 0; background: #000; } .preroll-video { width: 100%; height: 100%; object-fit: contain; } .preroll-more { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 8px; background: rgb(0 0 0 / .6); color: #fff; font-weight: 650; font-size: .85rem; } .footer-credit { margin-top: 6px !important; font-size: .78rem; opacity: .8; } .trend-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .trend-grid { counter-reset: trend; } .trend-grid .card { counter-increment: trend; } .trend-grid .card-frame::before { content: counter(trend); position: absolute; left: 8px; bottom: 8px; z-index: 3; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; background: rgb(0 0 0 / .72); color: #fff; font: 800 1rem/1 var(--font-display); backdrop-filter: blur(6px); } .trend-grid .card:nth-child(-n+3) .card-frame::before { background: var(--accent); } /* ---------- Footer & tab bar ---------- */ .site-footer { margin-top: 40px; padding: 48px 0 26px; border-top: 1px solid var(--line); background: var(--bg-2); } .footer-grid { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(140px, 1fr)); gap: 32px; } .footer-brand img { max-height: 40px; width: auto; margin-bottom: 14px; } .footer-brand p { color: var(--muted); max-width: 42ch; font-size: .92rem; } .footer-col h2 { margin: 0 0 12px; font: 700 .95rem/1.2 var(--font-display); color: var(--ink-2); } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .footer-col a { color: var(--ink-2); font-size: .92rem; } .footer-col a:hover { color: var(--accent); } .footer-bottom { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--faint); font-size: .85rem; } .footer-bottom p { margin: 0; } .tabbar { display: none; } /* ---------- Pagination, empty, 404 ---------- */ .pagination { margin: 40px 0; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .pagination .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-weight: 650; } .pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--bg); } .empty-state { text-align: center; padding: calc(var(--header-h) + 40px) var(--gutter) 80px; } .empty-state .big-search { margin: 26px auto; } .empty-code { margin: 0; font: 900 clamp(6rem, 18vw, 11rem)/1 var(--font-display); letter-spacing: -.06em; color: var(--surface-3); } .entry-content a { color: var(--accent); } /* Downloads */ .downloads { margin: 22px 0 6px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); } .downloads-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.05rem; } .downloads-title .icon { color: var(--accent); } .dl-list { display: flex; flex-wrap: wrap; gap: 8px; } .dl-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); font-weight: 650; font-size: .9rem; transition: border-color .2s, background-color .2s, transform .2s var(--ease); } .dl-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); transform: translateY(-1px); } .dl-btn .icon { width: 18px; height: 18px; color: var(--accent); } .dl-name { text-transform: capitalize; } .dl-q { padding: 2px 7px; border-radius: 5px; background: #f5c518; color: #1b1400; font-size: .7rem; font-weight: 800; } .dl-size { color: var(--muted); font-size: .8rem; font-weight: 500; } .downloads-login { margin: 0; } .badge-q { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 5px; background: #f5c518; color: #1b1400; font-size: .68rem; font-weight: 800; letter-spacing: .02em; } .series-downloads { margin-top: 26px; } /* Series poster used as episode image */ .poster-fill { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--surface-2); } .poster-fill::before { content: ""; position: absolute; inset: -24px; background: var(--art) center / cover no-repeat; filter: blur(22px) brightness(.55) saturate(1.2); } .poster-fill img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain !important; } .player-cover .poster-fill img { transform: none !important; } .player-ep { position: absolute; left: 18px; top: 16px; z-index: 2; padding: 6px 12px; border-radius: 8px; background: var(--accent); color: #fff; font: 800 .95rem/1.2 var(--font-display); letter-spacing: .02em; box-shadow: 0 6px 20px rgb(0 0 0 / .4); } /* ---------- WordPress content classes ---------- */ .entry-content > * { max-width: 100%; } .entry-content img { border-radius: var(--radius-sm); } .entry-image img { width: 100%; border-radius: var(--radius); margin-bottom: 24px; } .alignleft { float: left; margin: .3em 1.4em 1em 0; } .alignright { float: right; margin: .3em 0 1em 1.4em; } .aligncenter { display: block; margin-inline: auto; } .alignwide { margin-inline: calc(-1 * min(8vw, 120px)); max-width: none; } .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; } .wp-caption { max-width: 100%; margin-bottom: 1.4em; } .wp-caption-text, .gallery-caption, figcaption { margin-top: 6px; color: var(--muted); font-size: .85rem; text-align: center; } .sticky { position: relative; } .bypostauthor > .comment-body .fn::after { content: " ★"; color: var(--accent); } .page-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0; font-weight: 600; } .entry-tags a { display: inline-block; margin: 0 6px 6px 0; padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .85rem; } .post-navigation .nav-links { display: flex; justify-content: space-between; gap: 16px; margin: 32px 0; } .post-navigation a { font-weight: 650; } .wp-block-button.is-style-cineverse-glass .wp-block-button__link { background: var(--glass-strong); color: var(--ink); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); } .is-style-cineverse-card { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); } .is-style-cineverse-poster img { border-radius: var(--radius); box-shadow: var(--shadow); } .footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); } .footer-widget-title { margin: 0 0 12px; font: 700 .95rem/1.2 var(--font-display); color: var(--ink-2); } .footer-widget h2, .footer-widget .wp-block-heading { margin: 0 0 12px; font: 700 .95rem/1.2 var(--font-display); color: var(--ink-2); } .footer-widget a { color: var(--ink-2); } .footer-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .screen-reader-text:focus { position: static !important; width: auto; height: auto; clip: auto; } /* ---------- Animations ---------- */ @keyframes kenburns { from { transform: scale(1.1); } to { transform: scale(1); } } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes progress { from { width: 0; } to { width: 100%; } } @keyframes fade { from { opacity: 0; } } @keyframes slide-in { from { transform: translateX(-100%); } } @keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } } @keyframes shimmer { to { background-position: -200% 0; } } /* ---------- Home rows as a grid (CineVerse → Settings → Home page: more than one row) ---------- */ .row-wrap--grid { margin-inline: 0; } .row-wrap--grid .row-nav { display: none; } .row--grid { --gcols-auto: 6; --gcols-m-auto: 3; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(var(--gcols, var(--gcols-auto)), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding: 14px 0 18px; } .row--grid.row--landscape { --gcols-auto: 4; --gcols-m-auto: 2; } .row--grid.row--top10 { --gcols-auto: 5; --gcols-m-auto: 2; } .row--grid.row--genres { --gcols-auto: 4; --gcols-m-auto: 2; } .row--grid.row--cast { --gcols-auto: 8; --gcols-m-auto: 4; } @media (max-width: 720px) { .row--grid { grid-template-columns: repeat(var(--gcols-m, var(--gcols-m-auto)), minmax(0, 1fr)); gap: 16px 10px; } } @media (min-width: 721px) { .tickets.has-cols { grid-template-columns: repeat(var(--tcols), minmax(0, 1fr)); } } @media (max-width: 720px) { .tickets.has-cols-m { grid-template-columns: repeat(var(--tcols-m), minmax(0, 1fr)); } } /* ---------- Out today: episode tickets ---------- */ .today .section-head { align-items: end; } .today-date { margin: 2px 0 0; color: var(--muted); font-size: .9rem; } .tickets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 440px)); justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none; } .ticket-link { --stub: 104px; display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); min-height: 116px; border-radius: var(--radius-xs); background: var(--surface); color: var(--ink); /* Two half-circle cut-outs at the perforation, like a ticket. */ -webkit-mask: radial-gradient(circle 9px at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 9px at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; transition: background-color .2s; } .ticket-link:hover { background: var(--surface-2); color: var(--ink); } .ticket-link:focus-visible { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--ink); } .ticket-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 8px; text-align: center; } .ticket-label { color: var(--muted); font-size: .76rem; font-weight: 700; line-height: 1.2; } .ticket.is-out .ticket-label { color: var(--new-text); } /* The episode number tall and narrow (Bricolage's width axis), the ticket's one memorable thing. */ .ticket-num { font: 800 clamp(3.1rem, 2.7rem + 1.4vw, 3.8rem)/.88 var(--font-display); font-stretch: 75%; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .ticket-body { position: relative; display: flex; align-items: center; gap: 12px; margin-block: 12px; padding: 0 14px 0 16px; border-left: 1px dashed var(--line-strong); } .ticket-poster { flex: none; width: 46px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 6px; background: var(--surface-2); } .ticket-poster img { width: 100%; height: 100%; object-fit: cover; } .ticket-row { display: contents; } .ticket-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* Always room for two lines, so short and long titles give tickets of the same height. */ .ticket-title { min-height: 2.5em; font: 650 1.02rem/1.25 var(--font-display); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .ticket-meta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; color: var(--muted); font-size: .85rem; } .ticket-time { color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; } .cal-time { display: inline-block; margin-top: 2px; color: var(--ink-2); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; } .ticket-play { flex: none; display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border-radius: 50%; background: var(--accent); color: var(--on-accent); } .ticket-play .icon { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; stroke: none; } .ticket:not(.is-out) .ticket-link { background: color-mix(in srgb, var(--surface) 70%, transparent); } .ticket:not(.is-out) .ticket-num { color: var(--ink-2); } /* Wide pictures (CineVerse → Settings → Home page): the 16:9 picture fills the ticket body, the title below it. */ .tickets--wide .ticket-link { min-height: 0; height: 100%; } .tickets--wide .ticket-body { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 2px; } .tickets--wide .ticket-poster { width: 100%; aspect-ratio: 16 / 9; } .tickets--wide .ticket-row { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; } .tickets--wide .ticket-text { align-items: center; } .tickets--wide .ticket-play { width: 38px; height: 38px; } /* ---------- Episode page: the big episode number next to the title ---------- */ .watch-head--episode { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px 20px; } .watch-head--episode > :not(.watch-num):not(.watch-head-text) { grid-column: 1 / -1; } .watch-num { font: 800 clamp(3.8rem, 2.6rem + 3.4vw, 6.2rem)/.82 var(--font-display); font-stretch: 75%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); } .watch-head--episode .watch-title { margin-bottom: 6px; } /* ---------- Episode lists: what this visitor has watched (turquoise = your progress) ---------- */ .ep-row.is-watched .ep-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent-2); } .ep-row.is-watched .ep-title { color: var(--muted); } .ep-thumb { position: relative; } .ep-meta { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; } .ep-marker { background: var(--surface-3); } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .watch, .audio-page { grid-template-columns: minmax(0, 1fr); } .watch-side { grid-row: auto; } .episode-list { max-height: 440px; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .main-nav { display: none; } .menu-toggle { display: grid; } .header-inner { gap: 10px; } .hide-sm { display: none; } } @media (max-width: 720px) { :root { --header-h: 62px; } body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } .brand img { max-height: min(var(--logo-h, 42px), 34px); } .hero-excerpt { -webkit-line-clamp: 2; } .hero-actions { gap: 8px; } .hero-actions .btn-lg { min-height: 46px; padding: 0 14px; font-size: .9rem; gap: 7px; } .rows { margin-top: -60px; } .row--poster { grid-auto-columns: 34%; } .row--landscape { grid-auto-columns: 74%; } .row--top10 { grid-auto-columns: 52%; } .row-nav { display: none; } .grid--poster { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 12px; } .grid--landscape { grid-template-columns: minmax(0, 1fr); } .title-hero-inner { grid-template-columns: minmax(0, 1fr); } .audio-page { grid-template-columns: minmax(0, 1fr); } .audio-hero, .collection-head { grid-template-columns: minmax(0, 1fr); } .audio-cover { width: min(260px, 70vw); } .row--square { grid-auto-columns: 40%; } .grid--square { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .title-poster { width: 132px; } .ep-row a { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 6px; } .ep-num { display: none; } .ep-desc { display: none; } .watch { padding-top: 12px; } .cv-player { border-radius: 10px; margin-inline: calc(var(--gutter) * -1); border-radius: 0; } .player-play { width: 70px; height: 70px; } .player-play::after { left: 28px; top: 22px; border-width: 13px 0 13px 21px; } .watch-bar { flex-direction: column; align-items: center; } .watch-actions { justify-content: center; } .episode-nav { justify-content: center; } .qv-info, .qv-content { padding-inline: 18px; } .footer-grid { grid-template-columns: minmax(0, 1fr); } .cv-player.is-floating { right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); width: 62vw; } .tabbar { position: fixed; inset: auto 0 0 0; z-index: 70; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); } .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; color: var(--faint); font-size: .68rem; font-weight: 650; } .tabbar a.is-active { color: var(--ink); } .tabbar .icon { width: 22px; height: 22px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* Season markers */ .ep-marker { display: inline-block; width: fit-content; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: var(--ink); font: 700 .78rem/1.5 var(--font-text); } .episode-list .ep-label .ep-marker { margin-left: 4px; padding: 0 6px; font-size: .62rem; } .episode-list .ep-season { position: sticky; top: -6px; z-index: 1; padding: 10px 8px 6px; background: var(--surface); color: var(--muted); font: 700 .85rem/1.2 var(--font-display); } /* Release calendar */ .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } .cal-day { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); } .cal-day.is-today { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow-sm); } .cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 0 0 12px; font: 700 1rem/1.2 var(--font-display); } .cal-head small { color: var(--faint); font: 600 .75rem/1 var(--font-text); } .is-today .cal-head { color: var(--accent); } .cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cal-item a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; border-radius: var(--radius-sm); transition: background-color .2s; } .cal-item a:hover { background: var(--surface-2); } .cal-poster { display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 6px; background: var(--surface-2); } .cal-poster img { width: 100%; height: 100%; object-fit: cover; } .cal-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cal-title { font-weight: 650; font-size: .86rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cal-ep { color: var(--muted); font-size: .76rem; } .cal-item.is-out .cal-ep { color: var(--accent); font-weight: 700; } .cal-empty { margin: 0; color: var(--faint); font-size: .85rem; } .cal-note { margin-top: 18px; color: var(--faint); font-size: .82rem; } @media (max-width: 1180px) { .cal { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 720px) { .cal { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; } .cal-day { scroll-snap-align: start; } } /* ---------- Spotlight, genre tiles, coming this week ---------- */ .spotlight { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(20px, 3vw, 48px); align-items: end; min-height: 460px; margin: 0 0 clamp(26px, 3.4vw, 42px); padding: clamp(22px, 3.4vw, 48px); border-radius: var(--radius); overflow: hidden; color: #fff; background: #000; } .spotlight-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; } .spotlight-media::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgb(0 0 0 / .88) 0%, rgb(0 0 0 / .55) 45%, rgb(0 0 0 / .25) 100%), linear-gradient(0deg, rgb(0 0 0 / .7), transparent 50%); } .spotlight-bg { width: 100%; height: 100%; object-fit: cover; } .spotlight-info { max-width: 560px; } .spotlight .hero-meta { color: rgb(255 255 255 / .82); } .spotlight-rank { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 .9rem/1.2 var(--font-text); color: var(--rank); } .spotlight-rank span { display: grid; place-items: center; min-width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: #fff; font: 800 1.1rem/1 var(--font-display); letter-spacing: 0; } .spotlight-title { margin: 0 0 10px; font: 800 clamp(1.8rem, 3.6vw, 3rem)/1.05 var(--font-display); } .spotlight-title a { color: inherit; } .spotlight-excerpt { margin: 0 0 18px; color: rgb(255 255 255 / .78); } .spotlight-episodes { display: flex; flex-direction: column; max-height: 420px; padding: 14px; border: 1px solid rgb(255 255 255 / .1); border-radius: var(--radius-sm); background: rgb(10 12 18 / .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .spotlight-episodes .see-all { margin-top: 10px; align-self: flex-end; color: rgb(255 255 255 / .8); } .spotlight-head { margin: 0 0 8px; font-weight: 700; } .spotlight-tabs { flex: none; display: flex; gap: 4px; margin: 0 0 8px; overflow-x: auto; scrollbar-width: none; } .spotlight-tabs button { flex: none; padding: 7px 12px; border: 0; border-radius: 8px; background: transparent; color: rgb(255 255 255 / .7); font: 600 .85rem/1 var(--font-text); cursor: pointer; } .spotlight-tabs button[aria-selected="true"] { background: rgb(255 255 255 / .14); color: #fff; } .spotlight-list { min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; scrollbar-width: thin; } .spotlight-list a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px; border-radius: 8px; color: #fff; } .spotlight-list a:hover { background: rgb(255 255 255 / .08); } .spotlight-thumb { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: rgb(255 255 255 / .08); } .spotlight-thumb img { width: 100%; height: 100%; object-fit: cover; } .spotlight-ep { display: grid; gap: 3px; font-size: .9rem; } .spotlight-ep small { color: rgb(255 255 255 / .6); } .row--genres { grid-auto-columns: clamp(230px, 19vw, 300px); } /* Genre tile: four titles of the category (posters side by side, or a 2 × 2 of pictures), name and count below. */ .genre-tile { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 10px 10px 14px; border-radius: var(--radius); background: var(--surface); color: var(--ink); transition: background-color .2s; } .genre-tile:hover { background: var(--surface-2); color: var(--ink); } .genre-pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } .genre-tile--card .genre-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .genre-pic { overflow: hidden; aspect-ratio: 2 / 3; border-radius: 6px; background: var(--surface-2); } .genre-tile--card .genre-pic { aspect-ratio: 16 / 9; } .genre-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .genre-tile:hover .genre-pic img { transform: scale(1.05); } .genre-name { font: 700 1.05rem/1.2 var(--font-display); text-align: center; } .up-card .card-media { position: relative; } .up-when { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 6px; background: rgb(0 0 0 / .72); color: #fff; font: 700 .78rem/1.4 var(--font-text); } .up-card.is-out .up-when { background: var(--accent); } .up-ep { margin: 2px 0 0; color: var(--muted); font-size: .82rem; } .up-card.is-out .up-ep { color: var(--accent); font-weight: 700; } @media (max-width: 960px) { .spotlight { grid-template-columns: none; align-items: stretch; min-height: 0; padding-top: 180px; } .spotlight-episodes { max-height: 340px; } } @media (max-width: 720px) { .row--genres { grid-auto-columns: 78%; } } /* ---------- Cast ---------- */ .person { display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; color: var(--ink); scroll-snap-align: start; } .person-photo { display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin-bottom: 8px; border-radius: 50%; overflow: hidden; background: var(--surface-2, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); } .person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .35s var(--ease); } .person:hover .person-photo img { transform: scale(1.06); } .person-initials { color: var(--muted); font: 700 clamp(1.2rem, 2.4vw, 1.8rem)/1 var(--font-display); } .person-name { font-weight: 600; font-size: .92rem; line-height: 1.25; } .person-sub { color: var(--muted); font-size: .78rem; } .row--cast { grid-auto-columns: clamp(96px, 8.5vw, 132px); } .cast-row { display: flex; gap: 16px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: thin; scroll-snap-type: x mandatory; } .cast-row .person { flex: 0 0 104px; } .cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 26px 18px; } .cast-search { position: relative; max-width: 420px; margin-top: 18px; } .cast-search .icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--muted); } .cast-search input { width: 100%; padding: 12px 14px 12px 42px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; } .person-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; } .person-head .person-photo { aspect-ratio: 2 / 3; margin: 0; border-radius: var(--radius); box-shadow: var(--shadow-sm); } .person-info .hero-meta { color: var(--muted); } .person-bio { max-width: 760px; color: var(--ink-2, var(--ink)); line-height: 1.7; } [data-bio].is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: 600 .9rem/1.6 var(--font-text); cursor: pointer; } @media (max-width: 720px) { .person-head { grid-template-columns: 120px minmax(0, 1fr); } .row--cast { grid-auto-columns: 26%; } .cast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; } } /* ---------- Header / footer options ---------- */ .cv-header-static .site-header { position: absolute; } .header-banner { position: relative; z-index: 3; margin-top: calc(var(--header-h) + 12px); } .has-hero .header-banner { margin-top: 0; position: absolute; inset: calc(var(--header-h) + 8px) 0 auto; } .header-banner img { display: block; width: 100%; max-height: 120px; object-fit: cover; border-radius: var(--radius-sm); } body:not(.has-hero) .header-banner ~ .site-main { padding-top: 0; } /* the banner already sits below the header */ .social-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; } .social-links .icon-btn { background: var(--glass); } .social-links .icon-btn:hover { background: var(--accent); color: #fff; } /* ---------- Blog post: share, author ---------- */ .share-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 24px 0; } .share-links > span { margin-right: 6px; color: var(--muted); font-weight: 600; font-size: .9rem; } .share-links .icon-btn { background: var(--glass); } .share-links .icon-btn:hover { background: var(--accent); color: #fff; } .author-box { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; margin: 28px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .page-hero .author-box { margin: 0; border: 0; background: none; padding: 0; grid-template-columns: 96px minmax(0, 1fr); } .author-avatar { width: 100%; height: auto; border-radius: 50%; } .author-name { margin: 0 0 4px; font: 700 1.1rem/1.2 var(--font-display); } .page-hero .author-name { font-size: clamp(1.6rem, 3vw, 2.4rem); } .author-name a { color: inherit; } .author-bio { margin: 0; color: var(--muted); } .author-count { margin: 4px 0 0; color: var(--muted); font-size: .85rem; } .has-hero .header-banner img { max-height: 90px; } /* ---------- Header layouts (CineVerse → Settings → Header) ---------- */ body:not(.cv-header-classic) .site-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); height: auto; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--line); color: var(--ink); } body.cv-header-static:not(.cv-header-classic) .site-header { position: relative; top: 0; } body:not(.cv-header-classic) .site-main { padding-top: 0; } body:not(.cv-header-classic) .menu-toggle { display: grid; } body:not(.cv-header-classic) .header-banner { position: relative; inset: auto; margin-top: 12px; } .header-row { height: 64px; } .header-row--nav { height: 54px; border-top: 1px solid var(--line); } .header-row--nav .main-nav { flex: 1; } .header-search.is-bar { flex: 0 1 340px; } .header-search.is-bar input { width: 100%; padding: 0 44px 0 16px; border-color: var(--line-strong); background: var(--surface); opacity: 1; } .header-search.is-bar .search-toggle { position: absolute; right: 0; } .site-header--stacked .header-row:first-child .header-search.is-bar { flex: 1 1 auto; max-width: 640px; margin-inline: auto; } .site-header--stacked .menu-toggle--sm { display: none !important; } .header-top { height: 40px; background: color-mix(in srgb, var(--ink) 7%, transparent); font-size: .82rem; } .header-top .header-inner { gap: 4px; } .header-top .header-tools { margin-left: 0; } .header-top .icon-btn { width: 34px; height: 34px; } .header-tagline { margin-left: auto; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-row--brand { height: auto; padding-block: 14px; justify-content: space-between; } .header-ad { display: block; flex: 0 1 728px; } .header-ad img { display: block; width: 100%; max-height: 90px; object-fit: cover; border-radius: 6px; } .cv-menu-numbers .main-nav ul { counter-reset: nav; } .cv-menu-numbers .main-nav li { counter-increment: nav; } .cv-menu-numbers .main-nav a::before { content: counter(nav, decimal-leading-zero); display: block; margin-bottom: 1px; font-size: .62rem; font-weight: 600; line-height: 1; opacity: .55; } .cv-menu-numbers .main-nav .current-menu-item > a::before { color: var(--accent); opacity: 1; } /* Narrower desktops: tighter menu and search, and a fade on the side that has more items to scroll to. */ @media (max-width: 1600px) { .main-nav a { padding-inline: 10px; font-size: .9rem; } .header-search.is-bar { flex-basis: 240px; min-width: 180px; } } .main-nav ul.is-scroll-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); } .main-nav ul.is-scroll-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); } .main-nav ul.is-scroll-start.is-scroll-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); } @media (max-width: 960px) { .header-row--nav .main-nav { display: none; } .header-row--nav .header-search.is-bar { flex: 1 1 auto; } .site-header--split .header-row--nav:not(:has(.header-search)), .site-header--banner .header-row--nav:not(:has(.header-search)) { display: none; } .site-header--stacked .header-row--nav { display: none; } .site-header--stacked .menu-toggle--sm { display: grid !important; } .site-header--stacked .header-row:first-child { flex-wrap: wrap; height: auto; padding-block: 10px; row-gap: 8px; } .site-header--stacked .header-row:first-child .header-search.is-bar { order: 3; flex: 1 0 100%; max-width: none; } .header-ad img { max-height: 60px; } .header-tagline { display: none; } } /* ---------- Episodes: grid / horizontal row (CineVerse → Settings → Series / Videos) ---------- */ .ep-list--grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 18px; } .ep-list--row { grid-auto-flow: column; grid-auto-columns: clamp(220px, calc((100% - (var(--cols, 4) - 1) * 16px) / var(--cols, 4)), 340px); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; } .ep-list--row > li { scroll-snap-align: start; } .ep-list--grid .ep-row a, .ep-list--row .ep-row a { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 0 6px; border-radius: var(--radius-sm); } .ep-list--grid .ep-row a:hover, .ep-list--row .ep-row a:hover { background: none; } .ep-list--grid .ep-num, .ep-list--row .ep-num { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 3px 9px; border-radius: 6px; background: rgb(0 0 0 / .72); color: #fff; font: 700 .85rem/1.3 var(--font-text); } .ep-list--grid .ep-title, .ep-list--row .ep-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .95rem; } .ep-list--grid .ep-thumb, .ep-list--row .ep-thumb { transition: transform .3s var(--ease); } .ep-list--grid .ep-row a:hover .ep-thumb, .ep-list--row .ep-row a:hover .ep-thumb { transform: translateY(-3px); } .ep-row.is-current .ep-thumb { box-shadow: 0 0 0 3px var(--accent); } .ep-list [data-more-hidden] { display: none !important; } .ep-more { display: flex; justify-content: center; margin-top: 16px; } .track-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 20px 16px; margin: 0; padding: 0; list-style: none; } .track-grid a { display: grid; gap: 6px; color: var(--ink); } .track-cover { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2, var(--surface)); } .track-cover img { width: 100%; height: 100%; object-fit: cover; } .track-grid .track-num { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 6px; background: rgb(0 0 0 / .72); color: #fff; font: 700 .8rem/1.4 var(--font-text); } .track-grid a:hover .card-play { opacity: 1; } .track-grid .track-title { font-weight: 600; font-size: .92rem; line-height: 1.3; } .track-grid .track-dur { color: var(--muted); font-size: .8rem; } .title-info .cast-section--compact { margin: 6px 0 18px; } .cast-section--compact .cast-row { gap: 10px; padding: 0; } .cast-section--compact .person { flex: 0 0 64px; } .cast-section--compact .person-photo { margin-bottom: 4px; } .cast-section--compact .person-name { font-size: .72rem; font-weight: 500; } .cast-section--compact .person-sub { display: none; } @media (max-width: 960px) { .ep-list--grid { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); } .track-grid { grid-template-columns: repeat(min(var(--cols, 5), 3), minmax(0, 1fr)); } } @media (max-width: 600px) { .ep-list--grid, .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } .ep-list--row { grid-auto-columns: 70%; } } /* ---------- Hero options (CineVerse → Settings → Slider) ---------- */ .hero--large { height: clamp(500px, 75vh, 780px); } .hero--medium { height: clamp(440px, 60vh, 640px); } .hero--small { height: clamp(380px, 45vh, 520px); } .hero--medium .hero-content, .hero--small .hero-content { bottom: 64px; } .hero--medium .hero-thumbs, .hero--small .hero-thumbs { bottom: 64px; } .hero--medium + .rows, .hero--small + .rows { margin-top: 0; padding-top: 28px; } .hero--small .hero-title { font-size: clamp(1.9rem, 3.4vw, 3rem); } .hero-media::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgb(0 0 0 / var(--hero-shade, 0)); pointer-events: none; } .hero--align-center .hero-content { text-align: center; } .hero--align-center .hero-content > * { margin-inline: auto; } .hero--align-center .hero-kicker, .hero--align-center .hero-meta, .hero--align-center .hero-actions { justify-content: center; } .hero--align-center .hero-content > * { max-width: min(760px, 62%); } /* ---------- Phones: the hero like the series page – picture uncropped (16:9), poster over its lower edge, title beside it ---------- */ @media (max-width: 720px) { .hero, .hero--large, .hero--medium, .hero--small { display: grid; height: auto; } .hero-slide { position: relative; inset: auto; grid-area: 1 / 1; } .hero-media { position: relative; inset: auto; aspect-ratio: 16 / 9; } .hero-media::after { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 22%, transparent 50%); } .hero-slide.is-active .hero-bg { animation: none; } .hero-bg { object-position: center; } .hero .hero-content { position: relative; inset: auto; z-index: 2; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 16px; align-items: end; margin-top: -52px; color: var(--ink); text-align: left; } .hero .hero-content > * { grid-column: 1 / -1; max-width: none; margin-inline: 0; } .hero .hero-content > .hero-poster { display: block; grid-column: 1; grid-row: 1 / span 2; align-self: end; } .hero-poster img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-sm); box-shadow: 0 16px 36px rgb(3 7 16 / .55), 0 0 0 1px rgb(255 255 255 / .08); } .hero .hero-content > .hero-kicker { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 6px; } .hero .hero-content > .hero-title { grid-column: 2; grid-row: 2; align-self: end; margin: 0; font-size: clamp(1.35rem, 5.6vw, 1.75rem); -webkit-line-clamp: 3; } .hero .hero-kicker, .hero .hero-meta, .hero .hero-actions { justify-content: flex-start; } .hero .hero-meta { margin: 16px 0 14px; color: var(--muted); } .hero-title a:hover { color: inherit; } .hero-excerpt { display: none; } .hero-actions { flex-wrap: wrap; } .hero-actions .btn-light { flex: 1 0 100%; justify-content: center; background: var(--accent); color: var(--on-accent); } .hero-actions .btn-glass { flex: 1 1 0; justify-content: center; background: var(--surface-2); color: var(--ink); border-color: transparent; } .hero-thumbs, .hero--medium .hero-thumbs, .hero--small .hero-thumbs { display: flex; position: relative; inset: auto; grid-area: 2 / 1; justify-content: center; gap: 8px; padding-top: 18px; } .hero-thumb { width: 8px; height: 8px; aspect-ratio: auto; border: 0; border-radius: 4px; background: var(--line-strong); opacity: 1; transition: width .3s var(--ease), background-color .3s; } .hero-thumb.is-active { width: 24px; background: var(--ink); border: 0; transform: none; } .hero-thumb img, .hero-thumb .thumb-progress { display: none; } .hero + .rows, .hero--medium + .rows, .hero--small + .rows { margin-top: 0; padding-top: 28px; } .cv-blocks > .hero + .cv-block-row { margin-top: 0; padding-top: 28px; } /* home page built with blocks */ } /* ---------- Phones: series page – the backdrop uncropped (16:9), the poster over its lower edge, the title beside it ---------- */ @media (max-width: 720px) { .title-hero { display: block; min-height: 0; color: var(--ink); } .title-hero-media { position: relative; inset: auto; aspect-ratio: 16 / 9; } .title-hero-media::after { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 22%, transparent 50%); } .title-hero-bg { object-position: center; animation: none; } .title-hero-inner { grid-template-columns: 112px minmax(0, 1fr); gap: 0 16px; align-items: end; margin-top: -52px; padding-top: 0; padding-bottom: 28px; } .title-poster { width: auto; grid-row: 1 / span 2; align-self: end; } .title-poster img { box-shadow: 0 16px 36px rgb(3 7 16 / .55), 0 0 0 1px rgb(255 255 255 / .08); } .title-info { display: contents; } .title-info > * { grid-column: 1 / -1; order: 3; } .title-info > .hero-meta { order: 1; } .title-info > .hero-actions { order: 2; margin: 0 0 22px; } .title-info > .hero-kicker { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 6px; } .title-info > .title-name { grid-column: 2; grid-row: 2; align-self: end; margin: 0; font-size: clamp(1.45rem, 6vw, 1.85rem); } .title-info > .hero-meta { margin-top: 18px; } .title-info .hero-meta, .title-hero .rating-count { color: var(--muted); } .title-hero .btn-glass { background: var(--surface-2); color: var(--ink); border-color: transparent; } .title-desc { color: var(--ink-2); } .title-info .hero-actions { flex-wrap: wrap; } .title-info .hero-actions .btn-light { flex: 1 0 100%; justify-content: center; background: var(--accent); color: var(--on-accent); } .title-info .hero-actions .btn-glass { flex: 1 1 auto; justify-content: center; } .title-cast { color: var(--ink-2); } .title-cast span { color: var(--muted); } .title-cast a:hover { color: var(--ink); } } /* Phones: the episode list under the player stays short; it scrolls inside. */ @media (max-width: 720px) { .episode-list { max-height: 360px; } } /* Older TV and set-top browsers (before Chrome 88) have no aspect-ratio: keep the ratio with a spacer instead, otherwise the player and the cards collapse to height 0. */ @supports not (aspect-ratio: 1) { .cv-player::before, .card-media::before, .ep-thumb::before, .up-next-media::before, .spotlight-thumb::before { content: ""; display: block; padding-top: 56.25%; } .card--poster .card-media::before { padding-top: 150%; } .card--square .card-media::before { padding-top: 100%; } }