/* --------------------------------------------------------------------------- Handling Plan: every site page, in the home page's voice. Loaded after landing.css. Plain and large, the way a product page is: big bold headings, one short line under each, words at full strength (nothing waits for the scroll to become readable), calm cards and room around everything. ------------------------------------------------------------------------- */ /* Words are readable from the start. The lighting-up effect is kept for nothing here. */ .lp .lp__lw,.lp .lp__lw.is-lit{color:inherit!important;transition:none} /* Headings, on the home page's scale (owner decision, 2026-10-25). The vw coefficients here were already almost the home page's, 6.6 against 6.4 and 4.6 against 4.6; it was the CEILINGS that differed, 88px against 68px and 60px against 44px, so at 1280px an inner page drew an 84px h1 and a 59px h2 where the home page drew 68 and 44. The artifact type scale approved on 2026-10-17 only ever reached the home page, because hx2070.css is enqueued there alone, so every other page kept the older, larger scale. The clamps below are now the artifact's own, written in rem exactly as hx2070.css writes them so the two cannot drift: h1 clamp(2.6rem,6.4vw,4.25rem) = 41.6 to 68px h2 clamp(2rem,4.6vw,2.75rem) = 32 to 44px Only size and the tracking that goes with it changed. Weight, colour and line height are untouched, and the inner page heroes keep their own centred design, which was restyled once before and reverted. */ .lp .lp__tiles h1{font-size:clamp(2.6rem,6.4vw,4.25rem);line-height:1.02;letter-spacing:-.035em;font-weight:700;color:var(--ink)} .lp .lp__tiles .lp__tile h2,.lp .lp__tiles .hp__splitText h2{font-size:clamp(2rem,4.6vw,2.75rem);line-height:1.12;letter-spacing:-.028em;font-weight:700;color:var(--ink)} .lp .lp__tiles h3{letter-spacing:-.02em} .lp .lp__tiles h1:has(.lp__hl),.lp .lp__tiles h2:has(.lp__hl){line-height:1.08} /* The highlight becomes a colour, not a box: the words carry the brand gradient, so a highlight that wraps onto two lines stays one phrase instead of two pills. */ /* The pale end of this gradient measured 2.32:1 against a 3:1 minimum, and it lands on the emphasised closing words of the h1 on twelve pages, so the least legible text on each page was the part the design was trying hardest to stress. The sweep is the same shape; it now bottoms out at 4.25:1, which also clears the small-text threshold if the rule is ever reused at a smaller size. */ .lp .lp__tiles .lp__hl,.lp .lp__tiles .lp__words.is-in .lp__hl{background:linear-gradient(90deg,#0d3d35 0%,#1f6b52 55%,#2c8a68 100%)!important; -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;padding:0 0 .06em!important;border-radius:0!important;box-shadow:none!important;-webkit-box-decoration-break:clone;box-decoration-break:clone} .lp .lp__tiles .lp__hl .lp__w{color:transparent;background:inherit;-webkit-background-clip:text;background-clip:text} .lp .lp__tiles .lp__tile--dark .lp__hl{background:linear-gradient(90deg,#9fd4bf,#e2f5ec)!important;-webkit-background-clip:text!important;background-clip:text!important} /* Small label above a heading: quieter, no rule. */ .lp .lp__tiles .lp__eyebrow{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--brand)} .lp .lp__tiles .lp__eyebrow::before{display:none} /* The line under a heading, and body text: larger and full strength. */ .lp .lp__tiles .lp__sub{font-size:clamp(19px,1.7vw,24px);line-height:1.45;letter-spacing:-.01em;color:#424245;max-width:40ch} .lp .lp__tiles .hp__hero .lp__sub,.lp .lp__tiles .lp__tileText .lp__sub{margin-top:18px} .lp .lp__tiles p{font-size:max(17px,1em)} .lp .lp__tiles .lp__tile--dark .lp__sub{color:rgba(255,255,255,.8)} /* Room around every section. */ .lp .lp__tiles>.lp__tile:not(.lp__tile--dark){padding-top:clamp(72px,11vh,128px);padding-bottom:clamp(72px,11vh,128px)} .lp .lp__tiles .hp__hero{padding-top:clamp(84px,14vh,150px)!important} /* Text beside a screen, and the screen given most of the width. */ .lp .hp__splitIn{width:min(1240px,100%);grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)} .lp .hp__splitText p{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#424245} .lp .hp__ticks li{font-size:17px;line-height:1.5;color:#1d1d1f} .lp .hp__splitIn{gap:clamp(36px,6vw,96px)} .lp .lp__tileMedia .lp__v--device{border-width:8px;border-radius:22px;box-shadow:0 60px 90px -52px rgba(0,0,0,.4)} /* Cards: calm grey, no outline, larger words. */ .lp .lp__moreGrid{gap:18px} .lp .lp__moreItem{background:#f5f5f7!important;border:0!important;border-radius:26px!important;padding:30px 28px!important;box-shadow:none!important} .lp .lp__moreItem h3{font-size:21px;line-height:1.25;color:#1d1d1f} .lp .lp__moreItem p{font-size:16.5px;line-height:1.55;color:#424245} .lp .lp__moreNum{color:#c7c7cc!important} .lp .lp__moreIcon{background:var(--brand)!important;color:#fff!important;border-radius:14px!important} .lp .lp__glare{display:none} /* Facts in columns. */ .lp .lp__facts{gap:18px} .lp .lp__factCol{background:#f5f5f7!important;border:0!important;border-radius:26px!important;padding:32px 30px!important;box-shadow:none!important} .lp .lp__factCol h3{font-size:22px;color:#1d1d1f} .lp .lp__factCol li b{font-size:17px;color:#1d1d1f} .lp .lp__factCol li span{font-size:16px;line-height:1.5;color:#424245} /* Numbered steps. */ .lp .hp__stepList li{background:#f5f5f7!important;border:0!important;border-radius:24px!important;box-shadow:none!important;padding:28px!important} .lp .hp__stepList li h3{font-size:21px} .lp .hp__stepList li p{font-size:16.5px;line-height:1.55;color:#424245} .lp .hp__stepNum{background:var(--brand)!important;color:#fff!important} /* The closing band: black, like the home page. */ .lp .lp__tiles .lp__tile--dark{background:#000!important} .lp .lp__tiles .lp__tile--dark h2{color:#fff} /* Blog. */ .lp .hp__post{border-radius:24px!important;overflow:hidden} .lp .hp__postText b{font-size:21px;line-height:1.25;letter-spacing:-.02em} .lp .hp__postText span{font-size:16px;line-height:1.55;color:#424245} .lp .hp__post.is-lead .hp__postText b{font-size:clamp(26px,2.6vw,34px)} /* Library page. */ .lp .hp__libGroup h3{font-size:22px} .lp .hp__libGroup li{font-size:16.5px} /* Phones: still large, never cramped. */ @media (max-width:1068px){ .lp .hp__splitIn{grid-template-columns:1fr} } /* v5 (2 October 2026): white and green, every screen facing the viewer. Sections alternate white and a soft mint; the closing band is deep green rather than black. */ .lp .lp__v,.lp .lp__v--device,.lp .lp__tileMedia .lp__v--device{transform:none!important} .lp .lp__tiles>.lp__tile:nth-child(even):not(.lp__tile--dark){background:#eef7f2} .lp .lp__tiles>.lp__tile:nth-child(even):not(.lp__tile--dark) .lp__moreItem,.lp .lp__tiles>.lp__tile:nth-child(even):not(.lp__tile--dark) .lp__factCol,.lp .lp__tiles>.lp__tile:nth-child(even):not(.lp__tile--dark) .hp__stepList li{background:#fff!important} .lp .lp__tiles .lp__tile--dark{background:radial-gradient(120% 90% at 85% 0%,#1f6b52 0%,transparent 55%),#0d3d35!important} .lp:has(.lp__tiles) .lp__bar{background:#fff;border-bottom:1px solid #e1e7e4} .lp:has(.lp__tiles) .lp__foot{background:#fff;border-top:1px solid #e1e7e4;color:#3f4a46;font-size:14px} /* Phones: the header's logo, "Got a code?" and menu button sat 28px apart, which pushed the menu button off the right edge below about 400px wide. */ @media (max-width:480px){ .lp__headIn{gap:10px} .lp__codeLink{margin-left:auto} .lp__burger{margin-left:2px} } @media (max-width:734px){ .lp .lp__tiles h1{font-size:clamp(38px,11vw,48px)} .lp .lp__tiles .lp__tile h2,.lp .lp__tiles .hp__splitText h2{font-size:clamp(30px,8.6vw,38px)} .lp .lp__tiles .lp__sub{font-size:18px} .lp .lp__tiles>.lp__tile:not(.lp__tile--dark){padding-top:64px;padding-bottom:64px} .lp .lp__moreItem,.lp .lp__factCol{padding:24px 22px!important;border-radius:22px!important} } /* --------------------------------------------------------------------------- Plan library: the same 54 plans, in half the height --------------------------------------------------------------------------- The groups were a two column grid, so every row stood as tall as its tallest card: Slings has two plans and sat beside Moving, standing and walking, which has fifteen, leaving most of a column empty. Flowed as columns instead, a short group sits straight under a tall one and the white space goes. The rows are tighter with it. Nothing is hidden and nothing is behind a click, which matters on a page people scan for one task: it is only packed. */ .lp .hp__libGroups{ display:block!important; columns:2;column-gap:18px} .lp .hp__libGroup{ break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid; margin:0 0 16px;padding:16px 18px} /* A heading has to label the group, not announce it. */ .lp .hp__libGroup h3{font-size:19px;line-height:1.25;margin:0 0 6px} /* 54 rows at 47px each was most of the height. At 32px the line still carries its own padding either side of a 22px line box. Two columns, not three: measured on the live page, three columns came out TALLER (1842px against 1688px) because the cards drop to 355px and 38 of the 54 plan names stop fitting on one line. A wrapped name costs more height than the extra column saves, so the width stays where a name fits. */ .lp .hp__libGroup li{font-size:15.5px;line-height:1.4;padding:4px 0} .lp .hp__libGroup li em{font-size:12px} /* One column before the cards get too narrow for a plan name to sit on one line. A wrapped name costs more height than the second column saves. */ @media (max-width:1000px){ .lp .hp__libGroups{columns:1} .lp .hp__libGroup{margin-bottom:14px} } /* Finding a plan, rather than reading for it ------------------------------- The carer chips above this are centred, so the field has to sit on the same axis as them. Laying the field and its count out as one flex row centres the PAIR, which leaves the field itself standing left of centre by half the width of the count beside it, and the further the count text changes ("54 plans" against "16 plans shown") the more the field appears to shift. Three columns with matching outer tracks centre the field itself, and the count rides in the right-hand track without ever moving it. The middle track is given a width rather than left to size itself: against `auto` it collapses onto the input's own intrinsic width, which is the size attribute's twenty-odd characters, and the field comes out 240px wide. */ .lp .hp__libFind{ display:grid;grid-template-columns:minmax(0,1fr) min(460px,100%) minmax(0,1fr); align-items:center;gap:14px; width:min(1100px,100%);margin:-8px auto 22px} .lp .hp__libSearch{ grid-column:2;position:relative;display:flex;align-items:center;width:100%} .lp .hp__libCount{ grid-column:3;justify-self:start; margin:0;font-size:14px;color:#6e6e73;white-space:nowrap} .lp .hp__libSearch svg{ position:absolute;left:17px;width:17px;height:17px;pointer-events:none; fill:none;stroke:#6e6e73;stroke-width:2;stroke-linecap:round} /* The border is the only thing that says where this field is, and --line measured 1.24:1 against the 3:1 that SC 1.4.11 asks of a control's own boundary. The hairline stays soft on cards and panels, which are decoration; a control earns a real edge. */ .lp .hp__libSearch input{ width:100%;min-height:46px;padding:12px 18px 12px 44px; border:1px solid #86938e;border-radius:999px;background:#fff; font:500 15px/1 var(--font);color:#1d1d1f;appearance:none; transition:border-color .18s} .lp .hp__libSearch input::placeholder{color:#6e6e73;font-weight:400} .lp .hp__libSearch input:hover{border-color:#5b6b66} .lp .hp__libSearch input:focus-visible{ outline:2px solid var(--brand);outline-offset:2px;border-color:var(--brand)} /* Narrow: the count goes under the field, both on the centre line, rather than squeezing the field to make room for it. The switch happens while the side tracks can still hold the count on one line, not once they have already run out of room for it. */ @media (max-width:900px){ .lp .hp__libFind{grid-template-columns:1fr;gap:10px;justify-items:center} /* Still capped: a search field run out to the full width of a tablet reads as a text box, not as something you type a word or two into. */ .lp .hp__libSearch{grid-column:1;width:min(100%,460px)} .lp .hp__libCount{grid-column:1;justify-self:center} } /* A single group left by a search takes one column, centred, rather than sitting in the first of two and leaving the second empty. Searching "hoist" leaves only Hoisting, and half the width of the listing went blank. Guarded on the property the listing is built from, so where there are no columns there is nothing to undo either. */ @supports (column-count:2){ .lp .hp__libGroups.is-one{column-count:1;max-width:640px;margin-inline:auto} } .lp .hp__libNone{ width:min(1100px,100%);margin:0 auto;padding:30px 22px; border:1px dashed var(--line);border-radius:18px; text-align:center;color:#6e6e73;font-size:16px} /* The carer count reads as a marker beside the plan, not as a sentence after it, which is what let it repeat 54 times without anyone noticing. The marker has to sit inside the row's own line box or it sets the height of every row: at 1.5 with 3px of padding it stood 24px against the name's 22px and put 132px back on the section. Kept under the line instead. */ .lp .hp__libGroup li em{ flex:0 0 auto;font-size:12px;line-height:1.3;color:#6e6e73; background:#f2f5f4;border-radius:999px;padding:2px 8px} /* Filtered to one carer count, every row carries the same label, so it says nothing: the list is already the answer. The markers step out of the way. */ .lp .hp__lib.is-carers .hp__libGroup li em{display:none}