/* ============================================================ Modern Player TV — the page's look, from the Android TV tokens (src/ui/tokens.ts says where each came from) Sizes: frame px on the 1920 × 1080 stage; Android dp/sp × 2. ============================================================ */ @font-face { font-family: Manrope; src: url("manrope_regular.ttf"); font-weight: 400; } @font-face { font-family: Manrope; src: url("manrope_medium.ttf"); font-weight: 500; } @font-face { font-family: Manrope; src: url("manrope_semibold.ttf"); font-weight: 600; } @font-face { font-family: Manrope; src: url("manrope_bold.ttf"); font-weight: 700; } @font-face { font-family: Manrope; src: url("manrope_extrabold.ttf"); font-weight: 800; } html, body { margin: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; } /* THE FLOOR (20 Oct 2026, PG-2): the black under every page, a layer of its own whose OPACITY clears it where a picture plays (.floor.clear — livetv.ts open_). It was the document's own background, made transparent by a class on : every way into Live TV repainted the document and Home under it — 40 tiles, 433 ms of raster on the way in. */ .floor { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: #000; will-change: opacity; } .floor.clear { opacity: 0; } body { font-family: Manrope, sans-serif; color: #F2EFEA; -webkit-font-smoothing: antialiased; line-height: normal; } /* LINE BOXES AS COMPOSE DRAWS THEM — measured 15 Oct 2026 against the Android TV's Welcome: with includeFontPadding off, a Text whose lineHeight is smaller than the face still takes the face's own height, ascent + descent = 1.366 em for Manrope (hhea 2132 + 600 of 2000). Nearly every role on Welcome is that case (press 13sp under a 17sp label, hero 62/118 lines…), so text here keeps `line-height: normal` — the same 1.366 em — and only a seat that Compose sizes itself (the two-line message) says its own height. Text that can wrap is the other case (16 Oct, the stick's two-line question): Compose sets the lines its lineHeight apart but keeps the face's ascent over the first and its descent under the last — in CSS, the lineHeight as line-height and (1.366 em − lineHeight)/2 as padding above and below, the same box for one line or six. */ #stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; } /* No `inset` anywhere: Chromium 69 does not know it (it came in 87) — 19 Oct, the live cover shrank to its logo. */ .page { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; } .page > * { position: absolute; } /* ---- the room ---- */ /* No object-fit (20 Oct 2026, PG-2, sc samsung-slojevi-slike on the Guide): every room picture is 16:9 (bg_room_tv.jpg 1280 × 720, bg_room_soft.webp 480 × 270), so `cover` drew exactly what the plain fill draws — but on this engine an with an object-fit is not a directly composited picture: the Guide's room was a 1920 × 1080 painted layer, 40 tiles rastered on every way in, where the picture itself is 15 at its own size. */ .room { left: 0; top: 0; width: 1920px; height: 1080px; } .veil { left: 0; top: 0; width: 1920px; height: 1080px; } /* ---- Welcome's scene: everything the language panel blurs (SettingsSheetBackdrop — the page at a sixth, three boxes of radius 3, the sketch's 18 px Gaussian; the panel's own shade .33 over it). The brand and the version stand above the shade (z 15 over the panel's 14), the tagline gone while the panel is up (ConnectOverlays brand(!sheet.up)). */ .wl-scene { left: 0; top: 0; width: 1920px; height: 1080px; } .wl-scene > * { position: absolute; } .welcome.behind .wl-scene { filter: blur(18px); } .welcome.behind .brand, .welcome.behind .version { z-index: 15; } .welcome.behind .brand .tagline { visibility: hidden; } /* ---- brand plate (MpBrandPlate: padding 8dp, mark 64×26dp, 8dp, words) ---- */ .brand { display: flex; align-items: center; padding: 0 16px; box-sizing: border-box; transform-origin: 0 0; } .brand .mark { width: 128px; height: 52px; overflow: hidden; flex: none; } .brand .mark img { width: 128px; display: block; } .brand .words { margin-left: 16px; } .brand .name { font-size: 28px; letter-spacing: 0.5px; white-space: nowrap; } .brand .modern { font-weight: 400; color: rgba(242,239,234,0.62); } .brand .player { font-weight: 800; color: #F2EFEA; margin-left: 6px; } .brand .tagline { margin-top: 4px; padding-left: 22px; font-size: 24px; letter-spacing: 1.5px; color: rgba(242,239,234,0.66); white-space: nowrap; } /* ---- version (press 15sp, ink .97, right-anchored at top 61 / end 96) ---- */ .version { top: 61px; right: 96px; font-size: 30px; font-weight: 500; letter-spacing: 3px; color: rgba(242,239,234,0.97); white-space: nowrap; } /* ---- headline (hero × 62/118: 31sp, line 32.6sp, Black, −1sp) ---- */ .headline { text-align: center; font-size: 62px; font-weight: 800; letter-spacing: -2px; color: #F2EFEA; } /* ---- QR ---- */ .eyebrow { text-align: center; font-size: 30px; font-weight: 500; letter-spacing: 3px; color: #E7C184; white-space: nowrap; overflow: hidden; } .qr { background: #fff; border-radius: 6px; overflow: hidden; } .qr svg { display: block; width: 392px; height: 392px; } /* ---- info column ---- */ .info { display: flex; flex-direction: column; } /* Top-down, nothing shrinks: the column's content (with the message seat) is taller than its 446 px box, as on Android — the seat hangs below by design. */ .info > * { flex: none; } .info .label { font-size: 34px; font-weight: 500; letter-spacing: 3px; color: #E7C184; white-space: nowrap; overflow: hidden; } .info .value { font-size: 40px; font-weight: 800; letter-spacing: -0.68px; white-space: nowrap; } .info .value.id { margin-top: 6px; letter-spacing: 1px; color: #F2EFEA; } .info .value.site { margin-top: 4px; color: #FFFFFF; } .info .rule { height: 28px; display: flex; align-items: center; } .info .rule div { width: 100%; height: 2px; background: rgba(231,193,132,0.38); } .info .row { display: flex; align-items: center; } .info .row.actions { margin-top: 18px; } .info .row.go { margin-top: 28px; } /* A PRESS REPAINTS NOTHING (15 Oct 2026, owner: every cursor frame within 16 ms on every page). What changes under the cursor — the lit lip and the utilities' white rim — are their own compositor layers whose OPACITY flips; the key itself (glass, word, glyph) is never drawn again. A press is then 0.6 ms of script and layer properties, nothing rastered (sc samsung-js, measured on the TV). */ .key { contain: layout; position: relative; box-sizing: border-box; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.48); } /* the lit top edge every crystal box wears (CrystalLip) */ .key::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(242,239,234,0.07); will-change: opacity; pointer-events: none; } .key.focused::before { opacity: 0; } /* the utilities' white rim — drawn over the border's own seat, so the key's insides never move */ .key.utility { border: 2px solid transparent; } .key.utility::after { content: ""; position: absolute; left: -2px; top: -2px; right: -2px; bottom: -2px; border: 2px solid rgba(255,255,255,0.24); border-radius: 6px; will-change: opacity; pointer-events: none; } .key.utility.focused::after { opacity: 0; } /* RELOAD AND SETTINGS, ONE PAIR (owner, 15 Oct 2026: "iste veličine i beline … ikonice lepo upakovane u kutiju, srazmerne, na istom mestu, kutije iste veličine, sve sinhronizovano"): two equal boxes (216 × 64), and inside each the same parts — the word, 10 px, the glyph in a 36 px square — inside the same 14 / 12 px edges. The words are a step brighter: SemiBold (600) pure white instead of Medium. One size for both words (welcome.ts fitPair): the largest both carry, 35 px in English. */ /* …and the word with its glyph stands CENTRED in the box (owner, 15 Oct 2026: "Settings je dobar, samo Reload lepo centralizuj"): "Settings" fills its box, so nothing changes there; the shorter "Reload" gets equal air both sides. */ .actions .key { flex: 1 1 0; min-width: 0; height: 64px; padding: 0 12px 0 14px; justify-content: center; } .actions .key .word { flex: 0 1 auto; font-weight: 600; } .actions .key .glyph { margin-left: 10px; width: 36px; height: 36px; } .actions .key + .key { margin-left: 24px; } .key .word { font-size: 35px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; min-width: 0; } .key .glyph { margin-left: 16px; width: 42px; height: 42px; flex: none; } .key .glyph svg { display: block; } .key.continue { flex: 1; height: 80px; padding: 0 20px; background: rgba(0,0,0,0.30); } .key.continue .word { font-size: 34px; font-weight: 800; letter-spacing: 1.6px; color: #E7C184; } .key.globe { width: 80px; height: 80px; margin-left: 24px; flex: none; } .info .message { margin-top: 24px; height: 56px; font-size: 22px; line-height: 28px; letter-spacing: 0.3px; color: rgba(217,184,122,0.95); overflow: hidden; } /* ---- notice (fact 20sp, ink .88, mark 25dp, 10dp) ---- */ .notice { display: flex; justify-content: center; } .notice .line { display: flex; align-items: center; } .notice .sign { width: 50px; height: 50px; flex: none; } .notice .sign svg { display: block; } .notice .text { margin-left: 20px; font-size: 40px; font-weight: 400; letter-spacing: 0.3px; color: rgba(242,239,234,0.88); white-space: nowrap; } /* ============================================================ HOME — HomeScreen.kt (frame px = dp × 2). Every surface the page's smoked crystal (homeGlass): black at the box's own strength, the room's blue breath from the left and the top (NavyCrystal.kt blueBreath: InkBlue 0x3A5680, 0.09 over 80 % of the width, 0.04 over 65 % of the height, eased 1 · 0.84 · 0.5 · 0.16 · 0), the light on the top edge (white 0.07, 1 dp) and the white rim (ink 0.12, 1 dp). ============================================================ */ .home .glass { --glass: 0.36; box-sizing: border-box; /* The rim drawn INSIDE the box, as Compose's border is — it takes no room from what the box holds. */ box-shadow: inset 0 0 0 2px rgba(242,239,234,0.12); /* var() ONLY in the colour, never in the image list (20 Oct, the Home cursor at ~20 ms): a shorthand that holds a var() is built again on every restyle of the box, its gradients come out as new pictures, and this engine takes that for a changed background — the box repainted and the whole page's layers re-sorted on each press that only moved the focus class (measured: hero 12 tiles + a 3–8 ms compositing walk per step; split: nothing). */ background-image: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)), linear-gradient(to bottom, rgba(58,86,128,0.04) 0%, rgba(58,86,128,0.03375) 16.25%, rgba(58,86,128,0.02) 32.5%, rgba(58,86,128,0.00625) 48.75%, rgba(58,86,128,0) 65%), linear-gradient(to right, rgba(58,86,128,0.09) 0%, rgba(58,86,128,0.0759) 20%, rgba(58,86,128,0.045) 40%, rgba(58,86,128,0.0141) 60%, rgba(58,86,128,0) 80%); background-position: top, 0 0, 0 0; background-size: 100% 2px, auto, auto; background-repeat: no-repeat, repeat, repeat; background-color: rgba(0,0,0,var(--glass)); } /* The focused box's glass a step firmer (HERO .26 → .36, INDEX .33 → .49) — its own layer whose OPACITY flips, so a press repaints nothing (README, the speed contract). The hero's and the rows' lifts are layers for good (19 Oct, SP-3: without it each step repainted the whole box — Home 50 → 36 ms with the cursor's own fix); a card's lift moves with its card (scale 1.1) and stays painted with it. */ .home .lift { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; opacity: 0; pointer-events: none; } .home .hero > .lift, .home .row > .lift { will-change: opacity; } /* Every box the cursor stands on is its own small layer: what a press changes in it (the firmer glass, the brighter title) repaints that box alone, never the room behind it. */ .home .hero, .home .row, .home .header { will-change: transform; } /* 0.999, never 1 (20 Oct, the Home cursor at ~20 ms): opacity crossing 1 makes the layer transparent or not, and this engine repaints the box under it for that — 12 + 12 tiles of the hero on every step onto it or off it. */ .home .focused > .lift { opacity: 0.999; } /* ---- the room ---- */ .home .backdrop { left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; } .home .backdrop .layer { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; } /* The two pictures, layers for good (backdrop.ts: only the upper one fades — a turn is the compositor's alone). */ .home .backdrop .picture { will-change: opacity; } .home .backdrop .grain { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: url("noise_tile.png") repeat; } .home .backdrop svg { position: absolute; left: 0; top: 0; } /* ---- the brand, on its plate (MpBrandPlate: plate transparent over the glass, rim, PLATE_RADIUS 6 dp) ---- */ .home .home-brand { border-radius: 12px; } /* ---- the header box: four seats, three hairlines (CONTROL_SIDE 30 dp, SEARCH_WIDTH 104 dp) ---- */ .home .header { display: flex; align-items: center; border-radius: 12px; } .home .header .seat { position: relative; display: flex; align-items: center; justify-content: center; flex: none; height: 60px; } .home .header .seat.icon { width: 60px; } .home .header .seat svg { display: block; flex: none; } .home .header .divider { width: 2px; height: 40px; flex: none; background: rgba(242,239,234,0.26); } .home .header .seat.search { width: 208px; justify-content: flex-start; padding: 0 20px; box-sizing: border-box; } .home .header .seat.search .word { margin-left: 14px; font-size: 28px; font-weight: 500; color: #F2EFEA; white-space: nowrap; overflow: hidden; min-width: 0; } /* ---- the corner clock: hour over date, right-aligned (clock 15 sp SemiBold .92; date 14 sp Regular .80) ---- */ .home .clock { display: flex; flex-direction: column; align-items: flex-end; } .home .clock .time { font-size: 30px; font-weight: 600; letter-spacing: 0.5px; color: rgba(242,239,234,0.92); font-variant-numeric: tabular-nums; white-space: nowrap; } .home .clock .date { margin-top: 4px; width: 100%; text-align: right; font-size: 28px; font-weight: 400; letter-spacing: 0.4px; color: rgba(242,239,234,0.80); white-space: nowrap; overflow: hidden; } /* ---- the hero: the one Black word, the fact, the ask (HERO_RADIUS 8 dp, glass .26 → .36) ---- */ .home .hero { --glass: 0.26; border-radius: 16px; } /* The lift is the firmer glass (black 0.1351) AND the cursor's house glass over it (white 0.03, which the gold line no longer carries — home.ts): composed into one colour, alpha 1 − 0.97 × (1 − 0.1351), white 0.03 × 255 / alpha (to the nearest step). */ .home .hero > .lift { background: rgba(48,48,48,0.161); } .home .hero .ground { position: absolute; background: rgba(0,0,0,0.25); border-radius: 4px; } .home .hero .column { position: absolute; left: 60px; top: 124px; right: 60px; } .home .hero .title { font-size: 118px; font-weight: 800; letter-spacing: -2px; color: #F2EFEA; white-space: nowrap; overflow: hidden; } .home .hero .fact { margin-top: 60px; font-size: 28px; font-weight: 400; letter-spacing: 0.3px; color: rgba(242,239,234,0.70); white-space: nowrap; overflow: hidden; } .home .hero .press { position: absolute; left: 64px; right: 64px; bottom: 68px; font-size: 20px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.9); white-space: nowrap; overflow: hidden; } /* ---- the index: plate, overhanging title, navy rule, quiet count (ROW_RADIUS 7 dp, glass .33 → .49) ---- */ .home .index { left: 0; top: 0; width: 0; height: 0; } /* a seat for the rows, with no picture of its own */ .home .index > * { position: absolute; } .home .row { --glass: 0.33; border-radius: 14px; } .home .row > .lift { background: rgba(29,29,29,0.2616); } /* black 0.2388 + the cursor's white 0.03 (hero) */ .home .row > * { position: absolute; } .home .row-title { font-size: 48px; font-weight: 600; color: rgba(242,239,234,0.90); white-space: nowrap; overflow: hidden; } /* The brighter word is the WORD's colour (an inline span with no layer of its own), never the title box's: a colour change on a box that is its own paint layer re-sorts every layer of the page (20 Oct, ~4–8 ms a step). */ .home .row.focused > .row-title > .w { color: #F2EFEA; } .home .row-rule { background: rgba(150,160,178,0.30); } .home .row-count { text-align: right; font-size: 28px; font-weight: 500; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; color: rgba(242,239,234,0.62); white-space: nowrap; } /* ---- Continue Watching (HomeShelf / RecentTile): the label 13 sp Medium, 1.5 sp tracking, white .70; the card's glass .36 → .42 under the hand, its white rim .12 and top light .07 (the .glass dress), radius 7 dp; the card lifts 1.10 (TILE_LIFT) over its neighbours and wears no cursor line; the mark 64 dp in the middle; the gold rule 3 dp on a white .18 track, 7 dp in, 6 dp up; the name 15 sp Medium, hanging 5 dp under the glass. ---- */ .home .shelf-label { font-size: 26px; font-weight: 500; letter-spacing: 3px; line-height: 26px; color: rgba(242,239,234,0.70); white-space: nowrap; overflow: hidden; } .home .tile-box { z-index: 0; } .home .tile-box > * { position: absolute; } .home .tile-box.focused { z-index: 1; } /* No layer of its own and no glide (19 Oct): four card layers with will-change made Home squash into 72 layers (65 without). The lift is a state flip of the one card under the hand, painted once (DESIGN_SYSTEM §9: focus is a flip, not a motion). */ /* scale(1) at rest, for good (20 Oct, the Home cursor at ~20 ms, measured on the TV): a card that GAINED a transform on the press became a layer of the page then and there — a layout of the page (3–5 ms) and every layer's inputs worked out again (10–12 ms) on each step along the shelf; one that always has one only changes it (ULT 20–28 → 8–12 ms). */ .home .tile { --glass: 0.36; border-radius: 14px; overflow: hidden; transform: scale(1); } .home .tile > .lift { background: rgba(0,0,0,0.09375); } .home .tile-box.focused > .tile { transform: scale(1.1); } .home .tile-box.focused > .tile > .lift { opacity: 0.999; } .home .tile .mark { position: absolute; display: flex; align-items: center; justify-content: center; } .home .tile .mark img { max-width: 100%; max-height: 100%; object-fit: contain; display: none; } .home .tile.in .mark img { display: block; } .home .tile .mark .initials { font-size: 54px; font-weight: 700; color: rgba(242,239,234,0.85); } .home .tile.in .mark .initials { display: none; } .home .tile .rule { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(242,239,234,0.18); } .home .tile .rule > i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #E7C184; transform-origin: left center; transform: scaleX(0); } .home .tile-name { height: 40px; line-height: 28px; font-size: 30px; font-weight: 500; color: #F2EFEA; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- the plan pill (PlanPill.kt: 58 tall, radius 6 dp, pad 12 dp, halo 14 dp at .22, dot 8 dp, 12 sp Bold) ---- */ .home .plan { position: absolute; left: 0; top: 4px; height: 58px; max-width: 452px; display: flex; align-items: center; padding: 0 24px; border-radius: 12px; } .home .plan .halo { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; } .home .plan .dot { width: 16px; height: 16px; border-radius: 50%; } .home .plan .word { margin-left: 14px; font-size: 24px; font-weight: 700; letter-spacing: 3px; color: #F2EFEA; white-space: nowrap; overflow: hidden; min-width: 0; } /* ---- NOT CONNECTED (7 Oct): glass .55, a 1.5 dp coral rim at .80, the dot and one line in coral ---- */ .home .held { --glass: 0.55; position: absolute; display: flex; align-items: center; justify-content: center; padding: 0 32px; border-radius: 12px; box-shadow: inset 0 0 0 3px rgba(255,107,94,0.80); transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .home .held.knock { box-shadow: inset 0 0 0 3px rgba(255,107,94,1); } .home .held .dot { width: 20px; height: 20px; border-radius: 50%; background: #FF6B5E; flex: none; } .home .held .word { margin-left: 20px; font-size: 30px; font-weight: 600; letter-spacing: 1.2px; color: #FF6B5E; white-space: nowrap; overflow: hidden; min-width: 0; } /* ---- the corner facts: ID over the site, one column (13 sp; lanes 22 dp) ---- */ .home .corner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 28px; border-radius: 12px; } .home .corner .line { display: flex; align-items: center; } .home .corner .line.site { margin-top: 10px; } .home .corner .lane { width: 44px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: rgba(242,239,234,0.88); } .home .corner .site .lane { color: rgba(242,239,234,0.78); } .home .corner .lane svg { display: block; } .home .corner .lane b { font-weight: 800; } .home .corner .id { margin-left: 6px; font-size: 26px; font-weight: 500; letter-spacing: 0.6px; color: rgba(242,239,234,0.88); white-space: nowrap; } .home .corner .address { margin-left: 6px; font-size: 26px; font-weight: 400; color: rgba(242,239,234,0.78); white-space: nowrap; } /* ============================================================ THE QUESTION — MpConfirm.kt / CrystalPanel.kt (frame px) ============================================================ */ .confirm { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 20; background: rgba(0,0,0,0.62); display: flex; align-items: center; justify-content: center; } .confirm .plate { width: 760px; box-sizing: border-box; padding: 44px 36px; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; align-items: center; background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .confirm .mark { height: 64px; display: block; } /* 50 on a 60 line (crystalTitleFace). Compose keeps the face's own ascent over the first line and its descent under the last (1.366 em = 68.3), the lines 60 apart between: a 60 px CSS line with the 8.3 px difference split as padding is the same box for one line or two (stick 16 Oct: "Reset all app preferences to / defaults?" lines 60 apart). */ .confirm .title { margin-top: 24px; font-size: 50px; line-height: 60px; padding: 4.15px 0; font-weight: 600; color: #fff; text-align: center; } .confirm .rule { margin-top: 22px; width: 96px; height: 3px; background: rgba(231,193,132,0.85); } .confirm .answers { position: relative; margin-top: 36px; display: flex; } .confirm .answer { width: 300px; height: 76px; border-radius: 20px; padding: 0 24px; box-sizing: border-box; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); transform: scale(1); will-change: transform; /* MP.motion.move, one frame in — lit in the first frame, as the page cursor (focus.ts FIRST_FRAME_MS) */ transition: transform 100ms cubic-bezier(0, 0, 0.2, 1) -17ms; } .confirm .answer + .answer { margin-left: 24px; } .confirm .answer .word { font-size: 34px; font-weight: 600; color: #F2EFEA; white-space: nowrap; } .confirm .answer.accent .word { color: #E7C184; } /* Lit by itself (no page cursor): the gold breath and the gold hairline, a layer each, flipped by opacity. */ .confirm .answer::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; background: rgba(231,193,132,0.12); box-shadow: inset 0 0 0 2px #E7C184; opacity: 0; will-change: opacity; pointer-events: none; } .confirm .answer.focused { transform: scale(1.02); } .confirm .answer.focused::after { opacity: 1; } .confirm .answer.focused::before { opacity: 0; } /* ============================================================ LIVE TV — LiveTvScreen.kt / LiveTvCrystal.kt (frame px; the measures are written by screens/livetv.ts) ============================================================ */ .live .panel { position: absolute; } .live .list { position: absolute; overflow: hidden; } .live .track { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; } /* ---- the bar: words on the room, the page's own Bold and white over its gold line, the others at 0.59 ---- */ .live .bar { display: flex; align-items: center; } .live .bar .word { flex: none; padding: 14px 22px; margin-right: 64px; font-size: 36px; font-weight: 600; letter-spacing: -0.2px; color: rgba(242,239,234,0.59); white-space: nowrap; position: relative; } .live .bar .word.chosen { font-weight: 700; color: #F2EFEA; } .live .bar .word.chosen::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 8px; height: 4px; background: #E7C184; } .live .bar .word.lit { color: #E7C184; } .live .bar .word:nth-child(4) { margin-right: 88px; } /* 64 + space3 24 */ .live .bar .search { flex: none; display: flex; align-items: center; box-sizing: border-box; padding: 0 32px; border-radius: 999px; background: rgba(0,0,0,0.50); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); position: relative; } .live .bar .search::before { content: ""; position: absolute; left: 33px; right: 33px; top: 0; height: 2px; background: rgba(255,255,255,0.07); } .live .bar .search .glyph { display: block; flex: none; width: 32px; height: 32px; } .live .bar .search .glyph svg { display: block; } .live .bar .search .glyph.lit { position: absolute; left: 32px; opacity: 0; } .live .bar .search.lit .glyph.lit { opacity: 1; } .live .bar .search .hint { margin-left: 24px; font-size: 30px; font-weight: 400; letter-spacing: 0.2px; color: rgba(255,255,255,0.30); white-space: nowrap; } .live .bar .mark { margin-left: auto; display: block; } /* ---- the rows' crystal: glass 0.58, the white hairline 0.14, white 0.07 on the top edge ---- */ .live .row { position: absolute; left: 0; width: 100%; box-sizing: border-box; border-radius: 14px; background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, var(--lane, transparent), rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .live .row.chosen { background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)), var(--lane, transparent), rgba(0,0,0,0.58); } .live .row .thread { position: absolute; display: none; background: rgba(231,193,132,0.95); } .live .row.chosen .thread { display: block; } .live .name { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-size: 30px; font-weight: 600; letter-spacing: 0.2px; } .live .name.cut { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); } /* ---- CATEGORIES (cubes 19 in, the word 15 after them; the line 12 in from either edge) ---- */ .live .head { position: absolute; left: 0; top: 0; width: 100%; height: 58px; display: flex; align-items: center; padding-left: 19px; box-sizing: border-box; } .live .head .cubes { position: relative; width: 16.5px; height: 16.5px; flex: none; } .live .head .cubes i { position: absolute; width: 6.5px; height: 6.5px; border-radius: 1.5px; background: rgba(231,193,132,0.95); } .live .head .cubes i:nth-child(2) { left: 10px; } .live .head .cubes i:nth-child(3) { top: 10px; } .live .head .cubes i:nth-child(4) { left: 10px; top: 10px; } .live .head .word { margin-left: 15px; font-size: 25px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; } .live .headline { position: absolute; left: 12px; right: 12px; top: 65px; height: 2px; background: rgba(242,239,234,0.12); } /* ---- SEARCH FOLDER (its glyph 16 in, the hint 16 after it) ---- */ .live .fsearch { display: flex; align-items: center; padding: 0 16px; } .live .fsearch .glyph { width: 28px; height: 28px; flex: none; } .live .fsearch .glyph svg { display: block; } .live .fsearch .hint { margin-left: 16px; font-size: 30px; font-weight: 500; letter-spacing: 0.2px; color: rgba(242,239,234,0.72); white-space: nowrap; } /* ---- a folder: the name 26 in, the count in its navy lane behind the blue-grey line; the open one lit, gold ---- */ .live .frow .thread { left: 8px; top: 13px; bottom: 13px; width: 4px; border-radius: 4px; } .live .frow .laneline { position: absolute; top: 50%; margin-top: -16.5px; width: 2px; height: 33px; background: rgba(150,160,178,0.45); } .live .frow .name { left: 26px; color: rgba(255,255,255,0.94); } .live .frow.chosen .name { color: #FFFFFF; } .live .frow .count { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 600; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.94); } .live .frow.chosen .count { color: #E7C184; } /* ---- a channel: the number in the mirrored navy, the logo 10 after it, the name 14 after the logo ---- */ .live .crow { border-radius: 12px; } .live .crow .thread { left: 3px; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; } .live .crow .fav { position: absolute; display: none; right: 5px; top: 9px; bottom: 9px; width: 4px; border-radius: 3px; background: rgba(231,193,132,0.95); } .live .crow.starred .fav { display: block; } .live .crow .number { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 600; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; color: rgba(242,239,234,0.94); } .live .crow.chosen .number { color: #E7C184; } .live .crow .logo { position: absolute; top: 50%; transform: translateY(-50%); } .live .crow .name { color: rgba(255,255,255,0.95); } .live .crow.chosen .name { color: #FFFFFF; } .live .crow .dot { position: absolute; display: none; right: 22px; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; } .live .crow.archive .dot { display: block; } .live .empty { position: absolute; left: 16px; top: 16px; font-size: 30px; color: rgba(255,255,255,0.52); } /* ---- a channel's mark: the logo fitted, or its two letters (MpChannelMark) ---- */ .live .logo { display: flex; align-items: center; justify-content: center; } .live .logo img { display: none; width: 100%; height: 100%; object-fit: contain; box-sizing: border-box; padding: 1px; } .live .logo.in img { display: block; } .live .logo.in b { display: none; } .live .logo b { font-weight: 800; color: rgba(242,239,234,0.55); white-space: nowrap; } /* ---- the picture card: the stage (the warm cover, the big mark, the Live pill) and the band ---- */ .live .card { position: absolute; box-sizing: border-box; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .live .picture .stagebox { position: absolute; } .live .picture .cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(#17110A, #080604, #030303); } .live .picture.empty .cover { background: rgba(0,0,0,0.58); } /* The picture (LT-2): the cover lifts in PICTURE_FADE_MILLIS 220 (FastOutSlowIn) on the first frame. A refusal: the mark and one sentence. ANOTHER CHANNEL: THE PICTURE NEVER CUTS (19 Oct 2026, the owner: "poslednja slika … i ikonica preko kad se promeni, isto kao android" — LiveTvScreen Stage: "the picture that was there stays a moment longer, the cover comes softly over it, and the new one appears out of it"). The cover comes back in the same 220 ms over the old picture: the old stream is stopped only after the press's frame and its stop takes 250–350 ms on this TV, so the last frame stands under the cover until the cover is whole — the plane's black between two streams is never seen. A layer of its own, so the fade runs on the compositor while the stop holds the page's thread. */ .live .picture .cover { transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity; } .live .picture.ready .cover { opacity: 0; } .live .picture .nosignal { position: absolute; left: 0; right: 0; display: none; text-align: center; white-space: nowrap; font-size: 30px; font-weight: 600; color: #F2EFEA; } .live .picture.said-no .nosignal { display: block; } .live .picture.said-no .livepill { display: none; } /* The window over the stage: the room and its veil step aside, the stage's floor is clear (.floor.clear). */ .live.hole .room, .live.hole .veil { clip-path: var(--hole); } /* The full screen: the page steps aside whole; the plane fills the frame (player.move). */ /* IN AND OUT OF THE FULL SCREEN AT ONCE (18 Oct, the owner on the Samsung: "čim se stisne da se smanji … ne otvara se momentalno … najbrže moguće vraćanje"). The page is a layer of its own, painted once: the full screen only turns its opacity off and BACK on again — no repaint of the page (hiding it with visibility re-rastered all of it on the way back), no fade (a fade over the picture made the compositor draw the whole page off screen every frame). The picture moves first, in the same press (livetv.ts enterFull / leaveFull). 0.999, NEVER 1 (18 Oct, sc samsung-profil on the TV): at full opacity the page's text is drawn with LCD (sub-pixel) smoothing, which the compositor may only use on a layer at opacity 1 — so every 1 → 0 → 1 made all the page's tiles again, 104 tiles and ~400 ms of raster, and BACK showed the page 340 ms late. At 0.999 the text is drawn once with grey smoothing (as on Android) and the full screen only flips the layer: the page is back in ~100 ms. The 0.1 % is invisible; scrolling measured the same (rAF p50 21/25 ms, draw p90 47–79/49–61 ms). */ .live { will-change: opacity; opacity: 0.999; } .live.full { opacity: 0; } /* The word back from the compositor (ui/drawn.ts): a 2 px layer that draws nothing. */ .drawn-tick { position: absolute; left: 0; top: 0; width: 2px; height: 2px; will-change: opacity; pointer-events: none; } .live .picture.empty .cover .logo, .live .picture.empty .livepill, .live .picture.empty .band > * { visibility: hidden; } /* THE SMALL WINDOW'S KEYS ON A PC (25 Oct 2026, livetv.ts — Windows only, built there and nowhere else): the sound and the full screen, over the picture's foot while the arrow is over it and a picture plays. */ .live .pvctl { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 20px; box-sizing: border-box; opacity: 0; transition: opacity 160ms ease; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)); } .live .stagebox:hover .pvctl { opacity: 1; } html.no-pointer .live .pvctl { opacity: 0 !important; } .live .card.picture:not(.ready) .pvctl { display: none; } .live .pvk { width: 60px; height: 60px; border-radius: 30px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(12,14,18,0.62); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3); } .live .pvk:hover { background: rgba(48,52,62,0.94); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6); } .live .pvvol { width: 170px; height: 44px; display: flex; align-items: center; cursor: pointer; } .live .pvtrack { position: relative; width: 100%; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.3); } .live .pvfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #FFFFFF; } .live .pvknob { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 11px; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.5); } .live .livepill { position: absolute; left: 20px; top: 20px; height: 50px; display: flex; align-items: center; padding: 0 22px 0 24px; border-radius: 25px; background: rgba(0,0,0,0.55); } .live .livepill i { width: 14px; height: 14px; border-radius: 50%; background: #E5484D; } .live .livepill span { margin-left: 14px; font-size: 30px; font-weight: 500; letter-spacing: 3.6px; color: #FFFFFF; } .live .band { position: absolute; display: flex; align-items: center; padding: 0 24px 0 16px; box-sizing: border-box; background: linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.10)) top / 100% 2px no-repeat, rgba(0,0,0,0.62); } .live .band .number { flex: none; margin-right: 14px; font-size: 30px; font-weight: 500; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; color: rgba(242,239,234,0.72); } .live .band .number:empty { display: none; } .live .band .logo { flex: none; position: relative; } .live .band .name { position: relative; flex: 1 1 0; min-width: 0; height: 100%; margin-left: 21px; color: #FFFFFF; } /* ---- the guide card and the two keys ---- */ .live .guide { background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, rgba(0,0,0,0.58); } .live .key { position: absolute; box-sizing: border-box; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 0 8px; background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .live .key .glyph { flex: none; width: 31px; height: 31px; } .live .key .glyph svg { display: block; } .live .key .word { margin-left: 8px; font-size: 36px; font-weight: 600; letter-spacing: 0.2px; color: #FFFFFF; white-space: nowrap; } .live .key.catchup .glyph.off, .live .key.catchup.off .glyph.on { display: none; } .live .key.catchup.off .glyph.off { display: block; } .live .key.off .word { color: rgba(242,239,234,0.55); } .live .key.favourite .glyph.on, .live .key.favourite.starred .glyph.off { display: none; } .live .key.favourite.starred .glyph.on { display: block; } /* ---- the day rail: the framed clock, the date, EPG and its rule, TODAY and the days ---- */ .live .days .cell { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap; } .live .days .clock { border-radius: 12px; font-size: 34px; font-weight: 800; letter-spacing: -1.5px; color: #FFFFFF; background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .live .days .date { font-size: 22.9px; font-weight: 500; color: rgba(242,239,234,0.72); } .live .days .epg { font-size: 30px; font-weight: 700; letter-spacing: 2px; color: #E7C184; } .live .days .epgrule { position: absolute; background: rgba(242,239,234,0.12); } .live .days .day { border-radius: 12px; } .live .days .day span { position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; } .live .days .day .figure { top: 50%; margin-top: -8px; transform: translateY(-50%); font-size: 36px; font-weight: 800; color: #FFFFFF; } .live .days .day .small { top: 50%; margin-top: 18px; transform: translateY(-50%); font-size: 17.1px; font-weight: 600; letter-spacing: 1.5px; color: rgba(242,239,234,0.62); } .live .days .day.chosen .small { color: rgba(255,255,255,0.85); } .live .days .today .top { top: 50%; margin-top: -10.5px; transform: translateY(-50%); font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.94); } .live .days .today.chosen .top { color: #FFFFFF; } .live .days .today .small { margin-top: 11px; letter-spacing: 0; } /* The card's rim stands over the picture and the band (Compose draws the border after the content). */ .live .card::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); pointer-events: none; } .live .shell { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .live .key.favourite.off .glyph { opacity: 0.3; } /* The two hosts (main.ts): the screens built per visit, and Live TV kept between visits. */ .host { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; } /* ONE FRAME BETWEEN SCREENS (19 Oct, main.ts raise): every screen is its own layer for good — the page's root holds none of them, so a switch repaints nothing of the root — and the screen just left is only made transparent (.down: the compositor's opacity, its tiles kept); main.ts puts it away (.away) once the remote rests. */ .host { will-change: opacity; } .host.down { opacity: 0; } /* A SCREEN LEFT IS NOT UNDER THE MOUSE (25 Oct 2026, Windows — ui/pointer.ts): transparent, it still took the arrow's hover and stood first in the hit test over the page in front (a film's page over Live TV). */ .host.down, .host.down * { pointer-events: none !important; } /* …nor do the layers over every page while they hold nothing (the PIN pad's, the reminder's, the sleep timer's — the stage's whole size) or the live full screen's chrome while it is off (kept visible to keep its boxes laid out): the arrow's hover and its double click reach the page under them. */ .host.padhost, .host.card-layer, .host.sleep-layer { pointer-events: none; } .host.padhost > *, .host.card-layer > *, .host.sleep-layer > * { pointer-events: auto; } .osd.off, .osd.off * { pointer-events: none !important; } /* Home built ahead under Settings (main.ts prebuildHome): at 1 % for its first seconds, under the page in use — a layer at 0 is recorded but never rastered; at 1 % its tiles are made, and BACK finds them */ .host.down.warming { opacity: 0.01; } /* A SCREEN OUT OF SIGHT KEEPS NO LAYERS (18 Oct, MV-14): every will-change in a hidden screen still made a compositor layer (273 layers on a film's page, 117 of them the other screens' cursor pieces — sc samsung-slojevi), and the compositor walks every one on every frame. Hidden, a screen's boxes are painted with the page (nothing is painted at all); raised, main.ts takes the class off and the layers come back with the first paint. */ .host.away * { will-change: auto !important; } /* AND SHOWS NOTHING (18 Oct, the owner's photo on Live TV: a gold-rimmed rectangle across the middle — the hidden Playlists page's cursor). A child that says visibility: visible shows through a hidden parent (a cursor's dress, a panel's band, an up pill); out of sight, nothing of a screen may say so. */ .host.away, .host.away * { visibility: hidden !important; } /* ---- the guide (LiveTvScreen.Guide / GuideRow): one card, rows parted by a hairline, NOW lit ---- */ .live .track.flat { will-change: auto; } .live .grow { position: absolute; left: 0; width: 100%; box-sizing: border-box; } .live .grow .light { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: none; background: rgba(255,255,255,0.09); } .live .grow.now .light { display: block; } .live .grow .hair { position: absolute; left: 0; right: 0; top: 0; height: 2px; display: none; background: rgba(242,239,234,0.10); } .live .grow.under .hair { display: block; } .live .grow .time { position: absolute; left: 14px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 30px; font-weight: 500; letter-spacing: 0.2px; white-space: nowrap; color: rgba(242,239,234,0.68); } .live .grow.now .time { font-weight: 700; color: #E7C184; } .live .grow.next .time { color: rgba(242,239,234,0.84); } .live .grow.earlier .time { color: rgba(242,239,234,0.42); } .live .grow .rule { position: absolute; top: 50%; margin-top: -16.5px; width: 2px; height: 33px; background: rgba(150,160,178,0.45); } .live .grow .adot { position: absolute; top: 50%; margin-top: -6px; width: 12px; height: 12px; border-radius: 50%; display: none; background: #E7C184; } .live .grow .adot.on { display: block; } .live .grow .title { font-size: 30px; font-weight: 600; color: rgba(255,255,255,0.68); } .live .grow.now .title { font-weight: 700; color: #FFFFFF; } .live .grow.next .title { color: rgba(255,255,255,0.84); } .live .grow.earlier .title { color: rgba(242,239,234,0.42); } .live .grow .word { position: absolute; right: 18px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 30px; font-weight: 600; letter-spacing: 0.6px; white-space: nowrap; color: rgba(255,255,255,0.503); } .live .grow.now .word { font-weight: 700; color: #FFFFFF; } .live .grow.next .word { color: rgba(255,255,255,0.74); } .live .grow.earlier .word { color: rgba(255,255,255,0.311); } .live .grow .bar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; display: none; background: rgba(242,239,234,0.12); } .live .grow .bar.on { display: block; } .live .grow .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 0; background: rgba(231,193,132,0.9); } .live .noguide { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .live .grow.quiet .title { position: absolute; left: 14px; top: 0; bottom: 0; display: flex; align-items: center; font-weight: 500; color: rgba(242,239,234,0.5); } .live .guide .crossed { position: absolute; right: 16px; top: 8px; z-index: 1; font-size: 30px; color: rgba(231,193,132,0.8); } /* ---- the live full screen's chrome (screens/osd.ts — PlayerScreen.kt, OsdKeys.kt, NavyCrystal.kt) ---- */ .osd { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; opacity: 0; transition: opacity 200ms; z-index: 10; text-shadow: 0 3px 10px rgba(0,0,0,0.9); color: #FFFFFF; } .osd.up { opacity: 1; } .osd.off { visibility: hidden; } /* THE LIVE CHROME STAYS PAINTED (18 Oct, the same press): a layer of its own, painted once and kept at opacity 0 while asleep, so the full screen's first frame does not paint the panel too; only its words change (a zap, the clock). */ .osd:not(.fosd) { will-change: opacity; } .osd.off:not(.fosd) { visibility: visible; } .osd .ceiling { position: absolute; left: 0; top: 0; width: 100%; height: 260px; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.405) 10%, rgba(0,0,0,0.32) 20%, rgba(0,0,0,0.245) 30%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.125) 50%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.045) 70%, rgba(0,0,0,0.02) 80%, rgba(0,0,0,0.005) 90%, transparent); } .osd .floor { position: absolute; left: 0; right: 0; bottom: 0; top: 540px; background: linear-gradient(transparent, rgba(0,0,0,0.006) 10%, rgba(0,0,0,0.024) 20%, rgba(0,0,0,0.054) 30%, rgba(0,0,0,0.096) 40%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.216) 60%, rgba(0,0,0,0.294) 70%, rgba(0,0,0,0.384) 80%, rgba(0,0,0,0.486) 90%, rgba(0,0,0,0.6)); } .osd .keys { position: absolute; display: flex; align-items: flex-start; } .osd .okey { position: relative; box-sizing: border-box; margin-right: 20px; border-radius: 44px; display: flex; align-items: center; justify-content: center; z-index: 1; } .osd .okey .g { display: flex; filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.55)); } .osd .okey .g.gold, .osd .okey.lit .g.white { display: none; } .osd .okey.lit .g.gold { display: flex; } .osd .okey .kw { font-size: 36px; font-weight: 700; letter-spacing: 4px; color: #FFFFFF; } .osd .okey.lit .kw { color: #E7C184; } .osd .okey .word { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); white-space: nowrap; display: none; font-size: 28px; font-weight: 600; } .osd .okey.lit .word { display: block; } /* ONE TONE, TOP TO FOOT (18 Oct, the owner on the Samsung: the lane's row is the right blue, "the line under it is where the black begins"): the top's blue (0.16) stands over the whole panel instead of fading out down it, and the floor's shade stops where the panel begins (placeFloor), so the glass is the same material everywhere — as the guide sheet's is. */ .osd .panel { position: absolute; box-sizing: border-box; border-radius: 16px 16px 0 0; background: linear-gradient(to right, rgba(58,86,128,0.34), rgba(58,86,128,0)), linear-gradient(rgba(58,86,128,0.16), rgba(58,86,128,0.16)), rgba(0,0,0,0.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12); } .osd .panel::before { content: ""; position: absolute; left: 16px; right: 16px; top: 1px; height: 1.5px; background: rgba(255,255,255,0.1); } .osd .top { display: flex; align-items: center; } .osd .lane { display: flex; align-items: center; padding: 0 20px; border-radius: 12px; background: rgba(58,86,128,0.26); } .osd .lane .dot { width: 16px; height: 16px; border-radius: 50%; background: #E5484D; margin-right: 18px; flex: none; } .osd .lane .lg { flex: none; margin-right: 20px; border-radius: 8px; overflow: hidden; display: flex; } .osd .lane .lg img { width: 100%; height: 100%; object-fit: contain; } .osd .lane .num { font-size: 35px; font-weight: 600; margin-right: 14px; } .osd .lane .ln { width: 2px; height: 40px; background: rgba(255,255,255,0.7); margin-right: 16px; flex: none; } .osd .lane .nm { font-size: 40px; font-weight: 700; max-width: 1000px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .osd .clock { margin-left: auto; font-size: 33px; font-weight: 600; } .osd .rule { height: 2px; background: rgba(255,255,255,0.36); } .osd .guide { display: flex; padding: 30px 0 28px; } .osd .nowcol { flex: 1 1 0; min-width: 0; } .osd .head { font-size: 22px; font-weight: 600; letter-spacing: 0.5px; white-space: pre; } .osd .title { margin-top: 14px; font-size: 44px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .osd .prog { margin-top: 16px; display: flex; align-items: center; } .osd .prog .track { position: relative; flex: 1 1 0; height: 7px; border-radius: 3.5px; background: rgba(255,255,255,0.36); overflow: hidden; } .osd .prog .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #FFFFFF; transform-origin: 0 0; border-radius: 3.5px; } .osd .prog .left { margin-left: 20px; font-size: 24px; font-weight: 600; white-space: nowrap; } .osd .desc { margin-top: 16px; font-size: 26px; font-weight: 500; line-height: 37.7px; max-height: 75.4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .osd .upright { width: 2px; margin: 0 28px; background: rgba(255,255,255,0.42); flex: none; } .osd .nextcol { flex: none; } .osd .ntitle { margin-top: 14px; font-size: 35px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .osd .later { margin-top: 14px; font-size: 26px; font-weight: 500; white-space: pre; overflow: hidden; text-overflow: ellipsis; } /* ---- the guide sheet over the live full screen (screens/epgSheet.ts — PlayerScreen.kt EpgSheet, NavyCrystal.kt inkSideSheet): the picture shaded on the left, the ink glass 980 wide on the right, every word white ---- */ .epgsheet { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 12; color: #FFFFFF; text-shadow: 0 3px 10px rgba(0,0,0,0.9); } .epgsheet.off { visibility: hidden; } .epgsheet .dim { position: absolute; left: 0; top: 0; width: 938px; height: 1080px; background: rgba(0,0,0,0.25); } .epgsheet .edge { position: absolute; left: 938px; top: 0; width: 2px; height: 1080px; background: rgba(255,255,255,0.2); } .epgsheet .sheet { position: absolute; right: 0; top: 0; height: 1080px; box-sizing: border-box; background: linear-gradient(to right, rgba(58,86,128,0.3), rgba(58,86,128,0)), rgba(0,0,0,0.58); } .epgsheet .shead, .epgsheet .srule, .epgsheet .rail, .epgsheet .slist, .epgsheet .sfoot, .epgsheet .sempty { position: absolute; left: 48px; width: 884px; } .epgsheet .shead { height: 57px; display: flex; align-items: center; } .epgsheet .shead .lg { flex: none; margin-right: 18px; overflow: hidden; display: flex; } .epgsheet .shead .lg img { width: 100%; height: 100%; object-fit: contain; } .epgsheet .shead .num { font-size: 29px; font-weight: 600; margin-right: 12px; white-space: nowrap; } .epgsheet .shead .ln { flex: none; width: 2px; background: rgba(255,255,255,0.7); margin-right: 14px; } .epgsheet .shead .nm { flex: 1 1 0; min-width: 0; font-size: 35px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .epgsheet .srule { height: 2px; background: rgba(255,255,255,0.36); } .epgsheet .chip { position: absolute; top: 0; height: 78px; box-sizing: border-box; border-radius: 14px; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,0.8); } .epgsheet .chip .cw { font-size: 17px; line-height: 17px; font-weight: 600; letter-spacing: 2px; white-space: nowrap; } .epgsheet .chip .cn { margin-top: 6px; font-size: 28px; line-height: 28px; font-weight: 600; } .epgsheet .chip .thread { margin-top: 6px; width: 44px; height: 4px; border-radius: 4px; } .epgsheet .chip.lit { background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55); color: #FFFFFF; } .epgsheet .chip.lit .cn { font-weight: 700; } .epgsheet .chip.lit .thread { background: #E7C184; } .epgsheet .slist { overflow: hidden; } .epgsheet .sitem { position: absolute; left: 0; width: 100%; } .epgsheet .sday { font-size: 20px; line-height: 27px; font-weight: 600; letter-spacing: 3px; padding-bottom: 12px; white-space: nowrap; } .epgsheet .srow { position: relative; box-sizing: border-box; border-radius: 12px; background: rgba(255,255,255,0.07); display: flex; align-items: center; color: rgba(255,255,255,0.96); } .epgsheet .past .srow { color: rgba(255,255,255,0.86); } .epgsheet .now .srow, .epgsheet .next .srow, .epgsheet .lit .srow { color: #FFFFFF; } .epgsheet .now .srow { background: rgba(255,255,255,0.18); padding-bottom: 12px; } .epgsheet .lit .srow { background-image: linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.16)); box-shadow: inset 0 0 0 3px rgba(255,255,255,0.95); } .epgsheet .srow .hr { flex: none; font-size: 29px; font-weight: 500; white-space: nowrap; } .epgsheet .srow .sl { flex: none; width: 2px; background: rgba(255,255,255,0.55); margin-right: 20px; } .epgsheet .srow .mk { flex: none; display: flex; margin-right: 14px; } .epgsheet .srow .ti { flex: 1 1 0; min-width: 0; font-size: 29px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .epgsheet .now .srow .ti { font-size: 31px; } .epgsheet .now .srow .hr, .epgsheet .lit .srow .hr { font-weight: 600; } .epgsheet .now .srow .ti, .epgsheet .lit .srow .ti { font-weight: 700; } .epgsheet .srow .em { flex: none; margin-left: 16px; font-size: 21px; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; color: #FFFFFF; } .epgsheet .srow .pg { position: absolute; left: 136px; right: 22px; bottom: 10px; height: 5px; border-radius: 2.5px; background: rgba(255,255,255,0.36); overflow: hidden; } .epgsheet .srow .pf { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #FFFFFF; transform-origin: 0 0; } .epgsheet .sfoot { bottom: 0; display: flex; align-items: center; } .epgsheet .sfoot .okb { height: 40px; padding: 0 12px; border-radius: 10px; background: #FFFFFF; color: rgba(0,0,0,0.88); font-size: 20px; font-weight: 700; display: flex; align-items: center; text-shadow: none; } .epgsheet .sfoot .ow { margin-left: 16px; font-size: 29px; font-weight: 600; white-space: nowrap; } .epgsheet .sfoot .bk { margin-left: auto; font-size: 24px; font-weight: 600; color: rgba(255,255,255,0.85); white-space: pre; } .epgsheet .sempty { font-size: 29px; font-weight: 500; } /* ---- the digits of a channel number, top right over everything (ChannelKeys.kt NumberEntryPlate) ---- */ .dialplate { position: absolute; top: 64px; right: 64px; z-index: 20; box-sizing: border-box; padding: 24px 48px; background: rgba(0,0,0,0.56); border: 2px solid rgba(255,255,255,0.10); border-radius: 24px; font-size: 104px; line-height: 116px; font-weight: 800; letter-spacing: -2.4px; color: #FFFFFF; font-variant-numeric: tabular-nums; } /* ---- the film player's chrome (screens/filmOsd.ts — VodPlayerScreen.kt, NavyCrystal.kt) ---- */ .fosd .melt-top { position: absolute; left: 0; top: 0; width: 100%; height: 216px; /* MELT_CEILING 0.2 */ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.32) 20%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.02) 80%, transparent); } .fosd .melt-bottom { position: absolute; left: 0; right: 0; top: 670px; bottom: 0; /* MELT_FLOOR 0.62 */ background: linear-gradient(transparent, rgba(0,0,0,0.028) 20%, rgba(0,0,0,0.112) 40%, rgba(0,0,0,0.252) 60%, rgba(0,0,0,0.448) 80%, rgba(0,0,0,0.7)); } .fosd .ftitle { position: absolute; top: 72px; right: 88px; max-width: 820px; text-align: right; text-shadow: 0 3px 12px rgba(0,0,0,0.6); } .fosd .ftitle .name { font-size: 40px; font-weight: 600; letter-spacing: 0.5px; color: rgba(255,255,255,0.98); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fosd .ftitle .sub { font-size: 26px; font-weight: 400; letter-spacing: 0.5px; color: rgba(255,255,255,0.92); white-space: pre; overflow: hidden; text-overflow: ellipsis; } .fosd .fbar { position: absolute; left: 88px; right: 88px; bottom: 44px; box-sizing: border-box; padding: 24px 30px; background: rgba(0,0,0,0.62); border-radius: 20px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); text-shadow: none; } .fosd .railrow { display: flex; align-items: center; height: 44px; } .fosd .clock { flex: none; font-size: 30px; font-weight: 400; letter-spacing: 0.5px; color: #FFFFFF; } /* ob.word: Normal, 0.25 sp, figures as drawn */ .fosd .rail { position: relative; flex: 1 1 0; height: 44px; margin: 0 20px; } .fosd .rail .line { position: absolute; left: 0; right: 0; top: 16px; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.3); transition: transform 80ms; } .fosd .rail .played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: rgba(242,239,234,0.95); } .fosd .rail .knob { position: absolute; top: 8px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: #FFFFFF; transition: transform 80ms; } .fosd .rail.lit .line { transform: scaleY(1.1667); } /* RAIL 12 → 14 */ .fosd .rail.lit .knob { transform: scale(1.2143); } /* KNOB 28 → 34 */ .fosd .transport { margin-top: 20px; height: 96px; display: flex; align-items: center; justify-content: center; } .fosd .pkey { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16); border-radius: 14px; color: #FFFFFF; } .fosd .pkey.word { height: 64px; padding: 0 24px; font-size: 26px; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; } .fosd .pkey.round { width: 96px; height: 96px; border-radius: 48px; margin: 0 28px; z-index: 0; } .fosd .pkey .g { display: flex; } .fosd .pkey .g.gold, .fosd .pkey.lit .g.white { display: none; } .fosd .pkey.lit .g.gold { display: flex; } .fosd .pkey.lit { color: #E7C184; /* glassDisc */ background: linear-gradient(rgba(58,86,128,0.25), rgba(58,86,128,0)), linear-gradient(to right, rgba(58,86,128,0.45), rgba(58,86,128,0)), rgba(0,0,0,0.5); box-shadow: inset 0 0 0 4px rgba(231,193,132,0.85); } .fosd .pkey.round.lit::before { content: ""; position: absolute; left: -12.5%; top: -2.5%; width: 125%; height: 125%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(231,193,132,0.3), rgba(231,193,132,0)); } /* ob.word's tracking (0.25 sp) on every word of the player's own face; MP.type.label's figures tabular (16 Oct, the stick's text boxes: "− 1 MIN" 87, "SEASON 1" 130 — only with them) */ .fpop .prow .pw, .fpop .pstep, .fpop .pread, .fpop .pmore, .fcue .cl, .fpill .pw { letter-spacing: 0.5px; } .fosd .qbadge, .finfo .qbadge, .finfo .ihead .iw, .finfo .ikick, .finfo .ilane .ll, .finfo .icast, .fchoose .chead .word, .fchoose .cwords .sw, .fchoose .cw .code, .fchoose .mark, .fchoose .cfoot .ok { font-variant-numeric: tabular-nums; } /* ---- MV-5: the whole chrome (VodPlayerScreen.kt TransportRow, TrackPopup, SubsPanel; VodPlayerSheets.kt) ---- */ .fosd { transition: opacity 150ms; } /* MP.motion.appear */ /* the transport: CC · AUDIO on the left (12 apart), the three in the middle (28), ASPECT and the grade on the right (20) */ .fosd .transport { position: relative; display: block; } .fosd .transport .tl, .fosd .transport .tc, .fosd .transport .tr { position: absolute; top: 0; height: 96px; display: flex; align-items: center; } .fosd .transport .tl { left: 0; } .fosd .transport .tl .pkey + .pkey { margin-left: 12px; } .fosd .transport .tc { left: 50%; transform: translateX(-50%); } .fosd .transport .tr { right: 0; } .fosd .pkey.sq { width: 76px; height: 76px; border-radius: 14px; } /* TRACK_KEY_PX, ISLAND_RADIUS_PX */ .fosd .qbadge, .finfo .qbadge { display: inline-flex; align-items: center; box-sizing: border-box; height: 38px; padding: 0 10px; border-radius: 8px; background: rgba(0,0,0,0.62); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); font-size: 22px; line-height: 22px; font-weight: 600; letter-spacing: 1px; color: rgba(242,239,234,0.95); } /* HouseBadge tall */ .fosd .transport .tr .qbadge { margin-left: 20px; } /* the top keys: ⓘ held while INFO stands (the disc stays, the word goes); the others step aside */ .fosd .okey.held .g.white { display: none; } .fosd .okey.held .g.gold { display: flex; } .fosd.info .okey:not(.info) { opacity: 0; } .fosd.info .okey .word { display: none; } .fosd.info .ftitle, .fosd.info .fbar, .fosd.info .melt-bottom, .fosd.choosing .ftitle { visibility: hidden; } /* hushWhile: the subtitle card reads alone — the top chrome quiet to a quarter and softened (blur 8 dp) */ .fosd .keys, .fosd .ftitle { transition: opacity 150ms; } .fosd.hush .keys, .fosd.hush .ftitle { opacity: 0.25; filter: blur(10px); } .fosd.hush .cursor { opacity: 0.25; } /* the cards above the bar: smoke glass, 18 in, the foot 262 above the floor (POPUP_LIFT_PX) */ .fpop { position: absolute; bottom: 262px; box-sizing: border-box; padding: 18px; border-radius: 16px; z-index: 2; background: rgba(0,0,0,0.62); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); text-shadow: none; } .fpop.off { display: none; } .fpop .phead { height: 36px; line-height: 36px; font-size: 26px; font-weight: 600; letter-spacing: 2px; color: #FFFFFF; white-space: nowrap; overflow: hidden; margin-bottom: 12px; } .fpop .pwin { position: relative; overflow: hidden; } .fpop .plist { position: absolute; left: 0; right: 0; top: 0; } .fpop .prow { position: relative; box-sizing: border-box; height: 56px; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; } .fpop .prow.chosen { background: rgba(255,255,255,0.1); } /* A_KEY_GROUND */ .fpop .prow .pw { flex: 1 1 0; min-width: 0; font-size: 34px; font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; } .fpop .prow .pdot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #E7C184; } .fpop .prow.lit, .fpop .pstep.lit { /* glassDisc: no glow off a round key */ background: linear-gradient(rgba(58,86,128,0.25), rgba(58,86,128,0)), linear-gradient(to right, rgba(58,86,128,0.45), rgba(58,86,128,0)), rgba(0,0,0,0.5); box-shadow: inset 0 0 0 4px rgba(231,193,132,0.85); } .fpop .psync { box-sizing: border-box; height: 76px; padding: 0 12px; display: flex; align-items: center; } .fpop .pstep { flex: none; box-sizing: border-box; height: 56px; padding: 0 18px; border-radius: 10px; display: flex; align-items: center; background: rgba(0,0,0,0.45); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16); font-size: 28px; font-weight: 600; color: #FFFFFF; white-space: nowrap; } .fpop .pread { flex: 1 1 0; min-width: 0; margin: 0 12px; text-align: center; font-size: 28px; font-weight: 600; color: #FFFFFF; white-space: pre; overflow: hidden; } .fpop .pmore { padding-top: 12px; height: 34px; line-height: 34px; text-align: center; font-size: 20px; color: rgba(255,255,255,0.85); } /* INFO: under ⓘ (TitleInfoSheet) — 1236 wide at (88, 186), smoke glass with corners 20, the notch pointing at the key */ .finfo { position: absolute; left: 88px; top: 186px; width: 1236px; box-sizing: border-box; padding: 30px 44px 34px; border-radius: 20px; background: rgba(0,0,0,0.62); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); text-shadow: none; z-index: 2; color: #FFFFFF; } .finfo.off { display: none; } .finfo .notch { position: absolute; left: 392px; top: -16px; width: 36px; height: 17px; display: flex; } /* infoKeyCentrePx 410 − 18 */ .finfo .ihead { display: flex; align-items: center; height: 40px; } .finfo .ihead .iw { flex: 1 1 0; font-size: 22px; line-height: 40px; font-weight: 600; letter-spacing: 4px; color: rgba(255,255,255,0.92); } .finfo .itop { display: flex; margin-top: 16px; } .finfo .iposter { position: relative; flex: none; width: 240px; height: 360px; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,0.4); } .finfo .iposter::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); } .finfo .iposter .art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .finfo .iposter .art.in { opacity: 1; } .finfo .iside { flex: 1 1 0; min-width: 0; margin-left: 40px; padding-top: 6px; } .finfo .ikick { height: 40px; line-height: 40px; font-size: 22px; font-weight: 600; letter-spacing: 2px; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .finfo .ititle { margin-top: 16px; height: 78px; line-height: 78px; font-size: 56px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .finfo .iorigin { margin-top: 16px; height: 40px; display: flex; align-items: center; } .finfo .iorigin .io { min-width: 0; margin-right: 20px; font-size: 26px; line-height: 40px; font-weight: 600; color: rgba(255,255,255,0.95); white-space: pre; overflow: hidden; text-overflow: ellipsis; } .finfo .rbadge { display: inline-flex; flex: none; align-items: center; box-sizing: border-box; height: 38px; padding: 0 10px; border-radius: 8px; background: rgba(0,0,0,0.62); box-shadow: inset 0 0 0 2px rgba(231,193,132,0.5); font-size: 22px; line-height: 22px; font-weight: 600; letter-spacing: 1px; color: rgba(231,193,132,0.95); font-variant-numeric: tabular-nums; } .finfo .rbadge i { display: flex; margin-right: 8px; } .finfo .rbadge b { font-weight: 600; } .finfo .ilanes { margin-top: 28px; display: flex; } .finfo .ilane { flex: 1 1 0; min-width: 0; height: 100px; box-sizing: border-box; padding-left: 16px; border-radius: 14px; display: flex; align-items: center; background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2); } .finfo .ilane + .ilane { margin-left: 18px; } .finfo .ilane .ln { flex: none; width: 3px; height: 60px; margin-right: 16px; border-radius: 3px; background: rgba(255,255,255,0.55); } .finfo .ilane .lc { min-width: 0; } .finfo .ilane .ll { height: 24px; line-height: 24px; font-size: 18px; font-weight: 600; letter-spacing: 3px; color: rgba(255,255,255,0.85); white-space: nowrap; } .finfo .ilane .lv { margin-top: 8px; height: 47px; line-height: 47px; font-size: 34px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .finfo .irule { margin-top: 32px; height: 2px; background: rgba(255,255,255,0.3); } /* the plot, calibrated on the stick (16 Oct, Rabbit Hole S01E01): its two lines are 1139 and 1133 px there, 1153 and 1150 on this engine (Android's hinted advances at 27 px) — the same words must break in the same places */ .finfo .iplot { margin-top: 28px; font-size: 27px; line-height: 40px; font-weight: 500; letter-spacing: -0.15px; max-height: 120px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .finfo .iplot.quiet { color: rgba(255,255,255,0.8); } .finfo .icast { margin-top: 24px; height: 40px; line-height: 40px; font-size: 20px; font-weight: 600; letter-spacing: 4px; color: rgba(255,255,255,0.9); } .finfo .ichips { margin-top: 16px; height: 48px; display: flex; overflow: hidden; } .finfo .ichip { flex: none; height: 48px; box-sizing: border-box; padding: 0 18px; margin-right: 12px; border-radius: 12px; display: flex; align-items: center; background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3); font-size: 24px; font-weight: 600; white-space: nowrap; } .finfo .ifoot { margin-top: 32px; height: 44px; display: flex; align-items: center; } .finfo .ifoot .okk { flex: none; width: 60px; height: 44px; border-radius: 10px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #14161C; } .finfo .ifoot .fc { margin-left: 16px; font-size: 28px; font-weight: 600; } .finfo .ifoot .fb { margin-left: 24px; font-size: 24px; font-weight: 600; color: rgba(255,255,255,0.8); white-space: pre; } /* THE EPISODE CHOOSER (EpisodeChooserSheet): the right side, 940 × 800, the guide sheet's glass */ .fchoose { position: absolute; left: 980px; top: 0; width: 940px; height: 800px; box-sizing: border-box; padding: 0 48px; z-index: 2; background: linear-gradient(to right, rgba(58,86,128,0.3), rgba(58,86,128,0)), rgba(0,0,0,0.58); text-shadow: none; overflow: hidden; } .fchoose.off { display: none; } .fchoose .chead { margin-top: 44px; height: 40px; display: flex; align-items: center; } .fchoose .chead .cubes { position: relative; flex: none; width: 16.5px; height: 16.5px; margin-right: 24px; } .fchoose .chead .cubes i { position: absolute; width: 6.5px; height: 6.5px; border-radius: 1.5px; background: rgba(231,193,132,0.95); } .fchoose .chead .cubes i:nth-child(2) { left: 10px; } .fchoose .chead .cubes i:nth-child(3) { top: 10px; } .fchoose .chead .cubes i:nth-child(4) { left: 10px; top: 10px; } .fchoose .chead .word { flex: 1 1 0; font-size: 20px; line-height: 40px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: pre; } .fchoose .chead .show { max-width: 360px; font-size: 24px; line-height: 40px; font-weight: 600; color: rgba(255,255,255,0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; } .fchoose .crule { margin-top: 24px; height: 2px; background: rgba(255,255,255,0.3); } .fchoose .cseasons { margin-top: 28px; height: 51px; display: flex; align-items: center; } /* 40 + 8 + the 3 px thread */ .fchoose .cwords { flex: 1 1 0; display: flex; align-self: flex-start; } .fchoose .cwords .sw { position: relative; margin-right: 40px; font-size: 22px; line-height: 40px; font-weight: 600; letter-spacing: 3px; color: rgba(242,239,234,0.5); white-space: nowrap; } .fchoose .cwords .sw.on { color: rgba(255,255,255,0.98); } .fchoose .cwords .sw.on::after { content: ""; position: absolute; left: 0; right: 3px; top: 48px; height: 3px; border-radius: 1.5px; background: rgba(231,193,132,0.95); } .fchoose .ccount { font-size: 20px; line-height: 40px; color: rgba(242,239,234,0.55); white-space: nowrap; } .fchoose .cwin { position: absolute; left: 48px; right: 48px; top: 217px; height: 499px; overflow: hidden; } .fchoose .clist { position: absolute; left: 0; right: 0; top: 0; } .fchoose .crow { position: relative; box-sizing: border-box; height: 94px; margin-bottom: 10px; padding: 10px; border-radius: 10px; display: flex; align-items: center; background: rgba(0,0,0,0.45); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16); } .fchoose .crow.playing { background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2); } .fchoose .crow.lit { background: linear-gradient(rgba(58,86,128,0.25), rgba(58,86,128,0)), linear-gradient(to right, rgba(58,86,128,0.45), rgba(58,86,128,0)), rgba(0,0,0,0.5); box-shadow: inset 0 0 0 4px rgba(231,193,132,0.85); } .fchoose .still { position: relative; flex: none; width: 131px; height: 74px; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,0.4); } .fchoose .still .art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; } .fchoose .still .art.in { opacity: 1; } .fchoose .still .rail { position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px; border-radius: 1.5px; overflow: hidden; background: rgba(255,255,255,0.16); } .fchoose .still .rail .fill { display: block; height: 100%; background: rgba(231,193,132,0.95); } .fchoose .cw { flex: 1 1 0; min-width: 0; margin-left: 20px; } .fchoose .cw .code { height: 22px; line-height: 22px; font-size: 16px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); } .fchoose .cw .name { margin-top: 6px; height: 30px; line-height: 30px; font-size: 22px; font-weight: 500; color: rgba(242,239,234,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fchoose .crow.lit .cw .name { color: rgba(255,255,255,0.98); } .fchoose .crow.playing .cw .name { height: 33px; line-height: 33px; font-size: 24px; font-weight: 700; color: rgba(255,255,255,0.98); } .fchoose .mark { flex: none; margin-left: 20px; font-size: 14px; font-weight: 600; letter-spacing: 3px; color: rgba(242,239,234,0.8); white-space: nowrap; } .fchoose .mark.len { font-size: 18px; letter-spacing: 0; color: rgba(242,239,234,0.55); } .fchoose .cfoot { position: absolute; left: 48px; top: 736px; display: flex; align-items: center; height: 40px; } .fchoose .cfoot .ok { font-size: 16px; font-weight: 600; letter-spacing: 1px; color: rgba(231,193,132,0.95); margin-right: 14px; } .fchoose .cfoot .key { height: 40px; line-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 22px; font-weight: 500; color: rgba(242,239,234,0.9); background: rgba(0,0,0,0.48); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12); } /* the subtitle on the picture (CueLines): 50 SemiBold in the house's face, Manrope (the owner, 16 Oct: the approved face — the stick still draws its cues in the device face, Roboto), 1.25 em, 200 in from the sides, its foot 80 (270 under the chrome) */ /* the cue (CueLines): Settings · Subtitles writes size, weight and plate as variables; a plate hugs each LINE */ .fcue { position: absolute; left: 200px; right: 200px; bottom: 80px; z-index: 11; text-align: center; pointer-events: none; display: flex; flex-direction: column; align-items: center; } .fcue .cl { font-size: var(--cue-size, 50px); line-height: var(--cue-line, 63px); font-weight: var(--cue-weight, 600); color: #FFFFFF; text-shadow: 0 3px 19px rgba(0,0,0,0.85); white-space: pre-wrap; max-width: 100%; } .fcue.plated .cl { background: var(--cue-plate); padding: var(--cue-plate-pad); border-radius: var(--cue-plate-radius); } /* the pill (NextPrompt): bottom right, 76 tall, smoke glass, the gold line counting along its foot. Not scoped to .vod (18 Oct): the recording player on Live TV wears the same OSD, and there the unstyled pill stood as a white ▶ in the top-left corner of the Live page. */ .fpill { position: absolute; right: 88px; bottom: 72px; height: 76px; box-sizing: border-box; padding: 0 30px; border-radius: 14px; z-index: 11; display: flex; align-items: center; background: rgba(0,0,0,0.62); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); opacity: 0; visibility: hidden; transition: opacity 150ms, visibility 0s 150ms; } .fpill.up { opacity: 1; visibility: visible; transition: opacity 150ms; } .fpill .tri { display: flex; margin-right: 16px; } .fpill .pw { font-size: 28px; font-weight: 600; color: rgba(255,255,255,0.98); white-space: nowrap; font-variant-numeric: tabular-nums; } .fpill .pline { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 3px; border-radius: 1.5px; overflow: hidden; background: rgba(242,239,234,0.18); } .fpill .pfill { display: block; width: 100%; height: 100%; background: #E7C184; transform-origin: 0 0; transform: scaleX(0); } /* ---- the Catch Up panel (screens/catchUpPanel.ts — CatchUpPanel.kt, CatchUpPicker.kt) ---- */ .cpanel { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 9; background: #000; overflow: hidden; color: #F2EFEA; } .cpanel.off { visibility: hidden; } .cpanel .room { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; } .cpanel .veil { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: rgba(0,0,0,0.59); } .cpanel .ident { position: absolute; top: 50px; right: 60px; display: flex; align-items: center; } .cpanel .names { width: 340px; text-align: right; } .cpanel .ident .name { font-size: 26px; font-weight: 600; line-height: 1.3; color: rgba(242,239,234,0.95); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 67.6px; } .cpanel .reach { margin-top: 10px; font-size: 22px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; } .cpanel .plate { margin-left: 16px; width: 200px; height: 200px; border-radius: 14px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; } .cpanel .plate .mark { width: 160px; height: 160px; object-fit: contain; } .cpanel .plate .markword { font-size: 26px; font-weight: 700; text-align: center; padding: 0 16px; } .cpanel .head { position: absolute; left: 70px; top: 56px; width: 260px; height: 62px; display: flex; align-items: center; } .cpanel .head .cubes { position: relative; margin-left: 19px; width: 16.5px; height: 16.5px; flex: none; } .cpanel .head .cubes i { position: absolute; width: 6.5px; height: 6.5px; border-radius: 1.5px; background: rgba(231,193,132,0.95); } .cpanel .head .cubes i:nth-child(2) { left: 10px; } .cpanel .head .cubes i:nth-child(3) { top: 10px; } .cpanel .head .cubes i:nth-child(4) { left: 10px; top: 10px; } .cpanel .head .word { margin-left: 15px; font-size: 22px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); } .cpanel .days { position: absolute; left: 70px; top: 118px; width: 260px; bottom: 0; overflow: hidden; } .cpanel .track { position: absolute; left: 0; top: 0; width: 100%; } .cpanel .drow { position: absolute; left: 0; width: 260px; height: 64px; border-radius: 12px; background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .cpanel .drow.chosen { background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)), rgba(0,0,0,0.58); } .cpanel .drow .thread { position: absolute; left: 8px; top: 13px; bottom: 13px; width: 4px; border-radius: 4px; background: rgba(231,193,132,0.95); display: none; } .cpanel .drow.chosen .thread { display: block; } .cpanel .drow .dw { position: absolute; left: 26px; top: 0; line-height: 64px; font-size: 26px; font-weight: 500; color: rgba(242,239,234,0.9); } .cpanel .drow.chosen .dw { color: #FFFFFF; } .cpanel .drow .dn { position: absolute; right: 18px; top: 0; line-height: 64px; font-size: 18px; letter-spacing: 2px; color: rgba(242,239,234,0.45); } .cpanel .tiles { position: absolute; left: 354px; top: 56px; width: 425px; height: 1024px; overflow: hidden; } .cpanel .ctile { position: absolute; left: 18px; width: 389px; height: 219px; border-radius: 8px; overflow: hidden; opacity: 0.55; transition: opacity 100ms; } .cpanel .ctile.on { opacity: 1; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .cpanel .ctile .mk { position: absolute; left: 0; right: 0; top: 0; bottom: 37px; display: flex; align-items: center; justify-content: center; } .cpanel .ctile .mk img { width: 112px; height: 112px; object-fit: contain; } .cpanel .ctile .mw { font-size: 26px; font-weight: 700; text-align: center; padding: 0 20px; } .cpanel .ctile .scrim { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; padding: 10px 16px; background: rgba(0,0,0,0.62); } .cpanel .ctile .tm { display: block; font-size: 22px; font-weight: 600; color: rgba(231,193,132,0.95); white-space: nowrap; } .cpanel .ctile .tt { display: block; font-size: 24px; font-weight: 600; color: rgba(242,239,234,0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cpanel .ctile.gone .tm, .cpanel .ctile.gone .tt { color: rgba(242,239,234,0.55); } .cpanel .ctile .badge { position: absolute; top: 10px; right: 10px; height: 30px; line-height: 30px; padding: 0 10px; border-radius: 6px; background: rgba(0,0,0,0.62); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); font-size: 18px; font-weight: 600; letter-spacing: 1px; color: rgba(242,239,234,0.95); } .cpanel .ctile .badge.gold { box-shadow: inset 0 0 0 2px rgba(231,193,132,0.5); color: rgba(231,193,132,0.95); } .cpanel .ctile .adot { position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: #E7C184; } .cpanel .ctile .prog { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: #E7C184; transform-origin: 0 0; } .cpanel .ctile.door { height: 96px; opacity: 1; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, rgba(0,0,0,0.58); } .cpanel .ctile.door .mk, .cpanel .ctile.door .tm, .cpanel .ctile.door .badge, .cpanel .ctile.door .adot, .cpanel .ctile.door .prog { display: none; } .cpanel .ctile.door .scrim { top: 0; background: none; display: flex; align-items: center; justify-content: center; padding: 0; } .cpanel .ctile.door .tt { font-size: 22px; letter-spacing: 3px; color: rgba(231,193,132,0.95); } .cpanel .empty { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 30px; line-height: 40px; font-weight: 500; color: rgba(255,255,255,0.80); padding: 0 24px; } /* EmptyDay: MP.type.item, MP.colour.body */ .cpanel .picker { position: absolute; left: 0; top: 18px; width: 425px; height: 988px; box-sizing: border-box; border-radius: 16px; background: rgba(0,0,0,0.55); box-shadow: inset 0 0 0 2px rgba(231,193,132,0.55); display: none; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .cpanel .picker[style=""] { display: flex; } .cpanel .picker .edge { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,0.07); } .cpanel .picker .ph { font-size: 30px; font-weight: 500; letter-spacing: 3.6px; color: #E7C184; text-transform: uppercase; } .cpanel .picker .pt { margin-top: 16px; font-size: 104px; line-height: 116px; font-weight: 700; letter-spacing: -2.4px; color: #F2EFEA; font-variant-numeric: tabular-nums; } .cpanel .picker .pd { margin-top: 8px; font-size: 30px; color: rgba(242,239,234,0.7); } .cpanel .picker .hint { margin-top: 32px; font-size: 30px; color: rgba(242,239,234,0.55); white-space: nowrap; } .cpanel .desc { position: absolute; left: 803px; top: 518px; right: 60px; } .cpanel .dhead { font-size: 22px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cpanel .dtitle { margin-top: 18px; font-size: 40px; font-weight: 700; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cpanel .drule { margin-top: 18px; height: 2px; background: rgba(242,239,234,0.12); } .cpanel .dplot { margin-top: 18px; font-size: 28px; line-height: 39.76px; color: rgba(242,239,234,0.92); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; max-height: 318.08px; } .cpanel .dplot.none { color: rgba(242,239,234,0.55); } .cpanel .okhint { margin-top: 34px; display: flex; align-items: center; } .cpanel .okhint .ok { font-size: 16px; font-weight: 600; letter-spacing: 1px; color: rgba(231,193,132,0.95); margin-right: 14px; } .cpanel .okhint .key { height: 40px; line-height: 40px; padding: 0 16px; border-radius: 8px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); font-size: 22px; font-weight: 500; color: rgba(242,239,234,0.9); } /* ---- Live TV's searches: the letters typed in place (screens/livetv.ts, LT-8) ---- */ .live .bar .search .hint, .live .fsearch .hint { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .live .typing { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-weight: 600; letter-spacing: inherit; color: #FFFFFF; caret-color: #E7C184; } .live .bar .search.held { box-shadow: inset 0 0 0 2px rgba(231,193,132,0.95); } .live .bar .search.held .hint, .live .fsearch.held .hint { color: #FFFFFF; font-weight: 600; } /* ============================================================ MOVIES AND SERIES — LibraryScreen.kt, sketch B (frame px; the measures are written by screens/library.ts) ============================================================ */ .lib { background: #020202; color: #F2EFEA; } .lib .room, .lib .veil { left: 0; top: 0; width: 1920px; height: 1080px; transition: opacity 450ms; } /* The wash is laid out at half size and the compositor doubles it: the TV rasters a quarter of the pixels (measured: the full-size wash cost 85 ms of every entry). */ .lib .wash { left: 0; top: 0; width: 960px; height: 540px; transition: opacity 450ms; transform: scale(2); transform-origin: 0 0; } .lib .veil { background: rgba(0,0,0,0.44); } .lib .room.away, .lib .veil.away { opacity: 0; } .lib .wash { opacity: 0; will-change: opacity, transform; } .lib .wash.up { opacity: var(--lib-wash, 0.2); } /* WASH_ALPHA × Settings · Backdrop intensity */ .lib .wash img { position: absolute; left: 0; top: 0; width: 960px; height: 540px; } .lib .wash .cover { object-fit: cover; } .lib .wash .whole { object-fit: contain; } .lib .track { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; } /* the bar (MpTopBar): the words as Live TV's, the search plate and the mark at the right */ .lib .bar { display: flex; align-items: center; } .lib .bar .word { flex: none; padding: 14px 22px; margin-right: 64px; font-size: 36px; font-weight: 600; letter-spacing: -0.2px; color: rgba(242,239,234,0.59); white-space: nowrap; position: relative; } .lib .bar .word.chosen { font-weight: 700; color: #F2EFEA; } .lib .bar .word.chosen::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 8px; height: 4px; background: #E7C184; } .lib .bar .word.lit { color: #E7C184; } .lib .bar .spring { flex: 1 1 0; } .lib .bar .search { flex: none; display: flex; align-items: center; box-sizing: border-box; padding: 0 24px; margin-right: 32px; border-radius: 38px; background: rgba(0,0,0,0.50); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); position: relative; } .lib .bar .search .glyph { display: flex; flex: none; } .lib .bar .search .hint { margin-left: 16px; flex: 1 1 0; min-width: 0; overflow: hidden; font-size: 30px; font-weight: 500; color: rgba(242,239,234,0.38); white-space: nowrap; text-overflow: ellipsis; } .lib .bar .search.held .hint { color: #FFFFFF; } .lib .bar .search.held { box-shadow: inset 0 0 0 2px rgba(231,193,132,0.95); } .lib .bar .mark { flex: none; display: block; } /* the rail */ .lib .rail .head { position: absolute; left: 0; top: 0; width: 100%; height: 58px; display: flex; align-items: center; padding-left: 19px; box-sizing: border-box; } .lib .rail .head .cubes { position: relative; width: 16.5px; height: 16.5px; flex: none; } .lib .rail .head .cubes i { position: absolute; width: 6.5px; height: 6.5px; border-radius: 1.5px; background: rgba(231,193,132,0.95); } .lib .rail .head .cubes i:nth-child(2) { left: 10px; } .lib .rail .head .cubes i:nth-child(3) { top: 10px; } .lib .rail .head .cubes i:nth-child(4) { left: 10px; top: 10px; } .lib .rail .head .hw { margin-left: 15px; font-size: 25px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; } .lib .rail .headline { position: absolute; left: 4px; right: 4px; top: 56px; height: 2px; background: rgba(242,239,234,0.12); } .lib .folders { overflow: hidden; } .lib .frow { position: absolute; left: 0; width: 100%; height: 68px; box-sizing: border-box; border-radius: 12px; background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, var(--lane, transparent), rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .lib .frow.chosen { background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)), var(--lane, transparent), rgba(0,0,0,0.58); } .lib .frow .thread { position: absolute; left: 8px; top: 13px; bottom: 13px; width: 4px; border-radius: 4px; background: rgba(231,193,132,0.95); display: none; } .lib .frow.chosen .thread { display: block; } .lib .frow .fn { position: absolute; left: 26px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 26px; font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; } .lib .frow .laneline { position: absolute; top: 50%; margin-top: -16.5px; width: 2px; height: 33px; background: rgba(150,160,178,0.45); } .lib .frow .count { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; color: #FFFFFF; font-variant-numeric: tabular-nums; } .lib .frow.chosen .count { color: #E7C184; } .lib .fsearch { display: flex; align-items: center; padding: 0 24px; background: rgba(0,0,0,0.58); } .lib .fsearch .glyph { display: flex; flex: none; } .lib .fsearch .hint { margin-left: 16px; flex: 1 1 0; min-width: 0; overflow: hidden; font-size: 30px; font-weight: 700; color: rgba(242,239,234,0.38); white-space: nowrap; text-overflow: ellipsis; } .lib .fsearch.held .hint { color: #FFFFFF; } .lib .typing { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; letter-spacing: inherit; color: #FFFFFF; caret-color: #E7C184; } /* the shelf's row */ .lib .sortrow { display: flex; align-items: center; } .lib .pill { position: relative; flex: none; height: 68px; box-sizing: border-box; border-radius: 12px; display: flex; align-items: center; background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .lib .sortpill { padding: 0 26px; margin-right: 16px; } .lib .sortpill .pw { font-size: 26px; font-weight: 600; color: #FFFFFF; white-space: nowrap; } .lib .sortpill .chev { margin-left: 22px; display: block; } .lib .lines { width: 68px; justify-content: center; margin-right: 24px; } .lib .pill .g { display: flex; } .lib .pill .g.on, .lib .lines.open .g.off, .lib .later.chosen .g.off { display: none; } .lib .lines.open .g.on, .lib .later.chosen .g.on { display: flex; } .lib .later { padding: 0 26px; } .lib .later .lw { margin-left: 16px; font-size: 26px; font-weight: 500; color: rgba(242,239,234,0.9); white-space: nowrap; } .lib .later.chosen { background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)), rgba(0,0,0,0.58); } .lib .later.chosen .lw { color: #FFFFFF; } .lib .tally { margin-left: auto; font-size: 24px; font-weight: 400; color: rgba(242,239,234,0.62); white-space: nowrap; } .lib .sortmenu { z-index: 3; box-sizing: border-box; padding: 24px; border-radius: 12px; background: rgba(0,0,0,0.62); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .lib .sortmenu .ml { padding: 8px 24px 16px; font-size: 20px; letter-spacing: 3px; color: rgba(231,193,132,0.62); } .lib .sortmenu .mrow { position: relative; height: 88px; margin-bottom: 8px; display: flex; align-items: center; padding: 0 24px; border-radius: 12px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .lib .sortmenu .mw { flex: 1 1 0; font-size: 26px; font-weight: 500; color: rgba(242,239,234,0.9); } .lib .sortmenu .mrow.chosen .mw { font-weight: 600; color: #E7C184; } .lib .sortmenu .dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: #E7C184; } .lib .sortmenu .mrow.chosen .dot { display: block; } /* the posters: bare on the room; under the cursor four percent up and the gold line, the rest a step back */ .lib .grid { overflow: hidden; } .lib .pcard { position: absolute; left: 0; top: 0; } /* the dim is a state flip, no fade: a fade lifts every card into a layer */ .lib .grid.held .pcard { opacity: 0.86; } /* DIMMED_PRESENCE */ .lib .grid.held .pcard.on { opacity: 1; } /* scale(1) at rest for good — a poster that gains its transform on the press lays the page out again and works out every layer's inputs anew (20 Oct, measured on Home's cards: 13–19 ms of a step); one that has it only changes it. */ .lib .pcard .tile { position: relative; display: block; width: 100%; border-radius: 8px; overflow: hidden; background: rgba(27,40,62,0.62); transform: scale(1); } .lib .pcard.on .tile { transform: scale(1.04); box-shadow: 0 0 0 4px #E7C184; } /* POSTER_LIFT, the gold line */ .lib .pcard .tile img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .lib .pcard .tile img.in { opacity: 1; } .lib .pcard .tile.art::after { content: attr(data-t); position: absolute; left: 16px; right: 16px; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 26px; font-weight: 700; color: rgba(242,239,234,0.8); } .lib .pcard .star { position: absolute; left: 10px; top: 10px; height: 36px; padding: 0 12px; display: none; align-items: center; border-radius: 8px; background: rgba(0,0,0,0.74); box-shadow: inset 0 0 0 2px rgba(231,193,132,0.6); } .lib .pcard .star.on { display: flex; } .lib .pcard .rating { position: absolute; right: 10px; top: 10px; height: 36px; padding: 0 12px; display: flex; align-items: center; border-radius: 8px; background: rgba(0,0,0,0.74); box-shadow: inset 0 0 0 2px rgba(231,193,132,0.6); } .lib .pcard .rating i { display: flex; margin-right: 8px; } .lib .pcard .rating b { font-size: 22px; font-weight: 600; letter-spacing: 0.5px; color: #FFFFFF; } .lib .pcard .cap { display: block; margin-top: 14px; font-size: 25px; line-height: 32px; font-weight: 600; color: #FFFFFF; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lib .pcard .yr { display: block; height: 28px; font-size: 22px; line-height: 28px; font-weight: 500; color: rgba(255,255,255,0.88); text-align: center; } .lib .grid .empty { position: absolute; left: 0; right: 0; top: 200px; text-align: center; font-size: 34px; font-weight: 600; color: rgba(242,239,234,0.8); } /* ============================================================ ONE FILM — MovieDetailScreen.kt + DetailParts.kt (frame px). The crystal is the house's: black 0.58, the white hairline 0.14, white 0.07 on the top edge; the gold is the cursor's. ============================================================ */ .film { background: #020202; color: #F2EFEA; } /* A line set shorter than the face (atPx: 1.12 of the size) stands at the face's own height on Android — measured on the TV's screenshot (debug/tv/12-film-page.png): the eyebrow's middle at 104, the headline's floor at 231 — so the single lines here keep `normal` (Manrope: 1.366 of the size). */ .film .froom { left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; } .film .froom .still { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; opacity: 0; transition: opacity 1200ms linear; will-change: transform; } /* CROSSFADE_MILLIS; the breath moves the still itself (18 Oct); a 960 × 540 canvas scaled up (MV-14) */ .film .froom .still.up { opacity: var(--still, 0.58); } /* BACKDROP_ALPHA × Settings · Backdrop intensity */ /* The house room (no still): its own picture, 1280 × 720 scaled 1.5 times — a texture, not 40 tiles of CSS background (film.ts, FS-3). Only its opacity changes; the stills cover it when there are stills. */ .film .froom .hroom { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform: scale(1.5); transform-origin: 0 0; will-change: transform; opacity: 0; } .film .froom.house .hroom { opacity: var(--still, 0.58); } /* The two scrims — across: #020202 1 → 0.47 at 62 % → 0; floor: 0 to 58 % → 1 — as one 480 × 270 picture (film.ts, static/film-scrim.png) scaled four times by the compositor: no tiles on the way into a page (FS-3, 20 Oct). */ .film .scrim { left: 0; top: 0; width: 480px; height: 270px; transform: scale(4); transform-origin: 0 0; will-change: transform; } .film .fkey { box-sizing: border-box; border-radius: 12px; background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .film .back { display: flex; align-items: center; justify-content: center; } .film .back svg { display: block; } .film .fposter { border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.03); } .film .fposter .art, .film .sposter .art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .film .fposter .art.in, .film .sposter .art.in { opacity: 1; } .film .fcol { left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; } .film .ftrack { position: absolute; left: 0; top: 0; width: 1920px; padding-bottom: 26px; will-change: transform; } .film .fread { position: relative; text-align: left; } .film .fbrow { font-size: 20px; line-height: normal; font-weight: 600; letter-spacing: 5px; color: #E7C184; white-space: pre; overflow: hidden; } .film .fhead { display: flex; align-items: flex-end; margin-top: 14px; white-space: nowrap; } .film .fhead .title { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 72px; line-height: 100px; font-weight: 800; letter-spacing: -1.8px; color: #F2EFEA; } /* ob.hero: tracking −1 sp (−2 px) carried into the title and the year; the stick's text box is 100 tall (16 Oct). */ .film .fhead .year { flex: none; margin-left: 16px; font-size: 52px; line-height: normal; font-weight: 300; letter-spacing: -1.8px; color: rgba(242,239,234,0.7); } .film .badge { display: inline-flex; flex: none; align-items: center; box-sizing: border-box; height: 30px; padding: 0 10px; border-radius: 6px; background: rgba(0,0,0,0.62); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); font-size: 18px; font-weight: 600; letter-spacing: 1px; color: rgba(242,239,234,0.95); } .film .badge.gold { box-shadow: inset 0 0 0 2px rgba(231,193,132,0.5); } .film .badge.gold b { color: rgba(231,193,132,0.95); font-weight: 600; } .film .badge i { display: flex; margin-right: 8px; } .film .badge em { margin-left: 6px; font-style: normal; font-weight: 400; font-size: 18px; letter-spacing: 3.6px; color: rgba(242,239,234,0.45); } /* MP.type.label: 1.8 sp */ .film .badge.tall { height: 38px; border-radius: 8px; margin-left: 16px; font-size: 20px; } /* QUALITY_SIZE_PX */ .film .badge.tall.gold { font-size: 22px; } /* BADGE_TALL_PX */ .film .fhead .runtime { flex: none; margin-left: 16px; font-size: 26px; line-height: normal; letter-spacing: 0.5px; color: rgba(242,239,234,0.7); } .film .director { display: flex; align-items: center; margin-top: 18px; font-size: 24px; line-height: normal; letter-spacing: 0.5px; white-space: nowrap; } /* ob.word: 0.25 sp */ .film .director .by { color: rgba(242,239,234,0.55); } .film .director .who { margin-left: 10px; font-weight: 600; color: rgba(242,239,234,0.95); overflow: hidden; } .film .plot { margin-top: 24px; font-size: 29px; line-height: 42px; letter-spacing: 0.5px; color: rgba(242,239,234,0.95); white-space: pre-wrap; /* 1.42 → 41.18, a line set whole: 42 (the stick) */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 126px; } /* 3 × 42 — Samsung's Chromium 69 lays the first film out without the clamp (23 Oct: 4 lines, 168 px, the page 42 px low; Android PLOT_LINES 3) */ .film .continue { position: relative; display: flex; align-items: center; height: 74px; margin-top: 24px; padding: 0 26px; } .film .continue .cw { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 22px; font-weight: 600; letter-spacing: 2px; color: #FFFFFF; } .film .continue .left { flex: none; margin-left: 18px; font-size: 24px; color: rgba(255,255,255,0.62); white-space: nowrap; } .film .continue .left b { font-weight: 600; color: #FFFFFF; } .film .continue .rail { position: absolute; left: 26px; right: 26px; bottom: 8px; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(242,239,234,0.12); } .film .continue .rail i { display: block; height: 100%; background: #E7C184; } .film .keys { display: flex; margin-top: 24px; } .film .keys.after { margin-top: 14px; } .film .fkey.act { display: flex; flex: none; align-items: center; height: 100%; padding: 0 26px; } .film .fkey.act .g { display: flex; flex: none; width: 26px; height: 26px; margin-right: 16px; } .film .fkey.act .w { min-width: 0; overflow: hidden; white-space: nowrap; font-size: 28px; font-weight: 600; letter-spacing: 3px; color: rgba(242,239,234,0.92); } .film .fkey.on .w { color: #FFFFFF; } .film .sechead, .film .alsohead .sh { font-size: 22px; line-height: 40px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; } .film .sechead { margin-top: 24px; } .film .castview { position: relative; margin-top: 16px; height: 238px; overflow: hidden; } .film .ctrack, .film .atrack { position: absolute; left: 0; top: 0; will-change: transform; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } .film .face { position: absolute; top: 0; } .film .face .tile { position: relative; box-sizing: border-box; width: 120px; height: 180px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, rgba(0,0,0,0.58); font-size: 24px; font-weight: 600; color: rgba(231,193,132,0.85); } /* CastFace: the photograph over the initials, from its top; the white hairline over both (the stick, 16 Oct) */ .film .face .tile .ph { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; } .film .face .tile .ph.in { opacity: 1; } .film .face .tile::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .film .face .nm { margin-top: 10px; white-space: pre; text-align: center; font-size: 18px; line-height: 24px; font-weight: 500; color: rgba(242,239,234,0.9); } /* 18 × 1.3 = 23.4 → 24 */ .film .face.on .nm { color: #FFFFFF; } .film .castview.held .face, .film .alsoview.held .sposter { opacity: 0.86; } /* DIMMED_ALPHA — a state flip */ .film .castview.held .face.on, .film .alsoview.held .sposter.on { opacity: 1; } .film .alsohead { display: flex; align-items: flex-end; margin-top: 24px; padding: 0 60px 0 480px; } .film .credit { margin-left: auto; font-size: 15px; line-height: normal; letter-spacing: 0.5px; color: rgba(242,239,234,0.3); white-space: nowrap; } /* ob.micro 0.2 sp — the stick's box: 266 */ .film .credit.lone { margin: 26px 0 0 480px; } .film .alsoview { position: relative; margin-top: 16px; width: 1920px; height: 476px; } /* the stick's row: 396 + 10 + 70 */ .film .sposter { position: absolute; top: 0; } .film .sposter .tile { position: relative; width: 264px; height: 396px; border-radius: 8px; overflow: hidden; } .film .sposter .badge { position: absolute; left: 10px; top: 10px; } .film .sposter .cap { margin-top: 10px; text-align: center; font-size: 26px; line-height: 35px; font-weight: 600; letter-spacing: 0.4px; color: #F2EFEA; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 70px; } .film .sposter.on .cap { color: #FFFFFF; } .film .fnote { left: 50%; bottom: 96px; transform: translateX(-50%); padding: 18px 36px; border-radius: 16px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); font-size: 28px; font-weight: 600; white-space: nowrap; color: #F2EFEA; visibility: hidden; z-index: 6; } .film .fnote.up { visibility: visible; } .film .later .g.on, .film .later.starred .g.off { display: none; } .film .later.starred .g.on { display: flex; } /* ---- a show's page (SeriesDetailScreen.kt — the film page's head, and what a series needs) ---- */ .film .director .count { color: rgba(242,239,234,0.74); } /* A_074 */ .film .director .count.after { margin-left: 40px; } /* GAP_40 */ .film.show .continue .cw { font-size: 20px; } /* STACK_LABEL_PX 20 */ /* Compose's weights, as the stick shows them (16 Oct, Trag divljaci): the words (weight 1, fill = false) and the spring (weight 1) share what the fixed parts leave — the words use what they need of their half, so "31m left" stands after the spring's half, not at the box's end. */ .film.show .continue .rule { flex: none; width: 2px; height: 26px; margin: 0 20px; background: rgba(255,255,255,0.28); } .film.show .continue .mark { flex: none; font-size: 24px; font-weight: 700; letter-spacing: 1px; color: #FFFFFF; white-space: nowrap; } .film.show .continue .cw { flex: 0 1 auto; } .film.show .continue .spring { flex: none; } .film.show .continue .left { margin-left: 0; } .film.show .continue .rail { bottom: 6px; } /* RAIL_INSET_PX 6 */ .film .keys .none { flex: none; align-self: center; margin-right: 40px; font-size: 24px; letter-spacing: 0.5px; color: rgba(242,239,234,0.74); white-space: nowrap; } .film.show .sechead { margin-top: 20px; } /* GAP_20 */ .film.show .castview { margin-top: 14px; } /* GAP_14 */ .film.show .ftrack { padding-bottom: 20px; } /* the show's floor: GAP_20 (a film's 26) */ /* ============================================================ THE EPISODES BROWSER — SeriesDetailScreen.kt EpisodesBrowser (frame px); the Catch Up panel's frame (.cpanel) with a show's room, tiles and words. ============================================================ */ /* the glass rises (Android: graphicsLayer alpha 0 → 1 in MP.motion.appear); BACK cuts it, as Android's does */ .epanel { transition: opacity 150ms linear; } /* Hidden it is gone at once and keeps no layers (Codex B12, 19 Oct): opacity 0 alone left the panel and its tiles' layers standing on the show's page, and BACK faded instead of cutting. */ .epanel.off { opacity: 0; visibility: hidden; transition: none; } .epanel.off * { will-change: auto !important; visibility: hidden !important; } .epanel .soft { position: absolute; left: 0; top: 0; width: 320px; height: 180px; opacity: 0; transform: scale(6); transform-origin: 0 0; will-change: opacity, transform; } /* a sixth, six times: a picture, scaled by the compositor (20 Oct: a canvas here was 40 tiles a still) */ /* The house room at its own quarter size, scaled by the compositor — a texture, not 40 tiles of the panel (20 Oct, PG-2). */ .epanel .room, .ppanel .room { width: 480px; height: 270px; object-fit: fill; transform: scale(4); transform-origin: 0 0; will-change: transform; } .epanel .soft.up { opacity: 1; } .epanel .names { display: flex; flex-direction: column; align-items: flex-end; } .epanel .rbadge { display: inline-flex; align-items: center; box-sizing: border-box; height: 30px; margin-top: 10px; padding: 0 10px; border-radius: 6px; background: rgba(0,0,0,0.62); box-shadow: inset 0 0 0 2px rgba(231,193,132,0.5); font-size: 18px; font-weight: 600; letter-spacing: 1px; color: rgba(231,193,132,0.95); } .epanel .rbadge i { display: flex; margin-right: 8px; } .epanel .rbadge b { font-weight: 600; } .epanel .eposter { position: relative; flex: none; margin-left: 16px; width: 200px; height: 300px; border-radius: 12px; overflow: hidden; opacity: 0.82; background: rgba(255,255,255,0.03); } /* PANEL_POSTER_ALPHA */ .epanel .eposter::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } /* PANEL_RIM */ .epanel .eposter .art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .epanel .eposter .art.in { opacity: 1; } .epanel .etile { position: absolute; left: 0; width: 389px; height: 219px; border-radius: 8px; overflow: hidden; opacity: 0.55; transition: opacity 100ms; background: #0B111C; will-change: transform; } /* each its own layer: a new tile paints alone */ /* TILE_DIMMED_ALPHA, MP.motion.move */ .epanel .etile.on { opacity: 1; } .epanel .etile::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } /* PANEL_RIM at rest */ /* EpisodePlate: the house navy at 60 %, a light rim along the top, "S2 | E14" in the house capitals */ .epanel .etile .eplate { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, rgba(255,255,255,0.063), rgba(255,255,255,0) 18px), linear-gradient(rgba(27,40,59,0.6), rgba(7,11,20,0.6)); } .epanel .etile .pw { font-size: 40px; font-weight: 700; letter-spacing: 3px; color: rgba(255,255,255,0.78); white-space: nowrap; } .epanel .etile.on .pw { color: rgba(255,255,255,0.92); } .epanel .etile .pbar { width: 3px; height: 34px; margin: 0 22px; background: #E7C184; } .epanel .etile .still { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; visibility: hidden; } .epanel .etile.pictured .still { visibility: visible; } .epanel .etile.pictured .eplate { display: none; } .epanel .etile .ebadge { position: absolute; top: 10px; right: 10px; height: 30px; line-height: 30px; padding: 0 10px; border-radius: 6px; background: rgba(0,0,0,0.62); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); display: none; font-size: 18px; font-weight: 600; letter-spacing: 1px; color: rgba(242,239,234,0.95); } .epanel .etile.pictured .ebadge { display: block; } .epanel .etile.on .ebadge { box-shadow: inset 0 0 0 2px rgba(231,193,132,0.5); color: rgba(231,193,132,0.95); } .epanel .etile .rail { position: absolute; left: 16px; right: 16px; bottom: 10px; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(242,239,234,0.12); } .epanel .etile .rail i { display: block; height: 100%; background: #E7C184; } .epanel .drow .dw { overflow: hidden; white-space: nowrap; right: 18px; } .epanel .desc { top: 413px; } .epanel .dhead { line-height: 40px; } .epanel .dtitle { line-height: 56px; } .epanel .okhint .ok { line-height: 40px; } .epanel .ident .name { line-height: 40px; } /* BROWSER_TOP 56 + DESC_TOP_CLEAR 357 */ .epanel .dfacts { margin-top: 18px; display: flex; align-items: center; height: 40px; font-size: 24px; line-height: 40px; white-space: nowrap; } .epanel .dfacts .fw { color: rgba(242,239,234,0.62); white-space: pre; } /* QUIET_INK; " · " kept */ .epanel .okhint .key { white-space: pre; } .epanel .dfacts .lane { flex: none; width: 2px; height: 33px; margin: 0 22px; background: rgba(150,160,178,0.45); } .epanel .dfacts .fl { font-weight: 600; color: rgba(231,193,132,0.95); } .epanel .dplot { -webkit-line-clamp: 10; white-space: pre-wrap; line-height: 40px; max-height: 400px; } /* 28 × 1.42 → 40 */ /* the panel's line breaks kept, as Compose's Text */ /* DESC_PLOT_UPRIGHT_LINES */ /* MP.type.label, item, meta and ob.micro set their figures tabular (Typography.kt `tnum`) — the stick, 16 Oct: "/ 10" 49 wide, "SEASON 1 · EPISODE 1" 289, a "01" badge as wide as "02". MP.type.row and ob.word stay proportional. */ .film .badge, .film .sechead, .film .alsohead .sh, .film .face .nm, .film .credit, .film .sposter .cap, .epanel .ebadge, .epanel .rbadge, .epanel .dhead, .epanel .okhint .ok, .epanel .head .word { font-variant-numeric: tabular-nums; } .epanel .tiles .track { will-change: transform; } /* the column moves on the compositor, never repainted */ /* ============================================================ ONE PERSON — DetailParts.kt PersonPanel (screens/personPanel.ts), frame px; measured on the stick 16 Oct ============================================================ */ .ppanel { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 12; background: #000; overflow: hidden; color: #F2EFEA; } .ppanel.off { visibility: hidden; } .ppanel .room, .ppanel .veil { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; } .ppanel .veil { background: rgba(0,0,0,0.59); } .ppanel .soft { position: absolute; left: 0; top: 0; width: 320px; height: 180px; opacity: 0; transform: scale(6); transform-origin: 0 0; will-change: opacity, transform; } /* the page's picture, soft, veil baked in */ .ppanel .room { width: 480px; height: 270px; object-fit: fill; transform: scale(4); transform-origin: 0 0; will-change: transform; } .ppanel .soft.up { opacity: 1; } .ppanel .pglass { position: absolute; left: 220px; top: 180px; width: 1480px; height: 720px; box-sizing: border-box; padding: 0 40px; display: flex; flex-direction: column; border-radius: 12px; background: rgba(0,0,0,0.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } /* PERSON_GLASS, PERSON_RIM */ .ppanel .phead { flex: none; height: 74px; display: flex; align-items: center; } .ppanel .phead .cubes { position: relative; width: 16.5px; height: 16.5px; flex: none; } .ppanel .phead .cubes i { position: absolute; width: 6.5px; height: 6.5px; border-radius: 1.5px; background: rgba(231,193,132,0.95); } .ppanel .phead .cubes i:nth-child(2) { left: 10px; } .ppanel .phead .cubes i:nth-child(3) { top: 10px; } .ppanel .phead .cubes i:nth-child(4) { left: 10px; top: 10px; } .ppanel .phead .word { margin-left: 15px; font-size: 22px; line-height: 40px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: pre; } .ppanel .prule { flex: none; height: 2px; background: rgba(242,239,234,0.12); } .ppanel .pbody { flex: 1 1 0; min-height: 0; margin-top: 30px; display: flex; } .ppanel .pphoto { position: relative; flex: none; width: 300px; height: 450px; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.58); display: flex; align-items: center; justify-content: center; } .ppanel .pphoto::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: rgba(255,255,255,0.07); } /* CrystalEdge */ .ppanel .pphoto::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .ppanel .pphoto .ini { font-size: 64px; font-weight: 600; color: rgba(231,193,132,0.85); } .ppanel .pphoto .pic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; } .ppanel .pphoto .pic.in { opacity: 1; } .ppanel .pwords { flex: 1 1 0; min-width: 0; margin-left: 48px; } .ppanel .pname { font-size: 48px; line-height: 65px; font-weight: 800; color: #FFFFFF; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 130px; } /* 48 × 1.05 stands at the font's own 65 */ .ppanel .prole { margin-top: 10px; font-size: 20px; line-height: 40px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; overflow: hidden; } .ppanel .planes { margin-top: 30px; display: flex; } .ppanel .plane { position: relative; flex: 1 1 0; min-width: 0; height: 76px; box-sizing: border-box; display: flex; align-items: center; border-radius: 12px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .ppanel .plane + .plane { margin-left: 24px; } .ppanel .plane::before, .ppanel .pchip::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; border-radius: 12px 12px 0 0; background: rgba(255,255,255,0.07); } /* CrystalTopLight */ .ppanel .plane .line { flex: none; width: 2px; height: 40px; margin: 0 16px; background: rgba(150,160,178,0.45); } .ppanel .plane .w { flex: 1 1 0; min-width: 0; margin-right: 16px; font-size: 22px; line-height: 40px; font-weight: 500; color: rgba(242,239,234,0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ppanel .pknown { margin-top: 30px; font-size: 16px; line-height: 40px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); } .ppanel .pchips { margin-top: 10px; display: flex; height: 44px; } .ppanel .pchip { position: relative; flex: none; height: 44px; line-height: 44px; padding: 0 16px; margin-right: 12px; border-radius: 12px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); font-size: 20px; font-weight: 500; color: rgba(242,239,234,0.9); white-space: nowrap; } .ppanel .prule.bio { margin-top: 30px; } .ppanel .pbio { margin-top: 30px; font-size: 22px; line-height: 32px; color: rgba(242,239,234,0.9); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; max-height: 224px; } /* 22 × 1.42 → 32 */ .ppanel .pnone { margin-top: 30px; font-size: 22px; line-height: 40px; color: rgba(242,239,234,0.66); white-space: nowrap; } .ppanel .pfoot { flex: none; align-self: flex-end; margin-bottom: 28px; display: flex; align-items: center; } .ppanel .pfoot .ok { font-size: 16px; line-height: 40px; font-weight: 600; letter-spacing: 1px; color: rgba(231,193,132,0.95); margin-right: 14px; } .ppanel .pfoot .key { height: 40px; line-height: 40px; padding: 0 16px; border-radius: 8px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); font-size: 22px; font-weight: 500; color: rgba(242,239,234,0.9); } .ppanel .phead .word, .ppanel .prole, .ppanel .pknown, .ppanel .pfoot .ok { font-variant-numeric: tabular-nums; } /* MP.type.label */ /* ============================================================ THE CRYSTAL KIT — CrystalPanel.kt, MpVeil.kt, MpLoader.kt (src/ui/crystal.ts says where each number came from) ============================================================ */ .crys { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 14; } .crys-shade { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: rgba(0,0,0,0.33); will-change: opacity; } /* a layer of one colour (20 Oct, PG-2): no tiles; painted with the panel it made all 40 of them */ .crys-field { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; display: flex; align-items: center; justify-content: center; } .crys-panel { position: relative; box-sizing: border-box; border-radius: 24px; overflow: hidden; background: rgba(0,0,0,0.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16); } .crys-panel > .edge { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: rgba(255,255,255,0.07); } /* The edge light takes its 2 px of the column (CrystalEdge), then 36 in all round (measured on the stick 16 Oct: the rule of "Add playlist" at 337 with the panel's rim at 171). */ .crys-in { position: relative; padding: 38px 36px 36px; } .crys-head { display: flex; align-items: baseline; } /* The name and its caption stand on Manrope's own line (1.366 em): Compose gives a line shorter than the face the face's height (stick: the name's baseline 91 under the rim, the caption's 136). */ .crys-head .t { flex: 1 1 auto; min-width: 0; font-size: 50px; line-height: 1.366; font-weight: 600; letter-spacing: -1.2px; color: #F2EFEA; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; } .crys-head .trail { flex: none; font-size: 28px; line-height: 34px; font-weight: 500; color: rgba(231,193,132,0.92); white-space: nowrap; } .crys-cap { font-size: 28px; line-height: 34px; padding: 2.12px 0; color: rgba(242,239,234,0.70); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; max-height: 170px; } .crys-rule { margin-top: 22px; height: 2px; background: rgba(242,239,234,0.14); } .crys-body { position: relative; margin-top: 26px; } /* The page's box: the rim and the edge light are pieces of their own (never the box's border), so the cursor's frame lies over an untouched box and a press repaints nothing (the speed contract). */ .crys-box { position: relative; box-sizing: border-box; border-radius: 20px; background: rgba(0,0,0,0.58); --rim: rgba(255,255,255,0.14); } .crys-box::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px var(--rim); } .crys-box::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; border-radius: inherit; pointer-events: none; background: rgba(255,255,255,0.07); will-change: opacity; } .crys-box.noedge::before { display: none; } .crys-box.focused::before { opacity: 0; } .crys-key { display: flex; align-items: center; justify-content: center; flex: none; } .crys-key .w { font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: 0.2px; color: #F2EFEA; white-space: nowrap; font-variant-numeric: tabular-nums; } .crys-key .w.accent { color: #E7C184; } .crys-key .w.quiet { color: rgba(255,255,255,0.55); } .crys-plate { position: relative; box-sizing: border-box; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .crys-plate::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; border-radius: inherit; background: rgba(255,255,255,0.07); } /* THE ONE WAIT — black 0.72, the word, the gold thread on its track; the thread is one compositor animation. */ .veil-one { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 30; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; } .veil-one .col { display: flex; flex-direction: column; align-items: center; } .veil-one .word { font-size: 30px; font-weight: 600; letter-spacing: 0.5px; color: #FFFFFF; white-space: nowrap; } .veil-one .gthread { margin-top: 22px; } .gthread { position: relative; width: 220px; height: 3px; border-radius: 1.5px; background: rgba(255,255,255,0.14); overflow: hidden; } .gthread .run { position: absolute; left: 0; top: 0; width: 70px; height: 3px; border-radius: 1.5px; background: linear-gradient(to right, rgba(231,193,132,0.25), #E7C184); will-change: transform, opacity; animation: gthread 1400ms linear infinite; } .gthread .fill { position: absolute; left: 0; top: 0; width: 220px; height: 3px; border-radius: 1.5px; background: #E7C184; transform-origin: 0 0; transform: scaleX(0); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); } .gthread.finished .fill { transform: scaleX(1); } .gthread.finished .run { animation: none; opacity: 0; } /* the run: 86 % of the cycle easing into the far end (1 − (1 − t)²), the last stretch fading from 72 % */ @keyframes gthread { 0% { transform: translateX(-70px); opacity: 1; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 72% { opacity: 1; } 86% { transform: translateX(220px); opacity: 0.5; } 100% { transform: translateX(220px); opacity: 0; } } /* A HOME LAYOUT BEING MADE (ui/layoutWait.ts; the owner, 22 Oct 2026: "loading … motion da bude uredniji i da ide lepo"): it stands whole in the OK's own frame, nothing slides while Home is made under it — the bars light (opacity, the compositor's) only while the frames come freely, and it fades back to Settings when the work is done. */ .lwait { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 30; background: radial-gradient(ellipse 980px 640px at 50% 46%, rgba(255,255,255,0.055), rgba(255,255,255,0) 72%), #05070C; opacity: 0.999; will-change: opacity; } .lwait.gone { opacity: 0; transition: opacity 280ms cubic-bezier(0.4, 0, 1, 1); } .lwait .col { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .lwait .eb { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: 3px; color: #E7C184; white-space: nowrap; } .lwait .pic { position: relative; margin-top: 26px; width: 640px; height: 360px; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.55); } .lwait .pic img { display: block; width: 640px; height: 360px; } .lwait .pic .ring { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 18px; box-shadow: inset 0 0 0 3px #E7C184; } .lwait .nm { margin-top: 40px; font-size: 44px; line-height: 54px; font-weight: 700; color: #FFFFFF; white-space: nowrap; } .lwait .ln { margin-top: 8px; font-size: 24px; line-height: 34px; font-weight: 400; color: rgba(242,239,234,0.72); white-space: nowrap; } .lwait .bars { margin-top: 40px; display: flex; } .lwait .bar { flex: none; width: 112px; height: 4px; border-radius: 2px; margin: 0 6px; background: #E7C184; opacity: 0.18; will-change: opacity; transition: opacity 260ms cubic-bezier(0, 0, 0.2, 1); } .lwait .bar.on { opacity: 1; } .calm .lwait, .calm .lwait .bar { transition: none; } /* THE WAIT (ui/crystal.ts loader): Material's spinner made of turns only (Polymer paper-spinner) — the compositor turns it, the page's thread never draws a frame of it. ARC 1333 ms · longest arc 270° · each turn starts 216° on: the layer steps 135° every eighth of 4 × 1333 ms, the container turns once in 360 × 1333 / (216 + 90) = 1568 ms. */ .mploader { position: relative; flex: none; } .mploader .sp-track { position: absolute; left: 0; top: 0; right: 0; bottom: 0; box-sizing: border-box; border-radius: 50%; border: var(--sw, 4px) solid rgba(255,255,255,0.16); } .mploader .sp-turn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: sp-turn 1568ms linear infinite; will-change: transform; } .mploader .sp-layer { position: absolute; width: 100%; height: 100%; white-space: nowrap; border-color: #E7C184; animation: sp-fill 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; will-change: transform; } .mploader .sp-clip { display: inline-block; position: relative; width: 50%; height: 100%; overflow: hidden; border-color: inherit; } .mploader .sp-gap { position: absolute; box-sizing: border-box; top: 0; left: 45%; width: 10%; height: 100%; overflow: hidden; border-color: inherit; } .mploader .sp-c { position: absolute; top: 0; bottom: 0; box-sizing: border-box; height: 100%; width: 200%; border-radius: 50%; border-width: var(--sw, 4px); border-style: solid; border-color: inherit; border-bottom-color: transparent; animation-duration: 1333ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-iteration-count: infinite; will-change: transform; } .mploader .sp-l .sp-c { left: 0; border-right-color: transparent; transform: rotate(129deg); animation-name: sp-left; } .mploader .sp-r .sp-c { left: -100%; border-left-color: transparent; transform: rotate(-129deg); animation-name: sp-right; } .mploader .sp-gap .sp-c { left: -450%; width: 1000%; animation: none; } /* the seam at the top, where the halves meet */ @keyframes sp-turn { to { transform: rotate(360deg); } } @keyframes sp-fill { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } 100% { transform: rotate(1080deg); } } @keyframes sp-left { 0% { transform: rotate(130deg); } 50% { transform: rotate(-5deg); } 100% { transform: rotate(130deg); } } @keyframes sp-right { 0% { transform: rotate(-130deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-130deg); } } /* the player's wait (ui/crystal.ts waitMark): 72 px, a 6 px line, in the middle of the screen (the owner, 20 Oct); display: none while it does not stand — no turn, no layer */ .pwait { position: absolute; left: 924px; top: 504px; width: 72px; height: 72px; display: none; pointer-events: none; } .pwait.on { display: block; } /* ============================================================ THE ACTIVATION GATE — ActivationGateScreen.kt / TransferPanel.kt (src/screens/gate.ts places the lines on their baselines; Manrope's ascent 1.066 em, its line 1.366 em) ============================================================ */ .gate .room.soft { width: 1920px; height: 1080px; } .brandmark { right: 24px; top: 16px; height: 112px; } .pageline { left: 96px; top: 50px; font-size: 30px; font-weight: 500; letter-spacing: 3.6px; color: #E7C184; white-space: nowrap; font-variant-numeric: tabular-nums; } .gate .g-top { font-size: 44px; font-weight: 500; letter-spacing: 12px; color: #FFFFFF; white-space: nowrap; overflow: hidden; } .gate .g-word { font-size: 108px; font-weight: 800; letter-spacing: 6px; color: #E7C184; white-space: nowrap; overflow: hidden; } .gate .g-rule { width: 140px; height: 3px; background: rgba(231,193,132,0.85); } .gate .g-lead { font-size: 34px; font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; } .gate .g-body { font-size: 28px; line-height: 40px; color: rgba(255,255,255,0.95); white-space: pre-line; max-height: 120px; overflow: hidden; } .gate .g-plans { top: 646px; height: 206px; width: 1098px; } .gate .g-plan { position: absolute; top: 0; height: 206px; } .gate .g-plan.popular::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 20px; box-shadow: inset 0 0 0 2px rgba(231,193,132,0.55); pointer-events: none; } .gate .g-plan > div { position: absolute; left: 20px; right: 20px; text-align: center; white-space: nowrap; } .gate .g-plan .tier { font-size: 26px; font-weight: 700; letter-spacing: 4px; color: #E7C184; } .gate .g-plan .name { font-size: 20px; font-weight: 600; letter-spacing: 4px; color: #FFFFFF; } .gate .g-plan .price { font-size: 58px; font-weight: 800; color: #FFFFFF; } .gate .g-plan .note { font-size: 23px; color: rgba(255,255,255,0.9); } .gate .g-plan .tag { left: 50%; right: auto; top: -17px; transform: translateX(-50%); height: 34px; line-height: 34px; padding: 0 18px; border-radius: 17px; background: #E7C184; font-size: 17px; font-weight: 700; letter-spacing: 3px; color: #1A1610; } .gate .g-keys { left: 98px; top: 896px; height: 76px; display: flex; } .gate .g-key { height: 76px; padding: 0 34px 0 30px; display: flex; align-items: center; } .gate .g-key + .g-key { margin-left: 20px; } .gate .g-key .glyph { width: 28px; height: 28px; flex: none; } .gate .g-key .glyph svg { display: block; } .gate .g-key .w { margin-left: 16px; font-size: 28px; font-weight: 600; color: #FFFFFF; white-space: nowrap; } .gate .g-hint { font-size: 24px; color: rgba(255,255,255,0.88); max-height: 66px; overflow: hidden; } .gate .g-notyet { left: 98px; top: 992px; width: 1100px; height: 24px; } .gate .g-notyet svg { position: absolute; left: 0; top: 0; display: block; } .gate .g-notyet .w { position: absolute; left: 34px; width: 1066px; font-size: 24px; color: #FF6B5E; max-height: 66px; overflow: hidden; } .gate .g-railline { top: 150px; width: 2px; height: 870px; background: rgba(255,255,255,0.26); } .gate .g-scan { text-align: center; font-size: 34px; font-weight: 600; color: #FFFFFF; white-space: nowrap; } .gate .g-qr { left: 1460px; top: 214px; width: 272px; height: 272px; border-radius: 8px; overflow: hidden; background: #fff; } .gate .g-qr svg { display: block; width: 272px; height: 272px; } .gate .g-or { text-align: center; font-size: 24px; color: rgba(255,255,255,0.88); white-space: nowrap; } .gate .g-site { text-align: center; font-size: 30px; font-weight: 600; color: #E7C184; white-space: nowrap; } .gate .g-id { top: 592px; width: 500px; height: 108px; border-radius: 18px; overflow: hidden; background: rgba(0,0,0,0.48); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .gate .g-id .edge { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: rgba(255,255,255,0.07); } .gate .g-id .label { position: absolute; left: 0; right: 0; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: 6px; color: #E7C184; white-space: nowrap; } .gate .g-id .value { position: absolute; left: 20px; right: 20px; bottom: 12px; text-align: center; font-size: 46px; font-weight: 700; letter-spacing: 2px; color: #FFFFFF; white-space: nowrap; } .gate .g-card { top: 716px; width: 500px; padding: 22px 30px; } .gate .g-card .head { position: relative; font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: 5px; color: #E7C184; white-space: nowrap; margin-bottom: 12px; } .gate .g-card .fact { position: relative; display: flex; align-items: center; padding: 3px 0; line-height: 27.6px; } /* face(): line 1.2 */ .gate .g-card .fact .l { flex: none; font-size: 23px; color: rgba(255,255,255,0.85); white-space: nowrap; } .gate .g-card .fact .v { flex: 1 1 0; min-width: 0; margin-left: 20px; text-align: right; font-size: 23px; font-weight: 500; color: #FFFFFF; white-space: nowrap; } /* TRANSFER LICENCE and the cards of an arrived licence (TransferPanel.kt T1 · N3 · T3, "Licence activated") */ .g-panel { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 15; background: rgba(0,0,0,0.62); display: flex; align-items: center; justify-content: center; } .g-panel .wrap { position: relative; width: 1040px; } .g-panel .under { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); } .g-panel .plate { position: relative; border-radius: 24px; overflow: hidden; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .g-panel .plate > .edge { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: rgba(255,255,255,0.07); } .g-panel .col { position: relative; padding: 52px 64px; } .g-panel .title { font-size: 50px; line-height: 60px; font-weight: 600; letter-spacing: -1.2px; color: #FFFFFF; white-space: nowrap; } .g-panel .caption { margin-top: 12px; font-size: 28px; line-height: 34px; color: rgba(242,239,234,0.9); } .g-panel .grule { margin-top: 28px; width: 96px; height: 3px; background: #E7C184; } .g-panel .label { margin-top: 56px; font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: 5px; color: #E7C184; white-space: nowrap; } .g-panel .invoice { margin-top: 16px; height: 94px; display: flex; align-items: center; padding: 0 32px; } .g-panel .invoice .typing-words, .g-panel .invoice .typing { font-size: 40px; font-weight: 600; letter-spacing: 3px; color: #F2EFEA; } .g-panel .invoice .tcaret { width: 3px; height: 44px; } .g-panel .note { margin-top: 18px; height: 36px; display: flex; align-items: center; } .g-panel .note .dot { flex: none; width: 14px; height: 14px; border-radius: 7px; background: #D98C6A; margin-right: 14px; display: none; } .g-panel .note .w { font-size: 24px; line-height: 34px; color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; } .g-panel .note .w.bad { color: #D98C6A; } .g-panel .keys { margin-top: 32px; display: flex; } .g-panel .keys .crys-key + .crys-key { margin-left: 24px; } .g-panel .col.done { display: flex; flex-direction: column; align-items: center; } .g-panel .done .check { width: 92px; height: 92px; } .g-panel .done .check svg { display: block; } .g-panel .done .title { margin-top: 36px; font-weight: 700; text-align: center; } .g-panel .done .grule { margin-top: 28px; } .g-panel .done .facts { margin-top: 36px; width: 740px; padding: 12px 36px; } .g-panel .done .frow { position: relative; height: 64px; display: flex; align-items: center; } .g-panel .done .frow .l { flex: none; font-size: 26px; color: rgba(255,255,255,0.72); white-space: nowrap; } .g-panel .done .frow .v { flex: 1 1 0; min-width: 0; margin-left: 24px; text-align: right; font-size: 28px; font-weight: 600; color: #FFFFFF; white-space: nowrap; } .g-panel .done .frow .v.gold { color: #E7C184; } .g-panel .done .hr { position: relative; display: block; height: 2px; background: rgba(255,255,255,0.08); } .g-panel .done .crys-key { margin-top: 56px; } /* THE TYPING BOX (ui/typing.ts): the words, the caret at rest, the set's keyboard's own field while the pen is up */ .typing-words { position: relative; display: flex; align-items: center; min-width: 0; flex: 1 1 auto; white-space: pre; overflow: hidden; } .typing-words .tcaret { flex: none; display: inline-block; width: 2px; height: 38px; background: #E7C184; } .typing-words input.typing { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 0; margin: 0; background: transparent; font-family: Manrope, sans-serif; caret-color: #E7C184; } /* THE OPENING IDENT (ui/splash.ts) — over everything, black from frame zero, its last frame under the video at the end */ .splash { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 60; background: #000; } .splash .ident, .splash .end { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; object-fit: cover; } .splash .end { visibility: hidden; } /* ============================================================ MODERN · PLAYLISTS — PlaylistsPage.kt (src/screens/playlists.ts places the lines on their baselines) ============================================================ */ .playlists .pl-scene { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; } .playlists .pl-scene > * { position: absolute; } /* Over a panel: the page blurred once (PageSnapshot: the sketch's 18 px Gaussian) under the panel's own shade. */ .playlists.behind .pl-scene { filter: blur(18px); } /* The page's blurred copy, drawn ahead (two frames at 1 % — `.warm` — so the compositor makes its tiles) and then resting at 0: a copy left at 1 % was blurred by the GPU in EVERY frame of the page (21 Oct 2026, sc samsung-js frame clock on the TV while the cursor walked Playlists: 17.6 ms a frame, 9 frames over 34 ms; at 0 — 16.6 ms, none). A panel turns it up whole; its tiles are kept. */ .playlists .pl-twin { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 1; opacity: 0; will-change: opacity; pointer-events: none; } .playlists .pl-twin.warm { opacity: 0.01; } .playlists .pl-twin.up { opacity: 1; } .playlists .pl-twin .pl-blurred { filter: blur(18px); } .playlists .pl-twin .pl-blurred > * { position: absolute; } .playlists .pl-chrome { position: absolute; left: 0; top: 0; width: 1920px; height: 0; z-index: 20; } .playlists .pl-chrome > * { position: absolute; } /* the header keys: 64 tall, r 14, the glyph 26 px 26 in, 14 to the word (28 SemiBold), 30 after */ .pl-head { left: 0; display: flex; justify-content: flex-end; } .pl-hkey { display: flex; align-items: center; height: 64px; padding: 0 30px 0 26px; border-radius: 14px; } .pl-hkey .g { width: 26px; height: 26px; flex: none; } .pl-hkey .g svg { display: block; } .pl-hkey .w { margin-left: 14px; font-size: 28px; font-weight: 600; color: #F2EFEA; white-space: nowrap; } /* the Add keys: 74 tall, r 16, the plus 26 px, 18 to the word (32 SemiBold), centred as one */ .pl-add { border-radius: 16px; } .pl-add .in { position: absolute; left: 28px; right: 28px; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .pl-add .g { width: 26px; height: 26px; flex: none; } .pl-add .g svg { display: block; } .pl-add .w { margin-left: 18px; font-size: 32px; font-weight: 600; color: #FFFFFF; white-space: nowrap; } /* the hero: crystal 0.58, rim 0.14, the edge light, r 20; the gold thread 30 in from either end at 0.9 */ .pl-hero { border-radius: 20px; overflow: hidden; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .pl-hero > .edge { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: rgba(255,255,255,0.07); } .pl-hero > .thread { position: absolute; left: 30px; right: 30px; top: 0; height: 2px; background: rgba(231,193,132,0.9); } .pl-hero .body { position: absolute; left: 0; top: 0; width: 1344px; height: 320px; } .pl-hero .body > * { position: absolute; } .pl-hero .none { top: 0; height: 320px; display: flex; align-items: center; font-size: 40px; font-weight: 500; color: rgba(242,239,234,0.74); white-space: nowrap; } .pl-hero .dot { left: 40px; top: 40px; width: 14px; height: 14px; border-radius: 7px; } .pl-hero .eyebrow { left: 66px; font-size: 26px; font-weight: 600; letter-spacing: 5px; white-space: nowrap; } .pl-hero .name { left: 40px; width: 620px; font-size: 92px; font-weight: 800; color: #FFFFFF; white-space: nowrap; overflow: hidden; } .pl-hero .source { left: 40px; width: 620px; font-size: 28px; color: rgba(242,239,234,0.74); white-space: nowrap; overflow: hidden; } .pl-hero .fg { top: 44px; width: 44px; height: 44px; } .pl-hero .fg svg { display: block; } .pl-hero .fn { width: 190px; font-size: 60px; font-weight: 800; color: #FFFFFF; white-space: nowrap; } .pl-hero .fw { width: 190px; font-size: 26px; color: rgba(242,239,234,0.66); white-space: nowrap; } .pl-hero .fr { top: 42px; width: 2px; height: 174px; background: rgba(242,239,234,0.22); } /* NOT CONNECTED where the counts stood: "Check details" 46 SemiBold coral over a 3 px rule 230 wide, 8 under it; "or try again later" 28 at 0.74, 14 under the rule; the block centred on 36 → 240 */ .pl-hero .held { left: 704px; top: 36px; width: 634px; height: 204px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pl-hero .held .h { font-size: 46px; font-weight: 600; color: #FF6B5E; white-space: nowrap; } .pl-hero .held .rule { display: block; margin-top: 8px; width: 230px; height: 3px; border-radius: 1.5px; background: rgba(255,107,94,0.9); } .pl-hero .held .l { margin-top: 14px; font-size: 28px; color: rgba(242,239,234,0.74); white-space: nowrap; } /* the pills: 56 tall from 236, 14 apart, the word 27 SemiBold 32 in; glass 0.45, rim 0.20 — Delete's rim live red .55 */ .pl-hero .pills { left: 40px; top: 236px; height: 56px; max-width: 640px; display: flex; } .pl-hero .pill { height: 56px; padding: 0 32px; border-radius: 28px; display: flex; align-items: center; background: rgba(0,0,0,0.45); --rim: rgba(255,255,255,0.20); } .pl-hero .pill::before { display: none; } .pl-hero .pill + .pill { margin-left: 14px; } .pl-hero .pill .w { font-size: 27px; font-weight: 600; color: #F2EFEA; white-space: nowrap; } .pl-hero .pill.focused .w { color: #E7C184; } .pl-hero .pill.warn { --rim: rgba(229,72,77,0.55); } .pl-hero .pill.warn .w { color: #E5484D; } .pl-hero .updated { right: 40px; font-size: 26px; color: rgba(242,239,234,0.66); white-space: nowrap; } /* ALL PLAYLISTS Medium 30 tracked 5 at 0.9 from x 122; the heads Medium 22 tracked 4 at 0.75 */ .pl-ltitle { left: 122px; font-size: 30px; font-weight: 500; letter-spacing: 5px; color: rgba(242,239,234,0.9); white-space: nowrap; } .pl-lhead { text-align: center; font-size: 22px; font-weight: 500; letter-spacing: 4px; color: rgba(242,239,234,0.75); white-space: nowrap; } /* the rows: 64 tall, 9 apart, r 14, five in a window of 356 with 4 px for the lifted cursor */ .pl-rows { overflow: hidden; } .pl-rows .inner { position: absolute; left: 0; top: 0; width: 1344px; } .pl-row { position: absolute; left: 0; width: 1344px; height: 64px; border-radius: 14px; } .pl-row > * { position: absolute; } .pl-row .bar { left: 6px; top: 14px; width: 5px; height: 36px; border-radius: 2.5px; background: #8CBF9A; } .pl-row .num { left: 12px; width: 56px; top: 0; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #E7C184; } .pl-row .nm { left: 76px; width: 518px; top: 0; height: 64px; display: flex; align-items: center; font-size: 30px; font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%); } .pl-row .fig { width: 180px; top: 0; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; color: rgba(255,255,255,0.92); white-space: nowrap; } .pl-row .rule { top: 16px; width: 2px; height: 32px; background: rgba(242,239,234,0.28); } .pl-row .mark { right: 27px; top: 0; height: 64px; display: flex; align-items: center; font-size: 24px; font-weight: 600; color: #8CBF9A; white-space: nowrap; } .pl-row .mark .t { margin-left: 13px; width: 22px; height: 22px; } .pl-row .mark .t svg { display: block; } .pl-row .mark.held { color: #FF6B5E; } /* the rail: the line at 1480 from 150, 810 tall at 0.16; the hint SemiBold 28 on 38, 380 wide; the code 312 from 356, r 8 */ .pl-railline { top: 150px; width: 2px; height: 810px; background: rgba(242,239,234,0.16); } .pl-hint { left: 1510px; width: 380px; text-align: center; font-size: 28px; line-height: 38px; font-weight: 600; color: #FFFFFF; } .pl-qr { width: 312px; height: 312px; border-radius: 8px; overflow: hidden; background: #FFFFFF; } .pl-qr svg { display: block; width: 312px; height: 312px; } /* the corner facts (Settings' CornerFacts): 13 sp → 26 px Medium, "ID:" and the globe in a 44 lane, 6 to the value */ .pl-corner { left: 1480px; width: 440px; top: 989px; display: flex; justify-content: center; } .pl-corner .col { display: flex; flex-direction: column; align-items: flex-start; } .pl-corner .r { display: flex; align-items: center; height: 28px; font-size: 26px; font-weight: 500; letter-spacing: 0.6px; color: rgba(242,239,234,0.88); white-space: nowrap; } .pl-corner .r.site { margin-top: 18px; color: rgba(242,239,234,0.78); letter-spacing: 0.4px; } .pl-corner .lane { width: 44px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; } .pl-corner .lane svg { display: block; width: 20px; height: 20px; } .pl-corner .lane b { font-weight: 800; } .pl-corner .v { margin-left: 6px; } .pl-corner .v.id { letter-spacing: 1.5px; } /* Reload's one sentence: the band under the lists, 1006 → 1080, the page's crystal r 14, SemiBold 26 */ .pl-note { position: absolute; left: 96px; top: 1006px; width: 1344px; height: 74px; display: flex; align-items: center; justify-content: center; z-index: 25; } .pl-note .plate { padding: 10px 28px; border-radius: 14px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .pl-note .w { font-size: 26px; font-weight: 600; color: #E7C184; white-space: nowrap; } .pl-note .w.bad { color: #D98C6A; } /* ============================================================ THE PLAYLIST PANELS — PlaylistForm.kt · AddPlaylistPanel.kt · EditPlaylistPanel.kt · DeletePlaylistPanel.kt · UserAccountPanel.kt · PlayerSettingsPanel.kt · SettingsChoicePanel.kt (screens/playlistPanels.ts places the faces) ============================================================ */ /* A box on a panel lights itself — no page cursor stands there (MpSurface's lift): 1.02 in MP.motion.move FastOutSlowIn, the gold hairline and the breath of gold on a layer of their own under the words, flipped by opacity; the edge light goes. A press flips a class: one transform and one opacity, nothing laid out again. */ .crys .lit { transform: scale(1); will-change: transform; transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1) -17ms; } .crys .lit > .glow { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; background: rgba(231,193,132,0.12); box-shadow: inset 0 0 0 2px #E7C184; opacity: 0; will-change: opacity; } .crys .lit.focused { transform: scale(1.02); } .crys .lit.focused > .glow { opacity: 1; } .crys .crys-key .w { position: relative; } /* the form (the owner, 21 Oct 2026): each box's word ABOVE it — "Playlist name:" 28 Regular at 0.70 from the box's start, 8 over its box; the box 76 tall from the same start, empty, the letters 28 in (34 SemiBold), the caret a hairline 38 tall in gold; 16 from a box to the next word; the eye its own 76 box one step right of the password; OR the quiet gold seam 28 tall; the refusal's band always 44 under the last box; 40 over the keys (300 × 76, 24 apart) */ .pp-form { position: relative; width: 1040px; } .pp-gap { margin-top: 16px; } .pp-slot { position: relative; } .pp-lab { position: relative; height: 38px; margin-bottom: 8px; padding-left: 2px; font-size: 28px; line-height: 38px; font-weight: 400; color: rgba(242,239,234,0.70); white-space: nowrap; overflow: hidden; } .pp-field { height: 76px; display: flex; align-items: center; padding: 0 28px; box-sizing: border-box; } .pp-field .val { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; overflow: hidden; } /* a value is the item face (crystalOptionFace): tabular figures, tracked 0.2 */ .pp-field .typing-words, .pp-field input.typing { font-size: 34px; line-height: 1.366; font-weight: 600; letter-spacing: 0.2px; color: #F2EFEA; font-variant-numeric: tabular-nums; } .pp-field .hint { font-size: 34px; line-height: 1.366; font-weight: 600; letter-spacing: 0.2px; color: rgba(242,239,234,0.45); white-space: nowrap; font-variant-numeric: tabular-nums; } .pp-field .hint.chosen { color: #F2EFEA; } /* the file the computer's picker gave (Windows, Codex 05) */ .pp-pass { position: relative; display: flex; } .pp-pass .pp-field { flex: 1 1 auto; } .pp-eye { flex: none; width: 76px; height: 76px; margin-left: 12px; } .pp-eye .g { position: absolute; left: 18px; top: 18px; width: 40px; height: 40px; } .pp-eye .g svg { display: block; } .pp-eye .g.gold, .pp-eye.focused .g.ink { opacity: 0; } .pp-eye.focused .g.gold { opacity: 1; } .pp-or { position: relative; height: 28px; margin: 12px 28px 0; display: flex; align-items: center; overflow: hidden; } .pp-or i { flex: 1 1 0; height: 2px; background: rgba(231,193,132,0.35); } .pp-or span { position: relative; top: 7px; padding: 0 20px; font-size: 30px; line-height: 1.366; font-weight: 600; letter-spacing: 3px; color: #E7C184; white-space: nowrap; } .pp-band { position: relative; height: 44px; padding-top: 4px; box-sizing: border-box; display: flex; align-items: center; } .pp-band .sign { flex: none; width: 26px; height: 26px; margin-left: 1px; } .pp-band .sign svg { display: block; } .pp-band .w { flex: 1 1 0; min-width: 0; margin-left: 11px; font-size: 25px; line-height: 1.366; font-weight: 500; color: #FF6B5E; white-space: nowrap; overflow: hidden; } .pp-keys { position: relative; margin-top: 40px; display: flex; justify-content: center; } .pp-keys .crys-key + .crys-key { margin-left: 24px; } /* ADDING (U1) and READY (U2): the face 508 tall, seated in a holder of the form's own height (playlistPanels.ts seat) with its middle on the form's middle — nothing jumps */ .pp-hold { position: relative; width: 1040px; display: flex; align-items: center; } .pp-face { position: relative; flex: none; width: 1040px; height: 508px; } .pp-face > * { position: absolute; } .pp-face .nm { left: 8px; width: 1024px; font-size: 40px; line-height: 1.366; font-weight: 600; color: #F2EFEA; white-space: nowrap; overflow: hidden; } .pp-face .src { left: 8px; width: 1024px; font-size: 26px; line-height: 1.366; color: #9E9EA6; white-space: nowrap; overflow: hidden; } .pp-step { left: 10px; width: 1022px; height: 44px; display: flex; align-items: center; } .pp-step .mk { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .pp-step .mk svg { display: block; } .pp-step .ring { width: 30px; height: 30px; box-sizing: border-box; border-radius: 15px; border: 2.5px solid rgba(255,255,255,0.30); } .pp-step .sw { flex: 1 1 0; min-width: 0; margin-left: 22px; font-size: 30px; line-height: 1.366; font-weight: 600; color: #F2EFEA; white-space: nowrap; overflow: hidden; } .pp-step .sw.wait { color: rgba(242,239,234,0.45); } .pp-step .fig { flex: none; font-size: 27px; line-height: 1.366; font-weight: 500; color: #F2EFEA; white-space: nowrap; text-align: right; } .pp-step .fig.run { color: #E7C184; } .pp-step .fig.first { color: #9E9EA6; } .pp-face .rule { left: 64px; width: 968px; height: 1.5px; background: rgba(255,255,255,0.07); } .pp-face .gthread { left: 64px; } .pp-slow { left: 20px; width: 1012px; height: 44px; display: flex; align-items: center; } .pp-slow i { flex: none; width: 12px; height: 12px; border-radius: 6px; background: #D9B87A; } .pp-slow span { flex: 1 1 0; min-width: 0; margin-left: 16px; font-size: 26px; line-height: 1.366; font-weight: 500; color: #D9B87A; white-space: nowrap; overflow: hidden; } /* BACK named at the foot (MpCantPlay.BackHint): the cap 38 tall, ≥ 86 wide, r 10, white 20/255 and its edge 70/255; BACK 17 Bold tracked 2; 14; the words 22 Medium */ .pp-back { left: 0; width: 1040px; bottom: 3px; display: flex; justify-content: center; align-items: center; } .pp-back .cap { height: 38px; min-width: 86px; box-sizing: border-box; padding: 0 18px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.078); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.275); font-size: 17px; line-height: 1.366; font-weight: 700; letter-spacing: 2px; color: #9E9EA6; } .pp-back .w { margin-left: 14px; font-size: 22px; line-height: 1.366; font-weight: 500; color: #686870; white-space: nowrap; } .pp-face .ready { left: 474px; top: 18px; width: 92px; height: 92px; } .pp-face .ready svg { display: block; } .pp-face .rname { left: 8px; width: 1024px; top: 133.6px; height: 52.8px; display: flex; align-items: center; justify-content: center; font-size: 44px; line-height: 1.366; font-weight: 600; color: #F2EFEA; white-space: nowrap; } .pp-face .cnt { top: 218px; width: 200px; height: 56px; display: flex; align-items: center; } .pp-face .cnt .g { flex: none; width: 32px; height: 32px; } .pp-face .cnt .g svg { display: block; } .pp-face .cnt .n { margin-left: 12px; font-size: 40px; line-height: 1.366; font-weight: 700; color: #F2EFEA; white-space: nowrap; } .pp-face .cw { top: 277.6px; width: 156px; height: 28.8px; display: flex; align-items: center; font-size: 24px; line-height: 1.366; font-weight: 500; color: #9E9EA6; white-space: nowrap; } .pp-face .div { top: 222px; width: 1.5px; height: 80px; background: rgba(255,255,255,0.12); } .pp-face .done { left: 370px; top: 432px; } /* CONNECT's list that did not answer (the owner, 23 Oct 2026): the red sign where the ring stands, NOT CONNECTED in the page's live red, what to do under it in the Home card's ink, Close where Done stands */ .pp-face .rname.bad { color: #FF6B5E; letter-spacing: 2px; } .pp-face .rwhy { left: 8px; width: 1024px; top: 218px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1.366; font-weight: 500; color: rgba(242,239,234,0.70); white-space: nowrap; } /* USER ACCOUNT and PLAYER SETTINGS: rows on the page's crystal, 56 tall 8 apart r 16; the word 28 Regular at 0.70 28 in, the value 30 SemiBold at the row's end (a lane of 660 at most, 24 clear of the word); a date's parts and the counts wear the upright line (3 × 24, #96A0B2 at 0.62, 10 of air); a choice's gold chevron 24, 16 after its value */ .pp-facts { position: relative; width: 1040px; height: 632px; } .pp-fact { position: relative; height: 56px; border-radius: 16px; } .pp-fact + .pp-fact { margin-top: 8px; } .pp-fact .in { position: absolute; left: 28px; right: 28px; top: 0; bottom: 0; display: flex; align-items: center; } .pp-fact .w { flex: 1 1 0; min-width: 0; font-size: 28px; line-height: 1.366; color: rgba(242,239,234,0.70); white-space: nowrap; overflow: hidden; } .pp-fact .v { flex: none; margin-left: 24px; max-width: 660px; display: flex; align-items: center; font-size: 30px; line-height: 1.366; font-weight: 600; letter-spacing: 0.2px; color: #F2EFEA; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; } .pp-fact .v.good { color: #8CBF9A; } .pp-fact .v.bad { color: #D98C6A; } .pp-fact .v .part { flex: none; display: block; width: 3px; height: 24px; margin: 0 10px; background: rgba(150,160,178,0.62); } .pp-fact .v .fig { text-align: right; } .pp-fact .chev { flex: none; margin-left: 16px; width: 24px; height: 24px; } .pp-fact .chev svg { display: block; } /* THE CHOOSER (SettingsChoicePanel): past six options four columns of 300 (20 apart), seven rows in view; six or fewer one column of 688; the current value gold with its dot (12, 34 from the end) */ .pp-window { position: relative; overflow: hidden; margin: 0 -8px; padding: 0 8px; } .pp-window .inner { position: relative; } .pp-tile { position: absolute; height: 76px; } .pp-tile .w { position: absolute; left: 28px; right: 58px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 34px; line-height: 1.366; font-weight: 600; letter-spacing: 0.2px; color: #F2EFEA; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; } .pp-tile.chosen .w { color: #E7C184; } .pp-tile .dot { position: absolute; right: 34px; top: 32px; width: 12px; height: 12px; border-radius: 6px; background: #E7C184; } /* ============================================================ MODERN · SETTINGS — SettingsScreen.kt / SettingsHub.kt / SettingsRow.kt / SettingsPreview.kt (src/screens/settings.ts places the words on their baselines; Manrope's ascent 1.066 em, its line 1.366 em; frame px) ============================================================ */ .settings .st-scene { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; } .settings .st-scene > * { position: absolute; } .settings.behind .st-scene { filter: blur(18px); } .settings .st-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 14; } .settings .st-ask { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 15; } /* LAYERS ARE THE TV'S COST (16 Oct, the Samsung: 183 composited layers on this page — a hundred rows' edge lights held apart by will-change, and the blurred copy holding its own — made every commit 30–340 ms and the first walk through a folder 2.5 s). The rows' edge light is drawn with the row; a focus flip repaints one row (980 × 72). */ .settings .crys-box::before { will-change: auto; } .settings .st-chrome { position: absolute; left: 0; top: 0; width: 1920px; height: 0; z-index: 20; } /* Under the account panel the eyebrow steps back with the page (blurred where it stands); the mark stays crisp. */ .settings.acct.behind .st-chrome .pageline { filter: blur(18px); } .settings .st-chrome > * { position: absolute; } /* the two depths, the folders: cross-fade in MP.motion.appear (150 ms, FastOutSlowIn); the hidden one is not drawn */ .st-pane { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; opacity: 0; visibility: hidden; transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 150ms; } .st-pane.shown { opacity: 1; visibility: visible; transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .settings.still .st-pane { transition: none; } /* A FOLDER NOT OPEN IS NOT STYLED (20 Oct 2026, PG-2, samsung-profil): the eight folders built ahead were hidden with opacity and visibility — every one of them styled and laid out again each time the page came back from out of sight (71 of a 127 ms way in). Out of its fade, a hidden folder is display: none (settings.ts show). */ .st-pane.stored { display: none; } .st-pane > * { position: absolute; } .st-legend { left: 96px; font-size: 30px; line-height: 1.366; font-weight: 400; letter-spacing: 0.4px; color: rgba(242,239,234,0.70); white-space: nowrap; font-variant-numeric: tabular-nums; } .st-corner { left: auto; right: 96px; width: auto; top: 989px; } .st-corner .v.id { letter-spacing: 0.95px; } .st-legend .tri { display: inline-block; width: 30px; height: 18px; vertical-align: -2px; } .st-legend .tri svg { display: block; } /* the cards: 402 × 381, r 20, the house crystal; the dash 44 × 3 at (28, 42); the name 44 Bold at 64; the fact at the foot */ .st-card { position: absolute; width: 402px; height: 381px; } .st-card .dash { position: absolute; left: 28px; top: 42px; width: 44px; height: 3px; background: #E7C184; } .st-card .nm { position: absolute; left: 24px; top: 64px; width: 354px; font-size: 44px; line-height: 60.1px; font-weight: 700; letter-spacing: -0.6px; color: #F2EFEA; white-space: nowrap; overflow: hidden; } .st-card .nm.two { top: 66px; white-space: normal; line-height: 56px; max-height: 112px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .st-card .fact { position: absolute; left: 24px; top: 316px; height: 41px; display: flex; align-items: center; font-size: 30px; line-height: 1.366; font-weight: 600; letter-spacing: 0.2px; color: #E7C184; white-space: nowrap; font-variant-numeric: tabular-nums; } .st-card .fact .rule { flex: none; width: 2px; height: 22px; margin: 0 8px; background: rgba(242,239,234,0.45); } .st-card .fact .jn { margin: 0 8px; } /* the words: 34 Medium white, 2 × 40 hairlines at ink 0.45; the open folder's 2 px gold line 6 up; the cursor's word gold */ .st-chips { height: 64px; overflow: hidden; } .st-chips .in { position: absolute; left: 0; top: 0; height: 64px; will-change: transform; } .st-chip { position: absolute; top: 0; height: 64px; font-size: 34px; line-height: 64px; font-weight: 500; letter-spacing: 0.2px; color: #FFFFFF; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; } .st-chip.focused { color: #E7C184; } .st-chip.open::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: #E7C184; } .st-chips .div { position: absolute; top: 12px; width: 2px; height: 40px; background: rgba(242,239,234,0.45); } /* the rows' window: the list breathes into the room at both ends — 48 px of the room (and its veil) painted back */ .st-rows { overflow: hidden; } .st-rows .inner { position: absolute; left: 0; top: 0; width: 980px; will-change: transform; } .st-rows .fade { position: absolute; left: 0; width: 980px; height: 48px; pointer-events: none; background-image: linear-gradient(rgba(0,0,0,0.44), rgba(0,0,0,0.44)), url(bg_room_tv.jpg); background-size: auto, 1920px 1080px; background-repeat: no-repeat; } .st-rows .fade.top { top: 0; background-position: 0 0, -96px -240px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); } .st-rows .fade.bottom { bottom: 0; background-position: 0 0, -96px -948px; -webkit-mask-image: linear-gradient(to top, #000, transparent); } .st-eyebrow { position: absolute; left: 24px; height: 41px; font-size: 30px; line-height: 1.366; font-weight: 500; letter-spacing: 3.6px; color: rgba(242,239,234,0.70); white-space: nowrap; } /* a row: 980 × 72, r 20, the cards' crystal; 32 in; the name 30 SemiBold; 32 to the tail; the value 30 Medium (480 lane), 16 · the 2 × 40 hairline · 16, the control's slot 80 */ .st-row { position: absolute; left: 0; width: 980px; height: 72px; display: flex; align-items: center; padding: 0 32px; } .st-row .t { position: relative; flex: 1 1 auto; min-width: 0; font-size: 30px; line-height: 1.366; font-weight: 600; color: #F2EFEA; white-space: nowrap; overflow: hidden; } .st-row.k-danger .t { color: #D98C6A; } .st-row .tail { position: relative; flex: none; margin-left: 32px; display: flex; align-items: center; } .st-row .v { max-width: 480px; font-size: 30px; line-height: 1.366; font-weight: 500; letter-spacing: 0.2px; color: #F2EFEA; white-space: nowrap; overflow: hidden; text-align: right; font-variant-numeric: tabular-nums; } .st-row.k-action .v { color: rgba(255,255,255,0.52); } .st-row.k-info .v { color: rgba(255,255,255,0.80); } .st-row.k-toggle.on .v { color: #E7C184; } .st-row .div { flex: none; width: 2px; height: 40px; margin: 0 16px; background: rgba(242,239,234,0.45); } .st-row .slot { flex: none; width: 80px; display: flex; align-items: center; justify-content: center; } .st-row .pad { flex: none; width: 114px; } .st-row .chev { display: block; width: 32px; height: 32px; color: rgba(255,255,255,0.80); opacity: 0.7; } .st-row .chev + .chev { margin-left: 8px; } .st-row .chev svg { display: block; } .st-row.focused .chev { color: #E7C184; } .st-row.k-danger .chev { color: #D98C6A; } .st-row .sw { position: relative; width: 80px; height: 44px; border-radius: 22px; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05); } .st-row .sw .kn { position: absolute; left: 6px; top: 6px; width: 32px; height: 32px; border-radius: 16px; background: rgba(255,255,255,0.52); } .st-row.on .sw { background: rgba(231,193,132,0.22); box-shadow: inset 0 0 0 2px rgba(231,193,132,0.38); } .st-row.on .sw .kn { left: 42px; background: #E7C184; } .st-row .pm { font-size: 36px; line-height: 1.366; font-weight: 500; color: rgba(255,255,255,0.52); } .st-row .track { position: relative; flex: none; width: 240px; height: 20px; margin: 0 16px; } .st-row .track + .pm { margin-right: 16px; } .st-row .track .rail { position: absolute; left: 0; top: 7px; width: 240px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.30); } .st-row .track .fill { position: absolute; left: 0; top: 7px; height: 6px; border-radius: 3px; background: rgba(231,193,132,0.38); } .st-row .track .knob { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 10px; background: #E7C184; } /* About's device card: 48 in; "Modern Player" 44 Bold and the version 30 Medium gold; the facts 36 Medium, labels at 0.70 */ .st-devcard { position: absolute; left: 0; width: 980px; } .st-devcard .head, .st-devcard .fact { position: absolute; left: 48px; right: 48px; display: flex; align-items: center; } .st-devcard .head { top: 48px; height: 60px; } .st-devcard .head .l { flex: 1 1 auto; font-size: 44px; line-height: 1.366; font-weight: 700; letter-spacing: -0.6px; color: #F2EFEA; white-space: nowrap; } .st-devcard .head .v { flex: none; margin-left: 24px; font-size: 30px; line-height: 1.366; font-weight: 500; letter-spacing: 0.2px; color: #E7C184; font-variant-numeric: tabular-nums; white-space: nowrap; } .st-devcard .fact { height: 49px; font-size: 36px; line-height: 1.366; font-weight: 500; letter-spacing: -0.2px; white-space: nowrap; } .st-devcard .fact .l { flex: 1 1 0; min-width: 0; overflow: hidden; color: rgba(242,239,234,0.70); } .st-devcard .fact .v { flex: 1 1 0; min-width: 0; margin-left: 24px; overflow: hidden; text-align: right; color: #F2EFEA; } .st-devcard .fact.dkey .v { color: #E7C184; font-variant-numeric: tabular-nums; } /* LIVE PREVIEW: the label, 12, the glass 704 × 396 r 16, 30, the dash, 19, "Title · value", 8, the words (six lines at most) */ .st-preview { position: absolute; width: 704px; } .st-preview > * { position: absolute; left: 0; } .st-preview .lbl { top: 0; font-size: 30px; line-height: 1.366; font-weight: 500; letter-spacing: 3.6px; color: #E7C184; white-space: nowrap; } .st-preview .glass { width: 704px; height: 396px; border-radius: 16px; overflow: hidden; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .st-preview .glass .edge { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: rgba(255,255,255,0.07); } .st-preview .stage { position: absolute; left: 0; top: 0; width: 704px; height: 396px; } .st-preview .stage svg { display: block; } .st-preview .clock, .st-preview .value { position: absolute; left: 40px; right: 40px; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .st-preview .clock .time { font-size: 104px; line-height: 1.366; font-weight: 800; letter-spacing: -2.4px; color: #F2EFEA; white-space: nowrap; font-variant-numeric: tabular-nums; } .st-preview .clock .date { margin-top: 8px; font-size: 36px; line-height: 1.366; font-weight: 500; letter-spacing: -0.2px; color: rgba(242,239,234,0.80); white-space: nowrap; } .st-preview .value .vl { font-size: 30px; line-height: 1.366; font-weight: 500; letter-spacing: 3.6px; color: #E7C184; white-space: nowrap; } .st-preview .value .vv { margin-top: 8px; font-size: 104px; line-height: 1.366; font-weight: 800; letter-spacing: -2.4px; color: #F2EFEA; white-space: nowrap; } .st-preview .dash { left: 4px; width: 44px; height: 3px; background: #E7C184; } .st-preview .cap { width: 704px; font-size: 44px; line-height: 1.366; font-weight: 700; letter-spacing: -0.6px; color: #F2EFEA; white-space: nowrap; overflow: hidden; } .st-preview .words { width: 704px; font-size: 30px; line-height: 40px; font-weight: 400; letter-spacing: 0.2px; color: rgba(242,239,234,0.80); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; max-height: 240px; } /* the question's consequence (MpConfirm body): 22 under the rule, 28 on 34, ink 0.72, centred */ .confirm .body { margin-top: 22px; font-size: 28px; line-height: 34px; padding: 2.12px 0; color: rgba(242,239,234,0.72); text-align: center; } /* the sheets: the checklist's sign 26 px 30 from the end; marked words dim; RESTORE gold; the order's count dim 34 from the end */ .st-check.accent .w { color: #E7C184; } .st-check.marked .w { color: rgba(255,255,255,0.52); } .st-check .sign { position: absolute; right: 30px; top: 25px; width: 26px; height: 26px; display: none; } .st-check.marked .sign { display: block; } .st-check .sign svg, .st-order .tail svg { display: block; } .st-order .w { right: 150px; } .st-order.lifted .w { color: #E7C184; } .st-order .tail { position: absolute; right: 34px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 34px; line-height: 1.366; font-weight: 600; letter-spacing: 0.2px; color: rgba(255,255,255,0.52); font-variant-numeric: tabular-nums; } .st-none { position: absolute; left: 28px; height: 76px; display: flex; align-items: center; font-size: 34px; font-weight: 600; letter-spacing: 0.2px; color: rgba(255,255,255,0.52); white-space: nowrap; } .st-pad { display: flex; flex-direction: column; align-items: center; } .st-pad .dots { display: flex; height: 32px; } .st-pad .dot { width: 32px; height: 32px; border-radius: 16px; box-sizing: border-box; border: 4px solid rgba(255,255,255,0.52); } .st-pad .dot + .dot { margin-left: 28px; } .st-pad .dots.tight .dot + .dot { margin-left: 16px; } .st-pad .dot.on { background: #E7C184; border-color: #E7C184; } .st-pad .status { margin-top: 16px; height: 41px; font-size: 30px; line-height: 1.366; letter-spacing: 0.2px; color: #D98C6A; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; } .st-pad .keys { position: relative; margin-top: 32px; } .st-pad .pk { position: absolute; } .st-pad .pk .g { position: relative; display: flex; } .st-pad .forgot { margin-top: 24px; } .st-plate { display: flex; flex-direction: column; align-items: center; } .st-plate .code { margin-bottom: 32px; font-size: 104px; line-height: 116px; font-weight: 800; letter-spacing: -2.4px; color: #E7C184; white-space: nowrap; font-variant-numeric: tabular-nums; } .st-plate .words { font-size: 28px; line-height: 34px; padding: 2.12px 0; color: rgba(242,239,234,0.70); text-align: center; } .st-plate .crys-key { margin-top: 48px; } .st-link { display: flex; flex-direction: column; align-items: center; } .st-link .hint { font-size: 28px; line-height: 34px; color: rgba(242,239,234,0.70); white-space: nowrap; } .st-link .qr { margin-top: 32px; padding: 16px; border-radius: 6px; background: #FFFFFF; } .st-link .qr svg { display: block; width: 400px; height: 400px; } .st-link .url { margin-top: 32px; font-size: 34px; line-height: 1.366; font-weight: 600; letter-spacing: 0.2px; color: #E7C184; white-space: nowrap; } .st-link .crys-key { margin-top: 48px; } /* A fact line is 42 tall on the stick (Diagnostics' eleven lines 57.9 apart, the test's five 58: crystalFactFace 30 on a 36 line, measured by MpFitText) — not the 41 of the face. */ .st-facts .fl { display: flex; align-items: center; height: 42px; font-size: 30px; line-height: 1.366; font-weight: 500; letter-spacing: 0.2px; white-space: nowrap; font-variant-numeric: tabular-nums; } .st-facts .fl + .fl { margin-top: 16px; } .st-facts .fl .l { flex: 1 1 0; min-width: 0; overflow: hidden; color: rgba(242,239,234,0.70); } .st-facts .fl .v { flex: 1 1 0; min-width: 0; margin-left: 24px; overflow: hidden; text-align: right; } .st-facts .v.ink { color: #F2EFEA; } .st-facts .v.accent { color: #E7C184; } .st-facts .v.bad { color: #D98C6A; } .st-facts .v.dim { color: rgba(255,255,255,0.52); } .st-facts .v.faint { color: rgba(255,255,255,0.30); } .st-ring { height: 36px; display: flex; justify-content: flex-end; margin-bottom: 16px; } .st-advice { margin-top: 32px; font-size: 28px; line-height: 34px; padding: 2.12px 0; color: rgba(255,255,255,0.52); max-height: 102px; overflow: hidden; } .st-advice.done { color: #F2EFEA; } .st-keys { position: relative; display: flex; justify-content: center; margin-top: 48px; } .st-keys .crys-key + .crys-key { margin-left: 24px; } /* ---- MV-9: the sleep timer's faces (SleepUi.kt) — over whatever holds the picture, every key theirs ---- */ .sleep-layer { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 40; } /* the countdown (SleepUi.Countdown): MP.type.display 52/58 sp → 104/116 px ExtraBold −2.4, one line in the face's own 1.366 em box (13.03 above and below); 12 dp; MP.type.body 18/28 sp → 36/56 px in Palette.dim — both on the type ladder */ .sleep-count .c { margin-top: 22px; font-size: calc(104px * var(--ts, 1)); line-height: calc(116px * var(--ts, 1)); padding: calc(13.03px * var(--ts, 1)) 0; font-weight: 800; letter-spacing: calc(-2.4px * var(--ts, 1)); color: #FFFFFF; text-align: center; white-space: nowrap; } .sleep-count .w { margin-top: 24px; font-size: calc(36px * var(--ts, 1)); line-height: calc(56px * var(--ts, 1)); font-weight: 400; color: rgba(255,255,255,0.52); text-align: center; } /* ---- MV-9 · SETTINGS · APPEARANCE (ui/appearance.ts — Theme.kt) ---- REDUCE ANIMATIONS (.calm, Motion.reduced): every transition here that is a house motion token — move 100, appear 150, screen 220, flip 80 — is 0, and so are the places Android names by hand (the film page's stills cut). What is a clock and not a decoration keeps its time: the pill's countdown line, the loading ring, the wait's thread, the library's wash (WASH_FADE_MILLIS, its own constant), the question's entry (MpConfirm's own 200 ms). */ .calm .confirm .answer, .calm .live .picture .cover, .calm .fosd, .calm .fosd .keys, .calm .fosd .ftitle, .calm .fosd .rail .line, .calm .fosd .rail .knob, .calm .fpill, .calm .fpill.up, .calm .epanel, .calm .epanel .etile, .calm .cpanel .ctile, .calm .crys .lit, .calm .st-pane, .calm .st-pane.shown, .calm .home .held, .calm .gthread .fill, .calm .film .froom .still { transition: none; } .calm .ppanel .soft, .calm .cpanel .soft, .calm .cpanel .track { transition: none !important; } /* HIGH CONTRAST TEXT (.hc, Palette.highContrast): only the three secondary inks step up — body 0.80 → 0.92, dim 0.52 → 0.70, faint 0.30 → 0.45 — where the Android screen draws them (SettingsRow, SettingsAbout, SettingsChecklist, SettingsFolderOrder, SettingsNetworkTest, CrystalPanel's quiet keys, the PIN pad's FORGOT, CatchUpPanel's empty day, LibraryScreen's search prompt, SleepUi's words). */ .hc .st-row.k-action .v, .hc .st-row .pm, .hc .st-none, .hc .st-facts .v.dim, .hc .st-advice:not(.done), .hc .crys-key .w.quiet, .hc .sleep-count .w { color: rgba(255,255,255,0.70); } .hc .st-row:not(.on) .sw .kn { background: rgba(255,255,255,0.70); } .hc .st-row.k-info .v, .hc .st-row:not(.focused):not(.k-danger) .chev, .hc .cpanel .empty { color: rgba(255,255,255,0.92); } .hc .st-facts .v.faint, .hc .lib .bar .search:not(.held) .hint, .hc .lib .fsearch:not(.held) .hint { color: rgba(255,255,255,0.45); } .hc .st-row .track .rail { background: rgba(255,255,255,0.45); } /* LARGE TEXT (.large, Typography.scaled(1.15)): the house's type ladder — and only it — a step up: font-size and line height × --ts (tracking stays; the measured MP.ob roles and frame px stay). The texts that stand on MP.type in the Android screens this TV has: the page lines (Settings, Playlists, the gate), the Settings legend, hub cards, eyebrows, rows, the About card, the previews, Live TV's figures, guide times and day word, the LIVE pill, the dial, the empty day, the sleep timer's countdown (its own rule). Script-fitted text and the rows' seats ask typeScale() (ui/appearance.ts). */ .large .pageline, .large .st-legend, .large .st-card .fact, .large .st-eyebrow, .large .st-row .t, .large .st-row .v, .large .st-devcard .head .v, .large .st-preview .lbl, .large .st-preview .value .vl, .large .live .frow .count, .large .live .crow .number, .large .live .grow .time, .large .live .guide .crossed, .large .live .livepill span, .large .cpanel .empty { font-size: calc(30px * var(--ts)); } .large .st-row .pm, .large .st-devcard .fact, .large .st-preview .clock .date { font-size: calc(36px * var(--ts)); } .large .st-card .nm, .large .st-devcard .head .l, .large .st-preview .cap { font-size: calc(44px * var(--ts)); } .large .st-preview .clock .time, .large .st-preview .value .vv, .large .dialplate { font-size: calc(104px * var(--ts)); } .large .st-card .nm { line-height: calc(60.1px * var(--ts)); } .large .st-card .nm.two { line-height: calc(56px * var(--ts)); max-height: calc(112px * var(--ts)); } .large .st-card .fact, .large .st-eyebrow { height: calc(41px * var(--ts)); } .large .st-devcard .fact { height: calc(49px * var(--ts)); } .large .st-devcard .head { height: calc(60px * var(--ts)); } .large .st-preview .words { font-size: calc(30px * var(--ts)); line-height: calc(40px * var(--ts)); max-height: calc(240px * var(--ts)); } .large .cpanel .empty { line-height: calc(40px * var(--ts)); } .large .dialplate { line-height: calc(116px * var(--ts)); } /* ============================================================ MODERN · SEARCH — SearchScreen.kt / SearchKeyboard.kt (src/screens/search.ts places every seat; frame px) ============================================================ */ /* The Search page only — a bare `.search` also painted Home's search seat solid black (owner, 21 Oct: "kao da ima crno skroz iza"), the seat is the header's glass like the other three. */ .page.search { background: #000; } .soft-room { left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; } .soft-room > * { position: absolute; left: 0; top: 0; } .soft-room .soft-veil { width: 1920px; height: 1080px; } /* The house room: its 480 × 270 picture scaled by the compositor (softRoom.ts) — a texture, never 40 tiles. */ .soft-room .soft-house { width: 480px; height: 270px; transform: scale(4); transform-origin: 0 0; will-change: transform; } .soft-room .soft { width: 320px; height: 180px; transform: scale(6); transform-origin: 0 0; opacity: 0; will-change: opacity, transform; } .soft-room .soft.up { opacity: 1; } .sr-legend { left: 96px; top: 1010px; height: 40px; line-height: 40px; font-size: 22px; letter-spacing: 0.2px; color: rgba(242,239,234,0.70); white-space: nowrap; } /* the field wears the keys' crystal: the glass 0.62, a white lift 0.04, the brighter rim 0.22 */ .sr-field { left: 96px; top: 150px; width: 624px; height: 72px; box-sizing: border-box; padding: 0 22px; border-radius: 12px; display: flex; align-items: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22); background: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)), rgba(0,0,0,0.62); } .sr-field > svg { flex: none; display: block; margin-right: 16px; } .sr-words { flex: 0 1 auto; min-width: 0; display: flex; overflow: hidden; white-space: nowrap; } .sr-words.long { justify-content: flex-end; } .sr-hint { font-size: 28px; color: rgba(242,239,234,0.45); overflow: hidden; text-overflow: ellipsis; } .sr-query { flex: none; font-size: 44px; font-weight: 700; letter-spacing: -1.2px; color: #F2EFEA; } .sr-caret { flex: none; width: 3px; height: 40px; margin-left: 6px; background: #E7C184; } /* Nothing typed: the caret before the hint, where the first letter will stand (owner, 21 Oct 2026). */ .sr-field.empty > svg { order: -2; } .sr-field.empty .sr-caret { order: -1; margin-left: 0; margin-right: 12px; } /* the keys: 57 × 72, r 12, the crystal a step brighter; ENTER in gold (0.16 and a gold rim 0.60) */ .sr-key { height: 72px; box-sizing: border-box; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #F2EFEA; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22); background: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)), rgba(0,0,0,0.62); } .sr-key::before, .sr-chip::before, .sr-rchip::before, .sr-found::before, .sr-poster .art::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; border-radius: inherit; background: rgba(255,255,255,0.07); } .sr-key.focused { background: rgba(0,0,0,0.62); color: #E7C184; } .sr-key.enter { color: #E7C184; box-shadow: inset 0 0 0 2px rgba(231,193,132,0.60); background: linear-gradient(rgba(231,193,132,0.16), rgba(231,193,132,0.16)), rgba(0,0,0,0.62); } .sr-key .ch { font-size: 40px; font-weight: 600; letter-spacing: 0.2px; line-height: 1; } .sr-key .ch.digit { font-size: 38px; } .sr-key .gl { display: flex; } .sr-key .gl svg { display: block; } .sr-key .gl.lit { color: #E7C184; } .sr-key .space { font-size: 26px; font-weight: 600; letter-spacing: 4px; line-height: 1; } .sr-key .enter-w { margin-left: 17px; font-size: 28px; font-weight: 600; letter-spacing: 3px; line-height: 1; color: #E7C184; } .sr-recent-label { left: 96px; height: 40px; line-height: 40px; font-size: 26px; letter-spacing: 0.2px; color: rgba(242,239,234,0.50); white-space: nowrap; } .sr-recent { left: 96px; width: 760px; height: 56px; } /* the house crystal (CrystalBox): glass 0.58, rim 0.14, r 20, the 1 dp of light on top */ .sr-rchip, .sr-chip, .sr-found { position: absolute; box-sizing: border-box; border-radius: 20px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); color: #F2EFEA; } .sr-rchip { top: 0; width: 170px; height: 56px; padding: 0 14px; display: flex; align-items: center; justify-content: center; } .sr-rchip .w { font-size: 26px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-rchip.focused .w { color: #E7C184; } .sr-answer { left: 768px; top: 150px; width: 1056px; height: 840px; overflow: hidden; } .sr-content { position: absolute; left: 0; top: 0; width: 1056px; height: 1px; will-change: transform; } .sr-content > * { position: absolute; } .sr-chip { top: 0; width: 150px; height: 48px; padding: 0 14px; display: flex; align-items: center; justify-content: center; } .sr-chip .w { font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; } .sr-chip.gold .w, .sr-chip.focused .w { color: #E7C184; } .sr-nothing { left: 0; font-size: 36px; line-height: 56px; color: rgba(242,239,234,0.70); white-space: nowrap; } .sr-eyebrow { left: 0; height: 61px; } .sr-eyebrow .w { display: block; height: 40px; line-height: 40px; font-size: 30px; font-weight: 500; letter-spacing: 3.6px; color: #E7C184; white-space: nowrap; font-variant-numeric: tabular-nums; } .sr-eyebrow .dash { display: block; margin-top: 4px; width: 44px; height: 3px; background: #E7C184; } .sr-found { height: 64px; padding: 0 18px; display: flex; align-items: center; } .sr-found .logo { flex: none; width: 40px; height: 40px; margin-right: 18px; border-radius: 8px; background: #263A5C; overflow: hidden; display: flex; align-items: center; justify-content: center; } .sr-found .logo img { display: block; max-width: 32px; max-height: 32px; } .sr-found .when { flex: none; min-width: 160px; margin-right: 18px; font-size: 20px; letter-spacing: 0.2px; color: rgba(242,239,234,0.60); white-space: nowrap; font-variant-numeric: tabular-nums; } .sr-found .detail { flex: none; font-size: 22px; font-weight: 600; color: rgba(242,239,234,0.60); white-space: pre; } .sr-found .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; font-weight: 600; letter-spacing: 0.2px; } .sr-found.setting .name { font-size: 22px; } .sr-found .quiet { font-weight: 400; color: rgba(242,239,234,0.60); } .sr-found.focused .name { color: #E7C184; } .sr-found.focused .quiet { color: rgba(242,239,234,0.60); } .sr-found .lock, .sr-poster .lock { flex: none; width: 22px; height: 22px; margin-left: 18px; } .sr-found .lock svg, .sr-poster .lock svg { display: block; } .sr-found .tag { flex: none; width: 114px; height: 28px; margin-left: 18px; box-sizing: border-box; padding: 0 8px; border-radius: 14px; box-shadow: inset 0 0 0 2px #E7C184; color: #E7C184; display: flex; align-items: center; justify-content: center; font-weight: 600; white-space: nowrap; overflow: hidden; } .sr-poster { width: 150px; height: 268px; } .sr-poster .art { position: relative; width: 150px; height: 220px; border-radius: 20px; overflow: hidden; background: #263A5C; } .sr-poster .art::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .sr-poster .art img { display: block; width: 150px; height: 220px; object-fit: cover; } .sr-poster .lock { position: absolute; right: 4px; top: 4px; margin: 0; z-index: 1; } .sr-poster .nm { margin-top: 8px; width: 150px; height: 40px; line-height: 40px; font-size: 18px; font-weight: 500; letter-spacing: 0.2px; color: rgba(242,239,234,0.80); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ A PANEL OVER HOME — HomePanelBackdrop + BrandStay: the picture on screen soft under Search's veil, Home's outlines blurred a third back over it, the brand plate crisp over everything (R3-V11: above the panel too). ============================================================ */ .home-over { left: 0; top: 0; width: 1920px; height: 1080px; z-index: 40; } .home-over > * { position: absolute; left: 0; top: 0; } .home-layer { width: 1920px; height: 1080px; } .home-chrome { width: 1920px; height: 0; } .home-chrome > * { position: absolute; } /* ============================================================ MODERN · NOTIFICATIONS — NoticesPanel.kt (src/screens/noticesPanel.ts; frame px) ============================================================ */ .nt-words { display: flex; align-items: flex-end; } .nt-word { display: flex; flex-direction: column; padding-right: 46px; } .nt-word .w { font-size: 26px; line-height: 36px; font-weight: 500; color: rgba(242,239,234,0.66); white-space: pre; } .nt-word.on .w { font-weight: 600; color: rgba(231,193,132,0.92); } .nt-word.focused .w { font-weight: 600; color: #E7C184; } .nt-word .line { display: block; height: 3px; margin-top: 8px; background: transparent; } .nt-word.on .line { background: #E7C184; } /* Delete all — the row's fourth word, in the page's live red (the owner, 23 Oct 2026); dim while nothing is held */ .nt-word.del .w { color: rgba(229,72,77,0.74); } .nt-word.del.focused .w { font-weight: 600; color: #E5484D; } .nt-word.del.focused .line { background: #E5484D; } .nt-word.del.off .w { color: rgba(229,72,77,0.34); } .nt-rule { margin-top: 10px; height: 2px; background: rgba(242,239,234,0.12); } .nt-field { position: relative; margin-top: 24px; } .nt-list { position: absolute; left: 0; top: 0; } .nt-row, .nt-empty { position: relative; box-sizing: border-box; height: 96px; margin-bottom: 12px; border-radius: 18px; display: flex; align-items: center; padding: 0 24px; } .nt-row { background: rgba(0,0,0,0.48); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .nt-row::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; border-radius: inherit; background: rgba(255,255,255,0.07); } .nt-empty { font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: 0.2px; color: rgba(242,239,234,0.56); } .nt-seal { flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .nt-seal svg { display: block; } .nt-row .nt-seal { margin-right: 20px; } .nt-row-words { flex: 1 1 auto; min-width: 0; } .nt-row-title { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: 0.2px; color: #F2EFEA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nt-row-title.read { color: rgba(242,239,234,0.74); } .nt-row-meta { font-size: 22px; line-height: 34px; color: rgba(242,239,234,0.56); white-space: pre; overflow: hidden; text-overflow: ellipsis; } .nt-dot { flex: none; width: 11px; height: 11px; margin-left: 20px; border-radius: 50%; background: #E7C184; } .nt-detail { position: absolute; top: 0; width: 784px; height: 636px; border-radius: 20px; padding: 36px; display: flex; flex-direction: column; } .nt-d-top { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .nt-d-head { display: flex; align-items: center; } .nt-d-eye { flex: 1 1 auto; } .nt-d-eye .w { font-size: 22px; line-height: 34px; font-weight: 600; letter-spacing: 2.4px; color: #E7C184; white-space: nowrap; } .nt-d-eye .line { display: block; width: 44px; height: 3px; margin-top: 8px; background: #E7C184; } /* measured on the stick: Compose gives a 40 px line of Manrope its whole face (1.366 × size), 3 px over and 5 under the 48 */ .nt-d-title { margin-top: 33px; margin-bottom: 5px; font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -1.2px; color: #F2EFEA; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 96px; } .nt-d-when { font-size: 22px; line-height: 34px; color: rgba(242,239,234,0.56); white-space: pre; } .nt-d-rule { margin: 22px 0; height: 2px; flex: none; background: rgba(242,239,234,0.12); } .nt-d-body { flex: 1 1 auto; min-height: 0; font-size: 29px; line-height: 46px; color: rgba(242,239,234,0.86); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; max-height: 276px; } .nt-d-empty { font-size: 28px; line-height: 34px; color: rgba(242,239,234,0.86); } .nt-d-keys { display: flex; flex: none; } .nt-d-keys .crys-key + .crys-key { margin-left: 24px; } /* the once-only card (NoticeCard.kt, ActivationCard.kt): 920 wide, 44 in, r 24 */ .nt-card-field { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; display: flex; align-items: center; justify-content: center; } .nt-card { position: relative; width: 920px; box-sizing: border-box; border-radius: 24px; overflow: hidden; background: rgba(0,0,0,0.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16); } .nt-card > .edge { display: block; height: 2px; background: rgba(255,255,255,0.07); } .nt-card-in { padding: 44px; } .nt-card-head { display: flex; align-items: center; } .nt-card-head .nt-seal { margin-right: 24px; } .nt-card-title { font-size: 42px; line-height: 50px; font-weight: 600; letter-spacing: -1.2px; color: #F2EFEA; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 100px; } .nt-card-body { margin-top: 34px; font-size: 30px; line-height: 46px; color: rgba(242,239,234,0.86); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 138px; } .nt-card-lines { margin-top: 30px; } .nt-card-line { display: flex; align-items: center; padding: 6px 0; font-size: 28px; line-height: 34px; } .nt-card-line .l { flex: 1 1 auto; color: rgba(242,239,234,0.62); } .nt-card-line .v { font-weight: 600; color: #F2EFEA; } .nt-card-keep { margin-top: 22px; font-size: 26px; line-height: 38px; color: #D9B87A; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 114px; } .nt-card-key { display: flex; justify-content: center; margin-top: 44px; } .nt-card.activation .nt-card-key { margin-top: 36px; } .nt-card-foot { display: flex; justify-content: center; align-items: center; margin-top: 30px; font-size: 22px; line-height: 34px; color: rgba(242,239,234,0.55); } .nt-card.activation .nt-card-foot { margin-top: 26px; } .nt-card-foot .b { display: flex; margin-right: 10px; } /* A WORD FROM THE PANEL (29 Oct 2026): the sender in the house gold above the words; more of the words stand. */ .nt-card-from { margin-top: 30px; font-size: 26px; line-height: 34px; font-weight: 600; color: #D9B87A; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nt-card.message .nt-card-from + .nt-card-body { margin-top: 10px; } .nt-card.message .nt-card-body { -webkit-line-clamp: 7; max-height: 322px; } .nt-card-foot .b svg { display: block; } /* the bell's dot (HomeScreen.kt): 11 px of colour on a 15 px black ring, up and right of the bell's middle */ .home .bell-dot { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: rgba(0,0,0,0.85); transform: translate(10px, -12px); display: none; } .home .bell-dot i { position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #E7C184; } .home .bell-dot.on { display: block; } .home .bell-dot.urgent i { background: #D98C6A; } /* ============================================================ MODERN · GUIDE (GuideScreen.kt, sketch guide-V1) ============================================================ */ /* The Guide PAGE only (18 Oct, the owner's photo: the live full screen's panel black from its rule down — the OSD's own "guide" row wore this page's black ground). */ .page.guide { background: #000; overflow: hidden; } .guide .veil { background: rgba(0,0,0,0.44); } /* THE TV'S COST (the Samsung, 17 Oct: a step painted 240–430 ms while the room shared a layer with the rows): the room and its veil one layer, painted once; the rows, the ruler and the plate a layer each — a step repaints the two cells and the channel it touches inside the rows' layer, never the picture under them. */ .guide .room, .guide .veil { will-change: transform; } .guide .gd-rows, .guide .gd-plate, .guide .gd-ruler, .guide .gd-head { will-change: transform; } .guide .gd-mark { right: 15px; top: 22px; height: 90px; } .guide .gd-pill { top: 128px; height: 50px; box-sizing: border-box; border-radius: 12px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); display: flex; align-items: center; } .guide .gd-pill::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; background: rgba(255,255,255,0.07); } /* ---- THE GUIDE'S HEAD (ui/guideHead.ts — the TV Guide's and Sports Guide's, in the same places, 22 Oct 2026): the eyebrow, the switch (a crystal pill, the half on screen filled with the accent), the days, the logo — one layer, painted once; a day chosen repaints its chips only ---- */ .gh-head { left: 0; top: 0; width: 1920px; height: 120px; will-change: transform; } .gh-head > * { position: absolute; } .gh-switch { top: 34px; height: 72px; box-sizing: border-box; border-radius: 36px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .gh-switch::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 2px; background: rgba(255,255,255,0.07); } .gh-key { top: 40px; height: 60px; box-sizing: border-box; border-radius: 30px; display: flex; align-items: center; padding: 0 28px; } .gh-key .g { flex: none; display: flex; width: 30px; height: 30px; margin-right: 12px; } .gh-key .g svg { display: block; } .gh-key .w { font-size: 26px; font-weight: 700; color: rgba(242,239,234,0.86); white-space: nowrap; } .gh-key.on { background: #E7C184; } .gh-key.on .w { color: #14100B; } .gh-days { left: 0; top: 0; width: 1920px; height: 120px; } .gh-days > * { position: absolute; } .gh-chip { top: 42px; height: 56px; line-height: 56px; box-sizing: border-box; border-radius: 14px; text-align: center; font-size: 24px; font-weight: 600; color: rgba(242,239,234,0.72); white-space: nowrap; } .gh-chip.on { font-weight: 800; color: #E7C184; background: rgba(231,193,132,0.16); box-shadow: inset 0 0 0 2px rgba(231,193,132,0.55); } /* the column words and the ruler's hours on one baseline: a Compose line of Manrope is its whole face (1.366 × size) */ .guide .gd-col-word { top: 199px; height: 27px; line-height: 27px; font-size: 20px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; } .guide .gd-folders { left: 76px; top: 250px; width: 272px; height: 686px; overflow: hidden; } .guide .gd-folders .inner { position: absolute; left: 0; top: 0; width: 272px; will-change: transform; } .guide .gd-folder { position: absolute; left: 0; width: 272px; height: 66px; border-radius: 12px; } .guide .gd-folder > * { position: absolute; } .guide .gd-folder.open { background: linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)), rgba(0,0,0,0.58); } .guide .gd-folder .thread { display: none; left: 8px; top: 13px; width: 4px; height: 40px; border-radius: 2px; background: rgba(231,193,132,0.95); } .guide .gd-folder.open .thread { display: block; } .guide .gd-folder .name { left: 24px; top: 0; height: 66px; line-height: 66px; font-size: 22px; font-weight: 500; color: rgba(242,239,234,0.9); white-space: nowrap; } .guide .gd-folder.open .name { color: #FFFFFF; } .guide .gd-folder .lane { left: 196px; top: 14px; width: 2px; height: 38px; background: rgba(150,160,178,0.45); } .guide .gd-folder .count { right: 18px; top: 0; height: 66px; line-height: 66px; font-size: 22px; font-weight: 600; color: rgba(242,239,234,0.62); } .guide .gd-folder.open .count { color: #E7C184; } .guide .gd-rows { left: 0; top: 0; width: 1920px; height: 1080px; } .guide .gd-rows > * { position: absolute; } .guide .gd-channel { left: 372px; width: 384px; height: 66px; border-radius: 12px; } .guide .gd-channel > * { position: absolute; } .guide .gd-channel.context { background: linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)), rgba(0,0,0,0.58); } .guide .gd-channel .no { left: 18px; top: 0; width: 60px; height: 66px; line-height: 66px; font-size: 24px; font-weight: 600; color: rgba(242,239,234,0.62); } .guide .gd-channel.context .no { color: #E7C184; } .guide .gd-channel .logo { left: 78px; top: 18px; width: 44px; height: 30px; box-sizing: border-box; border-radius: 6px; background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; overflow: hidden; } .guide .gd-channel .logo img { display: none; width: 26px; height: 26px; object-fit: contain; } .guide .gd-channel .logo.in img { display: block; } .guide .gd-channel .logo.in b { display: none; } .guide .gd-channel .logo b { font-size: 11px; font-weight: 800; color: rgba(242,239,234,0.55); } .guide .gd-channel .name { left: 136px; top: 0; height: 66px; line-height: 66px; font-size: 22px; font-weight: 500; color: rgba(242,239,234,0.9); white-space: nowrap; } .guide .gd-channel.context .name { color: #FFFFFF; } .guide .gd-line { left: 780px; width: 1064px; height: 66px; } .guide .gd-cell { position: absolute; top: 0; height: 66px; border-radius: 12px; overflow: hidden; } .guide .gd-cell.gap { background: rgba(0,0,0,0.348); } .guide .gd-cell.past { background: rgba(0,0,0,0.464); } .guide .gd-cell.on { background: linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)), rgba(0,0,0,0.58); } .guide .gd-cell .words { position: absolute; left: 16px; right: 12px; top: 0; height: 66px; display: flex; align-items: center; } .guide .gd-cell .t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 21px; font-weight: 500; color: rgba(242,239,234,0.9); } .guide .gd-cell .t.fill { flex: 1 1 auto; } .guide .gd-cell.gap .t { color: rgba(242,239,234,0.45); } .guide .gd-cell.past .t { color: rgba(242,239,234,0.72); } .guide .gd-cell.on .t, .guide .gd-cell.lit .t { color: #FFFFFF; } .guide .gd-cell .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-left: 12px; background: rgba(231,193,132,0.95); } /* THE BALL (the owner, 22 Oct 2026: "ostavi loptu"): a match Sports Guide reads, 22 px in the accent at the cell's end */ .guide .gd-cell .ball { flex: none; width: 22px; height: 22px; margin-left: 10px; background: rgba(231,193,132,0.95); -webkit-mask: url("data:image/svg+xml;utf8,") center / 22px 22px no-repeat; } .guide .gd-cell .progress { position: absolute; left: 12px; bottom: 0; height: 3px; border-radius: 1.5px; background: rgba(231,193,132,0.9); } .guide .gd-ruler { left: 780px; top: 200px; width: 1064px; height: 40px; } .guide .gd-ruler > * { position: absolute; } .guide .gd-ruler .marks { left: 0; top: 0; width: 1064px; height: 40px; } .guide .gd-ruler .marks > * { position: absolute; } .guide .gd-ruler .hour { top: -1px; height: 27px; line-height: 27px; font-size: 20px; font-weight: 500; letter-spacing: 1px; color: rgba(242,239,234,0.62); white-space: nowrap; } .guide .gd-ruler .tick { top: 32px; width: 2px; height: 8px; background: rgba(242,239,234,0.35); } .guide .gd-ruler .line { left: 0; top: 38px; width: 1064px; height: 2px; background: rgba(242,239,234,0.12); } .guide .gd-ruler .now-label { top: 0px; width: 80px; height: 27px; line-height: 27px; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: 1px; color: #E7C184; white-space: nowrap; } .guide .gd-now-line { top: 250px; width: 2px; background: rgba(231,193,132,0.85); } .guide .gd-now-head { top: 236px; width: 10px; height: 8px; border-radius: 2px; background: rgba(231,193,132,0.95); } .guide .gd-empty { left: 372px; top: 200px; width: 1472px; height: 736px; display: flex; flex-direction: column; justify-content: center; } .guide .gd-empty .t { font-size: 34px; line-height: 46px; font-weight: 600; color: #F2EFEA; } .guide .gd-empty .d { margin-top: 12px; font-size: 24px; line-height: 33px; color: rgba(242,239,234,0.7); } .guide .gd-plate { left: 76px; top: 936px; width: 1768px; height: 104px; border-radius: 14px; background: rgba(0,0,0,0.55); display: flex; align-items: center; padding: 0 34px; } .guide .gd-plate .head { flex: none; width: 452px; display: flex; flex-direction: column; justify-content: center; } .guide .gd-plate .title { font-size: 30px; line-height: 41px; font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; } .guide .gd-plate .title.none { color: rgba(242,239,234,0.55); } .guide .gd-plate .meta { margin-top: 6px; font-size: 20px; line-height: 27px; color: rgba(242,239,234,0.62); white-space: pre; overflow: hidden; text-overflow: ellipsis; } .guide .gd-plate .meta:empty { display: none; } .guide .gd-plate .words { flex: 1 1 auto; min-width: 0; margin-left: 34px; font-size: 22px; line-height: 27px; color: rgba(242,239,234,0.86); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 54px; } .guide .gd-plate .gkey { flex: none; margin-left: 34px; display: flex; align-items: center; } .guide .gd-plate .gkey:empty { display: none; } .guide .gd-plate .ok { font-size: 16px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.9); margin-right: 22px; } .guide .gd-plate .gd-key { position: relative; top: auto; width: 276px; height: 56px; justify-content: center; } .guide .gd-plate .gd-key .w { font-size: 22px; font-weight: 600; color: rgba(242,239,234,0.95); white-space: nowrap; } .guide .gd-plate .quiet { font-size: 22px; font-weight: 500; color: rgba(242,239,234,0.62); white-space: nowrap; } .guide .gd-cursor { left: 0; top: 0; width: 0; height: 0; } /* ---- MV-11: a locked folder's pad (ParentalPad.kt LockedFolderPad) — over every page and player while it stands, under the sleep timer's faces; the page's own shade 0.62 (not blurred), the Settings pad on the crystal over it ---- */ .padhost { z-index: 39; } .door-pad { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; } .door-pad .shade { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: rgba(0,0,0,0.62); } /* ARABIC IS NEVER SPACED (Codex S14, 19 Oct): Chromium 69 puts letter-spacing between Arabic letters and tears the joined word apart; Android's text engine never spaces a cursive script (Minikin, isLetterSpacingCapableScript), so the Android TV shows Arabic unspaced — and the layout is not mirrored there either (supportsRtl="false"), as here. Over every rule and every spacing set by script (the film page's fitted names). */ html[lang="ar"] * { letter-spacing: 0 !important; } /* ============================================================ HOME · THE OTHER LAYOUTS (22 Oct 2026 — Cards, Worlds, Panels; screens/home*.ts) and their shared parts. The brand plate, the header, the clock, the plan pill and the corner facts are Classic's own rules above. ============================================================ */ /* the eyebrow's quieter half (CONTINUE WATCHING · LIVE TV) */ .home .hl-eyebrow .s { color: rgba(242,239,234,0.45); } /* A BOX THAT LIGHTS ITSELF (Cards' cards, every box of Worlds — a page that moves under the hand carries no cursor): the gold ring, its own layer, flips with the focus — the compositor's alone. Where the gold line walks (Cards' Continue Watching, Panels), the ring stays out. */ .home .ring { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 3px #E7C184; opacity: 0; will-change: opacity; } .home .focused > .ring { opacity: 0.999; } .lay-cards .ch-card > .ring, .lay-panels .ch-card > .ring, .lay-panels .ps-box > .ring { display: none; } /* ---- the channel card (Continue Watching, every layout but Classic) ---- */ .home .ch-card { --glass: 0.5; border-radius: 16px; overflow: hidden; } .home .ch-card.big { border-radius: 18px; } .home .ch-card > * { position: absolute; } .home .ch-card > .lift { background: rgba(255,255,255,0.05); } .home .ch-card .plate { display: flex; align-items: center; justify-content: center; padding: 0 12px; min-width: 64px; box-sizing: border-box; border-radius: 10px; background: rgba(0,0,0,0.45); } .home .ch-card .plate img { display: none; max-width: 170px; object-fit: contain; } .home .ch-card .plate.in img { display: block; } .home .ch-card .plate .ini { font-size: 20px; font-weight: 800; letter-spacing: 1px; color: rgba(242,239,234,0.85); } .home .ch-card .plate.in .ini { display: none; } .home .ch-card .chip { min-width: 44px; padding: 0 10px; box-sizing: border-box; border-radius: 9px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #F2EFEA; font-variant-numeric: tabular-nums; } .home .ch-card .name { font-weight: 800; color: #F2EFEA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home .ch-card .now { font-weight: 600; color: rgba(242,239,234,0.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home .ch-card .now .nw { color: #E7C184; font-weight: 800; letter-spacing: 0.1em; margin-right: 10px; } .home .ch-card .now.quiet { color: rgba(242,239,234,0.55); } .home .ch-card .span { display: flex; justify-content: space-between; font-size: 19px; color: rgba(242,239,234,0.6); font-variant-numeric: tabular-nums; white-space: nowrap; } .home .ch-card .rule, .home .on-box .rule { border-radius: 4px; overflow: hidden; background: rgba(242,239,234,0.18); } .home .ch-card .rule > i, .home .on-box .rule > i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #E7C184; transform-origin: left center; transform: scaleX(0); } /* ---- the poster box (Recently added: Worlds with its caption, Panels bare) ---- */ .home .ps-box { --glass: 0.62; border-radius: 16px; overflow: hidden; } .home .ps-box > * { position: absolute; } .home .ps-box .pic { left: 0; top: 0; width: 100%; background: rgba(27,40,62,0.62); overflow: hidden; } .home .ps-box .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: none; } .home .ps-box .pic img.in { display: block; } .home .ps-box .art { position: absolute; left: 14px; right: 14px; bottom: 16px; font-size: 22px; font-weight: 700; color: rgba(242,239,234,0.8); } .home .ps-box .new { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 6px; background: #E7C184; color: #14100B; font-size: 15px; font-weight: 800; letter-spacing: 1.2px; } .home .ps-box .cap { left: 0; right: 0; bottom: 0; padding: 14px 16px 0; box-sizing: border-box; border-top: 2px solid rgba(255,255,255,0.08); } .home .ps-box .cap .t { font-size: 22px; font-weight: 700; color: #F2EFEA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home .ps-box .cap .m { margin-top: 4px; font-size: 18px; color: rgba(242,239,234,0.58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- CARDS: six cards along the foot, the one under the hand risen 18 with its ring ---- */ /* The glass .40, once .46 (22 Oct 2026, the owner: "ove dole kutije … ostavi u ovoj boji ali napravi malo providnije … ne vidi se ništa iza"): with the shade under them made lighter too (dev/home_shades.py, cards) the room is seen through the same dark tone. */ .home .hl-card { --glass: 0.40; border-radius: 24px; will-change: transform; transform: translateY(0px); } .home .hl-card.focused { transform: translateY(-18px); } .home .hl-card > * { position: absolute; } .home .hl-card > .lift { background: rgba(255,255,255,0.085); } .home .hl-card.focused > .lift { opacity: 0.999; } .home .hl-card .ct { left: 30px; right: 22px; top: 38px; font-size: 42px; font-weight: 800; letter-spacing: -0.4px; color: #F2EFEA; white-space: nowrap; overflow: hidden; } .home .hl-card .cs { left: 30px; right: 22px; top: 96px; font-size: 25px; font-weight: 500; color: rgba(242,239,234,0.62); white-space: nowrap; overflow: hidden; } /* Live TV's foot: 40 over the screen's foot (the card runs 30 under it) */ .home .hl-card .live { left: 30px; right: 26px; bottom: 70px; } .home .hl-card .lh { display: flex; align-items: center; font-size: 20px; font-weight: 800; letter-spacing: 2.4px; color: #E7C184; } .home .hl-card .ldot { width: 12px; height: 12px; border-radius: 50%; background: #E5484D; margin-right: 12px; flex: none; } .home .hl-card .lp { margin-top: 10px; font-size: 26px; font-weight: 700; color: #F2EFEA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home .hl-card .lc { margin-top: 4px; font-size: 21px; color: rgba(242,239,234,0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home .hl-card .lr { position: relative; margin-top: 14px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(242,239,234,0.18); } .home .hl-card .lr > i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #E7C184; transform-origin: left center; transform: scaleX(0); } /* Settings' foot: the ID over the site, centred, 20 over the screen's foot — Classic's corner words */ /* The ID and the site 10 lower (the owner, 22 Oct 2026: "spusti ga za nijansu dole još par milimetara"): their foot 1070, 10 over the screen's foot (the card runs 30 under it). */ .home .hl-card .facts { left: 0; right: 0; bottom: 40px; display: flex; flex-direction: column; align-items: center; } .home .hl-card .facts .line { display: flex; align-items: center; white-space: nowrap; } .home .hl-card .facts .line.site { margin-top: 8px; } .home .hl-card .facts .lane { flex: none; display: flex; align-items: center; font-size: 20px; font-weight: 800; color: rgba(242,239,234,0.92); } .home .hl-card .facts .site .lane { color: rgba(242,239,234,0.78); } .home .hl-card .facts .lane svg { display: block; width: 20px; height: 20px; } .home .hl-card .facts .id { margin-left: 6px; font-size: 20px; font-weight: 500; letter-spacing: 0.6px; color: rgba(242,239,234,0.86); } .home .hl-card .facts .address { margin-left: 4px; font-size: 20px; font-weight: 400; color: rgba(242,239,234,0.78); } /* ---- PANELS: Classic's rows a step smaller; the boxes of On now ---- */ /* the glass a step firmer than Classic's on the other layouts' faded room (the owner, 22 Oct 2026: the words on it read as cleanly as on Home A) */ .lay-panels .row { --glass: 0.42; } .lay-panels .row-title { font-size: 42px; } .lay-panels .row-count { font-size: 26px; } .home .on-box { --glass: 0.5; border-radius: 16px; } .home .on-box > * { position: absolute; } .home .on-box > .lift { background: rgba(255,255,255,0.05); } .home .on-box .plate { left: 20px; top: 19px; width: 92px; height: 62px; border-radius: 10px; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; } .home .on-box .plate img { max-width: 76px; max-height: 38px; object-fit: contain; display: none; } .home .on-box .plate.in img { display: block; } .home .on-box .plate .ini { font-size: 20px; font-weight: 800; color: rgba(242,239,234,0.85); } .home .on-box .plate.in .ini { display: none; } .home .on-box .name { left: 130px; right: 20px; top: 14px; font-size: 22px; font-weight: 700; color: #F2EFEA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .home .on-box .prog { left: 130px; right: 20px; top: 46px; font-size: 20px; color: rgba(242,239,234,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home .on-box .rule { left: 130px; right: 20px; top: 80px; height: 6px; } /* ---- WORLDS: the page that moves, the worlds turning, the veils it passes under ---- */ .home .hw-scroll { left: 0; top: 0; will-change: transform; transform: translateY(0px); } .home .hw-scroll > * { position: absolute; } /* the stage the page's content rises in on (arrive) — a layer of its own for good, so the rise's end lets nothing be painted again */ .home .hw-stage { will-change: transform, opacity; } .home .hw-stage > * { position: absolute; } .home .hw-worlds { left: 0; top: 0; width: 0; height: 0; } .home .hw-worlds > * { position: absolute; } /* A world: its slot moves (the compositor's transform and opacity, as transitions), the card is painted once inside it and a neighbour steps back by the slot's own opacity — a turn repaints nothing and draws no layer more than the cards (HL-8, measured on the Samsung 22 Oct: a dim written inside the card repainted three cards a frame, 34–94 ms frames; a dim as its own layer was six more layers a frame, 25 ms frames against 19). */ .home .hw-slot { transform-origin: 50% 50%; will-change: transform, opacity; } .home .hw-slot > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .home .hw-world { --glass: 0.30; border-radius: 24px; overflow: hidden; } .home .hw-world > * { position: absolute; } .home .hw-world .pic { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .home .hw-world .shade { left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(3,5,10,0.86) 0%, rgba(3,5,10,0.15) 55%, rgba(3,5,10,0.05) 100%); } /* A world in colours (the owner, 22 Oct 2026): no picture — a field of glass ("malo providnija … staklo": the room shows through at 30 %), a lighter foot (the words still read). The field stands inside the glass's 2 px rim, so the rim and its top light still read as glass; the glass's own black is light under it. */ .home .hw-world.flat { --glass: 0.12; } .home .hw-world .wash { left: 2px; top: 2px; right: 2px; bottom: 2px; border-radius: 22px; display: none; } .home .hw-world.flat .wash { display: block; } .home .hw-world.flat .pic { display: none; } .home .hw-world.flat .shade { background: linear-gradient(to top, rgba(3,5,10,0.62) 0%, rgba(3,5,10,0.12) 50%, rgba(3,5,10,0) 100%); } /* The house's colours — the room's own (bg_room_tv.jpg: navy 10,21,33 to 41,54,71, its light champagne 207,185,152), a step lighter, never its picture: a navy field, the champagne light in one corner, a cool sheen in the other and one soft band of light across, as the room's ribbons. Guide g0, Playlists g1, Settings g2 (and Live TV with no channel, Movies and Series with no picture) — the light in a different corner on each. */ .home .hw-world.house.g0 .wash { background: linear-gradient(118deg, rgba(255,236,205,0) 36%, rgba(255,236,205,0.09) 46%, rgba(255,236,205,0) 56%), radial-gradient(65% 95% at 16% 100%, rgba(214,188,148,0.46) 0%, rgba(214,188,148,0.14) 45%, rgba(214,188,148,0) 75%), radial-gradient(70% 100% at 92% 0%, rgba(132,162,204,0.26) 0%, rgba(132,162,204,0) 70%), linear-gradient(155deg, rgba(46,72,100,0.7) 0%, rgba(29,48,71,0.72) 46%, rgba(15,28,45,0.78) 100%); } .home .hw-world.house.g1 .wash { background: linear-gradient(62deg, rgba(255,236,205,0) 40%, rgba(255,236,205,0.08) 50%, rgba(255,236,205,0) 60%), radial-gradient(60% 95% at 86% 6%, rgba(214,188,148,0.42) 0%, rgba(214,188,148,0.13) 45%, rgba(214,188,148,0) 75%), radial-gradient(70% 100% at 8% 100%, rgba(132,162,204,0.24) 0%, rgba(132,162,204,0) 70%), linear-gradient(200deg, rgba(46,72,100,0.7) 0%, rgba(29,48,71,0.72) 46%, rgba(15,28,45,0.78) 100%); } .home .hw-world.house.g2 .wash { background: linear-gradient(140deg, rgba(255,236,205,0) 44%, rgba(255,236,205,0.08) 53%, rgba(255,236,205,0) 62%), radial-gradient(80% 85% at 50% 118%, rgba(214,188,148,0.44) 0%, rgba(214,188,148,0.13) 48%, rgba(214,188,148,0) 78%), radial-gradient(60% 90% at 100% 0%, rgba(132,162,204,0.26) 0%, rgba(132,162,204,0) 70%), linear-gradient(170deg, rgba(46,72,100,0.7) 0%, rgba(29,48,71,0.72) 46%, rgba(15,28,45,0.78) 100%); } /* Live TV, a box (the owner, 22 Oct 2026, evening: "ovu pozadinu napravi kutijom, ne treba mi pozadina … zadnji kanal unutra izbaci, nek ostane samo naziv … i channels ispod"): the page's own glass, as Cards' cards and Panels' boxes wear it — no picture, no colour, no mark; the name and the channels on it. */ .home .hw-world.box { --glass: 0.5; } .home .hw-world.box .pic, .home .hw-world.box .wash, .home .hw-world.box .shade { display: none; } /* the world's name: its baseline where line-height 1 at bottom 84 put it, the line tall enough for g, y, p (1.2 — at 1 their tails were cut by the box) */ .home .hw-world .wt { left: 44px; right: 44px; bottom: 76px; font-size: 84px; font-weight: 800; letter-spacing: -1.6px; line-height: 1.2; color: #F2EFEA; white-space: nowrap; overflow: hidden; } .home .hw-world .ws { left: 46px; right: 44px; bottom: 36px; font-size: 30px; font-weight: 600; color: rgba(242,239,234,0.85); white-space: nowrap; overflow: hidden; } .home .hw-seat { border-radius: 24px; pointer-events: none; z-index: 4; } .home .hw-dots { display: flex; justify-content: center; align-items: center; } .home .hw-dots span { width: 8px; height: 8px; border-radius: 4px; margin: 0 5px; background: rgba(255,255,255,0.3); } .home .hw-dots span.on { width: 34px; background: #E7C184; } .home .hw-strip { position: absolute; left: 0; top: 0; will-change: transform; transform: translateX(0px); } .home .hw-strip > * { position: absolute; } .home .hw-veil { left: 0; width: 1920px; pointer-events: none; z-index: 1; } .home .hw-veil.top { top: 0; height: 170px; background: linear-gradient(to bottom, rgba(4,5,10,0.92) 55%, rgba(4,5,10,0)); } .home .hw-veil.foot { top: 890px; height: 190px; background: linear-gradient(to top, rgba(4,5,10,0.95) 45%, rgba(4,5,10,0)); } .lay-worlds .home-brand, .lay-worlds .clock, .lay-worlds .header, .lay-worlds .plan-row, .lay-worlds .corner { z-index: 2; } /* ============================================================ SETTINGS · APPEARANCE — the two choosers of pictures (screens/settingsLooks.ts) ============================================================ */ .lk-row { position: relative; width: 1624px; height: 376px; margin-top: 8px; } .lk-col { position: absolute; top: 0; width: 388px; } .lk-pic { overflow: hidden; } .lk-pic .lk-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .lk-name { display: flex; align-items: center; margin-top: 22px; height: 50px; } .lk-name .lk-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(242,239,234,0.5); margin-right: 16px; flex: none; } .lk-col.chosen .lk-name .lk-dot { background: #E7C184; box-shadow: none; } .lk-name .w { font-size: 36px; font-weight: 700; color: #F2EFEA; white-space: nowrap; } .lk-col.chosen .lk-name .w { color: #E7C184; } .lk-line { margin-top: 6px; font-size: 24px; color: rgba(242,239,234,0.62); white-space: nowrap; } /* WHERE THE HAND IS (the owner, 22 Oct 2026: "kursor se slabo vidi"): a gold ring 4 px over the picture (the lit box's own hairline lies under it), the box a step bigger, the other pictures stepped back — each flip one box's own layer */ .crys .lk-pic.lit.focused { transform: scale(1.06); } .lk-pic .lk-ring { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 4px #E7C184; opacity: 0; will-change: opacity; } .lk-pic.focused .lk-ring { opacity: 0.999; } .lk-pic .lk-img, .lk-pic .lk-sample { opacity: 0.55; } .lk-pic.focused .lk-img, .lk-pic.focused .lk-sample { opacity: 1; } /* WHAT IS IN USE ("ne vidiš koji layout je selektovan"): the gold badge with its tick on the picture itself */ .lk-badge { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; height: 38px; padding: 0 16px 0 12px; border-radius: 10px; background: #E7C184; box-shadow: 0 4px 14px rgba(0,0,0,0.4); } .lk-badge svg { display: block; width: 20px; height: 20px; margin-right: 8px; flex: none; } .lk-badge span { font-size: 19px; font-weight: 800; letter-spacing: 2px; color: #14100B; white-space: nowrap; } .lk-sample { position: absolute; left: 26px; right: 26px; top: 24px; bottom: 24px; } .lk-sample > * { position: absolute; } .lk-sample .eb { left: 0; top: 0; font-size: 18px; font-weight: 600; letter-spacing: 3px; white-space: nowrap; } .lk-sample .b1 { left: 0; top: 50px; width: 150px; height: 56px; border-radius: 10px; background: rgba(0,0,0,0.35); } .lk-sample .b2 { left: 170px; top: 50px; width: 166px; height: 56px; border-radius: 10px; } .lk-sample .rl { left: 170px; top: 136px; width: 166px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(242,239,234,0.18); } .lk-sample .rl i { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; } /* Cards' frame round Continue Watching: Classic's navy ink (NavyLaneInk at the geometry's presence), its gold rail */ .home .hl-frame { box-shadow: inset 0 0 0 2px rgba(150,160,178,0.12); pointer-events: none; } .home .hl-frame .rail { position: absolute; right: -18px; top: -6px; width: 2px; height: 260px; background: rgba(150,160,178,0.19); } .home .hw-rows > * { position: absolute; } /* ============================================================ SPORTS GUIDE (screens/sportsGuide.ts, sportsWhere.ts, sportsFollow.ts, ui/sportsCard.ts — the approved sketches 02b, 04, 04b, 05, 06b, 08 of 21 Oct 2026, in our crystal and our type, 22 Oct 2026). The page wears the TV Guide's own room, veil, head and folders (.page.guide); what is its own is below. The accent's gold is written plain (ui/accent.ts). ============================================================ */ /* ---- THE FRAME (23 Oct 2026, the owner: "kutije kao svuda … nek idu još levo i gore ove sve kolone"): three columns from 124 to 1056 — the folders 24→354, the matches 378→1432, the match told whole 1456→1896 ---- */ /* the folders' head: Live TV's CATEGORIES (the four cubes 19 in, the word 15 after them); a line under it and the ways */ .sports .sg-head { left: 24px; top: 124px; width: 330px; height: 58px; display: flex; align-items: center; padding-left: 19px; box-sizing: border-box; } .sports .sg-head .cubes { position: relative; width: 16.5px; height: 16.5px; flex: none; } .sports .sg-head .cubes i { position: absolute; width: 6.5px; height: 6.5px; border-radius: 1.5px; background: rgba(231,193,132,0.95); } .sports .sg-head .cubes i:nth-child(2) { left: 10px; } .sports .sg-head .cubes i:nth-child(3) { top: 10px; } .sports .sg-head .cubes i:nth-child(4) { left: 10px; top: 10px; } .sports .sg-head .word { margin-left: 15px; font-size: 25px; font-weight: 600; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; } .sports .sg-rule { top: 189px; height: 2px; background: rgba(242,239,234,0.12); } /* the ways (Leagues · By time · Ended): the days' chips (.gh-chip), level with the folders' head; the totals at the right */ .sports .sg-tab { top: 125px; height: 56px; line-height: 56px; box-sizing: border-box; border-radius: 14px; text-align: center; font-size: 24px; font-weight: 600; color: rgba(242,239,234,0.72); white-space: nowrap; } .sports .sg-tab.on { font-weight: 800; color: #E7C184; background: rgba(231,193,132,0.16); box-shadow: inset 0 0 0 2px rgba(231,193,132,0.55); } .sports .sg-totals { top: 125px; height: 56px; line-height: 56px; text-align: right; font-size: 20px; font-weight: 600; letter-spacing: 2px; color: rgba(242,239,234,0.62); white-space: nowrap; overflow: hidden; } /* the folders: Live TV's own (.live .frow) — glass 0.58, the white hairline 0.14 and its top edge, the name 26 in, the count in its navy lane behind the blue-grey line; the open one lit, its gold thread and gold count */ .sports .sg-rail { left: 24px; top: 198px; width: 330px; height: 858px; overflow: hidden; } .sports .sg-rail .inner { position: absolute; left: 0; top: 0; width: 330px; will-change: transform; } .sports .srow { position: absolute; left: 0; width: 330px; height: 62px; box-sizing: border-box; border-radius: 14px; background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, var(--lane, transparent), rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .sports .srow.open { background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) top / 100% 2px no-repeat, linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)), var(--lane, transparent), rgba(0,0,0,0.58); } .sports .srow .thread { position: absolute; display: none; left: 8px; top: 13px; bottom: 13px; width: 4px; border-radius: 4px; background: rgba(231,193,132,0.95); } .sports .srow.open .thread { display: block; } .sports .srow .laneline { position: absolute; top: 50%; margin-top: -16.5px; width: 2px; height: 33px; background: rgba(150,160,178,0.45); } .sports .srow .name { position: absolute; left: 26px; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-size: 30px; font-weight: 600; letter-spacing: 0.2px; color: rgba(255,255,255,0.94); } .sports .srow .name.cut { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); } .sports .srow.open .name { color: #FFFFFF; } .sports .srow .count { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 600; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.94); } .sports .srow.open .count, .sports .srow .count.plus { color: #E7C184; } /* the matches: one layer that moves by transform only; the rows dealt again as it moves */ .sports .sg-list { left: 378px; top: 198px; width: 1054px; height: 858px; overflow: hidden; } .sports .sg-list .track { position: absolute; left: 0; top: 0; width: 1054px; will-change: transform; } .sports .sg-list .track > * { position: absolute; left: 0; } .sports .sg-label { width: 1054px; height: 46px; line-height: 34px; padding-left: 4px; box-sizing: border-box; font-size: 20px; font-weight: 800; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; } .sports .sg-label.live { color: #E5484D; } .sports .sg-label.earlier { color: rgba(242,239,234,0.55); } /* a league over its matches: its name in caps and gold, its country's chip, its count at the far end */ .sports .sg-league { width: 1054px; height: 60px; display: flex; align-items: center; padding: 6px 22px 12px 4px; box-sizing: border-box; } .sports .sg-league .ln { flex: none; font-size: 22px; font-weight: 800; letter-spacing: 1.6px; color: rgba(231,193,132,0.95); white-space: nowrap; } .sports .sg-league .cc { flex: none; margin-left: 14px; height: 28px; line-height: 28px; padding: 0 9px; border-radius: 8px; font-size: 16px; font-weight: 800; letter-spacing: 1.2px; color: rgba(242,239,234,0.86); box-shadow: inset 0 0 0 2px rgba(242,239,234,0.30); } .sports .sg-league .cc:empty { display: none; } .sports .sg-league .n { margin-left: auto; font-size: 20px; font-weight: 700; color: rgba(242,239,234,0.55); font-variant-numeric: tabular-nums; } .sports .sg-league.none .ln { color: rgba(242,239,234,0.70); } .sports .sg-note { width: 1054px; height: 70px; line-height: 70px; padding-left: 4px; box-sizing: border-box; font-size: 24px; font-weight: 600; color: rgba(242,239,234,0.62); white-space: nowrap; overflow: hidden; } /* My Team's first row: the way to follow a team or a league */ .sports .sg-frow { width: 1054px; height: 84px; border-radius: 14px; } .sports .sg-frow .fplus { position: absolute; left: 24px; top: 20px; width: 44px; height: 44px; border-radius: 50%; text-align: center; line-height: 42px; font-size: 32px; font-weight: 700; color: #E7C184; box-shadow: inset 0 0 0 2px rgba(231,193,132,0.75); } .sports .sg-frow .fw { position: absolute; left: 88px; top: 0; height: 84px; line-height: 84px; font-size: 26px; font-weight: 700; color: #F2EFEA; white-space: nowrap; } .sports .sg-row { width: 1054px; height: 84px; border-radius: 14px; } .sports .sg-row > * { position: absolute; } .sports .sg-row .st { left: 24px; top: 10px; height: 36px; display: flex; align-items: center; white-space: nowrap; } .sports .sg-row .st .dot { display: none; flex: none; width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; background: #E5484D; } .sports .sg-row.live .st .dot { display: block; } .sports .sg-row .st .tm { font-size: 26px; font-weight: 700; color: #FFFFFF; font-variant-numeric: tabular-nums; } .sports .sg-row.live .st .tm { font-size: 20px; font-weight: 800; letter-spacing: 1.6px; color: #E5484D; } .sports .sg-row.over .st .tm { font-weight: 600; color: rgba(242,239,234,0.62); } .sports .sg-row .st .mk { display: flex; margin-left: 10px; } .sports .sg-row .st .mk svg { display: block; } .sports .sg-row.solo .st { top: 24px; } .sports .sg-row.solo .lg { display: none; } .sports .sg-row .lg { left: 24px; top: 48px; width: 186px; height: 24px; line-height: 24px; font-size: 19px; font-weight: 500; color: rgba(242,239,234,0.62); white-space: nowrap; overflow: hidden; } .sports .sg-row .home, .sports .sg-row .away { top: 0; width: 230px; height: 84px; line-height: 84px; font-size: 26px; font-weight: 700; color: #F2EFEA; white-space: nowrap; overflow: hidden; } .sports .sg-row .home { left: 226px; text-align: right; } .sports .sg-row .away { left: 612px; } .sports .sg-row .mine { color: #E7C184; } .sports .sg-row .hc { left: 468px; top: 22px; } .sports .sg-row .ac { left: 560px; top: 22px; } .sports .sg-row .vs { left: 508px; top: 0; width: 52px; height: 84px; line-height: 84px; text-align: center; font-size: 22px; font-weight: 700; color: rgba(242,239,234,0.40); } .sports .sg-row .eg { left: 226px; top: 27px; display: none; } .sports .sg-row .eg svg { display: block; } .sports .sg-row .ev { left: 272px; top: 0; width: 560px; height: 84px; line-height: 84px; font-size: 26px; font-weight: 700; color: #F2EFEA; white-space: nowrap; overflow: hidden; display: none; } .sports .sg-row.event .home, .sports .sg-row.event .away, .sports .sg-row.event .hc, .sports .sg-row.event .ac, .sports .sg-row.event .vs { display: none; } .sports .sg-row.event .eg, .sports .sg-row.event .ev { display: block; } .sports .sg-row .chs { right: 22px; top: 23px; height: 38px; display: flex; align-items: center; } .sports .sg-row .chs .more { margin-left: 10px; font-size: 21px; font-weight: 700; color: rgba(242,239,234,0.62); } /* a team's disc, a channel's mark (ui/sportsParts.ts) */ .sp-crest { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; color: #FFFFFF; font-weight: 800; letter-spacing: 0.5px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22); text-shadow: 0 1px 2px rgba(0,0,0,0.45); white-space: nowrap; } .sp-logo { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 58px; height: 38px; box-sizing: border-box; border-radius: 7px; background: rgba(255,255,255,0.10); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16); overflow: hidden; } .sp-logo + .sp-logo { margin-left: 6px; } .sp-logo img { display: none; max-width: 46px; max-height: 28px; object-fit: contain; } .sp-logo.in img { display: block; } .sp-logo.in b { display: none; } .sp-logo b { font-size: 13px; font-weight: 800; color: rgba(242,239,234,0.6); } .sp-logo.big { width: 120px; height: 72px; border-radius: 10px; } .sp-logo.big img { max-width: 100px; max-height: 56px; } .sp-logo.big b { font-size: 22px; } /* the match told whole */ .sports .sg-detail { left: 1456px; top: 124px; width: 440px; height: 932px; border-radius: 20px; overflow: hidden; } .sports .sg-detail > * { position: absolute; left: 24px; right: 24px; } .sports .sg-detail .stage { left: 0; right: 0; top: 0; height: 210px; display: flex; align-items: center; justify-content: center; background: radial-gradient(70% 90% at 50% 30%, rgba(231,193,132,0.16), rgba(231,193,132,0) 70%); } .sports .sg-detail .stage .svs { margin: 0 22px 18px; font-size: 32px; font-weight: 700; color: rgba(242,239,234,0.40); } .sports .sg-detail .stage .sp-crest { margin-bottom: 18px; } .sports .sg-detail .sglyph { display: none; margin-bottom: 18px; } .sports .sg-detail .sglyph svg { display: block; } .sports .sg-detail .sline { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 19px; font-weight: 800; letter-spacing: 2.4px; color: rgba(231,193,132,0.95); white-space: nowrap; } .sports .sg-detail.live .sline { color: #E5484D; } .sports .sg-detail.event .stage .sp-crest, .sports .sg-detail.event .stage .svs { display: none; } .sports .sg-detail.event .sglyph { display: flex; } .sports .sg-detail .teams { top: 232px; } .sports .sg-detail .team { display: flex; align-items: center; height: 46px; } .sports .sg-detail .team .n { margin-left: 14px; font-size: 24px; font-weight: 700; color: #FFFFFF; white-space: nowrap; } .sports .sg-detail .event { top: 236px; display: none; font-size: 26px; line-height: 34px; max-height: 68px; font-weight: 700; color: #FFFFFF; overflow: hidden; } .sports .sg-detail.event .event { display: block; } .sports .sg-detail.event .teams { display: none; } .sports .sg-detail .meta { font-size: 21px; line-height: 30px; color: rgba(242,239,234,0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sports .sg-detail .meta.m1 { top: 344px; } .sports .sg-detail .meta.m2 { top: 374px; } .sports .sg-detail .meta.m3 { top: 404px; color: #E7C184; } .sports .sg-detail .para { top: 300px; display: none; font-size: 22px; line-height: 32px; color: rgba(242,239,234,0.70); } .sports .sg-detail.follow .para { display: block; } .sports .sg-detail.follow .meta, .sports .sg-detail.follow .where, .sports .sg-detail.follow .wrow { display: none; } .sports .sg-detail .where { top: 456px; font-size: 19px; font-weight: 700; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; } .sports .sg-detail .wrow { height: 40px; display: flex; align-items: center; } .sports .sg-detail .wrow .n { margin-left: 14px; font-size: 22px; font-weight: 600; color: #F2EFEA; white-space: nowrap; } .sports .sg-detail .hints { top: auto; bottom: 32px; } .sports .sg-detail .hint { height: 34px; display: flex; align-items: center; font-size: 21px; color: rgba(242,239,234,0.62); white-space: nowrap; } .sports .sg-detail .hint b { flex: none; width: 46px; font-weight: 800; color: #FFFFFF; } .sports .sg-detail .hint.on span { color: #E7C184; } /* a day without sport (sketch 08), the guide still being read, a filter with nothing */ .sports .sg-empty { left: 0; top: 260px; width: 1920px; display: flex; flex-direction: column; align-items: center; text-align: center; } .sports .sg-empty .ring { width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .sports .sg-empty .ring svg { display: block; } .sports .sg-empty .thread { display: none; margin-top: 34px; } .sports .sg-empty.loading .thread { display: block; } .sports .sg-empty .t { margin-top: 40px; font-size: 44px; line-height: 56px; font-weight: 800; color: #FFFFFF; white-space: nowrap; } .sports .sg-empty .d { margin-top: 14px; max-width: 1100px; font-size: 27px; line-height: 40px; color: rgba(242,239,234,0.70); } .sports .sg-empty .d:empty, .sports .sg-empty .h:empty { display: none; } .sports .sg-empty .keys { margin-top: 44px; display: flex; } .sports .sg-empty .keys:empty { display: none; } .sports .sg-empty .keys .crys-key + .crys-key { margin-left: 18px; } .sports .sg-empty .h { margin-top: 36px; font-size: 22px; color: rgba(242,239,234,0.45); } .sports.blank .sg-rail, .sports.blank .sg-list, .sports.blank .sg-detail, .sports.blank .sg-head, .sports.blank .sg-rule, .sports.blank .sg-tab, .sports.blank .sg-totals { display: none; } .sports.following .sg-rail, .sports.following .sg-list, .sports.following .sg-detail, .sports.following .sg-head, .sports.following .sg-rule, .sports.following .sg-tab, .sports.following .sg-totals, .sports.following .sg-empty, .sports.following .gh-days { display: none; } .sports .sg-over { left: 0; top: 0; width: 1920px; height: 1080px; } /* ---- WHERE TO WATCH (sketches 04 / 04b): our crystal panel over the page shaded; every box lights itself. The shade and the panel as the sketch measures them (the page around at a fifth — its head ≈ 37 of 255; the panel's own ink 11/13/20): the page under the panel never reads through it (no blur — the TV pays for one in the press). ---- */ .crys.sw > * { position: absolute; } .sw-shade { left: 0; top: 0; width: 1920px; height: 1080px; background: rgba(0,0,0,0.80); } .sw-panel { box-sizing: border-box; border-radius: 24px; background: rgba(11,13,20,0.95); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16); } .sw-panel > * { position: absolute; } .sw-panel > .edge { left: 24px; right: 24px; top: 0; height: 2px; background: rgba(255,255,255,0.07); } .sw-eyebrow { left: 56px; top: 50px; font-size: 22px; font-weight: 800; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; } .sw-panel.live .sw-eyebrow { color: #E5484D; } .sw-panel.over .sw-eyebrow { color: rgba(242,239,234,0.62); } .sw-teams { left: 56px; top: 92px; height: 100px; display: flex; align-items: center; } .sw-teams .n { margin: 0 22px; font-size: 44px; font-weight: 800; letter-spacing: -0.5px; color: #FFFFFF; white-space: nowrap; } .sw-teams .vs { margin: 0 12px; font-size: 40px; font-weight: 700; color: rgba(242,239,234,0.40); } .sw-teams .g { display: flex; } .sw-teams .g svg { display: block; } .sw-meta { left: 56px; top: 208px; width: 1388px; font-size: 24px; color: rgba(242,239,234,0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sw-eyebrow2 { left: 56px; top: 270px; font-size: 21px; font-weight: 700; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; } .sw-rows { left: 48px; width: 1404px; overflow: hidden; } .sw-rows .inner { position: absolute; left: 8px; top: 0; width: 1388px; will-change: transform; } .sw-row { position: absolute; left: 0; width: 1388px; height: 96px; display: flex; align-items: center; padding: 0 22px; } .sw-row.chosen { box-shadow: inset 5px 0 0 rgba(231,193,132,0.95); } .sw-row .w { flex: 1 1 auto; min-width: 0; margin-left: 22px; } .sw-row .l1 { display: flex; align-items: center; } .sw-row .l1 .n { font-size: 28px; font-weight: 700; color: #FFFFFF; white-space: nowrap; } .sw-row .best { margin-left: 14px; padding: 5px 10px; border-radius: 6px; background: #E7C184; color: #14100B; font-size: 17px; font-weight: 800; letter-spacing: 2px; } .sw-row .l2 { margin-top: 4px; font-size: 22px; color: rgba(242,239,234,0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sw-row .tags { flex: none; display: flex; } .sw-row .tag { height: 42px; line-height: 42px; padding: 0 18px; margin-left: 8px; border-radius: 12px; font-size: 20px; font-weight: 600; color: rgba(242,239,234,0.86); background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12); } .sw-keys { left: 56px; display: flex; } .sw-key { position: relative; height: 76px; display: flex; align-items: center; padding: 0 34px; } .sw-key + .sw-key { margin-left: 16px; } .sw-key .g { display: flex; flex: none; width: 30px; height: 30px; margin-right: 14px; } .sw-key .g svg { display: block; } .sw-key .w { position: relative; font-size: 30px; font-weight: 600; color: #F2EFEA; white-space: nowrap; } .sw-key.primary .w, .sw-key.on .w { color: #E7C184; } /* ---- FOLLOW (sketch 05; the keys are Search's — the owner, 22 Oct 2026): under the head, on the page's room — Search's field and keys at the left (ui/keyPad.ts, its .sr-field / .sr-key), where Search has them; the tabs and the answers where Search answers (768, 1056 wide); the ones followed where Search keeps its recent searches ---- */ .sf { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; } .sf > * { position: absolute; } .sf-title { left: 96px; top: 140px; height: 68px; line-height: 68px; font-size: 50px; font-weight: 700; letter-spacing: -1px; color: #FFFFFF; white-space: nowrap; } .sf-text { left: 96px; top: 216px; width: 1728px; font-size: 26px; line-height: 34px; color: rgba(242,239,234,0.70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-tab { top: 300px; height: 62px; line-height: 62px; box-sizing: border-box; text-align: center; border-radius: 31px; font-size: 26px; font-weight: 600; color: rgba(242,239,234,0.86); background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); white-space: nowrap; } .sf-tab.on { background: #E7C184; color: #14100B; box-shadow: none; } .sf-found { left: 768px; top: 300px; width: 1056px; height: 62px; line-height: 62px; text-align: right; font-size: 22px; color: rgba(242,239,234,0.62); white-space: nowrap; } .sf-rows { left: 768px; top: 394px; width: 1056px; height: 446px; overflow: hidden; } .sf-rows .inner { position: absolute; left: 0; top: 0; width: 1056px; will-change: transform; } .sf-row { position: absolute; left: 0; width: 1056px; height: 104px; border-radius: 16px; display: flex; align-items: center; padding: 0 26px; } .sf-row .g { display: flex; flex: none; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255,255,255,0.08); } .sf-row .g svg { display: block; } .sf-row .w { flex: 1 1 auto; min-width: 0; margin-left: 24px; } .sf-row .n { font-size: 30px; font-weight: 700; color: #FFFFFF; white-space: nowrap; } .sf-row .l { margin-top: 4px; font-size: 22px; color: rgba(242,239,234,0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-row .pill { flex: none; display: flex; align-items: center; height: 54px; padding: 0 24px; border-radius: 27px; font-size: 23px; font-weight: 600; color: #F2EFEA; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); white-space: nowrap; } .sf-row .pill svg { display: block; margin-right: 10px; } .sf-row .pill.on { background: #E7C184; color: #14100B; box-shadow: none; } .sf-foot { left: 0; top: 878px; width: 1920px; height: 62px; } .sf-foot > * { position: absolute; top: 0; } .sf-foot .lab { left: 96px; height: 62px; line-height: 62px; font-size: 22px; font-weight: 700; letter-spacing: 2.6px; color: rgba(242,239,234,0.62); white-space: nowrap; } .sf-foot .chip { height: 62px; box-sizing: border-box; border-radius: 31px; display: flex; align-items: center; padding: 0 20px 0 10px; background: rgba(0,0,0,0.58); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14); } .sf-foot .chip .g { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; } .sf-foot .chip .n { margin-left: 12px; font-size: 23px; font-weight: 600; color: #F2EFEA; white-space: nowrap; } .sf-foot .more { height: 62px; line-height: 62px; font-size: 24px; font-weight: 700; color: rgba(242,239,234,0.62); } .sf-cursor { left: 0; top: 0; width: 0; height: 0; } /* ---- THE REMINDER'S CARD (sketch 06b): over every page and player, under the PIN pad (39) and the sleep faces (40) ---- */ .card-layer { z-index: 38; pointer-events: none; will-change: auto; } .sp-card { position: absolute; right: 64px; bottom: 64px; width: 700px; box-sizing: border-box; padding: 24px 28px 24px; border-radius: 22px; overflow: hidden; background: rgba(11,13,20,0.96); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16), 0 20px 60px rgba(0,0,0,0.5); } .sp-card .eb { display: flex; align-items: center; font-size: 21px; font-weight: 800; letter-spacing: 3px; color: rgba(231,193,132,0.95); white-space: nowrap; } .sp-card .eb .g { display: flex; margin-right: 12px; } .sp-card .eb .g svg { display: block; } .sp-card .tt { display: flex; align-items: center; margin-top: 14px; } .sp-card .tt .sp-crest + .sp-crest { margin-left: 8px; } .sp-card .tt .n { margin-left: 16px; font-size: 30px; font-weight: 800; color: #FFFFFF; white-space: nowrap; } .sp-card .tt .n:first-child { margin-left: 0; } .sp-card .ln { display: flex; margin-top: 10px; font-size: 23px; color: rgba(242,239,234,0.62); white-space: pre; } /* the sentence gives way (a long channel's name ends in …); OK and BACK always stand whole */ .sp-card .ln .s { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sp-card .ln .k { flex: none; } .sp-card .ln b { font-weight: 700; color: #FFFFFF; } .sp-card .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.10); } .sp-card .bar i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #E7C184; transform-origin: 0 0; will-change: transform; } /* THE STORES' PICTURES (ui/storeShots.ts, index.html?snimci=1): the plan pill, the corner facts (ID and site) on Home, Playlists, Search and Settings, and Cards' facts on its Settings card are left out of the picture. */ .snimci .home .plan-row, .snimci .home .corner, .snimci .pl-corner, .snimci .home .facts { display: none !important; }