/* MyMedicineLeaflet - stylesheet Taken wholesale from MySurgeryLeaflet so the two sites are one design system. Only the brand tokens differ: patient green in place of teal, clinician coral in place of plum. Everything from the base styles down is byte for byte the sister site's, so a change made there can be pasted straight in here. MyMedicineLeaflet's own additions are in one marked block at the end. MySurgeryLeaflet - stylesheet Two modes share one stylesheet. [data-mode="patient"] and [data-mode="clinician"] on swap the brand tokens only. */ /* ---------- Tokens ---------- */ :root { --bg: #ffffff; --bg-sunk: #f5f7f8; --bg-card: #ffffff; --ink: #14202b; --ink-2: #4a5a6a; --ink-3: #6b7a88; --line: #dfe5ea; --line-strong: #c3ced7; --focus: #0b63ce; --warn-bg: #fff8e6; --warn-line: #e8cf8a; --warn-ink: #6b5310; /* patient green, taken from the leaf and book mark in the logo */ --brand: #66720f; --brand-strong: #4e5a0b; --brand-tint: #eff4e2; --brand-line: #c3d78d; /* text/icon colour that sits ON a --brand fill */ --on-brand: #ffffff; --radius: 12px; --radius-lg: 18px; --shadow: 0 1px 2px rgba(16,32,44,.06), 0 8px 24px -12px rgba(16,32,44,.18); --maxw: 1080px; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } :root[data-mode="clinician"] { /* clinician coral, darkened from the logo so it carries AA as body text */ --brand: #be3a2c; --brand-strong: #9c2c21; --brand-tint: #fdedeb; --brand-line: #f2b5ac; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1518; --bg-sunk: #151d21; --bg-card: #182126; --ink: #e9eff2; --ink-2: #a7b6bf; --ink-3: #8798a3; --line: #263239; --line-strong: #37474f; --focus: #7db3ff; --warn-bg: #2a2413; --warn-line: #5c4f20; --warn-ink: #e3cf92; --brand: #a9c94e; --brand-strong: #c2dd72; --brand-tint: #1d2710; --brand-line: #3b4d1b; /* brand fills are light in dark mode, so what sits on them must be dark */ --on-brand: #0c1305; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7); } :root[data-mode="clinician"]:not([data-theme="light"]) { --brand: #ff8a78; --brand-strong: #ffab9d; --brand-tint: #331610; --brand-line: #5c281e; --on-brand: #2a0a05; } } /* Same dark palette again for an explicit dark choice, so a host or viewer that stamps data-theme="dark" wins even on a light OS. */ :root[data-theme="dark"] { --bg: #0f1518; --bg-sunk: #151d21; --bg-card: #182126; --ink: #e9eff2; --ink-2: #a7b6bf; --ink-3: #8798a3; --line: #263239; --line-strong: #37474f; --focus: #7db3ff; --warn-bg: #2a2413; --warn-line: #5c4f20; --warn-ink: #e3cf92; --brand: #a9c94e; --brand-strong: #c2dd72; --brand-tint: #1d2710; --brand-line: #3b4d1b; --on-brand: #0c1305; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7); } :root[data-theme="dark"][data-mode="clinician"] { --brand: #ff8a78; --brand-strong: #ffab9d; --brand-tint: #331610; --brand-line: #5c281e; --on-brand: #2a0a05; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4 { line-height: 1.25; margin: 0 0 .4em; font-weight: 700; letter-spacing: -.011em; } h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); } h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); } h3 { font-size: 1.08rem; } p { margin: 0 0 1em; } a { color: var(--brand); text-underline-offset: 2px; } a:hover { color: var(--brand-strong); } img { max-width: 100%; height: auto; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } [hidden] { display: none !important; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--brand); color: var(--on-brand); padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0; } .skip:focus { left: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); } .header-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; } .brand-link { display: inline-flex; align-items: center; flex: 0 0 auto; } .brand-link img { height: 38px; width: auto; display: block; } @media (max-width: 700px) { .brand-link img { height: 30px; } } .header-spacer { flex: 1 1 auto; } .mode-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--bg-sunk); flex: 0 0 auto; } .mode-toggle button { font: inherit; font-size: .82rem; font-weight: 600; border: 0; background: transparent; color: var(--ink-2); padding: 7px 14px; cursor: pointer; white-space: nowrap; } .mode-toggle button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); } @media (max-width: 560px) { .mode-toggle button { padding: 7px 10px; font-size: .76rem; } } /* ---------- Search ---------- */ .search-shell { position: relative; } .search-shell.in-header { flex: 1 1 380px; max-width: 460px; } @media (max-width: 820px) { .search-shell.in-header { display: none; } } .search-box { position: relative; display: flex; align-items: center; } .search-box svg { position: absolute; left: 14px; width: 19px; height: 19px; color: var(--ink-3); pointer-events: none; } .search-input { width: 100%; font: inherit; color: var(--ink); background: var(--bg-sunk); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 11px 16px 11px 42px; } .search-input::placeholder { color: var(--ink-3); } .search-input:focus { background: var(--bg); border-color: var(--brand); } .search-shell.hero .search-input { font-size: 1.12rem; padding: 17px 18px 17px 50px; border-radius: var(--radius-lg); } .search-shell.hero .search-box svg { left: 18px; width: 22px; height: 22px; } .results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); max-height: min(62vh, 460px); overflow-y: auto; padding: 6px; } .results:empty { display: none; } .result { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; border: 0; background: transparent; color: var(--ink); padding: 9px 12px; border-radius: 8px; text-decoration: none; } .result:hover, .result.active { background: var(--brand-tint); } .result .r-name { font-weight: 600; display: block; } .result .r-meta { font-size: .82rem; color: var(--ink-3); } .result mark { background: transparent; color: var(--brand); font-weight: 700; } .results .no-hit { padding: 14px 12px; color: var(--ink-2); font-size: .92rem; } /* ---------- Mode chooser ---------- */ .chooser { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 40px 20px; background: var(--bg-sunk); } .chooser-inner { max-width: 720px; width: 100%; text-align: center; } .chooser-inner > img { height: 54px; width: auto; margin-bottom: 26px; } .chooser-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.25; font-weight: 700; letter-spacing: -.011em; margin: 0 0 .4em; } .chooser-sub { color: var(--ink-2); max-width: 46ch; margin: 0 auto; } /* ---------- A to Z page ---------- A static page outside the app, so that the whole index can be read in one list and reached by a search engine, which cannot follow a hash route. */ .az-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 16px 64px; } .az-back { display: inline-block; margin-bottom: 8px; } .az-nav { position: sticky; top: 0; background: var(--bg); padding: 12px 0; margin: 18px 0 8px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; z-index: 2; } .az-nav a { display: inline-block; min-width: 30px; text-align: center; padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; font-weight: 600; } .az-wrap section { margin-top: 26px; } .az-wrap section h2 { border-bottom: 2px solid var(--brand); display: inline-block; padding-bottom: 2px; } .az-wrap ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 2px 24px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .az-wrap li { padding: 5px 0; border-bottom: 1px solid var(--line); } .az-wrap .lay { color: var(--ink-2); } .az-wrap .sec { color: var(--ink-3); font-size: .85rem; display: block; } .az-foot { margin-top: 36px; color: var(--ink-2); } .chooser-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 28px; } @media (max-width: 620px) { .chooser-grid { grid-template-columns: 1fr; } } .chooser-card { display: block; text-align: left; font: inherit; color: var(--ink); cursor: pointer; background: var(--bg-card); border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); padding: 22px; text-decoration: none; } .chooser-card:hover { border-color: var(--dot); box-shadow: var(--shadow); } .chooser-card .cc-title { font-weight: 700; font-size: 1.12rem; display: block; margin-bottom: 4px; } .chooser-card .cc-sub { color: var(--ink-2); font-size: .92rem; } .chooser-card .cc-dot { width: 30px; height: 6px; border-radius: 3px; background: var(--dot); display: block; margin-bottom: 14px; } .chooser-card.patient { --dot: #8fb03a; } .chooser-card.clinician { --dot: #e04840; } /* ---------- Hero ---------- */ .hero { padding: 46px 0 30px; } .hero .tag { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-line); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; } .hero h1 { margin-bottom: .3em; } .hero .lede { color: var(--ink-2); font-size: 1.07rem; max-width: 54ch; margin-bottom: 26px; } .hero .search-shell { max-width: 640px; } .hero .hint { margin-top: 10px; font-size: .88rem; color: var(--ink-3); } .hero .hint button { font: inherit; font-size: inherit; border: 0; background: none; padding: 0 2px; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* ---------- Sections ---------- */ .section { padding: 26px 0 44px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .section-head p { margin: 0; color: var(--ink-2); font-size: .94rem; } .spec-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); } .spec-card { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--ink); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; } .spec-card:hover, .spec-card:focus-visible { transform: translateY(-3px) scale(1.015); border-color: var(--brand-line); background: var(--brand-tint); box-shadow: var(--shadow); } .spec-card .s-text { min-width: 0; } .spec-card .s-name { font-weight: 700; display: block; } .spec-card .s-lay { color: var(--ink-2); font-size: .88rem; display: block; margin-top: 2px; } .spec-card .s-count { color: var(--ink-3); font-size: .8rem; margin-top: 9px; display: block; } /* the icon tile - inherits the brand colour, so it is teal for patients and plum for professionals without any per-specialty colour of its own */ .spec-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-line); transition: background-color .18s ease, color .18s ease, transform .18s ease; } .spec-ico svg { width: 24px; height: 24px; display: block; } .spec-card:hover .spec-ico, .spec-card:focus-visible .spec-ico { background: var(--brand); color: var(--on-brand); transform: scale(1.06); } /* ---------- Specialty page ---------- */ .spec-hero { display: flex; gap: 18px; align-items: center; background: var(--brand-tint); border: 1px solid var(--brand-line); border-radius: var(--radius-lg); padding: 20px 22px; margin: 14px 0 26px; } .spec-hero .spec-ico { width: 56px; height: 56px; border-radius: 15px; background: var(--bg-card); border-color: var(--brand-line); } .spec-hero .spec-ico svg { width: 30px; height: 30px; } .spec-hero-text { min-width: 0; } .spec-hero-text h1 { margin: 0 0 3px; } .spec-hero-text p { margin: 0; color: var(--ink-2); } .spec-hero-meta { font-size: .85rem; color: var(--ink-3) !important; margin-top: 6px !important; } @media (max-width: 560px) { .spec-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; } } .group-grid { display: grid; gap: 14px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-bottom: 34px; } .group-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; } .group-card > h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 11px 16px; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); background: var(--brand-tint); border-bottom: 1px solid var(--brand-line); } .group-count { flex: 0 0 auto; font-size: .72rem; font-weight: 600; letter-spacing: 0; color: var(--ink-2); background: var(--bg-card); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; } .group-card .proc-list { padding: 2px 16px 6px; } .group-card .proc-list li:last-child { border-bottom: 0; } @media (prefers-reduced-motion: reduce) { .spec-card, .spec-ico { transition: none; } .spec-card:hover, .spec-card:focus-visible { transform: none; } .spec-card:hover .spec-ico, .spec-card:focus-visible .spec-ico { transform: none; } } /* ---------- Lists ---------- */ .crumb { font-size: .88rem; color: var(--ink-3); padding-top: 22px; } .crumb a { color: var(--ink-2); } .group-head { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .proc-list { list-style: none; margin: 0; padding: 0; } .proc-list li { border-bottom: 1px solid var(--line); } .proc-list a { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 4px; text-decoration: none; color: var(--ink); } .proc-list a:hover { color: var(--brand); } .proc-list .p-name { font-weight: 600; } .proc-list .p-alt { color: var(--ink-3); font-size: .87rem; font-weight: 400; } .proc-list .chev { color: var(--ink-3); flex: 0 0 auto; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--bg-sunk); white-space: nowrap; } /* National publishers carry the brand tint; a single trust's own leaflet stays neutral, because that difference is the whole point of the ranking. */ .badge.tier-college, .badge.tier-nhs-uk, .badge.tier-gov, .badge.tier-charity { color: var(--brand); background: var(--brand-tint); border-color: var(--brand-line); } .badge.fmt { text-transform: uppercase; } /* ---------- Procedure page ---------- */ .proc-head { padding: 20px 0 6px; } .proc-head .alt-name { color: var(--ink-2); font-size: 1rem; margin: -2px 0 10px; } .proc-head .desc { color: var(--ink-2); max-width: 60ch; } .proc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } .rec-card { background: var(--bg-card); border: 1.5px solid var(--brand-line); border-radius: var(--radius-lg); padding: 20px; margin: 22px 0 18px; box-shadow: var(--shadow); } .rec-label { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; } .rec-card h2 { margin-bottom: 4px; font-size: 1.2rem; } .rec-pub { color: var(--ink-2); font-size: .95rem; margin-bottom: 12px; } .rec-note { font-size: .88rem; color: var(--ink-3); margin: 10px 0 0; } .btn-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; } .btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .94rem; font-weight: 600; cursor: pointer; text-decoration: none; border-radius: 9px; padding: 10px 15px; border: 1.5px solid var(--brand); color: var(--brand); background: transparent; } .btn:hover { background: var(--brand-tint); color: var(--brand-strong); } .btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .btn.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); } .btn.quiet { border-color: var(--line-strong); color: var(--ink-2); } .btn.quiet:hover { background: var(--bg-sunk); color: var(--ink); } .btn svg { width: 17px; height: 17px; flex: 0 0 auto; } .alt-list { list-style: none; margin: 0; padding: 0; } .alt-list li { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; margin-bottom: 9px; background: var(--bg-card); } .alt-list .a-title { font-weight: 600; } .alt-list .a-pub { color: var(--ink-2); font-size: .9rem; } .alt-list .a-note { color: var(--ink-3); font-size: .85rem; margin-top: 4px; } .notice { border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius); padding: 14px 16px; margin: 18px 0; font-size: .93rem; } .notice strong { color: inherit; } .notice p:last-child { margin-bottom: 0; } .disclaimer { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 18px; color: var(--ink-3); font-size: .87rem; max-width: 70ch; } /* Clinician extras */ .clin-only { display: none; } :root[data-mode="clinician"] .clin-only { display: block; } :root[data-mode="clinician"] .btn-row .clin-only { display: inline-flex; } .pat-only { display: block; } :root[data-mode="clinician"] .pat-only { display: none; } .copied { font-size: .86rem; color: var(--brand); margin-top: 8px; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); margin-top: 50px; padding: 28px 0 40px; color: var(--ink-3); font-size: .87rem; background: var(--bg-sunk); } .site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; } .site-footer a { color: var(--ink-2); } /* Statutory company details: required on the page, but they are fine print, not something to compete with the disclaimer above them. */ .site-footer .company { font-size: .84rem; color: var(--ink-3); } /* ---------- Static pages ---------- */ .prose { max-width: 68ch; padding-top: 12px; } .prose h2 { margin-top: 1.6em; } .prose ul { padding-left: 1.15em; } .prose li { margin-bottom: .4em; } .prose table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 1em 0; } .prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } .prose th { font-weight: 700; } /* ---------- Print: the patient handout ---------- */ @media print { :root { --ink: #000; --ink-2: #333; --ink-3: #555; --line: #bbb; } body { background: #fff; font-size: 12pt; } .site-header, .site-footer, .btn-row, .results, .crumb, .no-print { display: none !important; } .print-only { display: block !important; } .rec-card { border: 2px solid #000; box-shadow: none; page-break-inside: avoid; } /* Background fills often do not print, so the date chip falls back to a plain black rule and keeps its bold date. */ .dates { background: transparent !important; border: 1px solid #000 !important; } .dates .d-label, .dates .d-val, .dates .cal-ico { color: #000 !important; } .dates .d-sep { background: #000 !important; } .qr-box { border: 1px solid #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; color: #333; } .alt-list a::after { content: ""; } } .print-only { display: none; } .print-head { margin-bottom: 14px; } .print-head img { height: 40px; } .print-notes { border: 1px solid #999; border-radius: 6px; height: 90px; margin-top: 16px; padding: 8px; } .print-notes span { font-size: 9pt; color: #555; } /* ---------- Dates / freshness ---------- */ /* How current a leaflet is, is the single most important fact on the page after the leaflet itself - so it is a standalone chip, not a caption. Three states: in date, past its review date (amber), and no date shown at all. */ .dates { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-sunk); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.3; } .d-pair { display: inline-flex; align-items: baseline; gap: 6px; } .d-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } /* The chip and the size carry the emphasis, so the date itself sits at normal weight - bold on top of both was doing too much. */ .d-val { font-size: 1.06rem; font-weight: 400; color: var(--ink); white-space: nowrap; } .d-sep { width: 1px; align-self: stretch; background: var(--line-strong); } .cal-ico { width: 17px; height: 17px; flex: none; color: var(--ink-3); } /* Past its review date - the whole chip turns, so it cannot be skimmed past. */ .dates.overdue { background: var(--warn-bg); border-color: var(--warn-line); } .dates.overdue .cal-ico, .dates.overdue .d-label { color: var(--warn-ink); } .dates.overdue .d-val { color: var(--warn-ink); } .dates.overdue .d-sep { background: var(--warn-line); } /* No date printed by the publisher - stated plainly, kept quiet. */ .dates.none { color: var(--ink-3); font-style: italic; font-size: .9rem; border-style: dashed; background: transparent; padding: 7px 12px; } .d-first { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 6px; font-variant-numeric: tabular-nums; } /* On the recommendation card the date is load-bearing, so it is bigger again and tinted in the brand rather than grey. */ .rec-card .dates { margin-top: 16px; padding: 10px 15px; gap: 12px; background: var(--brand-tint); border-color: var(--brand-line); } .rec-card .dates .cal-ico, .rec-card .dates .d-label { color: var(--brand); } .rec-card .dates .d-val { font-size: 1.16rem; } .rec-card .dates .d-sep { background: var(--brand-line); } .rec-card .dates.overdue { background: var(--warn-bg); border-color: var(--warn-line); } .rec-card .dates.overdue .cal-ico, .rec-card .dates.overdue .d-label, .rec-card .dates.overdue .d-val { color: var(--warn-ink); } .rec-card .dates.overdue .d-sep { background: var(--warn-line); } /* At phone width the pairs stack, so the chip becomes a two-column grid with the calendar mark spanning both rows rather than sitting alone above them. */ @media (max-width: 480px) { .dates, .rec-card .dates { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: baseline; padding: 9px 12px; } .dates > * { grid-column: 2; } .cal-ico { grid-column: 1; grid-row: 1 / -1; align-self: center; } .d-sep { display: none; } .d-val, .rec-card .dates .d-val { font-size: 1rem; } } .alt-list .dates { margin-top: 4px; } .date-flag { color: var(--warn-ink); font-weight: 600; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .date-flag { color: #e3cf92; } } :root[data-theme="dark"] .date-flag { color: #e3cf92; } .badge.overdue { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-line); } /* ---------- Printable vs web-only ---------- */ .badge.printable-badge { color: var(--brand); background: var(--brand-tint); border-color: var(--brand-line); } .badge.webonly { color: var(--ink-2); background: var(--bg-sunk); } .alt-list .printable { color: var(--brand); font-weight: 600; } /* A consent form, rehabilitation protocol or decision aid is worth listing but is not the leaflet to read first, so it is labelled rather than highlighted. */ .badge.doctype-badge { color: var(--ink-2); background: var(--bg-sunk); border-style: dashed; } .alt-list .doctype { color: var(--ink-2); font-style: italic; } .section-note { color: var(--ink-2); font-size: .92rem; margin: -6px 0 12px; } .row-end { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .pdf-dot { font-size: .66rem; font-weight: 700; letter-spacing: .05em; padding: 2px 6px; border-radius: 4px; color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-line); } .pdf-inline { color: var(--brand); font-weight: 600; } /* ========================================================================== MyMedicineLeaflet additions Everything above this line is shared with MySurgeryLeaflet. Everything below is new here, and is portable back to the sister site as a block. ========================================================================== */ /* 0. Accessibility correction to a shared token, kept here rather than in the block above so the shared block stays paste-compatible with the sister site. --ink-3 is the quiet grey used for counts, notes, breadcrumbs, the footer company line and the "no date" chip. At the sister site's #6b7a88 it measures 4.41:1 on white, 4.10:1 on the sunk footer and 3.88:1 on a brand tint, all below the 4.5:1 WCAG AA minimum for body text. #616d79 carries 4.66:1 at its worst placement and is visually the same grey. This one applies to the sister site as written: it is the same token on the same surfaces. Dark mode already passes and is left alone, which is why the override is a bare :root - the dark rules are more specific and keep winning. */ :root { --ink-3: #616d79; } /* 1. Aspects. Medicine is keyed on conditions with aspects beneath them, so an entry page carries one recommendation per aspect rather than one per page. */ .aspect { margin-top: 34px; } .aspect:first-of-type { margin-top: 20px; } .aspect > .aspect-head { font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-line); border-radius: 999px; display: inline-block; padding: 5px 14px; margin: 0 0 4px; } .aspect .rec-card { margin-top: 12px; } .aspect > h2.group-head:first-of-type { margin-top: 14px; } /* 2. (The home page coverage band was removed. The figures behind it are still computed from the data at load and still used, on the How we choose page, so none of them can go stale.) */ /* Cross-cutting guides get their own section under the specialty grid, so the browse grid is specialties and nothing else. */ #guides .spec-grid { max-width: 720px; } /* 3. Colour theme control. The sister site follows the operating system only; this adds an explicit choice, which the three state dark mode already supports. */ .theme-btn { font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-sunk); color: var(--ink-2); padding: 7px 14px; flex: 0 0 auto; } .theme-btn:hover { color: var(--ink); } @media (max-width: 560px) { .theme-btn { padding: 7px 10px; font-size: .76rem; } } .header-row { flex-wrap: wrap; } @media (max-width: 700px) { .header-spacer { display: none; } } /* 4. Sections that are planned but hold no checked entries are shown as empty rather than hidden, so the reader can see what is and is not covered. */ .spec-card.is-empty { opacity: .62; } .spec-card.is-empty .spec-ico { background: var(--bg-sunk); color: var(--ink-3); border-color: var(--line); } .spec-card.is-empty:hover { background: var(--bg-card); border-color: var(--line-strong); transform: none; } .spec-card.is-empty:hover .spec-ico { background: var(--bg-sunk); color: var(--ink-3); transform: none; } /* 4b. The professional view adds a second description line, written for a clinician, beneath the plain-English one rather than in place of it. */ .proc-head .desc.note { color: var(--ink-3); font-size: .93rem; margin-top: 6px; border-left: 2px solid var(--brand-line); padding-left: 11px; } /* 5. Coding line, and the printed address of the recommended leaflet so a printed handout is usable away from the screen. */ .coding { color: var(--ink-3); font-size: .85rem; margin-top: 26px; } .rec-url { font-size: 9pt; color: #333; word-break: break-all; margin: 10px 0 0; } /* 6. The heading is focused on navigation so screen readers announce the new page. The ring adds nothing there and reads as an error to sighted users. */ #main h1[tabindex="-1"]:focus { outline: none; } @media print { :focus, :focus-visible, [tabindex]:focus { outline: none !important; } .coding, .section-note { color: #333; } .alt-list li { break-inside: avoid; } .aspect > .aspect-head { border: 1px solid #999; color: #000; background: none; } /* An aspect heading must never be the last thing on a page with its recommendation overleaf. */ .aspect > .aspect-head, .group-head, .section-note { break-after: avoid; } .aspect > .aspect-head + .rec-card { break-before: avoid; } }