/* * India Medical Cart — "Warm Human" design system, coloured from the logo palette (docs/brand). * Colours are only defined as tokens in :root; DesignTokenContrastTests checks WCAG AA pairs. * Orange and amber are fills only, never text: white or orange text on orange fails contrast. * Rules: logical properties only; no inline styles in templates; mobile first, 45rem breakpoint (60rem for the header nav). * Classes: container narrow site-header header-inner brand nav-desktop nav-mobile header-cta * btn btn-primary btn-whatsapp btn-outline btn-light btn-row section section-alt section-dark * section-title section-intro eyebrow lead hero hero-grid hero-title hero-lead trust-list hero-aside * aside-card aside-title photo-placeholder profile-photo profile-photo-portrait card-grid card card-title card-text card-link icon steps * quote-example table-wrap quote-table fee-row fine-print badge-list badge verified hospital-card * filters key-facts fact fact-label fact-value content-grid sticky-box breadcrumb faq notice note * doctor-card avatar profile-header meta-list link-list chip-list chip form field * field-error form-errors hp checkbox form-note site-footer footer-grid footer-heading disclaimer * media media-band media-band-reverse media-band-text hero-media card-media page-banner * scam-link mobile-bar whatsapp-float skip-link visually-hidden band thank-you reference brand-logo * brand-logo-footer company-block * video-band video-band-inner video-title video-summary video-player video-meta video-transcript * video-grid video-card video-card-link video-card-poster video-card-body */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/source-serif-4-latin-400-normal-95bbd98f2b3cca6506dc39a6d8ee6359.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/source-serif-4-latin-600-normal-beb0c8d8bee820b02b322780d91b2edd.woff2") format("woff2"); } :root { --bg: #FFFFFF; --bg-warm: #FFF8ED; --bg-medical: #EAF4FB; --highlight: #FFF1E6; --surface: #FFFFFF; --text: #12304A; --text-secondary: #526779; --text-muted: #526779; --link: #064B8D; --cta: #F58220; --cta-hover: #F79A45; --on-cta: #12304A; --amber: #F9A825; --dark: #064B8D; --on-dark: #FFFFFF; --on-dark-secondary: #CFE3F3; --footer-bg: #082B4C; --on-footer: #F5F8FA; --footer-heading: #A9C0D3; --whatsapp: #25D366; --on-whatsapp: #083B20; --verified: #23784A; --error: #C23A3A; --border: #DCE7EF; --input-border: #7F93A3; --focus: #1D5FBF; --placeholder: #C5D9E8; --radius: 0.875rem; --radius-pill: 1.5rem; --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; padding-block-end: 4.5rem; } h1, h2, h3, .brand, .hero-title, .section-title { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; margin-block: 0 0.5em; } h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); } h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.15; } h3 { font-size: 1.15rem; } p { margin-block: 0 1em; } a { color: var(--link); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .section-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--on-dark); } img { max-inline-size: 100%; block-size: auto; } ul, ol { margin-block: 0; padding-inline-start: 1.25rem; } /* Editor-written prose, the only place on the site where a heading can follow a list. Headings carry no top margin and lists carry no bottom margin - which is right everywhere the markup is hand-built, because a paragraph's own bottom margin makes the gap. In a country guide the editor decides the order, and "Yellow fever certificate" rendered jammed against the bullet above it. Spacing belongs to this container, not to h3 everywhere. */ .prose > * + h2, .prose > * + h3 { margin-block-start: 1.75em; } .prose > ul, .prose > ol { margin-block-end: 1em; } /* The page uses the screen; the sentence does not. 72rem left 384px of empty margin on each side of a 1920px display - a third of the screen showing nothing, with every photograph parked in the middle of it. Bands are now edge to edge and the container is wider. Prose is deliberately NOT widened with it: a line longer than about 75 characters is measurably harder to read, and a paragraph stretched across 1900px is worse design than one with margins, not better. So .narrow stays where it is, and text inside a full-bleed band keeps its own measure and is positioned within the band rather than stretched across it. */ .container { max-inline-size: 86rem; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 48rem) { .container { padding-inline: 2rem; } } .narrow { max-inline-size: 46rem; } /* A narrow measure that starts where a full-width band starts, instead of being centred. .container.narrow centres its 46rem column, which is right on a page that is ALL prose - a legal page - and wrong on a page that alternates full-width photograph bands with a paragraph. There the bands' text begins at the container's left edge and the centred paragraph begins 320px further in, which reads as a mistake because it is one. The margin below reproduces the container's own left offset: half of whatever the viewport has over 86rem, and nothing when it has none. */ .container.narrow-start { margin-inline-start: max(0px, (100% - 86rem) / 2); margin-inline-end: auto; } /* A table inside a .narrow-start measure, widened back out to the band width. Prose wants 46rem; a six-row table with a sentence in its last column does not, and at 46rem it wraps every cell while 700px of the band sits empty beside it. Only widens where there is room to widen into. */ @media (min-width: 60rem) { .table-wide { inline-size: min(82rem, calc(100vw - 4rem)); max-inline-size: none; } } /* Edge to edge, whatever it is nested inside. */ .full-bleed { inline-size: 100%; max-inline-size: none; margin-inline: 0; padding-inline: 0; } /* Vertical rhythm in three sizes rather than one. Every band being padding-block: 2.5rem is much of why the page reads as a document: nothing is emphasised because everything is. */ .section-tight { padding-block: 2rem; } .section-loose { padding-block: 5rem; } /* A full-bleed band with real height. Without a minimum it collapses to the height of its own text, and a 21:9 photograph behind three lines of copy reads as a stripe rather than a picture. */ .band-tall { min-block-size: min(60vh, 34rem); } /* The banner at the head of an inner page. Shorter than the home hero on purpose: the home page is selling, an inner page is answering a question the visitor already has, and a 70vh photograph above the answer is a wall to scroll past. */ .page-hero { min-block-size: min(46vh, 24rem); background: var(--dark); } /* A photograph band inside a page, between two blocks of prose. Between .page-hero and .band-tall, because a mid-page band competes with neither the banner above it nor the content around it. */ .band-mid { min-block-size: min(40vh, 22rem); } /* An image that breaks out of a .narrow measure to the full container width. Prose stays at 46rem because a 75-character line is where reading speed falls off; a photograph has no such limit and looks starved at the width of a paragraph. */ .figure-wide { margin-block: 2rem; } .figure-wide .media { aspect-ratio: 21 / 9; } .figure-wide figcaption { color: var(--text-muted); font-size: 0.9rem; margin-block-start: 0.5rem; } /* The breakout is symmetric, so it is only safe inside a CENTRED measure - .container.narrow, which is centred because .container sets margin-inline: auto. At the 60rem breakpoint a centred 46rem column leaves 112px of free margin each side and the breakout takes 57.6px of it. A bare
is left-aligned and has no free margin on the left, so a figure-wide inside one would hang off the edge of the screen. */ @media (min-width: 60rem) { .figure-wide { margin-inline: calc(-1 * min(8rem, 6vw)); } } /* The closing band on an inner page: one line and the two buttons, on the warm neutral so the end of the page is visibly the end. */ .cta-band { background: var(--bg-warm); border-block-start: 1px solid var(--border); } .cta-band .btn-row { margin-block-end: 0; } /* The fee table, as the page's centrepiece rather than a footnote. Table first on a narrow screen is deliberate: it is the answer to the question the visitor arrived with. */ .cost-band { display: grid; gap: 2rem; } .cost-band-text { max-inline-size: 34rem; } @media (min-width: 60rem) { .cost-band { grid-template-columns: 1fr 1.3fr; gap: 3.5rem; align-items: start; } } /* Four steps as photographs. A numbered list of paragraphs is what this band used to be, and it was among the wordiest on the page with no image at all. */ .step-grid { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .step-grid > li { counter-increment: step; } .step-grid h3 { display: flex; align-items: baseline; gap: 0.6rem; margin-block: 0.75rem 0.35rem; } .step-grid h3::before { content: counter(step); font-family: var(--font-serif); font-size: 1.6rem; line-height: 1; /* Navy, not the orange CTA: DesignTokenContrastTests forbids --cta as a text colour, and it is right - orange on cream does not reach 4.5:1. The numeral carries by size and serif weight instead of by colour. */ color: var(--link); flex: none; } .step-grid p { color: var(--text-secondary); margin: 0; } /* The step's number, inside its own heading. The 8 steps are grouped into four phases now, so the numbering can no longer come from an
    counter - and it has to stay visible, because the page promises "the 8 steps" and a visitor counts them. */ .step-num { font-family: var(--font-serif); color: var(--link); margin-inline-end: 0.4rem; } /* Text over a photograph. Allowed again, under a measured contrast rule (spec 2026-09-18 s2) after a blanket ban turned every image into a box beside text and made the whole page feel like prose. The scrim is a gradient over the text side only, and it is decoration: with images off the text still sits on the band's own background colour and stays legible. */ .overlay { position: relative; display: grid; align-items: end; } .overlay > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } /* These numbers are measured, not chosen. docs/brand/source/overlay_contrast.py composites this exact gradient onto the actual JPEG and samples the region the words occupy; the first version of this scrim (0.88 / 0.55 at 38% / 0 at 72%) measured 4.05:1 over the care-band photograph, under the 4.5:1 the redesign spec requires. It now measures 7.87:1. Change a stop, re-run the script. */ .overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 37, 69, 0.92) 0%, rgba(11, 37, 69, 0.74) 45%, rgba(11, 37, 69, 0) 82%); } /* Text on the left rather than the foot of the band: the scrim has to follow it, or the words sit on the brightest part of the picture. The first render of this hero put the headline over a sunlit glass facade with a bottom-up gradient behind it, and the eyebrow above it was unreadable. */ .overlay-left::after { background: linear-gradient(to right, rgba(11, 37, 69, 0.92) 0%, rgba(11, 37, 69, 0.75) 38%, rgba(11, 37, 69, 0.15) 70%, rgba(11, 37, 69, 0.05) 100%), linear-gradient(to top, rgba(11, 37, 69, 0.55) 0%, rgba(11, 37, 69, 0) 55%); } .overlay-text { position: relative; z-index: 1; color: var(--on-dark); padding-block: 3rem; } .overlay-text .hero-title, .overlay-text h2 { color: var(--on-dark); } .overlay-text p { color: var(--on-dark-secondary); } /* Every inherited colour in here was chosen against a pale background. A link left at --link is navy on navy, which is how "How we work with you" rendered invisible over the care band. */ .overlay-text a { color: var(--on-dark); text-decoration-thickness: 2px; text-underline-offset: 3px; } .overlay-text .eyebrow { color: var(--on-dark); opacity: 0.85; } .skip-link { position: absolute; inset-inline-start: 1rem; inset-block-start: -3rem; background: var(--surface); padding: 0.5rem 1rem; z-index: 20; display: inline-flex; align-items: center; min-block-size: 44px; } .skip-link:focus { inset-block-start: 1rem; } .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Header */ .site-header { background: var(--surface); border-block-end: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: 1rem; padding-block: 0.75rem; } .brand { color: var(--link); font-size: 1.25rem; text-decoration: none; margin: 0; margin-inline-end: auto; flex: none; display: inline-flex; align-items: center; min-block-size: 44px; } /* The logo is the way back to the home page and was 36px, the height of the image inside it. The honeypot field is deliberately left alone: it carries tabindex="-1" and asks to be left empty, so it is a trap for scripts rather than a target for people, and enlarging it would only make it easier for a real visitor to hit by accident. */ .brand-logo { display: block; block-size: 2.25rem; inline-size: auto; max-inline-size: none; } .nav-desktop { display: none; gap: 1.25rem; } .nav-desktop a, .nav-mobile a:not(.btn) { color: var(--text-secondary); text-decoration: none; white-space: nowrap; } .nav-desktop a:hover, .nav-mobile a:not(.btn):hover { color: var(--link); } .site-header .header-cta { display: none; } .nav-mobile summary { cursor: pointer; list-style: none; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-pill); } .nav-mobile summary::-webkit-details-marker { display: none; } .nav-mobile nav { position: absolute; inset-inline: 0; margin-block-start: 0.75rem; background: var(--surface); border-block: 1px solid var(--border); padding: 1rem; display: grid; gap: 0.75rem; z-index: 10; } .nav-mobile nav a { display: flex; align-items: center; min-block-size: 44px; } .nav-mobile summary { display: flex; align-items: center; justify-content: center; min-block-size: 44px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; padding: 0.6rem 1.2rem; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: 1rem; font-family: inherit; } .btn-primary { background: var(--cta); color: var(--on-cta); } .btn-primary:hover { background: var(--cta-hover); } .btn-whatsapp { background: var(--whatsapp); color: var(--on-whatsapp); } .btn-outline { border-color: var(--link); color: var(--link); background: transparent; } .btn-light { border-color: var(--on-dark); color: var(--on-dark); background: transparent; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.25rem; } /* Sections */ .section { padding-block: 2.5rem; } .section-alt { background: var(--bg-warm); } .section-dark { background: var(--dark); color: var(--on-dark); } .section-dark a { color: var(--on-dark); } .section-dark .lead { color: var(--on-dark-secondary); } .section-dark .eyebrow { color: var(--on-dark-secondary); } .section-dark .card { color: var(--text); } .section-dark .card a { color: var(--link); } .section-intro, .lead { color: var(--text-secondary); max-inline-size: 42rem; } .lead { font-size: 1.1rem; } .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--link); margin-block-end: 0.5rem; } .band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } /* Hero */ /* min-block-size, not a fixed height: the text must be allowed to make it taller on a narrow screen rather than being clipped by a number chosen on a desktop. */ .hero { min-block-size: min(70vh, 40rem); background: var(--dark); } .trust-strip { background: var(--bg-warm); border-block-end: 1px solid var(--border); } .hero-grid { display: grid; gap: 1.5rem; } /* The single biggest lever between ours and the reference sites: theirs run to 72px. */ .hero-title { font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; max-inline-size: min(18ch, 100%); } /* min(): 18ch alone is wider than a phone at this font size */ .hero-lead { font-size: 1.1rem; color: var(--text-secondary); max-inline-size: 34rem; } .trust-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--text-secondary); font-size: 0.95rem; } .trust-list li::before { content: "✓ "; color: var(--verified); font-weight: 700; } .hero-aside { display: block; } .photo-placeholder { border-radius: var(--radius); background: linear-gradient(135deg, var(--highlight), var(--placeholder)); min-block-size: 14rem; } /* The photo's own proportions are whatever the hospital sent us, so the box reserves the space instead: aspect-ratio plus object-fit means the slot is the same height before and after the bytes arrive, and nothing below it jumps. That is also why the carries no width/height attributes - they would have to be a guess, and a wrong guess is the layout shift this box exists to prevent. */ .profile-photo { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--placeholder); } /* --- Imagery --------------------------------------------------------------------------------------- * * Three components, three ratios, and one rule: NO TEXT IS EVER LAID OVER A PHOTOGRAPH on this site. * Text sits beside an image or below it, never on top. That is not a style preference - a scrim in the * brand video work rendered opaque and nobody noticed until a frame was inspected by eye, and the same * mistake over a headline would make the page unreadable for the people least able to tell us. * * Every one of these boxes sets its own aspect-ratio so the space is reserved before the bytes arrive. * The inside carries no width/height attributes: those would have to be a guess, and a wrong * guess is exactly the layout shift the box exists to prevent. CLS on this site is 0 and stays 0. */ /* A photograph filling a slot. Ratio comes from whichever box wraps it. */ .media { display: block; overflow: hidden; border-radius: var(--radius); background: var(--placeholder); } .media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } /* The hero photograph, beside the headline on a wide screen and above it on a phone. */ .hero-media { aspect-ratio: 16 / 9; } /* A photograph at the head of a card, above its title. */ .card-media { aspect-ratio: 3 / 2; margin-block-end: 0.9rem; } /* A banner above a section page. Wider than a card so it reads as a header, not a thumbnail. */ .page-banner { aspect-ratio: 3 / 1; margin-block-end: 1.5rem; } /* A full-width image beside a short line of text, for breaking up a long page. Stacks on a phone, and * the image comes second in the source so a screen reader hears the sentence first. */ .media-band { display: grid; gap: 1.5rem; align-items: center; } .media-band .media { aspect-ratio: 2 / 1; } .media-band-text { max-inline-size: 34rem; } @media (min-width: 52rem) { .media-band { grid-template-columns: 1fr 1fr; } .page-banner { aspect-ratio: 4 / 1; } /* Bands alternate down the page so three in a row read as rhythm rather than as the same layout * repeated. Only the painted order changes: the text still comes first in the source, so a screen * reader and a phone always hear the sentence before the picture. */ .media-band-reverse .media-band-text { order: 2; } .media-band-reverse .media { order: 1; } } .profile-photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } /* A person, not a building: a 3/2 landscape crop of a portrait cuts the top off the head. Capped in width so a photograph does not outweigh the name and qualifications beside it. */ .profile-photo-portrait { aspect-ratio: 4 / 5; max-inline-size: 20rem; margin-block-end: 1rem; } .aside-card { background: var(--surface); border-radius: var(--radius); padding: 1rem; margin-block-start: -3rem; margin-inline: 1rem; position: relative; border: 1px solid var(--border); } .aside-title { font-weight: 600; margin-block-end: 0.25rem; } /* Cards */ .card-grid { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; } .card-title { margin-block: 0.5rem 0.25rem; } .card-text { color: var(--text-secondary); margin: 0; } .card-link { color: var(--text); text-decoration: none; } .card-link:hover { color: var(--link); text-decoration: underline; } /* Spec §10's 44px, bought without changing how anything looks: the card's own link is stretched over the whole card, so the target is the card a finger is already aiming at rather than the line of text in its heading. Padding the heading instead would have made every grid on the site taller to solve a problem the card's existing size already solves. */ .card { position: relative; } .card-link::after { content: ""; position: absolute; inset: 0; } /* Anything else clickable inside a card has to sit above that overlay or the card's link swallows it - the treatments page has exactly this shape, a specialty heading plus a chip per procedure. */ .card a:not(.card-link) { position: relative; z-index: 1; } .icon { inline-size: 2rem; block-size: 2rem; stroke: var(--link); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Steps */ .steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .steps li { counter-increment: step; } .steps li::before { content: counter(step); display: block; font-family: var(--font-serif); font-size: 1.8rem; color: var(--link); } .steps strong { display: block; } /* Quotes and tables */ .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .quote-table { inline-size: 100%; border-collapse: collapse; font-size: 0.95rem; } .quote-table caption { text-align: start; padding: 0.75rem; color: var(--text-secondary); } .quote-table th, .quote-table td { text-align: start; padding: 0.65rem 0.75rem; border-block-start: 1px solid var(--border); } .quote-table thead th { background: var(--bg-medical); border-block-start: 0; } .fee-row td { background: var(--highlight); color: var(--link); font-weight: 600; } .fine-print { font-size: 0.85rem; color: var(--text-muted); margin-block-start: 0.5rem; } .quote-example { display: grid; gap: 1.5rem; align-items: center; } /* Badges and hospitals */ .badge-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .badge { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; font-size: 0.85rem; } .verified { color: var(--verified); font-size: 0.9rem; margin: 0; } .verified::before { content: "✓ "; font-weight: 700; } .hospital-card .photo-placeholder { min-block-size: 5rem; margin-block-end: 0.75rem; } .filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-block: 1rem 1.5rem; } /* Facts, layout, breadcrumb */ .key-facts { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-block: 1.25rem; } .fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; } .fact-label { font-size: 0.8rem; color: var(--text-muted); } /* `anywhere` also stops a long unbroken value forcing the grid column wider than the screen, which a 64-character hash did on a 390px phone. */ .fact-value { margin: 0; font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; } .content-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); } .sticky-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; align-self: start; } .breadcrumb ol { list-style: none; padding: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.9rem; color: var(--text-muted); } .breadcrumb li + li::before { content: "›"; margin-inline-end: 0.35rem; } .meta-list { list-style: none; padding: 0; color: var(--text-secondary); } .link-list { padding-inline-start: 1.25rem; } .link-list a { display: inline-flex; align-items: center; min-block-size: 44px; } /* A paragraph whose only content is a link ("Read all 8 steps") is a navigation target, not prose, and was rendering 19px tall. A link *within* a sentence is deliberately untouched: the rule does not apply to it, and a 44px box would break the line it belongs to. */ p > a:only-child { display: inline-flex; align-items: center; min-block-size: 44px; } /* A breadcrumb link and a link that is the whole of a table cell are both navigation, both stood at 17px, and both are the kind of small target a shaky hand on a phone misses. */ .breadcrumb a { display: inline-flex; align-items: center; min-block-size: 44px; } td > a:only-child { display: inline-flex; align-items: center; min-block-size: 44px; } .chip-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip { display: inline-flex; align-items: center; min-block-size: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.4rem 0.9rem; color: var(--text); text-decoration: none; } /* "On this page". Seven public pages run past 550 words with no way to reach their own middle, and /from/kenya runs to 994 - on a phone that is a very long scroll to find the yellow fever rule. Built on the chip row the FAQ page already used rather than a sticky sidebar: a sidebar would fight the full-width photograph bands, and it would be the one part of the page that does not stack. */ .page-toc { border-block-end: 1px solid var(--border); } .page-toc h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-family: var(--font-sans); font-weight: 600; margin-block-end: 0.6rem; } .page-toc .chip-list { margin: 0; } .page-toc .chip { font-size: 0.95rem; } /* A list you work through, not one you read past. The whole row is the label so a thumb on a phone has a target the width of the column rather than a 16px box. */ .checklist { list-style: none; padding: 0; display: grid; gap: 0.5rem; margin-block: 1.25rem; } .checklist label { display: flex; gap: 0.75rem; align-items: start; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.75rem 1rem; min-block-size: 2.75rem; } .checklist input { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: 0.15rem; flex: none; } .checklist input:checked + * , .checklist label:has(input:checked) { color: var(--text-secondary); } .checklist label:has(input:checked) { background: var(--bg-warm); } /* The country picker: the select and its button on one line when there is room, stacked when there is not, with the button aligned to the bottom of the field rather than to the label above it. */ .country-picker { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-block: 1.25rem; } .country-picker .field { flex: 1 1 16rem; } /* A table of this specialty's treatments, with the stay figures each procedure page already carries. Nothing new is claimed here - the numbers come from medical_procedure and are the same ones the procedure pages show, gathered so a visitor can compare them without opening four pages. */ .procedure-table th[scope="row"] { font-weight: 600; } .procedure-table td { white-space: nowrap; } @media (max-width: 40rem) { .procedure-table td { white-space: normal; } } /* FAQ, notices */ .faq { display: grid; gap: 0.5rem; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.75rem 1rem; } .faq summary { cursor: pointer; font-weight: 600; } .faq details p { margin-block: 0.5rem 0; color: var(--text-secondary); } .notice { background: var(--highlight); border-radius: 0.6rem; padding: 0.75rem 1rem; } .note { font-size: 0.85rem; color: var(--text-muted); } /* People */ .doctor-card { display: flex; gap: 0.75rem; align-items: start; } /* Five faces in a row on the home page, narrower than a general card so the portraits stay portraits rather than stretching into the width of a paragraph. */ .doctor-strip { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .avatar { inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--bg-medical); flex: none; display: grid; place-items: center; font-weight: 600; color: var(--link); } /* A portrait in a list or a panel band: bigger than the initials circle it replaces, because a face at 3rem is a thumbnail of a face and reads as nothing. 4/5, the same crop the seeded files carry, so nothing is squashed. */ .doctor-portrait { display: block; flex: none; inline-size: 7rem; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--placeholder); } .doctor-portrait img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center top; } .profile-header { display: grid; gap: 1.5rem; } /* Forms */ .form { display: grid; gap: 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; } .field { display: grid; gap: 0.3rem; } .field label { font-weight: 600; font-size: 0.95rem; } .field input, .field select, .field textarea { font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--input-border); border-radius: 0.5rem; background: var(--surface); color: var(--text); min-block-size: 2.75rem; inline-size: 100%; } .field textarea { min-block-size: 6rem; } .field input[type="file"] { padding: 0.5rem; min-block-size: auto; } .field-error { color: var(--error); font-size: 0.9rem; margin: 0; } .form-errors { color: var(--error); font-weight: 600; margin: 0; } .form-note { font-size: 0.9rem; color: var(--text-secondary); margin: 0; } .checkbox { display: flex; gap: 0.5rem; align-items: start; font-size: 0.95rem; } .checkbox input { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.2rem; } .hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; } /* Thank you */ .thank-you { text-align: start; } .reference { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.2rem; font-weight: 700; } /* Footer and mobile bar */ .site-footer { background: var(--footer-bg); color: var(--on-footer); padding-block: 2rem; margin-block-start: 2rem; font-size: 0.95rem; } .site-footer a { color: var(--on-footer); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } /* Spec §10 asks for 44px touch targets. These list links rendered 18px tall with 5.6px between them - passing WCAG 2.2's 24px minimum and failing our own. inline-flex rather than padding, so the height is the number the spec names rather than a sum of font metrics that changes with the type. Deliberately scoped to the lists: the "Grievance Officer" link in the company block sits mid-sentence, where the rule does not apply and a 44px box would break the line it is part of. */ .footer-grid li a { display: inline-flex; align-items: center; min-block-size: 44px; } .footer-grid { display: grid; gap: 1.5rem; } .footer-grid ul { list-style: none; padding: 0; display: grid; gap: 0.35rem; } .footer-heading { font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--footer-heading); margin-block-end: 0.5rem; } .brand-logo-footer { display: block; block-size: 2.75rem; inline-size: auto; max-inline-size: none; margin-block-end: 0.75rem; } .disclaimer { max-inline-size: 26rem; } .site-footer .scam-link { font-weight: 600; text-decoration: underline; } .company-block { border-block-start: 1px solid var(--footer-heading); margin-block-start: 1.5rem; padding-block-start: 1rem; font-size: 0.85rem; color: var(--footer-heading); } .company-block p { margin-block: 0 0.25rem; } /* The footer's nav links sit alone in list items, where position alone says "link". This one sits mid- sentence next to the contact email, in text that is var(--footer-heading) while the link is var(--on-footer) - under 3:1 apart, so colour alone was doing the work (WCAG 1.4.1, axe link-in-text-block). Underline it: the complaints route is the last one a patient who cannot distinguish those two greys should have to guess at. */ .company-block a { text-decoration: underline; } /* The floating WhatsApp button (owner, 2026-10-15): wider screens only; a phone has it in the mobile bar. */ .whatsapp-float { display: none; position: fixed; inset-inline-end: 1.5rem; inset-block-end: 1.5rem; z-index: 30; align-items: center; gap: 0.5rem; min-block-size: 3.25rem; padding-inline: 1.1rem; border-radius: 999px; background: var(--whatsapp); color: var(--on-whatsapp); font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.35); } .whatsapp-float:hover { filter: brightness(1.05); } .whatsapp-float:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .whatsapp-float-icon { inline-size: 1.6rem; block-size: 1.6rem; flex: none; } @media print { .whatsapp-float { display: none !important; } } .mobile-bar { position: fixed; inset-inline: 0; inset-block-end: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem; padding: 0.5rem; background: var(--surface); border-block-start: 1px solid var(--border); z-index: 30; } @media (min-width: 45rem) { body { padding-block-end: 0; } .brand-logo { block-size: 2.75rem; } .site-header .header-cta { display: inline-flex; } .mobile-bar { display: none; } .whatsapp-float { display: inline-flex; } .hero-grid { grid-template-columns: 1.15fr 1fr; align-items: center; } .hero-aside { order: 2; } .quote-example { grid-template-columns: 1fr 1.2fr; } .content-grid { grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); } .sticky-box { position: sticky; inset-block-start: 1rem; } .profile-header { grid-template-columns: 1fr 1.3fr; align-items: center; } .footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr); } } /* The full header nav needs about 60rem next to the logo and quote button; below that it lives in the menu. */ @media (min-width: 60rem) { .nav-desktop { display: flex; } .nav-mobile { display: none; } } /* Brand video. Laid out as a .media-band: the title, the summary and the transcript on one side, the player on the other. The first version stacked them in a 34rem column and left two thirds of a full-bleed band empty, which read as an unfinished page rather than as a deliberate one. The player is capped at 26rem even in the wide column. These are 1:1 renders, so width is height: at the full half-band it would be a 39rem square - taller than most screens - and the argument the page is making would be pushed off the bottom by an illustration of itself. aspect-ratio holds the space before the poster arrives, so the text does not jump when it does. */ .video-band { background: var(--bg-medical); } /* Inherits .media-band's align-items: center on purpose. The transcript is collapsed by default, so the text block is shorter than the player and "start" left a visible hole under it. */ .video-band-inner .media-band-text { max-inline-size: 38rem; } .video-title { margin-block: 0 0.35rem; } .video-summary { color: var(--text-secondary); margin-block: 0 0.75rem; } .video-player { width: 100%; max-inline-size: 26rem; height: auto; aspect-ratio: 1 / 1; display: block; background: var(--dark); border-radius: var(--radius); /* The renders have no border of their own and the band behind them is pale blue; without this the picture's own dark edges would bleed into the band. */ box-shadow: 0 1px 3px rgb(6 75 141 / 0.18); } .video-meta { margin-block: 0 0.9rem; } .video-transcript { /* Spans the whole band and sits under both columns. Opening it used to lengthen the text column beside the player, which left a tall empty strip next to the video and pushed the title up away from it. Capped at 52rem all the same: the band is 86rem wide and a 1300px line of prose is unreadable whatever it is about. */ grid-column: 1 / -1; max-inline-size: 52rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.75rem 1rem; } .video-transcript summary { cursor: pointer; font-weight: 600; } .video-transcript > div { margin-block-start: 0.75rem; } /* The narration is one sentence per beat, so it reads as a list of short lines rather than as prose. Tightening the gap keeps it looking like one passage of speech. */ .video-transcript p { margin-block: 0 0.5rem; color: var(--text-secondary); } .video-transcript p:last-child { margin-block-end: 0; } @media (min-width: 52rem) { /* The player is the second child, so it lands in the right-hand column on its own. minmax(0, 1fr) rather than 1fr: a plain 1fr track is minmax(auto, 1fr) and refuses to shrink below its content's minimum, which is how a long unbreakable string in the text column pushes the player off the edge. Measured at 390, 500, 600 and 800px, this band does not currently do that - the guard is here because the text is editorial and the next sentence written into it is not. */ .video-band-inner { grid-template-columns: minmax(0, 1fr) auto; } } /* The video index at /videos. Cards rather than players: thirteen