/* Карточка ленты трендов. Анатомия — по разбору piratex, палитра и шрифты наши. Сетку задаёт .grid из style.css: всегда три в строке, ширина до 660px. Поэтому все размеры здесь на clamp() — плитка ужимается вместе с окном. Подключается на index.html, 2.html, 2a.html и demo.html. Логика — в app.js, функция LEN.feed(). Данные — trends.json. */ :root{ /* три ступени «жара» X-фактора: у piratex красный / оранжевый / янтарный, у нас те же три, но в тёплой фирменной гамме */ --x3:#B8265F; --x2:#C97A2C; --x1:rgba(46,43,38,.55); --x1-text:#F7F4EC; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --x3:#FF8A4C; --x2:#D8A15E; --x1:rgba(234,230,218,.20); --x1-text:#EAE6DA; } } :root[data-theme="dark"]{ --x3:#FF8A4C; --x2:#D8A15E; --x1:rgba(234,230,218,.20); --x1-text:#EAE6DA; } /* ---------- карточка ---------- */ .card{ --zoom:1.8; /* во сколько раз растёт под курсором; app.js ужимает под низкое окно */ position:relative;z-index:1; display:flex;flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:clamp(6px,1vw,16px); overflow:hidden; cursor:pointer; transition:border-color .2s ease,transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease,z-index 0s .3s; } /* Наведение только там, где есть настоящий курсор. Правка 13.09 (Елена): плитка под курсором растёт чуть меньше, чем вдвое, и ложится поверх соседей — они в это время замирают (app.js, hover()). Куда расти, считает app.js (zoomAt): масштаб от левого верхнего угла плюс сдвиг --dx/--dy, чтобы у края окна плитка росла внутрь и целиком осталась на экране. z-index падает с задержкой, чтобы уменьшающаяся плитка не ныряла под соседей на полпути. */ @media (hover:hover) and (pointer:fine){ .card{transform-origin:0 0} .card:hover,.card:focus-within{ z-index:20; border-color:var(--muted); transform:translate(var(--dx,0px),var(--dy,0px)) scale(var(--zoom)); box-shadow:0 24px 48px -12px var(--scrim),0 8px 20px -8px var(--scrim); transition:border-color .2s ease,transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease,z-index 0s; } .card:active{opacity:.9} } @media (hover:none),(pointer:coarse){ .card:active{transform:scale(.98);opacity:.9} } /* сама плитка фокус больше не берёт — рамку рисуют ссылка и кнопка внутри неё */ /* ---------- обложка ---------- */ /* 3:4, как у piratex, а не 9:16: вертикальный кадр обрезается, зато плитка не вырастает в столб при трёх в строке */ /* Обложка — ссылка на экран 3 (17.09): первая из двух остановок клавиатуры на плитке. display:block и снятое подчёркивание — потому что это , а не
, как было. */ .shot{ position:relative;display:block; aspect-ratio:3/4; background:var(--tile-a); overflow:hidden; color:inherit;text-decoration:none; /* долгое касание на iPhone у ссылки вызывает меню «открыть / копировать» — на плитке это лишнее: она ведёт дальше одним касанием */ -webkit-touch-callout:none; } /* Рамка фокуса у обложки — своим слоем поверх кадра. Обычный outline ссылки тут не виден: обложка и видео лежат absolute и закрашивают его собой. Скругление — как у плитки сверху, снизу у обложки углы прямые. */ .shot:focus-visible{outline:none} .shot:focus-visible::after{ content:"";position:absolute;inset:0;z-index:12;pointer-events:none; border:2px solid var(--focus); border-radius:clamp(6px,1vw,16px) clamp(6px,1vw,16px) 0 0; } html.flat .shot:focus-visible::after{border-radius:0} .shot .cover, .shot .clip{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover; display:block; } .shot .cover{transition:opacity .25s ease} .shot .clip{opacity:0;transition:opacity .25s ease;pointer-events:none} .card.playing .clip{opacity:1} /* обложку под видео не прячем: видео непрозрачно и того же размера, а если под ним пусто (iOS выгрузил буфер, Chrome усыпил плеер) — видна обложка, не фон */ /* ?flat=1 — опыт для слабых Android: каждый