/* Арка — общие стили страниц (F2). Подключать после tokens.css и fonts.css:
Без JS, без внешних ресурсов, под CSP style-src 'self'. Цвета — только семантические токены (--color-*),
поэтому тема Telegram (F8) переопределяет токены, а не компоненты. Витрина — showcase.html.
Правила брендбука: медь — только ключ; статус — формой и подписью, красного нет; текст абзацев ≥ 17 px;
кнопки и поля от 52 px, зона нажатия ≥ 48 px; фокус — кольцо 2 px с отступом 2 px; тень — только у всплывающего. */
/* ---------------------------------------------------------------- база */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
background: var(--color-bg-page);
color: var(--color-text);
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
font-kerning: normal;
-webkit-font-smoothing: antialiased;
overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 10; padding: var(--space-3) var(--space-4); background: var(--color-surface); color: var(--color-text); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-control); }
.skip-link:focus { top: var(--space-4); }
/* ---------------------------------------------------------------- типографика */
h1, h2, h3, h4 { margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font: var(--type-h2); letter-spacing: var(--type-h2-tracking); } /* заголовок экрана: 40 / моб. 28 */
h2 { font: var(--type-h3); letter-spacing: var(--type-h3-tracking); } /* 28 / моб. 24 */
h3 { font: var(--type-title); letter-spacing: var(--type-title-tracking); }/* 24, заголовок карточки */
h4 { font: 600 var(--type-body-size)/var(--line-height-tight) var(--font-sans); }
.display { font: var(--type-h1); letter-spacing: var(--type-h1-tracking); } /* H1 первого экрана лендинга: 81 / моб. 40 */
p, ul, ol, dl { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--space-2); }
.measure { max-width: var(--measure); }
.lead { font: var(--type-lead); letter-spacing: var(--type-lead-tracking); }
.small { font: var(--type-body-sm); letter-spacing: var(--type-body-sm-tracking); }
.muted { color: var(--color-text-secondary); }
.caption { font: var(--type-caption); letter-spacing: var(--type-caption-tracking); color: var(--color-text-secondary); } /* только юр. строки и источники */
.mono, code, kbd, samp { font: var(--type-mono-data); font-variant-numeric: tabular-nums; }
.address { font: var(--type-mono-address); } /* @vpn_arka_bot, arkakeys.com — в исходном регистре */
a.address, .address a { text-decoration: none; } /* подчёркивание съедает «_» в @vpn_arka_bot (брендбук v6) */
.label { font: var(--type-mono-label); letter-spacing: var(--type-mono-label-tracking); text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 var(--space-2); }
.price { font: var(--type-price); letter-spacing: var(--type-price-tracking); margin: 0; }
.nowrap { white-space: nowrap; }
strong, b { font-weight: var(--font-weight-semibold); }
hr { border: 0; border-top: var(--border-hairline) solid var(--color-line); margin: var(--space-8) 0; }
a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
/* ---------------------------------------------------------------- раскладка */
.container { width: 100%; max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--layout-margin); }
.container--narrow { max-width: calc(640px + 2 * var(--layout-margin)); } /* кабинет, оплата, мини-апп */
.container--wide { max-width: calc(960px + 2 * var(--layout-margin)); } /* лендинг-раздел, бэк-офис */
.page { padding-top: var(--space-6); padding-bottom: var(--space-16); }
.stack > * { margin-top: 0; margin-bottom: 0; }
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.stack--lg { --stack-gap: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
ul.cluster, ol.cluster { list-style: none; padding: 0; margin: 0; }
.cluster > li { margin: 0; }
.cluster > li + li { margin-top: 0; }
.grid { display: grid; gap: var(--layout-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.section { padding: var(--space-16) 0; }
.section-dark {
background: var(--color-bg-section-dark); color: var(--color-text-on-section-dark);
--color-text: var(--color-text-on-section-dark);
--color-text-secondary: var(--color-text-secondary-on-section-dark);
--color-link: var(--color-text-on-section-dark);
--color-focus: var(--color-text-on-section-dark);
--color-key: var(--color-key-on-section-dark);
--color-status-works: var(--color-status-works-on-section-dark);
--color-status-degraded: var(--color-text-on-section-dark);
--color-status-offline: var(--color-text-on-section-dark);
--color-status-paused: var(--color-text-secondary-on-section-dark);
--color-line: var(--color-text-secondary-on-section-dark);
}
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: 80px; padding: var(--space-2) 0; }
.site-header .tabs { margin: 0; }
.site-header__brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch-min); color: var(--color-text); text-decoration: none; font: 600 var(--type-title-size)/1 var(--font-sans); letter-spacing: var(--tracking-logo); }
.site-header__brand img { height: var(--size-mark-nav); width: auto; }
.site-header nav a { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }
.site-footer { padding: var(--space-12) 0; }
.site-footer a { display: inline-block; min-height: var(--size-touch-min); padding: var(--space-3) 0; }
@media (max-width: 767px) { .site-header { min-height: 64px; } }
/* Знак: на светлом — arka-mark*.svg, на тёмном — *-on-dark.svg. Обе картинки в разметке, видна одна. */
.on-dark { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .on-light { display: none; }
:root:not([data-theme="light"]) .on-dark { display: revert; }
}
:root[data-theme="dark"] .on-light { display: none; }
:root[data-theme="dark"] .on-dark { display: revert; }
/* ---------------------------------------------------------------- кнопки */
.btn, button {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: var(--size-control-height); padding: var(--space-3) var(--space-6);
border: var(--border-stroke) solid var(--color-action-primary-bg); border-radius: var(--radius-control);
background: var(--color-action-primary-bg); color: var(--color-action-primary-text);
font: var(--type-button); letter-spacing: var(--type-button-tracking); text-align: center; text-decoration: none;
cursor: pointer; transition: background-color var(--motion-ui-fast) var(--ease-ui), border-color var(--motion-ui-fast) var(--ease-ui);
-webkit-tap-highlight-color: transparent;
}
.btn:hover, button:hover { background: var(--color-action-primary-bg-hover); border-color: var(--color-action-primary-bg-hover); text-decoration: none; }
.btn:active, button:active { background: var(--color-action-primary-bg-pressed); border-color: var(--color-action-primary-bg-pressed); }
.btn--secondary, button.btn--secondary {
background: transparent; border-color: var(--color-action-secondary-border); color: var(--color-action-secondary-text);
}
.btn--secondary:hover, button.btn--secondary:hover { background: var(--color-surface); border-color: var(--color-action-secondary-border); }
.btn--secondary:active, button.btn--secondary:active { background: var(--color-line); border-color: var(--color-action-secondary-border); }
/* Текстовая кнопка: «Выйти», «Отмена». Зона нажатия остаётся 48 px. */
.btn--link, button.btn--link {
min-height: var(--size-touch-min); padding: var(--space-2) 0; background: none; border-color: transparent;
color: var(--color-link); font: var(--type-body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.btn--link:hover, button.btn--link:hover, .btn--link:active, button.btn--link:active { background: none; border-color: transparent; text-decoration-thickness: 2px; }
.btn[aria-disabled="true"], button:disabled {
background: var(--color-action-disabled-bg); border-color: var(--color-action-disabled-border); color: var(--color-action-disabled-text); cursor: default;
}
.btn--block { width: 100%; }
.btn .icon, button .icon { width: var(--size-icon); height: var(--size-icon); flex: none; color: currentColor; }
/* Группа действий: на телефоне кнопки во всю ширину, основная сверху. */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }
@media (max-width: 767px) {
.actions { flex-direction: column; }
.actions > .btn, .actions > button, .actions > form, .actions > form > button { width: 100%; }
}
form.inline { display: inline; margin: 0; }
/* ---------------------------------------------------------------- поля */
.field { margin: 0 0 var(--space-6); }
.field > label, .field__label { display: block; margin: 0 0 var(--space-2); font: 600 var(--type-body-sm-size)/var(--line-height-tight) var(--font-sans); }
.field__hint { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font: var(--type-body-sm); }
input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea {
display: block; width: 100%; min-height: var(--size-control-height); padding: var(--space-3) var(--space-4);
background: var(--color-surface); color: var(--color-text);
border: var(--border-hairline) solid var(--color-line-control); border-radius: var(--radius-control);
font: var(--type-body); letter-spacing: var(--type-body-tracking);
}
textarea { min-height: calc(var(--size-control-height) * 2.5); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-text-secondary); opacity: 1; }
input:not([type="checkbox"], [type="radio"]):hover, select:hover, textarea:hover { border-color: var(--color-text); }
input:not([type="checkbox"], [type="radio"]):focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-text); }
input:disabled, select:disabled, textarea:disabled { background: var(--color-action-disabled-bg); color: var(--color-action-disabled-text); border-color: var(--color-action-disabled-border); }
input[readonly] { background: transparent; }
/* Ошибка — толщиной и подписью, без красного. */
[aria-invalid="true"] { border-width: var(--border-focus) !important; border-color: var(--color-text) !important; }
.field__error {
display: flex; gap: var(--space-2); align-items: baseline; margin: var(--space-2) 0 0;
color: var(--color-text); font: 600 var(--type-body-sm-size)/var(--line-height-body) var(--font-sans);
}
.field__error::before { content: ""; flex: none; width: var(--size-status-dot); height: var(--size-status-dot); border: var(--border-stroke) solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); transform: translateY(0.1em); }
.check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--size-touch-min); padding: var(--space-3) 0; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--color-text); }
fieldset { margin: 0 0 var(--space-6); padding: 0; border: 0; }
legend { padding: 0; margin: 0 0 var(--space-2); font: 600 var(--type-body-sm-size)/var(--line-height-tight) var(--font-sans); }
/* Ссылка подписки и прочие «скопируйте это»: поле только для чтения + кнопка. Кнопка без JS — на диплинк. */
.copy { display: flex; gap: var(--space-2); align-items: stretch; }
.copy input { font: var(--type-mono-data); min-width: 0; }
.copy .btn, .copy button { flex: none; }
@media (max-width: 479px) { .copy { flex-direction: column; } }
/* ---------------------------------------------------------------- карточки */
.card {
background: var(--color-surface); color: var(--color-text);
border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-card);
padding: var(--space-6); margin: 0 0 var(--space-6);
}
.card > :last-child { margin-bottom: 0; }
@media (max-width: 767px) { .card { padding: var(--space-4); } }
/* Освещённая карточка: «Ключ готов», «Ключи обновлены». Паузы и сбои — обычная .card, без тепла. */
.card--lit {
background: var(--gradient-light); border-color: transparent; color: var(--color-text-on-lit);
--color-text: var(--color-text-on-lit); --color-text-secondary: var(--color-text-on-lit);
--color-key: var(--color-key-on-lit); --color-link: var(--color-text-on-lit); --color-focus: var(--color-text-on-lit);
--color-action-primary-bg: var(--color-lit-action-primary-bg); --color-action-primary-bg-hover: var(--color-lit-action-primary-bg-hover);
--color-action-primary-bg-pressed: var(--color-lit-action-primary-bg-pressed); --color-action-primary-text: var(--color-lit-action-primary-text);
--color-action-secondary-border: var(--color-text-on-lit); --color-action-secondary-text: var(--color-text-on-lit);
--color-surface: var(--color-lit-surface); --color-line: var(--color-lit-line); --color-line-control: var(--color-text-on-lit);
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); }
.card__head > h2, .card__head > h3 { margin: 0; }
/* Тариф: название, цена, «/мес», доказательства с иконками, кнопка. */
.tariff__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }
.tariff__per { font: var(--type-mono-data); color: var(--color-text-secondary); }
.proofs { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.proofs li { display: flex; gap: var(--space-3); align-items: flex-start; }
.proofs .icon { margin-top: 0.1em; }
/* Список цен без действий (витрина): строка «срок — цена», цены моноширинным. */
.price-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.price-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-3); margin: 0; padding: var(--space-3) 0; border-top: var(--border-hairline) solid var(--color-line); }
.price-list li:last-child { border-bottom: var(--border-hairline) solid var(--color-line); }
.price-list__price { font: var(--type-mono-data); white-space: nowrap; }
/* Преимущества (витрина): короткий заголовок + абзац, в ряд на десктопе. */
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6) var(--layout-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.features li { margin: 0; }
.features h3 { margin: 0 0 var(--space-2); font: 600 var(--type-body-size)/var(--line-height-tight) var(--font-sans); }
.features p { margin: 0; color: var(--color-text-secondary); }
/* Документы в подвале и юридические страницы. */
.legal-links ul { list-style: none; padding: 0; margin: 0; gap: var(--space-1) var(--space-4); }
.legal-links li { margin: 0; }
.legal-links a { display: inline-block; min-height: var(--size-touch-min); padding: var(--space-3) 0; }
.legal h2 { margin-top: var(--space-8); }
.legal h3 { margin-top: var(--space-6); }
.legal blockquote { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-line); background: var(--color-surface); }
.legal blockquote p { margin: 0; }
/* Выбор из списка, где всё — кнопки-строки (тарифы, ОС): ровная строка с подписью справа. */
.choice { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.choice li { margin: 0; }
.choice a, .choice button {
display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3);
min-height: var(--size-control-height); padding: var(--space-3) var(--space-4);
background: var(--color-surface); color: var(--color-text); border: var(--border-hairline) solid var(--color-line);
border-radius: var(--radius-control); font: var(--type-body); text-align: left; text-decoration: none;
}
.choice a:hover, .choice button:hover { background: var(--color-surface); border-color: var(--color-text); }
.choice a:active, .choice button:active { background: var(--color-bg); border-color: var(--color-text); }
.choice__meta { font: var(--type-mono-data); color: var(--color-text-secondary); white-space: nowrap; }
.choice [aria-current="true"], .choice [aria-current="page"] { border: var(--border-focus) solid var(--color-text); }
/* Строка без действия (оплата выключена, PAYMENTS_ENABLED=0): выглядит как строка тарифа, но не кнопка —
без наведения, нажатия и курсора-руки. */
.choice__static {
display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3);
min-height: var(--size-control-height); padding: var(--space-3) var(--space-4);
background: var(--color-surface); color: var(--color-text); border: var(--border-hairline) solid var(--color-line);
border-radius: var(--radius-control); font: var(--type-body); cursor: default;
}
/* ---------------------------------------------------------------- навигация: переключатель (ОС, разделы) */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.tabs li { margin: 0; }
.tabs a {
display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch-min); padding: var(--space-2) var(--space-4);
border: var(--border-hairline) solid var(--color-line-control); border-radius: var(--radius-control);
color: var(--color-text); text-decoration: none; font: var(--type-body-sm); font-weight: var(--font-weight-medium);
}
.tabs a:hover { border-color: var(--color-text); }
.tabs a[aria-current="page"], .tabs a[aria-current="true"] { background: var(--color-action-primary-bg); border-color: var(--color-action-primary-bg); color: var(--color-action-primary-text); }
.tabs .icon { width: 20px; height: 20px; color: currentColor; }
/* Назад: стрелка + слово, зона 48. */
.back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch-min); color: var(--color-text); text-decoration: none; font: var(--type-body-sm); }
.back::before { content: ""; width: 10px; height: 10px; border-left: var(--border-stroke) solid currentColor; border-bottom: var(--border-stroke) solid currentColor; transform: rotate(45deg); margin-left: 4px; }
.back:hover { text-decoration: underline; }
/* ---------------------------------------------------------------- статус: форма + подпись */
.status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font: var(--type-body-sm); }
.status::before {
content: ""; flex: none; width: var(--size-status-dot); height: var(--size-status-dot); border-radius: 50%;
border: var(--border-stroke) solid currentColor; background: transparent;
}
.status--works { color: var(--color-status-works); }
.status--works::before { background: currentColor; }
.status--degraded { color: var(--color-status-degraded); }
.status--degraded::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.status--offline { color: var(--color-status-offline); }
.status--paused { color: var(--color-status-paused); }
/* На Патине зелёная только точка, подпись — цветом текста (зелёный текст на Патине 4,31 < 4,5). */
.section-dark .status--works { color: var(--color-text); }
.section-dark .status--works::before { background: var(--color-status-works); border-color: var(--color-status-works); }
/* ---------------------------------------------------------------- сообщения */
/* Сообщение на странице: что случилось → что делать. Без красного: ошибка = жирная линия слева и форма точки. */
.notice {
display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); align-items: baseline;
margin: 0 0 var(--space-6); padding: var(--space-4); background: var(--color-surface); color: var(--color-text);
border: var(--border-hairline) solid var(--color-line); border-left-width: 4px; border-radius: var(--radius-control);
}
.notice::before { content: ""; width: var(--size-status-dot); height: var(--size-status-dot); border-radius: 50%; border: var(--border-stroke) solid currentColor; transform: translateY(0.1em); }
.notice > * { grid-column: 2; margin: 0; }
.notice > * + * { margin-top: var(--space-1); }
.notice__title { font-weight: var(--font-weight-semibold); }
.notice--success { border-left-color: var(--color-status-works); }
.notice--success::before { background: var(--color-status-works); border-color: var(--color-status-works); }
.notice--error { border-left-color: var(--color-text); }
.notice--error::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.notice--paused { border-left-color: var(--color-status-paused); }
.notice--paused::before { border-color: var(--color-status-paused); }
/* ---------------------------------------------------------------- ключи и иконки */
/* Спрайт: .
Медь клина — через --arka-key (наследуется в