/* 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 is the quietest text on the site: date labels, hints, the company line, the supporting-document tag. It still has to clear WCAG AA at 4.5:1, and it has to clear it on every surface it can land on, not just white. The old #6b7a88 failed on all five - 4.41 on white, 4.10 on the sunk grey, 4.16 on the amber overdue chip, 3.91 on the teal tint and 3.84 on the plum tint. This value is the lightest that passes all five (worst case 4.78) while staying visibly quieter than --ink-2. */ --ink-3: #5b6b79; --line: #dfe5ea; --line-strong: #c3ced7; --focus: #0b63ce; --warn-bg: #fff8e6; --warn-line: #e8cf8a; --warn-ink: #6b5310; --brand: #027b77; --brand-strong: #015e5b; --brand-tint: #e7f4f3; --brand-line: #a9d9d6; /* 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"] { --brand: #742d81; --brand-strong: #5d2468; --brand-tint: #f6ecf8; --brand-line: #d8b6e0; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1518; --bg-sunk: #151d21; --bg-card: #182126; --ink: #e9eff2; --ink-2: #a7b6bf; /* Dark mode passed already, but only just: 4.64 on the teal tint. Lifted for headroom - worst case is now 5.06. */ --ink-3: #8e9faa; --line: #263239; --line-strong: #37474f; --focus: #7db3ff; --warn-bg: #2a2413; --warn-line: #5c4f20; --warn-ink: #e3cf92; --brand: #18ada5; --brand-strong: #3fc6be; --brand-tint: #10322f; --brand-line: #1d4e4a; /* brand fills are light in dark mode, so what sits on them must be dark */ --on-brand: #07100f; --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: #c58ed6; --brand-strong: #d6a9e3; --brand-tint: #2b1832; --brand-line: #4d2d57; --on-brand: #1a0c1f; } } /* 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: #8e9faa; --line: #263239; --line-strong: #37474f; --focus: #7db3ff; --warn-bg: #2a2413; --warn-line: #5c4f20; --warn-ink: #e3cf92; --brand: #18ada5; --brand-strong: #3fc6be; --brand-tint: #10322f; --brand-line: #1d4e4a; --on-brand: #07100f; --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: #c58ed6; --brand-strong: #d6a9e3; --brand-tint: #2b1832; --brand-line: #4d2d57; --on-brand: #1a0c1f; } /* ---------- 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; } } /* Below about 430px the brand lockup and the mode toggle stop fitting on one line together, and the whole document picks up a horizontal scrollbar - it was 51px too wide at 320px. Everything in the header gives up a little rather than any one thing being dropped, because the logo is the only thing identifying the site and the toggle is how a clinician gets to their own view. Verified at 320, 360 and 390px. */ @media (max-width: 430px) { .header-row { padding-inline: 14px; gap: 10px; } .wrap { padding-inline: 14px; } .brand-link img { height: 26px; } .mode-toggle button { padding: 6px 9px; font-size: .72rem; } } /* One more notch for the 320px class of phone, and the fold. */ @media (max-width: 350px) { .header-row { padding-inline: 10px; gap: 8px; } .wrap { padding-inline: 12px; } .brand-link img { height: 24px; } .mode-toggle button { padding: 6px 7px; font-size: .7rem; } } /* ---------- 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 > .chooser-logo > img { height: 54px; width: auto; margin-bottom: 26px; } .chooser-note { color: var(--ink-2); max-width: 46ch; margin: 0 auto; } .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: #18ada5; } .chooser-card.clinician { --dot: #9b52ad; } /* ---------- 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(min(258px, 100%), 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; /* min() rather than a flat 330px: on a 320px phone a fixed minimum is wider than the column it sits in, and the whole page scrolls sideways. */ grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 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; } 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; } /* ---------- Honesty markers ---------- A gap is a finding, not an embarrassment, so it is labelled plainly in the listings. "No national leaflet" is quiet and dashed, because there is still something to read; "Nothing found" borrows the amber of the overdue badge, because clicking through will produce no leaflet at all. Neither is allowed to shout louder than the operation's own name. */ .gap-dot { font-size: .66rem; font-weight: 700; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; color: var(--ink-2); background: var(--bg-sunk); border: 1px dashed var(--line-strong); white-space: nowrap; } .gap-dot.none { color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-line); } .gap-inline { color: var(--ink-2); font-style: italic; } .gap-summary p { margin: 8px 0 0; } .gap-summary p:first-child { margin-top: 0; } .gap-summary .gap-dot { margin-right: 4px; } /* A footnote on the card, not a second headline. The count belongs here so the honesty is visible from the front page, but it must not outweigh the name of the specialty above it. */ .spec-card .s-gap { display: block; margin-top: 2px; font-size: .76rem; font-weight: 400; color: var(--ink-3); } /* In a list row the note goes under the name, where it has room for words a reader can understand without hovering anything. */ .proc-list .p-gap { display: block; margin-top: 3px; font-size: .78rem; font-weight: 600; color: var(--ink-2); font-style: italic; } .proc-list .p-gap.none { color: var(--warn-ink); font-style: normal; } .proc-list a:hover .p-gap { color: inherit; } /* ---------- The A to Z page ---------- a-z.html is a static page with no JavaScript at all: every entry's names and one-line description sit in the markup, because a search engine cannot see anything the hash router renders. It reuses the tokens, the header and the footer, and adds only what a long index needs. */ .az-page { max-width: var(--maxw); margin: 0 auto; padding: 26px 20px 8px; } .az-page > p { color: var(--ink-2); max-width: 68ch; } .az-back { font-size: .9rem; font-weight: 600; flex: 0 0 auto; white-space: nowrap; } .az-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 6px; padding: 12px; background: var(--bg-sunk); border: 1px solid var(--line); border-radius: var(--radius); } .az-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 4px 7px; border-radius: 7px; font-weight: 700; font-size: .9rem; text-decoration: none; background: var(--bg-card); border: 1px solid var(--line-strong); } .az-nav a:hover { background: var(--brand-tint); border-color: var(--brand-line); } .az-letter { margin: 34px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--brand-line); scroll-margin-top: 78px; } .az-letter .az-count { font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-left: 8px; } .az-list { list-style: none; margin: 0; padding: 0; } .az-list li { padding: 11px 0; border-bottom: 1px solid var(--line); } .az-list .az-name { font-weight: 700; } .az-list .az-alt { color: var(--ink-2); } .az-list .az-spec { color: var(--ink-3); font-size: .86rem; } .az-list .az-desc { margin: 3px 0 0; color: var(--ink-2); font-size: .94rem; max-width: 78ch; } .az-list .az-mark { margin: 2px 0 0; font-size: .8rem; font-weight: 600; color: var(--ink-3); font-style: italic; } .az-list .az-mark.none { color: var(--warn-ink); font-style: normal; } .az-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); } .az-specs li { padding: 6px 0; } .az-specs a { font-weight: 600; } .az-specs span { display: block; color: var(--ink-3); font-size: .86rem; } .az-top { display: inline-block; margin-top: 10px; font-size: .88rem; } @media print { .az-nav, .az-back, .az-top { display: none; } } /* ---------- Light and dark logo ---------- The wordmark is half teal or plum and half navy, and the navy half sits at about 1.4:1 on the dark background - "My" and "Leaflet" and the strapline simply vanish, leaving the coloured half floating. There is no CSS fix for ink baked into a raster, so there are two files per mode and the browser shows one. The pair carries the same alt text: only one is ever rendered, so exactly one accessible name reaches a screen reader. Print always takes the light file, because paper is white whatever the screen was. */ .logo-swap > .theme-dark { display: none; } .logo-swap > .theme-light { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-swap > .theme-light { display: none; } :root:not([data-theme="light"]) .logo-swap > .theme-dark { display: block; } } :root[data-theme="dark"] .logo-swap > .theme-light { display: none; } :root[data-theme="dark"] .logo-swap > .theme-dark { display: block; } @media print { .logo-swap > .theme-light { display: block !important; } .logo-swap > .theme-dark { display: none !important; } } .chooser-logo { display: inline-block; }