*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
height: 100%;
}
@supports (height: 100dvh) {
html, body { height: 100dvh; }
}
body {
background: var(--color-surface);
color: var(--color-ink);
font-family: var(--type-family-sans);
font-size: var(--type-size-body);
line-height: var(--type-line-body);
-webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
h1, h2, h3, .site-header__title {
font-family: var(--type-family-display);
}
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
table, .region-rows dd, .region-tile__value, .region-figure__value {
font-variant-numeric: tabular-nums;
}
button {
font: inherit;
color: var(--color-ink);
background: var(--color-surface);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sm);
padding: var(--space-xs) var(--space-sm);
cursor: pointer;
}
button:hover { background: var(--color-surface-alt); }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
background: var(--color-accent);
color: var(--color-accent-ink);
padding: var(--space-xs) var(--space-sm);
}
.skip-link:focus { left: var(--space-xs); }
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--color-surface);
border-bottom: 1px solid var(--color-line);
}
.site-header__brand {
display: flex;
align-items: center;
gap: var(--space-sm);
text-decoration: none;
color: inherit;
min-width: 0;
}
.site-header__mark {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: block;
}
.site-header__text {
display: flex;
flex-direction: column;
min-width: 0;
}
.site-header__title {
font-size: 21px;
font-weight: var(--type-weight-regular);
line-height: var(--type-line-tight);
letter-spacing: -0.01em;
}
.site-header__owner {
font-size: var(--type-size-small);
color: var(--color-ink-muted);
line-height: var(--type-line-tight);
}
.site-header__stamp {
flex: 0 0 auto;
font-size: var(--type-size-small);
color: var(--color-ink-muted);
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
padding: 2px var(--space-xs);
white-space: nowrap;
}
.site-nav {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-md);
padding: 0 var(--space-md);
border-bottom: 1px solid var(--color-line);
background: var(--color-surface);
font-size: var(--type-size-small);
}
.site-nav a {
display: inline-block;
padding: var(--space-xs) 0;
min-height: 24px;
color: var(--color-ink-muted);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.site-nav a:hover {
color: var(--color-accent);
border-bottom-color: var(--color-line-strong);
}
.site-nav a.is-current {
color: var(--color-ink);
font-weight: var(--type-weight-medium);
border-bottom-color: var(--color-accent);
}
.site-footer {
padding: var(--space-lg) var(--space-md);
border-top: 1px solid var(--color-line);
background: var(--color-surface-alt);
font-size: var(--type-size-small);
color: var(--color-ink-muted);
}
.site-footer__body {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
gap: var(--space-md) var(--space-xl);
align-items: start;
max-width: 1280px;
margin: 0 auto;
}
.site-footer p { margin: 0; }
.site-footer__org strong { color: var(--color-ink); }
.site-footer__link { text-align: right; }
.page-map {
overflow: hidden;
overscroll-behavior: none;
}
.page-map .site-footer { padding: var(--space-xs) var(--space-md); }
.page-map .site-footer__body { display: block; }
.page-map .site-footer__org,
.page-map .site-footer__link { display: none; }
.page-map .site-footer__note::before {
content: "ИПИИР · ";
color: var(--color-ink);
font-weight: var(--type-weight-medium);
}
.page-map .site-footer__note::after { content: " · ipiir.ru"; }
.page-map .site-footer__osm { display: none; }
@media (max-width: 720px) {
.site-header { flex-wrap: wrap; }
.site-header__stamp { order: 3; }
.site-nav { gap: 0 var(--space-md); }
.site-footer__body { grid-template-columns: 1fr; gap: var(--space-xs); }
.site-footer__link { text-align: left; }
}
.noscript-block {
padding: var(--space-lg);
max-width: var(--type-measure);
}