:root{--c-0b1a2a-rgb:11 26 42;--c-0f7a55:#0F7A55;--c-121820-rgb:18 24 32;--c-12344e-rgb:18 52 78;--c-17a673-rgb:23 166 115;--c-17a673:rgb(var(--c-17a673-rgb));--c-3c4d5d:#3C4D5D;--c-3d352e:#3D352E;--c-5a340a-rgb:90 52 10;--c-5f655c:#5F655C;--c-6d736a:#6D736A;--c-6d766a:#6D766A;--c-78c8f0-rgb:120 200 240;--c-7a4e20-rgb:122 78 32;--c-7a4e20:rgb(var(--c-7a4e20-rgb));--c-8b949e:#8B949E;--c-8fa8bd:#8FA8BD;--c-a9becc:#A9BECC;--c-b3261e:#B3261E;--c-b8791a:#B8791A;--c-cfe8f7:#CFE8F7;--c-dfede4:#DFEDE4;--c-e2ebf4:#E2EBF4;--c-e6e4f2:#E6E4F2;--c-e6edf3:#E6EDF3;--c-e6f4fb:#E6F4FB;--c-e7c9cf:#E7C9CF;--c-e8dccb:#E8DCCB;--c-e8f2ec:#E8F2EC;--c-edf1f4:#EDF1F4;--c-edf5f1:#EDF5F1;--c-eee9de:#EEE9DE;--c-eeedf7:#EEEDF7;--c-eef3f8:#EEF3F8;--c-f0e8d7:#F0E8D7;--c-f0faff-rgb:240 250 255;--c-f2d9de:#F2D9DE;--c-f2f1f9:#F2F1F9;--c-f3e2e5:#F3E2E5;--c-f4ece2:#F4ECE2;--c-f4f0e7:#F4F0E7;--c-f6c9d2:#F6C9D2;--c-f6e3e7:#F6E3E7;--c-f6f0e3:#F6F0E3;--c-f7dcb4:#F7DCB4;--c-f7f3ec:#F7F3EC;--c-f8ecee:#F8ECEE;--c-f8f2e9:#F8F2E9;--c-f8fdff:#F8FDFF;--c-f9f4ea:#F9F4EA;--c-faf1f2:#FAF1F2;--c-fbf7f1:#FBF7F1;--sh-1596ed:0 16px 34px -20px rgb(var(--c-171310-rgb)/.95);--sh-17019a:0 32px 64px -36px rgb(var(--c-12344e-rgb)/.7),inset 0 1.5px 0 var(--surface);--sh-521632:0 18px 40px -16px rgb(var(--c-0b1a2a-rgb)/.34);--sh-59158c:0 18px 34px -26px rgb(var(--c-14181c-rgb)/.45);--sh-5c1ace:0 12px 34px rgb(var(--c-0b1b2b-rgb)/.1);--sh-5e17b9:0 14px 30px -12px rgb(var(--action-rgb)/.65);--sh-708c5a:0 12px 30px -20px rgb(var(--action-rgb)/.5);--sh-74635e:0 30px 70px -44px rgb(var(--c-5a340a-rgb)/.75),inset 0 1px 0 rgb(var(--surface-rgb)/.9);--sh-83fc33:0 0 0 4px rgb(var(--info-rgb)/.16);--sh-855c45:0 40px 90px -60px rgb(var(--c-121820-rgb)/.55),0 1px 0 rgb(var(--c-121820-rgb)/.05);--sh-8e4374:0 22px 44px -26px rgb(var(--c-14181c-rgb)/.55);--sh-b2baba:0 6px 18px -12px rgb(var(--c-171310-rgb)/.6);--card-head-from:#575E65;--card-head-to:#3F464D;--r-field-in:calc(var(--r-md) - 1px);--mbar-h:61px} .btn.hc-bk,.btn.hc-pill{background:var(--c-0b1b2b);border-color:transparent;color:var(--surface)} .btn.hc-bk:hover,.btn.hc-pill:hover{background:var(--action);color:var(--surface);text-decoration:none} .pt .btn-secondary{background:transparent;border-color:rgb(var(--surface-rgb)/.4);color:var(--surface)} .pt:hover .btn-secondary{background:var(--surface);border-color:var(--surface);color:var(--c-10243a)} .pkc .btn-primary{background:var(--pk-accent,var(--action));border-color:transparent;box-shadow:var(--pk-shadow,var(--sh-5a1b28))} .pkc .btn-primary:hover{background:var(--pk-accent,var(--action));border-color:transparent;filter:brightness(.93);box-shadow:var(--pk-shadow,var(--sh-5a1b28))} .pkc.allpk .btn-secondary{background:var(--c-171310);border-color:var(--c-171310);color:var(--surface);box-shadow:var(--sh-1596ed)} .btn.hc-bk,.btn.hc-bk:hover,.btn.hc-bk:active,.btn.mqs-book,.btn.mqs-book:hover,.btn.mqs-book:active,.btn.lb,.btn.lb:hover,.btn.lb:active{box-shadow:none} .locbar .btn.lb{background:var(--c-0b1b2b);border-color:transparent;color:var(--surface)} .locbar .btn.lb:hover{background:var(--action);border-color:transparent;color:var(--surface)} .locbar .btn.lb2{background:var(--surface);border-color:var(--c-e7c9cf);color:var(--c-0b1b2b)} .locbar .btn.lb2:hover{background:var(--surface);border-color:var(--action);color:var(--c-0b1b2b)} .btn.mqs-book:hover{background:var(--c-a6394b);border-color:var(--c-a6394b);color:var(--surface)} .shead{display:flex;align-items:baseline;gap:14px;margin-bottom:16px} .shead h2{font-weight:800} /* A 26x3 brand rule above the heading, the same device .eyebrow::before uses on the legacy pages at 20x2. In flow, not absolute: an absolutely positioned bar would sit in the section above's padding and collide the first time a section's padding changed. It adds 11px to each of the 8 section heads, which is the intended visual change, not a side effect. */ .shead h2::before{content:'';display:block;width:26px;height:3px; border-radius:var(--r-sm);background:var(--action);margin-bottom:8px} .shead a{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;color:var(--action);font-weight:600;font-size:13.5px} .atc{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--c-4e6478); background:var(--surface);border:1px solid var(--c-e4eaf0);border-radius:var(--r-sm);padding:5px 6px 5px 12px} .atc b{font-weight:700;color:var(--c-0b1b2b)} .atc select{border:0;background:none;font:600 13px var(--font-body);color:var(--action);cursor:pointer;padding:3px} .atc select:focus{outline:none} .shead .atc + a{margin-left:14px} .tag{display:inline-block;font:700 var(--fs-min) var(--font-body);letter-spacing:.05em;padding:3px 8px;border-radius:var(--r-sm)} .tag.new{background:var(--action);color:var(--surface)} .tag.ai{background:var(--action);color:var(--surface)} .tag.pop{background:var(--c-0b1b2b);color:var(--surface)} .cpopt.hi{background:var(--c-f5f8fa)} /* hero */ .locbar{background:var(--action-tint);border-bottom:1px solid var(--c-f2d9de);color:var(--c-0b1b2b);font-size:13.5px} .locbar .w{display:flex;align-items:center;gap:10px;padding-block:9px} .locbar b{font-weight:700} .locbar .lshort{display:none} @media(max-width:620px){.locbar .lfull{display:none}.locbar .lshort{display:inline}} .locbar .lb2{margin-left:auto} .locbar .lx{background:none;border:0;color:var(--c-4e6478);font-size:20px;line-height:1;cursor:pointer; flex:none;width:44px;height:44px;border-radius:var(--r-sm)} .locbar .lx:hover{background:var(--c-f6e3e7)} /* the footage runs behind the whole hero. Body text measured 1.47 against it, so a veil is required — heaviest on the left where the words are, lighter on the right so the film still reads. */ .hero{position:relative;padding:clamp(18px,2.4vw,28px) 0 0;isolation:isolate;overflow:hidden} /* UAT 10: the card's name is a link now, and it must not look like one - it sits inside a card that is already a visual unit. Colour and weight inherit; the affordance is the underline on hover and the focus ring. */ .tcname{color:inherit;text-decoration:none;display:inline-block} .tcname:hover b{text-decoration:underline} .tcname:focus-visible{outline:2px solid var(--action);outline-offset:3px;border-radius:var(--r-sm)} .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .bgveil{position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg, rgb(var(--surface-rgb)/.95) 0%, rgb(var(--surface-rgb)/.93) 38%, rgb(var(--surface-rgb)/.6) 58%, rgb(var(--surface-rgb)/.42) 100%)} .bgpause{position:absolute;right:18px;top:18px;z-index:5;background:rgb(var(--surface-rgb)/.94); border:1px solid var(--c-e4eaf0);border-radius:var(--r-pill);width:30px;height:30px;font-size:var(--fs-min); cursor:pointer;color:var(--c-0b1b2b);display:grid;place-items:center} @media(max-width:768px){ .bgvid,.bgpause{display:none} .bgveil{background:none} } @media(prefers-reduced-motion:reduce){ .bgvid,.bgpause{display:none} .bgveil{background:none} } .hgrid>*{min-width:0} .hgrid{display:grid;grid-template-columns:minmax(0,1.25fr) 268px;gap:16px;align-items:stretch} .hcopy{padding:6px 4px 0;min-width:0} .brandline{font:700 var(--fs-min) var(--font-body);letter-spacing:.15em;text-transform:uppercase; color:var(--action);margin-bottom:10px} .hcopy h1{font-weight:800;line-height:1.08} .hcopy h1 .r{color:var(--action)} /* `.hcopy p` IS GONE WITH ITS LAST SUBJECT. The intro paragraph was the only

in .hcopy that this rule still reached: #heroAt is the other one, and .hcopy .heroat (0,2,0) already overrides all four of its declarations - colour, size, margin and max-width. Leaving it would be a rule that matches an element and changes nothing about it. */ /* A quiet line on the footage, not a --wash panel. Two rules here are load-bearing and both were found by looking, not by a gate: SCOPED TO .hcopy - `.hcopy p{font-size:15px;max-width:42ch}` is (0,1,1) and outranked a bare `.heroat`, clamping the line to 42ch and wrapping it onto a second row for all seven centres. display:inline-block ON THE SVG - the reset at the top of this sheet is `img,svg{display:block}`, so the pin took a line of its own. */ /* margin-top WENT FROM -6px TO 12px WITH THE PARAGRAPH THAT JUSTIFIED IT. The negative value existed to tuck this line up under the intro copy's 18px bottom margin. HERO-3 removed that paragraph, so the -6px started biting into the h1 instead and the line overlapped "Before you call." by exactly 6px. Measured, and only visible in a screenshot - h1 carries margin:0, so nothing else absorbed it. 12px is the gap the paragraph itself used below the headline. */ .hcopy .heroat{font-size:13.5px;color:var(--c-4e6478);margin:12px 0 16px; display:none;max-width:none} .hcopy .heroat b{font-weight:700;color:var(--c-0b1b2b)} .hcopy .heroat svg{display:inline-block;vertical-align:-2px;margin-right:4px} .hcopy .heroat.on{display:block} /* FLUID, NO BAND (Phase 4d): a tile is at least 264px - 160px of text beside the icon and its own chevron column - so the 268px column beside the hero holds one per row and the row under a stacked headline holds as many as fit, a lone last tile taking the full row (Phase 4e). Wrapped lines cannot stretch to each other, so the floor is the tallest tile. */ .hrail{display:flex;flex-wrap:wrap;align-content:flex-start;gap:9px;min-width:0} .hrail .rcard{min-height:81px} .rcard{background:var(--surface);min-width:0;border:1px solid var(--c-e4eaf0);border-radius:var(--r-md);padding:12px 13px; display:flex;align-items:center;gap:11px;transition:.15s;flex:1 1 264px} .rcard:hover{border-color:var(--action);box-shadow:var(--sh-a5398e)} .rcard .ic{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;flex:none} .rcard b{font:700 13.5px/1.25 var(--font-display);display:block} .rcard>span:not(.ic):not(.ch){flex:1 1 160px;min-width:160px} .rcard small{color:var(--c-4e6478);font-size:12px;display:block} .rcard .st{color:var(--ok);font:600 var(--fs-min) var(--font-body);display:block} .rcard .ch{margin-left:auto;color:var(--c-5f7183);flex:none} @media(min-width:769px){ .heromerge #ai{background:linear-gradient(100deg, rgb(var(--surface-rgb)/.97) 0%, rgb(var(--surface-rgb)/.93) 35%, rgb(var(--surface-rgb)/.66) 62%, rgb(var(--surface-rgb)/.4) 100%); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); border:1px solid var(--c-e4eaf0);box-shadow:var(--sh-a5398e)} } /* ask MedQuest - the card that replaced the three tiles. It keeps .cap and .cap.sig, so its frame, its icon well, its heading and its disclaimer band are the rules that were already here; what is new is the row layout below the finder and the divider above it. */ .askcard{margin-top:14px;max-width:none} .askhead{display:flex;align-items:center;gap:10px;margin-bottom:12px} .askhead .ic{margin-bottom:0;flex:0 0 auto} .askcard .mqc-inline{border:0;padding:0;margin:0;background:none} .askcard .mqc-send{width:auto;min-width:44px} /* .mqc-send is a 42px SQUARE, sized for the arrow the modal and the explainer still use. This surface says Search instead, and a word in a square box is a word with its end cut off - which is what shipped in the first screenshot of this card. */ .askrule{border:0;border-top:1px solid var(--c-e4eaf0);margin:14px 0 12px} /* THREE EQUAL COLUMNS, NOT A SENTENCE AND THREE CHIPS. The row used to open with "Have a prescription instead?", which governed Upload and WhatsApp honestly enough but had nothing to do with Track status once that arrived. The label is gone and the three actions are peers. */ .askrx{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} /* TWO ACTIONS, TWO COLUMNS, AT EVERY WIDTH. gen_home.py adds .askrx2 when contact.whatsappEnabled is off and #askWa is not emitted; the class beats the phone breakpoint's single column on specificity. */ .askrx.askrx2{grid-template-columns:repeat(2,1fr)} .askrx .btn{display:flex;min-width:0} .askrx .btn svg{flex:0 0 auto} /* #25D366 IS THE BRAND GREEN AND WHITE ON IT IS 1.85:1, against a 4.5 requirement - the one control on this card that failed outright, and it failed before this card existed. Darkened along its OWN hue and saturation (142.4deg, 0.702) with only lightness moved, 0.486 -> 0.31, so it still reads as WhatsApp green: #188741, white on it is 4.58:1. The logo artwork in the footer and the floating button keep #25D366 - those are marks, not text backgrounds. */ /* SMART-SEARCH-01 DARKENED THE GREEN FILL TO REACH 4.5:1 ON WHITE TEXT. The fill is gone now - the control is white with the shared border and dark ink, like its two neighbours - so the darkened green is not needed and is not kept. The brand green survives where it belongs: inside the circular mark, which is artwork rather than a text background. */ .askdis{margin:12px 0 0} @media(max-width:620px){ .askrx{grid-template-columns:1fr} /* THE INPUT TAKES THE ROW AND THE BUTTON GOES UNDER IT. Sharing 311px with a 78px button left the placeholder wrapping inside a one-row textarea, so its second half was cut off - the same defect as the clipped button, one element to the left, and only visible in a screenshot. */ .askcard .mqc-form{flex-wrap:wrap;--askplus-under:52px} .askcard .mqc-form textarea{flex:1 1 100%} .askcard .mqc-send{width:100%} } .cap{background:var(--surface);border:1px solid var(--c-e4eaf0);border-radius:var(--r-lg);padding:18px} .cap.sig{border:2px solid var(--action-hover);box-shadow:var(--sh-708c5a)} .cap .ic{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:10px} .cap b{font:700 16px var(--font-display);display:flex;align-items:center;gap:8px} .cap p{color:var(--c-4e6478);font-size:13.5px;margin:6px 0 12px} /* A NOTICE, NOT AN ACTION. It was teal - a third accent signalling nothing - and it must not become red: red on this site means "do this" (Book, Call, Search), and a disclaimer that looks like a button teaches people to ignore both. Navy on the page's own wash measures 16.33, the highest contrast on the card, which is what a sentence about not diagnosing deserves. Its ink was a FIFTH raw teal hex, not among the four on the brief's list - found by reading the rule rather than the list. The value is not repeated here: a comment that spells out the thing it forbids is how the package fence caught its own _verify_ note in BOOKING-02. */ /* THE BOX GOES, THE INK STAYS. It was a --bg panel with a navy left rule and its own padding, which read as a third card inside the card. What is NOT being done here is shrinking it to small grey: this is the sentence that says a search tool does not diagnose anybody, on a health site, and its contrast is the reason the gate below exists. So the fill, the rule and the padding go; the navy ink and a readable size stay, with the lead sentence carrying the weight. verify.py's band gates move with it. */ /* A FOOTNOTE NOW, AND THE COLOUR IS THE MEASURED PART. Every grey token on this page FAILS 4.5:1 here, because the card is translucent over moving video and the worst real background behind this line is rgb(193,200,205): --soft 3.63:1, --faint 2.98:1, --mute 2.97:1. Measured 2026-09-04 with the text hidden so the background was genuine, across six video frames. #3C4D5D is the quietest ink that still passes - 5.15:1 there, and 8.71:1 on white, so it reads as secondary against --ink's 17.41:1 without dropping under the floor. A token was not added for one use; the value is named here with the measurement that chose it. */ .cap .aipromise{color:var(--c-3c4d5d);font-size:var(--fs-min);font-weight:400;line-height:1.45; margin:6px 0 0} /* common questions: the link card to faq.html (Round A commit 2) */ /* the green ground is a rounded panel at the content width, the dark "See everything we publish" panel's shape - the Round A band ran edge to edge and was the only full-bleed ground on the page (2026-11-04) */ .fqc{position:relative;color:var(--c-14181c)} .fqc-in{position:relative;overflow:clip;display:flex;flex-direction:column;gap:36px; padding:clamp(24px,3.2vw,44px) clamp(18px,3vw,40px);border-radius:var(--r-lg); background:linear-gradient(168deg,var(--c-e9f1ec) 0%,var(--c-f2f6f1) 46%,var(--c-f6f7f4) 100%)} /* the blooms paint UNDER the content: positioned boxes paint over in-flow ones, and measured at 1440 the lower bloom's tint lay across the white card and took the sub-line to 4.49:1 */ .fqc-bl{position:absolute;z-index:0;border-radius:var(--r-pill);pointer-events:none; animation:rpt-float 20s ease-in-out infinite} .fqc-top,.fqc-row{position:relative;z-index:1} .fqc-bl.a{top:-240px;right:-180px;width:680px;height:560px; background:radial-gradient(closest-side,var(--c-dcebe1),rgb(var(--c-dcebe1-rgb)/0) 72%)} .fqc-bl.b{bottom:-260px;left:-160px;width:620px;height:520px;animation-duration:26s; animation-direction:reverse;background:radial-gradient(closest-side,var(--c-f1ece2),rgb(var(--c-f1ece2-rgb)/0) 72%)} .fqc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px} .fqc-hd{flex:1 1 420px;display:flex;flex-direction:column;gap:12px;min-width:0} /* #5f655c, 2026-09-16: a moving gradient ground - margin, not the least passing value. Why, in gen_home.py. */ .fqc-eye{line-height:1.2;font-family:var(--font-body); color:var(--c-5f655c)} .fqc-h{margin:0;font-weight:800;line-height:1.04;font-family:var(--font-display);letter-spacing:-.02em;text-wrap:balance} .fqc-acc{position:relative;white-space:nowrap} .fqc-acc em{display:inline-block;font-style:normal;color:var(--c-2f6b56)} .fqc-ul{position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--c-2f6b56);transform-origin:left} .js-reveal .fqc-top .fqc-acc em{opacity:0;transform:translateY(14px); transition:opacity .7s cubic-bezier(.22,.8,.3,1) .2s,transform .7s cubic-bezier(.22,.8,.3,1) .2s} .js-reveal .fqc-top .fqc-ul{transform:scaleX(0);transition:transform .82s cubic-bezier(.22,.8,.3,1) .52s} .js-reveal .fqc-top.in .fqc-acc em,.js-reveal .fqc-top.in .fqc-ul{opacity:1;transform:none} .fqc-arr{display:inline-block;transition:transform .26s cubic-bezier(.22,.8,.3,1)} .fqc-ask:hover .fqc-arr,.fqc-card:hover .fqc-arr{transform:translateX(5px)} /* two cards, one row: 50/50 from 1025px (the For doctors / For corporates shape below), stacked under that - the lone 720px card read as a failed load on a wide screen (2026-11-04) */ .fqc-row{display:grid;grid-template-columns:1fr;gap:18px} .fqc-row>*{min-width:0} @media(min-width:1025px){.fqc-row{grid-template-columns:1fr 1fr;gap:24px}} @media(max-width:620px){.fqc-tk{white-space:normal}} /* inside the panel a phone card is 315px; the longest phrase needs 350 on one line */ .fqc-card,.fqc-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px; padding:26px 30px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--c-e2e5dd);color:var(--c-14181c); text-decoration:none;transition:border-color .22s,box-shadow .22s,transform .22s cubic-bezier(.22,.8,.3,1)} .fqc-card:hover,.fqc-ask:hover{color:var(--c-14181c);border-color:var(--c-c5d4c7);box-shadow:var(--sh-59158c); transform:translateY(-3px)} .fqc-card:focus-visible,.fqc-ask:focus-visible{outline:2px solid var(--c-2f6b56);outline-offset:3px} .fqc-txt{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0} .fqc-ti{font:600 18px/1.3 var(--font-body);letter-spacing:-.024em} .fqc-sub{line-height:1.5;color:var(--c-6d766a)} .fqc-tk{display:inline-block;white-space:nowrap;color:var(--c-2f6b56);font-weight:500; transition:opacity .36s ease,transform .36s ease} .fqc-tk.out{opacity:0;transform:translateY(-6px)} .fqc-tk.pre{opacity:0;transform:translateY(6px);transition:none} .fqc-cta{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:var(--r-pill); background:var(--c-eef1ea);color:var(--c-14211c);font:600 14px/1.2 var(--font-body);letter-spacing:-.01em; transition:background .26s} .fqc-card:hover .fqc-cta,.fqc-ask:hover .fqc-cta{background:var(--c-9ec9ae)} .wqh-in{display:flex;flex-direction:column;gap:34px}.wqh-hd{display:flex;flex-direction:column;gap:14px;max-width:760px} .wqh-eye{line-height:1.2;font-family:var(--font-body);color:var(--c-6d736a)} .wqh-h{margin:0;font-weight:800;line-height:1.04;font-family:var(--font-display);letter-spacing:-.02em;text-wrap:balance;color:var(--c-14181c)}.wqh-acc{font-style:normal;color:var(--c-2f6b56)} .wqh-sub{margin:0;max-width:520px;font-weight:400;line-height:1.62;font-family:var(--font-body);color:var(--c-56604f);text-wrap:pretty} .wqh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}.wqh-card[data-code="NABL"]{flex-wrap:wrap}.wqh-card[data-code="NABL"] .wqh-id{flex:1 1 180px}a.wqh-sym{width:auto;height:auto}a.wqh-sym img{height:128px;max-width:none;max-height:none}.wqh-nlk{font-size:var(--fs-min);color:var(--c-2f6b56);text-decoration:underline;min-height:24px} .wqh-card{position:relative;overflow:clip;box-sizing:border-box;height:100%;display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:var(--r-lg);background:linear-gradient(150deg,var(--surface) 0%,var(--c-f3f5ef) 100%);border:1px solid var(--c-e2e5dd);transition:transform .22s cubic-bezier(.22,.8,.3,1),box-shadow .22s,border-color .22s}.wqh-rule{position:absolute;top:0;left:0;right:0;height:3px;transform-origin:left;background:linear-gradient(90deg,var(--c-2f6b56) 0%,var(--c-a8c8b4) 100%)} .wqh-plate{box-sizing:border-box;flex:0 0 auto;width:96px;height:62px;padding:8px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--c-e8eae3);display:flex;align-items:center;justify-content:center}.wqh-plate img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .wqh-id{display:flex;flex-direction:column;gap:4px;min-width:0}.wqh-body{font:500 var(--fs-min)/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--c-2f6b56)}.wqh-ref{font:600 17px/1.25 var(--font-body);letter-spacing:-.02em;color:var(--c-14181c)}.wqh-role{font:400 13.5px/1.4 var(--font-body);color:var(--c-6a7267)} .wqh-cta{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:26px 28px;border-radius:var(--r-lg);background:var(--c-14211c);color:var(--c-eef2ea);text-decoration:none;transition:transform .22s cubic-bezier(.22,.8,.3,1),box-shadow .22s}.wqh-cta:focus-visible{outline:2px solid var(--c-2f6b56);outline-offset:3px} .wqh-ctx{display:flex;flex-direction:column;gap:5px;min-width:0}.wqh-ctt{font:600 20px/1.3 var(--font-body);letter-spacing:-.025em;color:var(--c-eef2ea)}.wqh-ctp{font:400 14.5px/1.5 var(--font-body);color:var(--c-9fae9f)} .wqh-pill{display:inline-flex;align-items:center;gap:9px;min-height:44px;box-sizing:border-box;padding:13px 22px;border-radius:var(--r-pill);background:var(--c-eef2ea);color:var(--c-14211c);font:600 14px/1.2 var(--font-body);letter-spacing:-.01em;transition:background .26s}.wqh-arr{display:inline-block;transition:transform .26s cubic-bezier(.22,.8,.3,1)} @media(hover:hover){ .wqh-card:hover{border-color:var(--c-c5d4c7);box-shadow:var(--sh-c4779d);transform:translateY(-4px)} .wqh-cta:hover{color:var(--c-eef2ea);box-shadow:var(--sh-8e4374);transform:translateY(-4px)} .wqh-cta:hover .wqh-arr{transform:translateX(5px)} .wqh-cta:hover .wqh-pill{background:var(--c-9ec9ae)} } .js-reveal .wqh-grid>.reveal:nth-child(2){transition-delay:.1s}.js-reveal .wqh-grid>.reveal:nth-child(3){transition-delay:.2s} .js-reveal .reveal .wqh-rule{transform:scaleX(0);transition:transform .9s cubic-bezier(.22,.8,.3,1)}.js-reveal .reveal.in .wqh-rule{transform:none} @media(max-width:400px){.wqh-cta{padding:22px 20px}} /* .sv WENT WITH THE CENTRE CHIPS, CENTRES-MOVE commit 2. The five rules under this name styled a services tile no page has rendered for months; index.html was the last page carrying the class at all, on the centre rows' modality chips, and the moment those rows moved to contact.html the splitter could no longer prove the rules were the homepage's - so 350 characters of CSS that match nothing anywhere moved into the sheet all 54 pages download. Deleted rather than followed there. for-corporates.html keeps .svc, which it does match. */ /* ---- the six-tab services card (ROUND C COMMIT 2) --------------------- THE TINT IS THE DESIGN'S SIGNATURE and it is on the BAND, never on the card: the card stays white so every ink on it is measured against one ground rather than six. The zip tints both and its own inks fail on its own tints - the eyebrow reads 4.06:1 on the MRI tint. NO @keyframes. The progress bar is a transition on transform, driven by a class, because chrome.split_sheet copies every @keyframes into the sheet all 58 pages download - the leak that cost Round A 277 characters and commit 1 another 499. THE RAIL IS HIDDEN UNTIL JAVASCRIPT CONFIRMS IT WORKS, and every panel is rendered. With no JavaScript a reader gets all six services stacked, not one service and a row of buttons that do nothing. */ .mqs{position:relative;border-radius:var(--r-lg);padding:22px; background:var(--mqs-bg,var(--c-f7f3ec));transition:background .9s ease} .mqs[data-s="home"]{--mqs-bg:var(--c-f7f3ec)} .mqs[data-s="mri"]{--mqs-bg:var(--c-eef3f8)} .mqs[data-s="ct"]{--mqs-bg:var(--c-edf5f1)} .mqs[data-s="usg"]{--mqs-bg:var(--c-faf1f2)} .mqs[data-s="xray"]{--mqs-bg:var(--c-f2f1f9)} .mqs[data-s="lab"]{--mqs-bg:var(--c-f9f4ea)} .mqs-card{background:var(--surface);border:1px solid var(--c-e4eaf0);border-radius:var(--r-md);overflow:hidden} .mqs-rail{display:none} .js-mqs .mqs-rail{display:flex;overflow-x:auto;scrollbar-width:none; border-bottom:1px solid var(--c-e4eaf0)} .mqs-rail::-webkit-scrollbar{display:none} .mqs-tab{position:relative;flex:1 0 auto;min-width:118px;min-height:54px;border:0; background:none;cursor:pointer;padding:0 14px;white-space:nowrap; font:600 13px var(--font-body);color:var(--c-4e6478);transition:color .3s ease} .mqs-tab + .mqs-tab{border-left:1px solid var(--c-e4eaf0)} .mqs-tab[aria-selected="true"]{color:var(--c-0b1b2b)}.mqs-tab:focus-visible{outline-offset:-5px} .mqs-track{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;opacity:0} .mqs-tab[aria-selected="true"] .mqs-track{opacity:1} .mqs-fill{display:block;height:100%;background:var(--action);transform:scaleX(0); transform-origin:left} .mqs-tab[aria-selected="true"].mqs-run .mqs-fill{transform:scaleX(1); transition:transform var(--mqs-dwell,7s) linear} .mqs-panel{display:flex;flex-wrap:wrap} .mqs-panel + .mqs-panel{border-top:1px solid var(--c-e4eaf0)} .js-mqs .mqs-panel{display:none} .js-mqs .mqs-panel.on{display:flex} .js-mqs .mqs-panel + .mqs-panel{border-top:0} .mqs-kickrow{display:flex;align-items:center;gap:12px} .mqs-count{font:700 12px var(--font-body);letter-spacing:.12em;color:var(--c-a6394b)} .mqs-dash{width:22px;height:1px;background:var(--c-d3dde6)} .mqs-kick{font-family:var(--font-body);color:var(--c-575d54)} .mqs-h{margin:0;max-width:16ch;font-weight:800;line-height:1.04;font-family:var(--font-display); letter-spacing:-.02em;color:var(--c-0b1b2b);text-wrap:balance} .mqs-p{margin:0;max-width:52ch;font:400 15.5px/1.6 var(--font-body);color:var(--c-4b5157);text-wrap:pretty} .mqs-facts{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--c-e4eaf0); display:flex;flex-direction:column;gap:10px} .mqs-fact{display:flex;gap:11px;align-items:flex-start;font:400 14.5px/1.45 var(--font-body); color:var(--c-0b1b2b)} .mqs-fact i{flex:0 0 auto;width:5px;height:5px;border-radius:var(--r-pill);background:var(--action); margin-top:7px} .mqs-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:2px} @media(max-width:768px){ .mqs{padding:14px} .mqs-copy{padding:24px 20px} .mqs-h{max-width:none} } @media(prefers-reduced-motion:reduce){ .mqs{transition:none} .mqs-tab[aria-selected="true"].mqs-run .mqs-fill{transition:none;transform:scaleX(0)} } @media all{/* the price checker - why one @media group: gen_home.py _checker() */ .mqs-copy{display:flex;flex-direction:column;justify-content:flex-start;gap:14px; flex:1000 1 480px;min-width:0;padding:44px 46px 42px} .mqs-copy>*{transition:opacity .52s cubic-bezier(.2,.7,.2,1),transform .52s cubic-bezier(.2,.7,.2,1)} .mqs-copy>:nth-child(2){transition-delay:60ms} .mqs-copy>:nth-child(3){transition-delay:120ms} .mqs-copy>:nth-child(4){transition-delay:170ms} .mqs-copy>:nth-child(5){transition-delay:220ms} .js-mqs .mqs-panel.on:not(.mqs-in) .mqs-copy>*{opacity:0;transform:translateY(12px);transition:none} .mqs-calc{display:flex;flex-direction:column;flex:1 1 420px;min-width:0;padding:28px 28px 30px; border:solid var(--c-e4eaf0);border-width:1px 0 0 1px;margin:-1px 0 0 -1px;transition:background .9s ease; background:linear-gradient(160deg,var(--c-f4f0e7) 0%,var(--c-eee9de) 100%)} .mqs-panel[data-panel="mri"]{--mqs-c1:var(--c-eaf1f7);--mqs-c2:var(--c-e2ebf4)} .mqs-panel[data-panel="ct"]{--mqs-c1:var(--c-e8f2ec);--mqs-c2:var(--c-dfede4)} .mqs-panel[data-panel="usg"]{--mqs-c1:var(--c-f8ecee);--mqs-c2:var(--c-f3e2e5)} .mqs-panel[data-panel="xray"]{--mqs-c1:var(--c-eeedf7);--mqs-c2:var(--c-e6e4f2)} .mqs-panel[data-panel="lab"]{--mqs-c1:var(--c-f6f0e3);--mqs-c2:var(--c-f0e8d7)} .mqs-ch{margin:0 0 4px;font-family:var(--font-display);color:var(--c-575d54)} .mqs-hint{margin:0 0 16px;font:400 13px/1.45 var(--font-body);color:var(--c-575d54)} .mqs-studies{display:flex;flex-direction:column;gap:6px} .mqs-st{display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;height:44px;padding:0 14px;border-radius:var(--r-md);cursor:pointer; text-align:left;background:transparent;border:1px solid var(--c-d3dde6);font:inherit; transition:background .18s ease,border-color .18s ease} .mqs-st[aria-pressed="true"]{background:var(--surface);border-color:var(--c-0b1b2b)} .mqs-sn{font:500 14px var(--font-body);color:var(--c-4b5157);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .mqs-st[aria-pressed="true"] .mqs-sn{font-weight:600;color:var(--c-0b1b2b)} .mqs-sp{flex:0 0 auto;font:700 14px var(--font-display);letter-spacing:-.01em;color:var(--c-575d54)} .mqs-st[aria-pressed="true"] .mqs-sp{color:var(--c-a6394b)} .mqs-st.mqs-out .mqs-sp{font:600 13px var(--font-body);color:var(--c-575d54)} .mqs-sums{margin-top:16px} .mqs-sum{padding:18px 18px 16px;border-radius:var(--r-md);background:var(--surface); border:1px solid var(--c-d3dde6); transition:opacity .38s cubic-bezier(.2,.7,.2,1),transform .38s cubic-bezier(.2,.7,.2,1)} .js-mqs .mqs-sum.on:not(.mqs-in){opacity:0;transform:translateY(6px);transition:none} .mqs-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px; margin-bottom:14px} .mqs-fig{min-width:0} .mqs-sl{margin-bottom:5px;font:700 var(--fs-min) var(--font-body);letter-spacing:.12em; text-transform:uppercase;color:var(--c-575d54)} .mqs-big{font:800 30px/1 var(--font-display);letter-spacing:-.03em;color:var(--c-0b1b2b)} .mqs-out .mqs-big{font-size:22px;line-height:1.15} .mqs-at,.mqs-where{margin:6px 0 0;font:400 12.5px/1.4 var(--font-body);color:var(--c-575d54)} .mqs-out .mqs-at,.mqs-out .mqs-book{display:none} .mqs-book{flex:0 0 auto;display:inline-flex} .mqs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px; padding-top:14px;border-top:1px solid var(--c-e4eaf0)} .mqs-grid>:only-child{grid-column:1/-1} .mqs-k{display:block;margin-bottom:3px;font:700 var(--fs-min) var(--font-body);letter-spacing:.1em; text-transform:uppercase;color:var(--c-575d54)} .mqs-v{display:block;font:600 14px/1.35 var(--font-body);color:var(--c-0b1b2b)} @media(max-width:768px){ .mqs-copy{padding:30px 26px 34px} } @media(max-width:768px){ .mqs-copy{padding:24px 20px} .mqs-calc{padding:22px 20px 24px} } @media(prefers-reduced-motion:reduce){ .mqs-calc,.mqs-copy>*,.mqs-sum,.mqs-st{transition:none!important} } } /* ---- the popular-tests slider ----------------------------------------- ONE TRACK, NATIVE SCROLL, SNAP POINTS. Not a transform carousel: a scroller gets touch fling, momentum, trackpads and a real scrollbar position for free, and every one of those is a thing a transform version has to reimplement and get wrong on one device. The arrows and the dots drive scrollLeft; the browser does the animating. THE CARD CLASSES ARE THE OLD ONES ON PURPOSE. .tcard, .pr, .atcentre, .tat and .noprice all survive, because applyCentre() already rewrites exactly those on every mq:centre and it is the one writer of a price on this page. A new class set would have meant a second re-pricing path - the two-readers mistake this repo has a file about. */ /* THE ARROWS SIT IN THEIR OWN GUTTER, NOT OVER THE CARDS. F5, and it supersedes the earlier left:-20px/right:-20px: a 44px circle 20px outside the row still lands 24px over the first card, and at 1440 that covered the rupee sign of the first card's price. On a site whose whole argument is that the price is visible before you call, an arrow parked on a price is the wrong trade for a few pixels of width. 52px = the 44px control plus 8px of air. The track is the padding box's content, so the cards simply start after the gutter and the arrows never share space with them. THE COUNTS SURVIVE BECAUSE grid-auto-columns IS A PERCENTAGE OF THE TRACK: (100% - 4*11px)/5 is five-across of whatever the track is, so narrowing it narrows the cards rather than dropping one. */ .pslider{position:relative;padding-inline:52px} .ptrack{display:grid;grid-auto-flow:column;gap:11px;overflow-x:auto; scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none; padding-bottom:2px;overscroll-behavior-x:contain} .ptrack::-webkit-scrollbar{display:none} .ptrack>*{scroll-snap-align:start} /* 5 ACROSS AT 1440. The gap is counted out of the width or the fifth card is clipped: four gaps between five cards. */ .ptrack{grid-auto-columns:calc((100% - 4*11px)/5)} /* WHILE DRAGGING, SNAP IS OFF. scroll-snap-type fights a pointer drag - the browser keeps yanking scrollLeft back to the nearest point mid-gesture - so the class comes off for the duration and goes back on at pointerup, which is also what makes the release settle on a card. */ .ptrack.dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing; user-select:none} .tcard{background:var(--surface);border:1px solid var(--c-e4eaf0);border-radius:var(--r-md); display:flex;flex-direction:column;overflow:hidden;min-width:0} /* THE 96px CHARCOAL HEAD, on its own two tokens (--card-head-from, --card-head-to): 1b9dbf3's ramp, restored 2026-11-02. 4b collapsed it into --dark without approval. White title, #E6EDF3 subtitle. Fixed height, not min-height: the whole point is that every head is the same depth so the price, the centre and the button below it line up across a row of five. The two clamps are what keep it fixed - a 2-line name and a 1-line subtitle cannot push it taller. */ .tch{height:96px;flex:0 0 96px;padding:12px 14px;color:var(--surface);display:flex; flex-direction:column;justify-content:center; background:linear-gradient(135deg,var(--card-head-from),var(--card-head-to))} .tch .tcname{color:var(--surface);text-decoration:none;display:flex;flex-direction:column;justify-content:center;min-height:44px;min-width:0} .tcard b{font:700 14px var(--font-display);display:block;line-height:1.25;color:var(--surface); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden} .tcard .sn{color:var(--c-e6edf3);font-size:var(--fs-min);display:block;margin-top:4px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tcb{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1 1 auto} .tcard .pr{font:800 18px var(--font-display);letter-spacing:-.02em} .tcard .pr s{font:400 12px var(--font-body);color:var(--c-5f7183);margin-left:5px} .tcard .atcentre{color:var(--c-5f7183);font-size:var(--fs-min);margin-top:1px} .tcard .atcentre .cn{font-weight:600;color:var(--c-4e6478)} /* margin-top:auto ON THE TURNAROUND, NOT ON .add. 11 of the 31 cards have no turnaround line at all - Cardiac, Lab test and Other have no confirmed group - and pinning .add alone would have left those cards' buttons floating at a different height from their neighbours'. The pin is on whichever of the two comes first, so the Book button sits on one baseline across the row whether the line is there or not. */ .tcard .tat{color:var(--c-4e6478);font-size:var(--fs-min);margin:10px 0 10px;margin-top:auto} .tcard .tat em{font-style:normal;color:var(--c-5f7183)} .tcard.noprice .pr{font-size:15px;color:var(--warn)} .tcard .add{display:flex;gap:6px;margin-top:auto} .tcard .tat + .add{margin-top:0} /* OUTLINED IN BRAND RED, AND 44px UNCONDITIONALLY. The reference drew it at 42; this site's tap band is 44 and section 15B refuses a control the sweep measured below it, so 42 would have failed the gate that exists for exactly this. Not scoped to a media query either - a mouse target this size costs nothing and a phone is not the only device with a coarse pointer. THE RED WAS NOT OVERRIDDEN, IT WAS NEVER WRITTEN. The card shipped with class="btn btn-secondary" and nothing else, so the only rules reaching it were .btn and .btn.sm - asked of the browser rather than guessed, and the answer was two rules, not a collision. .btn's own border is var(--line-s) and its text is var(--ink), which is exactly the grey that shipped. This states the colour the card wants instead of relying on a base meant for neutral buttons. THE HOVER NEEDS THE SPECIFICITY, TOO: .btn:hover already sets brand text on a white ground, which would leave a red-on-white button looking unchanged on hover. 0,3,1 beats 0,2,0, so the fill actually inverts. */ .tcard .add .btn{flex:1} .tcard .add .btn-secondary{background:var(--surface);border-color:var(--action);color:var(--action)} .tcard .add .btn-secondary:hover,.tcard .add .btn-secondary:focus-visible{background:var(--action);border-color:var(--action);color:var(--surface)} /* ---- arrows, dots and the counter -------------------------------------- THE ARROWS SIT ON THE CARD ROW, NOT IN THE PAGER. They shipped as static children of .pbar, which put both of them in a flex row below the cards - the next arrow rendered as a small square at the far left, nowhere near the thing it moves. .pslider was already position:relative; what was missing was the arrows being absolutely positioned children of it, so they are now moved in the markup as well as in the CSS. 44px CIRCLES, half off each edge, vertically centred on the track: top:50% is 50% of .pslider, and .pslider wraps the track alone, so the centre is the card row's centre and stays there as the cards change height. */ /* min-* AS WELL AS width/height, and not for the gate's benefit. A flex or grid parent can compress a fixed height; the minimum is what actually holds 44px, and it is the form section 15B's band asserts. */ .parrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:44px;height:44px;min-width:44px;min-height:44px; border-radius:var(--r-pill);border:1px solid var(--c-d3dde6); background:var(--surface);color:var(--c-4e6478);cursor:pointer;font-size:19px;line-height:1; display:grid;place-items:center;box-shadow:var(--sh-a5398e); transition:border-color .15s,color .15s} /* left:0 IS THE GUTTER'S OUTER EDGE. An absolutely positioned box is offset from its containing block's PADDING box, so 0 puts the arrow at the very start of the 52px gutter and leaves 8px between it and the first card at every width the arrows are shown. No per-breakpoint offsets any more: the gutter is the same everywhere, so there is nothing to keep in step. */ .parrow.prev{left:0} .parrow.next{right:0} /* THE PAGER IS CENTRED, both halves together. The counter used to carry margin-left:auto, which pinned it to the far right of a 1,184px row with the dots stranded on the left - two controls describing one position, as far apart as the layout allowed. */ .pbar{display:flex;align-items:center;justify-content:center;gap:16px; margin-top:12px} .pdots{display:flex;gap:6px;flex-wrap:wrap;min-width:0} .pdot{width:7px;height:7px;border-radius:var(--r-pill);border:0;padding:0;cursor:pointer; background:var(--c-d3dde6);transition:background .15s,transform .15s} .pdot.on{background:var(--action);transform:scale(1.25)} /* 31 CARDS IS 31 PAGES AT ONE-UP, AND 31 DOTS IS NOT A CONTROL. Above seven pages the dots come off and the counter carries the position alone. The counter is ALWAYS shown - it is the only thing that says where you are when the dots are gone. */ .pdots.many{display:none} .pcount{color:var(--c-4e6478);font-size:12.5px;font-variant-numeric:tabular-nums; white-space:nowrap} .parrow:hover{border-color:var(--action);color:var(--action)} .parrow[hidden]{display:none} /* packages */ .pkc .grouped{color:var(--c-4e6478);font-size:12px;line-height:1.45;margin:-4px 0 10px} /* Prices are read down a column, and proportional digits make a 1 narrower than a 7 so the column stops lining up. .tier td:last-child above has carried tabular-nums since it was written; every other place a price renders now matches it. Deliberately NOT applied to .tat em: that is running prose, where tabular figures space badly. */ .tcard .pr,.pkc .price b{ font-variant-numeric:tabular-nums} .sibtns{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap} .sibtns .btn{flex:1 1 auto} /* doctor hero (DOCTOR-HERO-01). The reference is teal on a near-white ground; only the TEAL maps to this site's red, the amber stays amber as --warn, and the reference's mint/sand/lilac tint cycle is replaced by --wash -> --warn-w -> --wash so the ground tracks the SPECIALTY rather than decorating. No new token: every colour below is one the site had. */ .dh{position:relative;overflow:hidden;border:1px solid var(--c-e4eaf0); border-radius:var(--r-lg);background:var(--action-tint);transition:background .9s ease} .dh.path{background:var(--warn-tint)} .dhglow{position:absolute;border-radius:var(--r-pill);filter:blur(70px);opacity:.5; pointer-events:none;transition:background .9s ease;background:var(--c-f6c9d2)} .dhg1{width:420px;height:420px;top:-150px;right:-70px;animation:rpt-float 14s ease-in-out infinite} .dhg2{width:300px;height:300px;bottom:-120px;left:5%;opacity:.42; animation:rpt-float 19s ease-in-out infinite reverse} .dh.path .dhglow{background:var(--c-f7dcb4)} .dhin{position:relative;display:grid;grid-template-columns:1fr minmax(0,340px); gap:34px;align-items:center;padding:34px 30px} .dhcopy{display:flex;flex-direction:column;gap:16px;min-width:0; animation:rpt-rise .7s cubic-bezier(.22,1,.36,1) both} .dheye{font-family:var(--font-body); color:var(--action-hover);transition:opacity .4s ease} .dhh{margin:0;font-weight:800;line-height:1.06;font-family:var(--font-display);letter-spacing:-.03em; text-wrap:balance;color:var(--c-0b1b2b);transition:opacity .4s ease} .dhlede{margin:0;font-size:15px;line-height:1.55;max-width:46ch;color:var(--c-4e6478); transition:opacity .4s ease} .dhstats{display:flex;gap:30px;padding-top:14px;border-top:1px solid var(--c-d3dde6)} .dhstats b{display:block;font:500 28px var(--font-body);letter-spacing:-.02em;color:var(--c-0b1b2b);font-variant-numeric:tabular-nums} /* --soft, NOT --mute, AND IT WAS MEASURED. --mute is 5.03:1 on white and 4.71:1 on --bg, which is why it is the site's small-label colour - but this band's ground is a tint with two blurred glows drifting over it, and the darkest-pixel probe reads these 10px labels at 4.21-4.32:1 there, under the 4.5 they need. --soft is the same family two steps darker. */ .dhstats span{font:600 var(--fs-min) var(--font-body);letter-spacing:.14em;text-transform:uppercase; color:var(--c-4e6478)} .dhcard{justify-self:center;width:100%;background:var(--surface);border:1px solid var(--c-e4eaf0); border-radius:var(--r-md);padding:12px;box-shadow:var(--sh-5c1ace); animation:rpt-rise .8s .12s cubic-bezier(.22,1,.36,1) both} /* NOT WHITE, AND TWO DEFECTS SHARE THAT CAUSE: the images are matted onto white, so a white coat has nothing to sit against and the frame's bottom edge reads as a hard band. --line is one step off white. All five. */ .dhph{position:relative;height:258px;overflow:hidden;border-radius:var(--r-sm);background:var(--c-e4eaf0)} .dhph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center top;opacity:0;transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1)} .dhph img.on{opacity:1;transform:scale(1.05)} .dhsweep{position:absolute;left:0;right:0;height:34%;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgb(var(--action-rgb)/0) 0%,rgb(var(--action-rgb)/.1) 60%,rgb(var(--action-rgb)/0) 100%); animation:rpt-sweep 5.5s linear infinite} /* the veil fades to that ground, not to white. */ .dhveil{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:3;pointer-events:none; background:linear-gradient(180deg,transparent,var(--c-e4eaf0))} .dhcap{display:flex;flex-direction:column;gap:4px;padding:12px 2px 0;transition:opacity .4s ease} .dhcap .b{font:600 var(--fs-min) var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--action-hover)} .dhcap .n{font:700 17px/1.18 var(--font-display);letter-spacing:-.02em;color:var(--c-0b1b2b)} .dhcap .d{font-size:12.5px;color:var(--c-4e6478)} .dhwhen{display:flex;align-items:center;gap:8px;margin-top:3px} .dhchip{font:600 var(--fs-min) var(--font-body);letter-spacing:.08em;text-transform:uppercase; padding:3px 7px;border-radius:var(--r-sm);color:var(--surface);background:var(--action)} .dhchip.path{background:var(--warn)} .dhtime{font:500 12.5px var(--font-body);color:var(--c-0b1b2b);font-variant-numeric:tabular-nums} .dhfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px; margin-top:12px;padding-top:12px;border-top:1px solid var(--c-e4eaf0)} .dhdots{display:flex;gap:2px} /* 8px -> 26px, drawn in ::before so the BUTTON can be the 44px control. .ah-dot's construction; see the 44px block. */ .dhdot{width:44px;height:44px;min-width:44px;min-height:44px;border:0;background:none; padding:0;cursor:pointer;display:grid;place-items:center;position:relative} .dhdot::before{content:'';width:8px;height:8px;border-radius:var(--r-pill);background:var(--c-d3dde6); transition:width .32s cubic-bezier(.22,1,.36,1),background .32s ease} .dhdot[aria-selected="true"]::before{width:26px;background:var(--action)} .dhall{font:600 var(--fs-min) var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--action-hover)} .dhlinks{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto} .dhlinks a{display:inline-flex;align-items:center;min-height:44px} .dhduty{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.45;color:var(--c-4e6478)} .dhduty p{margin:0} .dhduty b{display:block;font:700 13.5px var(--font-display);color:var(--c-0b1b2b)} /* PHASE 2: a centre whose consultants have no photograph lists them as text, and the photo card goes - .dh-nocard collapses the grid to one column. */ .dh.dh-nocard .dhin{grid-template-columns:1fr} /* TWO GROUPS WITHOUT THE PHOTO (Phase 4e): who consults here beside the duty line, stats and link, wrapping by width - 57-63% of the card was empty */ .dhmain,.dhside{display:contents} .dh.dh-nocard .dhcopy{flex-flow:row wrap;gap:16px 56px;align-items:flex-start} .dh.dh-nocard .dhmain,.dh.dh-nocard .dhside{display:flex;flex-direction:column;gap:16px;flex:1 1 340px;min-width:0} .dh.dh-nocard .dhcard,.dhlist[hidden],.dhsee[hidden],.dhstats[hidden]{display:none} .dhalso{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--muted)} .dhlist{margin:-6px 0 18px;padding:0;list-style:none;font-size:14px;line-height:1.5;color:var(--ink)} .dhsee{display:inline-block;margin-top:12px} .dhbar{height:2px;background:var(--c-e4eaf0);border-radius:var(--r-sm);overflow:hidden;margin-top:10px} .dhbar i{display:block;height:100%;width:0;background:var(--action);transition:width .12s linear} /* NO new keyframe: the splitter copies every @keyframes into the SHARED sheet too, so one costs all 54 pages. Entrance rpt-rise, scan band rpt-sweep, glow drift rpt-float - all three already on this page. */ .signin{margin-top:16px} .signin .lab{display:block;margin-bottom:7px} .sirow{display:flex;align-items:center;gap:8px;background:var(--c-f5f8fa);border:1px solid var(--c-e4eaf0); border-radius:var(--r-md);padding:6px 6px 6px 12px;min-width:0} .sirow .ccode{font:600 14.5px var(--font-body);color:var(--c-4e6478);flex:none} .sirow input{flex:1;border:0;background:none;font:500 15px var(--font-body);padding:10px 0;min-width:0; color:var(--c-0b1b2b)} .sirow input:focus{outline:none} .sirow input::placeholder{color:var(--c-5f7183)} .sihint{color:var(--c-4e6478);font-size:12px;margin:8px 0 0} .sierr{color:var(--c-b3261e);font-size:13px;font-weight:600;margin:10px 0 0;line-height:1.35} .signin input[aria-invalid="true"]{border-color:var(--c-b3261e)} .signin .opt{font-weight:400;color:var(--c-4e6478);font-size:12px} .hc-why{font:500 12.5px var(--font-body);color:var(--c-4e6478);margin:0 0 14px}.hc-why b{color:var(--c-0b1b2b);font-weight:700} .hc-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}.hc-grid>*{min-width:0;flex:1 1 326px} .hc-tile{background:linear-gradient(155deg,var(--c-f4ece2),var(--c-f8f2e9) 52%,var(--c-fbf7f1));border:1px solid var(--c-e8dccb);border-radius:var(--r-lg);padding:20px 22px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;isolation:isolate} .hc-tile::before{content:"";position:absolute;inset:-44px 0 0 -44px;z-index:-1;pointer-events:none;background-image:linear-gradient(rgb(var(--c-7a4e20-rgb)/.07) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--c-7a4e20-rgb)/.07) 1px,transparent 1px);background-size:22px 22px;animation:hcmesh 22s linear infinite} .js-reveal .hc-grid>.reveal:nth-child(2){transition-delay:.08s}.js-reveal .hc-grid>.reveal:nth-child(3){transition-delay:.16s}.js-reveal .hc-all.reveal{transition-delay:.22s} .hc-open{display:flex;align-items:center;gap:7px;font:700 var(--fs-min) var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--c-7a4e20)}.hc-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--c-7a4e20);flex:none;animation:hcpulse 2.4s ease-in-out infinite} .hc-name{font-weight:800;line-height:1.1;font-family:var(--font-display);color:var(--c-0b1b2b);letter-spacing:-.02em;margin:0}.hc-lm{font-size:13px;color:var(--c-4e6478);margin:0;line-height:1.45}.hc-hrs{font:600 12px var(--font-body);color:var(--c-7a4e20);margin:0} .hc-act{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .hc-rest{background:var(--surface);border:1px solid var(--c-e4eaf0);border-radius:var(--r-lg);padding:20px 22px;display:flex;flex-direction:column;gap:10px}.hc-rest h3{font-weight:700;font-family:var(--font-body);color:var(--c-0b1b2b);margin:0} .hc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}.hc-list li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--c-e4eaf0);padding-bottom:7px;font-size:13.5px} .hc-list li:last-child{border-bottom:0;padding-bottom:0}.hc-list b{font-weight:600;color:var(--c-0b1b2b)}.hc-list span{font:500 12px var(--font-body);color:var(--c-4e6478);white-space:nowrap} .hc-all{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px;background:var(--c-f5f8fa);border:1px solid var(--c-e4eaf0);border-radius:var(--r-lg);padding:14px 18px} .hc-all p{margin:0;font-size:13.5px;color:var(--c-4e6478)}.hc-all b{color:var(--c-0b1b2b)} .hrv-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:18px;align-items:stretch} .hrv-goog{background:var(--surface);border:1px solid var(--c-e4eaf0);border-radius:var(--r-lg);padding:20px 22px;display:flex;flex-direction:column;align-items:flex-start} .hrv-goog p{margin:0 0 16px}.hrv-goog p:first-child{margin-top:16px}.hrv-goog p:last-of-type{margin-bottom:30px} .hrv-goog .hrv-link{margin-top:auto}.hrv-foot{margin-top:auto}.hrv-foot .hrv-link{margin-top:0}.hrv-score{display:flex;align-items:baseline;gap:10px} .hrv-num{font:800 40px/1 var(--font-display);letter-spacing:-.045em;color:var(--c-0b1b2b);font-variant-numeric:tabular-nums}.hrv-out{font-size:12.5px;color:var(--c-4e6478)} .hrv-stars{color:var(--c-b8791a);font-size:15px;letter-spacing:2px;margin:8px 0 2px}.hrv-count{display:inline-flex;align-items:center;gap:7px;background:var(--c-f5f8fa);border-radius:var(--r-pill);padding:5px 11px;font:600 var(--fs-min) var(--font-body);color:var(--c-4e6478)} .hrv-link{display:inline-block;margin-top:14px;padding-top:7px;border-top:1px solid var(--c-0b1b2b);color:var(--c-0b1b2b);font:600 13px var(--font-body);text-decoration:none}.hrv-link:hover{border-top-color:var(--action);color:var(--action)} .hrv-ours{background:var(--surface);border:1px solid var(--c-e4eaf0);border-radius:var(--r-lg);padding:20px 22px;display:flex;flex-direction:column;gap:12px;min-height:236px} .hrv-src{font:600 var(--fs-min) var(--font-body);color:var(--c-5f7183);letter-spacing:.08em;text-transform:uppercase;margin:0}.hrv-q{margin:0;font-size:15.5px;line-height:1.55;color:var(--c-0b1b2b)} .hrv-caret{display:none;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--ok)}.js-hrv .hrv-caret{display:inline-block;animation:hrvblink .9s steps(1) infinite} .hrv-who{display:flex;align-items:center;gap:10px;margin-top:auto}.hrv-av{width:34px;height:34px;border-radius:var(--r-pill);background:var(--action-tint);color:var(--action);font:700 12.5px var(--font-display);display:grid;place-items:center;flex:none} .hrv-who b{display:block;font:600 13px var(--font-body);color:var(--c-0b1b2b)}.hrv-who small{display:block;color:var(--c-5f7183);font-size:var(--fs-min)} .hrv-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--c-e4eaf0);padding-top:12px}.hrv-dots{display:flex;margin-left:-18px} .hrv-dot{width:44px;height:44px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}.hrv-dot::before{content:"";width:7px;height:7px;border-radius:var(--r-pill);background:var(--c-5f7183);transition:width .28s,background-color .28s}.hrv-dot[aria-pressed="true"]::before{width:19px;background:var(--c-0b1b2b)} .js-hrv .hrv-item[hidden]{display:none}.hrv-item+.hrv-item{border-top:1px solid var(--c-e4eaf0);padding-top:12px;margin-top:12px}.js-hrv .hrv-item+.hrv-item{border-top:0;padding-top:0;margin-top:0} @media(max-width:768px){.hrv-grid{grid-template-columns:1fr}} .portals{display:grid;grid-template-columns:1fr 1fr;gap:14px} .pt{background:var(--c-10243a);color:var(--surface);border-radius:var(--r-lg);padding:24px;display:block} .pt .lab{color:var(--c-8fa8bd)} .pt h3{margin:8px 0 8px} .pt p{color:var(--c-a9becc);font-size:13.5px;margin:0 0 16px;max-width:44ch} .fabs{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column; gap:10px;align-items:flex-end;opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .25s,transform .25s,visibility .25s} .fabs.show{opacity:1;visibility:visible;transform:none} /* ONE FLOATING ACTION SINCE HERO-CERTS-01, NOT TWO. The white WhatsApp pill sat above Ask MedQuest and its nine rules across four breakpoints - the pill, its hover, and the label-hiding and circle-shaping at 620, 900 and 430 - are all gone with it. WhatsApp did not leave the page: it is a secondary link inside the panel this button opens, .mqc-wa below, which is where somebody who has already decided to ask a question is. */ .fab{display:flex} .btn.fab.ai,.btn.fab.ai:hover{background:var(--action);border-color:transparent;color:var(--surface);box-shadow:var(--sh-5e17b9)} .mbar{display:none} @media(max-width:1240px){ .hgrid{grid-template-columns:1fr} .ptrack{grid-auto-columns:calc((100% - 2*11px)/3)} } @media(max-width:768px){ .dhin{grid-template-columns:1fr;gap:24px;padding:26px 20px} .dhcard{max-width:420px} .dhstats{gap:22px} .portals{grid-template-columns:1fr} } @media(max-width:620px){ .tcard .tat{font-size:12.5px} /* THE LAST LINE CLEARS THE BOTTOM NAV, on the pages that have one */ body:has(.mbar){padding-bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom))} /* the bottom nav already carries Ask AI */ .fabs{display:none} .shead{flex-wrap:wrap} .atc,.shead a{margin-left:0} .locbar .w{flex-wrap:wrap;gap:8px} .locbar #locmsg{font-size:12.5px;flex:1 1 100%;order:1} .locbar svg{display:none} .locbar .lb2{margin-left:0;order:2} .locbar .lb{order:3} .locbar .lx{order:3;margin-left:auto} .mbar>*{min-width:0} .mbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed; left:0;right:0;bottom:0;width:100%;max-width:100vw;box-sizing:border-box;z-index:80; background:var(--surface);border-top:1px solid var(--c-e4eaf0);padding:7px 4px calc(7px + env(safe-area-inset-bottom)); height:calc(var(--mbar-h) + env(safe-area-inset-bottom))} .mbar a{display:grid;place-items:center;gap:3px;font:600 var(--fs-min) var(--font-body);color:var(--c-4e6478); padding:5px 0;min-height:46px} .mbar a.bk span{background:var(--action);color:var(--surface);border-radius:var(--r-md);padding:7px 14px;font-size:12px} } /* hidden only once JS has confirmed it can reveal them again */ .js-reveal .reveal{opacity:0;transform:translateY(14px); transition:opacity .22s ease-out,transform .5s cubic-bezier(.22,.8,.3,1)} .js-reveal .reveal.in{opacity:1;transform:none} @media(max-width:1240px){ .ptrack{grid-auto-columns:calc((100% - 3*11px)/4)} } @media(max-width:1024px){ .ptrack{grid-auto-columns:calc((100% - 2*11px)/3)} } @media(max-width:768px){ .ptrack{grid-auto-columns:calc((100% - 11px)/2)} /* THE THUMB IS ALREADY ON THE TRACK HERE. display:none rather than visibility, so the [hidden] rule above and this one cannot disagree. */ .parrow{display:none} /* AND THE GUTTER GOES WITH THEM. Keeping 104px of padding for two controls that are not on the page would cost the cards a fifth of the width at exactly the width where they have least. */ .pslider{padding-inline:0} } @media(max-width:620px){ .ptrack{grid-auto-columns:80%} } @media(max-width:768px){ /* below this the floating pair starts covering form fields */ .fabs{bottom:24px;right:16px;gap:14px} .fab.ai span,.fab.ai{font-size:0} .fab.ai svg{width:22px;height:22px} } @media(max-width:400px){ /* Galaxy Fold closed and similar. Nothing here is decorative — these are the smallest widths a real phone reports. */ .mbar{padding-inline:2px} .mbar a{font-size:var(--fs-min);gap:2px} .mbar a.bk span{padding:6px 9px} .pkc,.tcard{overflow-wrap:anywhere} } @media(min-width:621px) and (max-width:1240px){ .portals{grid-template-columns:1fr 1fr} } @media(prefers-reduced-motion:reduce){ .locbar.first .locpin{animation:none} .hc-dot,.hc-tile::before{animation:none} .reveal{opacity:1;transform:none} .fqc-card:hover,.fqc-ask:hover,.fqc-card:hover .fqc-arr,.fqc-ask:hover .fqc-arr,.wqh-card:hover,.wqh-cta:hover,.wqh-cta:hover .wqh-arr{transform:none} } /* ---- the + inside the search box -------------------------------------- A chat-style affordance: it sits INSIDE the field, so .mqc-form is the positioning context and the textarea carries the padding that keeps text clear of it. Subtle fill rather than a bordered button - a second hard border inside a bordered field reads as two controls. */ .askcard .mqc-form{position:relative} /* 4px inset + the 36px + + 13px of air, less the 1px border */ .askcard .mqc-form textarea{padding-left:52px;min-height:56px} /* centred on the field, not the form: at 620 and under --askplus-under takes the Search button's row off first. ::after is the 44px target. */ .askplus{position:absolute;left:4px;top:calc((100% - var(--askplus-under,0px))/2);margin-top:-18px;z-index:2} .askplus-b{position:relative;width:36px;height:36px;border:0;border-radius:var(--r-field-in);cursor:pointer; background:var(--c-f5f8fa);color:var(--c-0b1b2b);font:400 19px/1 var(--font-body); display:grid;place-items:center;padding:0} .askplus-b::after{content:"";position:absolute;top:-4px;left:-4px;min-width:44px;min-height:44px} .askplus-b:hover{background:var(--c-e4eaf0)} .askplus-b:focus-visible{outline:2px solid var(--action);outline-offset:2px} /* DOWNWARD, NOT UPWARD. Opening above put the menu over the "Showing " line and the headline behind it. Below the field it overlays the chips and the action row instead - which is what a menu should cover - and it is absolutely positioned, so nothing under it moves when it opens. */ .askplus-m{position:absolute;top:calc(100% + 8px);left:0;min-width:196px; background:var(--surface);border:1px solid var(--c-e4eaf0);border-radius:var(--r-md); box-shadow:var(--sh-521632);padding:6px;z-index:60} .askplus-m a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r-sm); font:500 13.5px var(--font-body);color:var(--c-0b1b2b);text-decoration:none} .askplus-m a:hover,.askplus-m a:focus-visible{background:var(--action-tint);outline:none} .askplus-m a svg{flex:0 0 auto} @media(max-width:620px){ /* DOCTOR-HERO-01's pager. The 8px visual is drawn in ::before so the button itself is the target - .ah-dot's construction, and it is 44 at every width rather than only here, because a coarse pointer is not a phone-only fact. Listed here because section 24's allowlist reads this block. */ .dhdot{min-width:44px;min-height:44px} .pkc .btn,.pkc a.btn{display:flex} /* THE MOBILE FIELD WAS 95px WIDE - a ten-digit number in 95 pixels, because the row held the field, a +91 prefix and the submit button side by side. The button drops to its own line here and the field takes the width back. This is a layout fix inside the existing form, not the Track/View merge, which is Phase D. */ .signin .sirow{flex-wrap:wrap} /* the field shares the row with +91; only the BUTTON wraps. Sending the input to its own line too left the prefix stranded above it. */ .signin .sirow input{flex:1 1 auto;min-width:0;min-height:44px} .signin .sirow .btn{flex:1 1 100%;margin-top:8px} .signin .ccode{min-height:44px;display:flex;align-items:center} .sibtns{flex-direction:column} .sibtns .btn{width:100%} /* ---- three more, approved after the 375 sweep ------------------- 1. THE GROUP-PRICING PHONE LINK, 86x15. It fails WCAG AA outright, and it is the one control on the Active Health card meant to catch a family who cannot book online - the reason the line was added at all. A target that small defeats its own purpose. 2. THE HEADER Call AND Open menu, 38x38. Six pixels short, and both are one-handed reach targets; "Call MedQuest" is what somebody reaches for in a hurry. 3. ONE CONTROL, ONE SIZE. The chat send button measured 42, 42 and 44 on the three surfaces it appears on. Two pixels, but the same control rendering at two sizes is how the two SSE readers began. NOT DONE, AND RECORDED IN THE COMMIT: the 34 Book/Add buttons at 27-34px on test cards and centre rows, and the inline prose links. Both pass WCAG AA; both are a design pass, not a mobile fix. The centre-row Book at 53x27 is first when that happens - centre rows are how a patient picks where to go. */ /* 44px WITHOUT THE GAPS. inline-flex made the anchor a block-ish box in the middle of a sentence, so the line wrapped around it with visible holes. Padding on the block gives the same tap height while the anchor stays part of the sentence. */ /* 44px OF HIT AREA WITHOUT MOVING THE LINE. inline-flex made the anchor a box inside a sentence and the text wrapped around it with visible holes; plain inline padding paints but does not grow the hit box - it measured 37. inline-block grows it, and the negative margin gives back exactly what the padding took, so the sentence sets as one line of prose. */ .pkc .grouped a{display:inline-block;padding:14px 3px;margin:-14px 0; white-space:nowrap} } /* Split on the panel's own breakpoint: transform is motion below 640 and centring above it, so a blanket transform:none would corner the panel. */ /* ---- PICKER-01: the two-step centre panel and the location bar -------- The bar's pin pulses ONCE on a first visit - long enough to be noticed, not a loop that keeps asking for attention. It is a CSS animation, so the blanket *{animation:none!important} in the reduced-motion block already suppresses it; it is named there as well because this file names what it animates, and because a reader looking for "does the pin pulse stop" should find the answer rather than infer it from a wildcard. */ .locbar .locpin{color:var(--action);flex:0 0 auto} .locbar.first .locpin{animation:locpin 1.15s ease-out 1} /* d. return visit or dismissed: one quiet line, no buttons but the change */ /* b. a centre chosen FROM LOCATION is named, never bound silently */ .locbar .locnamed{font-weight:700} .locbar .locdist{color:var(--c-4e6478);font-weight:400} /* ---- the slider ------------------------------------------------------- */ .pksec .w{max-width:1320px} .pkhead{display:flex;align-items:flex-end;justify-content:space-between; gap:24px;flex-wrap:wrap;margin-bottom:22px} .pkhcol{display:flex;flex-direction:column;gap:8px;min-width:0} .pkrule{width:34px;height:4px;border-radius:var(--r-sm);background:var(--action)} .pkhead h2{margin:0;line-height:1.1;font-weight:800;letter-spacing:-.02em} .pksub{margin:0;font-size:15px;color:var(--c-6b6259);max-width:560px} .pknav{display:flex;align-items:center;gap:10px} .pkall{font-size:15px;font-weight:600;margin-right:8px;white-space:nowrap} /* 46px CLEARS 44 ON ITS OWN, and min-* is here for .parrow's reason: a flex parent can compress a fixed height, and the minimum is what actually holds the number the tap gate measures. */ .pkarrow{width:46px;height:46px;min-width:46px;min-height:46px;border-radius:var(--r-pill); border:1px solid rgb(var(--c-171310-rgb)/.12);background:var(--surface);color:var(--c-171310);cursor:pointer; display:grid;place-items:center;box-shadow:var(--sh-b2baba); transition:background .2s,color .2s,border-color .2s} .pkarrow:hover{background:var(--c-171310);color:var(--surface);border-color:var(--c-171310)} .pkarrow:focus-visible{outline:2px solid var(--action-hover);outline-offset:2px} .pktrack{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px} .pktrack::-webkit-scrollbar{display:none} .pkslide{flex:0 0 100%;scroll-snap-align:center;position:relative;overflow:hidden; border-radius:var(--r-lg);min-height:460px;display:flex;align-items:center} @supports (grid-template-rows:subgrid){ /* slides share the track's rows: the auto row is the tallest card on any slide */ .pktrack{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:0 20px; grid-template-rows:1fr auto var(--pk-rest,1fr);min-height:var(--pk-min,464px)} .pkslide{grid-row:span 3;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);min-height:0} .pkc{grid-row:2;justify-self:start;align-self:stretch} .pkc .pk-cta{margin-top:auto} } .pkbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} /* THE SCRIM IS WHAT MAKES THE TYPE LEGIBLE, not the glass alone, and the uitest ah-glass probe measures the result over all five photographs at both widths rather than trusting either. */ .pkscrim{position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,rgb(var(--surface-rgb)/.82) 0%,rgb(var(--surface-rgb)/.62) 32%, rgb(var(--surface-rgb)/.08) 56%,rgb(var(--surface-rgb)/0) 68%)} /* THE GLASS PANEL. .pkc is kept as the class name because wire_pkc finds a package card by it and has since the cards were a row; renaming it would have unwired every Book button silently, which is the failure that class of rename always has here. */ .pkc{position:relative;margin:40px;padding:32px 36px;max-width:500px;border-radius:var(--r-lg); background:rgb(var(--surface-rgb)/.58); backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6); border:1px solid rgb(var(--surface-rgb)/.85); box-shadow:var(--sh-74635e); display:flex;flex-direction:column;gap:14px} @supports not (backdrop-filter:blur(1px)){.pkc{background:rgb(var(--surface-rgb)/.9)}} .pkeyebrow{color:var(--pk-eyebrow,var(--c-6b6259))} @media(max-width:620px){.pkeyebrow{color:var(--pk-eyebrow-sm,var(--pk-eyebrow,var(--c-6b6259)))}} .pkc h3{margin:0;line-height:1.04;font-weight:800;letter-spacing:-.03em;color:var(--c-171310)} /* TEXT IS NEVER TRANSLUCENT. Only the panel background carries alpha - the reference brief says so twice and the contrast probe is what holds it. */ .pkbody{margin:0;font-size:17px;line-height:1.45;color:var(--c-3d352e);max-width:400px} .pkc .price{display:flex;align-items:baseline;gap:10px;margin:0} .pkc .price b{font-size:40px;font-weight:800;letter-spacing:-.02em;color:var(--c-171310)} /* the hyphen is load-bearing: see the note at wire_pkc in gen_home.py */ .pk-cta{display:flex;gap:12px;align-items:center;margin-top:6px;flex-wrap:wrap} /* THE ACCENT ARRIVES AS A CUSTOM PROPERTY ON THE SLIDE, NOT AS AN INLINE STYLE ON THE ANCHOR, and that is load-bearing rather than tidy: wire_pkc matches `Book ...` with the class attribute immediately before href, so any style attribute on that anchor puts the Book button out of reach of the regex and unwires the card. */ .pklink{font-size:15px;font-weight:600;color:var(--c-3d352e)} .pklink:hover{color:var(--action-hover)} /* THE DOTS: 10px OF INK IN A 44px TARGET. The reference ships a bare 10px button, which fails every tap gate this repo has. AND THE PATTERN COPIED IS .ah-dot's, NOT .pdot's. The brief said "as the Popular Tests pager does" - the Popular Tests pager does NOT do this. Its own note in this sheet records the 44px hit area being ATTEMPTED there in CARE-AT-HOME-01 and REVERTED, because .pdots is a wrapping flex row beside the cards and widening the dots changed how many cards a page held, which broke slider/clear and crashed slider/arrows. .ah-dot is the one that works, and it works because its dots sit in a row of their own. THAT FAILURE CANNOT REACH HERE, and the reason is worth stating rather than assuming: these dots are in their own centred row under the track, and every slide is flex:0 0 100%, so the width of a dot cannot change how many slides a page holds. There is no paging arithmetic to disturb. */ .pkdots{display:flex;align-items:center;justify-content:center;gap:0;margin-top:22px} .pkdots .pkdot{width:44px;height:44px;min-width:44px;min-height:44px;border:0;padding:0; background:none;cursor:pointer;display:grid;place-items:center} .pkdots .pkdot::before{content:"";display:block;width:10px;height:10px;border-radius:var(--r-pill); background:rgb(var(--c-171310-rgb)/.2);transition:width .3s,background .3s} .pkdots .pkdot[aria-selected="true"]::before{width:34px;background:var(--c-171310)} .pkdots .pkdot:focus-visible{outline:2px solid var(--action-hover);outline-offset:-6px;border-radius:var(--r-md)} @media (max-width:768px){ /* THE SUBJECT IS IN THE RIGHT THIRD, AND AT 375 THE DEFAULT CROP LOSES IT ENTIRELY. These photographs are 2.8:1 with the left half deliberately empty for the glass panel; the slide is roughly 0.67:1 on a phone, so object-fit:cover keeps a tall centre strip - which on the Well Life slide is empty amber ground and no vial at all. Measured on the shot, not guessed: the band was rendering as a gradient with a card on it and paying 74KB for photographs nobody saw. .ah-s img carries per-slide object-position for the same reason. One value serves all five here because all five were composed to the same brief. */ .pkbg{object-position:78% center} .pkslide{min-height:520px;align-items:flex-end} .pktrack{--pk-rest:0px;--pk-min:524px} .pkscrim{background:linear-gradient(180deg,rgb(var(--surface-rgb)/.15) 0%, rgb(var(--surface-rgb)/.75) 45%,rgb(var(--surface-rgb)/.92) 100%)} /* spare height above the text: the scrim is bottom-weighted, so text pushed up loses contrast */ .pkc{margin:16px;padding:24px;max-width:none;justify-content:flex-end} .pkc .pk-cta{margin-top:6px} .pkc .price b{font-size:32px} } @media (prefers-reduced-motion:reduce){ .pktrack{scroll-behavior:auto} .pkdots .pkdot::before{transition:none} } /* ---- REPORTS-STAGE-01: the split card ---------------------------------- */ /* auto-fit + minmax COLLAPSES TO ONE COLUMN WITH NO MEDIA QUERY, which is the reference's own trick and the reason the stage needs no separate mobile layout: under about 860px the two 400px minimums stop fitting and the grid reflows itself. min(400px,100%) AND NOT A BARE 400px, WHICH THE REFERENCE SHIPS AND WHICH OVERFLOWS. Collapsing to ONE column does not lift the 400px MINIMUM - it just applies it once - so at 375 the single column is still 400px wide inside a 343px container and the card runs off the right edge. Caught on the 375 screenshot, not by a gate: the sample-ID label was cut mid-word at "FROM YOUR RECE" and the WhatsApp line lost its last word. min() caps the track at the space actually available and keeps the no-media-query behaviour the trick is chosen for. */ .rpcard{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr)); border-radius:var(--r-lg);overflow:hidden;background:var(--surface); box-shadow:var(--sh-855c45)} .rpform{padding:46px 46px 44px;display:flex;flex-direction:column;gap:26px;min-width:0} .rphead{display:flex;flex-direction:column;gap:10px} .rpform h2{margin:0;line-height:1.1;font-weight:800;letter-spacing:-.02em} .rplede{margin:0;font-size:15px;line-height:1.5;color:var(--c-6b6259);max-width:440px} .rpform .signin{gap:16px} .rpform .sirow,.rpform .signin input{height:60px;border-radius:var(--r-lg)} .rpfoot{display:flex;align-items:center;gap:12px 20px;padding-top:22px; border-top:1px solid var(--c-edf1f4);flex-wrap:wrap} /* ALL THREE CHILDREN WRAP AS WHOLE ITEMS. The reference brief calls this out by name: without it the row breaks mid-phrase and "Reports also arrive on WhatsApp" splits across two lines at the wrong word. */ .rpfoot>*{flex:0 0 auto;white-space:nowrap;font-size:13.5px} .rplive{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--c-6b6259)} .rpdot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--c-17a673);flex:0 0 auto} .rpwa{color:var(--c-8b949e)} .rpstage{position:relative;min-height:560px;overflow:hidden; background:radial-gradient(120% 140% at 76% 18%,var(--c-cfe8f7) 0%,var(--c-e6f4fb) 44%,var(--c-f8fdff) 100%)} .rpstage::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(200deg,rgb(var(--surface-rgb)/.02) 0%,rgb(var(--c-f0faff-rgb)/.34) 48%, rgb(var(--c-f0faff-rgb)/.8) 100%)} /* THE GLASS RECIPE, KEPT EXACT. The diagonal gradient tint plus the bright inner top edge is what makes it read as thick crystal rather than flat translucency; flattening either turns it into a grey box. */ .rpglass{backdrop-filter:blur(30px) saturate(1.9) brightness(1.08); -webkit-backdrop-filter:blur(30px) saturate(1.9) brightness(1.08); background:linear-gradient(150deg,rgb(var(--surface-rgb)/.75) 0%,rgb(var(--surface-rgb)/.53) 100%); border:1px solid rgb(var(--surface-rgb)/.95); box-shadow:var(--sh-17019a)} @supports not (backdrop-filter:blur(1px)){.rpglass{background:rgb(var(--surface-rgb)/.92)}} .rpdeck{position:absolute;left:0;right:0;top:96px;height:260px;display:grid; place-items:center;pointer-events:none;z-index:2} /* box-sizing IS NOT DECORATIVE HERE - the reference brief records the cards' padding pushing them past the panel edge without it. */ .rpdoc{position:absolute;box-sizing:border-box;opacity:0;border-radius:var(--r-lg);padding:18px 20px; animation:rpt-drop .85s cubic-bezier(.16,.84,.28,1) both,rpt-float 6.5s ease-in-out 1s infinite} /* THE RESTING OFFSETS LIVE IN --x/--y/--r AND ARE CONSUMED INSIDE THE KEYFRAMES' translate(), never as a separate static transform. An animation with fill:both plus an infinite float overrides a static transform silently, and both cards then collapse onto the same centre point. */ .rpdoc-back{--x:-78px;--y:-66px;--r:-5deg;width:196px;padding:16px 18px;border-radius:var(--r-lg)} .rpdoc-front{--x:56px;--y:40px;--r:4deg;width:226px;overflow:hidden; animation-delay:.22s,1.4s;animation-duration:.9s,7.5s} .rpcol{display:flex;flex-direction:column;gap:8px;position:relative} .rpdoc-front .rpcol{gap:10px} .rpkick{color:var(--info)} .rptitle{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--c-171310)} .rpdoc-front .rptitle{font-size:15px;font-weight:800;letter-spacing:-.015em} .rpsub{font-size:12.5px;font-weight:600;color:var(--c-6b6259)} /* THE TWO VALUE ROWS BECAME TWO BLANK BARS. The reference put a measured haemoglobin and a platelet count here; those are gone, and the bars keep the l4/l5 stagger so rpt-line still has something to animate. A skeleton line says "a report" without saying whose or what it found. */ .rpline{height:9px;border-radius:var(--r-sm);background:rgb(var(--c-171310-rgb)/.09)} .rpline.short{width:62%} .rprow-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .rpver{display:flex;align-items:center;gap:5px;font-size:var(--fs-min);font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--c-0f7a55)} .rpver span{width:6px;height:6px;border-radius:var(--r-pill);background:var(--c-17a673); animation:rpt-pulse 2.4s ease-out 1.8s infinite} .rpscan{position:absolute;left:0;right:0;top:0;height:34%; background:linear-gradient(180deg,rgb(var(--surface-rgb)/0) 0%,rgb(var(--c-78c8f0-rgb)/.5) 55%, rgb(var(--surface-rgb)/0) 100%);animation:rpt-sweep 3.6s ease-in-out 1.6s infinite} .rpstage .l1{animation:rpt-line .55s ease-out .9s both} .rpstage .l2{animation:rpt-line .55s ease-out 1.05s both} .rpstage .l3{animation:rpt-line .55s ease-out 1.1s both} .rpstage .l4{animation:rpt-line .55s ease-out 1.25s both} .rpstage .l5{animation:rpt-line .55s ease-out 1.4s both} .rpticker{position:absolute;left:30px;right:30px;bottom:30px;z-index:2;padding:18px 20px; border-radius:var(--r-lg);overflow:hidden;pointer-events:none; animation:rpt-rise .8s cubic-bezier(.16,.84,.28,1) 1.5s both} .rpin{display:flex;align-items:center;gap:14px} .rpradar{flex:0 0 auto;position:relative;width:38px;height:38px;display:grid;place-items:center} .rpradar i{position:absolute;inset:0;border-radius:var(--r-pill);border:1.5px solid rgb(var(--info-rgb)/.45); animation:rpt-radar 2.6s ease-out infinite} .rpradar i:nth-child(2){animation-delay:1.3s} .rpradar b{width:11px;height:11px;border-radius:var(--r-pill);background:var(--info); box-shadow:var(--sh-83fc33)} .rpslides{position:relative;flex:1;min-width:0;height:42px} .rpslide{position:absolute;left:0;right:0;display:flex;flex-direction:column;gap:3px; animation:rpt-cycle 9s ease-in-out both infinite} .rpslide:nth-child(2){animation-delay:3s} .rpslide:nth-child(3){animation-delay:6s} .rpslide strong{font-size:15px;font-weight:800;letter-spacing:-.015em;white-space:nowrap;color:var(--c-171310)} .rpslide span{font-size:13px;font-weight:600;color:var(--c-6b6259);white-space:nowrap} .rpbadge{position:absolute;top:30px;left:30px;right:30px;z-index:2;display:flex; align-items:center;gap:9px;padding:10px 16px;border-radius:var(--r-lg); font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--c-171310)} @media (max-width:768px){ .rpform{padding:34px 26px 30px} .rpstage{min-height:460px} } @media (prefers-reduced-motion:reduce){ .rpdoc,.rpticker,.rpscan,.rpslide,.rpradar i,.rpver span, .rpstage .l1,.rpstage .l2,.rpstage .l3,.rpstage .l4,.rpstage .l5{animation:none!important;opacity:1!important} .rpdoc{transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0))} .rpslide:nth-child(2),.rpslide:nth-child(3){display:none} } /* 44px TARGETS (Phase 4d), each measured under 44px in the 4c audit */ .pk-cta .pklink,.pknav .pkall,.hrv-link{display:inline-flex;align-items:center;min-height:44px}