/* Self-hosted fonts — added 2026-08-08. Removes two third-party origins (api.fontshare.com measured 0.66s render-blocking, 0.49s of it TLS). Clash Display + Satoshi: ITF Free Font License. IBM Plex Mono: SIL OFL 1.1. woff2 only: every browser that matters has supported it since 2016. */ @font-face{font-family:'Clash Display';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/clash-display-400.woff2') format('woff2');} @font-face{font-family:'Clash Display';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/clash-display-500.woff2') format('woff2');} @font-face{font-family:'Clash Display';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/clash-display-600.woff2') format('woff2');} @font-face{font-family:'Clash Display';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/clash-display-700.woff2') format('woff2');} @font-face{font-family:'Satoshi';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/satoshi-300.woff2') format('woff2');} @font-face{font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/satoshi-400.woff2') format('woff2');} @font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/satoshi-500.woff2') format('woff2');} @font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/satoshi-700.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* medigent.in static pages — shared stylesheet. Tokens mirror the SPA homepage (:root of index-GLKDKEAB.css) so the set reads as one site. Source of truth: medigent/marketing/ — never edit on the server. */ :root { --paper: #FFFFFF; --ink: #0C1714; --muted: #5B6B64; --faint: #8A9690; --line: #DBE7E0; --pine: #0E4D3A; --pine-deep: #0B3E2F; --coral: #FF7A59; --orange: #F2741B; --orange-deep: #D9600F; --cream: #F6F4EE; --maxw: 1180px; --gutter: clamp(1.25rem, 4vw, 3rem); --disp: "Clash Display", "Bricolage Grotesque", sans-serif; --body: "Satoshi", "Hanken Grotesk", sans-serif; --mono: "IBM Plex Mono", monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--body); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--pine); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* Native cross-fade between pages (progressive enhancement). */ @view-transition { navigation: auto; } /* ---------- header ---------- */ .site-nav { position: sticky; top: 0; z-index: 50; padding: 10px 0 0; background: #fffc; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: box-shadow 200ms ease; } .site-nav.scrolled { box-shadow: 0 6px 24px rgba(12, 23, 20, 0.07); } .site-nav .wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; } .site-nav .brand img { height: 62px; width: auto; } .site-nav .links { display: flex; gap: 24px; margin-right: auto; } .site-nav .links a { color: var(--ink); text-decoration: none; font-size: clamp(14px, 0.6vw + 8px, 16.2px); font-weight: 600; } .site-nav .links a:hover { color: var(--pine); } /* "Platform" mega menu — mirrors the SPA. CSS-only (:hover / :focus-within) so these pages still work with JavaScript off. */ .site-nav .megam { position: static; display: inline-flex; } .site-nav .megam-trigger { display: inline-flex; align-items: center; gap: 6px; } .site-nav .megam:hover .megam-trigger, .site-nav .megam:focus-within .megam-trigger { color: var(--orange); } .megam-caret { width: 12px; height: 12px; transition: transform .25s cubic-bezier(.2,.7,.2,1); } .site-nav .megam:hover .megam-caret, .site-nav .megam:focus-within .megam-caret { transform: rotate(180deg); } .megam-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 24px 44px -34px rgba(12, 23, 20, .22); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s ease, transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s linear .22s; } .site-nav .megam:hover .megam-panel, .site-nav .megam:focus-within .megam-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s; } .megam-inner { max-width: 1180px; margin: 0 auto; padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 3.2vw, 2.8rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(238px, .9fr); gap: clamp(1.4rem, 2.4vw, 2.4rem); } .megam-col { --accent: var(--pine); } .megam-col-orange { --accent: var(--orange); } .megam-col-plain { --accent: var(--faint); } .megam-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; display: flex; align-items: center; gap: 8px; } .megam-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .megam-col-plain .megam-kicker::before { background: var(--line); } .megam-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .site-nav .megam-col a { display: block; padding: 10px 11px; margin-left: -11px; border-radius: 10px; font-weight: 400; transition: background .18s ease, transform .18s ease; } .site-nav .megam-col a:hover { background: var(--cream); transform: translateX(2px); } .megam-label { display: block; font-weight: 600; font-size: 15.5px; color: var(--ink); line-height: 1.35; } .megam-blurb { display: block; font-size: 13.4px; color: var(--muted); line-height: 1.45; margin-top: 2px; } .megam-aside { border-left: 1px solid var(--line); padding-left: clamp(1.4rem, 2.4vw, 2.2rem); display: flex; flex-direction: column; align-items: flex-start; } .megam-aside .megam-kicker { color: var(--faint); } .megam-aside .megam-kicker::before { background: var(--line); } .megam-aside-lead { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 1.1rem; max-width: 26ch; } .site-nav .megam-aside-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--pine); color: #fff; font-family: var(--disp); font-weight: 600; font-size: 16.3px; padding: 10px 18px; border-radius: 999px; white-space: nowrap; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .site-nav .megam-aside-cta:hover { background: #0b3e2f; color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(14, 77, 58, .55); } .megam-aside-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); animation: megamPulse 1.6s ease-out infinite; } @keyframes megamPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .megam-aside-note { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--faint); margin-top: 10px; white-space: nowrap; } .megam-foot { border-top: 1px solid var(--line); background: #FAFCFB; } .megam-foot-in { max-width: 1180px; margin: 0 auto; padding: 13px clamp(1.25rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 6px 30px; } .site-nav .megam-foot-in a { font-size: 13.9px; font-weight: 500; color: var(--muted); } .site-nav .megam-foot-in a:hover { color: var(--orange); } /* Columns cascade in rather than the whole slab appearing at once. */ .site-nav .megam:hover .megam-col, .site-nav .megam:focus-within .megam-col, .site-nav .megam:hover .megam-aside, .site-nav .megam:focus-within .megam-aside { animation: megamIn .34s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 55ms + 40ms); } @keyframes megamIn { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { .megam-panel { transition: opacity .01s linear, visibility 0s; } .megam-caret, .megam-aside-dot { transition: none; animation: none; } .site-nav .megam:hover .megam-col, .site-nav .megam:focus-within .megam-col, .site-nav .megam:hover .megam-aside, .site-nav .megam:focus-within .megam-aside { animation: none; } } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border-radius: 999px; border: 0; cursor: pointer; font-family: var(--body); font-weight: 700; font-size: 14.5px; text-decoration: none; color: #fff; transition: background 180ms ease; } .btn-pine { background: var(--pine); } .btn-pine:hover { background: var(--pine-deep); } .btn-orange { background: var(--orange); } .btn-orange:hover { background: var(--orange-deep); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn-ghost:hover { border-color: var(--pine); color: var(--pine); } /* ---------- shared blocks ---------- */ .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: clamp(9.5px, 0.5vw + 6px, 12px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; background: var(--paper); } .kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); } h1 { font-family: var(--disp); font-weight: 600; font-size: clamp(30px, 3.6vw + 13px, 50px); line-height: 1.1; letter-spacing: -0.01em; } h2 { font-family: var(--disp); font-weight: 600; font-size: clamp(24px, 2.2vw + 12px, 38px); line-height: 1.15; } h3 { font-family: var(--disp); font-weight: 600; font-size: clamp(18px, 0.8vw + 12px, 22px); } .ink-pine { color: var(--pine); } .ink-orange { color: var(--orange); } .lead { font-size: clamp(16px, 0.7vw + 12px, 19px); color: var(--muted); max-width: 42em; } section { padding: clamp(48px, 7vw, 96px) 0; } .section-head { max-width: 640px; margin: 0 auto clamp(28px, 4vw, 56px); text-align: center; } .section-head .kicker { margin-bottom: 18px; } .section-head p { color: var(--muted); margin-top: 12px; } /* ---------- hero ---------- */ .hero { padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 5vw, 72px); text-align: center; } .hero .kicker { margin-bottom: 26px; } .hero h1 { max-width: 17em; margin: 0 auto; } .hero .lead { margin: 20px auto 0; } .hero .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .trust-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; } .trust-row .pill { font-family: var(--mono); font-size: clamp(9.5px, 0.45vw + 5.5px, 11px); letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; color: var(--ink); } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .step { border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: var(--paper); } .step .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--pine); display: block; margin-bottom: 14px; } .step p { color: var(--muted); margin-top: 8px; font-size: 15px; } /* ---------- feature grid ---------- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .card { border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: var(--paper); } .card svg { width: 26px; height: 26px; stroke: var(--pine); margin-bottom: 14px; } .card p { color: var(--muted); margin-top: 8px; font-size: 15px; } /* ---------- demo strip ---------- */ .strip { background: var(--cream); border-radius: 24px; padding: clamp(28px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .strip h2 { max-width: 14em; } .strip p { color: var(--muted); margin-top: 8px; } /* ---------- FAQ ---------- */ .faq { max-width: 760px; margin: 0 auto; } .faq details { border-bottom: 1px solid var(--line); padding: 18px 0; } .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-weight: 700; font-size: clamp(15px, 0.5vw + 12px, 17px); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--mono); color: var(--pine); font-size: 18px; } .faq details[open] summary::after { content: "–"; } .faq details p { color: var(--muted); margin-top: 10px; max-width: 60ch; } /* ---------- CTA band ---------- */ .cta-band { background: var(--pine); border-radius: 24px; text-align: center; padding: clamp(36px, 5vw, 64px) var(--gutter); } .cta-band h2, .cta-band p { color: #fff; } .cta-band p { opacity: 0.85; margin-top: 10px; } .cta-band .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; } .cta-band .helpline { margin-top: 22px; font-family: var(--mono); font-size: 13px; color: #fff; opacity: 0.9; } .cta-band .helpline a { color: #fff; } /* ---------- footer (mirrors the SPA footer) ---------- */ footer { border-top: 1px solid var(--line); margin-top: clamp(40px, 6vw, 80px); padding: clamp(48px, 5vw, 72px) 0 36px; } footer img { height: 54px; width: auto; } .foot-top { display: grid; grid-template-columns: 1.5fr 2.6fr; gap: clamp(32px, 5vw, 64px); } .foot-brand p { color: var(--muted); font-size: 15px; margin-top: 16px; max-width: 34ch; line-height: 1.6; } .foot-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; } .foot-badges span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; } .foot-social { display: flex; gap: 10px; margin-top: 20px; } .foot-soc { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); background: #fff; transition: color 200ms, border-color 200ms, background 200ms, transform 200ms; } .foot-soc:hover { color: #fff; background: var(--pine); border-color: var(--pine); transform: translateY(-2px); } .foot-soc svg { width: 18px; height: 18px; display: block; } .foot-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } .fcol h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; font-weight: 500; } .fcol a { display: block; font-size: 14.5px; color: var(--muted); text-decoration: none; margin-bottom: 10px; transition: color 200ms; } .fcol a:hover { color: var(--orange); } .foot-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--line); margin-top: clamp(40px, 5vw, 56px); padding-top: 22px; font-size: 13.5px; color: var(--faint); } .foot-bot-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .foot-bot-links a { color: var(--muted); text-decoration: none; transition: color 200ms; } .foot-bot-links a:hover { color: var(--ink); } .foot-host { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; } .foot-disclaimer { margin-top: 24px; font-size: 12.5px; line-height: 1.6; color: var(--faint); max-width: 88ch; } /* ---------- scroll reveal (same curve as the SPA) ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal.in { opacity: 1; transform: none; } .grid > .reveal:nth-child(2), .steps > .reveal:nth-child(2) { transition-delay: 80ms; } .grid > .reveal:nth-child(3), .steps > .reveal:nth-child(3) { transition-delay: 160ms; } .grid > .reveal:nth-child(4) { transition-delay: 80ms; } .grid > .reveal:nth-child(5) { transition-delay: 160ms; } .grid > .reveal:nth-child(6) { transition-delay: 240ms; } /* ---------- breadcrumb ---------- */ .crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 18px; } .crumbs a { color: var(--faint); text-decoration: none; } .crumbs a:hover { color: var(--pine); } .crumbs span { color: var(--faint); } /* ---------- tablet ---------- */ @media (max-width: 1024px) { .site-nav .brand img { height: 56px; } .steps, .grid { grid-template-columns: repeat(2, 1fr); } .foot-top { grid-template-columns: 1fr; gap: 40px; } .foot-cols { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; } } /* the fuller SPA-matched link set wraps below ~900px — collapse to the doors */ @media (max-width: 900px) { .site-nav .links { display: none; } .site-nav .wrap { justify-content: space-between; gap: 8px; } } /* ---------- mobile ---------- */ @media (max-width: 640px) { .site-nav .brand img { height: 51px; } .site-nav .btn { padding: 10px 13px; font-size: 13px; } .steps, .grid { grid-template-columns: 1fr; } .strip { flex-direction: column; align-items: flex-start; } .foot-cols { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* ---------------------------------------------------------------- medicines A reference page, not a dashboard. Text-first and quiet: no cards, no icon grid, no gradient hero. The one section that gets visual weight is the red-flags block, because it is the only part of the page where getting it wrong costs a reader something real. */ .med-page { max-width: 750px; padding-top: 26px; padding-bottom: 8px; } .med-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .med-lang { font-size: 13.5px; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); white-space: nowrap; padding-bottom: 1px; } .med-lang:hover { color: var(--pine); border-color: currentColor; } .med-page h1 { margin: 18px 0 0; font-family: var(--disp); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(30px, 2.8vw + 14px, 46px); line-height: 1.08; } /* The same molecule in the other script. Someone who knows it only as पैरासिटामोल should see the word they know without leaving the page. */ /* The byline sits directly under the title, where a reader decides whether to trust the page — not at the foot beside the sources, where nobody looks. */ .med-byline { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); } .med-byline strong { color: var(--ink); font-weight: 600; } .med-byline-none { color: var(--faint); max-width: 62ch; } .med-alt { margin: 6px 0 0; font-size: 16px; color: var(--faint); } .med-page .lead { margin-top: 16px; font-size: clamp(17px, .5vw + 15px, 19px); } .med-nodose { margin: 30px 0 4px; padding: 18px 20px; border-radius: 14px; background: #FFF6EE; border: 1px solid #F4D9BE; } .med-nodose p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #6E3A08; max-width: 60ch; } .med-nodose-h { font-weight: 600; margin-bottom: 5px !important; color: #8A4708 !important; } /* site.css gives every
up to 96px of vertical padding, which is right for a landing page and wrong for a reference article — it left ~190px of dead space between one-sentence answers. */ .med-sec { padding: 0; margin-top: 30px; } .med-sec h2 { margin: 0 0 9px; font-family: var(--disp); font-weight: 500; font-size: clamp(19px, .9vw + 14px, 23px); letter-spacing: -0.005em; } .med-sec p { margin: 0; color: var(--muted); max-width: 64ch; line-height: 1.68; } /* Red flags: the one block a reader must not skim past. */ .med-red { border-left: 3px solid var(--coral); padding-left: 20px; } .med-red h2 { color: #B23A20; } .med-red p { color: #3A2119; } .med-sources { margin: 0 0 12px; padding-left: 19px; } .med-sources li { font-size: 14.5px; margin-bottom: 5px; color: var(--muted); } .med-sources a { color: var(--pine); text-decoration: none; border-bottom: 1px solid var(--line); } .med-sources a:hover { border-color: currentColor; } .med-note { font-size: 12.5px; color: var(--faint); max-width: 62ch; line-height: 1.6; } @media (max-width: 640px) { .med-red { padding-left: 15px; } .med-nodose { padding: 15px 16px; } } .med-faq-item { margin-top: 20px; } .med-faq-item:first-of-type { margin-top: 14px; } .med-faq-item h3 { margin: 0 0 5px; font-family: var(--body); font-weight: 600; font-size: 15.5px; line-height: 1.45; color: var(--ink); max-width: 60ch; } .med-faq-item p { font-size: 15px; } /* ---- ask Maddy (answers read from this page's DOM; no network, no tokens) ---- */ .med-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Maddy: a sticky rail beside the article, a pinned bar on a phone. It used to be the last section of a 3,900px page -- 67% of the way down, three screens of scrolling before a reader could see it existed. ---- */ .med-shell { display: grid; grid-template-columns: minmax(0, 750px) 300px; gap: 44px; align-items: start; max-width: 1160px; } .med-shell .med-page { max-width: none; } .med-rail { position: sticky; top: 84px; } .med-ask { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: #F5F9F7; } /* The toggle is the rail's heading. It is a real button because on a phone it opens and closes the panel; on desktop it is styled flat and never collapses. */ .med-rail-toggle { display: flex; align-items: center; gap: 9px; width: 100%; padding: 0; border: 0; background: none; cursor: default; text-align: left; font-family: var(--disp); font-weight: 500; font-size: 17px; color: var(--ink); } /* Maddy, animated. Keyframes ported verbatim from the FROZEN component (web/apps/web/src/components/maddy/MaddyAvatar.tsx) so he moves the same way here as in the app. Running the `greet` mood, which that file reserves for screens where nobody has spoken yet — a still character reads as a picture rather than as somebody waiting for you. */ .maddy-ico { flex: none; width: 48px; height: 49px; margin: -9px -2px -9px -3px; overflow: visible; } .maddy-ico .mdy-whole, .maddy-ico .mdy-head, .maddy-ico .mdy-eyes, .maddy-ico .mdy-pupils, .maddy-ico .mdy-ear, .maddy-ico .mdy-shadow { transform-box: fill-box; } .maddy-ico .mdy-whole { transform-origin: 50% 96%; } .maddy-ico .mdy-head { transform-origin: 50% 80%; } .maddy-ico .mdy-ear { transform-origin: 50% 10%; } .maddy-ico .mdy-shadow { transform-origin: center; } .maddy-ico .mdy-whole { animation: mdyHover 3.6s ease-in-out infinite; } .maddy-ico .mdy-shadow { animation: mdyShPulse 3.6s ease-in-out infinite; } .maddy-ico .mdy-eyes { animation: mdyBlink 4.6s infinite; } .maddy-ico .mdy-pupils { animation: mdyDart 7s ease-in-out infinite; } .maddy-ico.mdy-greet .mdy-head { animation: mdyGlance 9s ease-in-out infinite; } .maddy-ico.mdy-greet .mdy-ear-l { animation: mdyListenL 6.5s ease-in-out infinite; } .maddy-ico.mdy-greet .mdy-ear-r { animation: mdyListenR 6.5s ease-in-out infinite; } @keyframes mdyHover { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } } @keyframes mdyShPulse { 0%, 100% { transform: scaleX(1); opacity: .10 } 50% { transform: scaleX(.86); opacity: .06 } } @keyframes mdyBlink { 0%, 93.5%, 100% { transform: scaleY(1) } 95.5%, 97.5% { transform: scaleY(.06) } } @keyframes mdyDart { 0%, 34% { transform: translate(3px, 0) } 42%, 64% { transform: translate(-4px, 1px) } 72%, 100% { transform: translate(3px, 0) } } @keyframes mdyGlance { 0%, 58%, 100% { transform: rotate(0) } 67% { transform: rotate(-5deg) } 82% { transform: rotate(3.5deg) } } @keyframes mdyListenL { 0%, 74%, 100% { transform: rotate(0) } 80% { transform: rotate(-9deg) } 89% { transform: rotate(4deg) } } @keyframes mdyListenR { 0%, 74%, 100% { transform: rotate(0) } 80% { transform: rotate(9deg) } 89% { transform: rotate(-4deg) } } /* Motion is decoration here, never information — the reader loses nothing. */ @media (prefers-reduced-motion: reduce) { .maddy-ico .mdy-whole, .maddy-ico .mdy-head, .maddy-ico .mdy-eyes, .maddy-ico .mdy-pupils, .maddy-ico .mdy-ear, .maddy-ico .mdy-shadow { animation: none !important; } } .med-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .med-chip { font: inherit; font-size: 12.5px; line-height: 1; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); cursor: pointer; } .med-chip:hover { color: var(--pine); border-color: var(--pine); } .med-ask-log { margin: 14px 0 0; max-height: 300px; overflow-y: auto; } .med-ask-log p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; max-width: 60ch; } .med-ask-log span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 3px; } .med-ask-you { color: var(--ink); } .med-ask-bot { color: var(--muted); } .med-ask-form { display: flex; gap: 8px; margin-top: 12px; } .med-ask-form input { flex: 1; font: inherit; font-size: 15px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .med-ask-form input:focus { outline: 2px solid var(--pine); border-color: var(--pine); } .med-ask-form button { border: none; cursor: pointer; white-space: nowrap; } /* Phone: the rail becomes a bar pinned to the bottom, collapsed to its one-line heading. Expanded it is capped at 70vh so the article is never fully hidden, and the page gets bottom padding so the bar cannot sit on top of the footer. */ @media (max-width: 1079px) { .med-shell { display: block; } .med-rail { position: fixed; inset: auto 0 0 0; top: auto; z-index: 40; padding: 0 12px 12px; pointer-events: none; } .med-rail .med-ask { pointer-events: auto; margin: 0 auto; max-width: 750px; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(12, 23, 20, .13); background: #F5F9F7; } .med-rail-toggle { cursor: pointer; padding: 4px 0; } .med-ask-body { display: none; } .med-rail.is-open .med-ask-body { display: block; max-height: 58vh; overflow-y: auto; } .med-ask-log { max-height: 32vh; } .med-page { padding-bottom: 86px; } /* Collapsed, the bar is a single usable row: the character, then the real input. It used to be a name and a chevron across 750px of nothing, and asking a question cost a tap before you could even type. Dropping the chevron and the label is what buys the room for the input. */ .med-rail:not(.is-open) .med-ask { display: flex; align-items: center; gap: 10px; padding: 10px 14px; } .med-rail:not(.is-open) .med-rail-toggle { width: auto; flex: none; } .med-rail:not(.is-open) .med-rail-toggle span { display: none; } .med-rail:not(.is-open) .med-ask-form { flex: 1; min-width: 0; margin-top: 0; } .med-rail:not(.is-open) .med-chips { display: none; } .med-rail:not(.is-open) .maddy-ico { width: 40px; height: 41px; margin: -7px 0; } /* A tablet has room to keep the name beside him; a 390px phone does not. */ @media (min-width: 620px) { .med-rail:not(.is-open) .med-rail-toggle span { display: inline; } } } /* ---- key facts: the short version, up top. Informative, not a warning panel — this is the box a reader who reads nothing else should read. ---- */ .med-keyfacts { margin: 28px 0 4px; padding: 20px 22px; border-radius: 14px; background: #F1F6F3; border: 1px solid #D6E5DC; } .med-keyfacts h2 { margin: 0 0 10px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pine); } .med-keyfacts ul { margin: 0; padding-left: 18px; } .med-keyfacts li { font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: 7px; max-width: 60ch; } .med-keyfacts li:last-child { margin-bottom: 0; } .med-uses { margin: 10px 0 0; padding-left: 18px; } .med-uses li { font-size: 15px; line-height: 1.65; color: var(--muted); margin-bottom: 5px; } /* ---- language tabs: the reader who needs Hindi is the least likely to hunt for a small link in the corner, so it is a tab pair at the top. ---- */ .med-langtabs { display: inline-flex; gap: 2px; margin: 4px 0 20px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #F4F7F5; } .med-tab { font-size: 13.5px; line-height: 1; padding: 8px 16px; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; transition: background 150ms ease; } .med-tab:hover { color: var(--pine); } .med-tab.is-on { background: #fff; color: var(--pine); font-weight: 600; box-shadow: 0 1px 3px rgba(12, 23, 20, .08); } .med-soon { margin: 12px 0 0; font-size: 13px; opacity: .75; } /* ---- app store badges ------------------------------------------------- Official artwork, fetched from Google's and Apple's own brand endpoints (play.google.com/intl/en_us/badges, developer.apple.com/assets/elements). Both stores require their unmodified badge, so these are not redrawn. Embedded as data URIs rather than shipped as files: marketing/ deploys by copying the GENERATED directories, so a loose assets/ folder is exactly the kind of thing a deploy silently drops. In site.css they are cached once for the whole site instead of inlined into every medicine page. Google's asset carries ~12% built-in padding, so it is rendered taller than Apple's for the two to look the same height side by side. */ .store-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 4px; } .store-badge { display: block; background-repeat: no-repeat; background-position: center; background-size: contain; text-indent: -9999px; overflow: hidden; white-space: nowrap; } .store-badge-play { width: 155px; height: 60px; background-image: url("data:image/png;base64,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"); } .store-badge-ios { width: 135px; height: 45px; background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0ibGl2ZXR5cGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjExOS42NjQwNyIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDExOS42NjQwNyA0MCI+CiAgPHRpdGxlPkRvd25sb2FkX29uX3RoZV9BcHBfU3RvcmVfQmFkZ2VfVVMtVUtfUkdCX2Jsa180U1ZHXzA5MjkxNzwvdGl0bGU+CiAgPGc+CiAgICA8Zz4KICAgICAgPGc+CiAgICAgICAgPHBhdGggZD0iTTExMC4xMzQ3NywwSDkuNTM0NjhjLS4zNjY3LDAtLjcyOSwwLTEuMDk0NzMuMDAyLS4zMDYxNS4wMDItLjYwOTg2LjAwNzgxLS45MTg5NS4wMTI3QTEzLjIxNDc2LDEzLjIxNDc2LDAsMCwwLDUuNTE3MS4xOTE0MWE2LjY2NTA5LDYuNjY1MDksMCwwLDAtMS45MDA4OC42MjdBNi40Mzc3OSw2LjQzNzc5LDAsMCwwLDEuOTk3NTcsMS45OTcwNyw2LjI1ODQ0LDYuMjU4NDQsMCwwLDAsLjgxOTM1LDMuNjE4MTZhNi42MDExOSw2LjYwMTE5LDAsMCwwLS42MjUsMS45MDMzMiwxMi45OTMsMTIuOTkzLDAsMCwwLS4xNzkyLDIuMDAyQy4wMDU4Nyw3LjgzMDA4LjAwNDg5LDguMTM3NywwLDguNDQ0MzRWMzEuNTU4NmMuMDA0ODkuMzEwNS4wMDU4Ny42MTEzLjAxNTE1LjkyMTlhMTIuOTkyMzIsMTIuOTkyMzIsMCwwLDAsLjE3OTIsMi4wMDE5LDYuNTg3NTYsNi41ODc1NiwwLDAsMCwuNjI1LDEuOTA0M0E2LjIwNzc4LDYuMjA3NzgsMCwwLDAsMS45OTc1NywzOC4wMDFhNi4yNzQ0NSw2LjI3NDQ1LDAsMCwwLDEuNjE4NjUsMS4xNzg3LDYuNzAwODIsNi43MDA4MiwwLDAsMCwxLjkwMDg4LjYzMDgsMTMuNDU1MTQsMTMuNDU1MTQsMCwwLDAsMi4wMDM5LjE3NjhjLjMwOTA5LjAwNjguNjEyOC4wMTA3LjkxODk1LjAxMDdDOC44MDU2Nyw0MCw5LjE2OCw0MCw5LjUzNDY4LDQwSDExMC4xMzQ3N2MuMzU5NCwwLC43MjQ2LDAsMS4wODQtLjAwMi4zMDQ3LDAsLjYxNzItLjAwMzkuOTIxOS0uMDEwN2ExMy4yNzksMTMuMjc5LDAsMCwwLDItLjE3NjgsNi44MDQzMiw2LjgwNDMyLDAsMCwwLDEuOTA4Mi0uNjMwOCw2LjI3NzQyLDYuMjc3NDIsMCwwLDAsMS42MTcyLTEuMTc4Nyw2LjM5NDgyLDYuMzk0ODIsMCwwLDAsMS4xODE2LTEuNjE0Myw2LjYwNDEzLDYuNjA0MTMsMCwwLDAsLjYxOTEtMS45MDQzLDEzLjUwNjQzLDEzLjUwNjQzLDAsMCwwLC4xODU2LTIuMDAxOWMuMDAzOS0uMzEwNi4wMDM5LS42MTE0LjAwMzktLjkyMTkuMDA3OC0uMzYzMy4wMDc4LS43MjQ2LjAwNzgtMS4wOTM4VjkuNTM2MTNjMC0uMzY2MjEsMC0uNzI5NDktLjAwNzgtMS4wOTE3OSwwLS4zMDY2NCwwLS42MTQyNi0uMDAzOS0uOTIwOWExMy41MDcxLDEzLjUwNzEsMCwwLDAtLjE4NTYtMi4wMDIsNi42MTc3LDYuNjE3NywwLDAsMC0uNjE5MS0xLjkwMzMyLDYuNDY2MTksNi40NjYxOSwwLDAsMC0yLjc5ODgtMi43OTk4LDYuNzY3NTQsNi43Njc1NCwwLDAsMC0xLjkwODItLjYyNywxMy4wNDM5NCwxMy4wNDM5NCwwLDAsMC0yLS4xNzY3NmMtLjMwNDctLjAwNDg4LS42MTcyLS4wMTA3NC0uOTIxOS0uMDEyNjktLjM1OTQtLjAwMi0uNzI0Ni0uMDAyLTEuMDg0LS4wMDJaIiBzdHlsZT0iZmlsbDogI2E2YTZhNiIvPgogICAgICAgIDxwYXRoIGQ9Ik04LjQ0NDgzLDM5LjEyNWMtLjMwNDY4LDAtLjYwMi0uMDAzOS0uOTA0MjktLjAxMDdhMTIuNjg3MTQsMTIuNjg3MTQsMCwwLDEtMS44NjkxNC0uMTYzMSw1Ljg4MzgxLDUuODgzODEsMCwwLDEtMS42NTY3NC0uNTQ3OSw1LjQwNTczLDUuNDA1NzMsMCwwLDEtMS4zOTctMS4wMTY2LDUuMzIwODIsNS4zMjA4MiwwLDAsMS0xLjAyMDUxLTEuMzk2NSw1LjcyMTg2LDUuNzIxODYsMCwwLDEtLjU0My0xLjY1NzIsMTIuNDEzNTEsMTIuNDEzNTEsMCwwLDEtLjE2NjUtMS44NzVjLS4wMDYzNC0uMjEwOS0uMDE0NjQtLjkxMzEtLjAxNDY0LS45MTMxVjguNDQ0MzRTLjg4MTg1LDcuNzUyOTMuODg3Nyw3LjU0OThhMTIuMzcwMzksMTIuMzcwMzksMCwwLDEsLjE2NTUzLTEuODcyMDcsNS43NTU1LDUuNzU1NSwwLDAsMSwuNTQzNDYtMS42NjIxQTUuMzczNDksNS4zNzM0OSwwLDAsMSwyLjYxMTgzLDIuNjE3NjgsNS41NjU0Myw1LjU2NTQzLDAsMCwxLDQuMDE0MTcsMS41OTUyMWE1LjgyMzA5LDUuODIzMDksMCwwLDEsMS42NTMzMi0uNTQzOTRBMTIuNTg1ODksMTIuNTg1ODksMCwwLDEsNy41NDMuODg3MjFMOC40NDUzMi44NzVIMTExLjIxMzg3bC45MTMxLjAxMjdhMTIuMzg0OTMsMTIuMzg0OTMsMCwwLDEsMS44NTg0LjE2MjU5LDUuOTM4MzMsNS45MzgzMywwLDAsMSwxLjY3MDkuNTQ3ODUsNS41OTM3NCw1LjU5Mzc0LDAsMCwxLDIuNDE1LDIuNDE5OTMsNS43NjI2Nyw1Ljc2MjY3LDAsMCwxLC41MzUyLDEuNjQ4OTIsMTIuOTk1LDEyLjk5NSwwLDAsMSwuMTczOCwxLjg4NzIxYy4wMDI5LjI4MzIuMDAyOS41ODc0LjAwMjkuODkwMTQuMDA3OS4zNzUuMDA3OS43MzE5My4wMDc5LDEuMDkxNzlWMzAuNDY0OGMwLC4zNjMzLDAsLjcxNzgtLjAwNzksMS4wNzUyLDAsLjMyNTIsMCwuNjIzMS0uMDAzOS45Mjk3YTEyLjczMTI2LDEyLjczMTI2LDAsMCwxLS4xNzA5LDEuODUzNSw1LjczOSw1LjczOSwwLDAsMS0uNTQsMS42Nyw1LjQ4MDI5LDUuNDgwMjksMCwwLDEtMS4wMTU2LDEuMzg1Nyw1LjQxMjksNS40MTI5LDAsMCwxLTEuMzk5NCwxLjAyMjUsNS44NjE2OCw1Ljg2MTY4LDAsMCwxLTEuNjY4LjU0OTgsMTIuNTQyMTgsMTIuNTQyMTgsMCwwLDEtMS44NjkyLjE2MzFjLS4yOTI5LjAwNjgtLjU5OTYuMDEwNy0uODk3NC4wMTA3bC0xLjA4NC4wMDJaIi8+CiAgICAgIDwvZz4KICAgICAgPGcgaWQ9Il9Hcm91cF8iIGRhdGEtbmFtZT0iJmx0O0dyb3VwJmd0OyI+CiAgICAgICAgPGcgaWQ9Il9Hcm91cF8yIiBkYXRhLW5hbWU9IiZsdDtHcm91cCZndDsiPgogICAgICAgICAgPGcgaWQ9Il9Hcm91cF8zIiBkYXRhLW5hbWU9IiZsdDtHcm91cCZndDsiPgogICAgICAgICAgICA8cGF0aCBpZD0iX1BhdGhfIiBkYXRhLW5hbWU9IiZsdDtQYXRoJmd0OyIgZD0iTTI0Ljc2ODg4LDIwLjMwMDY4YTQuOTQ4ODEsNC45NDg4MSwwLDAsMSwyLjM1NjU2LTQuMTUyMDYsNS4wNjU2Niw1LjA2NTY2LDAsMCwwLTMuOTkxMTYtMi4xNTc2OGMtMS42NzkyNC0uMTc2MjYtMy4zMDcxOSwxLjAwNDgzLTQuMTYyOSwxLjAwNDgzLS44NzIyNywwLTIuMTg5NzctLjk4NzMzLTMuNjA4NS0uOTU4MTRhNS4zMTUyOSw1LjMxNTI5LDAsMCwwLTQuNDcyOTIsMi43Mjc4N2MtMS45MzQsMy4zNDg0Mi0uNDkxNDEsOC4yNjk0NywxLjM2MTIsMTAuOTc2MDguOTI2OSwxLjMyNTM1LDIuMDEwMTgsMi44MDU4LDMuNDI3NjMsMi43NTMzLDEuMzg3MDYtLjA1NzUzLDEuOTA1MS0uODg0NDgsMy41Nzk0LS44ODQ0OCwxLjY1ODc2LDAsMi4xNDQ3OS44ODQ0OCwzLjU5MS44NTExLDEuNDg4MzgtLjAyNDE2LDIuNDI2MTMtMS4zMzEyNCwzLjMyMDUxLTIuNjY5MTRhMTAuOTYyLDEwLjk2MiwwLDAsMCwxLjUxODQyLTMuMDkyNTFBNC43ODIwNSw0Ljc4MjA1LDAsMCwxLDI0Ljc2ODg4LDIwLjMwMDY4WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICAgICAgPHBhdGggaWQ9Il9QYXRoXzIiIGRhdGEtbmFtZT0iJmx0O1BhdGgmZ3Q7IiBkPSJNMjIuMDM3MjUsMTIuMjEwODlhNC44NzI0OCw0Ljg3MjQ4LDAsMCwwLDEuMTE0NTItMy40OTA2Miw0Ljk1NzQ2LDQuOTU3NDYsMCwwLDAtMy4yMDc1OCwxLjY1OTYxLDQuNjM2MzQsNC42MzYzNCwwLDAsMC0xLjE0MzcxLDMuMzYxMzlBNC4wOTkwNSw0LjA5OTA1LDAsMCwwLDIyLjAzNzI1LDEyLjIxMDg5WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICA8cGF0aCBkPSJNNDIuMzAyMjcsMjcuMTM5NjVoLTQuNzMzNGwtMS4xMzY3MiwzLjM1NjQ1SDM0LjQyNzI3bDQuNDgzNC0xMi40MThoMi4wODNsNC40ODM0LDEyLjQxOEg0My40MzhaTTM4LjA1OTEsMjUuNTkwODJoMy43NTJsLTEuODQ5NjEtNS40NDcyN2gtLjA1MTc2WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik01NS4xNTk2OSwyNS45Njk3M2MwLDIuODEzNDgtMS41MDU4Niw0LjYyMTA5LTMuNzc4MzIsNC42MjEwOWEzLjA2OTMsMy4wNjkzLDAsMCwxLTIuODQ4NjMtMS41ODRoLS4wNDN2NC40ODQzOGgtMS44NTg0VjIxLjQ0MjM4SDQ4LjQzMDJ2MS41MDU4NmguMDM0MThhMy4yMTE2MiwzLjIxMTYyLDAsMCwxLDIuODgyODEtMS42MDA1OUM1My42NDUsMjEuMzQ3NjYsNTUuMTU5NjksMjMuMTY0MDYsNTUuMTU5NjksMjUuOTY5NzNabS0xLjkxMDE2LDBjMC0xLjgzMy0uOTQ3MjctMy4wMzgwOS0yLjM5MjU4LTMuMDM4MDktMS40MTk5MiwwLTIuMzc1LDEuMjMwNDctMi4zNzUsMy4wMzgwOSwwLDEuODI0MjIuOTU1MDgsMy4wNDU5LDIuMzc1LDMuMDQ1OUM1Mi4zMDIyNywyOS4wMTU2Myw1My4yNDk1MywyNy44MTkzNCw1My4yNDk1MywyNS45Njk3M1oiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgICA8cGF0aCBkPSJNNjUuMTI0NTMsMjUuOTY5NzNjMCwyLjgxMzQ4LTEuNTA1ODYsNC42MjEwOS0zLjc3ODMyLDQuNjIxMDlhMy4wNjkzLDMuMDY5MywwLDAsMS0yLjg0ODYzLTEuNTg0aC0uMDQzdjQuNDg0MzhoLTEuODU4NFYyMS40NDIzOEg1OC4zOTV2MS41MDU4NmguMDM0MThBMy4yMTE2MiwzLjIxMTYyLDAsMCwxLDYxLjMxMiwyMS4zNDc2NkM2My42MDk4OCwyMS4zNDc2Niw2NS4xMjQ1MywyMy4xNjQwNiw2NS4xMjQ1MywyNS45Njk3M1ptLTEuOTEwMTYsMGMwLTEuODMzLS45NDcyNy0zLjAzODA5LTIuMzkyNTgtMy4wMzgwOS0xLjQxOTkyLDAtMi4zNzUsMS4yMzA0Ny0yLjM3NSwzLjAzODA5LDAsMS44MjQyMi45NTUwOCwzLjA0NTksMi4zNzUsMy4wNDU5QzYyLjI2NzExLDI5LjAxNTYzLDYzLjIxNDM4LDI3LjgxOTM0LDYzLjIxNDM4LDI1Ljk2OTczWiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik03MS43MTA0NywyNy4wMzYxM2MuMTM3NywxLjIzMTQ1LDEuMzM0LDIuMDQsMi45Njg3NSwyLjA0LDEuNTY2NDEsMCwyLjY5MzM2LS44MDg1OSwyLjY5MzM2LTEuOTE4OTUsMC0uOTYzODctLjY3OTY5LTEuNTQxLTIuMjg5MDYtMS45MzY1MmwtMS42MDkzNy0uMzg3N2MtMi4yODAyNy0uNTUwNzgtMy4zMzg4Ny0xLjYxNzE5LTMuMzM4ODctMy4zNDc2NiwwLTIuMTQyNTgsMS44NjcxOS0zLjYxNDI2LDQuNTE4NTUtMy42MTQyNiwyLjYyNCwwLDQuNDIyODUsMS40NzE2OCw0LjQ4MzQsMy42MTQyNmgtMS44NzZjLS4xMTIzLTEuMjM5MjYtMS4xMzY3Mi0xLjk4NzMtMi42MzM3OS0xLjk4NzNzLTIuNTIxNDguNzU2ODQtMi41MjE0OCwxLjg1ODRjMCwuODc3OTMuNjU0MywxLjM5NDUzLDIuMjU0ODgsMS43OWwxLjM2ODE2LjMzNTk0YzIuNTQ3ODUuNjAyNTQsMy42MDY0NSwxLjYyNiwzLjYwNjQ1LDMuNDQyMzgsMCwyLjMyMzI0LTEuODUwNTksMy43NzgzMi00Ljc5Mzk1LDMuNzc4MzItMi43NTM5MSwwLTQuNjEzMjgtMS40MjA5LTQuNzMzNC0zLjY2N1oiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgICA8cGF0aCBkPSJNODMuMzQ2MjEsMTkuMjk5OHYyLjE0MjU4aDEuNzIxNjh2MS40NzE2OEg4My4zNDYyMXY0Ljk5MTIxYzAsLjc3NTM5LjM0NDczLDEuMTM2NzIsMS4xMDE1NiwxLjEzNjcyYTUuODA3NTIsNS44MDc1MiwwLDAsMCwuNjExMzMtLjA0M3YxLjQ2Mjg5YTUuMTAzNTEsNS4xMDM1MSwwLDAsMS0xLjAzMjIzLjA4NTk0Yy0xLjgzMywwLTIuNTQ3ODUtLjY4ODQ4LTIuNTQ3ODUtMi40NDQzNFYyMi45MTQwNkg4MC4xNjI2MlYyMS40NDIzOEg4MS40NzlWMTkuMjk5OFoiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgICA8cGF0aCBkPSJNODYuMDY1LDI1Ljk2OTczYzAtMi44NDg2MywxLjY3NzczLTQuNjM4NjcsNC4yOTM5NS00LjYzODY3LDIuNjI1LDAsNC4yOTQ5MiwxLjc5LDQuMjk0OTIsNC42Mzg2NywwLDIuODU2NDUtMS42NjExMyw0LjYzODY3LTQuMjk0OTIsNC42Mzg2N0M4Ny43MjYwOSwzMC42MDg0LDg2LjA2NSwyOC44MjYxNyw4Ni4wNjUsMjUuOTY5NzNabTYuNjk1MzEsMGMwLTEuOTU0MS0uODk1NTEtMy4xMDc0Mi0yLjQwMTM3LTMuMTA3NDJzLTIuNDAwMzksMS4xNjIxMS0yLjQwMDM5LDMuMTA3NDJjMCwxLjk2MTkxLjg5NDUzLDMuMTA2NDUsMi40MDAzOSwzLjEwNjQ1UzkyLjc2MDI3LDI3LjkzMTY0LDkyLjc2MDI3LDI1Ljk2OTczWiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik05Ni4xODYwNiwyMS40NDIzOGgxLjc3MjQ2djEuNTQxaC4wNDNhMi4xNTk0LDIuMTU5NCwwLDAsMSwyLjE3NzczLTEuNjM1NzQsMi44NjYxNiwyLjg2NjE2LDAsMCwxLC42MzY3Mi4wNjkzNHYxLjczODI4YTIuNTk3OTQsMi41OTc5NCwwLDAsMC0uODM1LS4xMTIzLDEuODcyNjQsMS44NzI2NCwwLDAsMC0xLjkzNjUyLDIuMDgzdjUuMzcwMTJoLTEuODU4NFoiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgICA8cGF0aCBkPSJNMTA5LjM4NDMsMjcuODM2OTFjLS4yNSwxLjY0MzU1LTEuODUwNTksMi43NzE0OC0zLjg5ODQ0LDIuNzcxNDgtMi42MzM3OSwwLTQuMjY4NTUtMS43NjQ2NS00LjI2ODU1LTQuNTk1NywwLTIuODM5ODQsMS42NDM1NS00LjY4MTY0LDQuMTkwNDMtNC42ODE2NCwyLjUwNDg4LDAsNC4wODAwOCwxLjcyMDcsNC4wODAwOCw0LjQ2NTgydi42MzY3MmgtNi4zOTQ1M3YuMTEyM2EyLjM1OCwyLjM1OCwwLDAsMCwyLjQzNTU1LDIuNTY0NDUsMi4wNDgzNCwyLjA0ODM0LDAsMCwwLDIuMDkwODItMS4yNzM0NFptLTYuMjgyMjMtMi43MDIxNWg0LjUyNjM3YTIuMTc3MywyLjE3NzMsMCwwLDAtMi4yMjA3LTIuMjk3ODVBMi4yOTIsMi4yOTIsMCwwLDAsMTAzLjEwMjA3LDI1LjEzNDc3WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICA8L2c+CiAgICAgIDwvZz4KICAgIDwvZz4KICAgIDxnIGlkPSJfR3JvdXBfNCIgZGF0YS1uYW1lPSImbHQ7R3JvdXAmZ3Q7Ij4KICAgICAgPGc+CiAgICAgICAgPHBhdGggZD0iTTM3LjgyNjE5LDguNzMxYTIuNjM5NjQsMi42Mzk2NCwwLDAsMSwyLjgwNzYyLDIuOTY0ODRjMCwxLjkwNjI1LTEuMDMwMjcsMy4wMDItMi44MDc2MiwzLjAwMkgzNS42NzA5MlY4LjczMVptLTEuMjI4NTIsNS4xMjNoMS4xMjVhMS44NzU4OCwxLjg3NTg4LDAsMCwwLDEuOTY3NzctMi4xNDYsMS44ODEsMS44ODEsMCwwLDAtMS45Njc3Ny0yLjEzMzc5aC0xLjEyNVoiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgPHBhdGggZD0iTTQxLjY4MDY4LDEyLjQ0NDM0YTIuMTMzMjMsMi4xMzMyMywwLDEsMSw0LjI0NzA3LDAsMi4xMzM1OCwyLjEzMzU4LDAsMSwxLTQuMjQ3MDcsMFptMy4zMzMsMGMwLS45NzYwNy0uNDM4NDgtMS41NDY4Ny0xLjIwOC0xLjU0Njg3LS43NzI0NiwwLTEuMjA3LjU3MDgtMS4yMDcsMS41NDY4OCwwLC45ODM4OS40MzQ1NywxLjU1MDI5LDEuMjA3LDEuNTUwMjlDNDQuNTc1MjIsMTMuOTk0NjMsNDUuMDEzNjksMTMuNDI0MzIsNDUuMDEzNjksMTIuNDQ0MzRaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik01MS41NzMyNiwxNC42OTc3NWgtLjkyMTg3bC0uOTMwNjYtMy4zMTY0MWgtLjA3MDMxbC0uOTI2NzYsMy4zMTY0MWgtLjkxMzA5bC0xLjI0MTIxLTQuNTAyOTNoLjkwMTM3bC44MDY2NCwzLjQzNmguMDY2NDFsLjkyNTc4LTMuNDM2aC44NTI1NGwuOTI1NzgsMy40MzZoLjA3MDMxbC44MDI3My0zLjQzNmguODg4NjdaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik01My44NTM1NCwxMC4xOTQ4Mkg1NC43MDl2LjcxNTMzaC4wNjY0MWExLjM0OCwxLjM0OCwwLDAsMSwxLjM0Mzc1LS44MDIyNSwxLjQ2NDU2LDEuNDY0NTYsMCwwLDEsMS41NTg1OSwxLjY3NDh2Mi45MTVoLS44ODg2N1YxMi4wMDU4NmMwLS43MjM2My0uMzE0NDUtMS4wODM1LS45NzE2OC0xLjA4MzVhMS4wMzI5NCwxLjAzMjk0LDAsMCwwLTEuMDc1MiwxLjE0MTExdjIuNjM0MjhoLS44ODg2N1oiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgPHBhdGggZD0iTTU5LjA5Mzc3LDguNDM3aC44ODg2N3Y2LjI2MDc0aC0uODg4NjdaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik02MS4yMTc3OSwxMi40NDQzNGEyLjEzMzQ2LDIuMTMzNDYsMCwxLDEsNC4yNDc1NiwwLDIuMTMzOCwyLjEzMzgsMCwxLDEtNC4yNDc1NiwwWm0zLjMzMywwYzAtLjk3NjA3LS40Mzg0OC0xLjU0Njg3LTEuMjA4LTEuNTQ2ODctLjc3MjQ2LDAtMS4yMDcuNTcwOC0xLjIwNywxLjU0Njg4LDAsLjk4Mzg5LjQzNDU3LDEuNTUwMjksMS4yMDcsMS41NTAyOUM2NC4xMTIzMiwxMy45OTQ2Myw2NC41NTA4LDEzLjQyNDMyLDY0LjU1MDgsMTIuNDQ0MzRaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik02Ni40MDA5LDEzLjQyNDMyYzAtLjgxMDU1LjYwMzUyLTEuMjc3ODMsMS42NzQ4LTEuMzQ0MjRsMS4yMTk3My0uMDcwMzF2LS4zODg2N2MwLS40NzU1OS0uMzE0NDUtLjc0NDE0LS45MjE4Ny0uNzQ0MTQtLjQ5NjA5LDAtLjgzOTg0LjE4MjEzLS45Mzg0OC41MDA0OWgtLjg2MDM1Yy4wOTA4Mi0uNzczNDQuODE4MzYtMS4yNjk1MywxLjgzOTg0LTEuMjY5NTMsMS4xMjg5MSwwLDEuNzY1NjMuNTYyLDEuNzY1NjMsMS41MTMxOHYzLjA3NjY2aC0uODU1NDd2LS42MzI4MWgtLjA3MDMxYTEuNTE1LDEuNTE1LDAsMCwxLTEuMzUyNTQuNzA3QTEuMzYwMjYsMS4zNjAyNiwwLDAsMSw2Ni40MDA5LDEzLjQyNDMyWm0yLjg5NDUzLS4zODQ3N3YtLjM3NjQ2bC0xLjA5OTYxLjA3MDMxYy0uNjIwMTIuMDQxNS0uOTAxMzcuMjUyNDQtLjkwMTM3LjY0OTQxLDAsLjQwNTI3LjM1MTU2LjY0MTExLjgzNS42NDExMUExLjA2MTUsMS4wNjE1LDAsMCwwLDY5LjI5NTQzLDEzLjAzOTU1WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICA8cGF0aCBkPSJNNzEuMzQ4MTYsMTIuNDQ0MzRjMC0xLjQyMjg1LjczMTQ1LTIuMzI0MjIsMS44NjkxNC0yLjMyNDIyYTEuNDg0LDEuNDg0LDAsMCwxLDEuMzgwODYuNzloLjA2NjQxVjguNDM3aC44ODg2N3Y2LjI2MDc0aC0uODUxNTZ2LS43MTE0M2gtLjA3MDMxYTEuNTYyODQsMS41NjI4NCwwLDAsMS0xLjQxNDA2Ljc4NTY0QzcyLjA3MTgsMTQuNzcyLDcxLjM0ODE2LDEzLjg3MDYxLDcxLjM0ODE2LDEyLjQ0NDM0Wm0uOTE4LDBjMCwuOTU1MDguNDUwMiwxLjUyOTc5LDEuMjAzMTMsMS41Mjk3OS43NDksMCwxLjIxMTkxLS41ODMsMS4yMTE5MS0xLjUyNTg4LDAtLjkzODQ4LS40Njc3Ny0xLjUyOTc5LTEuMjExOTEtMS41Mjk3OUM3Mi43MjEyMSwxMC45MTg0Niw3Mi4yNjYxMywxMS40OTcwNyw3Mi4yNjYxMywxMi40NDQzNFoiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgPHBhdGggZD0iTTc5LjIzLDEyLjQ0NDM0YTIuMTMzMjMsMi4xMzMyMywwLDEsMSw0LjI0NzA3LDAsMi4xMzM1OCwyLjEzMzU4LDAsMSwxLTQuMjQ3MDcsMFptMy4zMzMsMGMwLS45NzYwNy0uNDM4NDgtMS41NDY4Ny0xLjIwOC0xLjU0Njg3LS43NzI0NiwwLTEuMjA3LjU3MDgtMS4yMDcsMS41NDY4OCwwLC45ODM4OS40MzQ1NywxLjU1MDI5LDEuMjA3LDEuNTUwMjlDODIuMTI0NTMsMTMuOTk0NjMsODIuNTYzLDEzLjQyNDMyLDgyLjU2MywxMi40NDQzNFoiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgPHBhdGggZD0iTTg0LjY2OTQ1LDEwLjE5NDgyaC44NTU0N3YuNzE1MzNoLjA2NjQxYTEuMzQ4LDEuMzQ4LDAsMCwxLDEuMzQzNzUtLjgwMjI1LDEuNDY0NTYsMS40NjQ1NiwwLDAsMSwxLjU1ODU5LDEuNjc0OHYyLjkxNUg4Ny42MDVWMTIuMDA1ODZjMC0uNzIzNjMtLjMxNDQ1LTEuMDgzNS0uOTcxNjgtMS4wODM1YTEuMDMyOTQsMS4wMzI5NCwwLDAsMC0xLjA3NTIsMS4xNDExMXYyLjYzNDI4aC0uODg4NjdaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik05My41MTUxNiw5LjA3MzczdjEuMTQxNmguOTc1NTl2Ljc0ODU0aC0uOTc1NTlWMTMuMjc5M2MwLC40NzE2OC4xOTQzNC42NzgyMi42MzY3Mi42NzgyMmEyLjk2NjU3LDIuOTY2NTcsMCwwLDAsLjMzODg3LS4wMjA1MXYuNzQwMjNhMi45MTU1LDIuOTE1NSwwLDAsMS0uNDgzNC4wNDU0MWMtLjk4ODI4LDAtMS4zODE4NC0uMzQ3NjYtMS4zODE4NC0xLjIxNTgydi0yLjU0M2gtLjcxNDg0di0uNzQ4NTRoLjcxNDg0VjkuMDczNzNaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik05NS43MDQ2MSw4LjQzN2guODgwODZ2Mi40ODE0NWguMDcwMzFhMS4zODU2LDEuMzg1NiwwLDAsMSwxLjM3My0uODA2NjQsMS40ODMzOSwxLjQ4MzM5LDAsMCwxLDEuNTUwNzgsMS42Nzg3MXYyLjkwNzIzSDk4LjY5di0yLjY4OGMwLS43MTkyNC0uMzM1LTEuMDgzNS0uOTYyODktMS4wODM1YTEuMDUxOTQsMS4wNTE5NCwwLDAsMC0xLjEzMzc5LDEuMTQxNnYyLjYyOTg4aC0uODg4NjdaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik0xMDQuNzYxMjUsMTMuNDgxOTNhMS44MjgsMS44MjgsMCwwLDEtMS45NTExNywxLjMwMjczQTIuMDQ1MzEsMi4wNDUzMSwwLDAsMSwxMDAuNzMsMTIuNDYwNDVhMi4wNzY4NSwyLjA3Njg1LDAsMCwxLDIuMDc2MTctMi4zNTI1NGMxLjI1MjkzLDAsMi4wMDg3OS44NTYsMi4wMDg3OSwyLjI3VjEyLjY4OGgtMy4xNzk2OXYuMDQ5OGExLjE5MDIsMS4xOTAyLDAsMCwwLDEuMTk5MjIsMS4yOSwxLjA3OTM0LDEuMDc5MzQsMCwwLDAsMS4wNzEyOS0uNTQ1OVptLTMuMTI2LTEuNDUxMTdoMi4yNzQ0MWExLjA4NjQ3LDEuMDg2NDcsMCwwLDAtMS4xMDg0LTEuMTY2NUExLjE1MTYyLDEuMTUxNjIsMCwwLDAsMTAxLjYzNTI3LDEyLjAzMDc2WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg=="); } /* Not yet published. Shown so the section is in place, visibly inert so nobody taps a badge expecting a store — and never a link, because both stores require a badge to point at a live listing. */ /* Greyscale plus heavy fade made the black official badges illegible against the dark green band. Legibility wins: they stay in colour and the caption underneath carries the "not yet" — a badge nobody can read communicates nothing at all. */ span.store-badge { opacity: .9; cursor: default; } .foot-download { margin-top: 22px; } .foot-download h4 { margin: 0 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 500; } .foot-download .store-badges { justify-content: flex-start; margin-top: 0; } .store-soon { margin: 10px 0 0; font-size: 13px; opacity: .75; } /* ---- placement slot ------------------------------------------------- Reserved with a real min-height so dropping a 300x250 unit in later does not shove the article down as it loads. It sits after the last piece of medical content, never between a warning and the text it belongs to, and is visually separated so it can never be mistaken for the article. */ .med-slot { margin: 38px 0 8px; padding: 24px; min-height: 250px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 16px; background: #FBFCFB; } .med-slot-label { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .med-slot-copy { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 46ch; } .med-slot .btn { margin-top: 4px; } /* ---- medicines A-Z hub ---- */ .med-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 8px; } .med-jump a { font-family: var(--mono); font-size: 12px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; } .med-jump a:hover { color: var(--pine); border-color: var(--pine); } /* site.css gives every
up to 96px of vertical padding — right for a landing page, wrong for a letter group in an index. Same opt-out as .med-sec. */ .med-az { padding: 0; margin-top: 26px; scroll-margin-top: 80px; } .med-az h2 { margin: 0 0 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--faint); font-weight: 500; } .med-index { columns: 3; column-gap: 26px; list-style: none; padding: 0; margin: 0; } .med-index li { break-inside: avoid; margin-bottom: 6px; font-size: 15px; } .med-index a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); } .med-index a:hover { border-color: currentColor; } @media (max-width: 860px) { .med-index { columns: 2; } } @media (max-width: 560px) { .med-index { columns: 1; } } /* ---- hub: search box + most-common cards ---- */ .med-find { display: flex; flex-direction: column; gap: 7px; margin: 26px 0 6px; position: relative; } .med-find label { font-size: 13px; color: var(--muted); } .med-find input { font: inherit; font-size: 16px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .med-find input:focus { outline: 2px solid var(--pine); border-color: var(--pine); } .med-find-out { list-style: none; margin: 0; padding: 0; } .med-find-out li { border-bottom: 1px solid var(--line); } .med-find-out li:last-child { border-bottom: 0; } .med-find-out a { display: block; padding: 10px 4px; font-size: 15px; color: var(--ink); text-decoration: none; } .med-find-out a:hover { color: var(--pine); } .med-find-none { padding: 10px 4px; font-size: 14px; color: var(--faint); } .med-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; } .med-card { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; background: #fff; transition: border-color 150ms ease; } .med-card:hover { border-color: var(--pine); } .med-card-n { font-size: 15px; color: var(--ink); font-weight: 500; } .med-card-b { font-family: var(--mono); font-size: 11px; color: var(--faint); }