/* Оформление публичных страниц: главной, соглашения и политики.
Отдельный файл, ни строчки из app.css и ни одной переменной Radzen: эти страницы живут
вне Blazor, тема компонентов на них не подключена, и тянуть её ради текста незачем.
Мир один на все три страницы. Раньше их делил класс на : главная была тёмной, а
соглашение и политика оставались чёрным текстом на белом — «их читают, а не разглядывают».
На деле это читалось не сдержанностью, а обрывом: человек уходил со стены с плакатом по
ссылке в подвале и попадал на пустой лист бумаги из другой программы. Теперь стена, зерно,
лента и палитра принадлежат самому , а классы `gate` и `dossier` разводят не
оформление, а раскладку: у главной — колонка по центру экрана вокруг плаката, у
документов — подшитый лист с длинным текстом.
Разделение классов сохранено ровно ради того же, ради чего заводилось: `login-*`, `button`
и `notice` встречаются в разметке одного файла, и документ, добавив себе кнопку, не должен
получить вместе с ней ржавую табличку со входа. */
:root {
--ash: #0d0c0a; /* стена в тени */
--concrete: #17140f; /* планка под текст */
--bone: #e9e3d5; /* бумага плаката, она же основной текст */
--bone-dim: #9d9482; /* то, что читают один раз */
--signal: #b2170b; /* красный с плаката */
--signal-hot: #d62a18; /* он же под курсором */
--hazard: #c9a227; /* предупреждающая лента и скотч */
/* Два шрифта на всё: узкий гротеск для заголовков и табличек — им на плакате набрано
название, — и машинка для служебных строк. Основной текст ими не набирают: см.
комментарий у колонки документа. */
--stencil: 'PT Sans Narrow', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
--typewriter: 'Courier New', Courier, monospace;
}
* { box-sizing: border-box; }
/* Тёмная страница целиком, а не только её фон: без этого браузер рисует светлые полосы
прокрутки у длинных документов и светлые поля выделения. */
html { color-scheme: dark; }
body {
margin: 0;
background-color: var(--ash);
color: var(--bone);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
/* Три слоя вместо текстуры файлом: зарево от плаката сверху, тёмные углы и почти
незаметная косая штриховка — ею на разметке обозначают опасную зону. Ни одного
лишнего запроса: всё рисует градиентами сам браузер. Слои закреплены, поэтому у
длинного документа стена стоит на месте, а по ней едет текст. */
background-image:
radial-gradient(120% 70% at 50% -10%, rgba(178, 23, 11, 0.16), transparent 62%),
radial-gradient(105% 85% at 50% 42%, transparent 28%, rgba(0, 0, 0, 0.95) 100%),
repeating-linear-gradient(135deg,
rgba(201, 162, 39, 0.014) 0 26px, transparent 26px 58px);
background-attachment: fixed;
}
/* Зерно поверх всего: без него градиенты выглядят чистой типографией, а стена должна быть
грязной. SVG-шум лежит прямо в правиле — картинкой это был бы ещё один файл ради
пятидесяти килобайт помех. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.045;
filter: grayscale(1) contrast(150%);
background-image: url("data:image/svg+xml;utf8,");
}
/* Лента поперёк верхнего края окна. Держится на месте при прокрутке: на главной прокрутки
почти нет, а у документов она длинная, и лента работает верхней кромкой окна. */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 6px;
z-index: 2;
pointer-events: none;
opacity: 0.42;
background: repeating-linear-gradient(135deg,
var(--hazard) 0 12px, #0d0c0a 12px 24px);
}
/* --- Колонка содержимого -------------------------------------------------
z-index — чтобы содержимое лежало над зерном, а не под ним. Ширину и поля задаёт себе
каждая раскладка сама: у главной и у документа они разные. */
.site-main {
position: relative;
z-index: 1;
margin: 0 auto;
max-width: 46rem;
padding: 2rem 1.5rem 3rem;
}
/* ==========================================================================
Главная: плакат на стене
==========================================================================
Картинка на главной — агитационный плакат: красный фон, резкий чёрно-белый портрет
радиста, потёртая бумага, название по низу. Вокруг неё стояла обычная светлая форма
входа с синей кнопкой и серой рамкой, и плакат в ней выглядел случайной наклейкой.
Здесь наоборот: страница — стена, на которой он висит, а всё остальное подобрано под
него. Красный взят с самого плаката (#b20300), к нему бетон, кость и жёлтый цвет
предупреждающей ленты — больше на странице ничего нет.
-------------------------------------------------------------------------- */
/* Колонка уже, чем в документах, и прижата к середине окна по вертикали: на главной всего
четыре вещи, и растянутые по высокому экрану они читались бы обрывками. */
body.gate .site-main {
max-width: 34rem;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 3rem 1.5rem;
}
body.gate .login-panel { text-align: center; }
/* --- Плакат ---------------------------------------------------------------
Рамки нет вовсе: у плаката своя, нарисованная. Наклон на полтора градуса и жёсткая тень
делают из картинки предмет на стене — ровно посаженная, она снова читалась бы элементом
интерфейса. `inline-block` — чтобы наклон и скотч считались от самой картинки, а не от
ширины колонки. */
body.gate .login-card {
display: inline-block;
position: relative;
margin-bottom: 2.25rem;
transform: rotate(-1.4deg);
filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.8));
}
body.gate .login-card img {
display: block;
width: min(62vw, 266px);
height: auto;
aspect-ratio: 399 / 600;
outline: 1px solid rgba(233, 227, 213, 0.12);
}
/* Скотч по двум углам крест-накрест. Полупрозрачный и с рваным краем от полосатого
градиента: ровный прямоугольник выглядел бы наклейкой, а не куском ленты. */
body.gate .login-card::before,
body.gate .login-card::after {
content: "";
position: absolute;
width: 78px;
height: 24px;
background:
linear-gradient(180deg, rgba(233, 216, 160, 0.34), rgba(170, 150, 100, 0.26));
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
opacity: 0.85;
}
body.gate .login-card::before { top: -12px; left: -22px; transform: rotate(-38deg); }
body.gate .login-card::after { bottom: -12px; right: -22px; transform: rotate(-38deg); }
/* --- Приказ под плакатом ---------------------------------------------------
Строка о том, что программа делает. Моноширинный шрифт и красная черта сверху: это
единственный связный текст на экране, и он должен читаться донесением, отпечатанным на
машинке, а не подписью к картинке. */
body.gate .login-tagline {
margin: 0 auto 2.25rem;
max-width: 30rem;
padding: 1.1rem 1.35rem;
border: 1px solid rgba(233, 227, 213, 0.14);
border-top: 2px solid var(--signal);
background: rgba(23, 20, 15, 0.75);
color: var(--bone-dim);
font-family: var(--typewriter);
font-size: 0.95rem;
line-height: 1.65;
}
/* --- Кнопка входа ----------------------------------------------------------
Табличка, привинченная к стене: прямые углы, срезанные фаски, жёсткая тень без размытия
и разрядка по буквам. Тень нарисована `drop-shadow`, а не `box-shadow`, — та повторяет
срезанные углы, а box-shadow остался бы прямоугольным вокруг них. */
body.gate .button {
display: inline-block;
padding: 0.5rem 1rem;
background: var(--signal);
color: #f7f2e7;
font-family: var(--stencil);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
text-decoration: none;
border: 1px solid rgba(0, 0, 0, 0.55);
clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px,
100% 100%, 13px 100%, 0 calc(100% - 13px));
filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.6));
transition: background 0.12s ease, transform 0.12s ease, filter 0.12s ease;
}
body.gate .button-lg { padding: 0.95rem 2.1rem; font-size: 1.15rem; }
body.gate .button:hover {
background: var(--signal-hot);
transform: translate(-2px, -2px);
filter: drop-shadow(7px 7px 0 rgba(0, 0, 0, 0.65));
}
/* Нажатие вдавливает табличку: сдвиг вместе с тенью, а не подсветка. */
body.gate .button:active {
transform: translate(2px, 2px);
filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.6));
}
/* Пунктирная обводка, а не сплошная: сплошная на срезанных углах выглядит вторым контуром
кнопки. Отбита от таблички, чтобы не сливаться с её рамкой. */
body.gate .button:focus-visible {
outline: 2px dashed var(--hazard);
outline-offset: 5px;
}
/* --- Сообщения -------------------------------------------------------------
Оба сообщения на этой странице — редкие: ошибка входа и ненастроенный Google. Светлые
плашки в тёмной странице резали бы глаз ярче самой ошибки, поэтому цвет здесь только в
рамке и тексте. */
body.gate .notice {
max-width: 30rem;
margin: 0 auto 1.75rem;
padding: 0.85rem 1.1rem;
text-align: left;
font-family: var(--typewriter);
font-size: 0.92rem;
}
body.gate .notice-danger {
background: rgba(178, 23, 11, 0.14);
border: 1px solid rgba(214, 42, 24, 0.55);
color: #f0c8c1;
}
body.gate .notice-warning {
background: rgba(201, 162, 39, 0.1);
border: 1px solid rgba(201, 162, 39, 0.45);
color: #e3d1a2;
}
body.gate .notice code { color: var(--hazard); }
/* Ожидание одобрения. Цвет жёлтый, а не красный: человек ничего не нарушил и ниоткуда не
изгнан — он в очереди. Красным на этой странице говорят только о сорвавшемся входе. */
body.gate .notice-pending {
background: rgba(201, 162, 39, 0.08);
border: 1px solid rgba(201, 162, 39, 0.4);
color: var(--bone);
text-align: center;
}
body.gate .notice-pending p { margin: 0 0 0.75rem; }
body.gate .notice-pending p:last-child { margin-bottom: 0; }
/* Ссылка «обновите страницу» — в тон правовым ссылкам внизу: тот же цвет и то же красное
подчёркивание, чтобы в жёлтой плашке она не терялась и не спорила с ней. */
body.gate .notice-pending a {
color: var(--bone);
text-decoration: underline;
text-decoration-color: rgba(178, 23, 11, 0.8);
text-underline-offset: 3px;
}
body.gate .notice-pending a:hover { color: var(--signal-hot); }
body.gate .notice-title {
font-family: var(--stencil);
font-size: 1.15rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--hazard);
}
/* Выход рядом с сообщением об ожидании. Табличка та же, но пустая внутри: это не то действие,
ради которого человек пришёл, и спорить с красной кнопкой входа по силе ей незачем. Своей
формы у кнопки нет отступов — их держит сама форма. */
body.gate .button-ghost {
background: transparent;
color: var(--bone);
border-color: rgba(233, 227, 213, 0.4);
/* Тени нет намеренно: у красной таблички она рисуется по её силуэту, а сквозь пустую
кнопку тот же чёрный прямоугольник просвечивал бы насквозь. */
filter: none;
}
body.gate .button-ghost:hover {
background: rgba(233, 227, 213, 0.08);
color: var(--bone);
filter: none;
}
/* Кнопка выхода приходит внутри