/* ========================================================================= NHS Patient Hub — styles.css "Refined visual storytelling": calm, spacious, high-end (Monzo/Revolut feel) built strictly on the OFFICIAL NHS palette + WCAG 2.2 AA rules. Built to ALIGN WITH the NHS Digital Service Manual + WCAG 2.2 AA — not an accredited/branded NHS product. Logo here is a placeholder; real NHS identity use requires brand permission. Contrast ratios below were computed against AA (4.5:1 normal text); confirm in a formal audit. Light-only by design: the NHS Service Manual specifies a light UI (NHS Pale Grey body, white cards). `color-scheme: light` keeps native form controls light. ========================================================================= */ :root { /* ---- Official NHS palette ------------------------------------------- */ --nhs-blue: #005EB8; /* Primary. On white ≈ 5.6:1 (AA). */ --nhs-dark-blue: #003087; /* Hover/active for primary. On white ≈ 10.9:1. */ --nhs-bright-blue: #0072CE; /* Accents/links if needed. */ --nhs-black: #212B32; /* Body text. On white ≈ 14.5:1. */ --nhs-grey-1: #4C6272; /* Secondary text. On white ≈ 6.0:1 (AA). */ --nhs-pale-grey: #E8EDEE; /* Page background. */ --nhs-mid-grey: #AEB7BD; /* Borders/dividers (decorative). */ --nhs-white: #FFFFFF; /* Elevated cards. */ --nhs-green: #007F3B; /* Success. On white ≈ 5.1:1 (AA). */ --nhs-red: #DA291C; /* Destructive/error. White-on-red ≈ 4.8:1 (AA). */ --nhs-yellow: #FFEB3B; /* Focus indicator (NHS focus state). */ --nhs-warm-yellow: #FFB81C; /* Reserved (warnings). */ /* Semantic aliases */ --ink: var(--nhs-black); --ink-soft: var(--nhs-grey-1); --line: #D8DDE0; /* hairline on white (≈ subtle, decorative) */ --surface: var(--nhs-white); --canvas: var(--nhs-pale-grey); --primary: var(--nhs-blue); --primary-press: var(--nhs-dark-blue); --focus: var(--nhs-yellow); /* ---- Soft-UI shadows (depth without harsh borders) ------------------ */ --shadow: 0 1px 2px rgba(33,43,50,.06), 0 6px 18px rgba(33,43,50,.08); --shadow-lift: 0 2px 6px rgba(33,43,50,.10), 0 14px 34px rgba(33,43,50,.14); /* ---- Radius / motion / spacing ------------------------------------- */ --radius: 8px; /* cards (per brief) */ --radius-lg: 12px; /* hero container */ --radius-sm: 6px; /* inputs / chips */ --ease: cubic-bezier(.2,.7,.2,1); --tap: 48px; /* minimum touch target (elderly-friendly) */ --font: "Inter", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif; color-scheme: light; } /* ---- Reset -------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } /* The [hidden] attribute MUST always win — author display:flex/grid below would otherwise override the UA [hidden]{display:none} and leak hidden views. */ [hidden] { display: none !important; } body { font-family: var(--font); color: var(--ink); background: var(--canvas); /* Fluid base type: comfortable for older eyes; everything scales from here. */ font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.1875rem); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Skip link (WCAG 2.4.1) — visible only on focus -------------------- */ .skip-link { position: absolute; left: 12px; top: -64px; z-index: 30; padding: 12px 16px; background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; box-shadow: var(--shadow); transition: top .15s var(--ease); } .skip-link:focus-visible { top: 12px; } /* ---- Global focus indicator (WCAG 2.2 — keyboard navigation) ----------- Never `outline:none` without a high-contrast replacement. NHS-style focus: a black inner ring + yellow outer ring, so it's visible on white, blue, or any coloured surface. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--nhs-yellow); outline-offset: 3px; box-shadow: 0 0 0 3px var(--nhs-black); border-radius: 4px; } /* The greeting heading is focused programmatically after sign-in only to move the reading position; it is not a control, so suppress the focus ring there. */ #greeting:focus, #greeting:focus-visible { outline: none; box-shadow: none; } /* ---- Layout shell (mobile-first) -------------------------------------- */ .stage { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(20px, 5vw, 44px) clamp(16px, 4vw, 28px); padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); } /* ---- Card (login) ------------------------------------------------------ */ .card { width: 100%; max-width: 520px; margin: 0 auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(26px, 7vw, 44px); animation: rise .4s var(--ease) both; } /* ---- Brand (NHS logo lockup) ------------------------------------------ */ .brand { margin-bottom: 26px; } .brand--inline { margin: 0; } .brand__mark { color: var(--nhs-blue); width: 68px; } /* blue box, white "NHS" */ .brand__mark--sm { width: 52px; } .brand__mark svg { display: block; width: 100%; height: auto; } .brand__trust { margin-top: 12px; font-size: .9375rem; font-weight: 600; color: var(--ink-soft); } /* ---- Type -------------------------------------------------------------- */ .eyebrow { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-bottom: 14px; } .headline { font-size: clamp(2rem, 1.4rem + 3vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); margin-bottom: 18px; } .headline em { font-style: normal; color: var(--nhs-blue); } /* NHS-blue accent */ .lede { font-size: 1.0625rem; color: var(--ink-soft); max-width: 44ch; margin-bottom: 30px; } /* ---- Buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: var(--tap); padding: 14px 22px; border-radius: var(--radius); border: 2px solid transparent; font-family: inherit; font-size: 1.0625rem; font-weight: 600; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } /* Primary — solid NHS blue, white text (≈ 5.6:1) */ .btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow); } .btn--primary:hover { background: var(--primary-press); } /* darker blue */ /* Secondary — outlined */ .btn--ghost { width: auto; min-height: var(--tap); padding: 11px 18px; font-size: 1rem; background: var(--surface); color: var(--nhs-blue); border-color: var(--nhs-blue); } .btn--ghost:hover { background: #eef4fb; } /* Destructive — solid NHS red, white text (≈ 4.8:1) */ .btn--danger { background: var(--nhs-red); color: #fff; } .btn--danger:hover { background: #b71f14; } @media (hover: hover) { .btn--primary:hover, .btn--danger:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); } } .btn:active { transform: translateY(0) scale(.99); } .btn:disabled, .btn[aria-busy="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .btn__chevron { font-size: 1.2rem; line-height: 1; } /* ---- Dev sign-in form -------------------------------------------------- */ .devform { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); } .devform__note { font-size: .8125rem; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .field { display: flex; flex-direction: column; gap: 8px; } .field__label { font-size: 1rem; font-weight: 600; color: var(--ink); } .field__input { min-height: var(--tap); padding: 13px 16px; font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--nhs-mid-grey); border-radius: var(--radius-sm); } .field__input:hover { border-color: var(--nhs-grey-1); } .field__input:focus { border-color: var(--nhs-blue); } /* + focus-visible ring above */ /* ---- Login footnote ---------------------------------------------------- */ .login__legal { margin-top: 22px; font-size: .9375rem; color: var(--ink-soft); max-width: 44ch; } /* ---- Error / alert ----------------------------------------------------- */ .error { margin-top: 18px; padding: 14px 16px; font-size: 1rem; font-weight: 500; color: #fff; background: var(--nhs-red); /* white-on-red ≈ 4.8:1 */ border-radius: var(--radius-sm); } /* ---- Dashboard --------------------------------------------------------- */ .dash { width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; animation: rise .4s var(--ease) both; } .dash__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .dash__bar-actions { display: flex; align-items: center; gap: 14px; } .dash__greeting { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; } /* ---- Proxy switch ------------------------------------------------------ */ .proxy__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); background: none; border: 0; cursor: pointer; color: var(--ink); font: inherit; padding: 6px; border-radius: 10px; } .proxy__track { width: 52px; height: 30px; border-radius: 999px; background: var(--nhs-mid-grey); position: relative; transition: background-color .2s var(--ease); flex: 0 0 auto; } .proxy__thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(33,43,50,.35); transition: transform .2s var(--ease); } .proxy__toggle[aria-checked="true"] .proxy__track { background: var(--nhs-blue); } .proxy__toggle[aria-checked="true"] .proxy__thumb { transform: translateX(22px); } .proxy__text { font-size: 1rem; font-weight: 600; } .proxy-banner { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 500; color: var(--nhs-black); background: #eef4fb; /* pale blue tint */ border-left: 4px solid var(--nhs-blue); } /* Identity-link notice (P9-verification gap / unmatched record). Same NHS-blue treatment as the proxy banner; spaced to sit under the greeting, above the panels. */ .notice { margin: 4px 0 20px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 500; color: var(--nhs-black); background: #eef4fb; /* pale blue tint */ border-left: 4px solid var(--nhs-blue); } /* ---- Idle session warning (shared/elderly-device safety) --------------- */ .idle { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: clamp(18px, 5vw, 26px); border-left: 6px solid var(--nhs-blue); animation: rise .25s var(--ease) both; } .idle__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; } .idle__text { color: var(--ink-soft); margin-bottom: 18px; } .idle__actions { display: flex; gap: 12px; flex-wrap: wrap; } .idle__actions .btn { width: auto; flex: 1 1 auto; } /* ---- Panels (white cards, soft depth) --------------------------------- */ .panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 5vw, 30px); } .panel--primary { border-left: 5px solid var(--nhs-blue); } .panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .panel__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; } .panel__lead { font-size: 1.0625rem; } .wl-procedure { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; } /* ---- Status chip — colour is NOT the only cue (dark text + label) ------ */ .status-chip { font-size: .9375rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--nhs-pale-grey); color: var(--nhs-black); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .status-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--nhs-mid-grey); flex: 0 0 auto; } .status-chip[data-status="ACTIVE"] { background: #e3f2e9; } /* pale green */ .status-chip[data-status="ACTIVE"]::before { background: var(--nhs-green); } .status-chip[data-status="PENDING_CANCELLATION"] { background: #fbe7e5; } /* pale red */ .status-chip[data-status="PENDING_CANCELLATION"]::before { background: var(--nhs-red); } /* ---- Progressive disclosure ------------------------------------------- */ .disclose { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 6px; } .disclose__summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; padding: 8px 2px; } .disclose__summary::-webkit-details-marker { display: none; } .disclose__icon { font-size: 1.5rem; color: var(--nhs-blue); transition: transform .2s var(--ease); line-height: 1; } .disclose[open] .disclose__icon { transform: rotate(45deg); } .disclose__body { padding: 6px 2px 10px; } .disclose__help { margin-top: 12px; color: var(--ink-soft); } .kv__row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); } .kv__row:last-child { border-bottom: 0; } .kv dt { color: var(--ink-soft); } .kv dd { font-weight: 600; text-align: right; } /* ---- Pre-op checklist -------------------------------------------------- */ .checklist { list-style: none; display: flex; flex-direction: column; gap: 12px; } .check { display: flex; align-items: center; gap: 14px; min-height: var(--tap); font-size: 1.0625rem; } .check__box { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .9rem; font-weight: 800; background: var(--nhs-green); color: #fff; /* white tick on green ≈ 5.1:1 */ } .check--todo .check__box { background: transparent; color: transparent; border: 2px solid var(--nhs-mid-grey); } .check--todo .check__text { color: var(--ink-soft); } /* ---- Shared rise transition ------------------------------------------- */ @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---- Larger screens ---------------------------------------------------- */ @media (min-width: 640px) { .card { padding: 48px; } .panel { padding: 32px; } } /* ---- Respect reduced motion ------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---- Windows High Contrast / forced-colors: keep focus + structure ----- */ @media (forced-colors: active) { .btn { border: 2px solid currentColor; } :where(a, button, input, summary, [tabindex]):focus-visible { outline: 3px solid Highlight; } .panel, .card { border: 1px solid currentColor; } .ax-toggle { border: 2px solid currentColor; } } /* ========================================================================= Prehab video module — "cinematic, flat, minimal" on the NHS palette. High-production feel via a dark theatre stage + restraint, NOT clutter. Accessibility first: native controls, toggleable captions + audio description, transcript, AA contrast, reduced-motion honoured globally. ========================================================================= */ .prehab__lead { color: var(--ink-soft); margin: -2px 0 18px; max-width: 52ch; } /* The "theatre": a dark, high-contrast stage with a generous radius. Flat — the film carries the screen; chrome stays out of the way. */ .prehab__stage { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(160deg, #0a1a2f 0%, #04101d 100%); box-shadow: var(--shadow-lift); aspect-ratio: 16 / 9; } .prehab__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; } .prehab__figcaption { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; padding: 30px 18px 12px; color: #fff; font-size: .9375rem; font-weight: 500; background: linear-gradient(to top, rgba(4,16,29,.85), rgba(4,16,29,0)); /* white on dark ≈ AA */ } .prehab__fallback { color: #fff; padding: 16px; } /* Accessibility toggles — flat pills, ≥48px, label + state dot (never colour-only) */ .prehab__controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .ax-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 10px 18px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; color: var(--nhs-blue); background: var(--surface); border: 2px solid var(--nhs-blue); transition: background-color .2s var(--ease), color .2s var(--ease); } .ax-toggle__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; border: 2px solid currentColor; background: transparent; } .ax-toggle[aria-pressed="true"] { background: var(--nhs-blue); color: #fff; } /* white-on-blue ≈ 5.6:1 */ .ax-toggle[aria-pressed="true"] .ax-toggle__dot { background: #fff; border-color: #fff; } .ax-toggle:hover { background: #eef4fb; } .ax-toggle[aria-pressed="true"]:hover { background: var(--primary-press); } .prehab__axnote { margin-top: 10px; min-height: 1.2em; font-size: .9375rem; color: var(--ink-soft); } .prehab__transcript { margin-top: 4px; } @media (min-width: 640px) { .prehab__figcaption { padding: 34px 24px 14px; } } /* ========================================================================= Symptom check-in (CS-03) — review prompt with a hard 999 safety wrapper. ========================================================================= */ .symptom__lead { color: var(--ink-soft); margin: 4px 0 18px; max-width: 52ch; } /* Persistent safety callout — warm border + dark text (AA), never colour-only. */ .safety-note { padding: 14px 16px; margin-bottom: 16px; border-radius: var(--radius-sm); background: #fff4e5; color: var(--nhs-black); border-left: 6px solid var(--nhs-warm-yellow); font-size: 1rem; } .safety-note strong { font-weight: 800; } .symptom__scores { display: grid; gap: 16px; } @media (min-width: 480px) { .symptom__scores { grid-template-columns: 1fr 1fr; } } .field__hint { display: block; font-size: .875rem; font-weight: 500; color: var(--ink-soft); margin-top: 2px; } /*