:root { --bg: #f4f7fb; --surface: #ffffff; --surface-soft: #eef4ff; --text: #162033; --muted: #64748b; --line: #dbe3ef; --primary: #1457d9; --primary-dark: #0e3e9e; --success: #087a55; --success-bg: #e7f8f1; --shadow: 0 14px 34px rgba(28, 48, 83, 0.09); --radius: 16px; --container: 1220px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); } button, input { font: inherit; } code { word-break: break-word; } .container { width: min(var(--container), calc(100% - 36px)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .muted { color: var(--muted); } .site-header { position: sticky; top: 0; z-index: 1100; /* above .theme-switch.on-map, which also asked for 1000 and came later */ background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .header-row { min-height: 72px; display: grid; grid-template-columns: auto minmax(260px, 560px) auto; gap: 24px; align-items: center; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; letter-spacing: -.02em; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary); color: white; font-size: 21px; } .header-search { display: flex; min-width: 0; } .header-search input { flex: 1; min-width: 0; border: 1px solid var(--line); border-right: 0; border-radius: 11px 0 0 11px; padding: 10px 13px; background: #f8fafc; color: var(--text); } .header-search button, .search-form button { border: 0; background: var(--primary); color: white; padding: 10px 16px; border-radius: 0 11px 11px 0; cursor: pointer; font-weight: 700; } .header-nav { display: flex; align-items: center; gap: 18px; font-weight: 700; white-space: nowrap; } .site-main { min-height: calc(100vh - 150px); } .hero { padding: 72px 0 56px; background: radial-gradient(circle at 85% 20%, #d9e8ff 0, transparent 34%), linear-gradient(135deg, #fff 0%, #eef5ff 100%); border-bottom: 1px solid var(--line); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 56px; align-items: center; } .eyebrow { margin: 0 0 8px; color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; } h1 { margin: 0 0 16px; font-size: clamp(2.25rem, 5vw, 4.6rem); } h2 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2rem); } h3 { margin: 0; } .lead { max-width: 760px; margin: 0; color: #475569; font-size: 1.1rem; } .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 30px; } .stats-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 0; } .stat { background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: var(--radius); padding: 19px; box-shadow: 0 8px 24px rgba(28,48,83,.05); } .stat strong { display: block; font-size: 1.55rem; } .stat span { display: block; color: var(--muted); font-size: .9rem; } .section { padding-top: 48px; padding-bottom: 64px; } .section-block { margin-top: 40px; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .country-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; } .country-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; color: var(--text); box-shadow: 0 5px 18px rgba(28,48,83,.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .country-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #aac5f8; color: var(--text); } .country-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .country-code { display: inline-flex; border-radius: 999px; background: var(--surface-soft); color: var(--primary); padding: 4px 9px; font-size: .78rem; font-weight: 800; } .arrow { font-size: 1.2rem; color: var(--primary); } .country-card h3 { font-size: 1.25rem; margin-bottom: 18px; } .country-card dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0; } .country-card dl div { min-width: 0; } .country-card dt { color: var(--muted); font-size: .72rem; } .country-card dd { margin: 2px 0 0; font-weight: 800; } .page-hero { padding: 42px 0 34px; background: var(--surface); border-bottom: 1px solid var(--line); } .small-hero { padding-bottom: 28px; } .entity-hero { background: linear-gradient(180deg, #fff, #f6f9fe); } .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 25px; color: var(--muted); font-size: .88rem; } .breadcrumbs a { color: var(--muted); } .breadcrumbs a:hover { color: var(--primary); } .page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; } .page-title-row h1 { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 10px; } .native-name { margin: -3px 0 0; color: var(--muted); font-size: 1.15rem; } .button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 11px; background: var(--primary); color: white; font-weight: 800; border: 1px solid var(--primary); } .button:hover { background: var(--primary-dark); color: white; } .button.secondary { background: white; color: var(--primary); border-color: #b8c9e9; } .button.secondary:hover { border-color: var(--primary); background: var(--surface-soft); } .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; } .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; background: var(--surface-soft); color: var(--primary); font-size: .75rem; font-weight: 800; } .badge.success { background: var(--success-bg); color: var(--success); } .muted-badge { background: #eef1f5; color: #4b5563; } .two-column { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; align-items: start; } .entity-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 34px; align-items: start; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 7px 24px rgba(28,48,83,.04); } .sticky-panel { position: sticky; top: 94px; } .panel h2 { font-size: 1.2rem; margin-bottom: 18px; } .panel h3 { margin: 24px 0 10px; font-size: 1rem; } .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; } .panel-heading h2 { margin: 0; } .map-panel { padding: 14px; } .map { height: 520px; border-radius: 12px; overflow: hidden; background: #e8edf5; } .entity-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .entity-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px 18px; color: var(--text); border-bottom: 1px solid var(--line); transition: background .15s ease; } .entity-row:last-child { border-bottom: 0; } .entity-row:hover { background: #f8fbff; color: var(--text); } .entity-main { min-width: 0; } .entity-main strong { display: block; overflow-wrap: anywhere; } .entity-main span { display: block; color: var(--muted); font-size: .87rem; margin-top: 2px; } .entity-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: var(--muted); font-size: .82rem; text-align: right; } .kind-list { display: grid; gap: 2px; } .kind-list a { display: flex; justify-content: space-between; gap: 16px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--text); } .kind-list a:last-child { border-bottom: 0; } .kind-list strong { color: var(--primary); } .details-list, .translation-list { margin: 0; } .details-list > div, .translation-list > div { display: grid; grid-template-columns: minmax(110px,.9fr) minmax(0,1.1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .details-list > div:last-child, .translation-list > div:last-child { border-bottom: 0; } .cp-urls { list-style: none; margin: 0 0 8px; padding: 0; } .cp-urls li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .86rem; overflow-wrap: anywhere; } .cp-urls li:last-child { border-bottom: 0; } .population-series { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: .9rem; } .population-series th { color: var(--muted); font-size: .8rem; font-weight: 600; text-align: left; padding: 6px 0; border-bottom: 1px solid var(--line); } .population-series td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .population-series th:last-child, .population-series td:last-child { text-align: right; font-weight: 650; } .population-series tr:last-child td { border-bottom: 0; } .population-series small { display: block; color: var(--muted); font-size: .76rem; font-weight: 400; overflow-wrap: anywhere; } .population-series small a { display: block; } .population-series tr.is-disagreeing td { background: #fff6e0; } .population-series tr.is-census td { font-weight: 650; } .nsi-population tbody { display: block; max-height: 420px; overflow-y: auto; } .nsi-population thead, .nsi-population tbody tr { display: table; width: 100%; table-layout: fixed; } .quality-issue, .people-group { border-bottom: 1px solid var(--line); } .quality-issue > summary, .people-group > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; cursor: pointer; font-weight: 650; } .quality-issue > summary small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; } .quality-issue .entity-list { margin-bottom: 14px; } .quality-more { font-size: .82rem; margin: 8px 0 0; } .people-list { list-style: none; margin: 0 0 14px; padding: 0; } .people-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); } .people-row:last-child { border-bottom: 0; } .people-row small { display: block; color: var(--muted); font-size: .8rem; } .people-row .people-note { font-style: italic; } .people-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; font-size: .78rem; } .people-row.status-disputed { background: #fff6e0; } .badge.warning { background: #fdebc8; color: #8a5a00; } .population-note { font-size: .8rem; margin: 0 0 12px; } .details-list dt, .translation-list dt { color: var(--muted); font-size: .84rem; } .details-list dd, .translation-list dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; } .details-list small { color: var(--muted); } .relation-list { display: grid; gap: 8px; } .relation-list a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; background: #f8fafc; border-radius: 9px; color: var(--text); } .relation-list small { color: var(--muted); } .search-form { margin-top: 22px; display: grid; grid-template-columns: minmax(220px, 1fr) 90px 160px auto; max-width: 900px; } .search-form input { min-width: 0; border: 1px solid var(--line); border-right: 0; padding: 11px 12px; background: white; } .search-form input:first-child { border-radius: 11px 0 0 11px; } .search-form button { border-radius: 0 11px 11px 0; } .pagination { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 22px; padding: 14px 18px; background: white; border: 1px solid var(--line); border-radius: 12px; } .empty-state { padding: 30px; background: white; border: 1px dashed #b9c5d7; border-radius: var(--radius); color: var(--muted); text-align: center; } .error-page { padding-top: 90px; padding-bottom: 100px; text-align: center; } .error-code { margin: 0; color: var(--primary); font-size: 5rem; line-height: 1; font-weight: 900; } .error-page .lead { margin-inline: auto; margin-bottom: 26px; } .error-actions { display: flex; justify-content: center; gap: 12px; } .debug-box { max-width: 900px; margin: 20px auto; padding: 15px; overflow: auto; text-align: left; background: #1f2937; color: #f8fafc; border-radius: 10px; } .site-footer { border-top: 1px solid var(--line); background: white; color: var(--muted); } .footer-row { min-height: 74px; display: flex; justify-content: space-between; align-items: center; gap: 20px; } @media (max-width: 980px) { .header-row { grid-template-columns: auto 1fr; } .header-search { grid-column: 1 / -1; grid-row: 2; padding-bottom: 12px; } .header-nav { justify-self: end; } .hero-grid, .two-column, .entity-layout { grid-template-columns: 1fr; } .country-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .sticky-panel { position: static; } .map { height: 430px; } } @media (max-width: 680px) { .container { width: min(100% - 22px, var(--container)); } .header-row { gap: 12px; } .brand span:last-child { display: none; } .header-nav { gap: 12px; font-size: .9rem; } .hero { padding-top: 48px; } .country-grid { grid-template-columns: 1fr; } .stats-grid, .stats-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); } .page-title-row { align-items: flex-start; flex-direction: column; } .page-title-row .button { width: 100%; } .entity-row { align-items: flex-start; } .entity-meta { flex-direction: column; align-items: flex-end; gap: 5px; } .search-form { grid-template-columns: 1fr 72px; gap: 8px; } .search-form input { border: 1px solid var(--line); border-radius: 9px !important; } .search-form button { border-radius: 9px; } .search-form input[name="kind"] { grid-column: 1 / -1; } .map { height: 340px; } .footer-row { flex-direction: column; justify-content: center; padding: 16px 0; } } /* public site (router_public.php, 2026-09-14): no technical badges ("boundary") for visitors */ .is-public .badge.success { display: none; } /* themes of the public site (2026-09-16): the satellite map and the theme switch */ .satellite-frame { display: block; width: 100%; height: 560px; border: 0; border-radius: 12px; background: #e8edf5; } .satellite-links { margin: 10px 4px 0; } /* the professional site; the public one has the bar of links (.lk-bar) */ .people-compact .people-line { padding: 10px 0; border-bottom: 1px solid var(--line); } .people-compact .people-line:last-child { border-bottom: 0; } .people-compact h3 { margin: 0 0 6px; font-size: .95rem; } .people-compact p { margin: 0; line-height: 1.7; } .people-compact a { font-weight: 600; } .people-compact summary { cursor: pointer; margin-top: 6px; color: var(--primary); font-size: .88rem; } .people-compact details p { margin-top: 6px; } .header-nav a.is-current { text-decoration: underline; text-underline-offset: 5px; } .theme-countries { margin: 12px 0 0; padding-left: 18px; line-height: 1.9; } @media (max-width: 720px) { .satellite-frame { height: 420px; } } /* The picture the map waits behind. It takes the same height as the frame at every width, so that nothing on the page moves when the one is swapped for the other. */ .map-facade { position: relative; display: block; width: 100%; height: 560px; border-radius: 12px; overflow: hidden; background: #e8edf5; cursor: pointer; } .map-facade img { display: block; width: 100%; height: 100%; object-fit: cover; } .map-open { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 11px 20px; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--text); font-weight: 800; font-size: .92rem; cursor: pointer; box-shadow: 0 6px 20px rgba(28,48,83,.28); } .map-facade:hover .map-open { background: #fff; } .map-credit { position: absolute; right: 8px; bottom: 6px; padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.72); color: #334155; font-size: .66rem; line-height: 1.5; } @media (max-width: 720px) { .map-facade { height: 420px; } } /* the suggestions of the search box (2026-09-16) */ .header-search { position: relative; } .suggest-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 2000; margin: 0; padding: 6px 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(28,48,83,.16); max-height: 70vh; overflow-y: auto; } .suggest-list a { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; color: var(--text); } .suggest-list strong { font-weight: 700; } .suggest-list span { font-size: .82rem; color: var(--muted); } .suggest-list li.is-active a, .suggest-list a:hover { background: var(--surface-soft); } /* the guard (2026-09-16): the beacon is loaded but never seen */ .beacon { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; } /* ------------------------------------------------------------------------------------------------------------------ The new layout (2026-09-17, after the demo the user approved for the local site). The header rules hold for both sites; everything under .is-public only for the public one - the professional pages keep their look. ------------------------------------------------------------------------------------------------------------------ */ .header-buttons { display: none; } .icon-button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 1.35rem; cursor: pointer; } .icon-button:hover, .icon-button[aria-expanded="true"] { background: var(--surface-soft); } :focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; } .header-row { min-height: 60px; } @media (max-width: 760px) { .header-row { grid-template-columns: 1fr auto; gap: 8px; min-height: 56px; } .brand span:last-child { display: inline; } .header-buttons { display: flex; gap: 2px; justify-self: end; } .header-search, .header-nav { display: none; grid-column: 1 / -1; } .site-header.search-open .header-search { display: flex; grid-row: 2; padding-bottom: 10px; } .site-header.menu-open .header-nav { display: flex; grid-row: 2; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; white-space: normal; font-size: 1rem; justify-self: stretch; } .site-header.menu-open .header-nav a { padding: 12px 6px; border-top: 1px solid var(--line); } } /* the theme is switched above the map, so the header of an entity page does not repeat it */ .is-public:has(.theme-switch) .header-nav .nav-theme { display: none; } @media (max-width: 760px) { .is-public:has(.theme-switch) .site-header.menu-open .header-nav .nav-theme { display: none; } } .is-public { --container: 1440px; } .is-public .entity-hero { padding: 14px 0 16px; } .is-public .breadcrumbs { margin-bottom: 8px; gap: 2px 8px; font-size: .82rem; } .is-public .page-title-row { align-items: flex-start; } .is-public .page-title-row > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .is-public .page-title-row h1 { order: 1; margin: 0; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); text-wrap: balance; } .is-public .badge-row { order: 2; margin: 0; } .facts { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 4px 0 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; } .facts b { font-size: 1.05rem; } .facts span { color: var(--muted); font-size: .85rem; } .is-public .section.entity-layout { padding-top: 16px; padding-bottom: 36px; } .is-public .entity-layout { grid-template-columns: minmax(0, 1fr) 332px; gap: 20px 24px; } .is-public .section-block { margin-top: 20px; } .is-public .panel { padding: 16px; } .is-public .map-panel { padding: 10px; } .is-public .map { height: clamp(300px, 58vh, 640px); } .is-public .satellite-frame, .is-public .map-facade { height: clamp(320px, 62vh, 680px); } .is-public .sticky-panel { top: 76px; } .theme-switch { display: inline-flex; padding: 3px; margin-bottom: 10px; border-radius: 11px; background: #e6ecf6; } .theme-switch a { min-height: 38px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 8px; font-weight: 700; color: var(--muted); } .theme-switch a:hover { color: var(--primary); } .theme-switch a.is-current { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(22,32,51,.18); } .info-grid { display: grid; gap: 16px; margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } .info-grid > :only-child { grid-column: 1 / -1; } .info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; } .info-card h2 { margin: 0; padding: 12px 16px 2px; font-size: 1rem; letter-spacing: -.01em; } .info-card h2 small { margin-left: 6px; color: var(--muted); font-size: .78rem; font-weight: 500; } .info-wide { grid-column: span 2; } .info-rows { list-style: none; margin: 0; padding: 4px 8px 8px; display: grid; gap: 0 12px; } .info-rows-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .info-rows li { min-width: 0; container-type: inline-size; } .info-rows a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: 9px; color: var(--text); } .info-rows a:hover { background: var(--surface-soft); color: var(--text); } .info-rows a.is-self { font-weight: 800; color: var(--primary); } .row-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: break-word; } .row-name small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; } .row-meta { flex: 0 0 auto; color: var(--muted); font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .dir { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-soft); color: var(--primary); font-size: .8rem; } .dir i { display: block; font-style: normal; line-height: 1; } @container (max-width: 330px) { .dir-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .info-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px 16px 14px; } .info-chips a { min-height: 40px; padding: 8px 12px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-weight: 600; } .info-chips a:hover { background: var(--surface-soft); } .info-more { margin: 0; padding: 0 16px 8px; font-weight: 700; } .info-more a { display: inline-flex; align-items: center; min-height: 40px; } .map-pick { display: grid; gap: 6px; min-width: 150px; font-family: inherit; } .map-pick a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 9px; background: var(--primary); color: #fff; font-weight: 700; } .map-pick a:hover { background: var(--primary-dark); color: #fff; } /* The room an advertisement takes, whether it is the dashed placeholder of this machine or the real block of the server. The package swaps our
for Google's , so the shape has to belong to the classes that survive that swap - otherwise the advertisement arrives with no width, no margins and no order (2026-09-22). */ .ad-slot, .ad-place-map, .ad-place-content, .ad-place-bottom, .ad-place-unit { display: block; width: 100%; max-width: 970px; margin: 22px auto; min-height: 100px; } /* and the dashes are the placeholder's alone: a real advertisement in a dashed box would look like a fault */ div.ad-slot { display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; padding: 8px; border: 1.5px dashed #d9a93a; border-radius: 12px; color: #7a5a10; font-size: .85rem; background: repeating-linear-gradient(135deg, #fff8e8 0 12px, #fff2d2 12px 24px); } div.ad-slot b { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; } @media (max-width: 1100px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 980px) { /* one column: the map, then the data, then the rest - the numbers are not under ten rows of neighbours */ .is-public .entity-layout { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .is-public .entity-content { display: contents; } .is-public .entity-content > * { order: 3; } .is-public .entity-content > .theme-switch { order: 0; align-self: flex-start; margin-bottom: 0; } .is-public .entity-content > .map-panel { order: 1; } /* The advertisement keeps its place under the map on a telephone too (the user, 2026-09-22): with the same order as the map it stays where it stands in the page, which is right below it, and the links follow. Left at 3 it fell under the links and the coordinates, where it reads as an interruption of the text. */ .is-public .entity-content > .ad-place-map { order: 1; } .is-public .entity-sidebar { order: 2; } .is-public .section-block, .info-grid { margin-top: 0; } } @media (max-width: 700px) { .info-grid { grid-template-columns: minmax(0, 1fr); } .info-wide { grid-column: auto; } .info-rows-2 { grid-template-columns: minmax(0, 1fr); } .theme-switch { display: flex; align-self: stretch !important; } .theme-switch a { flex: 1; justify-content: center; } .ad-slot, .ad-place-content, .ad-place-bottom, .ad-place-unit { min-height: 280px; } .is-public .map { height: clamp(280px, 48vh, 420px); } .is-public .panel { padding: 14px; } } /* dense lists and headings on the public pages (2026-09-17, the user: "много разход на пространство"): the child units in columns with rows of 44 px instead of one 100 px row across the page; small section headings; tight page bands */ .is-public .page-hero { padding: 14px 0 16px; } .is-public .page-hero h1 { margin-bottom: 4px; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); } .is-public .hero { padding: 28px 0 24px; } .is-public .hero h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); margin-bottom: 8px; } .is-public .section { padding-top: 16px; padding-bottom: 36px; } .is-public .section-heading { align-items: baseline; justify-content: flex-start; gap: 10px; margin-bottom: 8px; } .is-public .section-heading h2, .is-public .people-compact h2 { font-size: 1.1rem; letter-spacing: -.01em; } .is-public .section-heading .eyebrow, .is-public .section-heading p.muted { display: none; } .is-public .entity-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .is-public .entity-row { min-height: 44px; padding: 6px 12px; gap: 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); margin: 0 -1px -1px 0; } .is-public .entity-row:last-child { border-bottom: 1px solid var(--line); } .is-public .entity-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; } .is-public .entity-main strong { display: inline; font-weight: 600; overflow-wrap: break-word; } .is-public .entity-main span { display: inline; margin: 0; font-size: .78rem; } .is-public .entity-meta { flex-direction: row; align-items: center; gap: 8px; font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .is-public .entity-meta .arrow { display: none; } .is-public .country-grid { gap: 12px; } .is-public .country-card { padding: 14px 16px; } .is-public .country-card-top { margin-bottom: 8px; } .is-public .country-card h3 { margin-bottom: 10px; font-size: 1.1rem; } .is-public .stats-grid { gap: 10px; margin-top: 16px; } .is-public .stat { padding: 12px 14px; } .is-public .stat strong { font-size: 1.25rem; } /* the data panel follows the scroll: the column must be as tall as the content for "sticky" to have room to move */ .is-public .entity-sidebar { align-self: stretch; } @media (max-width: 700px) { .ad-slot, .ad-place-content, .ad-place-bottom, .ad-place-unit { min-height: 250px; } .is-public .satellite-frame, .is-public .map-facade { height: clamp(280px, 50vh, 440px); } } /* ------------------------------------------------------------------------------------------------------------------ Space (2026-09-17, the user: every row must earn its place): the name of the page in the header instead of the site name, a narrower search; one line of the path and the facts; the theme switch on the map, no "Карта" title and no frame; the data panel without what the header says, the external links in one row; the advertisement in the sidebar on a wide screen; the people in a card like the other blocks. ------------------------------------------------------------------------------------------------------------------ */ .brand-title { min-width: 0; gap: 10px; } .brand-home { display: inline-flex; flex: none; } .header-title { margin: 0; min-width: 0; font-size: clamp(1.15rem, .9rem + 1vw, 1.6rem); line-height: 1.15; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-badge { flex: none; font-size: .7rem; } .is-public .header-row { grid-template-columns: minmax(0, 1fr) minmax(200px, 360px) auto; } .is-public .hero-line { padding: 8px 0; } .is-public .hero-line .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; } .is-public .hero-line .breadcrumbs { margin: 0; } .is-public .hero-line .facts { flex: 0 1 auto; margin: 0; order: 0; } .is-public .section.entity-layout { padding-top: 12px; } .is-public .map-panel { position: relative; padding: 0; overflow: hidden; } .is-public .map, .is-public .satellite-frame, .is-public .map-facade { border-radius: 0; } .theme-switch.on-map { position: absolute; top: 10px; right: 10px; z-index: 1000; margin: 0; box-shadow: 0 1px 4px rgba(22,32,51,.25); background: #e6ecf6; } .theme-switch.on-map a { min-height: 32px; padding: 0 12px; font-size: .88rem; } .is-public .sticky-panel { padding: 12px 14px; } .is-public .details-list > div { padding: 5px 0; } /* the bar of external links (the user picked it on 2026-09-17 out of six kinds): one frame, a part for every link, a line icon over a short name; the word above it says whose links they are ("Сопот в") */ .lk-title { margin: 12px 0 6px; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } /* Long cards rather than six narrow columns (the user, 2026-09-22): a column of six fits a syllable, a card fits the name. They lay themselves out - as many to a row as the room allows, two in the sidebar, more under a wide map, one on a narrow phone - so nothing has to be said about where they are used. */ .lk-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px; max-width: 420px; } .lk-bar a { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: .76rem; font-weight: 600; line-height: 1.2; transition: background .15s, border-color .15s; } .lk-bar a span { min-width: 0; } .lk-bar svg { width: 17px; height: 17px; flex: none; color: var(--muted); transition: color .15s; } .lk-mark { width: 18px; height: 18px; flex: none; object-fit: contain; } .lk-bar a:hover { border-color: var(--primary); } .lk-bar small { display: block; color: var(--muted); font-size: .92em; } /* the language of the Wikipedia article */ .lk-bar a:hover { background: var(--surface-soft); } .lk-bar a:hover svg { color: var(--primary); } .is-public .details-list:empty { display: none; } /* The slot under the map holds a banner and not a rectangle: 970x90 and 728x90 on a desk, 320x100 on a telephone. It says so at every width, because the plain .ad-slot reserves 280 and 250 further down for the rectangles, and a slot two hundred pixels taller than what arrives in it is a hole in the page. */ .ad-place-map { max-width: 970px; min-height: 100px !important; } .ad-place-side { display: none; } @media (min-width: 981px) { .is-public .ad-slot-content { display: none; } .is-public .ad-place-side { display: block; position: sticky; top: 76px; margin: 16px 0 0; min-height: 600px; max-width: 332px; } .is-public .entity-sidebar { display: flex; flex-direction: column; } .is-public .entity-sidebar .sticky-panel { position: static; } } @media (min-width: 701px) { .is-public .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .is-public .people-compact { margin-top: 16px; padding: 10px 16px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .is-public .people-compact .section-heading { margin-bottom: 2px; } @media (max-width: 980px) { .is-public .entity-content > .map-panel { order: 0; } .is-public .entity-sidebar { order: 1; } } @media (max-width: 760px) { .is-public .header-row { grid-template-columns: minmax(0, 1fr) auto; } .header-title { font-size: 1.15rem; } .theme-switch.on-map { display: inline-flex; top: 8px; right: 8px; } .theme-switch.on-map a { flex: none; } } /* the satellite page: the paragraph of facts above the blocks and the line of sources under it (2026-09-19) */ .place-text { margin: 4px 4px 16px; } .place-text p { margin: 0; line-height: 1.6; } .place-text .sources { margin-top: 6px; color: var(--muted); font-size: .85rem; } /* The menus of the header (2026-09-21): a button and a list of real links, not a