/* Оформление сайта организации. Один лист на всё приложение, а не отдельный под публичную главную, как у конструктора: там консоль тянет свои стили на каждом экране вошедшего, и разметка лендинга в них — вес, который платят все. Здесь публичных страниц почти столько же, сколько всех, и второй файл был бы разделением ради разделения. Ни одного внешнего шрифта и ни одного обращения к CDN — как и во всех приложениях платформы: страница обязана открыться и выглядеть собой на машине, у которой наружу ничего не пущено. */ /* --------------------------------------------------------------------------------------------------- Токены Значения приходят из _content/Center.Design/design.css — общего пакета платформы, одного на три приложения; здесь они только получают имена, которыми на них ссылается остальной файл. Тёмная тема больше не объявляется здесь совсем: --ds-* переключаются сами. --------------------------------------------------------------------------------------------------- */ :root { /* color-scheme здесь не объявляется: его говорит design.css, и сказанное дважды значит «побеждает тот, кто ниже», а не «сказано твёрже». */ --ote-bg: var(--ds-bg); --ote-panel: var(--ds-surface); --ote-line: var(--ds-line); --ote-text: var(--ds-text); --ote-muted: var(--ds-muted); /* Акцент — платформенный индиго, как у конструктора и у страниц входа. Бирюзовый #0b6b62 был здесь единственным акцентом, и человек, нажавший «Войти», попадал на страницу, где всё другого цвета: одно и то же действие в одном и том же продукте выглядело двумя разными продуктами. Бирюза осталась маркой — знаком и надзаголовком первого экрана, — но кнопку, ссылку и кольцо фокуса больше не красит. Две роли — две переменные: --ote-accent читают как текст, --ote-accent-fill заливают под белые буквы. Один цвет не может быть верным в обеих ролях, и в тёмной теме они расходятся. */ --ote-accent: var(--ds-accent); --ote-accent-fill: var(--ds-accent-fill); --ote-accent-soft: var(--ds-accent-soft); /* Марка организации: только знак и надзаголовок первого экрана. */ --ote-brand: var(--ds-brand); --ote-brand-soft: var(--ds-brand-soft); --ote-tint: color-mix(in srgb, var(--ds-accent) 8%, var(--ds-bg)); --ote-success: var(--ds-success); --ote-warning: var(--ds-warning); --ote-warning-soft: var(--ds-warning-soft); --ote-radius: var(--ds-radius-lg); --ote-max: var(--ds-page); } /* --------------------------------------------------------------------------------------------------- Основа --------------------------------------------------------------------------------------------------- */ html, body { margin: 0; background: var(--ote-bg); color: var(--ote-text); font: var(--ds-size)/var(--ds-leading) var(--ds-font); -webkit-font-smoothing: antialiased; /* Перенос длинных слов переехал отсюда на — см. App.razor. Нужен по-прежнему тот же anywhere, а не break-word: последний не уменьшает минимальную ширину содержимого, и заголовок во флекс-колонке всё равно получал бы ширину самого длинного слова, то есть горизонтальную прокрутку на телефоне. Но объявлять его здесь означало спорить с design.css, где у body написан break-word, и выигрывать спор порядком подключения: правка общего пакета до сайта организации просто не доезжала бы, и понять почему можно было только сравнив два файла. Утилита пакета — то же самое значение, сказанное один раз и с весом класса, который спора не заводит. */ } a { color: var(--ote-accent); text-decoration: none; } a:hover { text-decoration: underline; } code { padding: 1px 5px; border-radius: 5px; background: var(--ote-bg); color: var(--ote-text); font-family: var(--ds-font-mono); font-size: .92em; } h1, h2, h3 { letter-spacing: var(--ds-tracking-tight); } /* --------------------------------------------------------------------------------------------------- Оболочка: шапка, подвал, ссылка обхода --------------------------------------------------------------------------------------------------- */ .ote-wrap { max-width: var(--ote-max); margin-inline: auto; padding-inline: 22px; } /* Шапка, ссылка обхода, бургер и кнопки — не здесь. Они общие у платформы и лежат в _content/Center.Design/design.css под именами ds-*. Здесь остаётся только ссылка-пункт правой части шапки: у сайта организации в ней стоят «Учётная запись» и «Выйти», и это его собственный набор. */ /* Высота 32, а не по строке текста: ссылка высотой в 20 пикселей — это цель, в которую промахиваются. WCAG 2.2 называет нижней границей 24, и не из вежливости — попадание пальцем и попадание мышью при треморе считаются одинаково. */ .ote-link { display: inline-flex; align-items: center; min-height: var(--ds-tap); padding: 0 10px; border-radius: var(--ds-radius-sm); color: var(--ote-muted); font-size: var(--ds-size-sm); transition: background var(--ds-t-tint) var(--ds-ease), color var(--ds-t-tint) var(--ds-ease); } .ote-link:hover { background: var(--ote-panel); color: var(--ote-text); text-decoration: none; } /* Текущий раздел — не только цветом: «вы здесь» и «сюда можно нажать» одним цветом различают плохо, а при дальтонизме не различают вовсе. */ .ote-link.active { color: var(--ote-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ote-accent); } .ote-foot { margin-top: 8px; padding: 22px 0 26px; border-top: 1px solid var(--ote-line); } .ote-foot-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .ote-foot-brand { color: var(--ote-muted); font-size: 13px; } .ote-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; } /* Подпись «сделано тем-то» — мелко и приглушённо: это подпись мастера на обороте, а не раздел сайта. */ .ote-foot-made { color: var(--ote-muted); font-size: var(--ds-size-xs); } .ote-foot-made a { color: inherit; } .ote-foot-made a:hover { color: var(--ote-text); } /* Ссылка подвала была ростом в строку — 20 пикселей, и это цель, в которую промахиваются. Шапку платформы с её 44 подвал не покрывает: общий компонент кончается на шапке, а подвал у каждого приложения свой. Поэтому правило здесь, а не в design.css, — и здесь же оно останется, пока подвал не станет общим. Боковое поле скомпенсировано отрицательным margin: цель растёт, а ряд не разъезжается. */ .ote-foot-nav a { display: inline-flex; align-items: center; min-height: 32px; padding-inline: 6px; margin-inline: -6px; border-radius: 8px; color: var(--ote-muted); font-size: 13px; } .ote-foot-nav a:hover { color: var(--ote-text); } /* Плашка сборки прижата к правому краю подвала — там же, где она стоит в остальных приложениях. Класс общий: плашку печатает один компонент платформы, а не три копии, как раньше. */ .ote-foot .ds-stamp { margin-inline-start: auto; } /* --------------------------------------------------------------------------------------------------- Внутренние страницы: учётная запись, ошибка, «не найдено» --------------------------------------------------------------------------------------------------- */ .ote-page { max-width: 880px; margin-inline: auto; padding: 34px 22px 64px; } .ote-page h1 { margin: 0 0 10px; font-size: clamp(25px, 4.4vw, 32px); } .ote-page h2 { margin: 30px 0 10px; font-size: 20px; } .ote-page p { margin: 12px 0 0; color: var(--ote-muted); line-height: 1.62; } .ote-page p a { color: var(--ote-accent); } /* Имя вошедшего — крупно и своим цветом: это ответ на вопрос «под кем я тут», и он важнее абзаца под ним. Селектор с обоими классами, а не !important: приглушённый цвет абзацев страницы задан через .ote-page p, и переспорить его достаточно тем же весом плюс один класс. */ .ote-page .ote-account-who { font-size: var(--ds-size-lg); font-weight: 600; color: var(--ote-text); } /* «Технические данные» — раскрытие, а не отдельная страница и не таблица во весь экран. Здесь лежит то, что нужно ровно тогда, когда что-то не сходится: роль не та, имя не то. Закрытое раскрытие ничего не весит и ничего не обещает; раньше эта таблица была всем содержимым страницы. */ .ote-tech { margin-top: 34px; border-top: 1px solid var(--ote-line); padding-top: 14px; } .ote-tech summary { display: inline-flex; align-items: center; min-height: var(--ds-tap); padding-inline: 8px; margin-inline: -8px; border-radius: var(--ds-radius-sm); color: var(--ote-muted); font-size: var(--ds-size-sm); cursor: pointer; transition: background var(--ds-t-tint) var(--ds-ease), color var(--ds-t-tint) var(--ds-ease); } .ote-tech summary:hover { background: var(--ote-panel); color: var(--ote-text); } .ote-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 22px; margin: 22px 0 0; } .ote-facts dt { color: var(--ote-muted); font-size: 13.5px; } .ote-facts dd { margin: 0; } .ote-table-scroll { margin-top: 14px; overflow-x: auto; } .ote-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ote-table th { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--ote-line); color: var(--ote-muted); font-weight: 600; text-align: left; white-space: nowrap; } .ote-table td { padding: 7px 14px 7px 0; border-bottom: 1px solid var(--ote-line); vertical-align: top; } .ote-table td:last-child, .ote-table th:last-child { padding-right: 0; } /* Кнопки — общие, ds-btn из design.css: 40 обычная, 46 крупная. Здесь их было ровно столько же и почти такими же, и «почти» и есть то, ради чего эта задача делалась. */ /* --------------------------------------------------------------------------------------------------- Полосы и заголовки разделов --------------------------------------------------------------------------------------------------- */ .ote-band { padding: 62px 0; background: var(--ote-tint); } .ote-section { padding: 62px 22px; } .ote-lp h1 { margin: 0; font-size: clamp(29px, 5vw, 46px); line-height: 1.12; letter-spacing: -0.025em; } .ote-lp h2 { margin: 0; font-size: clamp(23px, 3.5vw, 33px); line-height: 1.2; } .ote-lp h3 { margin: 0; font-size: 17px; line-height: 1.35; } .ote-head { max-width: 42em; margin-bottom: 30px; } .ote-head p { margin: 12px 0 0; color: var(--ote-muted); font-size: 15.5px; line-height: 1.62; } /* Надзаголовок — марка организации, а не акцент: единственное место вне знака, где бирюза осталась. Она ничего не обещает нажатием, поэтому и не спорит с индиговым «сюда можно нажать». */ .ote-eyebrow { margin: 0 0 10px; color: var(--ote-brand); font-size: 13px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; } .ote-note { margin: 16px 0 0; max-width: 40em; color: var(--ote-muted); font-size: 13.5px; line-height: 1.6; } .ote-lead { margin: 18px 0 0; max-width: 34em; color: var(--ote-muted); font-size: 17px; line-height: 1.62; } .ote-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* Шапка внутренней страницы: тот же первый экран, только без дверей. */ .ote-page-head { padding: 46px 0 6px; } /* --------------------------------------------------------------------------------------------------- ПЕРВЫЙ ЭКРАН ГЛАВНОЙ: ДВЕРИ Требование владельца дословно: «Первым, что должен видеть посетитель, это переходы на наши приложения». Поэтому здесь нет ни макета-витрины, ни панели слоёв, ни якорей внутрь страницы — только фраза слева и карточки-переходы справа. Замер, ради которого выбраны эти размеры: на 375×812 под шапкой в 56 пикселей обе карточки обязаны поместиться целиком, без прокрутки. Отсюда компактные поля карточки и заголовок, чья нижняя граница clamp меньше прежней. --------------------------------------------------------------------------------------------------- */ .ote-doors { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 44px; max-width: var(--ote-max); margin-inline: auto; padding: 46px 22px 62px; } /* Фраза стоит, пока карточки едут. sticky, а не fixed: элемент остаётся в потоке, поэтому на телефоне, где колонка одна, он сам становится обычным блоком — отменять липкость отдельным правилом не нужно. Отступ сверху — высота шапки плюс поле: без него липкий блок подъезжал бы под неё. */ .ote-doors-say { position: sticky; top: calc(var(--ds-header) + 22px); min-width: 0; } /* Знак прорисовывается один раз — при первом появлении документа. Длина окружности радиуса 18 — 113 пикселей. Дорожка длиной в неё и смещение в неё же означают «кольцо не нарисовано вовсе»; переход сводит смещение к нулю, и кольцо возникает росчерком. Один раз и всё: крутящийся или пульсирующий знак выглядит дёшево, а это первое, что видит клиент. @starting-style вместо @keyframes намеренно: ступень движения берётся из общего набора, гасится общим правилом «поменьше движения», и в лист приложения не заводится анимация, о которой никто не знает. Там, где @starting-style не поддержан, кольцо просто нарисовано сразу — деградация безопасная. */ .ote-mark { display: block; width: 40px; height: 40px; margin-bottom: 18px; } .ote-mark-ring { fill: none; stroke: var(--ote-brand); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 0; /* Начало росчерка — сверху, а не справа: справа он читается как стрелка часов. */ transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset var(--ds-t-layer) var(--ds-ease-out); } @starting-style { .ote-mark-ring { stroke-dashoffset: 113; } } .ote-doors-list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; } /* Карточка-переход. Высота у неё есть и подъём под курсором — тоже, и это ровно тот случай, когда подъём законен: по карточке действительно можно нажать целиком, а не только по кнопке внутри. Закон «подниматься имеет право только нажимаемое» тем и хорош, что здесь он разрешает. */ .ote-door { position: relative; min-width: 0; padding: 20px; background: var(--ote-panel); border: 1px solid var(--ote-line); border-radius: var(--ote-radius); box-shadow: var(--ds-shadow-md); transition: box-shadow var(--ds-t-move) var(--ds-ease), transform var(--ds-t-move) var(--ds-ease-out); } .ote-door:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-lg); } /* Просадка на нажатие — единственный отклик, который вообще может увидеть палец: :hover на телефоне не наступает, и карточка без него отвечает на касание ничем. */ .ote-door:active { transform: translateY(1px); } .ote-door h2 { font-size: var(--ds-size-lg); line-height: 1.3; } .ote-door > p { margin: 8px 0 0; color: var(--ote-muted); font-size: 14.5px; line-height: 1.55; } .ote-door-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; } /* Нажимаемым обязано быть то, что выглядит нажимаемым, — а выглядит так вся карточка. Псевдоэлемент кнопки растянут на карточку целиком, поэтому цель нажатия у неё размером с карточку, а в порядке табуляции по-прежнему одна ссылка, а не две (обёртка вокруг карточки со второй ссылкой внутри вообще невалидна). */ .ote-door-open::after { content: ""; position: absolute; inset: 0; } /* Вторая ссылка лежит поверх растянутого слоя — иначе «Тарифы» вели бы в конструктор. */ .ote-door-aside { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: var(--ds-tap); padding-inline: 8px; margin-inline: -8px; border-radius: var(--ds-radius-sm); font-size: var(--ds-size-sm); font-weight: 600; } .ote-door-at { display: block; margin-top: 14px; color: var(--ote-muted); font-size: var(--ds-size-xs); } /* --------------------------------------------------------------------------------------------------- Короткая карточка продукта — второй экран главной --------------------------------------------------------------------------------------------------- */ .ote-brief { margin-top: 26px; padding: 22px; background: var(--ote-panel); border: 1px solid var(--ote-line); border-radius: var(--ote-radius); box-shadow: var(--ds-shadow-md); } .ote-brief-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px 22px; margin: 16px 0 0; padding: 0; list-style: none; } .ote-brief-list li { position: relative; min-width: 0; padding-inline-start: 22px; font-size: 14.5px; } /* Галочка псевдоэлементом, а не символом в тексте: голосовое чтение не должно произносить её как слово. */ .ote-brief-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .45em; width: 9px; height: 5px; border-inline-start: 2px solid var(--ote-accent); border-bottom: 2px solid var(--ote-accent); rotate: -45deg; } .ote-brief-caveat { margin: 18px 0 0; color: var(--ote-muted); font-size: 13.5px; } /* --------------------------------------------------------------------------------------------------- Правила работы — страница «О нас» --------------------------------------------------------------------------------------------------- */ /* min(260px, 100%) вместо 260px, и так во всех сетках страницы: голая нижняя граница в minmax() — это ширина, которую колонка обязана выдержать, и на экране уже неё она не сжимается, а вылезает наружу вместе с горизонтальной прокруткой всей страницы. min() снимает границу ровно тогда, когда места меньше неё. */ .ote-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; } /* Высота у карточки, а не одна рамка. Приёмка на телефоне одним словом: «плоское». Светлая панель на светлом фоне, отличающаяся от него только линией в пиксель, со страницей сливается и не читается как отдельный предмет. Подниматься под курсором ей при этом нечем и незачем: подъём обещает, что по карточке можно нажать, а нажать по ней нельзя — тот же закон записан у карточки-ссылки в библиотеке блоков, и он не меняется оттого, что карточка стоит на другом сайте. Ложное обещание отзывчивости хуже честной неподвижности. Ступень --ds-shadow-md, а не --ds-shadow-sm, и это замер, а не вкус. Под карточкой с sm пиксель фона равен 231 при фоне 232 — разница в одну ступень яркости, то есть тени нет вовсе: sm в общей шкале рассчитан на хайрлайн вроде подложки липкой шапки, где рядом ещё и сплошная линия. md даёт 219 у края и 224 в четырнадцати пикселях — это и читается как отдельный предмет. */ .ote-card { min-width: 0; padding: 20px; background: var(--ote-panel); border: 1px solid var(--ote-line); border-radius: var(--ote-radius); box-shadow: var(--ds-shadow-md); } .ote-card h2 { font-size: 17px; line-height: 1.35; } .ote-card p { margin: 9px 0 0; color: var(--ote-muted); font-size: 14.5px; line-height: 1.6; } /* --------------------------------------------------------------------------------------------------- Полная карточка приложения — страница «О нас» Приложение с полной карточкой сегодня одно, а раскладка списочная: карточка не знает, сколько её соседей, и второе встанет рядом без правки стилей. --------------------------------------------------------------------------------------------------- */ .ote-exhibits { display: flex; flex-direction: column; gap: 26px; } .ote-exhibit { padding: 26px; background: var(--ote-panel); border: 1px solid var(--ote-line); border-radius: var(--ote-radius); box-shadow: var(--ds-shadow-md); } .ote-exhibit-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; } /* Номер экспоната — из счётчика, а не из разметки: список остаётся списком, а цифра не читается голосовым чтением как отдельное слово посреди заголовка. */ .ote-exhibits { counter-reset: ote-exhibit; } .ote-exhibit { counter-increment: ote-exhibit; } .ote-exhibit-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ote-accent-soft); color: var(--ote-accent); font-weight: 700; font-size: 13px; } .ote-exhibit-no::before { content: counter(ote-exhibit); } .ote-exhibit h3 { font-size: clamp(20px, 2.6vw, 26px); } .ote-exhibit-kicker { margin: 0; color: var(--ote-muted); font-size: 13px; } .ote-exhibit-lead { margin: 16px 0 0; max-width: 62ch; color: var(--ote-muted); font-size: 15.5px; line-height: 1.62; } .ote-abilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px 22px; margin: 24px 0 0; padding: 0; list-style: none; } .ote-abilities li { min-width: 0; } .ote-abilities b { display: block; font-size: 14.5px; font-weight: 650; } .ote-abilities span { display: block; margin-top: 5px; color: var(--ote-muted); font-size: 14px; line-height: 1.55; } .ote-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; } .ote-chip { padding: 3px 10px; border-radius: 999px; background: var(--ote-bg); border: 1px solid var(--ote-line); color: var(--ote-muted); font-size: 12.5px; white-space: nowrap; } /* Незаконченное названо, но не выделено ярче готового: рамка предупреждения сообщает «этого пока нет», не становясь при этом самым заметным местом карточки. */ .ote-caveat { margin: 22px 0 0; padding: 11px 14px; border: 1px dashed color-mix(in srgb, var(--ote-warning) 45%, transparent); border-radius: 10px; background: var(--ote-warning-soft); color: var(--ote-warning); font-size: 13.5px; line-height: 1.55; } .ote-exhibit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; } .ote-exhibit-address { color: var(--ote-muted); font-size: 12.5px; } /* --------------------------------------------------------------------------------------------------- Слои и стек — страница /stack --------------------------------------------------------------------------------------------------- */ .ote-layers { min-width: 0; padding: 8px 18px; background: var(--ote-panel); border: 1px solid var(--ote-line); border-radius: var(--ote-radius); box-shadow: var(--ds-shadow-lg); } .ote-layer { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 6px 16px; padding: 13px 0; border-bottom: 1px solid var(--ote-line); } .ote-layer:last-child { border-bottom: 0; } .ote-layer dt { color: var(--ote-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; } .ote-layer dd { margin: 0; font-size: 14px; } .ote-stack-groups { display: flex; flex-direction: column; gap: 30px; } .ote-stack-group h2 { margin: 0 0 4px; color: var(--ote-accent); font-size: 13px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; } .ote-stack-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; } .ote-stack-item { min-width: 0; padding: 18px 20px; background: var(--ote-panel); border: 1px solid var(--ote-line); border-radius: 13px; box-shadow: var(--ds-shadow-md); } .ote-stack-item b { display: block; font-size: 14.5px; font-weight: 650; } .ote-stack-item p { margin: 8px 0 0; color: var(--ote-muted); font-size: 14px; line-height: 1.58; } /* --------------------------------------------------------------------------------------------------- Призыв --------------------------------------------------------------------------------------------------- */ .ote-cta { padding: 66px 0; background: var(--ote-tint); text-align: center; } .ote-cta p { max-width: 46em; margin: 14px auto 0; color: var(--ote-muted); font-size: 16px; line-height: 1.62; } .ote-cta .ote-actions { justify-content: center; } /* --------------------------------------------------------------------------------------------------- Аналитика маркетплейсов — рабочее место /analytics Панели используют те же surface/line/radius, что карточки витрины. У формы нет собственного визуального языка: секретный ввод должен выглядеть обычным предсказуемым полем, а не «особо техническим» экраном. --------------------------------------------------------------------------------------------------- */ .ote-analytics { max-width: 1040px; } .ote-analytics-head { max-width: 720px; margin-bottom: 26px; } .ote-analytics-head > p:last-child { font-size: var(--ds-size-lg); } .ote-analytics-panel { min-width: 0; margin-top: 18px; padding: 22px; background: var(--ote-panel); border: 1px solid var(--ote-line); border-radius: var(--ote-radius); box-shadow: var(--ds-shadow-md); } .ote-analytics-panel > :first-child { margin-top: 0; } .ote-analytics-panel h2 { margin-top: 2px; } .ote-analytics-panel h3 { margin: 22px 0 0; font-size: var(--ds-size); } .ote-analytics-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .ote-analytics-section-head h2 { margin-bottom: 0; } .ote-analytics-notice { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--ote-line); border-radius: var(--ds-radius-md); background: var(--ds-surface-alt); color: var(--ote-text); line-height: 1.45; } .ote-analytics-notice-ready { background: var(--ds-success-soft); color: var(--ds-success); } .ote-analytics-notice-error { background: var(--ds-danger-soft); color: var(--ds-danger); } .ote-analytics-notice + [data-role="session-recovery"], .ote-analytics-notice + [data-action="reset-pending"] { margin-top: 12px; } .ote-analytics-spinner { width: 18px; height: 18px; flex: none; border: 2px solid var(--ote-line); border-top-color: var(--ote-accent); border-radius: 50%; animation: ds-spin var(--ds-t-spin) linear infinite; } .ote-analytics-notice[aria-busy="false"] .ote-analytics-spinner { display: none; } .ote-analytics-empty { margin-top: 18px; padding: 18px; border: 1px dashed var(--ote-line); border-radius: var(--ds-radius-md); background: var(--ds-surface-alt); } .ote-analytics-empty h3 { margin: 0; } .ote-analytics-empty p { margin-top: 6px; } .ote-analytics-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 16px; margin-top: 20px; } .ote-analytics-form > h3, .ote-analytics-form > p { grid-column: 1 / -1; } .ote-analytics-form > h3 + p { margin-top: -8px; } .ote-analytics-form > button { justify-self: start; } .ote-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: var(--ote-text); font-size: var(--ds-size-sm); font-weight: 600; } .ote-field input, .ote-field select { width: 100%; min-width: 0; min-height: var(--ds-control-lg); box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--ote-line); border-radius: var(--ds-radius-sm); background: var(--ote-bg); color: var(--ote-text); font: inherit; font-weight: 400; } .ote-field input:focus-visible, .ote-field select:focus-visible { border-color: var(--ote-accent); outline: 3px solid color-mix(in srgb, var(--ote-accent) 25%, transparent); outline-offset: 1px; } .ote-field select { margin-top: 18px; } .ote-analytics-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 18px 0 0; } .ote-analytics-facts dt { color: var(--ote-muted); } .ote-analytics-facts dd { min-width: 0; margin: 0; font-weight: 600; } .ote-analytics-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .ote-analytics-quota { margin-top: 22px; padding: 16px 18px; border-left: 3px solid var(--ds-warning); border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0; background: var(--ds-warning-soft); } .ote-analytics-quota h3 { margin: 0; color: var(--ds-warning); } .ote-page .ote-analytics-quota p { margin-top: 6px; color: var(--ote-text); } /* --------------------------------------------------------------------------------------------------- Узкий экран Замеры на 360 и 375: первый экран раскладывается в одну колонку, кнопки встают во всю ширину — две рядом на 360 не помещались, и вторая переносилась с висящим справа пустым местом. Дверей это касается тоже, но у них ниже поля: обе карточки обязаны быть видны без прокрутки, и на 375 они видны. --------------------------------------------------------------------------------------------------- */ @media (max-width: 900px) { .ote-doors { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 34px; } } @media (max-width: 720px) { /* Ссылки правой части шапки — цель для пальца, а не для мыши: 44, а не 32. Что происходит на узком экране с якорной строкой и с бургером, решает design.css: это одно правило на три приложения. Подвал в общую шапку не входит и свои 44 получает здесь же. */ .ote-link, .ote-foot-nav a { min-height: 44px; } .ote-wrap { padding-inline: 16px; } .ote-doors { padding: 22px 16px 34px; gap: 22px; } .ote-page { padding: 26px 16px 48px; } .ote-page-head { padding: 30px 0 4px; } .ote-section, .ote-band, .ote-cta { padding-block: 44px; } .ote-section { padding-inline: 16px; } .ote-exhibit { padding: 20px 16px; } .ote-actions { flex-direction: column; align-items: stretch; } .ote-actions .ds-btn { width: 100% } /* Кнопка двери — тоже во всю ширину, и вторая ссылка переносится под неё сама. */ .ote-door-go .ds-btn { width: 100%; } .ote-lead { font-size: 16px; } .ote-mark { width: 34px; height: 34px; margin-bottom: 12px; } .ote-layer { grid-template-columns: minmax(0, 1fr); } .ote-foot-inner { flex-direction: column; align-items: flex-start; } .ote-foot .ds-stamp { margin-inline-start: 0; } .ote-analytics-panel { padding: 18px 14px; } .ote-analytics-section-head { flex-direction: column; } .ote-analytics-section-head .ds-btn { width: 100%; } .ote-analytics-form { grid-template-columns: minmax(0, 1fr); } .ote-analytics-form > button, .ote-analytics-actions .ds-btn { width: 100%; } .ote-analytics-actions { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .ote-analytics-spinner { animation: none; } } /* --------------------------------------------------------------------------------------------------- Формы Blazor и полоса ошибки — то, что рисует не эта разметка --------------------------------------------------------------------------------------------------- */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--ote-success); } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { padding: 1rem; border-radius: 10px; background: #b32121; color: #fff; } .blazor-error-boundary::after { content: "Произошла ошибка."; }