/* Компоненты дизайн-системы, общие для всех страниц сайта. Источник: ds-source/components/{core,media,content}/*.jsx - строка CSS внутри каждого компонента. Правки из dc-source/tf-button-fix.css сведены сюда обычными правилами без !important: в статике порядок загрузки под контролем, перебивать бандл нечем. */ /* ---- Logo. Размер только медиазапросом, никакого JS-замера при монтировании. 48 + 12 + 12 = 72 (высота шапки), 36 + 10 + 10 = 56. Левое поле снято, чтобы знак встал на поле сетки: 64 на широком экране, 20 на телефоне. ---- */ .tf-logo{display:inline-block;line-height:0;box-sizing:content-box} .tf-logo img{height:100%;width:auto;display:block} .tf-logo--header{height:48px;margin:12px 12px 12px 0} /* Знак в подвале той же высоты, что в шапке: 48 на широком, 36 на телефоне. Было 72 на обеих ширинах, правка 15.09. Пропорции хранит height + width:auto. */ .tf-logo--footer{height:48px;margin:0} .tf-logo__link{display:inline-block;line-height:0} @media (max-width:767px){.tf-logo--header{height:36px;margin:10px 10px 10px 0}.tf-logo--footer{height:36px}} /* ---- NavItem ---- */ .tf-nav{font-family:var(--font-family,"Golos Text","Helvetica Neue",Arial,sans-serif);font-size:var(--type-ui-size,14px);font-weight:var(--type-ui-weight,500);letter-spacing:var(--type-ui-ls,0.02em);line-height:1;color:var(--fg,#F2F2F2);text-decoration:none;display:inline-flex;align-items:center;min-height:24px;padding:10px 0;position:relative;transition:var(--transition-ui,background-color 300ms cubic-bezier(0.2,0,0,1),color 300ms cubic-bezier(0.2,0,0,1),border-color 300ms cubic-bezier(0.2,0,0,1),opacity 300ms cubic-bezier(0.2,0,0,1));opacity:.78} .tf-nav:hover{opacity:1;color:var(--action,#FFFFFF);text-decoration:none} .tf-nav:active{opacity:.6} .tf-nav[aria-current=page]{opacity:1;color:var(--action,#FFFFFF)} /* Подчёркивание активного пункта - светло-сиреневый из брендбука (15.09); сам пункт остаётся action */ .tf-nav[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--accent-violet,#DABFDA)} .tf-nav:focus-visible{outline:var(--focus-width,2px) solid var(--action,#FFFFFF);outline-offset:var(--focus-offset,2px)} .tf-nav--large{font-size:var(--type-section-size,28px);font-weight:var(--type-section-weight,500);letter-spacing:0;padding:12px 0;opacity:1} .tf-nav--large[aria-current=page]::after{display:none} .tf-nav--large[aria-current=page]{color:var(--muted,#B0B0B0)} /* ---- Button ---- */ .tf-btn{font-family:var(--font-family,"Golos Text","Helvetica Neue",Arial,sans-serif);font-size:var(--type-ui-size,14px);font-weight:var(--type-ui-weight,500);letter-spacing:var(--type-ui-ls,0.02em);line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:0;cursor:pointer;text-decoration:none;box-sizing:border-box;white-space:nowrap;transition:var(--transition-ui,background-color 300ms cubic-bezier(0.2,0,0,1),color 300ms cubic-bezier(0.2,0,0,1),border-color 300ms cubic-bezier(0.2,0,0,1),opacity 300ms cubic-bezier(0.2,0,0,1));appearance:none} .tf-btn:focus-visible{outline:var(--focus-width,2px) solid var(--action,#FFFFFF);outline-offset:var(--focus-offset,2px)} .tf-btn[disabled],.tf-btn[aria-disabled=true]{opacity:.4;cursor:default;pointer-events:none} .tf-btn--md{height:44px;padding:0 24px} .tf-btn--sm{height:36px;padding:0 16px} /* Серебро при наведении (созвон 15.09, выбор владельца): в покое кнопки прежние, белая заливка с чёрным текстом и белый контур со светлым текстом. По наведению и по фокусу с клавиатуры (одно правило на оба состояния, чтобы клавиатура и мышь вели себя одинаково) обе заливаются --accent-silver, текст и знак --bg, граница серебристая: чёрный на серебре 6,72:1. Переход общий, --transition-ui, своих длительностей нет. Рамка фокуса --action с отступом 2 px ложится на фон страницы вокруг кнопки и на серебре не теряется. Нажатие (:active) у обеих - --action-pressed #8A8A8A, чуть темнее серебра, текст --bg: прежнее нажатие вторичной (подложка surface) с чёрным текстом наведения дало бы невидимую надпись. До 16.09 нажатие брало --muted; с новым фоном --muted осветлён до #B0B0B0 и как заливка нажатия стал бы светлее наведения, поэтому прежнее значение вынесено в свой токен (colors.css). Граница в покое --border-interactive 0.45 (было 0.35): 3,43:1 на самой светлой точке нового фона, порог 3:1. */ .tf-btn--primary{background-color:var(--action,#FFFFFF);color:var(--bg,#0A0A0A);-webkit-text-fill-color:var(--bg,#0A0A0A);border:1px solid var(--action,#FFFFFF)} .tf-btn--primary:hover,.tf-btn--primary:focus-visible{background-color:var(--accent-silver,#9795A1);border-color:var(--accent-silver,#9795A1)} .tf-btn--primary:active{background-color:var(--action-pressed,#8A8A8A);border-color:var(--action-pressed,#8A8A8A)} .tf-btn--primary svg path{stroke:var(--bg,#0A0A0A)} .tf-btn--secondary{background-color:transparent;color:var(--fg,#F2F2F2);-webkit-text-fill-color:var(--fg,#F2F2F2);border:1px solid var(--border-interactive,rgba(255,255,255,0.45))} .tf-btn--secondary:hover,.tf-btn--secondary:focus-visible{background-color:var(--accent-silver,#9795A1);border-color:var(--accent-silver,#9795A1);color:var(--bg,#0A0A0A);-webkit-text-fill-color:var(--bg,#0A0A0A);text-decoration:none} .tf-btn--secondary:active{background-color:var(--action-pressed,#8A8A8A);border-color:var(--action-pressed,#8A8A8A);color:var(--bg,#0A0A0A);-webkit-text-fill-color:var(--bg,#0A0A0A)} .tf-btn--ghost{background-color:transparent;color:var(--fg,#F2F2F2);-webkit-text-fill-color:var(--fg,#F2F2F2);border:1px solid transparent;padding-left:0;padding-right:0} .tf-btn--ghost:hover,.tf-btn--ghost:focus-visible{color:var(--action,#FFFFFF);-webkit-text-fill-color:var(--action,#FFFFFF);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .tf-btn--ghost:active{color:var(--action-pressed,#8A8A8A)} .tf-btn--ghost svg path,.tf-btn--secondary svg path{stroke:currentColor} .tf-btn svg{width:16px;height:16px;flex:none} /* ---- Frame. Пропорция в классе, а не инлайном. Подложка surface видна только до загрузки картинки: cover-кадры (16:9 в разделе «Фильмы», «Другие фильмы», «Наши работы») накрывают её целиком. У остальных рамок (постер ниже - в потоке в пропорции файла; лента кадров на странице фильма - contain, film.css) подложки с 16.09 нет: фон страницы больше не чёрный, и поля surface читались бы тёмной рамкой вокруг картинки (DESIGN-SYSTEM.md: полосы на surface читаются как рамка). ---- */ .tf-frame{position:relative;background:var(--surface,#141414);overflow:hidden;width:100%;border-radius:0} .tf-frame--16x9{aspect-ratio:16/9} .tf-frame__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:var(--img-filter,brightness(0.82) contrast(1.04) saturate(0.85));transition:var(--transition-image,filter 400ms cubic-bezier(0.2,0,0,1))} .tf-frame--letterbox{background:var(--bg,#0A0A0A)} .tf-frame--letterbox .tf-frame__img{object-fit:contain} .tf-frame--lit .tf-frame__img,.tf-frame--hover:hover .tf-frame__img,a:hover>.tf-frame--hover .tf-frame__img,a:focus-visible>.tf-frame--hover .tf-frame__img{filter:var(--img-filter-lit,brightness(1) contrast(1.02) saturate(0.9))} .tf-frame__fade{position:absolute;inset:0;pointer-events:none;background:var(--img-fade,linear-gradient(to bottom,rgba(10,10,10,0) 55%,rgba(10,10,10,0.55) 100%))} /* Постер (17.09): показывается в пропорции своего файла, без полей, подложки, рамки и тени. Картинка стоит в потоке (position static, height auto, display block: строчная картинка дала бы зазор под собой), рамка берёт высоту от неё. До загрузки высоту задаёт пропорция из атрибутов width и height, они в разметке равны размеру файла 880: 1257 у «Дороги домой», 1294 у «Хищников», 1241 у «Людей как людей», 1244 у «Уверенности» и «Я вернулся домой». Файлы -poster-640/880 собраны из оригиналов в их пропорции (1,41-1,47); до 17.09 они были добраны до 1:1,45 полями #141414, и на фоне-градиенте эти поля читались тёмными полосами сверху-снизу (слева-справа у «Хищников»). Обработка кадра не применяется: у постеров своя печать. Постер другой пропорции, загруженный через панель, покажется целиком: до загрузки бокс в пропорции атрибутов, после - в пропорции файла (высота ниже сдвинется один раз). Шторка слоя движения (.tf-frame::after, inset 0) накрывает рамку целиком. ---- */ .tf-frame--poster{background:transparent} .tf-frame--poster .tf-frame__img{position:static;display:block;height:auto;filter:none} /* ---- MetaLine. Инлайн-стили компонента вынесены в класс, значения те же. ---- */ .tf-meta{margin:0;font-family:var(--font-family,"Golos Text","Helvetica Neue",Arial,sans-serif);font-size:var(--type-caption-size,14px);line-height:var(--type-caption-lh,1.45);font-weight:400;color:var(--muted,#B0B0B0);display:flex;flex-wrap:wrap;align-items:baseline} .tf-meta>span{white-space:nowrap} .tf-meta__sep{color:var(--muted,#B0B0B0);padding:0 .45em} /* ---- FilmCard (.tf-card) снят 15.09: единственное место, шахматные карточки главной, заменено лентой постеров (.gallery--posters в home.css). ---- */ /* ---- Заголовок секции. В макете это инлайн-стиль margin-bottom со значением block-gap, одинаковый на главной и на странице фильма. ---- */ .sec__title{margin-bottom:var(--block-gap,48px)} .sec__head{display:grid;gap:12px;margin-bottom:var(--block-gap,48px)} /* ---- Горизонтальная лента с листанием: кадры на странице фильма и постеры на главной. Один механизм: кнопки .gallery__nav и стрелки - gallery.js, плавность и snap - здесь, при reduced-motion плавность глушит motion.css. Лента выходит на поля страницы отрицательными полями, чтобы крайний элемент не срезался рамкой контейнера, а snap-старт стоит на поле сетки через scroll-padding. Размер элемента задаёт страница: film.css и home.css. ---- */ .gallery{display:flex;gap:var(--gutter,24px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:var(--page-margin,64px);padding:4px var(--page-margin,64px);margin:0 calc(-1 * var(--page-margin,64px));scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth} .gallery::-webkit-scrollbar{display:none} .gallery__item{flex:none;scroll-snap-align:start;display:block} .gallery__nav{display:flex;gap:var(--space-3,12px);justify-content:flex-end;padding-top:var(--space-4,16px)} /* На телефоне лента листается пальцем, следующий элемент виден за краем */ @media (max-width:767px){.gallery__nav{display:none}} /* ---- Полоса текста под кадром. Общая для раздела «Фильмы» и страницы фильма. ---- */ .card__strip{padding-top:var(--strip-gap,16px);display:grid;gap:8px} /* ---- ContactLink ---- */ .tf-contact{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none;color:var(--fg,#F2F2F2);min-width:0;max-width:100%} .tf-contact__label{font-family:var(--font-family,"Golos Text","Helvetica Neue",Arial,sans-serif);font-size:var(--type-label-size,12px);font-weight:var(--type-label-weight,500);letter-spacing:var(--type-label-ls,0.08em);text-transform:uppercase;line-height:var(--type-label-lh,1.3);color:var(--muted,#B0B0B0)} .tf-contact__value{font-family:var(--font-family,"Golos Text","Helvetica Neue",Arial,sans-serif);font-size:var(--type-subhead-size,20px);font-weight:400;line-height:var(--type-subhead-lh,1.35);color:var(--fg,#F2F2F2);transition:var(--transition-ui,background-color 300ms cubic-bezier(0.2,0,0,1),color 300ms cubic-bezier(0.2,0,0,1),border-color 300ms cubic-bezier(0.2,0,0,1),opacity 300ms cubic-bezier(0.2,0,0,1));text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1px;display:inline-block;min-height:24px;overflow-wrap:anywhere;max-width:100%} .tf-contact--large .tf-contact__value{font-size:var(--type-section-size,28px);line-height:var(--type-section-lh,1.2);font-weight:500} @media (max-width:1023px){.tf-contact--large .tf-contact__value{font-size:var(--type-subhead-size,20px);line-height:var(--type-subhead-lh,1.35)}} .tf-contact:hover{text-decoration:none} .tf-contact:hover .tf-contact__value{color:var(--action,#FFFFFF);text-decoration-color:var(--action,#FFFFFF)} .tf-contact:active .tf-contact__value{color:var(--action-pressed,#8A8A8A);text-decoration-color:var(--action-pressed,#8A8A8A)} .tf-contact:focus-visible{outline:var(--focus-width,2px) solid var(--action,#FFFFFF);outline-offset:var(--focus-offset,2px)} /* ---- Высота первого экрана. Одна переменная на главную и на пять страниц фильмов: ответ заказчика про полосу с названием внизу правится здесь, а не пятью числами по файлам. ---- */ :root{--hero-height:100vh} /* ---- Credits. Порт ds-source/components/content/Credits.jsx. Мёртвый селектор .tf-credits dt из источника не переносится: разметка там на ul/li/span, dl/dt не используется. ---- */ .tf-credits{margin:0;padding:0;list-style:none;border-top:1px solid var(--border,rgba(255,255,255,0.12))} .tf-credits li{display:grid;grid-template-columns:minmax(120px,1fr) 2fr;gap:24px;padding:14px 0;border-bottom:1px solid var(--border,rgba(255,255,255,0.12));align-items:baseline} .tf-credits__role{margin:0;font-family:var(--font-family,"Golos Text","Helvetica Neue",Arial,sans-serif);font-size:var(--type-label-size,12px);font-weight:var(--type-label-weight,500);letter-spacing:var(--type-label-ls,0.08em);text-transform:uppercase;line-height:var(--type-label-lh,1.3);color:var(--muted,#B0B0B0)} .tf-credits__name{margin:0;font-family:var(--font-family,"Golos Text","Helvetica Neue",Arial,sans-serif);font-size:var(--type-body-size,17px);line-height:var(--type-body-lh,1.55);color:var(--fg,#F2F2F2)} @media (max-width:767px){.tf-credits li{grid-template-columns:1fr;gap:4px;padding:12px 0}} /* ---- Модальное окно. Порт ds-source/components/media/TrailerModal.jsx. Ширина панели считается CSS-математикой, а не JS-замером окна: 48 - это padding 24 с двух сторон, 69 - полоса заголовка с границей (кнопка «Закрыть» 44 + поля 12 и 12 + граница 1; до 15.09 стояло 57, и на коротком окне панель выходила за поле). ---- */ .tf-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:var(--color-scrim,rgba(10,10,10,0.88));opacity:0;visibility:hidden;transition:opacity var(--dur-slow,500ms) var(--ease,cubic-bezier(0.2,0,0,1)),visibility 0s linear var(--dur-slow,500ms)} .tf-modal--open{opacity:1;visibility:visible;transition:opacity var(--dur-slow,500ms) var(--ease,cubic-bezier(0.2,0,0,1)),visibility 0s} .tf-modal__panel{width:min(1200px,100%,calc((100vh - 48px - 69px) * 16 / 9));background:var(--surface,#141414);border:1px solid var(--border-interactive,rgba(255,255,255,0.45));outline:none;box-sizing:border-box} .tf-modal__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px 12px 24px;min-height:56px;box-sizing:border-box;border-bottom:1px solid var(--border,rgba(255,255,255,0.12))} .tf-modal__title{font-family:var(--font-family,"Golos Text","Helvetica Neue",Arial,sans-serif);font-size:var(--type-caption-size,14px);color:var(--muted,#B0B0B0);margin:0;line-height:1.3} .tf-modal__title b{font-weight:500;color:var(--fg,#F2F2F2)} .tf-modal__video{aspect-ratio:16/9;background:var(--bg,#0A0A0A);position:relative} .tf-modal__video>*{position:absolute;inset:0;width:100%;height:100%;border:0} /* «Закрыть»: цвет задан явно и через text-fill-color -