/* Кабинет приюта и документные страницы вокруг него. Компоненты берутся из ui-kit.css — здесь только раскладка. Страница формата публичная и живёт в системе лендинга (тот же rem-масштаб под макет 1920), поэтому размеры в rem. Внутренние страницы кабинета переключают в класс `app` и работают в фиксированных 16px. */ /* --- Документная страница (формат таблицы) --------------------------- */ /* Отбивку задаём здесь целиком: правило `main > .section` в sections.css даёт 10rem сверху — это ритм лендинга, для документной страницы он оставляет пустой экран до первого заголовка. */ main > .doc { margin-top: 0; } .doc { padding-block: 4rem 6rem; } .doc__lead { margin-top: 2rem; max-width: 52rem; font-size: 1.5rem; line-height: 2.125rem; color: var(--c-ink); } .doc__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: 2.5rem; } /* Оглавление держим справа и липким: таблица колонок длинная, без него легко потерять, где ты находишься. */ .doc__body { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 4rem; margin-top: 4rem; } .doc__toc { position: sticky; top: 2rem; align-self: start; padding-left: var(--sp-5); border-left: 1px solid var(--c-border); } .doc__toc-title { font-size: 0.875rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-muted); } .doc__toc-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); } .doc__toc-list a { font-size: 1rem; line-height: 1.4; color: var(--c-text); transition: color 0.18s ease; } .doc__toc-list a:hover { color: var(--c-accent); } .doc__section + .doc__section { margin-top: 3.5rem; } /* Отступ под липкой шапкой оглавления при переходе по якорю */ .doc__section { scroll-margin-top: 2rem; } .doc__section > * + * { margin-top: var(--sp-5); } .doc__section p, .doc__section li { font-size: 1.125rem; line-height: 1.7; color: var(--c-text); } /* Меру набора ограничиваем: колонка контента широкая ради таблиц, но строка в 1400 px не читается — глаз теряет начало следующей. Таблицы и сообщения об ошибках ограничение не трогает. */ .doc__section > p, .doc__list { max-width: 46rem; } .doc__list { display: flex; flex-direction: column; gap: var(--sp-3); padding-left: var(--sp-5); list-style: disc; } .doc__list li { list-style: inherit; } .doc__alerts { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 62rem; } /* Колонка с примером набрана моноширинным: видно висячие пробелы и то, что переносы внутри ячейки — это переносы, а не новая строка таблицы. */ .doc__example { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; color: var(--c-text-muted); } .doc__col-header { font-weight: 600; white-space: nowrap; } .doc__num { color: var(--c-text-muted); font-variant-numeric: tabular-nums; } /* Пример заполнения — узкие колонки, много текста: разрешаем горизонтальную прокрутку вместо того, чтобы сплющивать всё в нечитаемую кашу. */ .doc__sheet .table { min-width: 60rem; } .doc__sheet .table td { font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; } /* --- Вход и регистрация --------------------------------------------- Узкая колонка по центру. Эти страницы под классом `app`, то есть в фиксированных 16px: приют открывает их и с ноутбука, и с телефона. */ /* min-height, чтобы под короткой формой входа не всплывал во весь экран подвал с огромным логотипом. */ .auth { min-height: 60vh; padding: 3rem 1.5rem 5rem; } .auth__inner { max-width: 34rem; margin-inline: auto; } .auth .stepper { margin-bottom: var(--sp-5); } .auth__lead { margin-top: var(--sp-4); font-size: 1.0625rem; line-height: 1.6; color: var(--c-text-muted); } .auth__card { position: relative; margin-top: var(--sp-6); overflow: hidden; } /* Штриховой пёс в углу карточки — тот же приём, что в форме обратной связи. Ниже 26rem прячем: на узком экране он наезжает на кнопку. */ .auth__dog { position: absolute; right: -1.5rem; bottom: -1.5rem; z-index: 0; width: 6.5rem; height: auto; opacity: 0.5; pointer-events: none; } .auth__switch { margin-top: var(--sp-5); text-align: center; font-size: 1rem; color: var(--c-text-muted); } .auth__switch a { color: var(--c-accent); text-decoration: underline; } /* --- Формы ------------------------------------------------------------ */ .form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-4); } .form__row { display: flex; flex-direction: column; } .form__fieldset { margin: 0; padding: 0; border: 0; gap: var(--sp-3); } .form__hint { margin-top: var(--sp-1); font-size: 0.875rem; line-height: 1.4; color: var(--c-text-muted); } .form__check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 1rem; line-height: 1.4; cursor: pointer; } .form__checkbox { width: 1.25rem; height: 1.25rem; flex-shrink: 0; accent-color: var(--c-brand); cursor: pointer; } .form__file + .form__file { margin-top: var(--sp-4); } .form__file-label { display: block; margin-bottom: var(--sp-2); font-size: 1rem; color: var(--c-text); } .form__file-input { width: 100%; font-size: 0.9375rem; color: var(--c-text-muted); } .form__file-input::file-selector-button { margin-right: var(--sp-3); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--c-brand); border-radius: var(--r-pill); background: transparent; color: var(--c-brand); font-family: var(--f-text); font-size: 0.9375rem; cursor: pointer; } /* --- Кабинет ---------------------------------------------------------- */ .cabinet { min-height: 60vh; padding: 3rem 1.5rem 5rem; } .cabinet__inner { max-width: 68.75rem; /* 1100 */ margin-inline: auto; } .cabinet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; } .cabinet__eyebrow { font-size: 0.875rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-accent); } .cabinet .tabs { margin-top: var(--sp-6); } .cabinet__body { margin-top: var(--sp-6); } .cabinet__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--sp-5); } .cabinet__note { margin-top: var(--sp-5); font-size: 0.9375rem; line-height: 1.5; color: var(--c-text-muted); } .cabinet__status { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); font-size: 0.9375rem; color: var(--c-text-muted); } .cabinet__body > .alert { margin-bottom: var(--sp-5); } /* --- Загрузка таблицы -------------------------------------------------- */ .upload { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-5); align-items: start; } .upload__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); } .upload__aside > * + * { margin-top: var(--sp-3); } .upload__columns { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding-left: var(--sp-5); list-style: decimal; font-size: 0.9375rem; color: var(--c-text); } .upload__columns li { list-style: inherit; } .upload__link { color: var(--c-accent); text-decoration: underline; } .import__counts { margin-top: var(--sp-5); } .import__problems-title { margin-top: var(--sp-6); } .import__actions { justify-content: flex-start; margin-top: var(--sp-6); } .card--plain .progress { margin-top: var(--sp-5); } /* --- Карточки животных ------------------------------------------------- */ /* Не `.pets` и не `.pet`: эти классы уже заняты секцией «Питомцы» лендинга (pets.css), где у них фиксированная высота под макет 1920 и серая заливка. Карточки кабинета от них наследовали пустые полтора экрана. */ .pet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--sp-4); /* Иначе карточки в ряду растягиваются по самой высокой. */ align-items: start; } .pet-card__summary { font-size: 1rem; line-height: 1.5; color: var(--c-text-muted); } .pet-card__traits { margin-top: var(--sp-3); } .pet-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); } /* Удаление — тоже secondary, но оранжевое: действие необратимое, и его стоит отличать от «Править» ещё до наведения. */ .pet-card__delete { border-color: var(--c-accent); color: var(--c-accent); } .pet-card__delete:hover { background: #fbe9e3; } .pet-list__pager { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); } /* Исходная ячейка таблицы под полем: свёрнута, чтобы форма не превратилась в простыню, но всегда под рукой — по ней видно, откуда взялось значение. */ .source { margin-top: calc(var(--sp-1) * -1); margin-bottom: var(--sp-2); } .source__summary { font-size: 0.875rem; color: var(--c-text-muted); cursor: pointer; } .source__text { margin-top: var(--sp-2); padding: var(--sp-3); border-left: 2px solid var(--c-brand-tint); background: var(--c-surface); border-radius: var(--r-xs); font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; color: var(--c-text-muted); } .form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } @media (max-width: 60rem) { .upload { grid-template-columns: 1fr; } } /* Превью логотипа и фото сотрудника: квадрат с рамкой, чтобы прозрачный PNG не сливался с фоном карточки. */ .form__preview { width: 6rem; height: 6rem; margin-block: var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); object-fit: contain; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } /* Пары «поле — значение». Ключ узкой колонкой слева, чтобы значения выстроились по одной линии и читались списком. */ .facts { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; } .facts__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sp-3); } .facts__key { font-size: 0.9375rem; line-height: 1.5; color: var(--c-text-muted); } .facts__value { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--c-text); overflow-wrap: anywhere; } .facts__line { display: block; } @media (max-width: 34rem) { .auth__dog { display: none; } .facts__row { grid-template-columns: 1fr; gap: var(--sp-1); } } @media (max-width: 1199px) { .doc { padding-block: 3rem 4rem; } .doc__body { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2.5rem; } /* Оглавление наверх и не липкое: на узком экране оно занимало бы половину высоты и мешало читать. */ .doc__toc { position: static; order: -1; padding: var(--sp-4); border-left: 0; border-radius: var(--r-md); background: var(--c-surface-alt); } .doc__lead { font-size: 1.25rem; line-height: 1.8rem; } }