/* * «Сведения об ОО» — the navigation between the 14 subsections * (SputnikSvedenNav). The breadcrumb bar and the page head this section also * renders are shared with the content pages and live in components.css. * * Values come from the handoff prototype «Сведения об ОО»: tiles numbered * 01…14, three to a row. Colors go through tokens only: the accessibility * version overrides every --c-* on , and a hardcoded hex would survive * that override. */ .sputnik-sveden-nav { padding-block: 40px 56px; } .sputnik-sveden-nav__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; } .sputnik-sveden-nav__item { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 12px; text-decoration: none; } a.sputnik-sveden-nav__item:hover { border-color: var(--c-teal); text-decoration: none; } /* The current subsection is not a link: border and fill mark where you are */ .sputnik-sveden-nav__item--current { background: var(--c-bg-soft); border-color: var(--c-teal); } .sputnik-sveden-nav__num { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--c-bg-soft); font-family: var(--font-serif); font-weight: 700; font-size: 0.85em; color: var(--c-teal-ink); } .sputnik-sveden-nav__item--current .sputnik-sveden-nav__num { background: var(--c-white); } .sputnik-sveden-nav__label { font-size: 0.92em; font-weight: 700; color: var(--c-heading); text-wrap: balance; } /* Tablet: 14 tiles in one column make too long a ribbon — keep two */ @media (max-width: 1024px) { .sputnik-sveden-nav__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .sputnik-sveden-nav { padding-block: 28px 40px; } .sputnik-sveden-nav__grid { grid-template-columns: 1fr; } } /* ============================================================ * Compliance tables of a subsection (SputnikSvedenCommon and the * subsections that follow). The methodology recommends the tabular form * (tables 3.2.2 / 3.2.3) and the handoff prototype draws it as a white * card with striped rows: «параметр | сведения», 280px label column. * ============================================================ */ .sputnik-sveden-block__heading { margin-bottom: 24px; } .sputnik-sveden-block__subheading { margin: 34px 0 16px; } /* A prose answer of a subsection (стипендии, охрана здоровья): the same card as a table, with the reading measure of the prose column. */ .sputnik-sveden-block__text { padding: 16px 24px; } .sputnik-sveden-block__text p { margin: 0 0 12px; max-width: var(--container-text); } .sputnik-sveden-block__text p:last-child { margin-bottom: 0; } .sputnik-table__card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; } /* A wide table keeps its columns and scrolls inside the card instead of squeezing the text into vertical strings. */ .sputnik-table__scroll { overflow-x: auto; } @media (max-width: 768px) { .sputnik-table__scroll::before { content: "Прокрутите таблицу вправо, чтобы увидеть все столбцы"; position: sticky; left: 0; display: block; width: fit-content; max-width: calc(100vw - 42px); padding: 10px 14px; color: var(--c-soft); font-size: 0.85em; line-height: 1.35; } } .sputnik-table { width: 100%; border-collapse: collapse; } .sputnik-table--wide { min-width: 720px; } /* A floor on the whole table is not enough: with 3–7 columns the automatic layout can still squeeze one header to 80–130px and wrap long Russian words almost letter-by-letter. Every data column keeps a readable measure; the card provides local horizontal scrolling for the resulting width. */ .sputnik-table--wide th, .sputnik-table--wide td { min-width: 180px; } /* Восемь колонок (таблица уровней образования) при минимуме 720px не прокручиваются: карточка (~1240px) шире этого пола, браузер делит её между колонками, и на каждую приходится около 110px — заголовок «Наименование профессии, специальности» встаёт столбиком букв. 1400px держит колонку выше читаемого минимума и включает ту самую прокрутку, ради которой карточка и сделана. 1700px — потому что седьмая колонка (перечень предметов) забирает около 550px, и при меньшем поле остальным семи достаётся по 120px: слова начинают рубиться по слогам. */ .sputnik-table--wide-8 { min-width: 1700px; } /* `table-layout: auto` раздаёт лишнюю ширину по объёму содержимого, поэтому колонка с перечнем предметов забирает почти всё, а «Нормативный срок обучения» остаётся в 99px и рубится по слогам. Нижняя граница по колонкам не даёт алгоритму их сжимать; перечень предметов по-прежнему берёт остаток. */ .sputnik-table--wide-8 th, .sputnik-table--wide-8 td { min-width: 160px; } .sputnik-table--wide-8 th:nth-child(1), .sputnik-table--wide-8 td:nth-child(1) { min-width: 260px; } .sputnik-table--wide-8 th:nth-child(2), .sputnik-table--wide-8 td:nth-child(2), .sputnik-table--wide-8 th:nth-child(3), .sputnik-table--wide-8 td:nth-child(3) { min-width: 220px; } .sputnik-table--wide-8 th:last-child, .sputnik-table--wide-8 td:last-child { min-width: 110px; } /* 10-column tables (employees, vacant) need more room than 720px gives them: at that width the card's own container (~1240px) is wider than the table's floor, so the browser shrinks columns to fit instead of scrolling — long Russian headers then wrap letter-by-letter. 1400px keeps every column above its readable minimum and forces the scroll the card is built for. */ .sputnik-table--wider { min-width: 1900px; } .sputnik-table--wider th, .sputnik-table--wider td { min-width: 180px; } /* table-layout: auto splits the extra width by each column's own content, not evenly — a short name still gets squeezed into a narrow column and wraps mid-word ("Иванов-а"). ФИО/Должность hold short values that read worse broken than wide, so they claim their natural width instead of sharing the leftover space with the long-label columns. */ .sputnik-table--wider td:nth-child(1), .sputnik-table--wider td:nth-child(2) { white-space: nowrap; } /* Long compound words in the remaining headers/cells ("профессионального", переподготовка") still don't fit even at 1900px — hyphenate at Russian syllable boundaries (lang="ru" on feeds the browser's dictionary) instead of breaking mid-syllable wherever the column edge happens to fall. */ .sputnik-table--wider th, .sputnik-table--wider td { hyphens: auto; overflow-wrap: break-word; } .sputnik-table th, .sputnik-table td { padding: 16px 24px; text-align: left; vertical-align: top; /* Отменяет унаследованный от body `overflow-wrap: anywhere` (tokens.css): он разрешает разрыв внутри любого слова и заодно опускает минимальную ширину колонки до одной буквы, поэтому узкая колонка вытягивает слово в столбик. `break-word` оставляет минимумом самое длинное слово, а перенос по слогам берётся из словаря браузера (`lang="ru"` у ). */ overflow-wrap: break-word; hyphens: auto; } .sputnik-table thead th { background: var(--c-bg-blue); color: var(--c-heading); font-weight: 700; font-size: 0.92em; } .sputnik-table th[scope="row"] { width: 280px; color: var(--c-soft); font-size: 0.92em; font-weight: 400; } .sputnik-table tbody tr + tr { border-top: 1px solid var(--c-line); } .sputnik-table tbody tr:nth-child(even) { background: var(--c-bg-soft); } .sputnik-table td { color: var(--c-ink); } /* Несколько документов в одной строке подраздела «Документы» (устав с изменениями, два предписания): список без маркеров, дата — рядом со ссылкой вторым планом. */ .sputnik-doclist { margin: 0; padding: 0; list-style: none; } .sputnik-doclist__item + .sputnik-doclist__item { margin-top: 8px; } .sputnik-doclist__date { color: var(--c-soft); font-size: 0.92em; white-space: nowrap; } /* Prototype .two-col at ≤1024: the label sits above its value instead of next to it, so long official wording keeps a readable measure. */ @media (max-width: 1024px) { .sputnik-table tbody tr, .sputnik-table th[scope="row"], .sputnik-table tbody td { display: block; width: auto; } .sputnik-table th[scope="row"] { padding-bottom: 0; } .sputnik-table tbody td { padding-top: 6px; } .sputnik-table--wide tbody tr, .sputnik-table--wide-8 tbody tr, .sputnik-table--wider tbody tr { display: table-row; } .sputnik-table--wide tbody td, .sputnik-table--wide-8 tbody td, .sputnik-table--wider tbody td { display: table-cell; } }