/* * Adresynas.lt — "Modernist" design system, implemented as plain CSS. * * Source of truth for the tokens: the Claude Design project * "Adresynas naujas dizainas" (design system `modernist-bedbe2af`). The look * is editorial rather than app-like: no rounded corners, no cards floating on * a page, no shadows except on the one overlay that needs to sit above text. * Structure is carried by rules — 2px between bands, 1px between rows — which * is why almost nothing here needs a wrapper element to look right. * * Still deliberately dependency-free and buildless (§11.2 rule 5). Every page * is a document first: the layout is a single column of full-bleed bands, so * a page renders correctly with this file missing, and each band's meaning * comes from its markup rather than from a grid class. * * ORDER IS LOAD-BEARING HERE. Everything above the boundary marker in the * middle of this file is inlined into every page's (App\Frontend\ * CriticalCss); the file as a whole then loads without blocking the render. * So the top of the file is "what the reader sees before scrolling" — tokens, * type, bands, header, search, banners, figures, the map frame — and the rest * follows below. Adding an above-the-fold rule below the marker is not a * style error, it is a rule that arrives after first paint. * * The inlined part is a PREFIX of this file, not a copy of selected rules: * the browser therefore sees the same declarations in the same order either * way, and no rule can drift between a critical file and a full one. */ /* Font -------------------------------------------------------------------- */ /* * Archivo, self-hosted. It was two render-blocking requests to two Google * origins (fonts.googleapis.com for the CSS, then fonts.gstatic.com for the * files); it is now same-origin, in the inlined block, and discovered with * the first byte of HTML. That also removes the last third party that learned * which address a reader was looking at — the same reason `MAP_TILE_URL` * defaults to a same-origin path. * * One variable file per unicode range, covering weights 400–800, which is * every weight this stylesheet uses. Both ranges are needed and neither is * optional: Lithuanian text is latin PLUS latin-ext (ą č ę ė į š ų ū ž), so a * page drops to the fallback stack for exactly the letters that make it * Lithuanian if latin-ext is missing. * * `swap` because the text is the content: it renders immediately in the * fallback stack and re-renders in Archivo when the file lands. Regenerate * with `make fonts`; licence in assets/fonts/OFL.txt. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url("../fonts/archivo-latin-StE8AAs.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url("../fonts/archivo-latin-ext-wfGW6gi.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Tokens ------------------------------------------------------------------ */ :root { --bg: #f3f2f2; --surface: #eae9e9; --ink: #201e1d; /* The accent is the design doc's default (#c8102e), not the design system's stock red — the screens override it and that override is the brand. The tonal steps are derived, so retuning `--accent` retunes the whole ramp. */ --accent: #c8102e; --accent-100: color-mix(in srgb, var(--accent) 12%, white); --accent-600: color-mix(in srgb, var(--accent) 85%, black); --accent-700: color-mix(in srgb, var(--accent) 68%, black); --accent-800: color-mix(in srgb, var(--accent) 52%, black); --n-100: #f8f4f4; --n-200: #eae7e7; --n-300: #d7d3d3; --n-400: #bab6b6; --n-500: #9b9797; --n-600: #7d7979; --n-700: #605d5d; --n-800: #444141; --n-900: #2d2b2b; /* Two weights of rule, and only two: 2px separates bands, 1px separates rows inside one. Anything else reads as a third level that is not there. */ --divider: color-mix(in srgb, var(--ink) 40%, transparent); --rule: var(--n-300); --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace; /* Band padding is a variable rather than a media query repeated 30 times. */ --pad-x: 20px; --pad-y: 24px; --shadow-md: 0 3px 10px color-mix(in srgb, var(--n-900) 16%, transparent); } @media (min-width: 900px) { :root { --pad-x: 48px; --pad-y: 40px; } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--bg); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; } main { display: block; } a { color: var(--accent-700); text-decoration: none; } a:hover { color: var(--accent); text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); } /* Type -------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font); font-weight: 800; } h1 { margin: 0 0 6px; font-size: 32px; line-height: 1.02; letter-spacing: -.025em; } /* Section headings are labels, not titles — the numbers below them are the thing being read. */ h2 { margin: 0 0 14px; font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; } h3 { margin: 22px 0 12px; font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; } p { margin: 0 0 12px; } p:last-child { margin-bottom: 0; } em { font-style: italic; } .kicker { margin: 0 0 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent); } .lead { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--n-700); max-width: 70ch; } .note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--n-800); max-width: 76ch; } .muted { color: var(--n-700); font-size: 13px; font-weight: 400; } .absent { font-style: italic; color: var(--n-600); font-weight: 400; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: .5rem; top: .5rem; z-index: 20; padding: .5rem .75rem; background: #fff; border: 2px solid var(--ink); } @media (min-width: 900px) { h1 { font-size: 52px; line-height: 1; margin-bottom: 10px; } h2 { font-size: 13px; margin-bottom: 24px; } .lead { font-size: 18px; } .note { font-size: 15px; } } /* Bands ------------------------------------------------------------------- */ /* * The whole page is a stack of full-bleed bands. A band owns its padding and * the 2px rule under it; nothing else in the page draws horizontal structure. */ .band, .dossier-section { padding: var(--pad-y) var(--pad-x); border-bottom: 2px solid var(--divider); /* A grid item's default `min-width: auto` refuses to shrink below its content's min-content width, and `.band-split` lays two of these side by side. Nothing here wants intrinsic sizing; the content inside wraps on its own. */ min-width: 0; } .band-tight { padding-top: 22px; padding-bottom: 20px; } /* Two bands side by side on a wide screen, stacked on a narrow one. The 2px gap over a divider-coloured background draws the vertical rule, so neither child needs to know whether it is the left or the right one. */ .band-split { display: grid; grid-template-columns: 1fr; border-bottom: 2px solid var(--divider); } .band-split > * { border-bottom: 2px solid var(--divider); } .band-split > *:last-child { border-bottom: 0; } @media (min-width: 900px) { .band-split { grid-template-columns: 1fr 1fr; gap: 2px; background: var(--divider); } .band-split > * { background: var(--bg); border-bottom: 0; } .band-split-aside { grid-template-columns: 1fr 400px; } } /* Header and footer -------------------------------------------------------- */ .site-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; min-height: 56px; padding: 10px var(--pad-x); border-bottom: 2px solid var(--divider); } .wordmark { margin: 0; margin-right: auto; font-weight: 800; font-size: 17px; line-height: 1.2; letter-spacing: .01em; } .wordmark a { color: inherit; text-decoration: none; } .wordmark a:hover { color: inherit; text-decoration: none; } .wordmark-tld { color: var(--accent); } .site-nav { display: flex; align-items: center; gap: 20px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; } .site-nav a { display: inline-flex; align-items: center; min-height: 44px; } /* * The home page's header menu: one `
` that is a disclosure on a phone * and an inline row on a wide screen. No script — see templates/home.html.twig * on why a nav is the last thing that may depend on one. * * Open, the list pushes the page down instead of floating over it: the menu is * a full-width row OF the header, exactly as `.site-header .address-search` * already is on a phone. The design system has one overlay — the autocomplete * panel — and a second would need a shadow nothing else on the page uses. * * The disclosure belongs on the wordmark's row at the right, which is where a * phone reader's thumb looks for it. Naming it "Apie duomenis" makes clear * that this is supporting information, not the product's primary navigation. * A `
` cannot put its * summary in a different flex row from its content, so the summary is taken * out of flow and pinned to the header's top-right corner; the element itself * stays full-width for the panel's sake and contributes no height while closed. */ .site-header { position: relative; /* Leaflet panes use z-index values up to 700. The autocomplete belongs to the header and must stay above the map that follows it in the document. */ z-index: 1000; } .site-menu { flex: 1 1 100%; } /* * Pins the first row's height wherever the menu exists, so the disclosure stays on * the wordmark's centre line in both states. Without it the row is 56px while * the menu is closed (the header's min-height stretching a short row) and 24px * once the open panel gives the header its own height — and the absolutely * positioned control, which cannot follow, drifts 6px on open. * * Scoped with `:has()` so the headers that carry the search field instead are * untouched. A browser without `:has()` gets the drift and nothing worse. */ .site-header:has(.site-menu) .wordmark { display: flex; align-items: center; min-height: 36px; } .site-menu > summary { position: absolute; top: 0; right: var(--pad-x); display: flex; align-items: center; justify-content: center; gap: 7px; /* Matches .site-header's min-height, so the label centres on the first row however tall the open panel below makes the header. */ height: 56px; width: auto; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; } .site-menu > summary::-webkit-details-marker { display: none; } .site-menu-chevron { color: var(--accent); font: 800 15px/1 var(--font-mono); transition: transform .15s ease; } .site-menu[open] .site-menu-chevron { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .site-menu-chevron { transition: none; } } .site-menu ul { margin: 0; padding: 6px 0 10px; list-style: none; } .site-menu li { border-top: 1px solid var(--rule); } .site-menu a { display: flex; align-items: center; min-height: 48px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; } /* "You are here", on the hub pages that now carry this menu. Ink rather than the link accent, because the distinction being drawn is link vs not-a-link: the current page is the one entry that goes nowhere. */ .site-menu a[aria-current] { color: var(--ink); } /* In the header the form is a second row on a phone and an inline field on a desktop — the same markup either way. */ .site-header .address-search { flex: 1 1 100%; margin-top: 10px; } @media (min-width: 900px) { .site-header { min-height: 76px; gap: 0 40px; padding-block: 0; } .wordmark { font-size: 19px; } .site-nav { gap: 32px; font-size: 12px; font-weight: 600; } .site-header .address-search { flex: 1 1 auto; max-width: 560px; margin-top: 0; } /* * Same markup, laid out inline — the links are visible here whether the * element happens to be open or not, because a reader who tapped the menu * on a phone and then rotated to landscape must not find an empty header. * * That takes TWO overrides, because browsers hide a closed `
`'s * content in two different ways and both are still in the field: * * - older engines apply `display: none` to the assigned children, which * the author `display: flex` on the list below beats; * - Chrome now skips the whole `::details-content` box with * `content-visibility: hidden`, which a rule on a CHILD cannot reach — * the children keep their layout boxes and simply never paint, which is * exactly how this shipped broken the first time. * * Neither line is redundant: each is the only one that works on one of the * two. `::details-content` is unknown to the engines in the first group, and * an unknown pseudo-element makes them drop only that rule. */ .site-menu { flex: 0 1 auto; } .site-menu::details-content { content-visibility: visible; } .site-menu > summary { display: none; } .site-menu ul { display: flex; align-items: center; gap: 32px; padding: 0; } .site-menu li { border-top: 0; } .site-menu a { min-height: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; } /* The two the enum keeps out of the header: they would wrap the row against the wordmark, and the footer carries them on every page anyway. */ .site-menu-secondary { display: none; } } .site-footer { padding: 24px var(--pad-x) 32px; font-size: 13px; line-height: 1.5; color: var(--n-700); } .site-footer p { margin: 0; max-width: 62ch; } .site-footer p + p { margin-top: 12px; } @media (min-width: 900px) { .site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 32px var(--pad-x) 40px; font-size: 14px; } .site-footer p + p { margin-top: 0; } } /* Search ------------------------------------------------------------------ */ .address-search { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; } .address-search label { flex: 1 1 100%; margin-bottom: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--n-700); } .address-search-field { position: relative; flex: 1 1 10rem; min-width: 0; } .address-search input { display: block; width: 100%; min-width: 0; height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-right: 0; border-radius: 0; background: #fff; color: var(--ink); font: 400 16px/1 var(--font); -webkit-appearance: none; appearance: none; } .address-search input:focus-visible { outline-offset: 0; } .address-search button { flex: 0 0 auto; height: 44px; padding: 0 20px; border: 2px solid var(--accent); border-radius: 0; background: var(--accent); color: #fff; font: 700 13px var(--font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .address-search button:hover { background: var(--accent-600); border-color: var(--accent-600); } .address-search button:active { background: var(--accent-700); border-color: var(--accent-700); } /* The home page's search is the page's primary action, so it gets the larger treatment: a stacked field and button on a phone, one row on a desktop. */ .address-search-lg .address-search-field { flex: 1 1 100%; } .address-search-lg input { height: 52px; font-size: 17px; border-right: 2px solid var(--ink); } .address-search-lg button { flex: 1 1 100%; height: 52px; margin-top: 10px; font-size: 15px; text-align: left; } /* On the home page the first suggestion belongs directly to the field. The panel participates in layout on a phone, so the submit button moves below it rather than wedging itself between the query and its answer. */ .address-search-lg .suggestions-panel { position: relative; inset: auto; margin-top: 2px; } @media (min-width: 900px) { /* Capped, not full-bleed: a 1440px-wide input reads as a page-width rule rather than as a field, and the eye has to travel to find the button. */ .address-search-lg { max-width: 760px; } .address-search-lg .address-search-field { flex: 1 1 auto; } .address-search-lg input { height: 60px; font-size: 18px; border-right: 0; } .address-search-lg button { flex: 0 0 auto; height: 60px; margin-top: 0; padding: 0 28px; font-size: 16px; } .address-search-lg .suggestions-panel { position: absolute; inset: 100% 0 auto; margin-top: 2px; } } /* Autocomplete island (task 27). The panel is the only overlay in the design and the only thing with a shadow — it has to read as "above the page". */ .suggestions-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 2px; } .suggestions-panel:empty { display: none; } .suggestions { list-style: none; margin: 0; padding: 0; background: #fff; border: 2px solid var(--ink); box-shadow: var(--shadow-md); max-height: 22rem; overflow-y: auto; } .suggestions li { border-bottom: 1px solid var(--rule); } .suggestions li:last-child { border-bottom: 0; } .suggestions a { display: block; min-height: 44px; padding: 10px 14px; color: inherit; text-decoration: none; } .suggestions a:hover, .suggestions li.is-active a { background: var(--accent-100); color: inherit; text-decoration: none; } .suggestion-address { display: block; font-size: 16px; font-weight: 700; } .suggestion-context { display: block; font-size: 12px; color: var(--n-700); } .suggestions-message { margin: 0; padding: 12px 14px; background: #fff; border: 2px solid var(--ink); box-shadow: var(--shadow-md); font-size: 14px; line-height: 1.5; } .suggestions-summary { margin: 0; padding: 8px 12px; border: 2px solid var(--ink); border-bottom: 0; background: var(--n-100); color: var(--n-700); font-size: 12px; line-height: 1.35; } .suggestions-summary strong { color: var(--ink); } .suggestion-address mark { padding: 0; background: transparent; color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Inside the results page the same fragment is inline content, not an overlay: no shadow, no border, no absolute positioning. */ .suggestions-inline .suggestions, .suggestions-inline .suggestions-message { border: 0; box-shadow: none; background: transparent; padding-inline: 0; max-height: none; } .suggestions-inline .suggestions-summary { padding-inline: 0; border: 0; background: transparent; } .suggestions-inline .suggestions { border-top: 2px solid var(--divider); } .suggestions-inline .suggestions a { padding: 14px 0; } .suggestions-inline .suggestion-address { font-size: 19px; } .suggestions-inline .suggestion-context { font-size: 13px; margin-top: 3px; } .suggestions-inline .suggestions-message { margin-bottom: 20px; font-size: 15px; color: var(--n-800); } /* Statement blocks -------------------------------------------------------- */ /* * A callout is a bordered statement the reader must not skim past. The * accent variant is reserved for the §11.4 whole-building scope banner — * it is the one sentence on the page that changes what every number below * it means. */ .callout { margin: 16px 0 0; padding: 14px 16px; border: 2px solid var(--ink); font-size: 14px; line-height: 1.5; max-width: 76ch; } .scope-banner { margin: 0; padding: 14px 16px; border: 2px solid var(--accent); background: var(--accent-100); color: var(--accent-800); font-size: 14px; line-height: 1.5; max-width: 76ch; } @media (min-width: 900px) { .callout, .scope-banner { padding: 16px 18px; font-size: 15px; } } /* The band that carries only a banner sits directly under the header. */ .band-banner { padding-bottom: 0; border-bottom: 0; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; } .tag { display: inline-flex; align-items: center; padding: 5px 8px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; } .tag-solid { background: var(--accent); color: #fff; } .tag-outline { border: 2px solid var(--ink); } /* Buttons ----------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 18px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 700 12px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); text-decoration: none; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-600); border-color: var(--accent-600); color: #fff; } .btn-block { display: flex; width: 100%; margin-top: 20px; } @media (min-width: 900px) { .btn { font-size: 13px; } .btn-block { display: inline-flex; width: auto; margin-top: 24px; } } /* Numbers ----------------------------------------------------------------- */ /* * The headline figures. Two per row on a phone, four on a desktop; the 2px * gap over a divider background draws every internal rule at once, which is * why the cells carry no borders of their own. */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--divider); border-bottom: 2px solid var(--divider); } .stat { background: var(--bg); padding: 16px var(--pad-x); } .stat-value { margin: 0 0 4px; font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .stat-value .unit { font-size: .55em; } .stat-label { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--n-700); } .stat-value .absent { font-size: 14px; letter-spacing: 0; } @media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } .stat { padding: 26px 32px; } .stat-value { font-size: 40px; margin-bottom: 6px; } .stat-label { font-size: 12px; } } /* Page section index ------------------------------------------------------ */ /* * Long data pages are divided like a paper register: one persistent index * strip, then one subject at a time. Before the small controller loads, these * stay ordinary fragment links and every panel remains visible below. */ .section-tabs-nav { position: sticky; top: 0; z-index: 4; padding: 0 var(--pad-x); overflow: hidden; border-bottom: 2px solid var(--accent-700); background: var(--accent); } .section-tabs-list { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; } .section-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 64px; padding: 8px 4px; color: #fff; text-decoration: none; } .section-tab + .section-tab { border-left: 1px solid color-mix(in srgb, white 35%, transparent); } .section-tab:focus-visible { outline-color: #fff; outline-offset: -3px; } .section-tab-icon { display: block; width: 21px; height: 21px; margin-bottom: 5px; flex: none; stroke-linecap: square; } .section-tab > span[data-mobile-label] { font-size: 10px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; } .section-tab small { display: none; } .section-tab-status { position: absolute; top: 7px; right: 7px; display: block; } .section-tab-status-dot { display: block; width: 7px; height: 7px; border: 1px solid #fff; background: transparent; } .section-tab-status-available .section-tab-status-dot { background: #fff; border-color: #fff; } .section-tab-status-missing { color: var(--n-500); } .section-tab-status-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .section-tab:hover { background: var(--accent-600); color: #fff; text-decoration: none; } .section-tab[aria-selected="true"] { color: #fff; } /* Five dossier subjects still fit at 320px. Preserve the full visible label wherever it fits, and shorten only the one long word on narrow phones. */ @media (max-width: 480px) { .section-tabs-nav { padding-inline: 0; } .section-tab > span[data-mobile-label] { font-size: 0; } .section-tab > span[data-mobile-label]::after { content: attr(data-mobile-label); font-size: 11px; } } .section-tabs-marker { position: absolute; bottom: -2px; left: 0; height: 4px; opacity: 0; pointer-events: none; will-change: transform, width; transition: transform 240ms cubic-bezier(.22, 1, .36, 1), width 240ms cubic-bezier(.22, 1, .36, 1); } .section-tabs-marker::after { content: ""; display: block; height: 100%; margin: 0 10px; background: #fff; } .tabs-ready .section-tabs-marker { opacity: 1; } .section-tab-panel, .section-tab-panel .dossier-section { scroll-margin-top: 72px; } @media (min-width: 700px) { .section-tabs-nav { border-bottom-color: var(--divider); /* Matches the page, so the tabs read as transparent without letting scrolled content bleed through the sticky navigation. */ background: var(--bg); } .section-tab { align-items: flex-start; justify-content: center; min-height: 72px; padding: 12px 18px; color: var(--accent); } .section-tab + .section-tab { border-left-color: var(--rule); } .section-tab:hover { background: var(--accent-100); color: var(--accent-700); } .section-tab[aria-selected="true"] { color: var(--accent); } .section-tab:focus-visible { outline-color: var(--accent); } .section-tab-icon { display: none; } .section-tab > span[data-mobile-label] { font-size: 13px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .section-tab small { display: block; margin-top: 2px; color: var(--n-600); font-size: 11px; line-height: 1.25; } .section-tab-status { position: static; display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--n-600); } .section-tab-status-dot { width: 6px; height: 6px; border-color: currentColor; background: transparent; } .section-tab-status-available .section-tab-status-dot { border-color: var(--accent); background: var(--accent); } .section-tab-status-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; color: inherit; font-size: 9px; font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase; } .section-tabs-marker::after { margin-inline: 18px; background: var(--accent); } } @media (prefers-reduced-motion: reduce) { .section-tabs-marker { transition: none; } } @media print { .section-tabs-nav { display: none; } .section-tab-panel[hidden] { display: block !important; } } /* Breadcrumbs ------------------------------------------------------------- */ .breadcrumbs { padding: 0 var(--pad-x); border-bottom: 2px solid var(--divider); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--n-700); overflow-x: auto; } .breadcrumbs ol { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0; list-style: none; white-space: nowrap; } .breadcrumbs li { display: flex; align-items: center; } .breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--n-500); } .breadcrumbs [aria-current="page"] { color: var(--ink); } @media (min-width: 900px) { .breadcrumbs { font-size: 12px; } .breadcrumbs ol { gap: 10px; min-height: 0; padding: 14px 0; } } /* Hero compositions -------------------------------------------------------- */ /* The home page's hero: the search field is the page's whole purpose, so the heading and the field get the room a landing page normally spends on decoration. */ .band-hero { padding-bottom: 32px; } .hero-title { font-size: 36px; line-height: 1; letter-spacing: -.02em; margin-bottom: 14px; } .lead-hero { font-size: 16px; color: var(--n-800); margin-bottom: 24px; max-width: 54ch; } .coverage-band { padding: 18px var(--pad-x); border-bottom: 2px solid var(--divider); } .coverage-intro { margin: 0; font-size: 15px; line-height: 1.4; } .coverage-intro strong { margin-right: 4px; color: var(--accent); font-size: 24px; line-height: 1; } .coverage-note { margin: 0; padding: 10px var(--pad-x) 12px; border-bottom: 2px solid var(--divider); color: var(--n-700); font-size: 12px; } .section-title { margin: 0 0 20px; font-size: 28px; line-height: 1.05; letter-spacing: -.02em; text-transform: none; font-weight: 800; } @media (min-width: 900px) { .band-hero { padding-top: 48px; padding-bottom: 40px; } .hero-title { font-size: 62px; line-height: .96; letter-spacing: -.02em; max-width: 15ch; text-wrap: balance; margin-bottom: 20px; } .lead-hero { font-size: 19px; margin-bottom: 30px; } .coverage-band { padding-block: 20px; } .coverage-intro { font-size: 17px; } .coverage-intro strong { font-size: 30px; } .coverage-note { padding-block: 12px 14px; font-size: 13px; } .section-title { font-size: 36px; margin-bottom: 24px; } } /* Map ---------------------------------------------------------------------- */ /* * A tile mosaic behind a fixed frame. The mosaic is absolutely positioned so * that the address point lands at the frame's centre — `calc(50% - Npx)`, * with N written by the server — and the marker is simply drawn at 50%/50%. * * The frame must never exceed 512px in either axis: StaticMapFactory's 3×3 * grid guarantees exactly 256px of tile around the point, and a wider frame * would show the background through the edges. */ .hero-with-map { border-bottom: 2px solid var(--divider); } .hero-with-map > .band { border-bottom: 0; } .dossier-identity { position: relative; overflow: hidden; } .dossier-identity > * { position: relative; z-index: 1; } .dossier-location { margin-bottom: 0; } .registry-code, .registry-coordinate-value, .dossier-freshness time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .dossier-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; font-size: 12px; } .dossier-freshness, .dossier-feedback { margin: 0; } .dossier-freshness { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--n-700); } .dossier-freshness time { color: var(--ink); font-weight: 700; } .dossier-feedback a { font-weight: 700; } /* The dossier's visual signature: the official point written as a compact registry annotation, with a crosshair built from the same square geometry as the map marker. */ .registry-coordinate { display: grid; grid-template-columns: 22px auto; column-gap: 9px; align-items: center; width: fit-content; margin: 18px 0 0; color: var(--n-700); } .registry-coordinate-mark { position: relative; grid-row: 1 / 3; width: 22px; height: 22px; border: 1px solid var(--n-500); } .registry-coordinate-mark::before, .registry-coordinate-mark::after { content: ""; position: absolute; background: var(--accent); } .registry-coordinate-mark::before { left: 10px; top: -5px; width: 2px; height: 30px; } .registry-coordinate-mark::after { left: -5px; top: 10px; width: 30px; height: 2px; } .registry-coordinate-label { align-self: end; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .registry-coordinate-value { align-self: start; color: var(--ink); font-size: 11px; } .dossier-stat-grid { margin-top: 24px; border: 2px solid var(--divider); } .dossier-stat-grid .stat { padding: 15px 12px; } .dossier-stat-grid .stat-value { font-size: 25px; } .dossier-stat-grid .stat-label { font-size: 9px; } .map-panel { padding: 0 var(--pad-x) var(--pad-y); } .map-panel-label { margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n-700); } .map { margin: 0; } .map-frame { position: relative; overflow: hidden; width: 100%; max-width: 512px; height: 190px; background: var(--n-200); border: 2px solid var(--ink); } .map-static { position: absolute; inset: 0; } .map-static[hidden] { display: none; } .map-tiles { position: absolute; } .map-tiles img { position: absolute; max-width: none; } /* The interactive layer sits over the static one and is empty — and so invisible — until the island fills it. */ .map-canvas { position: absolute; inset: 0; } /* Square, not a teardrop: the marker states a coordinate, and the design system has no rounded corners anywhere else. */ .map-marker { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 1px 5px color-mix(in srgb, var(--n-900) 55%, transparent); } .map-credit { margin-top: 8px; max-width: 512px; font-size: 12px; line-height: 1.45; color: var(--n-700); } /* The hero's media column: the map, and — where the building has one — the orthophoto beside it at the same size (task 34, moved here 2026-08-20). `auto-fit` rather than a class or a server-side branch: 461,546 addresses have a photograph and 671,625 do not, and with auto-fit the single-item case fills the column exactly as it did before this existed. The 200px minimum is what makes it stack on a narrow phone instead of shrinking both to thumbnails. */ .hero-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: start; } /* Orthophoto figure (task 34) -------------------------------------------- ABOVE the critical boundary, because the figure is in the hero: these rules decide the first screen's layout, and arriving after first paint would reflow it. It was below the line while the figure lived in the "Pastatas" tab. When the placement moved, the CSS moved with it — the same correction task 35 had to make, in the opposite direction. CriticalCssTest asserts which side it is on, so the two cannot drift apart. The frame mirrors .map-frame deliberately: same border, same height, same behaviour at every breakpoint, because "the same size as the map" is the point of the layout. Cropping is `cover` on a square source into a near-square box, so nothing meaningful is lost and the building stays centred. */ .orthophoto { margin: 0; } .orthophoto-frame { position: relative; overflow: hidden; width: 100%; max-width: 512px; height: 190px; background: var(--n-200); border: 2px solid var(--ink); } .orthophoto-image { display: block; width: 100%; height: 100%; object-fit: cover; } .orthophoto-credit { margin-top: 8px; max-width: 512px; font-size: 12px; line-height: 1.45; color: var(--n-700); } .map-hint { color: var(--ink); font-weight: 700; } @media (min-width: 900px) { /* The design's hero row: heading on the left, map on the right, one 2px rule between them. */ .hero-with-map.has-media { display: grid; grid-template-columns: 1fr 480px; gap: 2px; background: var(--divider); } .hero-with-map.has-media > * { background-color: var(--bg); } .hero-with-map.has-media .dossier-identity { display: flex; flex-direction: column; min-height: 406px; } .dossier-identity::after { content: ""; position: absolute; z-index: 0; inset: 0 0 0 42%; opacity: .42; background-image: linear-gradient(to right, color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: linear-gradient(to right, transparent, #000 42%); mask-image: linear-gradient(to right, transparent, #000 42%); pointer-events: none; } .dossier-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: auto; } .dossier-stat-grid .stat { padding: 18px 14px; } .dossier-stat-grid .stat-value { font-size: clamp(24px, 2.2vw, 34px); white-space: nowrap; } .dossier-stat-grid .stat-label { font-size: 9px; } .map-panel { padding: 32px 32px 32px 30px; } .map-frame, .orthophoto-frame { height: 320px; } /* Two items need more room than one. `:has()` keeps the single-item hero at exactly the width it has always had, rather than widening every page for a figure most of them do not carry; a browser without `:has()` simply shows two narrower items, which is a smaller layout and not a broken one. */ .hero-with-map.has-media:has(.orthophoto) { grid-template-columns: 1fr 660px; } } /* ========================================================================== INLINE BOUNDARY — everything above this line is inlined into . App\Frontend\CriticalCss splits the file on the marker below, so the marker is API: CriticalCssTest fails if it is renamed or removed. Move a rule across it deliberately, and only after asking whether the reader sees that element before scrolling on the page where it appears. ========================================================================== */ /* critical-boundary */ /* Footprint -------------------------------------------------------------- BELOW the boundary: the outline lives inside the "Pastatas" tab panel, well past the fold on any screen, so inlining its rules would cost every page head weight for something no reader sees before scrolling. It sat above the marker while the section was directly under the map; moving the section moved the rules. No aspect-ratio is declared — the viewBox already gives the element an intrinsic ratio, and it differs per building, so hard-coding one here would squash exactly the shapes worth showing. ------------------------------------------------------------------------ */ .footprint { margin: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 200px) 1fr; align-items: start; } .footprint-shape { width: 100%; max-width: 200px; height: auto; } .footprint-shape path { fill: var(--surface-sunk, #eceae5); stroke: var(--ink, #1c1a17); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .footprint-facts { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 20px; } .footprint figcaption .note { margin: 0; } @media (max-width: 560px) { .footprint { grid-template-columns: 1fr; } .footprint-shape { max-width: 160px; } } /* Facts ------------------------------------------------------------------- */ /* * A fact row is a label and either a value or a stated absence — never a * blank cell (§11.4). Stacked on a phone so a long Lithuanian label never * squeezes its value into a two-character column. */ .facts { display: grid; grid-template-columns: 1fr; margin: 0; border-top: 2px solid var(--divider); } .facts dt { padding: 11px 0 0; font-size: 14px; color: var(--n-700); } .facts dd { margin: 0; padding: 0 0 11px; border-bottom: 1px solid var(--rule); font-weight: 700; } .facts .absent { font-weight: 400; } @media (min-width: 600px) { .facts { grid-template-columns: minmax(0, 1fr) auto; } .facts dt { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; } .facts dd { padding: 12px 0; text-align: right; } } .disputed { display: block; font-size: 12px; font-weight: 400; color: var(--accent-700); } /* Energy scale ------------------------------------------------------------ */ .energy-scale { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; margin: 0 0 4px; padding: 0; list-style: none; max-width: 900px; } .energy-scale li { padding: 10px 0; border: 2px solid var(--n-400); text-align: center; font-weight: 800; font-size: 11px; color: var(--n-500); } .energy-scale .is-current { border-color: var(--accent); background: var(--accent); color: #fff; } @media (min-width: 900px) { .energy-scale li { padding: 14px 0; font-size: 18px; } } /* APVA Renomap ----------------------------------------------------------- */ /* * The section's one graphic is a source-backed sequence, not decoration: * energy class before renovation → planned → achieved. It uses the dossier's * existing ink/paper/accent tokens and square register geometry, so a new * dataset gets its own visual grammar without introducing a second brand. */ .renomap-scope { max-width: 78ch; margin-bottom: 24px; padding: 14px 16px; border-left: 4px solid var(--accent); background: var(--accent-100); color: var(--n-800); } .renomap-scope strong { color: var(--ink); } .renomap-project + .renomap-project { margin-top: 32px; padding-top: 32px; border-top: 2px solid var(--divider); } .renomap-project-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 24px; margin-bottom: 18px; } .renomap-project-label { margin: 0 0 4px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .renomap-project-header h3 { max-width: 34ch; margin: 0; font-size: 22px; line-height: 1.08; letter-spacing: -.015em; text-transform: none; } .renomap-project-number { margin: 0; font: 700 14px/1.35 var(--font-mono); font-variant-numeric: tabular-nums; } .renomap-project-number span { display: block; color: var(--n-600); font: 700 9px/1.4 var(--font); letter-spacing: .1em; text-transform: uppercase; } .renomap-energy-journey { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; max-width: 900px; margin: 0 0 22px; } .renomap-energy-step { display: flex; min-width: 0; min-height: 94px; padding: 10px; flex-direction: column; justify-content: space-between; border: 2px solid var(--divider); background: var(--surface); } .renomap-energy-label { color: var(--n-700); font-size: 9px; font-weight: 700; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; } .renomap-energy-value { align-self: flex-end; font: 800 32px/.9 var(--font-mono); } .renomap-energy-value.is-achieved { color: var(--accent); } .renomap-energy-value.is-missing { align-self: flex-start; color: var(--n-600); font: 400 10px/1.2 var(--font); } .renomap-energy-arrow { align-self: center; color: var(--accent); font: 800 18px/1 var(--font-mono); } .renomap-project-facts { display: grid; grid-template-columns: 1fr; max-width: 900px; margin: 0; border-top: 2px solid var(--divider); } .renomap-project-facts dt { padding: 11px 0 0; color: var(--n-700); font-size: 14px; } .renomap-project-facts dd { margin: 0; padding: 0 0 11px; border-bottom: 1px solid var(--rule); font-weight: 700; } .renomap-project-facts time, .renomap-project-facts dd { font-variant-numeric: tabular-nums; } @media (min-width: 600px) { .renomap-energy-step { min-height: 112px; padding: 14px; } .renomap-energy-label { font-size: 10px; } .renomap-energy-value { font-size: 44px; } .renomap-project-facts { grid-template-columns: minmax(0, 1fr) auto; } .renomap-project-facts dt { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; } .renomap-project-facts dd { padding: 12px 0; text-align: right; } } /* Bar charts -------------------------------------------------------------- */ .bars { display: flex; flex-direction: column; gap: 8px; margin: 0; } .bar { display: grid; grid-template-columns: 96px 1fr 44px; gap: 8px; align-items: center; } .bar-label { font-size: 12px; color: var(--n-700); } .bar-track { height: 14px; background: var(--n-300); } .bar-fill { display: block; height: 100%; background: var(--accent); } .bar-count { font-size: 12px; font-weight: 700; text-align: right; } /* The energy-class chart keys on a one- or three-character class, so its label column is narrow and the class itself carries the weight. */ .bars-keyed .bar { grid-template-columns: 40px 1fr 44px; } .bars-keyed .bar-label { font-size: 15px; font-weight: 800; color: var(--ink); } @media (min-width: 900px) { .bars { gap: 10px; } .bar { grid-template-columns: 130px 1fr 56px; gap: 12px; } .bar-label { font-size: 14px; } .bar-track { height: 18px; } .bar-count { font-size: 14px; } .bars-keyed .bar { grid-template-columns: 40px 1fr 56px; } } /* Percentile comparison ---------------------------------------------------- */ /* One row per metric: what it is, the two values being compared, the meter, and the sentence that says what the meter means. The meter is deliberately the least prominent of the four — it is a picture of the number beside it, and it is the sentence that a reader can act on. */ .compare { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--divider); } .compare > li { padding: 14px 0; border-bottom: 1px solid var(--rule); } .compare > li:last-child { border-bottom: 0; } .compare-label { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--n-700); } .compare-values { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 5px 0 0; font-size: 14px; } .compare-values strong { font-size: 19px; font-weight: 800; } .compare-peer { color: var(--n-700); } .compare-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--n-700); } .compare-meter { display: grid; grid-template-columns: 1fr 48px; gap: 12px; align-items: center; margin: 10px 0 0; } .compare-track { height: 14px; background: var(--n-300); } .compare-fill { display: block; height: 100%; background: var(--accent); } .compare-pct { font-size: 14px; font-weight: 700; text-align: right; } .method-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--n-700); font-size: 13px; } .method-note summary { width: fit-content; color: var(--accent-700); font-weight: 700; cursor: pointer; } .method-note p { margin: 10px 0 0; max-width: 90ch; } @media (min-width: 900px) { .compare > li { padding: 16px 0; } .compare-values { font-size: 15px; } .compare-values strong { font-size: 21px; } .compare-meter { grid-template-columns: 1fr 56px; } .compare-track { height: 18px; } .compare-note { font-size: 14px; } .method-note { font-size: 14px; } } /* Row lists --------------------------------------------------------------- */ .rows { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--divider); } .rows > li { border-bottom: 1px solid var(--rule); } .rows > li:last-child { border-bottom: 0; } /* * The row itself is styled by position, not by a class on the anchor: these * lists are plain `` links, which is also what the aggregate page * tests grep for. */ .rows a, .row-static { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; min-height: 52px; padding: 13px 0; color: inherit; text-decoration: none; } .rows a:hover { background: var(--accent-100); color: inherit; text-decoration: none; } .row-static { color: var(--n-600); } .row-name { font-size: 17px; font-weight: 700; line-height: 1.25; } .row-meta { font-size: 12px; font-weight: 400; color: var(--n-700); } .row-static .row-name { color: var(--n-600); } @media (min-width: 900px) { .rows a, .row-static { padding: 14px 0; } .row-name { font-size: 18px; } .row-meta { font-size: 13px; } /* Two columns of rows, each column keeping its own rules. */ .rows-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 0; } .rows-2col > li:nth-child(-n+2) { border-top: 2px solid var(--divider); } .rows-2col > li:last-child { border-bottom: 1px solid var(--rule); } } /* A grid of place links — the home page's settlements. One column of rules on a phone, a four-up grid on a desktop. */ .link-grid { display: grid; grid-template-columns: 1fr; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--rule); border-top: 2px solid var(--divider); border-bottom: 1px solid var(--rule); } .link-grid a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 52px; padding: 14px 0; background: var(--bg); color: inherit; text-decoration: none; font-size: 17px; font-weight: 700; } .link-grid a:hover { background: var(--accent-100); color: inherit; text-decoration: none; } .link-grid .row-meta { font-size: 13px; } @media (min-width: 900px) { .link-grid { grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--divider); border-top: 0; border-bottom: 0; } .link-grid a { padding: 18px 20px; font-size: 18px; } } /* A–Ž street index. Each key is a 44px hit target with its street count under it, so a reader can see where the streets actually are before clicking. */ /* Rules on the cells, not a gap over a coloured container: the last row is usually partly filled, and a container background would draw a phantom empty cell after the final letter. */ .letter-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); margin: 0 0 24px; padding: 0; list-style: none; border-top: 2px solid var(--divider); border-left: 2px solid var(--divider); } .letter-index li { border-right: 2px solid var(--divider); border-bottom: 2px solid var(--divider); } .letter-index a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 2px; background: var(--bg); color: inherit; text-decoration: none; } .letter-index a:hover { background: var(--accent-100); color: inherit; text-decoration: none; } .letter-index a[aria-current="page"] { background: var(--accent); color: #fff; } .letter-index-key { font-size: 17px; font-weight: 800; line-height: 1; } .letter-index-count { font-size: 11px; color: var(--n-700); } .letter-index a[aria-current="page"] .letter-index-count { color: #fff; } /* Feature cells — the three "what this site is" panels on the home page. */ .cells { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; padding: 0; list-style: none; background: var(--divider); border-bottom: 2px solid var(--divider); } .cells > li { background: var(--bg); padding: 24px var(--pad-x) 28px; } .cells p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--n-800); } .home-pillars h2 { margin: 0 0 10px; color: var(--accent-700); font-size: 12px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; } @media (min-width: 900px) { .cells { grid-template-columns: repeat(3, 1fr); } .cells > li { padding: 36px 32px 40px; } .cells p { font-size: 17px; } .home-pillars h2 { font-size: 13px; } } /* Tables ------------------------------------------------------------------ */ table { width: 100%; border-collapse: collapse; font-size: 14px; } thead th { padding: 8px 12px 8px 0; border-bottom: 2px solid var(--divider); text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--n-700); } tbody th, td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } tbody th { font-weight: 700; } /* Infostatyba document tables (task 33) ----------------------------------- */ /* * Five columns of mostly-prose. A min-width makes the table scroll inside * .table-scroll on a phone instead of compressing "Prašymas išduoti statybą * leidžiantį dokumentą" into a column one word wide. * * Everything here is BELOW the critical boundary on purpose: both document * sections sit under the facts, the energy scale and the condition section, * so no reader meets them before first paint. */ .document-table { min-width: 640px; } .updates-table { min-width: 760px; } /* The row count above a capped list. Small, but never hidden: a truncated list that does not say so reads as the complete record. */ .section-count { margin: 12px 0 4px; font-size: 13px; color: var(--n-700); } /* §13's server-submitted filter. A plain GET form — it has to work with JavaScript off, like every other control here. */ .filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 4px; font-size: 14px; } .filter-form label { font-weight: 700; } .filter-form select { max-width: 100%; padding: 6px 8px; } /* Source popovers --------------------------------------------------------- */ /* The end of a fact table already has its own rule. Source attribution no longer draws a second one below it: the compact link is enough separation and removes the double-rule effect between the table and provenance. */ .section-source { margin-top: 10px; text-align: right; } .source-trigger, .source-popover-close { border: 0; border-radius: 0; background: transparent; color: var(--n-600); font: 600 13px/1.35 var(--font); cursor: pointer; } .source-trigger { min-height: 32px; padding: 6px 1px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .source-trigger:hover { color: var(--n-800); } /* Native `popover` puts this box in the top layer: it cannot be clipped by a dossier tab or participate in a two-column section's intrinsic width. */ .source-popover { width: min(620px, calc(100vw - 32px)); max-height: min(78vh, 680px); margin: auto; padding: 22px; overflow: auto; border: 2px solid var(--ink); border-radius: 0; background: var(--bg); color: var(--ink); text-align: left; box-shadow: 8px 8px 0 color-mix(in srgb, var(--ink) 22%, transparent); font-size: 14px; line-height: 1.45; } .source-popover::backdrop { background: color-mix(in srgb, var(--ink) 36%, transparent); } .source-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; } .source-popover-kicker { margin: 0; color: var(--n-600); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .source-popover-close { min-height: 32px; padding: 5px 0 5px 12px; text-decoration: underline; text-underline-offset: 3px; } .source-popover-close:hover { color: var(--ink); } .source-popover-title { margin: 0 0 18px; max-width: 36ch; color: var(--ink); font-size: 22px; line-height: 1.15; letter-spacing: -.01em; text-transform: none; } .source-popover-title a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .source-popover dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; border-top: 2px solid var(--divider); } .source-popover dt { padding-top: 10px; color: var(--n-700); font-size: 12px; font-weight: 600; } .source-popover dd { margin: 0; padding: 2px 0 10px; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; } .source-popover time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .source-popover-more { margin: 16px 0 0; font-weight: 700; } .footer-source { align-self: start; } .footer-source .source-trigger { color: var(--n-700); } @media (min-width: 600px) { .source-popover { padding: 28px; } .source-popover dl { grid-template-columns: 190px minmax(0, 1fr); } .source-popover dt, .source-popover dd { padding-block: 11px; border-bottom: 1px solid var(--rule); } .source-popover dd { padding-left: 20px; } } /* Forms ------------------------------------------------------------------- */ .correction-form { max-width: 40rem; } .correction-form fieldset { margin: 0 0 20px; padding: 16px; border: 2px solid var(--ink); } .correction-form legend { padding: 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; } .correction-form label { display: block; margin: 0 0 6px; font-size: 14px; } .correction-form fieldset label { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-size: 15px; } .correction-form input[type="text"], .correction-form textarea, .correction-form select { width: 100%; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 0; background: #fff; font: 400 15px/1.4 var(--font); color: var(--ink); } .correction-form textarea { resize: vertical; } .correction-form p { margin: 0 0 16px; } .correction-form button { margin-top: 4px; } .form-errors { margin: 0 0 20px; padding: 14px 16px 14px 34px; border: 2px solid var(--accent); background: var(--accent-100); color: var(--accent-800); font-size: 14px; } .correction-link { margin: 20px 0 0; font-size: 14px; } .correction-link.dossier-feedback { margin: 0; font-size: inherit; } /* Leaflet ------------------------------------------------------------------ */ /* The island's own styling. Below the boundary with the library it styles: Leaflet is fetched only on a page that has a map, and only once its controller runs, so none of this is needed at first paint. */ .map-canvas:not(:empty) { background: var(--n-200); } .leaflet-container { width: 100%; height: 100%; font: inherit; background: var(--n-200); } .leaflet-container a { color: var(--accent-700); } /* Leaflet's controls, in the design system's terms: square, 2px, ink. */ .leaflet-touch .leaflet-bar, .leaflet-bar { border: 2px solid var(--ink); border-radius: 0; box-shadow: none; } .leaflet-touch .leaflet-bar a, .leaflet-bar a { border-radius: 0; color: var(--ink); background: var(--bg); font-family: var(--font); font-weight: 800; } .leaflet-bar a:hover { background: var(--accent-100); } .leaflet-bar a + a { border-top: 1px solid var(--rule); } /* The island's marker. Same square as the static map's, so the swap from one to the other does not move or restyle the thing the reader is looking at. Selector is `.map-pin` alone on purpose: a divIcon's `className` REPLACES Leaflet's `leaflet-div-icon`, so requiring both matches nothing — and with that class gone there is no default white box left to override either. */ .map-pin { background: var(--accent); border: 0; box-shadow: 0 0 0 3px #fff, 0 1px 5px color-mix(in srgb, var(--n-900) 55%, transparent); } /* Nearby construction (task 33c). Smaller and neutral-coloured so the address the page is ABOUT stays the one thing that reads as the subject — these pins are context, and a screenful of accent-coloured squares would say otherwise. Both classes apply: `className` is "map-pin map-pin-nearby", so the rule above supplies the shape and this one overrides the colour. */ .map-pin-nearby { background: var(--n-700); box-shadow: 0 0 0 2px #fff, 0 1px 3px color-mix(in srgb, var(--n-900) 45%, transparent); } .map-pin-nearby.is-selected { background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 1px 5px color-mix(in srgb, var(--n-900) 55%, transparent); } /* A selected point reads like a compact registry annotation, not a generic rounded map bubble. The strong top rule links it to the accent marker while the square offset shadow keeps it legible over detailed tiles. */ .map-record-popup .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 0; background: var(--bg); box-shadow: 5px 5px 0 color-mix(in srgb, var(--ink) 22%, transparent); } .map-record-popup .leaflet-popup-content { margin: 0; } .map-record-popup .leaflet-popup-tip { border: 2px solid var(--ink); background: var(--bg); box-shadow: none; } .map-record-popup .leaflet-popup-close-button { top: 7px; right: 7px; width: 28px; height: 28px; color: var(--ink); font-size: 22px; line-height: 25px; } .map-record-popup .leaflet-popup-close-button:hover { background: var(--accent-100); color: var(--ink); } .map-popup-card { width: 230px; padding: 13px 16px 16px; border-top: 4px solid var(--accent); } .map-popup-card h3 { margin: 3px 30px 10px 0; font-size: 17px; line-height: 1.15; } .map-popup-meta, .map-popup-kind, .map-popup-structure, .map-popup-count, .map-popup-no-link { margin: 0; } .map-popup-meta { color: var(--n-600); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .map-popup-kind { font-size: 12px; font-weight: 800; line-height: 1.35; } .map-popup-structure { margin-top: 2px; color: var(--n-700); font-size: 12px; line-height: 1.35; } .map-popup-count, .map-popup-no-link { margin-top: 9px; color: var(--n-600); font-size: 11px; } .map-popup-link { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 12px; font-weight: 800; text-decoration: none; } .map-popup-link:hover { text-decoration: underline; } @media (max-width: 699px) { /* A 280px-wide map cannot place the zoom control beside a useful popup. Hide it only while an annotation is open; the close button restores it. */ .map-canvas.has-open-popup .leaflet-control-container { visibility: hidden; } .map-record-popup .leaflet-popup-close-button { top: 4px; right: 4px; width: 26px; height: 26px; font-size: 20px; line-height: 23px; } .map-popup-card { width: 210px; padding: 8px 12px 10px; } .map-popup-card h3 { margin: 2px 26px 6px 0; font-size: 13px; line-height: 1.12; letter-spacing: .06em; } .map-popup-meta { font-size: 9px; } .map-popup-kind, .map-popup-structure { font-size: 11px; line-height: 1.25; } .map-popup-count { display: none; } .map-popup-no-link { margin-top: 6px; font-size: 10px; } .map-popup-link { margin-top: 7px; padding-top: 6px; font-size: 11px; } } /* First-in-block variants. A callout that opens a section has nothing above it to be separated from. */ .callout-first, .note-first { margin-top: 0; } .callout-accent { border-color: var(--accent); background: var(--accent-100); color: var(--accent-800); } /* Missing source data is one intentional state, not a stack of empty fact rows. The left rule keeps it within the register vocabulary while the quieter surface prevents an absence from competing with a real value. */ .empty-state { max-width: 760px; padding: 16px 18px; border-left: 4px solid var(--n-500); background: var(--n-100); color: var(--n-700); } .empty-state-title { margin: 0 0 6px; color: var(--ink); font-size: 18px; font-weight: 800; line-height: 1.25; } .empty-state p:last-child { margin-bottom: 0; } .empty-state strong { color: var(--ink); } .band .scope-banner { margin-top: 18px; } .energy-scale + .facts { margin-top: 16px; } /* Two columns inside one section — the condition facts beside the sentence that says what their absence does and does not mean. */ .section-cols { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 900px) { .section-cols { grid-template-columns: 1fr 1fr; gap: 48px; } } /* Wide tables scroll inside their own box rather than widening the page. */ .table-scroll { overflow-x: auto; } /* The building selector's options. Not "cards": no border, no elevation — the kicker and the fact table's own rules are enough separation. */ .card-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 20px 0 0; padding: 0; list-style: none; } .card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 0; } .card-actions .correction-link { margin: 0; } @media (min-width: 900px) { .card-grid { grid-template-columns: 1fr 1fr; gap: 32px 48px; } } /* Trust hub ---------------------------------------------------------------- */ /* * The hub (task 34) is the first long-form prose on the site, and the design * system had no list styles at all — every list so far was a row list, a link * grid or a fact table. These three are the missing primitives, and they stay * primitives: a marker, a measure, and the same 2px/1px rule vocabulary as * everything else. No new colours, no boxes, no icons. * * The measure is 68ch, and it is scoped to `.trust-page` — bands are full-bleed * and a paragraph running the width of a 1600px band is unreadable, but a * global rule would also re-measure the dossier's and the home page's copy, * which are laid out against their own numbers and maps. * * ## Deliberately BELOW the critical boundary * * A hub page's first screen is a kicker, an `h1` and a `.lead`, and all three * are styled by rules already in the inlined prefix — so first paint is * correct without anything here. What arrives late is the measure on the * paragraphs of the SECOND band down, which on a phone can be partly visible: * they paint full-bleed and narrow when the stylesheet lands. * * That is the right trade and not an oversight. The critical block is inlined * into every response, so moving these rules above the marker would tax every * dossier and aggregate page in the site to smooth a reflow on five pages. */ .trust-page .band > p, .trust-page .band > ol, .trust-page .band > ul, .trust-page .band > dl { max-width: 68ch; } /* A list of assertions — "what is not here", "what happens next". The marker is an em dash in the accent, not a bullet: the design system has no round shapes, and these read as statements rather than as items. */ .statements { margin: 16px 0 0; padding: 0; list-style: none; } .statements > li { position: relative; padding: 0 0 0 22px; margin-bottom: 12px; font-size: 15px; line-height: 1.5; color: var(--n-800); } .statements > li:last-child { margin-bottom: 0; } .statements > li::before { content: "—"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .statements strong { color: var(--ink); } /* Prose after a statement list. `p` carries only a bottom margin, so without this the sentence that follows a list sits on its last item. */ .statements + p, .steps + p { margin-top: 14px; } /* Numbered procedure — the join chain, the import steps. The number is the point, so it is set in the heading face and hangs in the margin. */ .steps { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; } .steps > li { position: relative; padding: 0 0 0 34px; margin-bottom: 14px; font-size: 15px; line-height: 1.5; color: var(--n-800); counter-increment: step; } .steps > li:last-child { margin-bottom: 0; } .steps > li::before { content: counter(step); position: absolute; left: 0; top: 1px; min-width: 22px; font-family: var(--font); font-size: 13px; font-weight: 800; color: var(--accent); } .steps strong { color: var(--ink); } /* * Limitations. Set apart with a rule and a tint — these are the sentences the * whole hub exists to put in front of a reader, and the one place in the design * where a block earns emphasis for what it says rather than for where it sits. */ .limitations { margin: 16px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--divider); } .limitations > li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.5; color: var(--n-800); } .limitations > li:last-child { border-bottom: 0; } .limitations p { margin: 0 0 8px; } .limitations p:last-child { margin-bottom: 0; } /* Which dataset the limitation belongs to. Its own line, uppercase, small: the sentence is what matters and the attribution must not lead it. */ .limitation-source { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--n-700); } /* * A dataset's name on the sources page. The design system's h2 is a small * uppercase LABEL over a block of numbers, which is right everywhere else and * wrong here: this heading is the dataset's own name, sitting under a kicker * that names its publisher, and two stacked lines of uppercase micro-type read * as one confused label rather than as a title over its details. */ .dataset-title { margin: 0 0 16px; font-size: 21px; line-height: 1.15; letter-spacing: -.01em; text-transform: none; font-weight: 800; max-width: 34ch; } .dataset-title a { color: inherit; } .dataset-title a:hover { color: var(--accent); } .dataset-summary { margin-bottom: 18px; color: var(--n-800); } /* * Fact rows on the hub are provenance metadata, not measurements, so they take * the `.section-source` treatment rather than the dossier's: a fixed label * column and values that read left-to-right. * * The dossier's version right-aligns a value against an `auto` column, which is * right for "1 975" and wrong for a 90-character landing-page URL — one * unbreakable token sizes that column past the band and drops the value on top * of its own label. Both columns can shrink here, and the URL may break * anywhere it has to. */ .trust-page .facts dd { overflow-wrap: anywhere; } @media (min-width: 600px) { .trust-page .facts { grid-template-columns: 220px minmax(0, 1fr); } .trust-page .facts dd { text-align: left; } } @media (min-width: 900px) { .dataset-title { font-size: 26px; } } /* * The hub's row lists carry a whole sentence as their meta line, unlike the * place lists they share markup with — a settlement's meta is a number, which * is why those sit on the baseline at the far end of the row and these stack. */ .trust-page .rows a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; } .trust-page .rows .row-meta { max-width: 68ch; line-height: 1.45; } /* Footer nav ---------------------------------------------------------------- */ /* * The trust hub, on every page (task 34). Spans both footer columns so it reads * as a row of links under the licence text rather than as a third column * competing with it. */ .footer-nav { margin-top: 20px; } .footer-nav ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; } .footer-nav a { display: block; min-height: 32px; padding: 6px 0; font-size: 13px; font-weight: 600; } @media (min-width: 900px) { .footer-source { grid-column: 1 / -1; } .footer-nav { grid-column: 1 / -1; margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--rule); } .footer-nav a { font-size: 14px; } }