* { box-sizing: border-box; } /* прячет корневой
до тех пор, пока Vue не смонтирует приложение — без этого браузер на долю секунды успевает отрисовать сырую разметку до обработки v-if/{{ }} (например голый текст "{{ error }}" внутри видимого .error), Vue снимает атрибут v-cloak автоматически сразу после монтирования */ [v-cloak] { display: none; } /* общая ширина контента шапки и main — одна переменная, чтобы не менять в двух местах и не рассинхронизировать (см. .header-inner и main) */ :root { --content-width: 1200px; } /* flex-колонка на всю высоту вьюпорта — чтобы .site-footer всегда прижимался к низу экрана (не "под контентом", а именно к низу), даже на коротких страницах вроде stats.html; main растягивается (flex-grow), header/footer остаются своего естественного размера */ body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #14161a; color: #e8e8e8; } /* базовый стиль ссылок — без стандартного синего, чуть жирнее обычного текста для заметности; подчёркивание появляется только при наведении. Более специфичные правила (header .logo, header nav a, .card a) ниже по-прежнему выигрывают там, где нужен свой цвет. */ a { color: inherit; text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; } header { background: linear-gradient(180deg, #20242c 0%, #1a1d23 100%); border-bottom: 1px solid #2a2e37; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3); position: sticky; top: 0; /* без z-index позиционированные элементы (в т.ч. иконки флагов .fi из flag-icons — у них position:relative) складываются по порядку в DOM и перекрывают sticky-шапку при скролле, хотя она визуально должна быть поверх всего остального контента */ z-index: 100; } /* та же ширина/центрирование, что и у main — чтобы шапка визуально выравнивалась с таблицами на странице, а не была просто "во всю ширину". position:relative нужен, чтобы