/* Postcode page. * * Hand-written, no framework, no build step. The page must be readable with * JavaScript disabled and small enough to ship across ~1.8M static files, so * the whole stylesheet is one file of a few KB and there is no font request at * all - display type is the system sans, sized and tracked for hierarchy. * * Light is the base palette. Dark is reachable two ways and both must work: * the OS preference, and an explicit data-theme on for a user-set * override. Never define a colour only inside the media query. */ :root { color-scheme: light dark; --paper: #f6f7f8; --card: #ffffff; --sunk: #eef0f2; --ink: #14181b; --muted: #5c646d; /* Rules carry the structure of the scanning grid, so the strong one is a real step off the paper rather than a whisper. */ --rule: #cfd5da; --rule-soft: #e4e8ea; --accent: #0d6b4f; --accent-soft: #e3efe9; --amber: #8a5a12; --amber-soft: #f7ecd9; --bad: #8d2119; --bad-soft: #f8e5e3; --good: #0d6b4f; --good-soft: #e3efe9; /* Brand colours, for the mark and wordmark only. Coral never appears in the page body: red there means a poor rating, and a coral accent would read as one. */ --brand-ink: #1c2b4a; --brand-coral: #e2574c; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --wrap: 1140px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0f1214; --card: #16191c; --sunk: #1d2125; --ink: #e9eced; --muted: #9aa2a9; --rule: #2d3236; --rule-soft: #23272b; --accent: #64c49f; --accent-soft: #16271f; --amber: #dca949; --amber-soft: #2a2314; --bad: #f0928a; --bad-soft: #2b1817; --good: #64c49f; --good-soft: #16271f; --brand-ink: #dfe6f3; --brand-coral: #ef6f64; } } :root[data-theme="dark"] { --paper: #0f1214; --card: #16191c; --sunk: #1d2125; --ink: #e9eced; --muted: #9aa2a9; --rule: #2d3236; --rule-soft: #23272b; --accent: #64c49f; --accent-soft: #16271f; --amber: #dca949; --amber-soft: #2a2314; --bad: #f0928a; --bad-soft: #2b1817; --good: #64c49f; --good-soft: #16271f; --brand-ink: #dfe6f3; --brand-coral: #ef6f64; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--paper); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; } /* Hierarchy without a second family: size, weight and negative tracking. */ h1, h2, h3 { font-weight: 680; letter-spacing: -.022em; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } strong { font-weight: 600; } a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: -9999px; background: var(--accent); color: #fff; padding: .7rem 1rem; z-index: 10; } .skip:focus { left: 0; top: 0; } /* --- masthead --- */ .mast { background: var(--card); border-bottom: 1px solid var(--rule-soft); } .mast .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; min-height: 56px; padding-top: 10px; padding-bottom: 10px; } .brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-weight: 700; font-size: 20px; letter-spacing: -.03em; color: var(--brand-ink); } /* The wordmark is a logo, not a link colour: it stays put on hover. */ .brand:hover { color: var(--brand-ink); } .brand-mark { display: block; flex: none; } .brand-mark .g { fill: var(--brand-ink); } .brand-mark .r { stroke: var(--card); } .brand-mark .d { fill: var(--brand-coral); } /* On a phone the brand and the jump control share the first row and the search takes the second. */ @media (max-width: 700px) { .mast .wrap { row-gap: 8px; } .mast form { margin-left: 0; flex: 1 1 100%; max-width: none; order: 3; } .jump-menu { margin-left: auto; } } .mast form { margin-left: auto; display: flex; gap: 8px; flex: 0 1 300px; max-width: 340px; } .mast input { font: inherit; font-size: 14px; padding: 10px 13px; min-height: 44px; flex: 1 1 auto; min-width: 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); } .mast button { font: inherit; font-size: 14px; font-weight: 600; padding: 10px 16px; min-height: 44px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; white-space: nowrap; } .mast button:hover { background: color-mix(in srgb, var(--accent) 88%, #000); } /* --- section jump, in the masthead --- It previously had a sticky bar to itself: 61px as a pill strip showing 5 of 19 destinations, then 53px as a lone control. The masthead already sticks, so the control moves in and the bar disappears. */ .mast { position: sticky; top: 0; z-index: 6; } .jump-menu { position: relative; display: inline-block; } .jump-menu > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; } .jump-menu > summary::-webkit-details-marker { display: none; } .jump-menu > summary::marker { content: ""; } .jump-menu > summary:hover { border-color: var(--accent); color: var(--accent); } .jump-menu[open] > summary { border-color: var(--accent); color: var(--accent); } .jump-menu[open] .chev { transform: rotate(180deg); } .jump-menu .chev { transition: transform .15s ease; } /* Overlays the page rather than pushing it down, so opening the menu never moves the content underneath. */ .jump-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 7; width: min(680px, calc(100vw - 36px)); background: var(--card); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .12); padding: 8px; max-height: min(70vh, 520px); overflow-y: auto; } .jump-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; } .jump-panel a { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14px; } .jump-panel a:hover { background: var(--accent-soft); color: var(--accent); } .jump-panel .ic { color: var(--accent); flex: 0 0 auto; } .jump-label { min-width: 0; } .jump-d { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--muted); } /* --- breadcrumb --- */ .crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); padding: 16px 0 0; margin: 0; list-style: none; } .crumb a { text-decoration: underline; text-underline-offset: 2px; } /* --- hero: the map leads; the postcode sits on a solid plate over it so the type never has to fight the tiles for contrast --- */ .hero { padding: 14px 0 0; } .map { position: relative; height: clamp(300px, 38vw, 400px); display: flex; align-items: flex-end; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; } /* The map surface carries role="img" and its label, so it must be an empty leaf: the h1 and lede sit in .hero-plate, a sibling outside it. */ .map-surface { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, var(--card), var(--card) 16px, var(--sunk) 16px, var(--sunk) 32px); } .hero-plate { /* Above the map layer: MapLibre paints a canvas across .map-surface, and without a stacking order the heading disappears behind it. */ position: relative; z-index: 2; margin: clamp(14px, 2vw, 22px); padding: 20px clamp(20px, 2.4vw, 28px) 22px; background: var(--card); border: 1px solid var(--rule-soft); border-radius: 12px; max-width: min(470px, calc(100% - 28px)); } h1.pc { font-size: clamp(40px, 5.6vw, 58px); line-height: .98; letter-spacing: -.03em; margin: 0 0 10px; } .lede { font-size: 17px; color: var(--muted); margin: 0; text-wrap: pretty; } .lede strong { color: var(--ink); } /* --- section headers --- */ .sec { padding: 42px 0 0; scroll-margin-top: 60px; } .sec-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 10px; } .sec-head h2 { font-size: clamp(25px, 3vw, 32px); margin: 0; line-height: 1.06; } .sec-head p { font-size: 14px; color: var(--muted); margin: 0 0 0 auto; max-width: 46ch; text-align: right; } /* --- the answer board: the point of the page --- The closest of each kind, nearest first, so the common case ("where is the nearest X") is answered without scrolling into a section. */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); column-gap: 36px; } .cell { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 66px; padding: 15px 8px 15px 6px; border-bottom: 1px solid var(--rule-soft); border-radius: 8px; } .cell:hover { background: var(--accent-soft); } /* Only a pointer once JavaScript has made it one. map.js sets .has-map on the root; without it the cell draws no route and must not pretend to. */ .has-map .cell { cursor: pointer; } .has-map .cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .cell .ic { color: var(--accent); } .cell-body { min-width: 0; } .cell-kind { display: block; font-size: 13px; color: var(--muted); } /* Up to two lines rather than one clipped one: real names ("Coley Kenward & Partners Dental Practice") need the room, and a clipped name is the thing the reader came for. */ .cell-name { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.35; text-wrap: pretty; } /* The distance is the second most important fact after the name, so it is set at 16.5px in the mono column rather than as small print. */ /* The way into the full section, now that clicking the cell draws the route instead of jumping. Understated: the cell's job is the name and the distance, and this is the second thing a reader might want, not the first. It appears on hover and focus on a pointer device, and stays visible on touch, where there is no hover to reveal it. */ .cell-all { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; opacity: 0; transition: opacity .12s ease; } .cell:hover .cell-all, .cell:focus-within .cell-all, .cell-all:focus-visible { opacity: 1; } @media (hover: none) { .cell-all { opacity: 1; } } .cell-dist { text-align: right; } .cell-dist .d { display: block; font-family: var(--mono); font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; } .cell-dist .sub { display: block; font-size: 12px; color: var(--muted); } /* --- the two measures --- */ .measures { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 14px; overflow: hidden; margin-top: 18px; } .measure { padding: 22px clamp(18px, 2.2vw, 26px) 24px; background: var(--card); } .measure h3 { font-size: 14px; color: var(--muted); margin: 0 0 6px; font-weight: 500; letter-spacing: 0; } .measure .big { font-size: 25px; font-weight: 680; letter-spacing: -.022em; line-height: 1.18; margin: 0 0 6px; } .measure .note { font-size: 14px; color: var(--muted); max-width: 48ch; margin: 0 0 20px; text-wrap: pretty; } /* Ten cells with the one that applies inked and taller, plus a label at each end: a decile needs its direction explained or the bar means nothing. */ .scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; align-items: end; } .scale i { display: block; height: 12px; background: var(--sunk); border: 1px solid var(--rule); border-radius: 3px; } .scale i.on { height: 26px; background: var(--accent); border-color: var(--accent); } .scale-key { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); margin-top: 8px; } .bars { display: grid; gap: 10px; } .bar { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; gap: 5px 12px; align-items: center; font-size: 14px; } .bar .t { min-width: 0; } .bar .n { font-family: var(--mono); font-size: 13.5px; text-align: right; font-weight: 600; } .bar .track { grid-column: 1 / -1; background: var(--sunk); border-radius: 4px; height: 9px; overflow: hidden; } /* display:block matters: an inline box ignores width and height, and every bar would render as an identical empty track. */ .bar .fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; } /* --- collapsible category sections --- Eighteen open sections made the page 16,128px tall and the last one started at y=14,947 - never seen. Native
collapses them: no JS, keyboard accessible, and crawlers still index the contents. The closed summary carries the nearest entry and its distance, so a shut section still answers something. */ .listing { border-bottom: 1px solid var(--rule-soft); scroll-margin-top: 58px; } .listing > summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 18px; gap: 16px; align-items: center; padding: 17px 4px; cursor: pointer; min-height: 52px; list-style: none; } .listing > summary::-webkit-details-marker { display: none; } .listing > summary::marker { content: ""; } .listing > summary:hover { color: var(--accent); } .listing > summary .ic { color: var(--accent); } .sum-body { min-width: 0; } .sum-label { display: block; font-size: clamp(18px, 2vw, 21px); font-weight: 650; letter-spacing: -.015em; line-height: 1.25; } .sum-hint { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; text-wrap: pretty; } .sum-hint strong { color: var(--ink); } .sum-dist { font-family: var(--mono); font-size: 15.5px; font-weight: 600; text-align: right; } .chev { color: var(--muted); transition: transform .15s ease; } .listing[open] .chev { transform: rotate(180deg); } .listing-body { padding: 2px 0 20px; } .blurb { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; max-width: 78ch; text-wrap: pretty; } .rest { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; } ol.places { list-style: none; margin: 0; padding: 0; } /* Three columns: distance, the entry, and the map control. The control used to sit inside the entry, which pushed it onto a line of its own and added 36px to every row while 1,000px of width went unused. */ ol.places li { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 13px 0; border-top: 1px solid var(--rule-soft); } .place-dist .d { display: block; font-family: var(--mono); font-size: 15.5px; font-weight: 600; } .place-dist .sub { display: block; font-size: 12px; color: var(--muted); } .place-main { min-width: 0; } /* display:block matters: these are spans inside a grid item, and an inline box would let name, chips and meta run together as one wrapped paragraph. */ .place-title { display: block; } .place-name { font-size: 15.5px; font-weight: 600; } .place-name a { text-decoration: underline; text-underline-offset: 2px; } .place-meta { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; text-wrap: pretty; } /* Colour means exactly one thing: green a good rating, amber middling, red poor, and a plain outline a neutral category label. A chip must vary to earn its place - chips identical across every row of a section are dropped, and nothing shown as a chip is repeated in the meta line. No rating is ever a bare number: Ofsted runs 1 = Outstanding and the FSA runs 5 = Very good, so the words always travel with the figure. */ .tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 5px; margin-left: 8px; vertical-align: 2px; white-space: nowrap; } .tag.good { background: var(--good-soft); color: var(--good); } .tag.mid { background: var(--amber-soft); color: var(--amber); } .tag.poor { background: var(--bad-soft); color: var(--bad); } .tag.cat { border: 1px solid var(--rule); color: var(--muted); font-weight: 500; padding: 0 6px; } /* --- neighbours --- */ .pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .pc-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 46px; padding: 8px 14px; background: var(--card); border: 1px solid var(--rule-soft); border-radius: 10px; font-size: 14.5px; } .pc-list a:hover { border-color: var(--accent); color: var(--accent); } .pc-list .pc { font-weight: 600; } .pc-list .d { font-family: var(--mono); font-size: 12.5px; color: var(--muted); } /* The same slot holds a distance on a postcode page and a ward name on an index page; mono figures suit the first and misrepresent the second. */ .pc-list .ward { font-size: 12.5px; color: var(--muted); text-align: right; } /* Revealed by map.js once the map is actually running. */ .on-map { display: inline-flex; align-items: center; gap: 5px; justify-self: end; font: inherit; font-size: 12.5px; padding: 4px 11px; min-height: 32px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; white-space: nowrap; } .on-map:hover { border-color: var(--accent); color: var(--accent); } .on-map[hidden] { display: none; } .more { display: inline-block; margin-top: 16px; font-size: 14px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* --- reference data: coordinates and official geography, demoted to the foot of the page where the people who need codes will look for them --- */ .ref-head h2 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.02em; } .ref-head p { font-size: 14px; color: var(--muted); margin: 0 0 16px; max-width: 70ch; } .ref-card { background: var(--card); border: 1px solid var(--rule-soft); border-radius: 14px; padding: 18px clamp(18px, 2.2vw, 26px) 20px; } .ref-card dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 28px; margin: 0; } .ref-card dt { font-size: 13px; color: var(--muted); } .ref-card dd { margin: 2px 0 0; font-size: 14px; } .ref-card dd.mono { font-family: var(--mono); } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 44px; margin-top: 22px; } .cols h3 { font-size: 15px; font-weight: 600; letter-spacing: 0; margin: 0 0 4px; } table.facts { width: 100%; border-collapse: collapse; font-size: 14px; } table.facts th, table.facts td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; } table.facts th { color: var(--muted); font-weight: 400; width: 45%; padding-right: 12px; } table.facts td { font-weight: 500; } .code { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-weight: 400; } /* --- footer --- */ .foot { margin-top: 52px; border-top: 1px solid var(--rule-soft); background: var(--card); } .foot .wrap { padding-top: 24px; padding-bottom: 48px; font-size: 12.5px; color: var(--muted); } .foot h2 { font-size: 14px; font-weight: 600; letter-spacing: 0; margin: 0 0 8px; color: var(--ink); } /* The footer runs the full column width: these are licence obligations, and an 80ch measure squeezed them into a narrow ribbon down one side. */ .foot-intro { margin: 0 0 14px; max-width: 90ch; } .credits { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; } .credits li { padding-left: 14px; position: relative; line-height: 1.55; } .credits li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--rule); } .foot-meta { margin: 0; color: var(--muted); } /* --- responsive: 360px to 1600px+, no horizontal overflow, no clipped names --- Breakpoints come from measured column widths, not round numbers: the board needs ~1100px before the name box stops being cramped, and below 700px a two-column board wastes the row on one entry. */ @media (max-width: 1100px) { .grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 28px; } } @media (max-width: 700px) { .sec { padding-top: 34px; } .sec-head { gap: 6px; } .sec-head p { margin-left: 0; text-align: left; max-width: none; } .grid { grid-template-columns: 1fr; } .cols { grid-template-columns: 1fr; } .measures { grid-template-columns: 1fr; } .hero-plate { margin: 10px; padding: 14px 16px 16px; max-width: calc(100% - 20px); } .map { height: 260px; } .lede { font-size: 16px; } /* The distance moves above the name rather than fighting it for width, and keeps the mono column so it still reads as the second answer. */ ol.places li { grid-template-columns: 1fr auto; gap: 2px 12px; align-items: start; } /* Too narrow for the label; the pin alone is enough beside an entry. */ .on-map { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 4px 8px; } .on-map-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .place-dist { display: flex; align-items: baseline; gap: 10px; } /* At this width the summary distance would squeeze the label, so it joins the hint line instead of taking a column of its own. */ .listing > summary { grid-template-columns: 22px minmax(0, 1fr) 16px; gap: 12px; } .sum-dist { grid-column: 2; grid-row: 2; text-align: left; margin-top: 2px; } .sum-hint { display: inline; } .ref-card dl { grid-template-columns: 1fr 1fr; gap: 12px 18px; } } @media (max-width: 420px) { h1.pc { font-size: 38px; } .mast .wrap { padding-top: 12px; } .mast form { margin-left: 0; max-width: none; } .cell { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; } .ref-card dl { grid-template-columns: 1fr; } table.facts th { width: 42%; } } @media (min-width: 1400px) { :root { --wrap: 1240px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* --- find a postcode --- The /search/ page and the 404 share this. Wider than the masthead field because it is the only thing on the page, and the masthead's flex basis would leave it stranded at 300px in the middle of an empty column. */ .find { display: flex; gap: 10px; max-width: 30rem; margin: 22px 0 0; } .find input { font: inherit; font-size: 16px; padding: 12px 15px; min-height: 50px; flex: 1 1 auto; min-width: 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); } .find input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .find button { font: inherit; font-size: 15px; font-weight: 600; padding: 12px 20px; min-height: 50px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; white-space: nowrap; } .find button:hover { background: color-mix(in srgb, var(--accent) 88%, #000); } /* The Browse menu sits left of "Jump to" and is a list of short codes, so it needs less width than the section menu it borrows its styling from. */ .browse-menu .jump-panel { min-width: 13rem; } .browse-menu .jump-panel ul { max-height: 60vh; overflow-y: auto; } /* --- homepage --- The search box is the hero, not a masthead afterthought. Everything else on the page answers "what would I get?" with counts read from the database, because a number that is actually true beats a paragraph that claims. */ .home-hero { padding: clamp(28px, 6vw, 64px) 0 clamp(20px, 3vw, 34px); max-width: 44rem; } .home-hero h1 { font-size: clamp(38px, 7vw, 68px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 18px; } /* The second line is the question the site answers, so it carries the accent and drops the italic's default slant-only treatment. */ .home-hero h1 em { font-style: normal; color: var(--accent); } .home-hero .lede { font-size: clamp(16px, 2vw, 19px); max-width: 38rem; } .find-lg { max-width: 34rem; margin-top: 28px; } .find-lg input { font-size: 17px; min-height: 56px; } .find-lg button { min-height: 56px; } .tally { display: flex; flex-wrap: wrap; gap: 10px 32px; list-style: none; margin: 26px 0 0; padding: 0; font-size: 14px; color: var(--muted); } .tally .n { font-family: var(--mono); font-size: 19px; font-weight: 650; color: var(--ink); letter-spacing: -.02em; margin-right: 6px; } .sub { font-size: 15px; font-weight: 600; letter-spacing: 0; margin: 22px 0 8px; color: var(--muted); } .blurb-wide { max-width: 60ch; margin-top: 14px; } /* Sample postcodes reuse .pc-list; only the second slot differs - a ward name rather than a count, so it must not be set in mono figures. */ .sample-list { margin-top: 16px; } .holds { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .holds li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; background: var(--card); border: 1px solid var(--rule-soft); border-radius: 10px; font-size: 14.5px; } .holds .ic { color: var(--accent); flex: 0 0 auto; } .holds-label { min-width: 0; } .holds-n { margin-left: auto; font-family: var(--mono); font-size: 13.5px; color: var(--muted); } /* Property sales: the year bars carry a price rather than a count, so the figure column needs room for "£1,250k" without wrapping. */ #prices .bar { grid-template-columns: minmax(0, 1fr) 4.5rem; } #prices .bar .code { font-family: var(--mono); font-size: 11.5px; } /* Group heading inside the jump menu. Not a link, so it must not look like one, and it is announced by nothing - the links either side carry the meaning, so it is hidden from assistive tech rather than read as an orphan. `grid-column: 1 / -1` is the whole point: the panel is a multi-column grid, so without it the heading took one cell in the middle of a column and drew its rule across a third of the menu. A divider has to span the row it divides. */ .jump-sep { grid-column: 1 / -1; padding: 14px 10px 6px; margin-top: 6px; border-top: 1px solid var(--rule-soft); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }