/* ============================================================ this site's == THE ONLY STYLESHEET THAT BELONGS TO THE SITE RATHER THAN THE FRAMEWORK. site.css is ours. A release replaces it wholesale, and only when the site has not touched it — so the moment a site edits one rule in there, that file is a hand-merge on every release from then on, for ever. Crafting Realm's ended up 466 lines adrift and the planner would not go near it. Three rules should not cost that. This file is on the release system's SITE_OWNED list, beside server/site.ts and script/seed-site.ts. Nothing upstream will ever replace it, and it is loaded AFTER site.css, so anything here wins without needing !important. WHAT BELONGS HERE: an override that is true of this client and no other — their traders' logos must not be cropped, their gallery wants smaller tiles, they call the people on a page something else. WHAT DOES NOT: anything any other site would also want. That is a framework change, and it goes upstream so every site gets it. The test is simple — if you can imagine writing the same rule again on the next site, write it in the framework instead. Empty, nothing is linked at all: a site with nothing of its own does not pay for the request. ========================================================================== */ /* ---------------------------------------------- the header says it once -- */ /* THE MARK ALREADY CARRIES A NAME, AND THE HEADER WAS PRINTING A SECOND ONE. Beside the lockup the bar read "Moss House & Moss Yard" over "Student accommodation in Leamington Spa" — two names and a strapline in a space that wants one. The strapline has moved to the black strip above (toplineText in server/site.ts) and the names have gone. WHY CSS AND NOT THE SETTING. `showNameWithLogo` is the switch for this, and it is inert here: namePrintedWithLogo() in lib/settings.ts is `showNameWithLogo || !logo`, and `logo` is only ever set from the picture library. This site's mark is a file in public/img — deliberately, see CLAUDE.md — so as far as that guard is concerned there is no logo and the name must be printed. The guard is right in general; it just cannot see this case. HIDDEN, NOT REMOVED. The words stay in the document and stay available to a screen reader, because the only other thing inside that link is an with an empty alt — delete the text and the link home has no accessible name at all. This is the standard visually-hidden pattern, and being out of flow means the flex gap beside the mark goes with it. */ header.site .brandmark > span{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* The footer still prints the name, and it has the room — it just has not got room for the lockup and the name on one line at phone width. The name drops underneath rather than being shortened: a footer is where a visitor checks who they are dealing with. */ @media (max-width:560px){ footer.site .brandmark{flex-wrap:wrap} footer.site .brandmark .name{white-space:normal} } /* ------------------------------------------------- the four facts, boxed -- */ /* THE NUMBERS ARE THE ARGUMENT, and they were four grey captions with a figure over each. Forty-seven bedrooms, £130 a week, EPC A and five hundred metres to the station are the four things a student decides on, and on the front page they read as a footnote to the photograph above them. So each one gets a card of its own — surface, border, the shape token, the same furniture as every other card on the site — the figure grows and takes the brand colour, and the caption under it stops being a hint and becomes a line somebody is meant to read. TWO THINGS ABOUT THE SELECTOR, both of which are the block's fault rather than ours. It has no class: blocks.ts renders `facts` as a bare
and a
of unclassed divs, so the only handle is the inline `text-align:center` it writes on each one — `.grid.four` alone would also catch the team and the shop. And the sizes it writes are inline too, which no stylesheet can out-specify, hence `!important` on exactly those three properties and nowhere else. AND THE SIZE IT WRITES IS NOT VALID CSS. `clamp(2rem,1.4rem+2.4vw,3.2rem)` has no whitespace around the `+`, which a math function requires, so the browser throws the whole declaration away and the figure has been rendering at 17px — body-text size — on this site and on every other site built on this framework since the block was written. That is why the numbers never looked like numbers. The same fault is in the quote block two cases above it in blocks.ts. Fixed properly it is two spaces in each; fixed here it is the rule below, written the way a math function has to be. All of it is worth closing upstream — a `.facts` class, a boxed variant, and those two spaces — at which point this rule should go. Until then it fails safe: if a release changes that inline string the cards quietly become the old plain row again, which is a worse-looking page rather than a broken one. */ .grid.four > div[style="text-align:center"]{ background:var(--surf); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.4vw,32px) 18px; box-shadow:var(--shadow); } .grid.four > div[style="text-align:center"] > p.disp{ font-size:clamp(2.6rem, 1.9rem + 2.6vw, 3.9rem) !important; color:var(--brand); line-height:1; } .grid.four > div[style="text-align:center"] > p.hint{ font-size:1rem !important; margin-top:12px !important; color:var(--ink); font-weight:600; line-height:1.4; } /* ------------------------------------- the figures when something is beside them -- */ /* The boxed figures above are sized for four across a whole page. Paired with the journeys they are four in two columns in the narrower half, where 3.9rem puts "£130" each on a line of its own (and did "EPC A/B" while Moss House was rated B). The framework writes a smaller clamp inline for exactly this case; this is the same decision for the boxes, which are ours. */ /* AND SINCE 28 SEP 2026 THEY SHARE THEIR COLUMN WITH A PARAGRAPH (framework 1.56.0's intro), and Simon asked for the two halves to finish level with no gaps. So the boxes are smaller than the rule above made them, and the column is a flex column whose grid takes whatever height the journeys panel leaves it: the boxes stretch to meet the panel's bottom edge rather than stopping short of it or overhanging it. Their words centre in the height they are given. If the paragraph grows long enough that the column is taller than the panel, nothing breaks — the panel simply ends first, as it did before. Measured at 1600 wide on 28 Sep: intro 196px, boxes 115px each, both columns 457px, bottoms level to the pixel. */ .facts-pair{align-items:stretch} .facts-pair .facts-half{display:flex; flex-direction:column} .facts-pair .facts-half > .facts-intro{margin-bottom:18px} .facts-pair .facts-half > .grid.four{flex:1; grid-auto-rows:1fr; gap:12px} .facts-pair .grid.four > div[style="text-align:center"]{ padding:12px !important; display:flex; flex-direction:column; justify-content:center; } .facts-pair .grid.four > div[style="text-align:center"] > p.disp{ font-size:clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem) !important; } .facts-pair .grid.four > div[style="text-align:center"] > p.hint{ font-size:.86rem !important; margin-top:6px !important; line-height:1.3; } /* ------------------------------------------- the Ready to Go button, in teal -- */ /* The third button at the top of each building (framework 1.52.0) comes as a ghost, like "Ask about a room" beside it. Simon asked on 28 Sep 2026 for it in the teal of "way" in the Sureway mark — #00919E, read out of the palette of the picture inside public/img/logo.svg, not matched by eye — so it reads as the business's offer rather than a third way of asking about a room. Matched on the address because the framework gives the button no class of its own. If headLinkHref ever changes in script/set-labels.ts, this has to change with it or the button quietly goes back to a ghost. White on this teal is 3.8:1, under the 4.5:1 that AA asks of text this size. The darker teal on the logo's own edge, #007A8F, is 5.0:1 and is the one to use if that ever matters more than matching the mark exactly. */ .letting-words .btn-row a.btn.ghost[href="/ready-to-go"]{ background:#00919E; color:#fff; box-shadow:var(--shadow); } .letting-words .btn-row a.btn.ghost[href="/ready-to-go"]:hover{filter:brightness(.93)} /* ---------------------------------------- Prices & Availability, on the teal -- */ /* The rooms section of each building page on the teal of "way" in the mark, #00919E — Simon, 28 Sep 2026, to go with the Ready to Go button in the same colour. The room cards keep their own white surface, so every price, badge and Enquire button is exactly as legible as before; only the heading and the line under it sit on the colour, and they turn white. #rooms is the framework's id for this section on a building page and is used nowhere else on the site, which is what makes it safe to hang this on. The same contrast note as the button: white on #00919E is 3.8:1. That passes for the heading, which is large, and falls short of AA's 4.5:1 for the line under it. #007A8F from the logo's edge is 5.0:1 if it has to. */ section#rooms{background:#00919E} section#rooms > .shell > .section-head h2, section#rooms > .shell > .section-head .lede{color:#fff} /* --------------------------- the description's first heading, level with Getting about -- */ /* Both building pages open their description with a heading now ("The property", "The building"), and a heading carries the room above it that separates it from the paragraph before — which the FIRST one has no use for. It sat 70px down the column while "Getting about" beside it sat 40px inside its panel, the same size and visibly out of line (Simon, 28 Sep 2026). So the first heading's top space is the panel's own top padding, the same clamp() as .travel-panel in site.css, and the two headings share a line at every width. If that padding changes upstream, this has to follow it. Only the first child: every later heading keeps its gap. */ .letting-cols .letting-prose > .prose > h2:first-child{margin-top:clamp(24px,3vw,40px)} /* ------------------------------ the two building names on the home page -- */ /* David, 19 Oct 2026: "increase the font size for the words Moss House and Moss Yard" on the landing page. They are the h2 of two image-and-text blocks, which the framework gives no class of their own, so the blocks are picked out by the button each carries to its building — the one thing on the page that says which block is which. Set to the h1 size, the same clamp() as h1 in site.css, so they read as the two headlines of the page rather than as two more section headings. The Ready to Go page's block of the same kind is untouched, because it links somewhere else. */ .split:has(a[href="/accommodation/moss-yard"]) h2, .split:has(a[href="/accommodation/moss-house"]) h2{ font-size:calc(clamp(2.1rem,1.3rem + 3.2vw,3.9rem) * var(--dsc,1)); } /* ------------------------------- the headings inside the teal rooms section -- */ /* Framework 1.88.0 put two kinds of heading inside #rooms — "Book a whole flat" / "Or a room at a time", and a heading over each floor — and both are coloured for a pale ground. On this site's teal they turn white, the floor ones a touch quieter, the same as the section's own heading above. */ section#rooms > .shell > .rooms-sub{color:#fff} section#rooms > .shell > .rooms-floor{color:rgba(255,255,255,.85)} /* ------------------------------------ the bar at the foot of the window, in teal -- */ /* Framework 1.91.0 draws it on the deep ground. Simon, 19 Oct 2026: "the green colour of the logo to stand out" — the teal of "way" in the mark, #00919E, the same figure as the Ready to Go button and the rooms section above, read out of public/img/logo.svg. White on it is 3.8:1, which is fine for one bold line of this size; #007A8F from the logo's edge is the fallback if that ever matters. */ .sticky-bar{background:#00919E} .sticky-bar:hover,.sticky-bar:focus-visible{filter:brightness(1.08)}