/* * 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; /* 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); } .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 BUTTON, though, belongs on the wordmark's row at the right, which is * where a phone reader's thumb looks for it. 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; } .site-menu { flex: 1 1 100%; } /* * Pins the first row's height wherever the menu exists, so the burger 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 burger, 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: calc(var(--pad-x) - 10px); display: flex; align-items: center; justify-content: center; /* Matches .site-header's min-height, so the bars centre on the first row however tall the open panel below makes the header. */ height: 56px; width: 44px; color: var(--ink); cursor: pointer; list-style: none; } .site-menu > summary::-webkit-details-marker { display: none; } /* * Three bars, drawn rather than set as a glyph — ≡ inherits the header's * letter-spacing and sits off its own baseline. The middle bar is the element; * the outer two are its pseudo-elements, so the whole control is one span. */ .burger, .burger::before, .burger::after { display: block; width: 22px; height: 2px; background: currentColor; } .burger { position: relative; } .burger::before, .burger::after { content: ""; position: absolute; left: 0; transition: transform .15s ease; } .burger::before { top: -7px; } .burger::after { top: 7px; } /* Open, it becomes the close control it now is: the middle bar goes, the outer two meet in the middle. */ .site-menu[open] .burger { background: transparent; } .site-menu[open] .burger::before { transform: translateY(7px) rotate(45deg); } .site-menu[open] .burger::after { transform: translateY(-7px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .burger::before, .burger::after { 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 input { flex: 1 1 10rem; 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 input { flex: 1 1 100%; 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; } @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 input { flex: 1 1 auto; 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; } } /* 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; } /* 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 { 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; } } /* 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; } @media (min-width: 900px) { .band-hero { padding-top: 56px; padding-bottom: 48px; } .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: 36px; } } /* 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; } .map-panel { padding: 0 var(--pad-x) var(--pad-y); } .map { margin: 0; } .map-frame { position: relative; overflow: hidden; width: 100%; max-width: 512px; height: 220px; 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); } @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 { display: grid; grid-template-columns: 1fr 480px; gap: 2px; background: var(--divider); } .hero-with-map > * { background: var(--bg); } .map-panel { padding: 32px 32px 32px 30px; } .map-frame { height: 320px; } } /* ========================================================================== 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 */ /* 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; } } /* 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-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; } .compare-note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--n-700); } @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; } } /* 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); } @media (min-width: 900px) { .cells { grid-template-columns: repeat(3, 1fr); } .cells > li { padding: 36px 32px 40px; } .cells p { font-size: 17px; } } /* 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; } /* Source note ------------------------------------------------------------- */ /* * Every section carries its provenance (§11.4). It is set quietly — small, * muted, under a hairline — because it must be present on every section * without competing with the facts above it. */ .section-source { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--n-700); } .section-source dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; max-width: 1000px; } .section-source dt { font-weight: 700; } .section-source dd { margin: 0 0 8px; } .section-source dd:last-child { margin-bottom: 0; } @media (min-width: 600px) { .section-source dl { grid-template-columns: 200px 1fr; gap: 4px 24px; } .section-source dd { margin: 0; } } /* 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; } /* 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); } /* 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); } .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); } /* * 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-nav { grid-column: 1 / -1; margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--rule); } .footer-nav a { font-size: 14px; } }