/* Netwar. Оформление. Здесь только правила набора. Почему они такие - лежит отдельно и наружу не отдаётся; в этом файле пояснение стоит рядом со строкой, которую оно объясняет. ДВА ЛИСТА, ОДИН СЛОВАРЬ. Игровые страницы набраны светлым: в игре сидят часами, и тёмное поле часами утомляет. Внешние - вход, регистрация, смена пароля - набраны тёмным, как страница-объявление: их читают один раз, и это лицо игры. Меняются только значения токенов. Шрифтовая пара, кегли, волосяная линия, плиты и вся раскладка у обоих листов одни. Светлый - умолчание. Тёмный включается классом на корне: . ИМЕНА КЛАССОВ И ТОКЕНОВ - ПО-АНГЛИЙСКИ. Решение владельца 2026-08-08: игра пойдёт в другие страны, и всё, что уходит по HTTP, читать будет не только русский. Пояснения при этом остаются русскими и остаются здесь: свод объясняет систему, комментарий объясняет строку. */ :root { /* Серый строго нейтральный: во всех подложках и во всём тексте три байта равны. Оттенок в сером отнимает у золота чистоту. */ --bg: #ECECEC; /* подложка страницы */ --panel: #E2E2E2; /* подложка блока и таблицы чисел */ --line: #D6D6D6; /* волосяная: между строками */ --edge: #C0C0C0; /* несущая: под шапкой блока, край свода */ --text: #2B2B2B; /* проза, 12,0:1 */ --muted: #565656; /* подписи и второстепенное, 6,2:1 */ --strong: #000000; /* ударение */ /* Хроматический цвет один, и это он. ПЕРЕНОСИТСЯ РОЛЬ, А НЕ ЗНАЧЕНИЕ. На тёмном листе золото - самое светлое, что есть, оттого оно и работает указателем: числа набраны им. На светлом самое сильное - чернила, а тот же янтарь, загущённый до читаемости, мутнеет в горчицу и число ослабляет вместо того, чтобы его выделить. Поэтому на светлом числа идут чернилами (--num, 15,3:1), а золото остаётся заливкой и указателем: кнопка, метка текущего пути, полоска фокуса, шкала. Ссылке достаётся густой янтарь - ей нужен цвет, а не вес. */ --gold: #FFC42E; /* заливка */ --gold-ink: #7D5A00; /* ссылки */ --num: #1A1A1A; /* числа и значения, 15,3:1 */ --gold-hover: #E9AE12; /* заливка под курсором */ --gold-active: #D19C0C; /* заливка под пальцем */ --on-gold: #1A1A1A; /* надпись на золотой заливке, 10,9:1 */ --prose: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif; --machine: Tahoma, Verdana, "DejaVu Sans", sans-serif; /* Поля колонки. Одно число на весь лист: по нему выстроены и полосы, и плиты, и текст внутри плит. Из-за того, что раньше их было три, левые края блоков не сходились. */ --pad: 30px; /* СОСТОЯНИЯ ОШИБКИ - единственное место, где цвет не золото. Свод держит один хроматический цвет, и это правило про оформление вообще. Здесь другое: состояние - не украшение, а то, ради чего в список смотрят, и различать его надо мгновенно, не читая слов. Прежний лист красил состояния светофором, и владелец потребовал вернуть (2026-08-11). Взяты не заливки, а чернила: заливка в плоском оформлении спорит с плитами. Числа выверены на подложке плиты #E2E2E2 - все не ниже 5:1. */ --sost-reshen: #256B2A; /* решён - белым по нему 5,4:1 */ --sost-prinyat: #8A6100; /* принят - белым 5,2:1 */ --sost-otklonen: #8B2F2F; /* отклонён - белым 6,5:1 */ --sost-staryj: #5F5F5F; /* неактуален - белым 5,9:1 */ --sost-tekst: #FFFFFF; /* надпись на плашке */ color-scheme: light; } html.dark { --bg: #1A1A1A; --panel: #232323; --line: #2E2E2E; --edge: #3D3D3D; --text: #C0C0C0; /* 9,6:1 */ --muted: #8A8A8A; /* 5,0:1 */ --strong: #FFFFFF; --gold: #FFC42E; --gold-ink: #FFC42E; /* 10,9:1 */ --num: #FFC42E; /* на тёмном число и есть акцент */ --gold-hover: #FFD766; --gold-active: #E9AE12; --on-gold: #1A1A1A; /* Те же роли. Заливки чуть глубже - на тёмной плите светлая плашка слепит, а белая надпись на этих держит те же пять с лишним. */ --sost-reshen: #2E7D32; --sost-prinyat: #9A6D00; --sost-otklonen: #9B3535; --sost-staryj: #4A4A4A; --sost-tekst: #FFFFFF; color-scheme: dark; } * { box-sizing: border-box } html { -webkit-text-size-adjust: 100% } /* В игре человек работает, а не читает: набор плотнее, чем в объявлении, и кегль прозы на единицу мельче. */ body { margin: 0; background: var(--bg); color: var(--text); font: 14px/22px var(--prose); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(255, 196, 46, .25); /* Короткая страница не должна оставлять подвал висеть посередине. */ min-height: 100dvh; display: flex; flex-direction: column; /* Уехать вбок странице нельзя. Раньше длинное название партии в своде чисел задавало минимальную ширину сетке, страница на телефоне становилась на девять пикселей шире окна, и правые края блоков вылезали за края полос. Виновник вылечен ниже (.stats .value.text), а это - страховка на случай следующего длинного слова. */ overflow-x: hidden; } p { margin: 0 0 14px 0 } p:last-child { margin-bottom: 0 } a { color: var(--gold-ink); text-decoration: none } a:hover { text-decoration: underline } a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px } ::selection { background: var(--gold); color: var(--on-gold) } /* Мера. Колонка 920, поля по --pad - как у объявления: страницы одной игры не должны стоять на разной ширине. max-width обязателен обоим. Ширина задана числом, а перелом раскладки стоит на 960 - и между 961 и 1179 игровая колонка в 1180 оказывалась шире окна: планшет положили набок, и страница поехала вбок. Число остаётся мерой, окно - пределом. */ .wrap { width: 920px; max-width: 100%; margin: 0 auto; padding: 0 var(--pad) } /* ИГРОВОЙ ЭКРАН ШИРЕ, И ШИРЕ ЦЕЛИКОМ. Шапка, полоса чисел, меню и подвал стоят на той же колонке, что и содержимое: полосы уже тела читаются как чужая страница, наклеенная сверху. */ body.game .wrap { width: 1180px } .muted { color: var(--muted) } .strong { color: var(--strong) } /* ---- Шапка ------------------------------------------------------------ */ .header { border-bottom: 1px solid var(--edge) } .header .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-top: 15px; padding-bottom: 13px; } /* ШАПКА ИГРЫ - ОДНА СТРОКА, А НЕ ТРИ. Знак слева, главное меню посередине, действия справа. Три полосы ссылок подряд читались сплошным текстом: глазу не за что зацепиться, когда всё набрано одинаково. Плотность верха отвечает плотности тела: воздуха столько же, сколько в шапке плиты, а не вчетверо больше. */ .header.game-top .wrap { padding-top: 0; padding-bottom: 0; gap: 0 34px; align-items: stretch; } .header.game-top { position: relative } .header.game-top .logo { align-self: center; padding: 12px 0 } /* Пункт главного меню в шапке набран так же, как был набран в своей полосе: правило одно, места два. */ .header.game-top .top-nav > a { display: block; padding: 13px 0 11px; border-bottom: 2px solid transparent; font: 12px var(--machine); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .header.game-top .top-nav > a:hover { color: var(--strong); text-decoration: none } .header.game-top .top-nav > a.here { color: var(--strong); border-bottom-color: var(--gold) } .header.game-top .top-nav { display: flex; flex-wrap: wrap; gap: 0 26px; margin-right: auto } .header.game-top .tools { display: flex; align-items: center; gap: 0 20px; font: 12px var(--machine) } /* ЗНАК - ПЕРВОЕ СЛОВО НА ЭКРАНЕ, И ОНО ДОЛЖНО ЧИТАТЬСЯ КАК ИМЯ, А НЕ КАК ПУНКТ МЕНЮ. Прежние 16px весом 600 стояли вровень с меню и терялись в нём. Взяты 22px и вес 700: следующая по величине надпись в шапке - двенадцать, то есть ступень между ними почти вдвое, а свод требует не меньше чем в 1,25 раза. Цвета ссылки знак не берёт: золотое слово в шапке спорило бы с золотом внутри страницы. */ .logo { font: 700 22px/1 var(--prose); letter-spacing: .30em; color: var(--strong); white-space: nowrap; } a.logo { color: var(--strong) } a.logo:hover { text-decoration: none; color: var(--gold-ink) } .header .right { font: 12px var(--machine); color: var(--muted); text-align: right } /* ---- Пути ------------------------------------------------------------- */ /* Меню было картинками. Слово вместо картинки читается при любом кегле, ищется поиском и не мажется при подборе размера окна. Текущее место отмечено полоской золота снизу, а не рамкой. */ .nav { border-bottom: 1px solid var(--line); position: relative } .nav .wrap { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 26px; padding-top: 0; padding-bottom: 0 } .nav .wrap > a { display: block; padding: 11px 0 9px; border-bottom: 2px solid transparent; font: 12px var(--machine); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .nav .wrap > a:hover { color: var(--strong); text-decoration: none } .nav .wrap > a.here { color: var(--strong); border-bottom-color: var(--gold) } /* Второй ряд меню. Инвентарь, магазин, ресурсы и переводы - не «ещё» и не свалка: это второе меню игры, и половину дел делают через него. Поэтому оно стоит в шапке рядом с первым, а не карточкой в боку. Отличается не размером, а начертанием: первый ряд прописными, второй строчными. Иерархия читается, важность не отнимается. */ .subnav { border-bottom: 1px solid var(--edge) } .subnav .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 22px; padding-top: 0; padding-bottom: 0 } .subnav .wrap > a, .subnav .wrap > .menu-item, .subnav .wrap > span.here { display: block; padding: 9px 0 8px; border-bottom: 2px solid transparent; font: 12px var(--machine); color: var(--muted); } .subnav .wrap > a:hover { color: var(--strong); text-decoration: none } .subnav .wrap > span.here { color: var(--strong); border-bottom-color: var(--gold) } .subnav b { color: var(--num) } /* Ссылка внутри пункта - протокол переводов - остаётся строчной. */ .subnav .menu-item a { display: inline } /* Состояние - справа во втором ряду. Тихие подписи, числа чернилами. */ .subnav .state { margin-left: auto; padding: 9px 0 8px; font: 12px var(--machine); color: var(--muted) } .subnav .state b { color: var(--num); font-variant-numeric: tabular-nums } /* ---- Поиск ------------------------------------------------------------- */ /* Поиск поселенца ушёл со страницы персонажа сюда: это не сведения о вас, а действие, и оно нужно с любого экрана. Раскрывается на месте, своей полосой, - всплывающего в оформлении не бывает. */ .search { margin-left: auto } .search > summary { display: block; list-style: none; cursor: pointer; padding: 11px 0 9px; border-bottom: 2px solid transparent; font: 12px var(--machine); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .search > summary::-webkit-details-marker { display: none } .search > summary::after { content: ' \25BE'; color: var(--gold-ink) } .search > summary:hover { color: var(--strong) } .search[open] > summary { color: var(--strong); border-bottom-color: var(--gold) } .search[open] > summary::after { content: ' \25B4' } .search .search-band { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--edge); } .search form { display: flex; align-items: center; gap: 12px; padding: 12px 0 14px } .search .field { width: auto } .search .name-field { flex: 1 1 260px } .search select.field { flex: 0 0 150px } /* ---- Зачин ------------------------------------------------------------ */ .opening .wrap { padding-top: 54px; padding-bottom: 46px } .eyebrow { font: 12px var(--machine); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 22px; } h1 { margin: 0; font: 300 40px/1.1 var(--prose); letter-spacing: -.022em; color: var(--strong); max-width: 760px; text-wrap: balance; } /* Заголовок, который не выглядит заголовком. Название темы, раздела и панели уже набрано оформлением родителя - полосой .head, жирной строкой внутри статьи. Поиску и нейросети всё это надо назвать заголовком, а полоса от этого сдвинуться не должна. Поэтому тег ставится, а всё, что он приносит с собой, снимается: свой кегль, свои поля, своя ширина, свой перенос по смыслу. Класс, а не тег: правило h1 выше и два в медиазапросах слабее по весу, и порядок строк в листе на исход не влияет. */ .plain { display: inline; margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; max-width: none; text-wrap: inherit; } /* Проза узкая, числа широкие: строку читают, таблицу охватывают целиком. */ .lead { margin: 20px 0 0 0; max-width: 640px; font-size: 16px; line-height: 26px; text-wrap: pretty; } /* ---- Рабочая полоса --------------------------------------------------- */ /* Две равные колонки, блоки идут строками. Раскладку держим симметричной, и считаем при этом не блоки, а высоту: соседи в строке тянутся до общей нижней грани, иначе плиты второй строки встают на разных уровнях и лист перестаёт быть расчерченным. */ .band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding-bottom: 44px; align-items: stretch; } /* Страница с одним делом - вход, смена пароля. Колонка узкая: широкая полоса под форму из двух полей выглядит пустой. */ .single .wrap { width: 460px; padding-top: 62px; padding-bottom: 68px } /* Страница с делом и рассказом рядом - регистрация. */ .pair .wrap { width: 920px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; padding-top: 52px; padding-bottom: 60px; } /* ---- Плита ------------------------------------------------------------ */ /* Блок отделяется от листа тоном подложки, а не рамкой: четырёх границ вокруг блока не бывает. Шапка отбита от тела несущей линией. */ .panel { background: var(--panel) } /* ШАПКА ПОЛОСЫ ИМЕЕТ СВОЙ ТОН. Это правило, унаследованное от лучшего в линии: там шапка стояла на ступень светлее плиты, и блок читался как озаглавленная панель, а не как кусок фона с линией. Значение своё: берём уже заведённый --line, новых серых не заводим. */ .panel > .head { background: var(--line); padding: 10px 16px 9px; border-bottom: 1px solid var(--edge); font: 12px var(--machine); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } /* Живое число в шапке блока - акцентом: на него смотрят первым. ЗНАЧЕНИЕ-СЛОВО ПЕРЕНОСИТСЯ, ЗНАЧЕНИЕ-ЧИСЛО НЕТ - то же правило, что и у свода чисел. Число неразрывно нарочно, а фраза вроде «сегодня 0 тем, 1 сообщений» неразрывной распирала плиту: на 320 пикселях страница форума выходила на пиксель шире окна. Строка, куда кладут не число, а фразу, помечается отдельно. */ .panel > .head .tally { color: var(--num); letter-spacing: .06em; white-space: nowrap } .panel > .head .tally.text { white-space: normal; text-align: right } .panel > .head .tally a { color: var(--gold-ink) } .panel > .body { padding: 14px 16px 15px } /* Плита с золотой кромкой слева. Ею помечено то, что даёт власть: управление компанией и кабинет партии. ДНК требует прямо - власть должна быть заметной, - и пунктом в общем списке она заметной не бывает. Кромка одна, не рамка: четырёх границ вокруг блока не бывает. */ .panel.power { border-left: 2px solid var(--gold) } .panel.power .body a { color: var(--strong); font-weight: 600; font-size: 15px } .panel.power .body a:hover { color: var(--gold-ink) } .panel.power .owner { display: block; margin-top: 2px; font: 12px var(--machine); color: var(--muted) } .panel.power .body > * + * { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) } /* ---- Почта -------------------------------------------------------------- */ /* НЕПРОЧИТАННОЕ ПИСЬМО - СОБЫТИЕ, А НЕ ЦИФРА У ПУНКТА МЕНЮ. Прежде о нём говорила только жирная единица рядом со словом «Сообщения»: видно, что письмо есть, и не видно ни от кого, ни о чём. Плита появляется, только когда есть непрочитанное, и каждая строка ведёт прямо в письмо. */ .mail .letter { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); font: 12px/17px var(--machine); } .mail .letter:last-child { border-bottom: 0; padding-bottom: 0 } .mail .letter:hover { text-decoration: none } .mail .letter .from { display: block; color: var(--strong); font-weight: bold } .mail .letter .subject { display: block; color: var(--gold-ink) } .mail .letter .when { color: var(--muted) } /* ---- Поле и кнопка ---------------------------------------------------- */ /* Поле - подложка светлее плиты и одна волосяная снизу. Рамки вокруг поля нет по той же причине, по которой её нет вокруг блока. Под курсором и под клавиатурой линия наливается золотом: это единственное место, где на светлом листе чистое золото стоит тонкой полосой. */ .row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px 14px; margin-bottom: 14px; } .row > label { font: 12px var(--machine); color: var(--muted) } /* Обязательное поле помечено золотом, а не красным: второго цвета нет. */ .row > label .required { color: var(--gold-ink) } .field, select.field, textarea.field { width: 100%; padding: 8px 9px; border: 0; border-bottom: 1px solid var(--edge); background: var(--bg); font: 13px var(--machine); color: var(--text); border-radius: 0; appearance: none; -webkit-appearance: none; } select.field { /* Штатная стрелка убрана вместе с оформлением поля - рисуем свою волосяным уголком, чтобы список отличался от строки ввода. */ background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 14px top 52%, right 9px top 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; } textarea.field { min-height: 96px; line-height: 19px; resize: vertical } .field:hover { border-bottom-color: var(--muted) } .field:focus { outline: 0; border-bottom-color: var(--gold); border-bottom-width: 2px; padding-bottom: 7px; /* высота поля не должна прыгать при щелчке */ } /* Кнопка - заливка золотом, надпись тёмная, 10,9:1. Ни скругления, ни тени: и то и другое запрещено. */ .button { border: 0; border-radius: 0; padding: 11px 26px; background: var(--gold); color: var(--on-gold); font: 12px var(--machine); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; appearance: none; -webkit-appearance: none; } .button:hover { background: var(--gold-hover) } .button:active { background: var(--gold-active) } .button:focus-visible { outline: 2px solid var(--strong); outline-offset: 2px } /* Всё, что стоит под полем, выравнивается по полю, а не по подписи: левый столбец 84 плюс зазор 14. */ .under-field { padding-left: 98px } /* Оговорка. Мельче прозы и тише её: читают её один раз и по своей воле. Мельче двенадцати на светлом листе не набираем - свод требует такому кеглю семи к одному, а густой янтарь даёт пять с третью. Поднимаем кегль, а не черним цвет. */ .fine { margin: 14px 0 0 0; font: 12px/18px var(--machine) } /* Отказ и удача. Второго цвета не заводим: состояние показано полоской золота и словами, а слов тут достаточно. */ .notice { margin: 16px 0 0 0; padding-left: 14px; border-left: 2px solid var(--gold); font-size: 13px; line-height: 20px; } .notice b { color: var(--strong); font-weight: 600 } /* ---- Таблица чисел ---------------------------------------------------- */ table.numbers { border-collapse: collapse; width: 100%; font: 13px/20px var(--machine); } table.numbers th { text-align: left; font: 12px var(--machine); font-weight: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0 14px 10px 0; border-bottom: 1px solid var(--edge); white-space: nowrap; } table.numbers td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; } table.numbers tr:last-child td { border-bottom: 0; padding-bottom: 0 } table.numbers th:last-child, table.numbers td:last-child { padding-right: 0 } /* Числа всегда вправо и всегда Tahom'ой: столбец читается по разряду. */ th.figure, td.figure { text-align: right; white-space: nowrap } td.figure { color: var(--num); font-weight: bold; font-size: 14px; font-variant-numeric: tabular-nums; } /* ---- Запись ------------------------------------------------------------ */ /* Запись датируется, а не озаглавливается, - но у новости заголовок написан человеком, и он тут главное. Две косые перед ним авторские, они стоят на этом месте с 2006 года. */ .post .name { color: var(--strong); font-weight: 600; font-size: 15px } .post .slashes { color: var(--muted); font: 13px var(--machine); margin-right: 6px } .post .excerpt { margin-top: 12px } /* ---- Подвал ----------------------------------------------------------- */ .foot { border-top: 1px solid var(--edge); margin-top: auto } .foot .wrap { display: flex; justify-content: space-between; gap: 30px; padding-top: 20px; padding-bottom: 46px; font: 12px/19px var(--machine); color: var(--muted); } .foot .right { text-align: right; white-space: nowrap } .foot b { color: var(--text) } /* Время страницы печатает общая функция игры и метит его классом test. Класс чужой - его ставит time.php, общий сорока страницам, - и потому переименованию не подлежит: тронешь здесь, поедет там. */ .test { font: 12px var(--machine); color: var(--muted) } /* ---- Новости ------------------------------------------------------------ */ /* Заголовок новости - строка живого человека, и длина её не задана. В своде «подпись слева, число справа» такая строка распирала колонку и ломала выключку. Здесь она занимает столько, сколько ей нужно, а число ответов стоит следом и не спорит с ней за место. ДВЕ КОЛОНКИ, А НЕ ШЕСТЬ СТРОК. Плита новостей идёт во всю ширину экрана, и шесть заголовков по одному в строке растягивали её на пол-экрана, оставляя справа пустое поле шире самого текста. Заголовок длиннее половины колонки не бывает, значит вторая половина простаивала зря. */ .news { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px } .news > a { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); font: 13px/18px var(--machine); } /* Разделителя нет у последней строки КАЖДОЙ колонки, а не только у самой последней: иначе нижняя линия висит под одним столбцом и не висит под соседним. */ .news > a:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0 } .news .replies { color: var(--muted); font-weight: normal } /* ---- Полоса чисел -------------------------------------------------------- */ /* ДЕНЬГИ И ЗАПАСЫ - ЭТО НЕ СТРОЧКА В МЕНЮ. Их проверяют глазом каждую минуту, не читая, поэтому они стоят своей плитой и набраны крупно: подпись тихо и мелко, число - чернилами и Tahom'ой. */ .meters { background: var(--panel); border-bottom: 1px solid var(--edge); position: relative } .meters .wrap { padding-top: 0; padding-bottom: 0 } .meters .meter-list { display: flex; flex-wrap: wrap; align-items: stretch } .meters .meter-list > div { display: flex; flex-direction: column; gap: 3px; padding: 11px 22px 11px 0; margin-right: 22px; border-right: 1px solid var(--edge); } .meters .meter-list > div:last-child { border-right: 0; margin-right: 0; padding-right: 0 } .meters .caption { font: 12px var(--machine); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .meters .num { font: bold 19px/1 var(--machine); color: var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Деньги - первое и самое крупное число на экране. */ .meters .money .num { font-size: 23px } .meters .unit { font-size: 13px; font-weight: normal; color: var(--muted) } .meters .num.word { font-size: 14px; font-weight: normal; line-height: 19px } .meters .num.word a { font-weight: bold } /* Пустой запас не кричит: ноль набран тихо, чтобы не спорить с настоящими. */ .meters .zero .num { color: var(--muted); font-weight: normal } /* КТО НЕ СПИТ - ЧИСЛО ПРО МИР, А НЕ ПРО ВАС, И СТОИТ ОНО ОТДЕЛЬНО. Решение владельца 2026-08-08: показатель важный, а лежал он в подвале, где его читают раз в сеанс. Отбито вправо и оторвано от денег пустотой: слева ваше, справа общее. */ .meters .awake { margin-left: auto; border-right: 0; margin-right: 0; padding-right: 0; text-align: right } .meters .awake .num a { color: var(--num) } .meters .awake .num a:hover { color: var(--gold-ink) } /* Полка с остальными запасами. Ресурсов в игре станет семь, и все семь в строку не встают. Четыре крупнейших стоят на виду, остальные - здесь, и раскрывается полка своей полосой на месте: всплывающего в оформлении не бывает, поиск в шапке устроен тем же приёмом. */ .meters .more { align-self: center; margin-right: 22px; border-right: 1px solid var(--edge); padding-right: 22px } .meters .more > summary { display: block; list-style: none; cursor: pointer; font: 12px var(--machine); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .meters .more > summary::-webkit-details-marker { display: none } .meters .more > summary::after { content: ' \25BE'; color: var(--gold-ink) } .meters .more > summary:hover { color: var(--strong) } .meters .more[open] > summary { color: var(--strong) } .meters .more[open] > summary::after { content: ' \25B4' } .meters .shelf { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--edge); } /* ---- Полоса службы ------------------------------------------------------ */ /* Время Полярии, где мы и куда пожаловаться. Самая тихая полоса в шапке: её читают раз в сеанс, а не раз в минуту. */ .utility { border-bottom: 1px solid var(--line) } .utility .wrap { display: flex; justify-content: space-between; gap: 20px; padding-top: 9px; padding-bottom: 9px; font: 12px/18px var(--machine); color: var(--muted); } .utility .right { text-align: right } /* ---- Игровой экран ----------------------------------------------------- */ /* Здесь человек работает, а не читает, и расположение своё: у страницы- объявления оно повествовательное, у игрового экрана рабочее. КОЛОНОК ДВЕ, А НЕ ТРИ. Три колонки плит по бокам и в середине дают шестнадцать карточек на экран, и они читаются простынёй: глазу не за что зацепиться, потому что всё одинаково важно. Слева - кто вы и чем заняты, справа - чем воюете и куда растёте. Меню в боку больше нет вовсе: оно переехало в шапку, где ему и место. */ .work .wrap { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 20px; align-items: start; padding-top: 20px; padding-bottom: 34px; } /* minmax(0, ...) обязателен обоим: без него самая длинная неразрывная строка внутри задаёт колонке минимальную ширину, и сетка распирает страницу шире окна. Ровно так страница и уезжала вбок на телефоне. */ .side { display: grid; gap: 16px; align-content: start; min-width: 0 } .main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0 } .wide { grid-column: 1 / -1 } /* Раздел внутри плиты. Вместо четырёх плит подряд - одна с тремя разделами: заголовков столько же, а рамок и промежутков втрое меньше. */ .section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge) } .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; font: 12px var(--machine); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .section-head .tally { color: var(--num); letter-spacing: .06em } /* СЛУЖБА - В САМОМ НИЗУ И САМАЯ ТИХАЯ. Решение владельца 2026-08-08: в органах состоит очень малая доля поселенцев, а блок стоял вторым сверху в «Государстве» и у иного занимал шесть строк. Здесь это одна строка сноской под всем содержимым: у кого органов нет, тот её не увидит вовсе, а у кого есть - тот и так знает, где искать. */ .service-line { grid-column: 1 / -1; margin: 0; padding-top: 4px; font: 12px/18px var(--machine); color: var(--muted); } .service-line a { color: var(--muted) } .service-line a:hover { color: var(--gold-ink) } /* ---- Свод чисел --------------------------------------------------------- */ /* Подпись слева, значение справа, строки разделены волосяной, у последней разделителя нет. Семь чисел столбиком занимают семь строк; два свода рядом - четыре. Это и есть ответ на «идут простынёй». */ .stats { display: grid } .stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font: 12px var(--machine); min-width: 0; } .stats > div:last-child { border-bottom: 0; padding-bottom: 0 } .stats .label { color: var(--muted); white-space: nowrap } .stats .value { color: var(--num); font-weight: bold; font-size: 13px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 0; } /* ЗНАЧЕНИЕ-СЛОВО ПЕРЕНОСИТСЯ, ЗНАЧЕНИЕ-ЧИСЛО НЕТ. Числу перенос вреден: столбец читается по разряду. А имя партии в четыре слова, набранное неразрывно, задавало минимальную ширину всей сетке страницы - и страница на телефоне становилась шире окна. Поэтому строка, куда кладут не число, а имя, помечается отдельно. */ .stats .value.text { white-space: normal; font-variant-numeric: normal; overflow-wrap: anywhere } .stats .value .muted { font-weight: normal } .stats .value a { color: var(--gold-ink) } /* Два свода рядом. */ .stats-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px } /* Две половины широкой плиты. Слева терминал и стол, справа числа и навыки: причина и следствие стоят рядом, а не в разных концах экрана. */ .halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px } .halves > div + div { padding-left: 26px; border-left: 1px solid var(--edge) } /* Прибавка навыка - тише самого числа: она пояснение, а не значение. */ .bonus { color: var(--gold-ink); font-weight: normal; font-size: 12px } .hint { cursor: help; border-bottom: 1px dotted var(--muted) } /* ---- Навыки ------------------------------------------------------------- */ /* Шесть навыков сеткой в два столбца. Плюс появляется только когда есть что вкладывать, и он же - единственная кнопка в этом блоке. */ .skills { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px } .skill { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font: 12px var(--machine); } .skill:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0 } .skill .val { color: var(--num); font-weight: bold; font-size: 13px } a.plus { display: inline-block; min-width: 20px; height: 18px; line-height: 18px; margin-left: 8px; text-align: center; font-weight: bold; background: var(--gold); color: var(--on-gold); } a.plus:hover { background: var(--gold-hover); text-decoration: none } /* ---- Службы терминала --------------------------------------------------- */ /* Шкала прочности. Цвет один: сколько держит служба, написано числом рядом, и красить полосу в красное и зелёное незачем - слово и число уже сказали. */ .services { display: grid; gap: 7px } .service { display: grid; grid-template-columns: 62px minmax(0, 1fr) 124px; align-items: center; gap: 12px; font: 12px var(--machine); } .service .name { color: var(--text) } .service .value { text-align: right; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums } .service .value b { color: var(--num) } .service .bar { display: block; height: 8px; background: var(--edge) } .service .bar i { display: block; height: 8px; background: var(--gold) } /* ---- Места на столе ----------------------------------------------------- */ /* Стол был картинкой в 414 пикселей, и вещи стояли на ней. Мест три, у каждого написано, что в него кладут: диск можно было положить, а показать негде - вещь пропадала из виду. */ .slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px } .slot { background: var(--bg); /* Тон, а не рамка: пустое гнездо внутри - ещё на ступень, и его видно. */ padding: 10px; display: grid; justify-items: center; gap: 7px; text-align: center; } .slot .where { font: 12px var(--machine); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) } .slot .thing { font: 12px var(--machine); color: var(--text) } .slot .empty { display: grid; place-items: center; width: 96px; height: 78px; background: var(--panel); font: 12px var(--machine); color: var(--muted) } .slot img { display: block; width: 96px; height: 78px; object-fit: contain } /* ---- Лицо и работа ------------------------------------------------------ */ /* Единственные картинки, которые слово не заменяет: лицо поселенца и вид объекта, на котором он работает. Обе грузятся лениво - страница должна появиться раньше их. */ .face { display: block; width: 84px; height: 84px; object-fit: cover; margin-bottom: 12px } .site-photo { display: block; width: 100%; height: 104px; object-fit: cover; margin-bottom: 12px } /* Поле без подписи - в личном сообщении подпись длиннее самого поля. */ .row.solo { grid-template-columns: 1fr; margin-bottom: 8px } /* Своя заглушка вместо чужой рекламы. Раз в пятьдесят показов, тихо, отдельной полосой под содержимым - в плиту она не просится. */ .promo .wrap { padding-top: 0; padding-bottom: 26px } /* ---- Страница с одним делом, без входа ---------------------------------- */ /* ОДНА КОЛОНКА, А НЕ ДВЕ. Полоса в две колонки - для главной, где рядом стоят вход, числа и новости. У принципов, справки и форума дело одно, и делить страницу пополам не на что. Отступ сверху свой: у главной над полосой стоит зачин, а здесь сразу содержимое, и без отступа плита прилипала бы к путям. */ .band.one .wrap { grid-template-columns: minmax(0, 1fr); padding-top: 22px } /* ---- Принципы ----------------------------------------------------------- */ /* Номер золотом слева, текст прозой справа - тем же приёмом, каким номер стоит у заголовка раздела. Список начинается с нуля: он такой с 2009 года, и перенумеровать его нельзя - на пункты ссылаются и в игре, и на форуме. */ .rules { margin: 0; padding: 0; list-style: none; counter-reset: rule -1 } /* НОМЕР СТОИТ НАД ТЕКСТОМ, А НЕ В СОСЕДНЕЙ КЛЕТКЕ СЕТКИ. Сеткой это и было сделано - и рассыпалось на первом же пункте, начинающемся с выделения. Причина в самой сетке: сплошной кусок текста между двумя тегами она считает отдельной клеткой, поэтому у пункта вида «Заголовок. Дальше проза» проза уезжала в столбец шириной в тридцать четыре пикселя и вставала по одному слову в строку. Отступ и отдельно стоящий номер этого сделать не могут. */ .rules > li { counter-increment: rule; position: relative; padding: 13px 0 13px 50px; border-bottom: 1px solid var(--line); } .rules > li:first-child { padding-top: 0 } .rules > li:last-child { border-bottom: 0; padding-bottom: 0 } /* Номер набран машиной и прижат вправо: столбец читается по разряду и тогда, когда в нём всего две цифры. Интерлиньяж тот же, что у прозы, - номер и первая строка пункта стоят на одной линии шрифта. */ .rules > li::before { content: counter(rule); position: absolute; left: 0; top: 13px; width: 34px; text-align: right; font: bold 13px/22px var(--machine); color: var(--gold-ink); } .rules > li:first-child::before { top: 0 } .rules b, .rules strong { color: var(--strong); font-weight: 600 } /* Оговорка внутри пункта - тише самого пункта: её читают один раз. */ .rules .aside { margin: 8px 0 0 0; font: 12px/18px var(--machine); color: var(--muted) } /* Строка над списком: куда идти за соседним сводом. Отбита несущей линией, иначе читается нулевым пунктом. */ .lead-line { margin: 0 0 16px 0; padding-bottom: 14px; border-bottom: 1px solid var(--edge); } .rules .aside b { color: var(--text) } /* ---- Перечень внутри плиты ---------------------------------------------- */ /* Метка перечня - волосяная чёрточка. Точка в этом наборе читается мусором, а картинок там, где хватает знака, не бывает. */ .list { margin: 0; padding: 0; list-style: none } .list > li { position: relative; padding: 5px 0 5px 18px } .list > li::before { content: '\2014'; position: absolute; left: 0; color: var(--muted) } /* ---- Справка ------------------------------------------------------------ */ /* Слева перечень разделов, справа статья. Перечень узкий: по нему выбирают, а не читают. Половины разделены одной волосяной, а не рамкой вокруг каждой - четырёх границ вокруг блока не бывает. */ .help-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 26px; align-items: start } .help-layout > .article { padding-left: 26px; border-left: 1px solid var(--edge); min-width: 0 } .help-list { display: grid; min-width: 0 } .help-list > a { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); font: 12px/17px var(--machine); } .help-list > a:last-child { border-bottom: 0; padding-bottom: 0 } .help-list > a.here { color: var(--strong); font-weight: bold } .help-list > a.here:hover { text-decoration: none } /* ---- Статья ------------------------------------------------------------- */ .article { min-width: 0 } .article b, .article strong { color: var(--strong); font-weight: 600 } /* Название раздела - проза, а не подпись: его читают, а не сверяют. Ступень до прозы почти в полтора раза, как и требует свод. ЗАЧЕМ ЗДЕСЬ h1. Название открытого раздела и есть предмет страницы, и поиску его надо назвать заголовком первого уровня. Вид от смены тега не меняется: перечислены оба, а что общее правило h1 приносит с собой - кегль, разрядку, свою ширину и перенос по смыслу - здесь снято. */ .article > h1, .article > h2 { margin: 0 0 12px 0; font: 600 19px/26px var(--prose); color: var(--strong); letter-spacing: normal; max-width: none; text-wrap: wrap; } /* Подзаголовки внутри статьи набраны жирной строкой - это авторский набор, и менять его нельзя. Тег заголовка ставится поверх, вид берётся у соседнего правила .article b: тот же насыщенный цвет и та же полужирность. ВСЁ ПЕРЕЧИСЛЕНО ЗДЕСЬ, А НЕ ОТДАНО КЛАССУ .plain, И ВОТ ПОЧЕМУ. У .plain вес 0-1-0, у .article > h2 выше - 0-1-1, и кегль статьи брал верх. Проявлялось это через раз: подзаголовок внутри списка прямым потомком .article не считается, правило его не доставало и вид был верен, а первый, до всякого списка, набирался крупно. Ровно так «Главное правило: порог» и вылезло заголовком статьи. */ .article h2.plain, .article h3.plain { display: inline; margin: 0; padding: 0; font: inherit; font-weight: 600; color: var(--strong); letter-spacing: inherit; max-width: none; } /* ТАБЛИЦЫ В СТАТЬЯХ БЫЛИ ШИРИНОЙ В СТО ПЯТЬДЕСЯТ ПИКСЕЛЕЙ. Не по замыслу: в старом листе у класса, которым они набраны, стоит жёсткая ширина, и всякая таблица справки - уровни, опыт, навыки - сжималась до неё. Здесь ширину задаёт мера набора, а высоту строки - её содержимое. Правила написаны на авторские имена классов нарочно: статьи лежат в базе, и переписывать двадцать пять статей ради вёрстки не надо. */ .article table { border-collapse: collapse; width: 100%; margin: 4px 0 18px 0; font: 13px/20px var(--machine); } .article th, .article td { padding: 8px 16px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .article th:last-child, .article td:last-child { padding-right: 0 } .article tr:last-child td { border-bottom: 0 } /* Шапка таблицы набрана в статьях обычной клеткой с авторским классом, а не th. Ей достаётся тон подписи и несущая линия снизу - то же самое, что и у шапки плиты. */ .article th, .article td.tdoriginal, .article td.tdorig { font: 12px var(--machine); font-weight: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--edge); } /* Значение в клетке - ударением: жирным в этих таблицах набрано ровно то, за чем в таблицу и смотрят, - число или название навыка. */ .article td b { color: var(--num) } .article td.tdoriginal b, .article td.tdorig b { color: var(--muted); font-weight: normal } /* ---- Повествование ------------------------------------------------------- */ /* Предыстория - единственная страница, где сплошная проза и ничего больше. Мера ей своя: строка в 60-70 знаков, как требует свод, а не вся ширина плиты. Дата записи набрана ударением: у автора она была зелёной, но хроматический цвет в оформлении один, и зелёному места нет. */ .story { max-width: 640px } .story .when { color: var(--strong); font-weight: 600 } /* ---- Кто в сети ---------------------------------------------------------- */ /* Имя слева, состояние справа. Строк бывает и одна, и сорок, поэтому не таблица, а тот же список, что у разделов форума. */ .who-list { display: grid } .who-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 20px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); } .who-row:first-child { padding-top: 0 } .who-row:last-child { border-bottom: 0; padding-bottom: 0 } .who-row .name { font-size: 14px } .who-row .when { font: 12px var(--machine); color: var(--muted); text-align: right } /* ---- Форум --------------------------------------------------------------- */ /* Крошка стоит НАД плитой, а не строкой внутри неё: она говорит, где вы, а не что в плите. Прежде она была строкой таблицы и висела на фоне без подложки. */ .crumbs { font: 12px/18px var(--machine); color: var(--muted); margin-bottom: 12px } .crumbs .sep { margin: 0 7px } .crumbs b { color: var(--text); font-weight: normal } .crumbs .acts { margin-left: 16px } /* ОТМЕТКА СОСТОЯНИЯ - СЛОВО, А НЕ КАРТИНКА. Прежде тут стояли гифы: лампочка «есть новое» у раздела, скрепка у закреплённой темы, значок «в сети» у каждого сообщения. Слово читается при любом кегле, ищется поиском и не мажется при подборе размера окна. */ .mark { font: 11px var(--machine); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; margin-left: 8px; } /* Раздел: слева имя и о чём он, посередине последняя тема, справа счёт. */ .boards { display: grid } .board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 62px; gap: 0 22px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .board:first-child { padding-top: 0 } .board:last-child { border-bottom: 0; padding-bottom: 0 } .board .name { font-size: 15px; font-weight: 600 } .board .about { font: 12px/17px var(--machine); color: var(--muted); margin-top: 3px } .board .last { font: 12px/17px var(--machine); min-width: 0 } .board .when { display: block; color: var(--muted) } .board .count { text-align: right; font: 11px var(--machine); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .board .count b { display: block; color: var(--num); font-size: 17px; letter-spacing: 0 } /* Описание раздела над списком тем отбито несущей линией: без неё оно читается первой строкой списка. */ .about-line { margin: 0 0 12px 0; padding-bottom: 11px; border-bottom: 1px solid var(--edge); font: 12px/18px var(--machine); color: var(--muted); } /* Тема в списке раздела. */ .topics { display: grid } /* Шапка списка - те же прописные и тот же тихий серый, что у шапки плиты и у шапки таблицы чисел: правило одно, мест несколько. */ .topic.head-row { font: 11px var(--machine); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--edge); padding-bottom: 7px; } .topic { display: grid; grid-template-columns: minmax(0, 1fr) 150px 176px; gap: 0 22px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .topic:first-child { padding-top: 0 } .topic:last-child { border-bottom: 0; padding-bottom: 0 } .topic .name { font-size: 14px } .topic .pages { font: 11px var(--machine); color: var(--muted); margin-left: 8px; white-space: nowrap } .topic .who, .topic .last { font: 12px/17px var(--machine); min-width: 0 } .topic .tally-line, .topic .when { display: block; color: var(--muted) } .topic .last b { color: var(--text); font-weight: normal } /* Страницы. Текущая - в скобках и чернилами, остальные ссылками. */ .pager { font: 12px var(--machine); color: var(--muted); padding: 4px 0 12px } .pager b { color: var(--num) } .pager a { margin: 0 2px } /* Сообщение: шапка строкой, под ней лицо и текст. */ .thread { display: grid } .msg { padding: 15px 0; border-bottom: 1px solid var(--edge) } .msg:first-child { padding-top: 0 } .msg:last-child { border-bottom: 0; padding-bottom: 0 } .msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-bottom: 11px; font: 12px var(--machine); color: var(--muted); } .msg-head .who { color: var(--strong); font-weight: bold; font-size: 13px } .msg-head .who:hover { color: var(--gold-ink); text-decoration: none } .msg-head .n { color: var(--num); font-variant-numeric: tabular-nums } .msg-head .mark { margin-left: 0 } .msg-head .acts { margin-left: auto } .msg-body { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 0 22px } .msg-face img { display: block; width: 100px; height: 100px; object-fit: cover } .msg-about { margin-top: 7px; font: 11px/16px var(--machine); color: var(--muted) } .msg-about b { color: var(--num) } /* Текст сообщения - единственное место в игре, куда пишет живой человек, и длина слова там не задана. Перенос по слову, а если слово длиннее колонки - по букве: иначе одна ссылка распирает страницу. */ .msg-text { min-width: 0; overflow-wrap: break-word } /* Пометка у поля - подпись, а не проза. */ .check { display: block; margin-bottom: 10px; font: 12px var(--machine); color: var(--muted) } .check input { margin-right: 6px } /* ---- Экран уже, 960 --------------------------------------------------- */ @media (max-width: 960px) { :root { --pad: 20px } .wrap { width: auto; max-width: 700px } .nav .wrap { gap: 0 20px } .opening .wrap { padding-top: 34px; padding-bottom: 30px } h1 { font-size: 28px; letter-spacing: -.016em } .lead { font-size: 15px; line-height: 24px; margin-top: 16px } .band .wrap { grid-template-columns: 1fr; gap: 20px } .pair .wrap { width: auto; grid-template-columns: 1fr; gap: 20px; padding-top: 32px; padding-bottom: 40px } .single .wrap { width: auto; max-width: 460px; padding-top: 38px; padding-bottom: 46px } body.game .wrap { width: auto } /* На узком знак и меню в одну строку не встают: меню переносится по одному пункту и растягивает шапку на семь строк. Меню уходит на свою строку целиком. */ .header.game-top .wrap { flex-wrap: wrap; gap: 0 18px } .header.game-top .logo { padding: 11px 0 9px } .header.game-top .top-nav { order: 3; flex: 1 0 100%; gap: 0 18px; border-top: 1px solid var(--line); } .header.game-top .top-nav > a { padding: 10px 0 8px } .header.game-top .tools { margin-left: auto } /* ПОРЯДОК НА УЗКОМ ЭКРАНЕ ЗАДАЁТСЯ ПОБЛОЧНО, А НЕ ПОКОЛОНОЧНО. Прежде колонка целиком уходила вниз, и «Вы» с лицом поселенца падало под новости - в самый низ страницы. Здесь бок и середина отдают свои плиты общей сетке (display: contents), и каждая встаёт туда, где она нужна человеку: сперва кто он, потом что пришло, потом дела. Порядок один на все игровые экраны и держится классом плиты, а не её местом в разметке: плита, которой на этой странице нет, номера не занимает, и остальные просто сдвигаются. */ .work .wrap { grid-template-columns: 1fr; gap: 16px } .side, .main { display: contents } .panel.you { order: 1 } /* кто вы - за этим и открыли страницу */ .panel.mail { order: 2 } /* что пришло, пока вас не было */ .panel.important { order: 3 } /* что ждёт вашего ответа */ .main > * { order: 4 } /* дела: хозяйство, государство, бой */ .panel.path { order: 5 } .panel.power { order: 6 } .panel.news-panel { order: 7 } .service-line { order: 8 } .stats-pair { grid-template-columns: 1fr; gap: 0 } .halves { grid-template-columns: 1fr; gap: 0 } .halves > div + div { padding-left: 0; border-left: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge) } .stats-pair > div + div { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge) } .skills { grid-template-columns: 1fr } .skill:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 6px } .skill:last-child { border-bottom: 0; padding-bottom: 0 } .news { grid-template-columns: 1fr } .news > a:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 6px } .news > a:last-child { border-bottom: 0; padding-bottom: 0 } /* Форум на узком: последняя тема уходит под имя раздела, а счёт остаётся справа - по нему ведут глазом сверху вниз. */ .board { grid-template-columns: minmax(0, 1fr) 56px } .board .last { grid-column: 1 / -1; margin-top: 6px } .topic { grid-template-columns: minmax(0, 1fr) } /* Столбцов на узком нет, значит и подписывать нечего. */ .topic.head-row { display: none } .topic .who, .topic .last { margin-top: 4px } .topic .tally-line, .topic .when { display: inline; margin-left: 8px } .crumbs .acts { display: block; margin-left: 0; margin-top: 4px } /* Перечень разделов справки встаёт НАД статьёй, а не рядом: в две колонки на узком экране статье остаётся полстроки. */ .band.one .wrap { padding-top: 16px } .help-layout { grid-template-columns: minmax(0, 1fr); gap: 0 } .help-layout > .article { padding-left: 0; border-left: 0; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--edge); } .meters .meter-list > div { padding-right: 16px; margin-right: 16px } .meters .more { margin-right: 16px; padding-right: 16px } .utility .wrap { display: block } .utility .right { text-align: left; display: block; margin-top: 6px } .search { margin-left: 0 } .search form { flex-wrap: wrap } .search select.field, .search .name-field { flex: 1 1 100% } .foot .wrap { display: block; padding-bottom: 34px } .foot .right { text-align: left; margin-top: 10px; display: block; white-space: normal } } /* ---- Телефон, 560 ------------------------------------------------------ */ @media (max-width: 560px) { :root { --pad: 16px } /* КРАЯ СХОДЯТСЯ. Плита идёт во всю ширину окна, а её собственное поле равно полю колонки, - тогда текст внутри плиты стоит ровно под текстом шапки, меню и полосы чисел, а подложка доходит до края стекла. Оба числа берутся из одного --pad: разъехаться им нечем. */ .panel { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)) } .panel > .head { padding-left: var(--pad); padding-right: var(--pad) } .panel > .body { padding-left: var(--pad); padding-right: var(--pad) } .service-line { padding-left: 0; padding-right: 0 } .header .wrap { padding-top: 16px; padding-bottom: 14px } .header .right { display: none } /* не главное, а место занимает */ .logo { font-size: 18px; letter-spacing: .26em } /* Палец шире курсора: по путям должно быть удобно попадать. */ .nav .wrap { gap: 0 18px } .nav a { padding: 15px 0 13px } h1 { font-size: 24px } /* Подпись встаёт НАД полем: в две колонки на телефоне полю остаётся полстроки, и в него не видно, что набираешь. */ .row { grid-template-columns: 1fr; margin-bottom: 16px } .under-field { padding-left: 0 } /* Шестнадцать пикселей - не вкус, а порог: мельче Safari на телефоне сам подъезжает к полю зумом, и страница уползает вбок. */ .field, select.field, textarea.field { font-size: 16px; padding: 10px 10px } .field:focus { padding-bottom: 9px } .button { width: 100%; padding: 14px 20px } table.numbers { font-size: 13px } /* Три места стола в ряд дают по сто пикселей на место - ставим столбцом. */ .slots { grid-template-columns: 1fr; gap: 8px } .slot { grid-template-columns: 96px minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: 4px 12px } .slot .where { grid-column: 1 / -1 } .slot a, .slot .empty { grid-row: 2 } .slot .thing { grid-row: 2 } .service { grid-template-columns: 58px minmax(0, 1fr); gap: 6px 10px } .service .value { grid-column: 1 / -1; text-align: left } /* Полоса чисел на телефоне переносится, и «кто не спит» вместе с ней: прижатое вправо на своей строке читается как обрывок. */ .meters .awake { margin-left: 0; text-align: left } /* Номеру принципа хватает двух цифр, а строке нужна вся ширина. Кегль не трогаем: мельче двенадцати на светлом не набирают. */ .rules > li { padding: 11px 0 11px 34px } .rules > li::before { width: 22px; top: 11px } .rules > li:first-child::before { top: 0 } /* Лицо и подпись под ним встают в строку: сто пикселей картинки на телефоне съедают треть колонки, а текст сообщения важнее лица. */ .msg-body { grid-template-columns: minmax(0, 1fr) } .msg-face { display: flex; align-items: center; gap: 12px; margin-bottom: 10px } .msg-face img { width: 56px; height: 56px } .msg-about { margin-top: 0 } .msg-head .acts { margin-left: 0; flex: 1 0 100% } .board { grid-template-columns: minmax(0, 1fr) } .board .count { text-align: left; margin-top: 4px } .board .count b { display: inline; font-size: 13px; margin-right: 5px } /* ТАБЛИЦА НА ТЕЛЕФОНЕ ОСТАЁТСЯ ТАБЛИЦЕЙ. Своя прокрутка тут пробовалась и отвергнута: от неё таблица сжимается по содержимому, и линейки строк обрываются на середине набора - две колонки чисел выглядят обрубком. Вместо этого клетка переносит слово. Кегль не трогаем. */ .article th, .article td { padding-right: 12px; overflow-wrap: break-word } } /* ---- Баг-лист ------------------------------------------------------------ Список сообщений об ошибках. Шесть колонок: номер, страница, автор, суть, состояние, ответ. Ширины заданы явно - иначе раскрытие длинного текста растягивает колонку и таблица прыгает при каждом щелчке. СОСТОЯНИЕ РАЗЛИЧАЕТСЯ ВЕСОМ, А НЕ ЦВЕТОМ. Прежний лист красил его светофором - зелёным, оранжевым, серым; хроматический цвет здесь один, и это золото. Поэтому: что ещё в работе - золотом, что решено - чернилами в полную силу, что закрыто без правки - тихим серым. Список читается с одного взгляда так же, как читался цветами. Заведено 2026-08-11 при переводе баг-репорта на новое оформление. */ .bugs { display: grid } .bugs > .bug { display: grid; grid-template-columns: 52px 116px 108px minmax(0, 1fr) 104px minmax(0, 1fr); gap: 0 18px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .bugs > .bug > div { min-width: 0; overflow-wrap: break-word } /* Шапка списка - те же прописные и тот же тихий серый, что у шапки плиты. */ .bugs > .bug.head-row { font: 11px var(--machine); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--edge); padding-bottom: 7px; } /* Плашка состояния: заливка и белая надпись. Заливка, а не чернила, - решение владельца 2026-08-11: цветное пятно ловится боковым зрением, и по списку в двадцать строк глаз идёт по нему, а не по словам. Размер сдержанный: плашка помечает строку, а не спорит с ней. */ .sost { display: inline-block; padding: 2px 7px 3px; font: 11px var(--machine); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--sost-tekst); } .sost.reshen { background: var(--sost-reshen) } .sost.prinyat { background: var(--sost-prinyat) } .sost.otklonen { background: var(--sost-otklonen) } .sost.staryj { background: var(--sost-staryj) } /* «Не рассмотрен» - единственное состояние без заливки, и это нарочно: заливка значит «разобрано и решено», а здесь ещё никто не смотрел. Пустая плашка в рамке читается как незаполненная графа. */ .sost.novyj { color: var(--text); background: none; box-shadow: inset 0 0 0 1px var(--edge); } /* Крестик удаления - право администрации, и он не должен спорить с номером. */ .bugs .ubrat { color: var(--muted); text-decoration: none } .bugs .ubrat:hover { color: var(--gold-ink) } /* Длинный текст сжат в строку; щелчок раскрывает. Состояние держит сам браузер, скриптов не нужно. Треугольник убран: строка и так кликается. */ .bugs summary { list-style: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bugs summary::-webkit-details-marker { display: none } .bugs details[open] > summary { white-space: normal; overflow: visible } @media (max-width: 900px) { /* Шесть колонок на телефоне не живут. Строка становится карточкой: подписи колонок берёт на себя шапка, которую здесь убираем. */ .bugs > .bug { grid-template-columns: 1fr; gap: 4px 0; padding: 12px 0 } .bugs > .bug.head-row { display: none } .bugs summary { white-space: normal; overflow: visible } } /* Свод чисел и следом раздел прозы: без отбивки шапка раздела прилипала к последней строке свода вплотную. Правило узкое - только на стык. */ .stats + .section-head { margin-top: 18px } /* Форма сообщения об ошибке. МЕРА НАБОРА, А НЕ ВСЯ ШИРИНА ПЛИТЫ. Поле во всю плиту - восемьсот пикселей; строка такой длины набирается тяжело, а глазу негде зацепиться при переходе от подписи к полю. Свод и прозу держит узкой по той же причине - здесь то же правило. Подсказки переехали внутрь полей (placeholder), поэтому у строки снова два яруса: подпись и поле. */ .bugform { max-width: 620px } .bugform .row.solo { margin-bottom: 16px } .bugform textarea.field { min-height: 0 } .bugform .field::placeholder { color: var(--muted); opacity: 1 } .bugform .soglasie { margin: 0 0 6px 0; font: 13px var(--prose) } .bugform .soglasie label { cursor: pointer } .bugform .soglasie input { margin: 0 8px 0 0; vertical-align: middle } .bugform .zamechanie { margin: 0 0 18px 0 }