/* ================================================================ Каталог анимаций ТутоКруто — ПРОТОТИП вертикального формата Всё под телефон. На компьютере — та же колонка по центру. Палитра, шрифты и паттерн по брендбуку. ================================================================ */ @font-face { font-family: "Tilda Sans"; src: url("fonts/tilda-sans-vf.ttf") format("truetype-variations"); font-weight: 300 900; font-display: swap; } /* Декоративный шрифт брендбука. Им набраны логотипы «Ростовых кукол» и других программ, поэтому названия и подписи выглядят с ними заодно. Из 571 КБ оставлены только нужные буквы — вышло 28 КБ. */ @font-face { font-family: "Nauryz Red Keds"; src: url("fonts/nauryz-red-keds.woff2") format("woff2"), url("fonts/nauryz-red-keds.woff") format("woff"); font-weight: 400; font-display: swap; } @font-face { font-family: "Soyuz Grotesk"; src: url("fonts/soyuz-grotesk-bold.woff") format("woff"); font-weight: 700; font-display: swap; } :root { --orange: #FF6417; --purple: #482683; --ink: #0F032D; --white: #FFFFFF; --gradient: linear-gradient(135deg, #482683 0%, #AF31A3 50%, #FF6417 100%); --panel: #1D0C42; --line: rgba(255, 255, 255, .14); --line-2: rgba(255, 255, 255, .28); --soft: rgba(255, 255, 255, .78); --faint: rgba(255, 255, 255, .55); --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-full: 999px; --font: "Tilda Sans", "Segoe UI", system-ui, sans-serif; --font-accent: "Soyuz Grotesk", var(--font); --font-display: "Nauryz Red Keds", var(--font-accent); --phone: 560px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); background-image: radial-gradient(700px 420px at 15% -5%, rgba(72, 38, 131, .8), transparent 62%), radial-gradient(600px 380px at 92% 3%, rgba(175, 49, 163, .3), transparent 64%); background-attachment: fixed; color: var(--white); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; touch-action: manipulation; /* мобильные браузеры рисуют свой голубой прямоугольник при нажатии — убираем, у нас своя анимация нажатия */ -webkit-tap-highlight-color: transparent; } /* Фирменный паттерн из брендбука — кольца и дуги, собранные из логотипа */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("../media/pattern.png") center / cover no-repeat; opacity: .06; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .phone { width: 100%; max-width: var(--phone); margin: 0 auto; min-height: 100vh; position: relative; } @media (min-width: 600px) { .phone { box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, .5); background: rgba(15, 3, 45, .3); } } /* ---------------------------------------------------------- заголовок */ .head { position: relative; padding: calc(16px + env(safe-area-inset-top)) 14px 6px; } .head > * { position: relative; z-index: 1; } .head__top { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .head__logo { width: 120px; height: auto; } .head__spacer { flex: 1; } /* Кнопки шапки без кружка: остаётся только сам значок. Кружок с заливкой держали значок «в оправе», но Денис попросил убрать — так шапка легче и не спорит с обложками программ. */ .rbtn { position: relative; width: 46px; height: 46px; background: none; border: 0; box-shadow: none; font-size: 20px; line-height: 1; display: grid; place-items: center; transition: transform .12s ease, opacity .18s ease; } .rbtn:active { transform: scale(.9); opacity: .75; } /* Акцент теперь не заливкой кружка, а цветом самого значка */ .rbtn--accent { background: none; box-shadow: none; color: var(--orange); } .rbtn__dot { position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); } .rbtn__dot[hidden] { display: none; } .head h1 { font-family: var(--font-accent); font-weight: 700; margin: 0 0 6px; font-size: 30px; line-height: 1.04; text-transform: uppercase; letter-spacing: -.02em; } .head h1 em { font-style: normal; color: var(--orange); } .head p { margin: 0; color: var(--soft); font-size: 14px; } /* Хронометраж под заголовком: с этого администратор начинает разговор, поэтому блок стоит до карточек и читается с расстояния. */ .timing, .pick__plate { position: relative; isolation: isolate; margin: 14px 0 4px; padding: 16px; border-radius: var(--r-lg); overflow: hidden; /* Стекло с бликом: светлая кромка сверху, скользящий отблеск по диагонали и уплотнение книзу. Оранжевого свечения под плашкой нет намеренно — оно съедало оранжевые цифры хронометража. */ background: linear-gradient(155deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .10) 30%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .11) 100%); -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.08); backdrop-filter: blur(26px) saturate(180%) brightness(1.08); border: 1px solid rgba(255, 255, 255, .30); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -1px 0 rgba(255, 255, 255, .10), inset 0 0 30px rgba(255, 255, 255, .07), 0 14px 38px rgba(5, 1, 15, .5); } /* Отблеск: широкая световая полоса наискось, как у стекла под лампой */ .timing::before, .pick__plate::before { content: ""; position: absolute; inset: -40% -10% auto -10%; height: 150%; background: linear-gradient(102deg, transparent 34%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, .05) 54%, transparent 62%); transform: rotate(-8deg); pointer-events: none; z-index: -1; } /* Мягкий свет от верхнего левого угла — толщина стекла */ .timing::after, .pick__plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 70% at 20% -10%, rgba(255, 255, 255, .22), transparent 60%); pointer-events: none; z-index: -1; } /* Система просит меньше прозрачности или больше контраста — стекло уступает плотной панели, иначе текст ляжет на пустоту. */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .timing, .pick__plate { background: rgba(30, 12, 68, .96); -webkit-backdrop-filter: none; backdrop-filter: none; } .timing::before, .timing::after, .pick__plate::before, .pick__plate::after { display: none; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .timing, .pick__plate { background: rgba(30, 12, 68, .92); border-color: var(--line-2); } .timing::before, .timing::after, .pick__plate::before, .pick__plate::after { display: none; } } .timing__row { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; } /* Цифры — на плотной подложке, а не прямо на стекле: цвет на прозрачном слое теряет контраст, это правило Apple для «вибрантности». Заодно чуть плотнее буквы и разрядка — так текст держится на стекле. */ .timing__time { flex: none; min-width: 66px; font-size: 17px; font-weight: 800; color: var(--orange); } .timing__what { font-size: 15px; color: #fff; } .timing__total { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 15px; color: #fff !important; } .timing__total b { color: var(--orange); } .timing__note { margin: 8px 0 0 !important; font-size: 13.5px; line-height: 1.4; } /* ---------------------------------------------------------- сетка карточек */ /* Ролик над карточками. Нужен там, где программы отличаются не ходом, а темой: человек один раз смотрит, как это выглядит вживую, и дальше выбирает по названию. Блок появляется сам, если в данных есть meta.intro. */ .intro { padding: 0 14px; margin: 14px 0 2px; } .intro__box { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: #000; box-shadow: 0 14px 38px rgba(5, 1, 15, .5); } /* Ролик снят на телефон, вертикальным. Широкая рамка резала бы его пополам, поэтому кадр близок к квадрату: видно и ведущего, и детей, но блок не занимает весь экран. */ .intro__v { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #000; } .intro__cap { margin: 8px 2px 0; color: var(--faint); font-size: 12.5px; line-height: 1.4; } /* Кнопка «плей» на ролике. Рисунок уже отцентрован внутри своего квадрата 48x48, размер задан в пикселях — вёрсткой ничего не двигаем. Пока не нажали, свои кнопки браузера у ролика выключены: серая полоса поперёк кадра выглядит грязно. После первого пуска они появляются — нужна перемотка и звук. */ /* Слой нажатий: закрывает кадр, но не полоску перемотки внизу. */ .intro__tap { position: absolute; inset: 0 0 26px 0; z-index: 1; cursor: pointer; } /* Полоска перемотки вместо кнопок браузера. Сама полоска тонкая, а нажимать нужно пальцем — поэтому у неё широкая невидимая зона в 26 пикселей и она чуть толстеет, пока её тянут. */ .intro__bar { position: absolute; inset: auto 0 0 0; height: 26px; z-index: 3; display: flex; align-items: flex-end; padding: 0 0 7px; touch-action: none; cursor: pointer; } .intro__track { position: relative; flex: 1; height: 3px; margin: 0 10px; border-radius: 3px; background: rgba(255, 255, 255, .32); transition: height .12s ease; } .intro__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--orange); } .intro__box.is-scrub .intro__track { height: 6px; } .intro__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; padding: 0; border: 0; background: none; z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease; } .intro__play .ico { display: block; width: 76px; height: 76px; filter: drop-shadow(0 8px 26px rgba(255, 100, 23, .55)); } .intro__play:active { transform: translate(-50%, -50%) scale(.94); } .intro__play:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 50%; } .intro__box.is-playing .intro__play { display: none; } .gridwrap { padding: 14px 14px calc(30px + env(safe-area-inset-bottom)); } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .card { -webkit-tap-highlight-color: transparent; position: relative; display: block; padding: 0; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .16s ease, box-shadow .2s ease; } .card:active { transform: scale(.97); box-shadow: 0 10px 26px -8px rgba(255, 100, 23, .8), 0 6px 18px rgba(0, 0, 0, .4); } @media (hover: hover) { .card:hover { box-shadow: 0 14px 30px -10px rgba(255, 100, 23, .75), 0 8px 22px rgba(0, 0, 0, .45); } } .card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* Карточка 3:4 обрезает вертикальные фото. По умолчанию режем от центра, но если в картинку впечатано название сверху — программе ставится coverPos: "center top", и кадр сдвигается вниз, открывая верх. */ .card__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Программа заведена, фотографий ещё нет */ .card--empty { background: var(--gradient); } /* по центру карточки, чтобы не сталкиваться с метками возраста и новинки */ .card__soon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 7px 14px; backdrop-filter: blur(4px); } .card__shade { position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, transparent, rgba(15, 3, 45, .15) 35%, rgba(15, 3, 45, .88)); pointer-events: none; } /* Логотип вписывается в коробку, а не в фиксированную высоту: тогда квадратные логотипы (Brawl Stars, Щенячий патруль) перестают быть крохотными, а широкие (Человек-паук) остаются как были. --ls — точечная добавка для тех, кто упёрся в ширину карточки. По ширине --ls умеет только уменьшать (min(...,1)): множитель больше единицы выносил широкие логотипы за край карточки, и последняя буква срезалась — как было у Wednesday. */ .card__logo { position: absolute; left: 8px; right: 8px; bottom: 10px; height: auto; width: auto; max-height: calc(30% * var(--ls, 1)); max-width: calc((100% - 16px) * min(var(--ls, 1), 1)); object-fit: contain; object-position: left bottom; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)); pointer-events: none; } /* Тёмный логотип на тёмной карточке не виден. Белая плашка выглядела грубым прямоугольником, поэтому светим по самой форме букв — несколько мягких теней подряд дают ореол без каких-либо краёв. */ .card__logo--plate { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .95)) drop-shadow(0 0 12px rgba(255, 255, 255, .85)) drop-shadow(0 0 22px rgba(255, 255, 255, .6)) drop-shadow(0 0 38px rgba(255, 255, 255, .35)); } /* Ледяные логотипы (Холодное сердце) сами почти белые — белый ореол их съедает, поэтому светим голубым. Подложка-дымка здесь была и была убрана: фон рисуется по всей коробке элемента, а она заметно больше самой картинки — логотип прижат к левому нижнему углу, коробка растянута на ширину карточки. Градиент не успевал сойти на нет до верхнего края и обрезался ровной линией. Свечение через drop-shadow идёт по форме букв и краёв не имеет вовсе. */ .card__logo--ice, .info__logo--ice { filter: drop-shadow(0 0 3px rgba(10, 40, 80, .9)) drop-shadow(0 0 8px rgba(20, 60, 110, .8)) drop-shadow(0 0 18px rgba(120, 200, 255, .6)) drop-shadow(0 0 34px rgba(90, 170, 255, .4)); } /* Название текстом — у программ без логотипа («Ростовые куклы», «Шоу-программы»). Крупнее прежнего: раньше 14px терялись рядом с логотипами соседних карточек. */ .card__name { position: absolute; left: 12px; right: 12px; bottom: 12px; /* основной шрифт: узкий, оба названия влезают одним кеглем, поэтому буквы везде одной толщины */ font-family: var(--font); font-weight: 800; font-size: 17px; line-height: 1.15; letter-spacing: -.01em; text-shadow: 0 2px 10px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .9); pointer-events: none; } /* Метки крупные — возраст читается с расстояния */ .card__badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .bdg { border-radius: var(--r-full); padding: 6px 13px; font-size: 15px; font-weight: 900; letter-spacing: .01em; line-height: 1; background: rgba(15, 3, 45, .8); backdrop-filter: blur(6px); border: 1px solid var(--line-2); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); } /* Возраст — стеклянная плашка по тому же принципу, что хронометраж: светлая кромка сверху, отблеск, размытие фона. Мелкому элементу стекло делаем легче, чем крупной панели — правило Apple о том, что вес материала задаёт иерархию. */ .bdg--age, .bdg--price { position: relative; isolation: isolate; overflow: hidden; font-size: 16px; padding: 7px 15px; background: linear-gradient(155deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .08)), rgba(72, 38, 131, .62); -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.06); backdrop-filter: blur(16px) saturate(180%) brightness(1.06); border: 1px solid rgba(255, 255, 255, .34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(5, 1, 15, .45); text-shadow: 0 1px 3px rgba(5, 1, 15, .5); } /* тот же скользящий отблеск, что у крупной плашки */ .bdg--age::before, .bdg--price::before { content: ""; position: absolute; inset: -50% -20% auto -20%; height: 200%; background: linear-gradient(102deg, transparent 32%, rgba(255, 255, 255, .20) 46%, rgba(255, 255, 255, .06) 54%, transparent 64%); transform: rotate(-8deg); pointer-events: none; z-index: -1; } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .bdg--age, .bdg--price { background: var(--purple); -webkit-backdrop-filter: none; backdrop-filter: none; } .bdg--age::before, .bdg--price::before { display: none; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bdg--age { background: var(--purple); } .bdg--age::before { display: none; } } .bdg--new, .bdg--hit { font-size: 11.5px; font-weight: 900; padding: 5px 11px; } .bdg--new { background: var(--orange); border-color: transparent; } .bdg--hit { background: var(--gradient); border-color: transparent; } .empty { grid-column: 1 / -1; text-align: center; padding: 50px 16px; color: var(--faint); } .empty b { display: block; color: var(--white); font-size: 17px; margin-bottom: 6px; } /* ================================================== шторка фильтров */ .sheet { position: fixed; inset: 0; z-index: 90; display: none; } .sheet.is-open { display: block; } .sheet__scrim { position: absolute; inset: 0; background: rgba(5, 1, 15, .7); backdrop-filter: blur(3px); } .sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: var(--phone); margin: 0 auto; background: var(--panel); border-top: 1px solid var(--line-2); border-radius: 22px 22px 0 0; padding: 8px 14px calc(16px + env(safe-area-inset-bottom)); max-height: 85vh; overflow-y: auto; animation: sheetUp .26s cubic-bezier(.22, 1, .36, 1); } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } } .sheet__grab { width: 42px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 4px auto 14px; } .search { position: relative; margin-bottom: 12px; } .search input { width: 100%; border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, .07); color: var(--white); border-radius: var(--r-full); padding: 13px 40px 13px 42px; font-family: var(--font); font-size: 16px; font-weight: 500; outline: none; } .search input::placeholder { color: var(--faint); font-weight: 400; } .search input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 100, 23, .16); } .search__icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; } .search__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: var(--white); font-size: 14px; display: none; place-items: center; } .search__clear.is-on { display: grid; } .chiprow { display: flex; flex-wrap: wrap; gap: 8px; } .chiprow + .chiprow { margin-top: 8px; } .chip { border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--soft); border-radius: var(--r-full); padding: 11px 16px; font-family: var(--font); font-size: 14px; font-weight: 700; min-height: 46px; display: inline-flex; align-items: center; transition: background .16s ease, border-color .16s ease, color .16s ease; } .chip[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: var(--white); } .chip--hit[aria-pressed="true"] { background: var(--gradient); border-color: transparent; } .chip--new[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); } .chip:focus-visible, .rbtn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .sheet__cta { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 18px; } .btn { border-radius: var(--r-full); padding: 15px 18px; min-height: 50px; font-family: var(--font); font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s ease, filter .18s ease; } .btn:active { transform: scale(.97); } .btn--ghost { border: 1.5px solid var(--line-2); color: var(--soft); } .btn--accent { background: var(--orange); color: var(--white); box-shadow: 0 6px 20px rgba(255, 100, 23, .38); } /* ================================================== полноэкранный просмотр */ .viewer { position: fixed; inset: 0; z-index: 100; display: none; background: #05010F; overflow: hidden; touch-action: none; /* жесты забираем себе */ -webkit-user-select: none; user-select: none; } .viewer.is-open { display: block; } .stage { position: absolute; inset: 0; will-change: transform; } .stage.is-springing { transition: transform .25s cubic-bezier(.22, 1, .36, 1); } .stage__blur { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(34px) saturate(140%) brightness(.55); transform: scale(1.1); } .stage__img, .stage__video, .stage__frame { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; pointer-events: none; /* жест ловит слой выше */ } /* снимок, почти совпавший с экраном, дотягиваем до заполнения: потерять пару процентов кадра лучше, чем показывать поля по краям */ .stage__img--fill { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; } /* Подпись материала: какое именно шоу на экране. Ниже полосок прогресса, по центру. Остаётся видимой во время видео — ради неё всё и затевалось, названия шоу нужны именно на роликах. */ .stage__caption { position: absolute; top: calc(42px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 40px); white-space: nowrap; font-family: var(--font-display); font-weight: 400; font-size: 17px; letter-spacing: .01em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); background: rgba(5, 1, 15, .42); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 7px 16px; pointer-events: none; z-index: 4; } /* фон просмотра, когда у программы ещё нет ни фото, ни видео */ .stage__empty { position: absolute; inset: 0; background: var(--gradient); } /* Плашка материала — «Новинка» на конкретном кадре. Оранжевая, как метка новинки на карточке, чтобы читалась одинаково. */ .stage__badge { position: absolute; top: calc(42px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: #fff; background: var(--orange); border-radius: 999px; padding: 7px 16px; box-shadow: 0 6px 20px rgba(255, 100, 23, .45); pointer-events: none; z-index: 4; } /* если сверху уже висит подпись — плашка уходит под неё */ .stage__badge--low { top: calc(88px + env(safe-area-inset-top)); } .stage__frame { width: 100%; height: 100%; border: 0; pointer-events: auto; } .stage__video { pointer-events: auto; } .viewer__scrim { position: absolute; left: 0; right: 0; pointer-events: none; } .viewer__scrim--top { top: 0; height: 190px; background: linear-gradient(to bottom, rgba(0,0,0,.75), transparent); } .viewer__scrim--bottom { bottom: 0; height: 55%; background: linear-gradient(to top, rgba(5,1,15,.95) 12%, rgba(5,1,15,.65) 45%, transparent); } .bars { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; gap: 4px; z-index: 4; pointer-events: none; } .bars.is-hidden { display: none; } .bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); } .bars span.is-done { background: var(--white); } .bars span.is-now { background: var(--orange); } .viewer__top { position: absolute; top: calc(20px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; z-index: 6; pointer-events: none; } .viewer__counter { font-size: 13px; font-weight: 800; color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(0,0,0,.8); } .viewer__close, .viewer__share { width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); font-size: 18px; display: grid; place-items: center; margin: -10px 0 0 0; pointer-events: auto; } .viewer__close { margin-right: -8px; } /* Кнопки справа держим вместе: «отправить» слева от «закрыть». */ .viewer__tools { display: flex; align-items: center; gap: 8px; pointer-events: none; } .viewer__share { background: var(--orange); } .playbig { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 82px; height: 82px; border-radius: 50%; z-index: 6; background: rgba(255, 100, 23, .95); box-shadow: 0 8px 30px rgba(255, 100, 23, .5); display: grid; place-items: center; } .playbig[hidden] { display: none; } .playbig__tri { width: 0; height: 0; margin-left: 7px; border-left: 27px solid #fff; border-top: 17px solid transparent; border-bottom: 17px solid transparent; } /* overflow здесь НЕ скрываем: свечение логотипа расходится за край блока, и обрезка срезала его сверху ровной линией. Свёрнутое описание держит себя само — у .info__desc свой line-clamp с обрезкой. */ .info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 22px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 62%; overflow: visible; touch-action: none; /* по умолчанию свайп закрывает */ } .info.is-open { overflow-y: auto; touch-action: pan-y; } .info::-webkit-scrollbar { display: none; } .info__logo { max-height: 56px; max-width: 78%; width: auto; margin-bottom: 8px; object-fit: contain; object-position: left center; filter: drop-shadow(0 2px 8px rgba(0,0,0,.8)); } /* Ореол компактный намеренно: широкий расходился далеко за логотип и упирался в края, а тёмный логотип читается и от плотного свечения. */ .info__logo--plate { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .95)) drop-shadow(0 0 9px rgba(255, 255, 255, .8)) drop-shadow(0 0 16px rgba(255, 255, 255, .5)); } .info__title[hidden] { display: none; } .info__title { font-family: var(--font); font-weight: 800; margin: 0 0 8px; font-size: 21px; line-height: 1.12; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.8); } .info__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .tag { border-radius: var(--r-full); padding: 6px 13px; font-size: 13px; font-weight: 800; background: rgba(255,255,255,.14); border: 1px solid var(--line-2); } .tag--age { background: var(--purple); border-color: transparent; } .tag--new { background: var(--orange); border-color: transparent; } .tag--hit { background: var(--gradient); border-color: transparent; } .tag--price { background: var(--orange); border-color: transparent; } .info__desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.9); text-shadow: 0 1px 6px rgba(0,0,0,.7); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .info.is-open .info__desc { -webkit-line-clamp: unset; overflow: visible; } .info__more { margin-top: 4px; color: var(--orange); font-size: 13.5px; font-weight: 800; text-decoration: underline; padding: 10px 0; min-height: 44px; } /* Идёт видео — на экране остаётся только оно и крестик. Описание, полоски, счётчик и затемнения уезжают. */ .viewer.is-playing .info, .viewer.is-playing .bars, .viewer.is-playing .viewer__counter, .viewer.is-playing .viewer__scrim { opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; } .viewer .info, .viewer .bars, .viewer .viewer__counter, .viewer .viewer__scrim { transition: opacity .22s ease; } .hint { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 7; display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, .95); pointer-events: none; background: rgba(5, 1, 15, .55); backdrop-filter: blur(3px); padding: 26px 20px; opacity: 0; transition: opacity .3s ease; } .hint.is-on { opacity: 1; } .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 200%); background: var(--purple); border: 1px solid var(--line-2); color: var(--white); padding: 12px 20px; border-radius: var(--r-full); font-size: 14px; font-weight: 700; z-index: 200; max-width: calc(100% - 32px); text-align: center; transition: transform .3s cubic-bezier(.22, 1, .36, 1); } .toast.is-on { transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ================================================================ Титульная страница: выбор каталога. Открывается по QR и по ссылке, дальше человек сам решает, что смотреть — анимации или фиджитал. ================================================================ */ .start { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; /* сверху оставлен ряд под кнопки в углах: переключатель языка налезал на логотип, а он крупный и двигать его вбок некуда */ padding: calc(62px + env(safe-area-inset-top)) 18px 30px; } /* Вводная часть: логотип, слоган, город. Заголовка «Каталоги программ» здесь нет намеренно — карточки сами говорят, что они такое, а лишняя строка только спорила с логотипом. */ .hero { text-align: center; margin-bottom: 26px; } .hero__logo { width: min(260px, 68%); height: auto; margin: 0 auto 14px; } .hero__slogan { margin: 0 0 8px; font-family: var(--font-accent); font-weight: 700; font-size: clamp(15px, 4.6vw, 19px); line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; color: #fff; } /* Оранжевые акценты в надписях — фирменный приём каталога */ .hero__slogan em, .pick__name em { font-style: normal; color: var(--orange); } .hero__city { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } /* Тонкая линия между вводной частью и карточками — из фирменного градиента */ .hero::after { content: ""; display: block; width: 64px; height: 3px; margin: 18px auto 0; border-radius: 999px; background: var(--gradient); } .start__nav { display: grid; gap: 16px; } .pick { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 24px; background: var(--panel); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 10px 28px rgba(0, 0, 0, .42); transition: transform .16s ease, box-shadow .2s ease; } .pick:active { transform: scale(.98); } @media (hover: hover) { .pick:hover { box-shadow: 0 18px 38px -12px rgba(255, 100, 23, .7), 0 10px 26px rgba(0, 0, 0, .45); } } .pick:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } .pick__img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; } /* Карточка каталога, у которого ещё нет ни одной позиции: вместо фотографии фирменный градиент с паттерном и пометка «Скоро». */ .pick--soon { background: url("../media/pattern.png") center / 150% no-repeat, var(--gradient); background-blend-mode: soft-light, normal; } .pick__soon { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(5, 1, 15, .38); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 6px 13px; backdrop-filter: blur(8px); } .pick__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(15, 3, 45, .18), rgba(15, 3, 45, .5)); } /* Стеклянная подпись поверх фотографии — материалу есть что преломлять, поэтому стекло здесь читается лучше всего. */ .pick__plate { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 18px; } .pick__text { flex: 1; min-width: 0; } .pick__name { display: block; font-size: 17px; font-weight: 800; line-height: 1.15; margin-bottom: 2px; letter-spacing: .005em; } .pick__note { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, .82); } .pick__go { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: #fff; background: var(--orange); box-shadow: 0 4px 14px rgba(255, 100, 23, .5); } /* Кнопка возврата к выбору каталога. Раньше это была просто надпись — по ней не читалось, что на неё можно нажать. Теперь стеклянная капсула со стрелкой, с откликом на нажатие и областью касания в 44 px. */ .head__back { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 16px 8px 8px; min-height: 40px; border-radius: var(--r-full); font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(155deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07)), rgba(72, 38, 131, .45); -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.06); backdrop-filter: blur(18px) saturate(180%) brightness(1.06); border: 1px solid rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 18px rgba(5, 1, 15, .4); -webkit-tap-highlight-color: transparent; transition: transform .14s ease, box-shadow .2s ease; } .head__back-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 17px; font-weight: 900; line-height: 1; box-shadow: 0 3px 10px rgba(255, 100, 23, .5); } .head__back:active { transform: scale(.96); } @media (hover: hover) { .head__back:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 24px -6px rgba(255, 100, 23, .55); } } .head__back:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* отблеск, как у остальных стеклянных элементов */ .head__back::before { content: ""; position: absolute; inset: -50% -20% auto -20%; height: 200%; background: linear-gradient(102deg, transparent 32%, rgba(255, 255, 255, .18) 46%, rgba(255, 255, 255, .05) 54%, transparent 64%); transform: rotate(-8deg); pointer-events: none; z-index: -1; } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .head__back { background: var(--purple); -webkit-backdrop-filter: none; backdrop-filter: none; } .head__back::before { display: none; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .head__back { background: var(--purple); } .head__back::before { display: none; } } /* ================================================================ Стекло на карточках программ — ВКЛЮЧАЕТСЯ классом glass-cards на . Убрать класс в prototype.html и phygital.html — карточки мгновенно вернутся к прежнему виду, ничего больше править не нужно. Сделано так по просьбе Дениса: он хотел попробовать и иметь возможность откатить. ================================================================ */ .glass-cards .card { border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 14px 34px rgba(5, 1, 15, .5); } .glass-cards .card:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 26px -8px rgba(255, 100, 23, .8), 0 6px 18px rgba(0, 0, 0, .4); } @media (hover: hover) { .glass-cards .card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 34px -10px rgba(255, 100, 23, .7), 0 10px 24px rgba(0, 0, 0, .45); } } /* косой отблеск поверх фотографии — тот же, что у плашек */ .glass-cards .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(102deg, transparent 30%, rgba(255, 255, 255, .13) 45%, rgba(255, 255, 255, .04) 54%, transparent 66%); pointer-events: none; } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .glass-cards .card::after { display: none; } } /* кнопка «отправить» на титульной ------------------------------------ Такая же круглая оранжевая, как в шапке каталогов, и в том же углу — чтобы приём был один и тот же на всех страницах. */ .start .startshare { position: absolute; top: 4px; right: 0; z-index: 3; border: 0; cursor: pointer; color: #fff; font-family: inherit; } .start { position: relative; } .startshare.is-done { background: #5BE37D; } /* «отправить» на карточке каталога ----------------------------------- */ .pickwrap { position: relative; } .pickshare { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font: 700 17px/1 inherit; color: #fff; border: 0; /* Без backdrop-filter: размытие поверх картинки в скруглённом контейнере с overflow:hidden гасило всю обложку карточки — проверено, картинка переставала рисоваться целиком. */ background: rgba(15, 3, 45, .62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(0, 0, 0, .4); transition: transform .12s ease, background .18s ease; } .pickshare:active { transform: scale(.92); } .pickshare.is-done { background: #5BE37D; } /* иконка «отправить» --------------------------------------------------- Раньше здесь стоял символ «↗». В каждом шрифте у него своя метрика, и в круглой кнопке он заметно съезжал вниз-влево. Рисованная иконка центрируется по своему viewBox и выглядит одинаково везде. */ /* Значки внутри круглых кнопок: раньше это были символы «≡», «✕», «→», «‹». Символ сидит по метрике шрифта и в круге заметно съезжает — на увеличении «≡» стоял выше центра. Рисованные иконки от шрифта не зависят. Обёртки-span тоже переводим в блок, иначе строка текста снова добавляет свой сдвиг. */ /* значки кнопок -------------------------------------------------------- Значок нарисован в квадрате 48x48 с рисунком ровно вокруг центра и растянут на всю кнопку. Центровать нечего: квадрат значка совпадает с квадратом кнопки, а рисунок внутри стоит по центру по построению. Так убрана целая цепочка граблей: символы висели по метрике шрифта, раскладка зависела от строчного бокса, transform у SVG на части андроидов не срабатывал. Теперь ни одна из этих вещей ни на что не влияет. */ /* Размер значка задан в пикселях, а не в процентах от кнопки. Процент считается от содержимого кнопки, а у