/* Design "B · Datu karte": colour and size tokens. Dark follows the OS setting. */ :root { --bg: #f7f8fa; --surface: #ffffff; --ink: #101828; --muted: #475467; --accent: #0b5fa5; --accent-ink: #ffffff; --hot: #c2410c; --line: #e4e7ec; --field: #858fa1; --tint: #eef4fb; --ok: #067647; --ok-bg: #ecfdf3; --err: #b42318; --err-bg: #fef3f2; --ctl: 44px; --r: 8px; --max: 1240px; --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* data layers (lake page) */ --l-lake: #3f74d6; --l-land: #a39b00; --l-island: #a39b00; --l-floor: #9a6a1f; --l-lakeshore: #d4a800; --l-surroundings: #e39a2e; --l-catchment: #7a9fe0; --l-objects: #e8562a; --l-creation: #8a6fd1; --l-recreation: #e0820b; --l-chemistry: #1f8ee8; --l-macrophyte: #2fa84f; --l-fish: #2a9d9d; --l-mammals: #4bb3b3; --l-birds: #339999; --l-phytoplankton: #5cc45c; --l-zooplankton: #93c43a; --l-invertebrates: #b8860b; --l-dangers: #c0392b; --l-habitats: #1f8f3a; --l-other: #858fa1; color-scheme: light; } /* Dark: when chosen in the header (data-theme="dark" on ), or by the OS unless light was chosen */ :root[data-theme="dark"] { --bg: #0b1220; --surface: #111a2b; --ink: #e6ebf2; --muted: #9aa8bb; --accent: #6cb2f0; --accent-ink: #0b1220; --hot: #fb923c; --line: #233046; --field: #5b6b85; --tint: #16233a; --ok: #6ce9a6; --ok-bg: #0c2a1d; --err: #fda29b; --err-bg: #3a1512; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b1220; --surface: #111a2b; --ink: #e6ebf2; --muted: #9aa8bb; --accent: #6cb2f0; --accent-ink: #0b1220; --hot: #fb923c; --line: #233046; --field: #5b6b85; --tint: #16233a; --ok: #6ce9a6; --ok-bg: #0c2a1d; --err: #fda29b; --err-bg: #3a1512; color-scheme: dark; } } @media (max-width: 640px) { :root { --ctl: 48px; } } /* Design "Aalto-A": water, light and lilies. Overrides design B's tokens (loaded before this file). Light only: the layout sets data-theme="light", and a stored dark choice is overridden here too. */ :root, :root[data-theme="light"], :root[data-theme="dark"] { --bg: #F3F8F8; --surface: #FFFFFF; --ink: #13303A; --muted: #4A5F66; --accent: #2A5F73; --accent-ink: #FFFFFF; --hot: #8C6110; --line: #CFE0E4; --field: #7C9196; --tint: #DCEBEE; --ok: #1F6B45; --ok-bg: #E8F4EC; --err: #A3261A; --err-bg: #FBEDEB; --r: 6px; --max: 1280px; --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Jost", system-ui, sans-serif; --display: "Familjen Grotesk", "Jost", system-ui, sans-serif; /* Aalto palette */ --aa-deep: #13303A; --aa-blue: #5B9AAE; --aa-blue-2: #3F7F95; --aa-blue-3: #A9CFD9; --aa-pale: #DCEBEE; --aa-light: #F4FAFB; --aa-lily: #E5B53A; --aa-pad: #4E6B3C; --aa-eyebrow: #2A5F73; --aa-text-2: #3B4F56; --aa-ripple-h: 44px; --aa-tabs-h: 64px; --map-hot: #E5B53A; color-scheme: light; } /* Design B: page frame (top bar, tabs, main, footer) */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; } img { max-width: 100%; height: auto; } a { color: var(--accent); } a:hover { color: var(--hot); } h1, h2, h3 { margin: 0; line-height: 1.2; } h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; } h2 { font-size: 18px; font-weight: 700; } h3 { font-size: 16px; font-weight: 700; } p { margin: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hidden { display: none !important; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 8px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--accent); color: var(--accent-ink); border-radius: var(--r); } .skip:focus { top: 8px; color: var(--accent-ink); } /* top bar */ .top { background: var(--surface); border-bottom: 1px solid var(--line); } .top-in { max-width: var(--max); margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .brand { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; } .brand:hover { color: var(--ink); } .brand-name { font-family: var(--mono); font-size: 19px; font-weight: 600; } .top-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .seg { display: flex; gap: 4px; } .seg .btn { min-width: 44px; height: 44px; padding: 0 10px; font-family: var(--mono); font-size: 14px; } .seg .btn[aria-pressed="true"] { background: var(--tint); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } /* colour switch: a borderless pill, so it doesn't read as another language button */ .theme-seg { gap: 2px; padding: 3px; border-radius: 999px; background: var(--tint); margin-right: 4px; } .theme-seg .btn, .theme-seg .btn:hover { min-width: 38px; height: 38px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); box-shadow: none; font-family: var(--sans); } .theme-seg .btn:hover { color: var(--ink); } .theme-seg .btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); border: 0; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18); } .theme-seg .seg-label { display: none; } .top .menu-btn { display: none; padding: 0; border: 0; background: none; cursor: pointer; } .menu-btn .menu-close, .menu-btn[aria-expanded="true"] .menu-open { display: none; } .menu-btn[aria-expanded="true"] .menu-close { display: inline; } /* design switch (tmpl/partials/DesignMenu.php) */ .design-menu { position: relative; } .design-menu summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; border-radius: var(--r); } .design-menu summary::-webkit-details-marker { display: none; } .design-menu summary:hover { background: var(--tint); } .design-menu ul { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 180px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14); } .design-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 15px; } .design-menu a:hover { background: var(--tint); } .design-menu a[aria-current] { font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } .user-name { font-weight: 600; font-size: 15px; } .tabs-bar { border-top: 1px solid var(--line); } .tabs-in { max-width: var(--max); margin: 0 auto; padding: 0 24px 0 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; } .tabs { display: flex; overflow-x: auto; } .tab { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 16px; border-bottom: 3px solid transparent; color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; } .tab:hover { color: var(--ink); } .tab[aria-current] { color: var(--ink); border-bottom-color: var(--accent); } .tabs-search { flex: 0 1 340px; min-width: 0; margin: 6px 0 6px 16px; } /* main */ .main { width: 100%; max-width: var(--max); margin: 0 auto; padding: 20px 24px 0; display: flex; flex-direction: column; gap: 20px; } /* footer */ .ft { margin-top: auto; padding-top: 32px; } .ft-in { max-width: var(--max); margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-size: 14px; } .ft-bar { border-top: 1px solid var(--line); background: var(--surface); } .ft a { display: inline-flex; align-items: center; min-height: 44px; } .ft-note { margin-left: auto; color: var(--muted); } @media (max-width: 640px) { .top-in { padding: 6px 8px 6px 16px; flex-wrap: wrap; } .top .menu-btn { display: inline-flex; } /* phone: the tools fold into a menu under the brand row */ .top-tools { display: none; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 12px; padding: 8px 8px 12px 0; } .top-tools.open { display: flex; } .top-tools .seg .btn { flex: 1; } .theme-seg { margin-right: 0; } .theme-seg .btn, .theme-seg .btn:hover { gap: 6px; padding: 0 8px; height: 40px; } .theme-seg .seg-label { display: inline; } .top-tools .design-menu ul { position: static; box-shadow: none; margin-top: 4px; } .brand-name { font-size: 18px; } .tabs-in { padding: 0; } .tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .tab { padding: 0 8px; } .tabs-search { flex: 1 1 100%; margin: 12px 16px; } .main { padding: 16px 16px 0; gap: 16px; } .ft-in { padding: 10px 16px 20px; gap: 0 18px; } .ft-note { margin-left: 0; } h1 { font-size: 26px; } } [hidden] { display: none !important; } /* Design B: reusable components */ /* buttons */ .btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; height: var(--ctl); min-width: var(--ctl); margin: 0; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; } .btn-p, a.btn-p:hover { background: var(--accent); color: var(--accent-ink); } .btn-p:hover { filter: brightness(1.08); } .btn-s { background: var(--surface); color: var(--ink); border-color: var(--field); } .btn-s:hover, a.btn-s:hover { border-color: var(--accent); color: var(--ink); } /* full width buttons sit in narrow columns: long labels wrap instead of running out of the button */ .btn-w { display: flex; width: 100%; height: auto; min-height: var(--ctl); padding-top: 8px; padding-bottom: 8px; white-space: normal; text-align: center; } .btn-sm { height: 36px; min-width: 36px; padding: 0 12px; font-size: 14px; } .btn[aria-current="true"], .btn[aria-current="page"] { background: var(--tint); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .btn svg, .more svg, .ib svg { flex: none; } .ib { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--r); color: var(--ink); } /* form fields */ .lbl { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); } .fld { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: var(--ctl); margin: 0; padding: 0 12px; border: 1px solid var(--field); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; } .fld:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } textarea.fld { height: auto; min-height: 128px; padding: 12px; line-height: 1.5; resize: vertical; } input[type="file"].fld { height: auto; padding: 10px 12px; } .fld::placeholder { color: var(--muted); opacity: 1; } .sel { position: relative; display: block; min-width: 0; } .sel .fld { padding-right: 38px; text-overflow: ellipsis; } .sel::after { content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; } .grp { display: flex; height: var(--ctl); min-width: 0; border: 1px solid var(--field); border-radius: var(--r); background: var(--surface); overflow: hidden; } .grp:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .grp input { -webkit-appearance: none; appearance: none; flex: 1 1 auto; width: 0; min-width: 0; height: 100%; margin: 0; padding: 0 12px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; } .grp input::placeholder { color: var(--muted); opacity: 1; } .grp .btn { height: 100%; border: 0; border-radius: 0; } .grp .btn-s { border-left: 1px solid var(--line); } input::-webkit-search-decoration, input::-webkit-search-cancel-button { -webkit-appearance: none; } .chk { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-top: 10px; font-size: 15px; } .chk input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex: none; } /* vertical forms */ .form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; } .form-wide { max-width: none; } .field { display: flex; flex-direction: column; min-width: 0; } .help { margin-top: 6px; font-size: 13px; color: var(--muted); } .field-err .fld { border-color: var(--err); } .err-msg { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--err); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } /* cards and lists */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .card-pad { padding: 16px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 16px; border-bottom: 1px solid var(--line); min-height: 48px; } .card-head h2 { font-size: 16px; } .more { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; } .list { list-style: none; margin: 0; padding: 0; } .list > li + li { border-top: 1px solid var(--line); } .rl { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; color: var(--ink); text-decoration: none; } .rl:hover { background: var(--tint); color: var(--ink); } .rl-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; } .rl-m { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; } .rl-b { display: block; padding: 12px 16px; } .rl-b .rl-m, .rl-b .rl-t { display: block; } .rl-b .rl-t { margin-top: 3px; } /* page heading */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0 0 4px; padding: 0; list-style: none; font-family: var(--mono); font-size: 13px; color: var(--muted); } .crumbs li + li::before { content: "/"; margin-right: 6px; } .crumbs a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; text-decoration: none; } .crumbs [aria-current] { color: var(--ink); } .ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; } .ph-t { min-width: 0; } .ph-sub { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--muted); } .ph-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* notices */ .note { padding: 12px 16px; border-radius: var(--r); background: var(--tint); font-size: 15px; line-height: 1.5; } .note p + p { margin-top: 8px; } .note h2 { margin-bottom: 6px; font-size: 16px; } .note-ok { background: var(--ok-bg); color: var(--ok); } .note-err { background: var(--err-bg); color: var(--err); } .note .trace { margin-top: 8px; font-family: var(--mono); font-size: 13px; } /* tables */ /* positioned, so absolutely placed content (screen reader labels) is clipped with the table instead of widening the page */ .tbl-wrap { position: relative; overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; font-size: 15px; } .tbl th { padding: 10px 12px; text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .tbl td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; } .tbl th:first-child, .tbl td:first-child { padding-left: 16px; } .tbl th:last-child, .tbl td:last-child { padding-right: 16px; } .tbl tbody tr:hover { background: var(--tint); } .tbl .r { text-align: right; } .tbl .n { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; } .tbl .t { font-weight: 600; color: var(--ink); text-decoration: none; } .tbl a.t:hover { color: var(--accent); } .tbl .sub { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); font-weight: 400; } .empty { padding: 16px; color: var(--muted); } /* pager */ .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--mono); font-size: 14px; } .pager .btn { padding: 0 10px; font-family: var(--mono); } .pager .btn.txt { font-family: var(--sans); } .pager .gap { padding: 0 4px; color: var(--muted); } .pager .off { opacity: 0.45; pointer-events: none; } .pager-info { margin-left: auto; color: var(--muted); } /* stats */ .stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .stats > div { padding: 10px 12px; } .stats dt { font-size: 12px; color: var(--muted); } .stats dd { margin: 2px 0 0; font-family: var(--mono); font-size: 18px; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; } /* horizontal bars (lakes per district) */ .bar { display: grid; grid-template-columns: 170px minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 36px; color: var(--ink); text-decoration: none; font-size: 14px; } .bar:hover { color: var(--accent); } .bar i { display: block; height: 8px; border-radius: 2px; background: var(--accent); } .bar b { text-align: right; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--muted); } .bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* comments and posts */ .posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .post { padding: 12px 16px; } .post-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin-bottom: 4px; } .post-author { font-size: 15px; font-weight: 700; } .post-date { font-family: var(--mono); font-size: 12px; color: var(--muted); } .post-body { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; } .post-first { border-color: var(--accent); } /* article text */ .prose { font-size: 17px; line-height: 1.65; overflow-wrap: break-word; } .prose > * + * { margin-top: 14px; } .prose h1, .prose h2, .prose h3 { margin-top: 24px; font-size: 20px; } .prose ul, .prose ol { padding-left: 24px; } .prose li + li { margin-top: 6px; } .prose img { border-radius: 6px; } .prose table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; font-size: 15px; } .prose td, .prose th { padding: 6px 10px; border: 1px solid var(--line); } .prose blockquote { margin-left: 0; padding-left: 16px; border-left: 3px solid var(--line); color: var(--muted); } .lead { padding: 12px 14px; background: var(--tint); border-radius: var(--r); font-size: 17px; line-height: 1.5; } /* two-column layouts that stack on narrow screens */ .split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } .split-side { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .split-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; align-items: start; } /* side navigation (categories, reports) */ .side-nav { padding: 6px; display: flex; flex-direction: column; gap: 2px; } .side-nav h2 { padding: 8px 12px 4px; font-size: 13px; color: var(--muted); font-weight: 600; } .cat { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 15px; } .cat:hover { background: var(--tint); color: var(--ink); } .cat span { font-family: var(--mono); font-size: 13px; color: var(--muted); } .cat[aria-current] { background: var(--tint); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); } @media (max-width: 640px) { .tbl { font-size: 14px; } .btn { font-size: 16px; } .pager-info { margin-left: 0; flex-basis: 100%; } .stats dd { font-size: 17px; } } /* field_status() output under a field: message */ .field > span[id$="Status"] { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); } .field > span[id$="Status"]:not(.error):not(.success) { display: none; } .field > span[id$="Status"].error { color: var(--err); font-weight: 600; } .field > span[id$="Status"].success { color: var(--ok); } .field-err .fld, .field:has(> span.error) .fld { border-color: var(--err); } .post-meta .delete-comment { margin-left: auto; } .comment-anchor { scroll-margin-top: 80px; } .post-body.folded { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; } .post-more { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } /* moderation list (admins) */ .mod-bar { align-items: center; margin: 12px 0; } .mod-all, .mod-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .mod-check input, .mod-all input { width: 20px; height: 20px; } .mod-src { padding: 1px 8px; border-radius: 999px; background: var(--tint); font-size: 12px; font-weight: 600; } .mod-flag { padding: 1px 8px; border-radius: 999px; background: var(--err-bg); color: var(--err); font-size: 12px; font-weight: 600; } .mod-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; } .mod-tabs a[aria-current="page"] { background: var(--tint); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .mod-body { font-size: 14px; color: var(--muted); } .mod-ip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; } .mod-ip form { margin: 0; } /* Design B: page-specific layout */ .list-plain { list-style: none; margin: 0; padding: 0; } /* home */ .home-top { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; } .home-map-card { flex: 999 1 560px; min-width: 0; margin: 0; padding: 18px; display: flex; flex-direction: column; } .home-map-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; } .home-map-head h1 { font-size: 28px; } .home-map-head h2 { font-size: 20px; } .home-map-head .muted { font-size: 14px; } .home-map { flex: 1; min-height: 460px; border-radius: 6px; overflow: hidden; } .home-map-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; font-size: 14px; } .home-territory { display: flex; gap: 8px; flex: 0 1 300px; min-width: 0; } .home-territory .sel { flex: 1; } .dot-hot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 999px; background: var(--hot); vertical-align: -1px; } /* keep Leaflet's z-index 400–1000 inside the map so dropdowns and overlays cover it */ .leaflet-container { isolation: isolate; } .leaflet-tooltip.map-label { padding: 1px 5px; border: 0; border-radius: 3px; background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); font-family: var(--mono); font-size: 12px; font-weight: 600; } .leaflet-tooltip.map-label::before { display: none; } .home-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .home-search { display: flex; flex-direction: column; gap: 10px; } .home-filters { justify-content: space-between; } .home-filters > span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .home-districts { flex: 1; padding: 6px 16px 12px; } .home-districts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; } .home-districts-head h2 { font-size: 16px; } .home-districts-more summary { cursor: pointer; list-style: none; color: var(--accent); } .home-districts-more summary::-webkit-details-marker { display: none; } .home-districts-more[open] summary { display: none; } @media (max-width: 640px) { .home-map-card { padding: 12px; } .home-map-head h1 { font-size: 24px; } .home-map { min-height: 300px; } .home-side { order: -1; } } /* lake page */ .lake-head .ph-sub .num { white-space: nowrap; } .facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; } .facts > div { padding: 10px 14px; border-bottom: 1px solid var(--line); } .facts > div:nth-child(odd) { border-right: 1px solid var(--line); } .facts dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); } .facts dd { margin: 2px 0 0; font-family: var(--mono); font-size: 18px; font-weight: 600; } .facts dd.hot { color: var(--hot); } .facts-empty { padding: 12px 14px; color: var(--muted); } .layers-card { padding: 12px; } .layers-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .layers-card-head h2 { font-size: 15px; } .strip { display: flex; height: 12px; border-radius: 3px; overflow: hidden; gap: 1px; margin-bottom: 8px; } .lg { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; } .lg:hover { background: var(--tint); color: var(--ink); } .lg i { flex: none; width: 12px; height: 12px; border-radius: 3px; } .lg b { margin-left: auto; font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--muted); } .lg[aria-current] { background: var(--tint); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); } #toggleAllLayers { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; margin-top: 8px; border: 1px solid var(--field); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } #toggleAllLayers:hover { border-color: var(--accent); } .layer { border-top: 4px solid var(--layer, var(--l-other)); overflow: hidden; scroll-margin-top: 12px; } .layer-h { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 8px 16px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; } .layer-h:hover { background: var(--tint); } .layer-h .sw { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--layer, var(--l-other)); } .layer-h .num { font-size: 13px; font-weight: 500; color: var(--muted); } .layer-h::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; } .layerCollapsed.layer-h::after { transform: rotate(-45deg); } .dt { width: 100%; border-collapse: collapse; font-size: 14px; } .dt th { padding: 8px; text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted); } .dt td { padding: 8px; border-top: 1px solid var(--line); vertical-align: top; } .dt th:first-child, .dt td:first-child { padding-left: 16px; } .dt th:last-child, .dt td:last-child { padding-right: 16px; } /* a measurement stays on one line; the admin controls move under it when the column is narrow */ .dt .v { text-align: right; font-family: var(--mono); font-weight: 600; } .dt .v .rec-val, .dt .rec-actions { white-space: nowrap; } .dt .v-text { text-align: left; font-family: var(--sans); } .dt .v-text .rec-val { white-space: normal; } .dt .m { color: var(--muted); } .dt .d { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; } .dt .cont td { border-top: 0; padding-top: 0; } .dt .opt { display: block; font-size: 13px; color: var(--muted); } .dt .del { display: inline-flex; vertical-align: middle; margin-left: 6px; } .dt .del img { width: 16px; height: 16px; } .dt .edit { color: var(--ink); } .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 12px 16px 16px; } .photo { margin: 0; font-size: 13px; color: var(--muted); } .photo a { display: block; } .photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; } .photo figcaption { margin-top: 4px; overflow-wrap: anywhere; } .lake-map { height: 320px; border-radius: var(--r); overflow: hidden; } .lake-desc { font-size: 16px; line-height: 1.6; } /* data entry (admins) on the lake page */ #add-data-container .form { max-width: 640px; } #add-data-form .chk { padding-top: 0; } /* advanced search */ .as-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } .as-side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .as-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .as-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .as-help { font-size: 14px; font-weight: 600; } #param-form .form { max-width: none; } .num-rule { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; } /* journal and forums */ .j-cat { color: var(--hot); font-size: 14px; text-transform: lowercase; } .lc { text-transform: lowercase; } .article { max-width: 760px; } .article-meta { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); } .article-edit { margin: 10px 0 0; } .article-meta div { display: flex; gap: 6px; } .article-meta dd { margin: 0; color: var(--ink); } .article-meta .cat-v { color: var(--hot); font-weight: 600; text-transform: lowercase; } .attachments { margin-top: 24px; } .comments-block { max-width: 760px; display: flex; flex-direction: column; gap: 14px; } .preview { padding: 12px 16px; border: 1px dashed var(--field); border-radius: var(--r); background: var(--surface); } /* auth pages */ .auth { max-width: 520px; display: flex; flex-direction: column; gap: 16px; } #lake-list-table td:first-child { font-family: var(--mono); font-size: 13px; color: var(--muted); } #lake-list-table td:last-child { font-family: var(--mono); font-size: 13px; color: var(--muted); } #lake-list-table td a { font-weight: 600; color: var(--ink); text-decoration: none; } #lake-list-table td a:hover { color: var(--accent); } #lake-list-table td span { display: block; font-size: 14px; color: var(--muted); } #lake-list:not(.hidden) ~ .as-empty-hint { display: none; } .as-tools #addParamLink { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .as-help { display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 640px) { .j-col-cat { display: none; } } /* forum topic rows */ .tp-head, .tp { display: grid; grid-template-columns: minmax(0, 1fr) 64px 132px; gap: 12px; align-items: center; padding: 10px 16px; } .tp-head { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); } .tp-head span:not(:first-child), .tp .n, .tp .d { text-align: right; } .tp { min-height: 56px; color: var(--ink); text-decoration: none; } .tp:hover { background: var(--tint); color: var(--ink); } .tp .t { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } .tp .s { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); } .tp .n, .tp .d { font-family: var(--mono); font-size: 13px; color: var(--muted); } .forum-search { max-width: 520px; } @media (max-width: 640px) { /* the date wraps after the day: "19.10.2026" has to fit the column */ .tp-head, .tp { grid-template-columns: minmax(0, 1fr) 40px 80px; gap: 8px; padding: 10px 12px; } .tp .n, .tp .d { font-size: 12px; } } /* advanced search: once conditions are added, they matter more than the explanation */ #advanced-search:has(#defined-params:not(.hidden)) #description { display: none; } /* home map: list of the selected novads / nearby lakes, "near me" buttons */ .home-map-foot { justify-content: flex-start; } .home-map-foot > .muted { flex: 1 1 220px; } .home-map-list { margin: 12px -18px -18px; border-top: 1px solid var(--line); } .home-map-list .list { margin: 0; padding: 0; list-style: none; } .near-me-btn[aria-pressed="true"] { background: var(--tint); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .near-me-mobile { display: none; } .near-num { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 600; } .near-num::before { display: none; } @media (max-width: 640px) { .near-me-mobile { display: flex; } .home-map-list { margin: 12px -12px -12px; } } @media (max-width: 640px) { .home-top.near-active .home-side { order: 1; } } .leaflet-control.map-stop { margin: 10px 10px 0 0; height: 40px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } .home-map-list .near-prompt { margin: 12px 16px; font-weight: 600; } .home-map-list .near-prompt::before { content: "↖ "; } /* lake page table view (admins) */ .lake-table th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; } .lake-table th[aria-sort="ascending"] button::after { content: " ▲"; } .lake-table th[aria-sort="descending"] button::after { content: " ▼"; } .lake-table td { font-size: 14px; } .lake-table .sw-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--layer, var(--l-other)); } .lake-table .lt-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; vertical-align: middle; } .lake-table .lt-actions { white-space: nowrap; } /* record edit (admins) */ .edit-record { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .record-edit { width: min(560px, calc(100% - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); } .record-edit::backdrop { background: rgba(0, 0, 0, 0.45); } .record-edit .form { max-width: none; } /* lake photos: strip under the title and the full-screen viewer */ .photo-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .photo-strip a, .photo-strip .photo-all { flex: none; width: 120px; height: 120px; border-radius: 8px; overflow: hidden; scroll-snap-align: start; } .photo-strip img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.15s; } .photo-strip a:hover img { transform: scale(1.04); } .photo-strip .photo-all { display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--field); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; } .photo-strip .photo-all:hover { border-color: var(--accent); } /* photos of one layer, at the end of the layer card */ .layer-photos { padding: 12px 16px; border-top: 1px solid var(--line); } .layer-photos .photo-strip a, .layer-photos .photo-strip .photo-all, .layer-photos .photo-strip .photo-add { width: 96px; height: 96px; } .photo-strip .photo-add { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border: 1px dashed var(--field); border-radius: 8px; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; scroll-snap-align: start; } .photo-strip .photo-add:hover { border-color: var(--accent); background: var(--tint); } .gallery-open { overflow: hidden; } .gallery { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0f17; color: #e6ebf2; } .gallery::backdrop { background: #0b0f17; } .gallery[open] { display: flex; flex-direction: column; } .gallery-bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; } .gallery-count { flex: 1; font-size: 14px; color: #9aa8bb; } .gallery-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #e6ebf2; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .gallery-btn:hover { background: rgba(255, 255, 255, 0.16); } .gallery-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows: max-content; gap: 6px; padding: 8px 16px 16px; align-content: start; } .gallery-tile, .gallery-thumb { padding: 0; border: 0; background: #1b2333; cursor: pointer; overflow: hidden; } /* the image carries the square shape; a ratio on the button with a 100% high image collapses the rows on phones */ .gallery-tile { display: block; border-radius: 6px; } .gallery-tile img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .gallery-single { flex: 1; min-height: 0; display: flex; flex-direction: column; } .gallery-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 56px; touch-action: pan-y; } .gallery-img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.15s; user-select: none; -webkit-user-drag: none; } .gallery-img.shown { opacity: 1; } .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .gallery-nav:hover { background: rgba(255, 255, 255, 0.2); } .gallery-nav:disabled { opacity: 0.25; cursor: default; } .gallery-prev { left: 4px; } .gallery-next { right: 4px; } .gallery-spinner { position: absolute; width: 32px; height: 32px; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; animation: gallery-spin 0.8s linear infinite; } @keyframes gallery-spin { to { transform: rotate(360deg); } } .gallery-error { position: absolute; color: #fda29b; } .gallery-caption { padding: 10px 16px 0; max-width: 900px; width: 100%; margin: 0 auto; } .gallery-desc { font-size: 16px; font-weight: 600; } .gallery-meta { margin-top: 2px; font-size: 13px; color: #9aa8bb; } .gallery-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 14px; } .gallery-actions a, .gallery-actions button { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; color: #6cb2f0; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .gallery-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px 14px; } .gallery-thumb { flex: none; width: 64px; height: 64px; border-radius: 6px; opacity: 0.55; } .gallery-thumb.current { opacity: 1; box-shadow: 0 0 0 2px #6cb2f0; } .gallery-thumb:hover { opacity: 1; } @media (max-width: 640px) { .photo-strip a, .photo-strip .photo-all { width: 96px; height: 96px; } .layer-photos .photo-strip a, .layer-photos .photo-strip .photo-all, .layer-photos .photo-strip .photo-add { width: 80px; height: 80px; } .gallery-stage { padding: 0; } .gallery-nav { display: none; } .gallery-thumb { width: 52px; height: 52px; } .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); padding: 8px 12px 16px; } } /* database start page: search, map, report previews, numbers, folded "about" text */ .db-start { display: flex; flex-direction: column; gap: 16px; } .db-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 16px; } .db-h { margin-bottom: 10px; font-size: 20px; } .report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .report-card { min-width: 0; } .report-links { display: none; } .report-card .card-head h3 { font-size: 16px; } .report-card .rl-t { font-size: 14px; } .db-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); } .db-facts > div { border-bottom: 0; border-right: 1px solid var(--line); } .db-facts > div:last-child { border-right: 0; } .db-about > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 4px 16px; cursor: pointer; list-style: none; } .db-about > summary::-webkit-details-marker { display: none; } .db-about > summary h2 { font-size: 16px; } .db-about > summary svg { transform: rotate(90deg); transition: transform 0.15s; } .db-about[open] > summary svg { transform: rotate(-90deg); } .db-about .prose { padding: 4px 16px 18px; border-top: 1px solid var(--line); } @media (max-width: 900px) { .db-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .db-facts > div:nth-child(3n) { border-right: 0; } .db-facts > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); } } @media (max-width: 640px) { .db-search { grid-template-columns: minmax(0, 1fr); } /* phones: report names as links in two columns instead of the preview cards */ .report-cards { display: none; } .report-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .report-links .cat { padding-top: 6px; padding-bottom: 6px; line-height: 1.3; } } /* advanced search conditions: the table fits its narrow column, so the delete buttons stay visible */ #defined-params-table { table-layout: fixed; } #defined-params-table th { white-space: normal; overflow-wrap: break-word; } #defined-params-table td { overflow-wrap: break-word; hyphens: auto; } #defined-params-table th:first-child { width: 26%; } #defined-params-table th.delete-row { width: 60px; padding-left: 4px; } #defined-params-table td.delete-row { padding-left: 4px; } /* "Help" opens the explanation even when conditions have hidden it */ #advanced-search:has(#defined-params:not(.hidden)) #description.is-open { display: block; } /* Design B: class names produced by legacy JS widgets and by classic templates that have no design-B override (they fall back to tmpl/screens). */ /* classic page heading pieces */ .breadcrumbs ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 13px; color: var(--muted); } .breadcrumbs a { text-decoration: none; } .heading-decoration { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; } .heading-links { font-size: 14px; font-weight: 600; } .alert, .status-messages, .actionStatus, .actionError, .lakeDescription, .lakeHiddenRecords { padding: 12px 16px; border-radius: var(--r); background: var(--tint); line-height: 1.5; } .alert p + p, .status-messages p + p { margin-top: 8px; } .alert h2 { margin-bottom: 6px; font-size: 16px; } .actionError { background: var(--err-bg); color: var(--err); } .actionStatus { background: var(--ok-bg); color: var(--ok); } .clearfix::after { content: ""; display: table; clear: both; } .clearer { clear: both; height: 0; overflow: hidden; } /* classic results lists and tables */ ul.results, .references-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } ul.results > li, .references-list > li { padding: 12px 16px; } ul.results > li + li, .references-list > li + li { border-top: 1px solid var(--line); } ul.results h2, .references-list h2 { font-size: 16px; } ul.results p, .references-list p { margin-top: 4px; color: var(--muted); font-size: 15px; } .references-list .item-id { float: left; width: 32px; font-family: var(--mono); color: var(--muted); } .references-list .item-data { margin-left: 32px; } div.results > table, .results table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); font-size: 15px; } .results th { padding: 10px 12px; text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted); } .results td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; } .results tr.alternate td { background: transparent; } .item-count-container { font-family: var(--mono); font-size: 13px; color: var(--muted); } .norecords, .list-empty { padding: 16px; color: var(--muted); } #about h2 { margin: 20px 0 6px; } #about .logo-small { float: right; max-width: 120px; margin: 0 0 12px 16px; } #about p { line-height: 1.6; } /* advanced search: rows built by AdvancedSearchManager */ .delete-row { width: 1%; text-align: center; } a.delete-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--field); border-radius: var(--r); color: var(--ink); font-family: var(--mono); font-weight: 600; text-decoration: none; } a.delete-link:hover { border-color: var(--err); color: var(--err); } .addLink > a, .addLinkHideForm > a { display: inline-flex; align-items: center; gap: 8px; height: var(--ctl); padding: 0 16px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; } .addLink > a:hover { color: var(--accent-ink); filter: brightness(1.08); } .addLinkHideForm > a { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--field); } .addLinkInProgress > a { display: inline-flex; align-items: center; height: var(--ctl); padding: 0 16px 0 40px; border-radius: var(--r); background: var(--tint) url(/resources/img/all/icons/in_progress.gif) no-repeat 14px center; color: var(--muted); font-weight: 600; text-decoration: none; pointer-events: none; } .addLinkInProgress .help, .addLinkHideForm .help { display: none; } /* status toast used by advanced search and data entry */ #statusBox { position: fixed; left: 50%; bottom: 20px; z-index: 50; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--r); background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 600; visibility: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); } /* pager built by Pager.js */ .table-helper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; } .table-helper > br { display: none; } .table-helper-statistics { order: 2; margin-left: auto; font-family: var(--mono); font-size: 14px; color: var(--muted); } .table-helper-navigation { display: flex; flex-wrap: wrap; gap: 6px; } .table-helper-navigation a, .table-helper-navigation span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--field); border-radius: var(--r); background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 14px; font-weight: 600; text-decoration: none; } .table-helper-navigation a:hover { border-color: var(--accent); color: var(--ink); } .table-helper-navigation a.active { background: var(--tint); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .table-helper-navigation span.disabled { opacity: 0.45; } .table-helper-navigation span.separator { border: 0; background: none; min-width: 0; } /* classic forms (screens without a design-B override) */ .horizontalForm fieldset, .verticalForm fieldset { margin: 0; padding: 0; border: 0; } .horizontalForm label, .verticalForm label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); } .horizontalForm .textbox, .horizontalForm textarea, .horizontalForm select, .verticalForm .textbox, .verticalForm textarea { display: block; width: 100%; max-width: 520px; min-height: var(--ctl); padding: 8px 12px; border: 1px solid var(--field); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; } .horizontalForm br { display: none; } .field-error .textbox, .field-error textarea { border-color: var(--err); } .error-message, p.error { color: var(--err); font-weight: 600; } .explain { font-size: 13px; color: var(--muted); } /* leaflet controls follow the theme */ .leaflet-container { font-family: var(--sans); background: var(--tint); } .leaflet-container a { color: var(--accent); } .leaflet-bar a, .leaflet-bar a:hover { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); } .leaflet-control-attribution { background: rgba(255, 255, 255, 0.8) !important; color: #475467; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--ink); } :root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.75) invert(1) contrast(0.9) hue-rotate(200deg) saturate(0.4); } :root[data-theme="dark"] .leaflet-control-attribution { background: rgba(17, 26, 43, 0.85) !important; color: #9aa8bb; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane { filter: brightness(0.75) invert(1) contrast(0.9) hue-rotate(200deg) saturate(0.4); } :root:not([data-theme="light"]) .leaflet-control-attribution { background: rgba(17, 26, 43, 0.85) !important; color: #9aa8bb; } } /* lightbox */ #overlay { background-color: #000; } #outerImageContainer, #imageDataContainer { background-color: var(--surface) !important; } #imageData { color: var(--ink); font-family: var(--sans); } #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url(/resources/img/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(/resources/img/lightbox/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/resources/img/lightbox/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; } #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } /* Design "Aalto-A": type and design B's components restyled (cards, buttons, lists, tables). */ @font-face { font-family: "Jost"; src: url(/resources/fonts/aalto-a/Jost-wght.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Familjen Grotesk"; src: url(/resources/fonts/aalto-a/FamiljenGrotesk-wght.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } .aa { font-size: 17px; } .aa a { text-decoration-color: var(--aa-blue); text-underline-offset: 3px; } .aa a:hover { color: var(--aa-blue-2); } .aa h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 300; letter-spacing: 0; line-height: 1.1; } .aa h2 { font-size: 20px; font-weight: 500; } .aa h3 { font-weight: 500; } .aa .num { font-variant-numeric: tabular-nums; } .aa .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* B components, Aalto finish */ .aa .card { border-color: var(--line); border-radius: var(--r); box-shadow: none; } .aa .card-head h2, .aa .ph-t { font-weight: 400; } .aa .btn { border-radius: var(--r); font-family: var(--sans); font-weight: 500; } .aa .btn-p { background: var(--aa-deep); border-color: var(--aa-deep); color: #FFFFFF; letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; } .aa .btn-p:hover { background: var(--aa-blue-2); border-color: var(--aa-blue-2); color: #FFFFFF; } /* the filled link button of the old forms ("Add parameter"): keep its text white on hover */ .aa .addLink > a:hover { background: var(--aa-blue-2); color: #FFFFFF; filter: none; } .aa .fld, .aa input[type="search"], .aa input[type="text"], .aa input[type="email"], .aa input[type="password"], .aa textarea, .aa select { font-family: var(--sans); } .aa .tbl th { font-weight: 500; letter-spacing: 0.04em; } .aa .side-nav h2, .aa .lbl { letter-spacing: 0.04em; } .aa .cat[aria-current] { box-shadow: inset 3px 0 0 var(--aa-lily); } .aa .pager a[aria-current], .aa .pager .cur { background: var(--aa-deep); color: #FFFFFF; } /* section heading used by Aalto screens */ .aa .aa-eyebrow { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aa-eyebrow); } .aa .aa-h1 { margin: 0; font-weight: 300; font-size: clamp(40px, 5vw, 68px); line-height: 1.04; } .aa .aa-h2 { margin: 0; font-weight: 300; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; } .aa-lead { margin: 0; font-size: 19px; color: var(--aa-text-2); } .aa-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .aa-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; background: var(--aa-deep); color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .aa .aa-btn:hover { background: var(--aa-blue-2); color: #FFFFFF; } .aa-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--ink); } .aa .aa-pill:hover { background: var(--aa-light); color: var(--ink); } /* striped "water band": the edge of a search desk or a section */ .aa-band { height: 10px; background: repeating-linear-gradient(90deg, #5B9AAE 0 4px, #4C8BA0 4px 6px, #5B9AAE 6px 13px, #8FC0CC 13px 15px); } /* Design "Aalto-A": page frame — ripple band, header, phone search and menu, bottom tabs, footer. */ .aa-top { position: relative; background: var(--bg); border-bottom: 1px solid var(--line); } .aa-ripples { display: block; width: 100%; height: var(--aa-ripple-h); background: var(--aa-pale); } /* the ripples drift at different speeds; one loop moves a path by one full wave (240 units: each 120-unit curve bends the other way from the one before), so the restart lines up. Each path is long enough to cover the band through the whole move. */ .aa-ripples path { animation: aa-drift 26s linear infinite; } .aa-ripples .aa-ripple-2 { animation-duration: 34s; } .aa-ripples .aa-ripple-3 { animation-duration: 42s; } .aa-ripples .aa-ripple-4 { animation-duration: 51s; } .aa-ripples .aa-ripple-5 { animation-duration: 62s; } @keyframes aa-drift { to { transform: translateX(240px); } } /* a pike under the ripples: glides in, lurks, darts and leaves; then the water is empty for a while */ .aa-pike { position: absolute; top: 0; left: 0; right: 0; height: var(--aa-ripple-h); overflow: hidden; pointer-events: none; color: #2A5F73; } .aa-pike svg { position: absolute; left: 0; top: 0; opacity: 0.42; transform: translate(-120px, 14px); animation: aa-pike 52s infinite; } @keyframes aa-pike { 0% { transform: translate(-120px, 15px); animation-timing-function: ease-out; } 20% { transform: translate(27vw, 11px); animation-timing-function: ease-in-out; } 33% { transform: translate(30vw, 13px) rotate(-3deg); animation-timing-function: cubic-bezier(0.5, 0, 0.15, 1); } 38% { transform: translate(57vw, 8px) rotate(0deg); animation-timing-function: ease-out; } 56% { transform: translate(66vw, 13px); animation-timing-function: ease-in; } 72%, 100% { transform: translate(104vw, 16px); } } @media (prefers-reduced-motion: reduce) { .aa-ripples path { animation: none; } .aa-pike { display: none; } } .aa-top-in { max-width: var(--max); margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 12px 32px; } .aa-brand { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--ink); text-decoration: none; } .aa .aa-brand:hover { color: var(--ink); } .aa-brand span { font-family: var(--display); font-weight: 700; font-size: 27px; letter-spacing: -0.02em; } .aa-nav { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; } .aa-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; } .aa .aa-nav a:hover { color: var(--aa-blue-2); } .aa-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--aa-lily); text-decoration-thickness: 3px; text-underline-offset: 10px; } .aa-tools { display: flex; align-items: center; gap: 4px 10px; } .aa-langs { display: flex; gap: 2px; } .aa-langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-decoration: none; } .aa-langs a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--aa-lily); text-decoration-thickness: 2px; text-underline-offset: 6px; } /* signed in: the user's name opens a small menu (moderation, log out), built like the design menu */ .aa-user-menu summary span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .aa-tools .design-menu summary { font-weight: 500; letter-spacing: 0.06em; } .aa-phone { display: none; margin-left: auto; gap: 6px; } .aa-round { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; } .aa-round-dark { border: 0; background: var(--aa-deep); color: #F3F8F8; } .aa-round .menu-close, .aa-round[aria-expanded="true"] .menu-open { display: none; } .aa-round[aria-expanded="true"] .menu-close { display: inline; } /* phone search panel */ .aa-search { display: none; position: fixed; z-index: 50; left: 0; right: 0; top: 0; max-height: 100vh; overflow-y: auto; padding: 16px; background: var(--surface); border-bottom: 2px solid var(--aa-deep); box-shadow: 0 12px 24px rgba(19, 48, 58, 0.12); } .aa-search.open { display: block; } .aa-search form { display: flex; gap: 8px; } .aa-search input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 12px; border: 2px solid var(--aa-blue); border-radius: 4px; background: #FFFFFF; color: var(--ink); font: inherit; font-size: 19px; } .aa-search-more { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; background: var(--aa-pale); color: var(--ink); text-decoration: none; } .aa-search-more > span { display: flex; flex-direction: column; } .aa-search-more b { font-weight: 500; } .aa-search-more span span { font-size: 14px; color: var(--muted); } /* phone menu: full screen, deep water */ .aa-menu { display: none; } .aa-menu.open { display: flex; flex-direction: column; position: fixed; z-index: 50; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; padding: 8px 16px 32px; background: var(--aa-deep); color: #F3F8F8; } .aa-menu nav a { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid #24505F; color: #F3F8F8; text-decoration: none; } .aa .aa-menu nav a:hover { color: #FFFFFF; } .aa-menu nav a > span { flex: 1 1 auto; display: flex; flex-direction: column; } .aa-menu nav b { font-size: 28px; font-weight: 300; line-height: 1.15; } .aa-menu nav a[aria-current] b { text-decoration: underline; text-decoration-color: var(--aa-lily); text-underline-offset: 6px; } .aa-menu nav span span { font-size: 14px; color: #B9D0D6; } .aa-menu-tools { display: flex; align-items: center; gap: 10px; padding: 22px 0 6px; } .aa-menu-tools .aa-btn { flex: 1 1 0; min-height: 48px; } .aa-btn-light { background: #F3F8F8; color: var(--aa-deep); } .aa .aa-btn-light:hover { background: #FFFFFF; color: var(--aa-deep); } .aa-btn-line { background: transparent; box-shadow: inset 0 0 0 1px var(--aa-blue); color: #F3F8F8; } .aa-menu-links { display: flex; flex-direction: column; padding-top: 10px; } .aa-menu-links a { display: flex; align-items: center; min-height: 44px; color: #F3F8F8; text-decoration: none; } .aa-menu-links a[aria-current] { color: var(--aa-lily); } .aa-menu .user-name { color: #F3F8F8; } html.aa-locked { overflow: hidden; } /* main: design B's spacing, except on Aalto's own pages, which space their sections themselves */ .aa-main { padding-top: 28px; padding-bottom: 48px; } /* (a screen's name isn't enough: search results also load through the home page's URL) */ .aa-main:has(> .aa-home-hero, > .aa-topi) { padding-top: 0; padding-bottom: 0; gap: 0; } /* footer */ .aa-ft { margin-top: auto; background: var(--aa-deep); color: #E3EDEF; } .aa-ft-in { max-width: var(--max); margin: 0 auto; padding: 32px 32px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; } .aa-ft-brand { display: flex; align-items: center; gap: 12px; } .aa-ft-brand > span { display: flex; flex-direction: column; line-height: 1.25; } .aa-ft-brand b { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } .aa-ft-brand span span { font-size: 14px; color: #B9D0D6; } .aa-ft-links { display: flex; flex-wrap: wrap; gap: 0 22px; } .aa-ft-links a { display: inline-flex; align-items: center; min-height: 44px; color: #E3EDEF; font-size: 14px; } .aa .aa-ft-links a:hover { color: #FFFFFF; } .aa-ft-note { color: #B9D0D6; font-size: 14px; } /* bottom tab bar: phones only */ .aa-tabs { display: none; } @media (max-width: 900px) { /* the header sticks with its ripple band scrolled away, so search and the menu are always one tap away */ .aa-top { position: sticky; z-index: 55; top: calc(-1 * var(--aa-ripple-h)); } .aa-top-in { padding: 12px 16px; background: var(--bg); } .aa-nav, .aa-tools { display: none; } .aa-phone { display: flex; } .aa-brand svg { width: 40px; height: 40px; } .aa-brand span { font-size: 24px; } .aa-tabs { display: flex; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; padding: 2px 4px calc(6px + env(safe-area-inset-bottom)); background: #FFFFFF; border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(19, 48, 58, 0.08); } .aa-tabs a { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; color: var(--muted); font-size: 12px; font-weight: 500; text-decoration: none; } .aa-tabs a[aria-current] { color: var(--ink); font-weight: 600; } .aa-tabs a[aria-current]::before { content: ""; position: absolute; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--aa-lily); } .aa-tabs a[aria-current] svg { stroke-width: 2.2; } body.aa { padding-bottom: calc(var(--aa-tabs-h) + env(safe-area-inset-bottom)); } .aa-ft-in { padding: 28px 16px 32px; } } /* Design "Aalto-A": home page (tmpl/themes/aalto-a/screens/Index.php) and the restyled lake map. */ .aa-home-hero { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 40px 0 40px; text-align: center; } .aa-db-lead { max-width: 760px; } /* lake map: the country as lake dots inside round skylight rings; the street map shows once zoomed in (.is-bare is off) */ .aa-home-map { width: 100%; max-width: 1000px; } .aa .home-map-card.aa-map { flex: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } .aa-map-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .aa-map-side { display: flex; flex-direction: column; align-items: center; gap: 22px; min-width: 0; } .aa-map-stage { position: relative; width: 100%; aspect-ratio: 1000 / 640; } .aa-map-rings { position: absolute; left: 50%; top: 50%; height: 100%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, #F4FAFB 0 62.4%, #E6F0F2 62.6% 63.1%, #F4FAFB 63.3% 81.9%, #DDEAED 82.1% 82.6%, #F4FAFB 82.8% 99.3%, #CFE0E4 99.5% 100%); } .aa .home-map { position: absolute; inset: 0; min-height: 0; border-radius: 18px; background: transparent; text-align: left; } .aa .home-map:not(.is-bare) { background: var(--aa-light); box-shadow: 0 0 0 1px var(--line); } /* Leaflet stacks its panes and controls at z-index 400–1000; keep that inside the map so the phone menu, search panel, sticky header and bottom tabs (z-index 45–55) cover it */ .aa .leaflet-container { isolation: isolate; } .aa .leaflet-tooltip.map-label { padding: 0 4px; border-radius: 0; background: var(--aa-light); box-shadow: none; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .aa .home-map:not(.is-bare) .leaflet-tooltip.map-label { background: #FFFFFF; box-shadow: 0 0 0 1px var(--line); } /* the card that opens on a lake: white, a lily line on top, the name as the link, the value beneath */ .aa .leaflet-popup { margin-bottom: 14px; } .aa .leaflet-popup-content-wrapper { padding: 0; border-radius: 14px; border-top: 3px solid var(--aa-lily); background: #FFFFFF; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 12px 28px rgba(19, 48, 58, 0.16); } .aa .leaflet-popup-content { margin: 0; padding: 14px 44px 14px 18px; min-width: 150px; font-family: var(--sans); font-size: 14px; line-height: 1.3; } .aa .leaflet-popup-tip { background: #FFFFFF; box-shadow: 1px 1px 0 var(--line); } .aa .map-pop { display: flex; flex-direction: column; gap: 4px; } .aa .map-pop a { color: var(--aa-deep); font-size: 18px; font-weight: 500; text-decoration: none; } .aa .map-pop a::after { content: "\2192"; display: inline-block; margin-left: 8px; color: var(--aa-blue-2); transition: transform 0.15s; } .aa .map-pop a:hover { color: var(--aa-blue-2); } .aa .map-pop a:hover::after { transform: translateX(3px); } .aa .map-pop-sep { display: none; } .aa .map-pop-x { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .aa .leaflet-container a.leaflet-popup-close-button { top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; font: 400 20px/1 Arial, sans-serif; text-indent: 0; color: var(--muted); } .aa .leaflet-container a.leaflet-popup-close-button:hover { background: var(--aa-pale); color: var(--aa-deep); } /* the name shown while pointing at a dot */ .aa .leaflet-tooltip:not(.map-label):not(.near-num) { padding: 4px 10px; border: 0; border-radius: 999px; background: var(--aa-deep); color: #F3F8F8; box-shadow: none; font-family: var(--sans); font-size: 13px; font-weight: 500; } .aa .leaflet-tooltip-top:not(.map-label):not(.near-num)::before { border-top-color: var(--aa-deep); } .aa .home-map .leaflet-bar { border: 1px solid var(--line); border-radius: 999px; overflow: hidden; box-shadow: none; } .aa .home-map.is-bare .leaflet-control-attribution { background: transparent !important; } .aa-map-cap { font-size: 14px; color: var(--muted); text-align: center; } /* the highlighted lakes: numbered lily pins, as on the top lakes page */ .aa .map-pin { display: flex; align-items: center; justify-content: center; border: 2px solid var(--aa-deep); border-radius: 50%; background: var(--map-hot); color: var(--aa-deep); font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); } .aa .aa-pin-key { display: inline-flex; width: 20px; height: 20px; margin: 0 6px 0 4px; font-size: 11px; box-shadow: none; vertical-align: baseline; } .aa .near-num { color: var(--aa-deep); font-family: var(--sans); font-size: 12px; } .aa .leaflet-control.map-stop, .aa .leaflet-control.map-reset { height: 36px; margin: 10px 10px 0 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; color: var(--ink); box-shadow: none; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } .aa .leaflet-control.map-stop:hover, .aa .leaflet-control.map-reset:hover { background: var(--aa-light); } .aa-map-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 28px; font-size: 15px; } .aa-map-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-decoration-color: var(--aa-blue); text-underline-offset: 3px; cursor: pointer; } .aa-map-btn:hover, .aa-map-btn[aria-pressed="true"] { color: var(--aa-blue-2); } .aa .aa-map-btn[aria-pressed="true"] { border: 0; background: none; box-shadow: none; } /* home page: the map with the title, search desk and numbers in a column beside it */ .aa-home-split { padding: 40px 0 48px; text-align: left; } .aa-home-split .aa-home-map { max-width: none; } .aa .home-map-card.aa-map-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); align-items: center; gap: 16px 48px; } .aa-map-split .aa-map-side { align-items: stretch; gap: 20px; } .aa-map-split .aa-h1 { font-size: clamp(36px, 3.7vw, 54px); } /* the front page title stays on one line over the search box */ @media (min-width: 901px) { .aa-map-split .aa-h1-line { font-size: clamp(30px, 3.2vw, 46px); white-space: nowrap; } } .aa-map-split .aa-map-tools { justify-content: flex-start; gap: 6px 20px; } .aa-map-split .aa-desk-in { padding: 18px 20px; } .aa-map-split .aa-db-lead { font-size: 17px; } .aa-map-split .aa-stats { justify-content: flex-start; flex-wrap: nowrap; } /* a little in from the search box's edge */ .aa-map-split .aa-map-tools, .aa-map-split .aa-stats { margin-left: 12px; } .aa-map-split .aa-stats > div { padding: 0 clamp(12px, 1.5vw, 22px); } .aa-map-split .aa-stats > div:first-child { padding-left: 0; } .aa-map-split .aa-stats dd { font-size: clamp(24px, 2.2vw, 32px); white-space: nowrap; } .aa-map-split .home-map-list { grid-column: 1 / -1; } .aa .home-map-list { margin: 6px 0 0; border: 1px solid var(--line); background: var(--surface); text-align: left; } /* search desk: a water band over a white desk */ .aa-desk { width: 100%; max-width: 880px; margin: 0; text-align: left; } .aa-desk .aa-band { border-radius: 6px 6px 0 0; } .aa-desk-in { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-top: 0; } .aa-desk-field { flex: 1 1 300px; display: flex; flex-direction: column; gap: 6px; } .aa-desk-field label { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .aa-desk-field input { min-height: 48px; padding: 8px 2px; border: 0; border-bottom: 2px solid var(--aa-deep); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 20px; } .aa-desk .aa-btn { min-height: 50px; padding: 0 30px; } .aa-desk-more { flex: 1 1 100%; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; } .aa-stats { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; } .aa-stats > div { padding: 0 32px; border-right: 1px solid #B9D3DA; } .aa-stats > div:last-child { border-right: 0; } .aa-stats dd { margin: 0; font-size: 40px; font-weight: 300; line-height: 1.1; } .aa-stats dt { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* lakes by novads: every territory with its lake count; the bar is the count against the largest */ .aa-districts { display: flex; flex-direction: column; gap: 20px; padding: 36px 0 40px; border-top: 1px solid var(--line); } .aa-districts-head, .aa-home-tops-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; } .aa-districts-head p { margin: 0; font-size: 15px; color: var(--muted); } .aa-districts-list { list-style: none; margin: 0; padding: 0; columns: 4 250px; column-gap: 36px; } .aa-districts-list li { break-inside: avoid; } .aa-districts-list a { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0 9px; border-bottom: 1px solid #E3EDEF; color: var(--ink); font-size: 16px; text-decoration: none; } .aa .aa-districts-list a:hover span { color: var(--aa-blue-2); text-decoration: underline; } .aa-districts-list b { font-weight: 600; } .aa-districts-list i { position: absolute; left: 0; bottom: -1px; height: 3px; background: var(--aa-blue); } .aa-districts-all { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; text-decoration-color: var(--aa-blue); text-underline-offset: 3px; cursor: pointer; } .aa-districts-all, .aa-districts-all[hidden] { display: none; } /* home page: the ten novadi with most lakes, two rows of five */ .aa-districts-short { padding: 30px 0 36px; } .aa-districts-short .aa-districts-list { columns: 5 190px; } .aa-districts-short > .aa-more { align-self: flex-start; } /* top lake previews: two charts side by side */ .aa-home-tops { display: flex; flex-direction: column; gap: 20px; padding: 34px 0 34px; border-top: 1px solid var(--line); } .aa-home-tops-row { display: flex; flex-wrap: wrap; gap: 24px; } .aa-panel { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; background: var(--surface); border: 1px solid var(--line); } .aa-panel h3 { font-size: 22px; font-weight: 500; } .aa-panel h3 a { color: var(--ink); text-decoration: none; } .aa .aa-panel h3 a:hover { color: var(--aa-blue-2); text-decoration: underline; } .aa-panel p { margin: 0; color: var(--muted); font-size: 15px; } .aa-panel-fig { width: 100%; max-width: 560px; margin: auto; } /* database start page: report previews, numbers, about */ .aa-reports { display: flex; flex-direction: column; gap: 24px; padding: 36px 0 40px; border-top: 1px solid var(--line); } .aa-reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 20px 24px; } .aa-report { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 8px; background: var(--surface); border: 1px solid var(--line); } .aa-report h3 { margin: 0; font-size: 19px; font-weight: 500; } .aa-report h3 a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--ink); text-decoration: none; } .aa-report h3 a::after { content: "→"; color: var(--aa-blue-2); } .aa .aa-report h3 a:hover { color: var(--aa-blue-2); } .aa-report .aa-rank li:last-child { border-bottom: 0; } .aa-db-stats { gap: 24px 0; padding: 44px 0; border-top: 1px solid var(--line); } .aa-db-about { padding: 14px 0 64px; border-top: 1px solid var(--line); } .aa-db-about summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; cursor: pointer; list-style: none; } .aa-db-about summary::-webkit-details-marker { display: none; } .aa-db-about summary h2 { margin: 0; font-size: 22px; font-weight: 500; } .aa-db-about[open] summary svg { transform: rotate(180deg); } .aa-db-about .prose { max-width: 760px; padding-top: 8px; } /* latest photos: one per lake */ .aa-home-photos { display: flex; flex-direction: column; gap: 20px; padding: 0 0 44px; } .aa-photos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .aa-photos a { display: flex; flex-direction: column; gap: 6px; color: var(--ink); font-size: 15px; line-height: 1.25; text-decoration: none; } .aa-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--aa-pale); } .aa .aa-photos a:hover span { color: var(--aa-blue-2); text-decoration: underline; } /* journal and discussions */ .aa-home-cols { display: flex; flex-wrap: wrap; gap: 32px; padding: 8px 0 72px; border-top: 1px solid var(--line); } .aa-home-cols > section { flex: 1 1 420px; min-width: 0; } .aa-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0 6px; } .aa-posts, .aa-topics { margin: 0; padding: 0; list-style: none; } .aa-posts a { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; } .aa-post-meta { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; } .aa-post-title { font-size: 21px; line-height: 1.25; } .aa .aa-posts a:hover .aa-post-title, .aa .aa-topics a:hover .aa-topic-t > span:first-child { color: var(--aa-blue-2); text-decoration: underline; } .aa-topics a { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; } .aa-topic-n { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--aa-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; } .aa-topic-t { display: flex; flex-direction: column; min-width: 0; font-size: 17px; } /* discussion topic: posts in a reading column, search and the reply form beside them */ .aa-thread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: start; gap: 20px 48px; margin-top: 20px; } .aa-thread-note { grid-column: 1 / -1; } .aa-thread-posts { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .aa-thread-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .aa-thread .forum-search { max-width: none; } .aa-thread .posts { gap: 12px; } .aa-thread .post { padding: 16px 20px 18px; } .aa-thread .post-meta { margin-bottom: 8px; } .aa-thread .post-body { font-size: 17px; line-height: 1.65; } /* moderation list: the tick box in its own column, the texts in line beside it */ .aa .mod-bar { gap: 16px; margin: 20px 0 16px; padding-left: 22px; } .aa .mod-all { gap: 14px; } .aa .mod-list { gap: 12px; } .aa .mod-list .post { position: relative; padding: 18px 24px 18px 58px; } .aa .mod-list .mod-check { position: absolute; left: 22px; top: 18px; } .aa .mod-list .post-meta { align-items: center; gap: 4px 12px; min-height: 24px; margin-bottom: 8px; } .aa .mod-list .mod-src, .aa .mod-list .mod-flag { padding: 2px 10px; } .aa .mod-list .mod-body { font-size: 15px; line-height: 1.6; } .aa .mod-list .mod-ip { gap: 10px; margin-top: 14px; } /* journal article: a narrower reading column, larger text and more air between the parts */ .aa .split:has(> .article) { gap: 32px 64px; padding-top: 12px; } .aa .article { max-width: 700px; gap: 28px; } .aa .split:has(> .article) .split-side { flex: 1 1 280px; max-width: 360px; } /* editors: the edit button sits at the right end of the breadcrumb row, clear of the title */ .aa .article-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; } .aa .article-head .crumbs { flex: 1 1 auto; margin-bottom: 0; } .aa .article-head .article-edit { order: 1; margin: 0; } .aa .article-head .article-meta { order: 2; flex: 0 0 100%; margin-top: 16px; } .aa .article-head h1 { order: 3; flex: 0 0 100%; } .aa .article-meta { margin: 0 0 14px; gap: 6px 22px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } .aa .article-meta .cat-v { text-transform: uppercase; } .aa .article h1 { line-height: 1.15; } .aa .article .lead { padding: 4px 0 4px 20px; border-left: 3px solid var(--aa-lily); border-radius: 0; background: none; font-size: 21px; font-weight: 300; line-height: 1.5; color: var(--ink); } .aa .article .prose { font-size: 19px; line-height: 1.7; } .aa .article .prose > * + * { margin-top: 22px; } .aa .article .prose h1, .aa .article .prose h2, .aa .article .prose h3 { margin-top: 36px; font-size: 24px; font-weight: 400; line-height: 1.25; } .aa .article .prose li + li { margin-top: 8px; } .aa .article .prose a { text-underline-offset: 3px; } @media (max-width: 900px) { .aa .mod-bar { padding-left: 16px; } .aa .mod-list .post { padding: 14px 16px 14px 48px; } .aa .mod-list .mod-check { left: 16px; top: 14px; } .aa-thread { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 12px; } .aa-thread-side { position: static; } .aa-thread .post { padding: 14px 16px; } .aa .split:has(> .article) { gap: 28px; padding-top: 0; } .aa .split:has(> .article) .split-side { max-width: none; } .aa .article { gap: 22px; } .aa .article .lead { font-size: 19px; padding-left: 14px; } .aa .article .prose { font-size: 18px; } .aa-home-hero { padding: 24px 0 32px; gap: 16px; } .aa-map-stage { aspect-ratio: 1000 / 720; } /* home page: title, map, then search, tools and numbers */ .aa-home-split { padding: 24px 0 32px; } .aa .home-map-card.aa-map-split { display: flex; flex-direction: column; gap: 16px; } .aa-map-split .aa-map-side { display: contents; } .aa-map-split .aa-h1, .aa-map-split .aa-db-lead { order: -1; text-align: center; } .aa-map-split .aa-map-tools, .aa-map-split .aa-stats { justify-content: center; margin-left: 0; } .aa-map-split .home-map-list { order: 1; } .aa .map-pin { font-size: 12px; } .aa-districts-short .aa-districts-list { columns: 1; } .aa-home-photos { padding-bottom: 32px; } .aa-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; } .aa-photos a { font-size: 13px; } .aa .home-map { border-radius: 12px; } .aa .leaflet-tooltip.map-label { font-size: 11px; letter-spacing: 0.04em; } .aa-stats { flex-wrap: nowrap; text-align: center; } .aa-stats > div, .aa-map-split .aa-stats > div, .aa-map-split .aa-stats > div:first-child { padding: 0 12px; } .aa-stats dd, .aa-map-split .aa-stats dd { font-size: 24px; white-space: nowrap; } .aa-stats dt { font-size: 11px; } .aa-panel { padding: 18px 16px; } .aa-home-tops, .aa-districts, .aa-reports { padding: 24px 0 28px; } .aa-districts-list { columns: 1; } .aa-districts.is-short .aa-district-extra { display: none; } .aa-districts-all { display: inline-flex; } /* reports: just the names, as on design B's phones */ .aa-reports-grid { grid-template-columns: 1fr; gap: 0; } .aa-report { padding: 0; border-width: 0 0 1px; background: none; } .aa-report h3 a { min-height: 52px; } .aa-report .aa-rank { display: none; } .aa-db-stats { flex-wrap: wrap; } .aa-db-stats > div { flex: 1 1 30%; padding: 0 8px; border-right: 0; } } /* advanced search: quick filters over the condition builder, and the parameter search box */ .aa-qf { margin: 0 0 20px; } .aa-qf .aa-band { border-radius: 6px 6px 0 0; } .aa-qf-in { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 22px; background: var(--surface); border: 1px solid var(--line); border-top: 0; } .aa-qf-h, .aa-as-h { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aa-eyebrow, var(--muted)); } .aa-qf-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; } .aa-qf-row .field { margin: 0; padding: 0; border: 0; } .aa-qf-row legend.lbl { padding: 0; } .aa-qf-wide { flex: 1 1 200px; max-width: 280px; } .aa-qf-range { flex: 0 1 240px; min-width: 200px; } .aa-qf-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; color: var(--muted); } .aa-qf-pair .fld[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); } .aa-qf-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; } .aa-qf-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--aa-deep); } .aa-find { position: relative; } .aa-find-note { margin: 8px 0 0; font-size: 14px; color: var(--muted); } .aa-find-list { display: flex; flex-direction: column; max-height: 360px; margin-top: 8px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); background: #FFFFFF; } .aa-find-list[hidden], .aa-find-note[hidden] { display: none; } .aa-find-group { display: flex; flex-direction: column; } .aa-find-group + .aa-find-group { border-top: 1px solid var(--line); } .aa-find-layer { padding: 10px 14px 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .aa-find-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 14px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; } .aa-find-item span { flex: none; font-size: 13px; color: var(--muted); } .aa-find-item:hover, .aa-find-item:focus-visible { background: var(--aa-pale); outline: none; } .aa-find-item:focus-visible { box-shadow: inset 3px 0 0 var(--aa-lily); } @media (max-width: 900px) { .aa-qf-in { padding: 16px; } .aa-qf-wide, .aa-qf-range { flex: 1 1 100%; max-width: none; } .aa-find-item { min-height: 44px; } } /* Design "Aalto-A": top lakes page (tmpl/themes/aalto-a/screens/database/Top.php). */ .aa-topi { display: flex; flex-direction: column; } .aa-chart { display: block; width: 100%; height: auto; } .aa-chart a:hover path:first-child { opacity: 0.85; } .aa-narrow { display: none; } /* hero: records list + dot map with numbered pins */ .aa-topi-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; padding: 48px 0 40px; } .aa-topi-intro { flex: 1 1 340px; max-width: 440px; display: flex; flex-direction: column; gap: 18px; } .aa-records { list-style: none; margin: 6px 0 0; padding: 0; } .aa-records a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; } .aa .aa-records a:hover { color: var(--aa-blue-2); } .aa-pin-n { width: 28px; height: 28px; border-radius: 50%; background: var(--aa-deep); color: #F3F8F8; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; } .aa-records-t { display: flex; flex-direction: column; line-height: 1.2; } .aa-records-t span { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aa-eyebrow); } .aa-records-t b { font-size: 17px; font-weight: 400; } .aa-records-v { font-size: 16px; font-weight: 600; white-space: nowrap; } .aa-topi-map { flex: 999 1 460px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .aa-topi-map figcaption { font-size: 14px; color: var(--muted); text-align: center; } .aa-ring-map { position: relative; width: 100%; aspect-ratio: 1000 / 640; } .aa-rings, .aa-pins { position: absolute; inset: 0; width: 100%; height: 100%; } .aa-dots { position: absolute; left: 6%; top: 8%; width: 88%; height: 84%; } /* the same ink and strength as the dots of the Leaflet lake map (home-map.js) */ .aa-dots-lakes { stroke: var(--accent); opacity: 0.85; } .aa-dots-lakes + g { opacity: 0.8; } .aa-pins-narrow { display: none; } /* a pin's number opens the lake card (same look as the home map's popup, pages.css) */ .aa-pin { cursor: pointer; outline: none; } .aa-pin:hover circle:last-of-type, .aa-pin:focus-visible circle:last-of-type { fill: var(--aa-blue-2); } .aa-pin:focus-visible circle:last-of-type { stroke: var(--aa-lily); stroke-width: 3; } .aa-pin-pop { position: absolute; z-index: 2; transform: translateX(-50%); width: max-content; min-width: 170px; max-width: min(300px, 100%); padding: 12px 44px 13px 16px; border-radius: 14px; border-top: 3px solid var(--aa-lily); background: #FFFFFF; box-shadow: 0 0 0 1px var(--line), 0 12px 28px rgba(19, 48, 58, 0.16); font-size: 14px; line-height: 1.3; text-align: left; } .aa-pin-pop[hidden] { display: none; } .aa-pin-pop-x { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font: 400 20px/1 Arial, sans-serif; cursor: pointer; } .aa-pin-pop-x:hover { background: var(--aa-pale); color: var(--aa-deep); } /* contents chips */ .aa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 -32px; padding: 14px 32px; background: var(--aa-pale); } /* one ranking: text + list beside a chart; every other section flips */ .aa-top-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; padding: 64px 0; border-top: 1px solid var(--line); } .aa-chips + .aa-top-sec { border-top: 0; } .aa-top-flip { flex-direction: row-reverse; } .aa-top-text { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 14px; } .aa-top-text > p { margin: 0; font-size: 17px; color: var(--aa-text-2); } .aa-top-sub { font-size: 13px !important; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted) !important; } .aa-top-fig { flex: 999 1 620px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .aa-top-fig figcaption { font-size: 14px; color: var(--muted); } /* the lily pond reads better a little smaller than the column */ .aa-pond { width: 100%; max-width: 600px; margin: 0 auto; } .aa-top-note { margin: 0; padding: 28px 0 64px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); } /* ranked list */ .aa-rank { list-style: none; margin: 0; padding: 0; } .aa-rank li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #E3EDEF; } .aa-rank-n { font-size: 13px; color: var(--muted); } .aa-rank-name { display: flex; flex-direction: column; line-height: 1.25; } .aa-rank-name a { color: var(--ink); text-decoration: none; font-size: 16px; } .aa .aa-rank-name a:hover { color: var(--aa-blue-2); text-decoration: underline; } .aa-rank-name span { font-size: 13px; color: var(--muted); } .aa-rank b { font-size: 16px; font-weight: 600; white-space: nowrap; } /* islands and shores: small multiples */ .aa-islands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 18px 16px; } .aa-islands > div { display: flex; flex-direction: column; gap: 4px; } .aa-islands span { display: block; text-align: center; } .aa-islands a { color: var(--ink); } .aa-islands b { font-weight: 600; white-space: nowrap; } .aa-savoy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 16px 12px; } .aa-savoy > div { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .aa-savoy a, .aa-savoy span { color: var(--ink); font-size: 15px; line-height: 1.2; } .aa-savoy b { font-size: 17px; font-weight: 600; } @media (max-width: 900px) { .aa-topi-hero { flex-direction: column; align-items: stretch; padding: 26px 0 24px; gap: 18px; } .aa-topi-map { order: -1; flex: none; } .aa-topi-intro { flex: none; } .aa-topi-intro { max-width: none; } .aa-chips { margin: 0 -16px; padding: 12px 16px; gap: 6px; } .aa-chips .aa-pill { min-height: 40px; padding: 0 12px; font-size: 12px; } /* a one-column grid, not a flex column: in a flex column the figure came out shorter than its chart and the caption ran over the list below */ .aa-top-sec, .aa-top-flip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 32px 0; } .aa-top-text { max-width: none; display: contents; } .aa-top-text .aa-eyebrow { order: 1; } .aa-top-text .aa-h2 { order: 2; } .aa-top-text > p { order: 3; font-size: 16px; } .aa-top-fig { order: 4; display: block; } .aa-top-fig figcaption { margin-top: 12px; } .aa-top-text .aa-top-sub, .aa-top-text .aa-rank { order: 5; } .aa-top-text .aa-more { order: 6; } .aa-wide, .aa-pins-wide { display: none; } .aa-narrow, .aa-pins-narrow { display: block; } .aa-islands { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aa-savoy { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aa-savoy a, .aa-savoy span { font-size: 13px; } }