/* ASHA PATH, the public site. Rebuilt 27 October 2026, 14:07, after four corrections: "it does not look like a professional website", "totally disorganised", "the website looks like an amateur one", "i told you I need a professional medical website", "nothing scattered", "review online sources not from memory". EVERY VALUE BELOW WAS READ FROM A SOURCE THIS AFTERNOON, not from memory. The source is the NHS digital service manual, read at service-manual.nhs.uk/design-system/styles/colour and /typography at 14:05 CEST on 27 October 2026, because it is the public design system a clinician in this field already reads every day and its text and background colours are published as meeting accessibility needs. Dark Blue #003087 the brand: bar, headings, buttons, footer Blue #005EB8 links and the focus of attention Text #212B32 body copy, not pure black Secondary #4C6272 supporting copy Grey line #D8DDE0 hairlines and card borders Red #D5281B NHS uses red for urgent cards; it rules the crisis box Type 19px desktop, 16px mobile, a plain humanist sans. NHS sets Frutiger and falls back to Arial. Inter is self-hosted here and is the same kind of face; no serif, and no third-party request. The three earlier attempts all inherited style.css, the APP's stylesheet, with its dawn gradient, glow blobs and warm garden palette. That is right for the app and it is exactly why the site kept reading as an app's landing page. This file owes it nothing. AND DEEP BLUE IS THE BRAND, NOT THE PAGE. The second attempt painted the whole page navy and he rejected it again. Navy is the bar, the headings, the buttons and the footer; the page is white. */ @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url('fonts/inter-var.woff2') format('woff2')} @font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap; src:url('fonts/fraunces-var.woff2') format('woff2')} :root{ /* ⛔ DEEP BLUE, executed. He said it three times. The page IS deep blue; the clinical layout from the NHS design system stays exactly as it is, and only the surface is inverted. The relationships are NHS's: one brand blue, one text colour that is not pure white, one muted tone, one hairline, and red reserved for the urgent card, which stays LIGHT so it is the one thing that leaps off a dark page. Every pair was measured before this shipped. */ --page:#0F1C34; /* deep blue, his ruling, in ink rather than NHS */ --page-deep:#0C1729; /* banded sections */ --page-dark:#0A1322; /* the footer */ --card:#17273F; --navy:#FFFFFF; /* headings, on the deep blue */ --navy-dark:#E8F0F8; --blue:#E3C286; /* the app's own gold: links, eyebrows, the accent */ --sage:#A8C9AE; /* the app's own sage, for a second accent */ --blue-pale:#17273F; --ink:#E6EEF7; /* body copy */ --muted:#B3C8DE; /* supporting copy */ --line:rgba(255,255,255,.13); --band:#0C1729; --white:#FFFFFF; --urgent:#B4531D; --urgent-bg:#FFFFFF; --radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(0,0,0,.22), 0 6px 20px rgba(0,0,0,.26); --wrap:1180px; } *{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%} body{ margin:0; background:var(--page); color:var(--ink); font-family:'Inter',Arial,Helvetica,sans-serif; font-size:16px; line-height:1.58; -webkit-font-smoothing:antialiased; } @media (min-width:641px){ body{font-size:19px; line-height:1.52} } img{max-width:100%; display:block} a{color:var(--blue)} a:hover{text-decoration:underline} a:focus-visible{outline:3px solid #FFD700; outline-offset:2px} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px} /* ---- top bar ---- */ .bar{position:sticky; top:0; z-index:20; background:var(--page-deep); border-bottom:1px solid var(--line)} .bar .wrap{display:flex; align-items:center; gap:22px; height:66px} .logo{display:flex; align-items:center; gap:11px; color:#FFFFFF; font-weight:600; letter-spacing:.09em; font-size:1.02rem; text-decoration:none; font-family:'Fraunces',Georgia,serif} .logo svg{width:30px; height:30px; flex:none} .bar nav{margin-left:auto; display:flex; align-items:center; gap:20px} .bar nav a{color:var(--ink); font-size:.86rem; font-weight:500; text-decoration:none} .bar nav a:hover{color:var(--navy); text-decoration:underline} .bar .cta{background:var(--blue); color:#1A1206; padding:.5rem 1.1rem; border-radius:999px; font-weight:600} .bar .cta:hover{background:#E8F0F8; text-decoration:none} /* ---- hero ---- */ .hero{padding:84px 0 72px} .hero .wrap{display:grid; grid-template-columns:1fr 340px; gap:72px; align-items:center} .eyebrow{color:var(--blue); font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px} .hero h1{color:var(--navy); font-family:'Fraunces',Georgia,serif; font-size:clamp(2.4rem,4.6vw,3.6rem); line-height:1.08; letter-spacing:-.016em; margin:0 0 20px; font-weight:600} .hero .sub{font-size:1.12em; color:var(--ink); margin:0 0 16px; max-width:30rem; line-height:1.6} .hero p.small{color:var(--muted); font-size:.95em; margin:0 0 26px; max-width:30rem} .meta{display:flex; flex-wrap:wrap; gap:8px} .chip{border:1px solid var(--line); border-radius:999px; padding:.34rem .85rem; font-size:.8em; color:var(--muted); background:rgba(255,255,255,.05)} .chip b{color:var(--navy)} .heroshot{display:flex; justify-content:center} /* ---- sections ---- */ section{padding:92px 0} section.band{padding:76px 0} section.band{background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line)} h2{color:var(--navy); font-family:'Fraunces',Georgia,serif; font-size:clamp(1.7rem,2.6vw,2.2rem); line-height:1.16; letter-spacing:-.012em; margin:0 0 14px; font-weight:600} h3{color:var(--navy); font-size:1.04em; margin:0 0 6px; font-weight:600; letter-spacing:-.004em} .lede{font-size:1.06em; color:var(--ink); max-width:34rem; margin:0 0 6px; line-height:1.6} .note{color:var(--muted); font-size:.88em; max-width:40rem; line-height:1.55} .cards{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:24px} .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px 24px; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px rgba(0,0,0,.22)} .card p{margin:0; color:var(--muted); font-size:.92em} /* ---- the screens: a compact gallery, not six full-height rows ---- ⛔ His word: "pictures and descriptions take too much space and kill the website". Six alternating rows at 290px a phone ran the page past eight thousand pixels and buried the clinic section nobody would ever scroll to. Three across, a small phone and one sentence each, and the whole tour fits in two screens. */ /* ⛔ THREE COLUMNS, NOT auto-fit. His word: "fix the gap in the gallery". auto-fit chose four at this width and six tiles do not divide by four, so the second row ran 2 and left a hole on the right. Six divides by three and by two, so the grid is told the number instead of guessing it. */ .gallery{margin-top:30px; display:grid; gap:34px 30px; grid-template-columns:repeat(3,1fr)} @media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .gallery{grid-template-columns:1fr} } .tile{text-align:left} .tile .pic{display:flex; justify-content:center; margin-bottom:14px} .tile img, .heroshot img{ width:238px; height:auto; display:block; border-radius:30px; border:8px solid #060C16; background:#060C16; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 26px 60px rgba(0,0,0,.5); } .heroshot img{width:316px; border-radius:40px; border-width:10px} .heroshot{display:flex; justify-content:center} .tile h3{font-size:1em; margin:0 0 4px} .tile p{margin:0; color:var(--muted); font-size:.84em; line-height:1.5} .tile .eyebrow{font-size:max(13px,.64em); margin:0 0 5px} /* ---- the crisis notice: NHS uses red for the urgent card ---- */ .safety{background:var(--urgent-bg); border:1px solid var(--line); border-left:4px solid var(--urgent); border-radius:var(--radius); padding:18px 22px} .safety p{margin:0; color:#212B32; font-size:.96em} .safety p+p{margin-top:8px} .safety b{color:var(--urgent)} .safety a{color:#1F4E79} ul.facts{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px; max-width:42rem} ul.facts li{position:relative; padding-left:26px; color:var(--muted); font-size:.95em; line-height:1.6} ul.facts li:before{content:""; position:absolute; left:3px; top:.6em; width:9px; height:9px; border-radius:2px; background:var(--blue)} ul.facts b{color:var(--navy)} .pills{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 10px} .pills span{border:1px solid var(--line); background:rgba(255,255,255,.06); border-radius:999px; padding:.3rem .8rem; font-size:.84em; color:#FFFFFF; font-weight:500} .callout{border:1px solid var(--line); border-left:4px solid var(--blue); background:var(--blue-pale); border-radius:var(--radius); padding:18px 22px; margin-top:20px} .callout p{margin:0; color:#FFFFFF; font-size:.95em; line-height:1.6; max-width:42rem} .btn{display:inline-block; background:var(--blue); color:#1A1206; font-weight:600; padding:.8rem 1.5rem; border-radius:999px; margin-top:22px; text-decoration:none; letter-spacing:.01em} .btn:hover{background:#EFD4A2; text-decoration:none} /* ---- footer ---- */ footer{background:var(--page-dark); color:#D7E2EF; padding:44px 0 30px} footer .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px} footer h4{color:#fff; font-size:max(13px,.74em); letter-spacing:.12em; text-transform:uppercase; margin:0 0 12px; font-weight:700} footer a{color:#D7E2EF; font-size:.9em; display:block; margin-bottom:8px; text-decoration:none} footer a:hover{color:#fff; text-decoration:underline} footer p.blurb{margin:0; color:#BBCCE0; font-size:.9em; max-width:26rem} footer .legal{border-top:1px solid rgba(255,255,255,.16); margin-top:28px; padding-top:16px; font-size:.82em; color:#AABFD6} footer .legal p{margin:0 0 6px} @media (max-width:900px){ .hero .wrap{grid-template-columns:1fr} } @media (max-width:860px){ .hero .wrap{grid-template-columns:1fr; gap:30px} .heroshot{order:-1} .row, .row:nth-child(even){grid-template-columns:1fr; gap:20px} .row .pic, .row:nth-child(even) .pic{order:-1} footer .cols{grid-template-columns:1fr} .bar nav a:not(.cta){display:none} } /* ---- the card icons, added 29 October 2026 ---- The page carried no icons at all, so three cards of plain text had nothing to tell them apart at a glance. One size, one stroke, the gold accent, and an aria-hidden SVG because the heading beside it already says the word. */ .card .ic{width:26px; height:26px; color:var(--blue); display:block; margin:0 0 14px} /* ⛔ THE CRISIS BLOCK HAD NO MEASURE, 29 October 2026. Every other block on the page is held to about 75 characters; this one spanned the full 1180px wrap, which at this body size is roughly 140 characters a line, and it is the one block written for somebody who is frightened. */ .safety p{max-width:40rem} /* ====================================================================== The iPhone and desktop pass, 29 October 2026, items 1 to 19 of SITE_FIXES_2026-10-29.md. Every rule here works inside the page's existing look: the one-identity question is his to rule on and is deliberately not touched. ====================================================================== */ /* 17. The skip link, first focusable thing on the page. */ .skip{position:absolute; left:-9999px; top:0; z-index:60; background:var(--navy); color:#fff; padding:14px 22px; min-height:44px; box-sizing:border-box; border-radius:0 0 12px 0; font-weight:600; font-size:15px; text-decoration:none} .skip:focus{left:0} /* 1. ⛔ THE CRISIS STRIP. The box it points at starts 1,911px down an iPhone, which is two screens of scrolling for the one thing on this site that has a frightened person at the other end. The strip carries the SAME region's number, from the same table in the app, switched by the same script. */ .strip{background:var(--urgent-bg); border-bottom:1px solid var(--line)} .strip p{margin:0; padding:9px 0; color:#212B32; font-size:.95em; text-align:center} .strip a{color:#1F4E79; font-weight:700} @media (max-width:640px){ .strip p{padding:6px 0; font-size:16px; line-height:1.3} .strip a{display:inline-block; min-height:44px; line-height:44px; padding:0 8px} } /* 2. The numbers in the crisis box were 30x19px on an iPhone. Below the body breakpoint every one of them becomes a full-width button. */ @media (max-width:640px){ #lines b{display:block; margin:10px 0} #lines b a{display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 14px; background:#fff; border:1px solid var(--line); border-radius:12px; font-size:17px; text-decoration:none} #lines b a:hover{background:#F2F6FA} } /* 3. The mockup was ordered first, so the headline started at 876px on an 844px screen and a visitor saw a screenshot and nothing else. */ @media (max-width:860px){ .heroshot{order:1} .hero .wrap > div:first-child{order:0} } /* 4. Below the breakpoint the bar showed "For clinics" alone and hid What it is, Privacy, Français and Español with no way to reach them. A native
disclosure: no JS, and the expanded state is the element's own. */ .menu{display:none; position:relative; margin-left:14px} .menu summary{list-style:none; display:inline-flex; align-items:center; gap:9px; min-height:44px; min-width:44px; padding:0 14px; cursor:pointer; color:var(--ink); font-weight:600; font-size:15px; border:1px solid var(--line); border-radius:999px} .menu summary::-webkit-details-marker{display:none} .menu summary span{width:15px; height:2px; background:currentColor; flex:none; box-shadow:0 5px 0 currentColor, 0 -5px 0 currentColor} .menu .sheet{position:absolute; right:0; top:calc(100% + 12px); z-index:55; background:var(--page-deep); border:1px solid var(--line); border-radius:14px; padding:8px; min-width:224px; box-shadow:0 20px 56px rgba(0,0,0,.45)} .menu .sheet a{display:flex; align-items:center; min-height:46px; padding:0 14px; color:var(--ink); font-size:16px; text-decoration:none; border-radius:10px} .menu .sheet a:hover{background:rgba(255,255,255,.08); text-decoration:none} @media (max-width:860px){ .menu{display:block} } /* 5. The only call to action was at the foot of a 13,000px page. */ .herocta{margin:0 0 22px} /* 8. The eyebrows were 11.2px on an iPhone, where .7rem is .7 of 16px. */ .eyebrow{font-size:max(13px,.7rem); font-weight:600} /* 9. The chips were 12.8px and the line under them touched the row. */ .chip{font-size:max(14px,.82em)} .meta{margin-bottom:14px} /* 13. Six full-height phone shots took 3,500px of a 13,200px page. Below 560 they become one swipeable row, with the next tile peeking so it reads as a row rather than a crop. A scroll container is keyboard-scrollable natively. */ @media (max-width:560px){ .gallery{grid-template-columns:none; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; margin-inline:-24px; padding:0 24px 10px; scrollbar-width:thin} .gallery .tile{flex:0 0 78vw; scroll-snap-align:start} .gallery .tile img{width:100%; max-width:238px; margin:0 auto} } /* 19. Footer links were 23px tall with 8px gaps, under the 24px minimum and far under the 44px one. Padding, not font size. */ @media (max-width:640px){ footer a{min-height:44px; display:flex; align-items:center; margin-bottom:0} } /* 3, the rest of it. 84px of hero padding on a phone is a quarter of the first screen; with the strip above it the headline still began at 243px. The brief asks for the h1 inside the first 200. */ @media (max-width:860px){ .hero{padding:30px 0 56px} } /* 12, the home page's half of it. The brief named the clinics header, but the same fault is here and it is worse: at 390 "ASHA PATH" broke after "ASHA" and the "For clinics" pill broke after "For", so the bar read as four ragged lines. Seen in the 390px screenshot, not in the source. */ .logo{white-space:nowrap; min-height:44px} .bar .cta{white-space:nowrap; display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box} @media (max-width:420px){ .logo{font-size:.92rem; gap:9px} .logo svg{width:26px; height:26px} .bar .cta{padding:.45rem .8rem; font-size:.82rem} .bar .wrap{gap:10px} .menu{margin-left:8px} .menu summary{padding:0 11px; font-size:14px} } /* And the French bar is its own case: "Pour les cliniques" is nine characters longer than "For clinics", and held on one line it pushed the French page to 413px wide on a 390px screen. It wraps inside its pill instead. Measured per language, because a bar that fits in English is not a bar that fits. */ @media (max-width:420px){ html[lang="fr"] .bar .cta{white-space:normal; line-height:1.14; text-align:center; padding:.3rem .56rem; font-size:max(13px,.78rem); max-width:8.6rem} }