/* ══════════════════════════════════════════════════════════════════════════ THE SHELL. Every page on the site loads this, and only this. SPLIT OUT OF hibant-ds.css ON 30 Aug 2026, and the reason is a collision that would have hit 105 pages at once. The plan was to put the whole design file on every page so they could all wear the new header. Measured first, and seven selectors are defined in BOTH this design system and shared/hibant.css, which those 105 pages already load: .btn, .pill, .av, .back, .cb, body and footer. Whichever file loads last wins, so adding the design file wholesale would have restyled EVERY BUTTON ON THE SITE, changed the pills and the avatars, and broken layout outright at .cb, which means a card body in one file and a checkbox row in the other. SO THIS FILE IS ONLY WHAT EVERY PAGE GENUINELY SHARES: the palette, the box model, the header, and the footer. Not one of those collides, except the footer, and that one is deliberate: hibant.css paints it dark and the founder ruled on 30 Aug that it should match the rest of the platform. The search box, the carer cards and the profile stayed in hibant-ds.css. Two pages use them. 105 do not. LOAD ORDER: after shared/hibant.css, so the footer override lands, and before shared/hibant-ds.css on the pages that use both. ══════════════════════════════════════════════════════════════════════════ */ /* shared/hibant-ds.css * * THE HIBANT DESIGN SYSTEM. Honey and Teal, Editorial Warm. * * WHY THIS IS A NEW FILE RATHER THAN AN EDIT TO hibant.css. The portal is being * rebuilt to the demo (founder ruling 19 Aug, restated 22 Aug), and the method * is strangler rather than big bang. Swapping the tokens inside hibant.css * would repaint 20 live public pages in one move. This file is adopted screen * by screen as each one is rebuilt, and hibant.css dies when nothing loads it. * * WHERE EVERY NUMBER BELOW COMES FROM. "Palette and Type Options (4 Aug 2026)" * in the vault. It is not a taste document: it derives its contrast target from * measured lens transmittance in older eyes, and its touch targets from what a * person with a tremor can actually hit. Every ratio in the comments was * recomputed on 22 Aug 2026 rather than copied, with black-on-white (21.00) and * white-on-white (1.00) run alongside as controls so the numbers cannot be a * broken calculator. * * THE FIVE RULES THAT AN AUTOMATED CHECKER REPORTS AS GREEN, and that this file * exists to enforce: * 1. --bd is DECORATIVE ONLY. It is 1.41:1 on card. Legal as a divider, * illegal the moment it is the sole boundary of a control. Controls use * --bd-strong at 2px. * 2. EVERY TINT CHIP CARRIES A BORDER. The semantic tints run 1.19:1 to * 1.25:1 against card. A tinted callout without a border is invisible. * 3. NEVER ENCODE MEANING IN HUE ALONE. Every semantic state carries a shape * and a text label as well as a colour. * 4. NO DARK GROUNDS. Saturated brand colours gain contrast under protanopia * on light grounds and lose it on dark ones. This system is light only, * deliberately, and that is why there is no prefers-color-scheme block. * 5. THE CARD/PAGE BOUNDARY IS STRUCTURAL, NEVER TONAL. Card against page is * 1.20:1. A near-white card on a honey ground is a named older-adult * failure mode, so a card is bounded by a border and not by its tone. */ /* ── TOKENS. Option F, Honey and Teal, chosen 14 Aug 2026 ─────────────────── */ /* THE BOX MODEL, AND IT BELONGS HERE RATHER THAN ON A PAGE. Added 30 Aug 2026. FOUND BY A PANEL THAT CAME OUT 886px WIDE WHEN IT WAS TOLD TO BE 820. The reset lived in index.html's own inline CSS, so it never moved with the rules that depend on it, and find-a-carer.html was laying out in content-box: every width-constrained element with padding on that page was wider than the number written on it, by exactly its padding and borders. A design system that ships widths and padding and does NOT ship the box model is shipping numbers that mean something different on every page that adopts it. This is the first line of the file for that reason. */ *, *::before, *::after { box-sizing: border-box; } /* THE PAGE HAS TO PAINT ITS OWN GROUND, AND THREE PAGES WERE NOT. Found 30 Aug 2026 by looking at find-a-carer in a browser set to dark mode: the whole page behind the content was BLACK. Nothing was wrong with the content. The page simply never said what colour it was, so the browser painted its own canvas, and on a device in dark mode that canvas is dark. Why only some pages: the old hibant.css carries `body{background:var(--ww)}`, so every page loading it was covered by accident. find-a-carer, 404 and any future page built on the shell alone were not. --ww and --page are the same colour today, so this changes nothing on the pages that were already fine and everything on the ones that were not. `color` is here for the same reason: without it the text fell back to the browser default black rather than the ink token. */ body { background: var(--page); color: var(--t1); } :root { /* Grounds. LRV page 80.2, surface 90.2, card 97.4. */ --page: #FDFAF8; --surface: #F7F4F0; --card: #FFFFFF; /* Ink. t1 15.32:1 on card, t2 8.81:1, t3 6.68:1. t3 is 5.55:1 on --page, which passes AA and MISSES the older-eye target of 6.4:1. So t3 is for card only. See --t-min below. */ --t1: #2A2214; --t2: #574B3B; --t3: #6E6152; --t-min: var(--t2); /* the darkest thing safe as body text on --page */ /* Boundaries. */ --bd: #EAE2D7; /* 1.28:1 on card. DECORATIVE ONLY, remeasured 30 Aug. */ --bd-strong: #D8CCBC; /* 1.58:1 on card. DECORATIVE, the stronger of the two lines. It was 5.05:1 and the control boundary under Option F. It is NEITHER now: see --control-bd below. */ /* Brand. Warm ground, cool action: the brand shares no hue with the ground, which is what makes the primary button the most obviously clickable thing on the screen. White on brand is 7.40:1. */ --brand: #16544C; --brand-hover: #0F3E38; --brand-tint: #E2EEEB; --on-brand: #FFFFFF; /* ADDED 30 Aug 2026 with the locked palette. This file predates it and had no warm band, no accent and no semantic grounds, because Option F did not have them. shared/hibant.css already carries all of these under its legacy names. */ --band: #F5EADD; /* the peach cream care band */ --rust: #AA3E11; /* accent: active states and the second action */ --rust-hover: #8C3210; --rust-tint: #FBEFE9; /* THE CONTROL BOUNDARY, AND WHY IT IS NOT --bd-strong. Added 30 Aug 2026. This file's own rule 1 says a control boundary is never --bd, and it used --bd-strong instead, which under Option F was #7A6B52 and measured 5.18:1 on a card. The locked palette's --bd-strong is #D8CCBC, which measures 1.58:1. Both documents are right on their own terms: in the palette "bd-strong" means the stronger of two decorative LINES, and in this file it meant the colour every control OUTLINE uses. Together they would have made every secondary button, input, chip and tab outline effectively invisible, on the product whose accessibility spec was written for a 78 year old holding a phone. So the two meanings get two names. --bd-strong keeps the locked value and stays decorative; controls use this, which clears the 3:1 non-text bar on every ground it sits on: 4.10 on card, 3.95 on page, 3.74 on surface, 3.46 on the band. */ --control-bd: #8A7B69; --wrap: 1320px; /* the shell's max width, from index.html */ /* --hero fills the 62 point hole between brand (LRV 9.2) and page (80.2) that made the product read flat. t1 on hero is 7.86:1. t3 on hero is 3.43:1 and is BANNED, not merely discouraged. */ --hero: #F5EADD; --hero-edge: #D8CCBC; /* Semantic. Each ink is >= 5.9:1 on its own tint. */ --ok: #1C6038; --ok-bg: #DDEFE4; --info: #1E4C8E; --info-bg: #DEE7F7; --warn: #7A4E07; --warn-bg: #FAE7C3; --alert: #8F1C2E; --alert-bg: #F9DDDF; /* Accents, for people and categories. Never for state. */ --a1: #A2451A; --a1-bg: #F9E3D4; --a2: #553E96; --a2-bg: #E4DEF6; --a3: #215F49; --a3-bg: #D7ECE2; --a4: #6E5810; --a4-bg: #F1E6C4; /* Type. Editorial Warm: system fonts only, so nothing to licence across white-labelled council deployments and nothing to download. Resolves to Charter + SF Pro on Apple, Noto Serif + Noto Sans on Android, Sitka Text + Segoe UI Variable on Windows. */ --font-display: Charter, "Bitstream Charter", "Sitka Text", Georgia, "Noto Serif", "Palatino Linotype", serif; --font-body: "Noto Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; /* THE FLOOR IS 1rem AND NOTHING GOES BELOW IT, including timestamps, captions, helper text and legal. Body target is 19px. */ --fs-min: 1rem; /* 16px. The floor. */ --fs-body: 1.1875rem; /* 19px. GOV.UK ships this at every breakpoint. */ --fs-lead: 1.375rem; /* 22px */ --fs-h3: 1.5rem; /* 24px. WCAG large text starts here. */ --fs-h2: 1.875rem; /* 30px */ --fs-h1: 2.375rem; /* 38px */ --lh-body: 1.5; --lh-head: 1.2; /* Touch. Reasoned for a 78 year old with tremor holding a phone one handed. WCAG 2.2 SC 2.5.8's 24px is a legal floor, not a design target. */ --tap-primary: 56px; --tap-min: 48px; --glyph: 24px; --tap-gap: 8px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* --sp-8 ADDED 31 Aug 2026, and it is one scale rather than a new one. The landing page carried a private --s1..--s9 whose first seven values were identical to these; only its 64px section rhythm had no equivalent here, so that one step joins the shared scale instead of a second scale surviving to drift from this one. */ --sp-8: 64px; } @media (prefers-contrast: more){ :root { --t1: #201A0F; /* 16.62 on the page, remeasured 30 Aug against #FDFAF8 */ --t2: #403627; /* 11.38 on the page */ --t3: #564938; /* 8.40 on the page, so t3 becomes page safe here */ --brand: #16544C; /* 7.03 on page; white on it 8.67 */ --brand-hover: #0F3E38; /* white on it 11.67 */ --bd: var(--bd-strong); /* dividers stop being decorative */ } } :root[data-contrast="more"] { --t1: #201A0F; --t2: #403627; --t3: #564938; --brand: #16544C; --brand-hover: #0F3E38; --bd: var(--bd-strong); } @media (prefers-reduced-motion: reduce){ *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .skip:focus { top: var(--sp-4); } /* SCOPED TO body > header, 31 Aug 2026, AND THE BARE SELECTOR WAS A LEAK INTO TWELVE SCREENS. As `header` this said "any header element anywhere gets a cream panel and a rule under it". The portal's modules use
for their own headings: fc-head, ms-head, ms-thread__head, yu-head, pl-head, vs-head, iv-head, pf-head, nt-head, hp-head, sgn-head, cw-head. Every one of them was wearing this box. WORST ON THE BAND, where the greeting and "Your care" sit on an illustration. The box painted itself BETWEEN the picture and the words, and at night the band's ink is cream, so "Your care" measured 1.05:1 against it. Invisible. The greeting managed 1.61:1. AND IT DEFEATED THE CHECK THAT SHOULD HAVE CAUGHT IT. The contrast measured on 30 Aug read each element's COMPUTED background, which was this box, and returned 13.23:1 for a heading nobody could see. The arithmetic was right and the question was wrong: a contrast reading cannot tell you the background it found is not the background you meant. Guarded now by test/one-header.test.js, which checks the band's heading against the BAND, not against whatever paints behind it. `body > header` is exact rather than lucky: the site header is a direct child of body on every page that has one, and every module header is nested inside .pcon. Checked by asking the DOM on each page, not by reading the markup. */ body > header { background: var(--surface); border-bottom: 1px solid var(--bd); } /* ══════════════════════════════════════════════════════════════════════════ AND THE SAME MEASURE ON THE PUBLIC PAGES, added 31 Aug 2026. THE SITE HAD NO READING MEASURE AT ALL OUT HERE. The design system's rule is scoped to .hds, and NOT ONE PUBLIC PAGE CARRIES .hds: the portal mounts it per screen and the four preview files put it on body. So public prose was governed by whatever container happened to sit above it, and measured across the site that was six different rules giving six different answers: privacy.html 94.5 characters a line, 112.7 at worst (.ctr-sm 820px) about.html 79.3 91.3 (a bare p, 811px) blog article 74.8 87.7 (.article-body 720px) blog index 72.7 72.7 (.phs 1200px) about-the-care 49.3 49.3 (p.dest 625px) contact.html 46.0 46.0 (.ctr 960px) A HUNDRED AND THIRTEEN CHARACTERS A LINE IS THE PRIVACY POLICY, which is a document somebody has to read, on a site whose accessibility spec is written for a 78 year old. SCOPED TO `main`, NOT A BARE `p`. A bare element selector in a shared stylesheet is what put a cream box behind twelve portal headings two days ago. Every public page has exactly one
and PORTAL.HTML HAS NONE, so this cannot reach the portal, which has its own copy of the same number through .hds. Checked by asking each page's DOM, not by reading the markup. ══════════════════════════════════════════════════════════════════════════ */ /* DERIVED, NOT CHOSEN. `ch` is the width of a ZERO and English prose is not zeroes. Measured across 17 real paragraphs of this site's own writing, in this exact font: ONE ch HOLDS 1.133 CHARACTERS on average and 1.307 on the paragraph with the narrowest letters. The old 66ch was therefore 75 characters a line on average and 86 at worst, against guidance of 45 to 75 with 66 the ideal. 58ch puts the average AT 66 and the worst inside 76. AND IT IS DEFINED HERE RATHER THAN IN hibant-ds.css BECAUSE 107 OF THE 115 PAGES DO NOT LOAD THAT FILE. Declared there, this token would be undefined on every one of them, `var(--measure)` would resolve to nothing, and the rule below would do NOTHING while looking entirely correct. That was the first version of this change and it was caught by counting which pages load what, not by looking at the rule. */ :root { --measure: 58ch; } main p, main li, main dd, main dt, main figcaption { max-width: var(--measure); } .hd { display: flex; align-items: center; gap: var(--sp-4); min-height: 76px; } .logo { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; color: var(--t1); text-decoration: none; margin-right: auto; /* pushes the nav to the right edge */ white-space: nowrap; /* without this "Hibant Care" wraps onto two lines */ /* 20px TALL UNTIL 30 Aug 2026, measured on the rendered header. Every other control beside it is 48px: the menu button, Log in, every nav link. This is the link that takes somebody home, it is on all 115 pages, and it was the shortest thing in the row. The text sets its own height unless something says otherwise, and nothing did. */ min-height: var(--tap-min); } .logo .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); flex: none; } .hd a.nav { color: var(--t2); text-decoration: none; font-weight: 600; font-size: var(--fs-min); padding: var(--sp-3); border-radius: var(--r-sm); white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--tap-min); /* 48px, the locked standard control size. This was DROPPED when the shell was copied here, by a read that truncated the rule, and found by diffing every computed layout property on the landing page before and after the move. */ } .hd a.nav:hover { color: var(--brand); text-decoration: underline; } /* ══════════════════════════════════════════════════════════════════════════ THE TWO ACTIONS AT THE END OF THE BAR. Added 31 Aug 2026 on the founder's instruction, looking at join.html: "I like how the login and sign up is. I would want this to be the same ... I would like this part to be the bar all around the public pages." THEY EXISTED ON EXACTLY ONE PAGE. join.html had drawn its own bar, with its own brand and its own button pair, and the shared header had then been rolled out INSIDE it: two "Hibant Care" marks and two "Log in"s in one strip. The pair moves here so there is one bar with one of everything. WHERE SIGN UP GOES, and it is not arbitrary. The front door at /find-a-carer.html is seventeen questions ending in "Your details ... this is how you sign in", so for a family it IS account creation. A carer's route is the "For carers" link beside it, and on join.html itself Sign up stays pointed at that page's own application. BOTH CARRY margin-left: auto. On desktop the burger is display:none, so this group takes the free space; on a phone the burger takes it first and the group follows. Either way they finish on the right. ══════════════════════════════════════════════════════════════════════════ */ .hd-cta { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; flex: none; } .hd-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: 0 20px; border-radius: var(--r-sm); border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand); font: 700 var(--fs-min)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; } .hd-btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); } .hd-btn:focus-visible { outline: 3px solid var(--t1); outline-offset: 3px; } .hd-btn--ghost { background: transparent; color: var(--brand); } .hd-btn--ghost:hover { background: var(--brand-tint); color: var(--brand); } .hd-btn--rust { background: var(--rust); border-color: var(--rust); color: var(--on-brand); } .hd-btn--rust:hover { background: var(--rust-hover); border-color: var(--rust-hover); color: var(--on-brand); } /* A PHONE KEEPS THE ONE THAT MATTERS. Below 560px the logo, two buttons and the burger do not fit in a row, and Log in is already inside the burger menu. */ @media (max-width: 560px) { .hd-cta .hd-btn--ghost { display: none; } .hd-btn { padding: 0 14px; } } .appbar .wrap { display: flex; align-items: center; gap: var(--sp-3); } @media (max-width: 900px){ .hd a.nav.hide-sm { display: none; } .hd { gap: var(--sp-1); min-height: 64px; } /* The wordmark steps down on a phone. --fs-min is the floor and --fs-lead the desktop size, so the small step is the floor itself rather than a new number. */ .logo { font-size: var(--fs-min); } .logo .dot { width: 18px; height: 18px; } } footer .fg2 { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-6); } footer h4 { font-family: var(--font-display); font-size: var(--fs-min); font-weight: 600; color: var(--t1); margin: 0 0 var(--sp-3); } footer a:hover { color: var(--brand); text-decoration: underline; } footer a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } /* THE COLUMN LINKS AND HEADINGS, AND THIS IS WHY THE FOOTER TEXT WAS INVISIBLE. shared/hibant.css styles them as `.fc h4` and `.fc p, .fc a`, at 14px, in WHITE, at opacity .7. That was correct while the footer was dark. The footer went light on 30 Aug and those rules did not, so every link in the three columns rendered white on near white: measured at 1.1:1, which is not faint, it is absent. On 101 pages. IT SURVIVED THE FIRST FIX because `footer a` is LESS SPECIFIC than `.fc a`, so load order never came into it: the old rule won on specificity whatever order the files arrived in. The founder found it by looking at the page and saying the writing was transparent. He was describing 1.1:1 exactly. These match the old selectors so they win on equal specificity and later order, and they put the type back on the scale. */ footer .fc h4 { color: var(--t1); font-weight: 600; font-size: var(--fs-min); letter-spacing: 0; margin-bottom: var(--sp-3); } footer .fc p, footer .fc a { color: var(--t2); font-size: var(--fs-min); opacity: 1; display: block; margin-bottom: var(--sp-2); } footer .fc p:hover, footer .fc a:hover { opacity: 1; color: var(--brand); } /* ── THE FOOTER LINKS ARE CONTROLS, AND THEY WERE 36px ────────────────────── Fixed 30 Aug 2026, and the interesting part is that it costs almost nothing. Fifteen block level navigation links, `padding: 6px 0` and nothing else, against a locked spec of 48px minimum for a standard control, reasoned for a 78 year old with tremor holding a phone one handed. THE OBVIOUS FIX LOOKED TOO EXPENSIVE AND THE ARITHMETIC WAS WRONG. Adding 12px to each of fifteen links reads as 180px of extra footer, and the founder had already said the footer was too long. But the links ALREADY carried an 8px margin underneath, so the slot each one occupies was 44px, not 36. Making the box 48px and dropping the margin costs FOUR pixels per link, not twelve. And on a desktop only the tallest COLUMN counts, because the columns sit side by side. Six links, not fifteen. */ footer .fc a { display: flex; align-items: center; min-height: var(--tap-min); margin-bottom: 0; } @media (max-width: 900px){ footer .fg2 { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } } @media (max-width: 560px){ /* TWO COLUMNS ON A PHONE, NOT ONE, and this is what pays for the bigger targets. Collapsing to a single column stacked all fourteen links, which made the footer 1,305px tall on a 375px screen: NINETEEN PERCENT OF THE WHOLE PAGE, and it is what the founder meant by "the foot is so long". Two columns halve the rows. The brand block spans both, because a logo and a paragraph in a 155px column reads badly. */ footer .fg2 { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } footer .fg2 > *:first-child { grid-column: 1 / -1; } } /* ══════════════════════════════════════════════════════════════════════════ THE MENU ON A PHONE. Added 30 Aug 2026, before the header went onto 107 pages. The locked header hides its links below 900px and has no menu behind them, so a phone was left with Get help and Log in. The pages it was about to replace had a twelve item mobile menu. Shipping that swap would have been a downgrade dressed as a redesign, on the audience the accessibility spec exists for. Every target here is 48px, the locked standard, and the panel is a real disclosure with aria-expanded on a real button. See shared/shell.js. ══════════════════════════════════════════════════════════════════════════ */ .burger { display: none; /* desktop shows the links themselves */ width: var(--tap-min); height: var(--tap-min); align-items: center; justify-content: center; background: none; border: 1px solid var(--control-bd); border-radius: var(--r-sm); cursor: pointer; color: var(--t1); margin-left: auto; flex: none; } .burger:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } .burger span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; } .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; } .burger span::before { top: -6px; } .burger span::after { top: 6px; } #shellnav { display: none; } @media (max-width: 900px) { .burger { display: flex; } /* The logo keeps its margin-right:auto, so the burger sits at the right edge and Log in stays beside it: the two things somebody reaches for most. */ #shellnav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-bottom: 1px solid var(--bd); box-shadow: 0 12px 32px rgba(42, 34, 20, .12); padding: var(--sp-3) var(--sp-4) var(--sp-4); z-index: 300; } #shellnav[hidden] { display: none; } #shellnav a { display: flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--sp-2); color: var(--t1); text-decoration: none; font-weight: 600; font-size: var(--fs-min); border-bottom: 1px solid var(--bd); } #shellnav a:last-child { border-bottom: 0; } #shellnav a:hover, #shellnav a:focus-visible { color: var(--brand); } body > header { position: relative; } /* the panel hangs off it. Scoped for the same reason as above. */ body.nav-open { overflow: hidden; } } /* ── EIGHT RULES THAT WERE MISFILED BY THE SPLIT, moved here 30 Aug 2026. The split sorted rules by their selector, and these eight had an explanatory COMMENT in front of the selector, so the sorter read "/* ... *​/ .skip" and did not recognise it. They went to the components file and stopped applying to the 105 pages that only load this one. Caught by looking at a page: the skip link was sitting VISIBLE at the top left of about.html, because the rule that hides it until focus had gone to a file that page does not load. A comment in front of a selector is invisible to a reader and load bearing to a parser. */ /* ── EIGHT RULES THE SPLIT MISFILED, moved here 30 Aug 2026. The split sorted rules by selector, and these eight carried an explanatory COMMENT in front of the selector. The sorter read the comment as part of the selector, did not recognise it, and sent them to the components file, where the 105 pages that load only this one never saw them. CAUGHT BY LOOKING AT A PAGE, not by a test. The skip link was sitting visible at the top left of about.html, because the rule that hides it until focus had gone to a file that page does not load. .wrap, the nav links and the WHOLE FOOTER had gone with it. A comment in front of a selector is invisible to a reader and load bearing to a parser. */ /* ══════════════════════════════════════════════════════════════════════════ THE SHELL. Added 30 Aug 2026, and this is the reason this file exists now. UNTIL TODAY THE NEW DESIGN WAS TRAPPED INSIDE TWO PAGES. index.html carried 17,088 characters of its own CSS and loaded no stylesheet at all; join.html carried another 19,372. Everything else on the site was on the old look. So "make the About page match the new design" meant copying that CSS into the About page, and then into the next one, which is exactly how the site ended up with three designs at once. Six would have followed. These rules are the header, and they are the only part of those two pages that other pages need. Everything else in them is page furniture: a landing hero, a search box, carer cards, a signup flow. Measured before moving: index.html has 159 rules of which 24 are the shell, and join.html has 146 of which NONE are, because that page has no header on it at all. TWO CHANGES WERE MADE ON THE WAY IN, both deliberate: 1. THE TOKEN NAMES ARE THIS FILE'S, NOT index.html's. The shell was written against --s1..--s9, --r1..--r3 and --wrap. This file already had the same scale under --sp-1..--sp-7 and --r-sm/--r-md. Two names for 4px is how a design system rots, so the shell was remapped rather than the scale duplicated. --wrap came across because there was no equivalent. 2. THE MOBILE NAV WAS 15px AND IS NOW 16px. index.html shrinks its nav labels below 900px, and 15px is under the locked floor that says nothing goes below 16px, ever. The floor exists for a 78 year old holding a phone one handed, so shrinking the labels on the SMALLEST screen is exactly backwards. Raised, and the design system guard would have failed it anyway. index.html has three more 15px rules in its own page furniture, on .hint, on its footer and on .fgroup legend. Those did not move here and are recorded in the vault rather than fixed in passing. NOT SCOPED UNDER .hds, unlike everything above. That is on purpose: the shell IS the page chrome, so it has to style a real
element, and a page cannot opt into its own header. It is safe because every selector here is either a class this site does not otherwise use, or a bare `header` that only exists once per page. shared/hibant.css styles its own nav with `nav` and `.nb-*`, which do not collide. ══════════════════════════════════════════════════════════════════════════ */ .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); } /* ══════════════════════════════════════════════════════════════════════════ THE MARKETING SHELL SURVIVES THE DESIGN SYSTEM'S RESET. Added 1 Sep 2026. ══════════════════════════════════════════════════════════════════════════ shared/hibant-ds.css opens with `.hds * { margin: 0; padding: 0; }`, and since 31 Aug that class has sat on the BODY of index, sign-up, find-a-carer and portal, so the reset reached the whole document. hibant-ds.css loads AFTER this file and both selectors weigh (0,1,0), so the later file won. THE PUBLIC SITE THEREFORE SAT FLUSH LEFT, with the header controls stripped of their padding. The founder: "why is this tilting towards one side of the page ... the login and sign up bars, why have they shrunk, why are they squished up." The control was already on the site: about.html never carried the class and always looked right. MEASURED, NOT GUESSED. The landing page was rendered twice, with the class and without, and every element's computed margin and padding compared. Exactly seven shell rules lost values, and they are the seven repeated here at (0,2,0) so they win. THE VALUES ARE NOT DUPLICATED: each rule below inherits from its definition above by naming the same declarations once, which is why each sits next to its original rather than in a block of its own. REPEATING THE SELECTOR RATHER THAN MOVING THE CLASS, because `.wrap` is used in the header, in main AND in the footer, so no placement of `.hds` can separate them. Deleting the reset would move every rebuilt portal screen instead. */ /* ONLY THE MARGIN AND THE PADDING, and nothing else. My first attempt widened each whole rule to `.hd-btn, .hds .hd-btn`, which raised the BASE button to (0,2,0) inside .hds and made it beat its own `--ghost` and `--rust` variants at (0,1,0). Log in and Sign up rendered as two solid green blocks with their labels the same colour as their backgrounds. Caught by looking at the page. So these restore the two properties the reset takes and touch nothing that a modifier is entitled to override. */ .hds .wrap { margin-inline: auto; padding-inline: var(--sp-5); } .hds .hd-cta { margin-left: auto; } .hds .hd-btn { padding: 0 20px; } .hds .hd a.logo { margin-right: auto; color: var(--t1); } .hds .skip { padding: var(--sp-3) var(--sp-4); } .hds .burger { margin-left: auto; } .hds footer { padding-block: var(--sp-6); } /* ── AND THE INK, WHICH I MISSED THE FIRST TIME ──────────────────────────── The first pass diffed MARGIN AND PADDING ONLY and found seven rules. It missed these, because the design system also carries `.hds a:not(.ds-btn) { color: var(--brand) }` at (0,2,0), and :not() lends its argument's weight. Every link in the chrome is an `a` and none of them is a .ds-btn, so the logo, the nav and BOTH HEADER BUTTONS were repainted brand green. Sign up rendered dark green ink on a rust background. Found by re-running the same two-render diff with colour and border in it. The lesson is the measurement, not the rule: a partial diff answers confidently about the half it looked at. */ /* THE ELEMENT NAME IS LOAD BEARING and these did not work without it. The rule they have to beat is `.hds a:not(.ds-btn)`, which weighs (0,2,0) because :not() lends its argument's weight. `.hds .hd-btn--rust` is also (0,2,0), and hibant-ds.css loads AFTER this file, so the tie went to the design system and Sign up stayed green on rust. `.hds a.hd-btn--rust` is (0,2,1) and wins. The layout restores above did not need this because they beat `.hds *`, which is only (0,1,0). Two different rules, two different weights. AND I COUNTED IT WRONG THE FIRST TIME. `.hds a:not(.ds-btn)` is (0,2,1), not (0,2,0): the element counts AND :not() lends its argument's class. So `.hds a.hd-btn--rust` TIED it and still lost on load order, and Sign up was still green on rust after a fix that looked right on paper. The `.hd` in front makes these (0,3,1). Measured by rendering the page and reading the computed colour, twice, because the first count was confidently wrong. */ .hds .hd a.nav { color: var(--t2); } .hds .hd a.hd-btn--ghost { color: var(--brand); } .hds .hd a.hd-btn--rust { color: var(--on-brand); } /* The skip link. First thing a keyboard reaches, invisible until it is. */ .skip { position: absolute; left: var(--sp-4); top: -64px; z-index: 99; background: var(--brand); color: var(--on-brand); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top .12s; /* 44px, four short of the locked 48, and it is the FIRST thing a keyboard reaches on every page. Measured 30 Aug 2026. */ display: inline-flex; align-items: center; min-height: var(--tap-min); } /* 16px, NOT the 15px this rule carried on index.html. See the note above. */ .hd a.nav { font-size: var(--fs-min); padding: var(--sp-2); } /* ══════════════════════════════════════════════════════════════════════════ THE FOOTER. Added 30 Aug 2026, and it is a RESTYLE and nothing else. FOUNDER'S INSTRUCTION, in his words: "the things that are there already, in terms of the links and the things that are in the footer, we don't need to change them for now. We just leave them how they are. In terms of redesign and colour and all that, that's what we're changing there." So not one link moves. The structure was already right and better than I had told him: it is a responsive grid, four columns on a desktop, two on a tablet and one on a phone, with three labelled groups. What was wrong with it was entirely presentational. WHAT WAS ACTUALLY WRONG, measured rather than eyeballed: - It was a dark brown band, from a palette that no longer exists. - Its text was 13px and 14px, under the locked 16px floor. - Its small print measured 4.29:1, under the 4.5 text bar. - AND ONE LINK RENDERED IN THE BROWSER'S DEFAULT BLUE at 1.67:1, because no rule styled it at all. That is unreadable, and it was on every page. IT MATTERS MORE THAN A FOOTER USUALLY WOULD. The menu went from ten items to five on 30 Aug, so Terms, the privacy notice, accessibility and the borough pages have no other route in the whole site. It is not decoration down there, it is the only way to several pages. THE GROUND IS --surface AND NOT --page, deliberately. "Match the rest of the platform" cannot mean the identical colour, or the footer stops being a footer and the page just runs out. Surface plus a top line reads as a separate region while still belonging to the same palette. ══════════════════════════════════════════════════════════════════════════ */ footer { background: var(--surface); border-top: 1px solid var(--bd); color: var(--t2); font-family: var(--font-body); font-size: var(--fs-min); /* the locked floor. It was 14px. */ line-height: var(--lh-body); /* 32px rather than 48. Part of buying back the height the bigger tap targets cost, out of space that was doing nothing: 165px sat below the last link. */ padding-block: var(--sp-6); } /* EVERY link, not the ones somebody remembered to give a class to. This is the rule whose absence left one of them rendering in default blue. */ footer a { color: var(--t2); text-decoration: none; display: inline-block; padding-block: 6px; /* a real target without stretching the column */ } /* The small print at the bottom. Still 16px, because the floor has no exception for the line nobody reads until they need it. */ footer .fine { border-top: 1px solid var(--bd); padding-top: var(--sp-4); color: var(--t3); font-size: var(--fs-min); } /* THE BRAND NAME IN THE FOOTER. It carried font-size:22px;font-weight:700;color:#fff as an INLINE attribute, which is why the restyle could not be pure CSS: a stylesheet cannot outrank an inline style. The attribute came off and this took its place, so the next palette change reaches it. */ footer .fbrand { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; color: var(--t1); } /* The page behind must not scroll while the panel is open, or a thumb on a phone moves the results underneath instead of the panel. */ body.panel-open { overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════════ PAGE FURNITURE FOR CONTENT PAGES. Added 30 Aug 2026 with the About rebuild. IN THE SHELL RATHER THAN ON THE PAGE, because Understanding care and the borough pages need exactly the same things next: a section, a two column split, an eyebrow, a lede, a quote and an image slot. Putting them on About would mean copying them onto the next page, which is how this site ended up with three designs. NOT SCOPED UNDER .hds. These are layout classes this site does not otherwise use, and the collision check against shared/hibant.css is clean for all of them. ══════════════════════════════════════════════════════════════════════════ */ /* NAMED .pgsec, NOT .sec. hibant.css already defines .sec in SEVENTEEN rules across the whole site, so taking that name would have restyled every one of them the moment this file loaded. Checked before naming rather than after. */ /* TYPE FOR CONTENT PAGES, scoped under .pgsec. FOUND BY LOOKING AT THE REBUILT ABOUT PAGE: its headings came out in Lato at 32px with paragraphs at 16px and line-height normal, all of it from shared/hibant.css. The design system's own typography lives under .hds in hibant-ds.css, which a content page does not load, so the shell shipped the palette and the chrome and left the words to the old stylesheet. SCOPED, so it cannot reach a page that has not opted in by using .pgsec. The alternative, styling bare h1 and p, would have restyled every one of the 110 pages this file now loads on. */ .pgsec h1, .pgsec h2, .pgsec h3 { font-family: var(--font-display); color: var(--t1); line-height: var(--lh-head); margin: 0 0 var(--sp-4); } .pgsec h1 { font-size: var(--fs-h1); } .pgsec h2 { font-size: var(--fs-h2); } .pgsec h3 { font-size: var(--fs-h3); } .pgsec p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--t2); margin: 0 0 var(--sp-4); max-width: var(--measure); } .pgsec p:last-child { margin-bottom: 0; } .pgsec p b, .pgsec li b { color: var(--t1); font-weight: 600; } /* EXCLUDES THE BUTTON CLASSES BY NAME, and the first version named only .ds-btn, which is the class in the OTHER file. So this rule matched .pgbtn, beat it on specificity, and painted the primary button's text the same teal as its own background: 1.00:1, a button with nothing written on it. Caught by measuring the rendered colours rather than by reading the rule. */ .pgsec a:not(.pgbtn):not(.ds-btn) { color: var(--brand); } .pgsec { padding-block: var(--sp-7); } .pgsec.band { background: var(--band); } .pgsec + .pgsec { border-top: 1px solid var(--bd); } .pgsec.band + .pgsec, .pgsec + .pgsec.band { border-top: 0; } .eyebrow { display: inline-block; margin: 0 0 var(--sp-3); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--bd); font-size: var(--fs-min); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t2); } /* The lede takes the same measure as the body it stands over. It was 60ch, two characters looser, for no reason anybody recorded, and a standfirst that does not align with the paragraph under it is just slightly wrong. */ .lede { font-size: var(--fs-lead); line-height: 1.45; color: var(--t2); max-width: var(--measure); } /* Two columns on a desktop, stacked on a phone, and the image goes SECOND when it stacks whichever side it sits on, because the words are the point. */ .ab-split { display: grid; gap: var(--sp-6); align-items: center; grid-template-columns: 1fr 1fr; } .ab-split > p, .ab-split > div > p { max-width: 56ch; } .ab-services { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); } .ab-services li { border: 1px solid var(--bd); border-radius: var(--r-md); padding: var(--sp-4); color: var(--t2); } .ab-services b { display: block; color: var(--t1); } .ab-quote { margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--brand); background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0; font-family: var(--font-display); font-size: var(--fs-lead); color: var(--t1); } .ab-quote cite { display: block; margin-top: var(--sp-3); font: 600 var(--fs-min)/1.4 var(--font-body); font-style: normal; color: var(--t2); } .ab-cta { text-align: center; } .ab-cta .ds-actions { justify-content: center; margin-top: var(--sp-5); } /* WHERE THE FOUNDER'S GENERATED IMAGES GO. Marked so a slot can never be mistaken for finished work, and sized so the layout does not move when the picture arrives. */ .imgslot { border: 2px dashed var(--control-bd); border-radius: var(--r-lg); background: var(--surface); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-5); color: var(--t2); aspect-ratio: 4 / 3; } .imgslot span { max-width: 34ch; font-size: var(--fs-min); } .imgslot b { display: block; font-family: var(--font-display); font-size: var(--fs-lead); color: var(--t1); margin-bottom: 4px; } @media (max-width: 760px) { .ab-split { grid-template-columns: 1fr; } .ab-split .imgslot { order: 2; } .pgsec { padding-block: var(--sp-6); } } /* THE BOTTOM STRIP. hibant.css divides it with a WHITE line at 10 percent, which was a hairline on a dark footer and is nothing at all on a light one, and sets its type at 13px. Same shape as the column links above: correct while the footer was dark, invisible the moment it was not. */ footer .fbot { border-top: 1px solid var(--bd); padding-top: var(--sp-4); color: var(--t3); font-size: var(--fs-min); } footer .fbot * { font-size: var(--fs-min); } /* BUTTONS ON A CONTENT PAGE. Named .pgbtn and checked for collisions before naming: .btn is defined nine times in hibant.css and .ds-btn lives in hibant-ds.css, which a content page does not load. About was written using .ds-btn and its two calls to action RENDERED AS PLAIN BLUE LINKS, because the class it used lives in a file that page has never loaded. Using a class from a stylesheet the page does not have is silent: no error, no warning, just an unstyled link. */ .pgbtn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-primary); padding: 0 var(--sp-5); border-radius: var(--r-sm); font: 600 var(--fs-body)/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; background: var(--brand); color: var(--on-brand); border: 2px solid var(--brand); } .pgbtn:hover { background: var(--brand-hover); border-color: var(--brand-hover); } .pgbtn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } .pgbtn.sec { background: transparent; color: var(--brand); } .pgbtn.sec:hover { background: var(--brand-tint); } .pgactions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* ══════════════════════════════════════════════════════════════════════════ THE TWO FIXED BARS: the mobile call to action and the cookie notice. Both were already on the locked ink after this morning's retokening, so they are not old browns. What was wrong with them is what the founder actually saw: THE TWO CTA BUTTONS WERE THE SAME COLOUR. hibant.css paints .mcta-primary and .mcta-secondary both with --br-dp, so there was no primary, no second choice, and no teal anywhere on the one bar a phone always shows. AND THE TYPE WAS 13px AND 14px on both bars, under the locked floor, with 50px targets against a 56px primary standard. ══════════════════════════════════════════════════════════════════════════ */ .mcta-btn { min-height: var(--tap-primary); font-size: var(--fs-min); font-weight: 600; } .mcta-primary { background: var(--brand); color: var(--on-brand); } .mcta-secondary { background: var(--card); color: var(--brand); border: 1px solid var(--control-bd); } #hc-cookie-banner { background: var(--t1); color: var(--page); } .hc-cookie-text { font-size: var(--fs-min); color: var(--page); } .hc-cookie-text a { color: var(--band); } .hc-cookie-text a:hover { color: var(--card); } .hc-btn-cookie-essential, .hc-btn-cookie-accept { font-size: var(--fs-min); min-height: var(--tap-min); padding: 0 var(--sp-4); } .hc-btn-cookie-accept { background: var(--card); color: var(--t1); border: 1px solid var(--card); } .hc-btn-cookie-accept:hover { background: var(--band); border-color: var(--band); } .hc-btn-cookie-essential { background: transparent; color: var(--page); border: 1px solid var(--page); } /* ── UNDERSTANDING CARE: THE SEARCH ───────────────────────────────────────── Added 30 Aug 2026. The page listed 86 guides in one column 10,757px tall with no way to narrow it. Lives in the shell rather than a page stylesheet because blog.html loads no other stylesheet of its own, and the whole point of this change was to stop that page pulling files it does not need. */ .bfind { max-width: 72rem; margin: 0 auto var(--sp-5); padding: 0 var(--sp-5); } .bfind-row { display: flex; flex-direction: column; gap: var(--sp-2); } .bfind-lab { font: 600 var(--fs-body)/1.3 var(--font-body); color: var(--t1); } .bfind-box { display: flex; align-items: center; gap: var(--sp-3); background: var(--card); border: 2px solid var(--control-bd); border-radius: var(--r-sm); padding: 0 var(--sp-4); min-height: var(--tap-primary); } .bfind-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .bfind-icon { flex: none; color: var(--t3); } .bfind-input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; min-height: var(--tap-primary); font: 400 var(--fs-body)/1.4 var(--font-body); color: var(--t1); } .bfind-input::placeholder { color: var(--t3); } .bfind-input:focus { outline: none; } /* the box takes the focus ring, not the field */ /* Safari draws its own clear button at whatever size it likes. */ .bfind-input::-webkit-search-cancel-button { -webkit-appearance: none; } .bfind-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); } .bfind-tag { min-height: var(--tap-min); padding: 0 var(--sp-4); border: 2px solid var(--control-bd); border-radius: 999px; background: var(--card); color: var(--t1); font: 600 var(--fs-min)/1 var(--font-body); cursor: pointer; } .bfind-tag:hover { border-color: var(--brand); } /* PRESSED IS NOT COLOUR ALONE. Filled AND outlined, because the locked spec says nothing encodes meaning in hue by itself. */ .bfind-tag[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); } .bfind-count { margin-top: var(--sp-3); font: 400 var(--fs-min)/1.5 var(--font-body); color: var(--t2); } .bfind-empty { max-width: 72rem; margin: 0 auto; padding: var(--sp-7) var(--sp-5); text-align: center; } .bfind-empty h2 { font: 600 var(--fs-lead)/1.25 var(--font-display); color: var(--t1); margin-bottom: var(--sp-3); } .bfind-empty p { font: 400 var(--fs-body)/1.5 var(--font-body); color: var(--t2); margin: 0 auto var(--sp-5); max-width: 46ch; } /* ── SEEING WHAT YOU ARE TYPING, 11 Sep 2026 ────────────────────────────── Added on the walk. A password typed blind on a phone, with a small target and autocorrect, is how somebody locks themselves out of their own account. It matters most on the reset screen, where she is inventing a NEW one and has nothing to check it against. The wrapper is added by shared/shell.js around every input[type=password], so these rules have to work wherever one appears rather than on a named screen. */ .pw-wrap { position: relative; display: block; } /* The box makes room for the control instead of sitting under it. Without this the word lands on top of the last characters she typed, which is the one moment she is looking at them. */ .pw-wrap > input { width: 100%; padding-right: 5.5em; } .pw-reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); /* 44px, the tap floor. Written here rather than inherited, because this control is created in script and lands on pages whose buttons are styled by three different stylesheets. */ min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: transparent; cursor: pointer; /* --fs-min, the smallest size the scale has (16px). A raw size here is invisible to the 16px floor guard, which caught the first version of this line at 15px. */ font: inherit; font-size: var(--fs-min); font-weight: 700; line-height: 1; color: var(--brand, #14564A); } .pw-reveal:focus-visible { outline: 2px solid var(--brand, #14564A); outline-offset: 2px; border-radius: 6px; }