/* Theme Name: Wuxia Theme URI: https://wuxia-kh.github.io/wuxia-press-published-/ Description: A Netflix-style streaming front end for Chinese and Hong Kong series and films: billboard, poster rows, title pages, an HLS player and Shorts. Khmer or English (Drama Manager → Settings). Pair it with the Wuxia Core plugin. Version: 1.1.0 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 8.1 Author: Chamrong Text Domain: wuxia Domain Path: /languages License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ /* Tokens live in tokens.css, loaded before this file. */ @font-face { font-family: "Kantumruy Pro"; src: url("assets/fonts/KantumruyPro-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; } /* ---- base ---- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; padding-bottom: calc(var(--nav-h) + var(--safe-b)); } @media (min-width: 900px) { body { padding-bottom: 0; } } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, p { margin: 0; } ul, ol { list-style: none; margin: 0; padding: 0; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; } [hidden] { display: none !important; } ::selection { background: var(--red); color: #fff; } input { caret-color: var(--red); } :focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: var(--radius-s); } ::-webkit-scrollbar { display: none; } * { scrollbar-width: none; } .icon { display: block; flex: none; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; color: #000; font-weight: 700; border-radius: var(--radius-s); } .skip:focus { top: calc(var(--safe-t) + 12px); } main { padding-top: calc(var(--safe-t) + var(--hdr-h)); min-height: 60vh; } @media (max-width: 899px) { .has-pills { --hdr-h: calc(var(--bar-h) + var(--pills-h)); } } @media (min-width: 600px) { .home main { padding-top: 0; } } /* ---- header (AppHeader on laptops, top bar with pills below) ---- */ .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding-top: var(--safe-t); background: #000; view-transition-name: hdr; } /* Phones: the scroll position drives the fade directly (theme.js), so no transition to lag behind it. */ .home .hdr { background: rgba(0, 0, 0, calc(var(--a, 0) * 0.94)); } .hdr-bar { height: var(--bar-h); padding: 0 var(--page-x); display: flex; align-items: center; gap: 40px; } .brand { display: flex; align-items: center; gap: 8px; } .brand .mark { height: 22px; width: auto; } /* DramaSabay's wordmark is wide: the same height, about six times the width of the W. */ .logo { display: block; height: 22px; width: auto; } .word { color: var(--red); font-weight: 700; font-size: 20px; letter-spacing: 0.12em; line-height: 1; } .links, .hdr .search { display: none; } .pills { height: var(--pills-h); padding: 0 var(--page-x) 10px; display: flex; align-items: center; gap: 8px; } /* A long genre name shrinks its pill (ellipsis) instead of pushing the row off screen. */ .pills .genre-menu { min-width: 0; } @media (min-width: 900px) { .pills { display: none; } .brand .mark { height: 26px; } .logo { height: 26px; } .word { font-size: 22px; } /* A gradient cannot interpolate to black, so a black layer fades in over it instead. */ .home .hdr { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent); } .home .hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #000; opacity: 0; transition: opacity var(--t-transition) var(--ease-standard); } .home .hdr.solid::before { opacity: 1; } .links { display: flex; align-items: center; gap: 22px; } .links > ul { display: flex; gap: 22px; } .links a, .links summary { color: var(--text-2); font-size: 14px; font-weight: 500; transition: color var(--t-state); } .links a:hover, .links summary:hover { color: #fff; } .links .on, .links .current-menu-item > a { color: #fff; font-weight: 700; } /* Netflix search: the box opens leftward out of the magnifier and the icon slides to its left edge. The box keeps its full width in layout; a clip-path reveals it, so nothing reflows. Opening decelerates over 320 ms; closing is quicker and plainer. */ .hdr .search { position: relative; isolation: isolate; display: flex; align-items: center; margin-left: auto; width: 278px; height: 38px; clip-path: inset(0 0 0 calc(100% - 38px) round var(--radius-s)); transition: clip-path var(--t-state) var(--ease-standard); } .hdr .search::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: var(--radius-s); background: rgba(0, 0, 0, 0.75); opacity: 0; transition: opacity var(--t-feedback) var(--ease-standard); } .sbtn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; color: #fff; cursor: pointer; transform: translateX(240px); transition: transform var(--t-state) var(--ease-standard); } .hdr .search input { width: 240px; padding: 0 10px 0 0; border: 0; background: none; color: #fff; font: inherit; font-size: 14px; outline: none; opacity: 0; transition: opacity var(--t-feedback) var(--ease-standard); } .hdr .search input::placeholder { color: var(--text-2); } .hdr .search:focus-within, .hdr .search.open, .hdr .search.filled { clip-path: inset(0 0 0 0 round var(--radius-s)); transition: clip-path var(--t-transition) var(--ease-out); } :is(.hdr .search:focus-within, .hdr .search.open, .hdr .search.filled)::before { opacity: 1; transition: opacity var(--t-state) var(--ease-out); } :is(.hdr .search:focus-within, .hdr .search.open, .hdr .search.filled) .sbtn { transform: none; transition: transform var(--t-transition) var(--ease-out); } :is(.hdr .search:focus-within, .hdr .search.open, .hdr .search.filled) input { opacity: 1; transition: opacity var(--t-state) var(--ease-out) 80ms; } } /* Genre menu, as Netflix: a three-column dropdown under the header link on laptops; from the phone pill, the full-screen Categories overlay with a centered list and a round close button. Genres are alphabetical (wuxia_menu_genres()). */ .genre-menu { position: relative; } .genre-menu summary { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; list-style: none; } .genre-menu summary::-webkit-details-marker { display: none; } .genre-panel { position: absolute; top: calc(100% + 18px); left: -16px; z-index: 5; min-width: 420px; padding: 12px 8px; background: rgba(0, 0, 0, 0.94); border: 1px solid rgba(255, 255, 255, 0.15); border-top: 2px solid #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); } /* Opens by unrolling from the white top edge (clip-path, not opacity: a faded-in panel stayed translucent in Chrome) and rolls back up faster on close. */ .genre-menu:not(.sheet)[open] .genre-panel { animation: drop-in 240ms var(--ease-out); } /* Once it has unrolled, drop the animation: Chrome otherwise keeps the panel on its own layer and blends it translucent over the posters. */ .genre-menu:not(.sheet).settled .genre-panel { animation: none; } .genre-menu:not(.sheet).closing .genre-panel { animation: drop-out 150ms var(--ease-standard) forwards; } .genre-menu:not(.sheet) .genre-panel::before { content: ""; position: absolute; top: -9px; left: 34px; border: 7px solid transparent; border-top: 0; border-bottom-color: #fff; } @keyframes drop-in { from { clip-path: inset(-12px -40px 100% -40px); transform: translateY(-6px); } to { clip-path: inset(-12px -40px -60px -40px); transform: none; } } @keyframes drop-out { from { clip-path: inset(-12px -40px -60px -40px); } to { clip-path: inset(-12px -40px 100% -40px); transform: translateY(-4px); } } .genre-menu summary .icon { transition: transform var(--t-state) var(--ease-standard); } .genre-menu[open]:not(.closing) summary .icon { transform: rotate(180deg); } .genre-panel ul { columns: 3; column-gap: 8px; } .genre-panel li { break-inside: avoid; } .genre-panel a { display: block; padding: 6px 16px; color: var(--text-2); font-size: 14px; font-weight: 400; white-space: nowrap; transition: color var(--t-feedback); } .genre-panel a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .genre-panel a.on { color: #fff; font-weight: 700; } .genre-close { display: none; } html:has(.genre-menu.sheet[open]) { overflow: hidden; } .genre-menu.sheet .genre-panel { position: fixed; inset: 0; z-index: 2; min-width: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 56px) 24px calc(var(--safe-b) + 128px); background: rgba(0, 0, 0, 0.94); border: 0; box-shadow: none; animation: fade var(--t-state) var(--ease-out); } .genre-menu.sheet .genre-panel ul { columns: 1; margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 4px; } /* Items arrive as a list: 24 ms apart, capped at ten steps so the last never waits long. */ .genre-menu.sheet .genre-panel li { animation: list-in var(--t-transition) var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 10) * 24ms); } .genre-menu.sheet.closing .genre-panel { animation: fade-out 160ms var(--ease-standard) forwards; } @keyframes fade-out { to { opacity: 0; } } @keyframes pop-in { from { opacity: 0; transform: scale(0.6); } } .genre-menu.sheet .genre-panel a { padding: 10px 24px; font-size: 18px; line-height: 1.5; text-align: center; color: var(--text-2); } .genre-menu.sheet .genre-panel a.on { color: #fff; font-size: 22px; font-weight: 700; } .genre-menu.sheet .genre-close { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 40px); width: 56px; height: 56px; margin-left: -28px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #000; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); transition: transform var(--t-feedback) var(--ease-standard); animation: pop-in var(--t-transition) var(--ease-out) 160ms both; } .genre-menu.sheet .genre-close:active { transform: scale(0.92); } @keyframes list-in { from { opacity: 0; transform: translateY(8px); } } @keyframes rise { from { transform: translateY(100%); } } @keyframes fade { from { opacity: 0; } } /* ---- bottom tabs (NavBar) ---- */ .tabs { view-transition-name: tabs; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: #000; display: grid; grid-template-columns: repeat(4, 1fr); } .tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 11px; color: var(--text-3); font-size: 11px; line-height: 1.3; font-weight: 500; } .tab .icon, .tab-label { position: relative; z-index: 1; } .tab.selected { color: #fff; font-weight: 700; } .tab-pill { position: absolute; top: 8px; left: 50%; z-index: 0; width: 56px; height: 30px; margin-left: -28px; border-radius: var(--radius-pill); background: var(--control); view-transition-name: tab-pill; } @media (min-width: 900px) { .tabs { display: none; } } /* ---- billboard ---- */ .billboard { position: relative; margin: 8px var(--gutter) 0; aspect-ratio: 4 / 5; border-radius: var(--radius-m); overflow: hidden; background: var(--surface); } .billboard .art { position: absolute; inset: 0; } .billboard .art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .billboard .scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 0.7) 78%, rgba(0, 0, 0, 0.96)); } .billboard .copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .billboard .title { font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; } .billboard .meta { font-size: 12px; font-weight: 500; color: var(--text-2); } .billboard .synopsis { display: none; } .billboard .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 8px; } @media (min-width: 600px) { .billboard { margin: 0; border-radius: 0; aspect-ratio: auto; width: 100%; height: min(56.25vw, 82vh); } .billboard .scrim { background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 45%, transparent 70%), linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 18%, transparent 45%); } .billboard .copy { left: var(--page-x); right: auto; bottom: 12%; width: min(46%, 640px); padding: 0; align-items: flex-start; gap: 10px; text-align: left; } .billboard .title { font-size: clamp(32px, 4.2vw, 64px); line-height: 1.1; letter-spacing: -0.02em; } .billboard .meta { font-size: 14px; } .billboard .synopsis { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 560px; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.5; color: rgba(255, 255, 255, 0.92); } .billboard .actions { display: flex; width: auto; gap: 10px; margin-top: 6px; } } @media (min-width: 900px) { .billboard + .shelves { margin-top: -6vw; position: relative; z-index: 2; } } /* ---- rows (PosterShelf, TopTenShelf, RowSlider) ---- */ .shelves { padding-bottom: 24px; } .shelf { margin-top: 16px; } .slider { position: relative; } .row-scroll { display: flex; gap: 6px; overflow-x: auto; padding: 0 var(--page-x); scroll-snap-type: x proximity; scroll-padding-left: var(--page-x); overscroll-behavior-x: contain; scroll-behavior: smooth; } .row-scroll > li { flex: 0 0 auto; width: var(--poster-w); scroll-snap-align: start; } .arrow { display: none; } .top10 { padding-left: 12px; gap: 4px; } .top10 > li.cell { width: auto; display: flex; align-items: flex-end; } .top10 .c-poster-card { width: 116px; position: relative; z-index: 1; } .num { width: 48px; flex: none; font-size: 112px; line-height: 0.8; font-weight: 700; letter-spacing: -0.08em; text-align: right; color: transparent; -webkit-text-stroke: 3px rgba(255, 255, 255, 0.95); paint-order: stroke fill; transform: translate(10px, 6px); pointer-events: none; font-variant-numeric: lining-nums; } @media (min-width: 900px) { .row-scroll { gap: 8px; padding-top: 16px; padding-bottom: 16px; scroll-snap-type: none; } .row-scroll > li { width: calc((100% - (var(--cols) - 1) * 8px) / var(--cols)); } .top10 { padding-left: var(--page-x); } .top10 > li.cell { width: calc((100% - (var(--cols) - 1) * 8px) / var(--cols)); } .num { width: 22%; font-size: 9vw; transform: translate(8%, 4%); } .top10 .c-poster-card { width: 78%; } } @media (hover: hover) and (min-width: 900px) { .arrow { position: absolute; top: 16px; bottom: 16px; z-index: 3; width: calc(var(--page-x) - 4px); display: grid; place-items: center; color: #fff; background: rgba(20, 20, 20, 0.5); opacity: 0; transition: opacity var(--t-state), background var(--t-state); } .arrow.left { left: 0; border-radius: 0 var(--radius-s) var(--radius-s) 0; } .arrow.right { right: 0; border-radius: var(--radius-s) 0 0 var(--radius-s); } .slider:hover .arrow, .arrow:focus-visible { opacity: 1; } .slider .arrow.off { opacity: 0; pointer-events: none; } .arrow:hover { background: rgba(20, 20, 20, 0.8); } .arrow .icon { transition: transform var(--t-state) var(--ease-out); } .arrow:hover .icon { transform: scale(1.2); } } img.arriving { opacity: 0; } img.arrived { transition: opacity var(--t-state) var(--ease-out); } /* ---- grids and list pages (PosterGrid) ---- */ .page { padding-top: 12px; padding-bottom: 32px; } .page-title { padding: 4px var(--page-x) 4px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } .grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 6px; padding: 12px; } @media (min-width: 900px) { .page { padding-top: 32px; } .page-title { font-size: 32px; letter-spacing: -0.02em; } .grid { gap: 8px; padding: 16px var(--page-x); } } @media (hover: hover) and (pointer: fine) { .grid { gap: 16px 8px; } } .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 24px var(--page-x) 8px; } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--radius-s); background: var(--control); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; transition: background var(--t-state); } .pagination a.page-numbers:hover { background: var(--control-high); } .pagination .current { background: #fff; color: #000; } .pagination .dots { background: none; color: var(--text-3); } .pagination .prev, .pagination .next { display: inline-flex; } .prose:has(> .c-empty-state) { max-width: none; } .c-empty-state.lost { padding-bottom: 24px; } .suggest { padding-bottom: 32px; } .search-page { display: flex; align-items: center; gap: 10px; margin: 8px var(--page-x) 4px; padding: 0 14px; height: 44px; max-width: 720px; background: var(--control); border-radius: var(--radius-s); color: var(--text-2); } .search-page:focus-within { box-shadow: 0 0 0 2px #fff; } .search-page input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; color: #fff; font: inherit; font-size: 16px; } .search-page input::placeholder { color: var(--text-3); } /* Laptops search from the header field, as wuxia-web does. */ @media (min-width: 900px) { .search-page { display: none; } } .prose { max-width: 72ch; padding-left: var(--page-x); padding-right: var(--page-x); } .prose .page-title { padding: 0 0 16px; } .prose p { margin-bottom: 1em; color: var(--text-2); font-size: 16px; line-height: 1.6; } .prose a:not(.c-button) { text-decoration: underline; text-underline-offset: 3px; } /* ---- live search ---- */ .search-overlay { position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--safe-t) + var(--hdr-h)); z-index: 29; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); animation: fade var(--t-state) var(--ease-out); } html:has(.search-overlay:not([hidden])) { overflow: hidden; } /* Over the results the header is solid, even on the home page's hero. */ html:has(.search-overlay:not([hidden])) .hdr { background: #000; } [data-search-results] .grid { transition: opacity var(--t-state) var(--ease-standard); } [data-search-results].is-loading .grid { opacity: 0.45; } .c-button.search-all { display: flex; width: max-content; margin: 16px auto 0; } /* ---- New & Hot (NewHotView) ---- */ .newhot { padding-top: 8px; padding-bottom: 32px; } .newhot .page-title { padding: 12px var(--gutter); } .nh-item { display: flex; gap: 8px; padding: 0 var(--gutter) 28px; } .nh-date { flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; } .nh-small { font-size: 11px; line-height: 1.3; font-weight: 500; color: var(--text-2); } .nh-count { font-size: 24px; line-height: 1.2; font-weight: 700; } .nh-body { flex: 1; min-width: 0; } .nh-art { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: var(--surface); transition: transform var(--t-feedback) var(--ease-standard); } /* No art: the title stands in its place (the poster-card component does the same). */ .nh-art .no-art { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--control); } .nh-art:active { transform: scale(0.98); } .nh-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .nh-head { display: flex; align-items: flex-start; padding-top: 10px; } .nh-titles { flex: 1; min-width: 0; } .nh-titles h2 { font-size: 20px; line-height: 1.3; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nh-titles p { font-size: 12px; font-weight: 500; color: var(--text-2); } .nh-syn { padding-top: 8px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 600px) { .newhot { max-width: 760px; margin: 0 auto; } } @media (min-width: 900px) { .newhot { padding-top: 32px; } .newhot .page-title, .nh-item { padding-left: 0; padding-right: 0; } } @media (hover: hover) and (pointer: fine) { .nh-titles h2 a:hover { text-decoration: underline; text-underline-offset: 4px; } .nh-art img { transition: transform var(--t-transition) var(--ease-out); } .nh-art:hover img { transform: scale(1.03); } } /* ---- title page (TitleView) ---- */ .title-view { position: relative; padding-bottom: 32px; } .title-view .back { position: fixed; top: calc(var(--safe-t) + 12px); left: 12px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; } .ico-close { display: none; } .hero { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--surface); overflow: hidden; } .hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 40%, rgba(0, 0, 0, 0.6)); } .disc { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: #000; transition: transform var(--t-state) var(--ease-out); } .disc .icon { margin-left: 4px; } a.hero:hover .disc { transform: scale(1.08); } .title-view .body { padding: 16px var(--gutter) 0; display: flex; flex-direction: column; } .headline { font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } .en { margin-top: 2px; color: var(--text-2); } /* Facts in one row divided by hairlines (kisskh): country | year | status | kind. */ .facts-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; margin-top: 12px; font-size: 13px; line-height: 1.4; font-weight: 600; } .facts-row li { display: inline-flex; align-items: center; } .facts-row li + li::before { content: ""; width: 1px; height: 12px; margin: 0 12px; background: var(--hairline); } .facts-row a:hover { text-decoration: underline; text-underline-offset: 3px; } .facts-row .ongoing { color: var(--red-text); } .title-view .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--text-2); } .rating { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; } .rating .icon { color: var(--gold); } .hd { border: 1px solid var(--text-3); border-radius: var(--radius-xs); padding: 0 4px; font-size: 11px; line-height: 1.4; } /* Play leads; Start over and Share sit beside it as labelled icons. */ .cta-row { display: flex; align-items: center; gap: 4px; margin-top: 16px; } .title-view .play { flex: 1; } .cta-row .c-icon-action { width: 72px; } .synopsis { margin-top: 16px; color: rgba(255, 255, 255, 0.92); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .synopsis.expanded { display: block; -webkit-line-clamp: unset; } .more { align-self: flex-start; margin-top: 4px; min-height: 32px; font-size: 12px; font-weight: 600; color: var(--text-2); } .more:hover { color: #fff; } .genre-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ep-section, .rel-section { padding: 32px var(--gutter) 0; } .related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } @media (max-width: 599px) { .single-wuxia_drama .hdr, .single-wuxia_episode .hdr { display: none; } .single-wuxia_drama main, .single-wuxia_episode main { padding-top: 0; } } /* Tablets: the centered detail card. */ @media (min-width: 600px) { .title-view { max-width: 860px; margin: 24px auto 48px; padding-bottom: 40px; background: var(--card); border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7); } .title-view .back { position: absolute; top: 16px; right: 16px; left: auto; background: var(--card); border: 0; } .ico-back { display: none; } .ico-close { display: block; } .hero-scrim { background: linear-gradient(to bottom, transparent 55%, var(--card)); } .title-view .body { padding: 0 48px; margin-top: -72px; position: relative; } .title-view .headline { font-size: 34px; } .title-view .play { flex: none; padding: 0 28px; } .ep-section, .rel-section { padding-left: 48px; padding-right: 48px; } .related { grid-template-columns: repeat(4, 1fr); gap: 8px; } } /* Laptops: the poster keeps its own 2:3 on the left and stays in view while the details scroll. */ @media (min-width: 1000px) { .title-view { display: grid; grid-template-columns: clamp(260px, 24vw, 340px) minmax(0, 1fr); column-gap: 56px; align-items: start; max-width: 1240px; margin: 40px auto 72px; padding: 0 var(--page-x); background: none; border-radius: 0; overflow: visible; box-shadow: none; } .title-view .back { display: none; } .title-view .hero { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: calc(var(--bar-h) + 24px); aspect-ratio: 2 / 3; border-radius: var(--radius-m); box-shadow: 0 18px 54px rgba(0, 0, 0, 0.55); } .title-view .hero img { object-position: center; } .title-view .hero-scrim { background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 45%); } .title-view .body { grid-column: 2; margin: 0; padding: 8px 0 0; } .title-view .headline { font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; } .title-view .en { font-size: 16px; } .synopsis { max-width: 72ch; font-size: 16px; line-height: 1.6; -webkit-line-clamp: 4; } .ep-section, .rel-section { grid-column: 2; padding: 40px 0 0; } .related { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 900px) and (max-width: 999px) { .title-view { margin-top: 32px; } } /* ---- episodes (numbered buttons, ranges of 50) ---- */ .ranges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .js .ep-grid:not([data-open]) { display: none; } .ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; } .ep { position: relative; display: grid; place-items: center; height: 44px; border-radius: var(--radius-s); background: var(--control); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; transition: background var(--t-state) var(--ease-standard), color var(--t-state), transform var(--t-feedback) var(--ease-standard); } .ep:active { transform: scale(0.94); } .ep.watched { background: var(--surface); color: var(--text-3); } .ep-check { position: absolute; top: 3px; right: 3px; display: none; color: var(--text-2); } .ep.watched .ep-check { display: grid; } .ep .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.2); } .ep .bar > span { display: block; height: 100%; width: var(--p, 0%); background: var(--red); } .ep.active { box-shadow: inset 0 0 0 2px #fff; color: #fff; } .ep.now { background: var(--red); color: #fff; } .ep.now .bar { display: none; } @media (hover: hover) and (pointer: fine) { .ep:hover { background: var(--control-high); color: #fff; } .ep.now:hover { background: var(--red-deep); } } /* ---- watch page (PlayerView) ---- */ .watch-page { padding: clamp(12px, 3vw, 40px) var(--page-x) 64px; } .player-stage { position: relative; width: min(100%, 1180px); aspect-ratio: 16 / 9; margin: 0 auto; background: #000; border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 18px 54px rgba(0, 0, 0, 0.55); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .player-stage.is-idle { cursor: none; } .player-stage:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; } .player-stage .video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; } /* The overlay (PlayerView .chrome): top titles and tools, center transport, bottom scrubber and actions. */ .player-stage .chrome { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--t-state) var(--ease-standard); } .chrome-on .chrome, .player-stage:not(.is-playing) .chrome { opacity: 1; pointer-events: auto; } .player-stage.is-failed .chrome, .player-stage:has(.upnext:not([hidden])) .chrome { opacity: 0; pointer-events: none; } .player-stage .chrome-main { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--safe-t) + 12px) 16px 8px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent 30%, transparent 65%, rgba(0, 0, 0, 0.8)); } .is-locked .chrome-main { display: none; } .player-stage .chrome .unlock { display: none; } .is-locked .chrome .unlock { display: inline-flex; position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.55); } .player-stage .p-btn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; color: #fff; border-radius: 50%; transition: transform var(--t-feedback), background var(--t-state); } .player-stage .p-btn:active { transform: scale(0.92); } .player-stage .chrome .top { display: flex; align-items: center; gap: 8px; } .player-stage .titles { flex: 1; min-width: 0; } .player-stage .titles > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-title { font-size: 16px; line-height: 1.35; font-weight: 600; } .p-sub { font-size: 12px; font-weight: 500; color: var(--text-2); } .player-stage .center { display: flex; align-items: center; justify-content: center; gap: 48px; } .player-stage .big { width: 56px; height: 56px; } .player-stage .huge { width: 72px; height: 72px; } .player-stage .huge > span { display: none; } .player-stage:not(.is-playing):not(.is-ended) .when-paused, .player-stage.is-playing .when-playing, .player-stage.is-ended .when-ended { display: grid; } .is-buffering .huge { visibility: hidden; } .player-stage .bottom { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; } .player-stage .scrub-row { display: flex; align-items: center; gap: 12px; } .player-stage .scrub { position: relative; flex: 1; height: 32px; cursor: pointer; touch-action: none; } .player-stage .scrub:focus-visible { outline-offset: 0; } .player-stage .track { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; overflow: hidden; transition: transform var(--t-feedback) var(--ease-standard); } .player-stage .buf { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.45); } .player-stage .played { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); } .player-stage .knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--red); transition: transform var(--t-feedback) var(--ease-standard); } .is-scrubbing .knob { transform: scale(1.3); } .player-stage .time { min-width: 64px; text-align: right; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; } .player-stage .actions { display: flex; justify-content: space-evenly; align-items: center; } .when-muted, .when-fs { display: none; } .player-stage.is-muted .when-muted, .player-stage.is-fs .when-fs { display: grid; } .player-stage.is-muted .when-sound, .player-stage.is-fs .when-window { display: none; } .player-stage .vol { display: none; } @media (hover: hover) and (pointer: fine) { .player-stage .p-btn:hover { background: rgba(255, 255, 255, 0.12); } .player-stage .scrub:hover .track { transform: scaleY(1.67); } /* The slider floats left of the speaker so the row never holds an empty gap. */ .player-stage .vol { display: block; position: relative; } .player-stage .vol-range { position: absolute; right: 100%; top: 50%; width: 90px; margin: -8px 4px 0 0; accent-color: #fff; opacity: 0; transform: scaleX(0); transform-origin: right center; transition: opacity var(--t-state), transform var(--t-state) var(--ease-out); } .player-stage .vol:hover .vol-range, .player-stage .vol-range:focus-visible { opacity: 1; transform: none; } .player-stage .center { gap: 64px; } .player-stage .actions { justify-content: flex-start; gap: 12px; } } /* Subtitles, drawn by player.js from the hidden text track: the site's font, sized to the stage (container units), lifted above the controls when they show. */ .player-stage { container-type: inline-size; } .player-stage .captions { position: absolute; left: 6%; right: 6%; bottom: 7%; display: flex; flex-direction: column; align-items: center; gap: 0.1em; text-align: center; pointer-events: none; font-size: clamp(15px, 3.1cqw, 34px); line-height: 1.35; font-weight: 600; color: #fff; white-space: pre-line; text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.6); transition: transform var(--t-state) var(--ease-standard); --lift: 96px; } .player-stage.chrome-on .captions, .player-stage:not(.is-playing) .captions { transform: translateY(calc(-1 * var(--lift))); } .player-stage.is-locked .captions { transform: none; } .player-stage:fullscreen .captions { --lift: 128px; } /* Double-tap seek wash, spinner (only after 700 ms), resume toast. */ .player-stage .seek-fx { position: absolute; top: 0; bottom: 0; width: 35%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; pointer-events: none; animation: fade 120ms var(--ease-standard); } .player-stage .seek-fx.left { left: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0.18), transparent); } .player-stage .seek-fx.right { right: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0.18), transparent); } .player-stage .seek-fx.left .fx-fwd, .seek-fx.right .fx-back { display: none; } /* Loading: the spinner, and under it the live download speed while the stream buffers (kisskh shows the same), so a slow seek reads as progress rather than a hang. Both wait 700 ms, so quick seeks show nothing. */ .player-stage .loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; } .player-stage.is-buffering:not(.is-failed) .loading { display: flex; animation: fade 1ms linear 700ms both; } .player-stage .spinner { width: 52px; height: 52px; border: 3px solid transparent; border-top-color: var(--red); border-radius: 50%; animation: spin 900ms linear infinite; } .player-stage .net { padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.6); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; } .player-stage .net:empty { display: none; } @keyframes spin { to { transform: rotate(360deg); } } .player-stage .toast { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); padding: 8px 14px; background: rgba(43, 43, 43, 0.95); border-radius: var(--radius-s); font-size: 12px; font-weight: 500; white-space: nowrap; animation: fade var(--t-state) var(--ease-out); } /* Failure and Up Next. */ .player-stage .overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.85); } .player-stage .overlay[hidden] { display: none; } .overlay.failed { display: none; } .is-failed .overlay.failed { display: grid; } .overlay .back { position: absolute; top: calc(var(--safe-t) + 12px); left: 16px; } .player-stage .msg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; text-align: center; } .player-stage .msg h2 { font-size: 20px; line-height: 1.3; font-weight: 700; } .player-stage .msg p { color: var(--text-2); } .player-stage .row { display: flex; justify-content: center; gap: 8px; margin-top: 14px; width: 100%; } .player-stage .upnext { background: rgba(0, 0, 0, 0.55); place-items: end !important; padding: 24px; animation: fade var(--t-state) var(--ease-out); } .player-stage .upnext .card { width: min(300px, 100%); display: flex; flex-direction: column; gap: 4px; padding: 20px; background: var(--control); border-radius: var(--radius-m); animation: rise-card var(--t-transition) var(--ease-out); } .player-stage .upnext .row .c-button { flex: 1; } @keyframes rise-card { from { opacity: 0; transform: translateY(12px); } } /* Sheets (BottomSheet): a drawer on phones, a centered dialog from 600 px. */ .sheet-layer { position: fixed; inset: 0; z-index: 40; } .sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); animation: fade var(--t-state) var(--ease-standard); } .sheet-layer .sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow-y: auto; padding-bottom: calc(24px + var(--safe-b)); background: var(--control); border-radius: var(--radius-l) var(--radius-l) 0 0; animation: rise var(--t-transition) var(--ease-out); -webkit-user-select: text; user-select: text; } .sheet-layer .sheet:focus { outline: none; } .sheet-title { padding: 16px 24px 8px; font-size: 16px; font-weight: 700; } .sheet-note { padding: 8px 24px; font-size: 11px; color: var(--text-2); } .opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 24px; color: var(--text-2); text-align: left; font-size: 16px; } .opt.on { color: #fff; font-weight: 700; } .opt .tick { width: 24px; display: grid; place-items: center; visibility: hidden; } .opt.on .tick { visibility: visible; } .sheet-layer .sheet .episodes { padding: 4px 24px 8px; } .sheet-layer .sheet .ep { background: var(--control-high); } .sheet-layer .sheet .ep.watched { background: rgba(255, 255, 255, 0.04); } .sheet-layer .sheet .ep.now { background: var(--red); } @media (hover: hover) and (pointer: fine) { .opt:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } } @media (min-width: 600px) { .sheet-layer .sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: min(520px, 92vw); max-height: 86dvh; padding-bottom: 16px; transform: translate(-50%, -50%); border-radius: var(--radius-m); animation: dialog-in var(--t-transition) var(--ease-out); } @keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); } } } .watch-info { width: min(100%, 1180px); margin: 0 auto; padding: 24px 0 0; } .page-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-2); transition: color var(--t-state); } .page-back:hover { color: #fff; } .watch-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 18px; } .episode-badge { flex: none; padding: 7px 10px; font-size: 12px; font-weight: 500; background: var(--control); border-radius: var(--radius-s); } .watch-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .watch-description { max-width: 72ch; margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--text-2); } .episode-section { margin-top: 36px; } .section-heading { font-size: 20px; line-height: 1.3; font-weight: 700; } .episode-section .episodes { margin-top: 12px; } @media (max-width: 599px) { .watch-page { padding: 0 0 48px; } .player-stage { border-radius: 0; box-shadow: none; } .player-stage .chrome-main { padding: 6px 8px; } .player-stage .center { gap: 32px; } .player-stage .big { width: 44px; height: 44px; } .player-stage .huge { width: 56px; height: 56px; } .player-stage .big .icon { width: 32px; height: 32px; } .player-stage .huge .icon { width: 44px; height: 44px; } .player-stage .toast { bottom: 76px; } .player-stage .captions { --lift: 70px; bottom: 5%; } .watch-info { padding: 12px var(--page-x) 0; } .watch-heading { margin-top: 8px; } .watch-nav .c-button { flex: 1; } } /* ---- logo intro (wuxia-web's BrandIntro), whenever the site is opened ---- The strokes draw on in order (170 ms apart, 360 ms each) while the mark settles from 0.94; a red glow blooms at 600 ms; the wordmark rises at 1000 ms; the layer fades at 1600 ms -- by CSS alone, so it can never stay. A tap skips it (theme.js adds .intro-skip). */ .brand-intro { display: none; } .intro-play .brand-intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #000; animation: intro-out 260ms var(--ease-standard) 1600ms forwards; } .intro-play.intro-skip .brand-intro { animation: intro-out 200ms var(--ease-standard) forwards; } @keyframes intro-out { to { opacity: 0; visibility: hidden; } } .bi-stage { position: relative; display: flex; flex-direction: column; align-items: center; } .bi-mark { width: auto; transform: scale(0.94); animation: bi-settle 1000ms var(--ease-out) forwards; } .bi-mark .s { opacity: 0; animation: 360ms var(--ease-out) forwards; } .bi-mark .s1 { clip-path: inset(0 0 100% 0); animation-name: bi-down; animation-delay: 0ms; } .bi-mark .s2 { clip-path: inset(100% 0 0 0); animation-name: bi-up; animation-delay: 170ms; } .bi-mark .s3 { clip-path: inset(0 0 100% 0); animation-name: bi-down; animation-delay: 340ms; } .bi-mark .s4 { clip-path: inset(100% 0 0 0); animation-name: bi-up; animation-delay: 510ms; } .bi-glow { position: absolute; inset: -40% -60%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(229, 9, 20, 0.55), rgba(229, 9, 20, 0.16) 60%, transparent); opacity: 0; animation: bi-bloom 760ms var(--ease-out) 600ms forwards; } .bi-word { margin-top: 18px; padding-left: 0.28em; color: var(--red); font-size: 24px; font-weight: 700; letter-spacing: 0.28em; opacity: 0; transform: translateY(14px); animation: bi-rise 400ms var(--ease-out) 1000ms forwards; } /* DramaSabay: DRAMA slides in, the orange block wipes across, SABAY rises into it; the glow is the brand's orange. Same 1600 ms as Wuxia's. */ .brand-dramasabay .bi-glow { background: radial-gradient(closest-side, rgba(254, 143, 0, 0.45), rgba(254, 143, 0, 0.12) 60%, transparent); } .bi-logo { width: min(78vw, 520px); height: auto; } .bi-logo .d { opacity: 0; transform: translateX(-18px); animation: bi-slide 420ms var(--ease-out) 80ms forwards; } .bi-logo .b { clip-path: inset(0 100% 0 0); animation: bi-wipe 420ms var(--ease-out) 420ms forwards; } .bi-logo .y { opacity: 0; transform: translateY(16px); animation: bi-rise 380ms var(--ease-out) 760ms forwards; } @keyframes bi-slide { to { opacity: 1; transform: none; } } @keyframes bi-wipe { to { clip-path: inset(0); } } @keyframes bi-down { from { opacity: 1; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } } @keyframes bi-up { from { opacity: 1; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0); } } @keyframes bi-settle { to { transform: scale(1); } } @keyframes bi-bloom { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0.35; } } @keyframes bi-rise { to { opacity: 1; transform: none; } } /* ---- onboarding (/welcome/, wuxia-web's OnboardingView) ---- */ .is-welcome .hdr, .is-welcome .tabs, .is-welcome .site-footer { display: none; } .is-welcome main { padding-top: 0; } .is-welcome { padding-bottom: 0; } .onb { position: fixed; inset: 0; z-index: 40; background: #000; } .onb-pager { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-behavior: smooth; } .onb-page { position: relative; flex: 0 0 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; } .onb-illus { position: absolute; inset: 0 0 38% 0; } .onb-illus::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 55%, #000); } .onb-wall { position: absolute; inset: 0; width: 760px; overflow: hidden; transform: rotate(-8deg) translate(-200px, -60px); animation: onb-drift 16s ease-in-out infinite alternate; } .onb-wall::before { content: ""; position: absolute; inset: 0 0 auto; height: 140px; z-index: 1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent); } .onb-row { display: flex; gap: 10px; margin-bottom: 10px; } .onb-row.shift { margin-left: 56px; } .onb-tile { flex: 0 0 112px; height: 168px; border-radius: var(--radius-s); overflow: hidden; background: var(--surface); } .onb-tile img, .onb-poster img, .onb-frame img { width: 100%; height: 100%; object-fit: cover; } @keyframes onb-drift { to { transform: rotate(-8deg) translate(-320px, -60px); } } .onb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 48px; } .onb-stage.column { flex-direction: column; gap: 18px; } .onb-stage::before { content: ""; position: absolute; inset: 5%; pointer-events: none; background: radial-gradient(closest-side, rgba(229, 9, 20, 0.22), rgba(229, 9, 20, 0.06) 55%, transparent); } .onb-continue { position: relative; width: 150px; } .onb-poster { position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius-s) var(--radius-s) 0 0; overflow: hidden; background: var(--surface); } .onb-disc { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.55); border: 1.5px solid #fff; color: #fff; } .onb-progress { height: 3px; background: var(--hairline); } .onb-progress span { display: block; height: 100%; background: var(--red); } .onb-caption { padding: 8px 10px; background: var(--surface); border-radius: 0 0 var(--radius-s) var(--radius-s); font-size: 12px; font-weight: 600; } .onb-search { position: relative; display: flex; align-items: center; gap: 10px; width: min(320px, 80%); height: 44px; padding: 0 14px; background: var(--control); border-radius: var(--radius-s); color: var(--text-2); } .onb-search span { color: #fff; font-size: 16px; } .onb-caret { width: 2px; height: 20px; margin-left: -8px; background: var(--red); animation: onb-blink 1s steps(1) infinite; } @keyframes onb-blink { 50% { opacity: 0; } } .onb-frame { position: relative; width: calc(100% - 40px); aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: var(--surface); } .onb-frame.small { width: min(320px, 80%); } .onb-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 40%, rgba(0, 0, 0, 0.85)); } .onb-sub { position: absolute; left: 8px; right: 8px; bottom: 12px; text-align: center; font-size: 13px; font-weight: 600; text-shadow: 0 1px 3px #000, 0 0 8px #000; } .onb-title { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 700; } .onb-center { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 28px; transform: translate(-50%, -50%); } .onb-bottom { position: absolute; left: 12px; right: 12px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; } .onb-bar { display: flex; align-items: center; gap: 8px; font-size: 11px; } .onb-track { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; } .onb-track span { display: block; width: 38%; height: 100%; background: var(--red); border-radius: 2px; } .onb-actions { display: flex; justify-content: space-around; font-size: 11px; } .onb-actions span { display: inline-flex; align-items: center; gap: 3px; } .onb-copy { position: absolute; left: 28px; right: 28px; bottom: 176px; display: flex; flex-direction: column; gap: 12px; text-align: center; } .onb-copy :is(h1, h2) { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; white-space: pre-line; text-wrap: balance; } .onb-copy p { font-size: 16px; line-height: 1.5; color: var(--text-2); } .onb-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-t) + 12px) 20px 12px; } .onb-skip { padding: 8px 12px; font-size: 12px; font-weight: 500; color: #fff; } .onb-foot { position: absolute; left: 24px; right: 24px; bottom: calc(var(--safe-b) + 28px); display: flex; flex-direction: column; align-items: center; gap: 24px; } .onb-dots { display: flex; gap: 6px; } .onb-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--text-3); transition: background var(--t-state), transform var(--t-state) var(--ease-out); } .onb-dot.on { background: var(--red); transform: scaleX(3.33); margin: 0 7px; } .c-button.onb-cta { width: 100%; height: 48px; font-size: 16px; } @media (min-width: 600px) { .onb-wall { left: -15vw; width: 130vw; transform: rotate(-8deg) translate(0, -60px); } .onb-row { gap: 1vw; margin-bottom: 1vw; } .onb-row.shift { margin-left: 6vw; } .onb-tile { flex: 0 0 12vw; height: 18vw; } @keyframes onb-drift { to { transform: rotate(-8deg) translate(-6vw, -60px); } } .onb-stage { transform: scale(1.25); transform-origin: 50% 60%; } .onb-copy { left: 50%; right: auto; width: min(640px, 90vw); transform: translateX(-50%); } .onb-copy :is(h1, h2) { font-size: clamp(28px, 3.2vw, 44px); } .onb-copy p { font-size: 18px; } .onb-foot { left: 50%; right: auto; width: min(480px, 88vw); transform: translateX(-50%); } .onb-top { padding-left: var(--page-x); padding-right: var(--page-x); } } @media (min-width: 900px) { .onb-illus { inset: 0 0 34% 0; } .onb-stage { transform: scale(1.5); } .onb-frame { width: min(640px, 100%); } } /* ---- about ---- */ .about { max-width: 760px; margin: 0 auto; padding: 40px var(--page-x) 64px; } .about-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 32px; border-bottom: 1px solid var(--hairline); } .about-hero .mark { width: auto; } .about-hero h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; } .about-lede { max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--text-2); } .about-story { margin-top: 32px; } .prose-body p { max-width: 65ch; margin: 0 0 1em; font-size: 17px; line-height: 1.8; color: rgba(255, 255, 255, 0.9); } .prose-body a { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; } .about-stats { display: flex; flex-wrap: wrap; gap: 16px 48px; margin: 36px 0; padding: 24px 0; border-block: 1px solid var(--hairline); } .about-stats strong { display: block; font-size: clamp(32px, 6vw, 44px); line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; } .about-stats span { font-size: 14px; color: var(--text-2); } .about-offers h2, .about-contact h2 { font-size: 20px; line-height: 1.3; font-weight: 700; margin-bottom: 8px; } .about-offers dl > div { display: grid; grid-template-columns: minmax(0, 13rem) 1fr; gap: 4px 28px; padding: 16px 0; border-bottom: 1px solid var(--hairline); } .about-offers dt { font-weight: 700; } .about-offers dd { margin: 0; color: var(--text-2); line-height: 1.6; } .about-contact { margin-top: 40px; } .about-contact p { color: var(--text-2); } .about-mail { display: inline-block; margin-top: 4px; font-size: 20px; font-weight: 600; color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; } .about-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; } @media (max-width: 599px) { .about-offers dl > div { grid-template-columns: 1fr; } } /* ---- download-manager overlays ---- Neat Download Manager injects a "download" panel over every