/** * @file styles.css * @description Stylesheet for the Holdfast marketing page. Follows the NHS Digital Service * Manual colour/type/spacing conventions (see docs/nhs-brand.md) without using the NHS logo. */ :root { /* Brand chips - deliberately theme-invariant. These back solid, self-contained backgrounds (header bar, footer, badge pills) that always pair with a fixed white/ink foreground below, so they don't need a dark-mode variant. */ --color-blue: #005eb8; --color-blue-dark: #003087; --color-green: #007f3b; --color-red: #d5281b; --color-amber: #ed8b00; --color-white: #ffffff; /* Fixed dark ink - pairs with the fixed light backgrounds above (audience bar's active pill, the amber callout) regardless of theme, as opposed to --color-text below which flips for dark mode. */ --color-ink: #212b32; /* Fixed light tint - for hover states on the always-blue header (nav-cta), as opposed to --color-tint below which flips for dark mode. */ --color-tint-fixed: #f0f4f5; /* Theme-aware surfaces, text and links - overridden under [data-theme="dark"] below. */ --color-text: #212b32; --color-text-muted: #4c6272; --color-border: #d8dde0; --color-tint: #f0f4f5; --color-surface: #ffffff; --color-link: #005eb8; --color-link-hover: #7c2855; --color-link-visited: #330072; --color-green-text: #007f3b; --color-red-text: #d5281b; --color-amber-text: #a35a00; --focus-yellow: #ffeb3b; --max-width: 1100px; color-scheme: light; } /* Private-audience theme: overrides the header/nav/secondary-button accent from NHS blue to a distinct teal so a visitor on private.html never mistakes the page for an NHS-branded one. Every rule below already reads var(--color-blue)/var(--color-blue-dark), so this single override reskins the whole page - no component rule needs its own private-mode variant. Theme-invariant like the brand chips above, so it composes with light/dark mode unchanged. */ body.theme-private { --color-blue: #0b6e6e; --color-blue-dark: #084f4f; } /* Dark theme - applied via `data-theme="dark"` on , set before first paint by the inline script in (reads localStorage, falling back to the OS `prefers-color-scheme`) and toggled at runtime by assets/theme.js. Mirrors the palette already validated for apps/web (see apps/web/src/styles/tokens.css) so the same contrast-audited values back both products. Brand chip colours are intentionally left unset here - see the comment above :root. */ html[data-theme="dark"] { color-scheme: dark; --color-text: #f2f5f6; --color-text-muted: #b8c2c9; --color-border: #66737b; --color-tint: #12181c; --color-surface: #1c252b; --color-link: #5eb1ff; --color-link-hover: #e08fc2; --color-link-visited: #b98fe0; --color-green-text: #3dcc73; --color-red-text: #ff8a7a; --color-amber-text: #ffb84d; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: var(--color-text); background: var(--color-surface); line-height: 1.55; font-size: 16px; } @media (min-width: 641px) { body { font-size: 19px; } } h1, h2, h3 { line-height: 1.2; font-weight: 700; color: var(--color-text); } h1 { font-size: 2.1rem; margin: 0 0 1rem; } h2 { font-size: 1.65rem; margin: 0 0 1.25rem; } h3 { font-size: 1.15rem; margin: 0 0 0.5rem; } p { margin: 0 0 1rem; } a { color: var(--color-link); } a:visited { color: var(--color-link-visited); } a:hover { color: var(--color-link-hover); } a:focus-visible, button:focus-visible { outline: 3px solid var(--focus-yellow); outline-offset: 2px; } img { max-width: 100%; display: block; } /* The English/Welsh toggle relies on the [hidden] attribute to fully remove the inactive language from layout. Without !important, any later class rule that sets its own `display` (.btn, headings inside cards, flex/grid items, etc.) wins the cascade tie and silently shows both languages at once. */ [hidden] { display: none !important; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-surface); color: var(--color-text); padding: 0.75rem 1rem; z-index: 100; } .skip-link:focus { left: 0; } /* Header */ .site-header { background: var(--color-blue); position: sticky; top: 0; z-index: 10; } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .wordmark { color: var(--color-white) !important; font-weight: 700; font-size: 1.4rem; text-decoration: none; } .site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.25rem; } .site-nav a { color: var(--color-white) !important; text-decoration: none; font-size: 0.95rem; } .site-nav a:hover, .site-nav a:focus-visible { text-decoration: underline; } .site-nav a.nav-cta { background: var(--color-white); color: var(--color-blue-dark) !important; padding: 0.4rem 0.9rem; border-radius: 4px; font-weight: 700; } .nav-cta:hover { text-decoration: none !important; background: var(--color-tint-fixed); } /* Language toggle */ .lang-toggle { display: flex; align-items: center; gap: 0.4rem; } .lang-toggle-option { background: none; border: none; color: var(--color-white); font-size: 0.9rem; font-weight: 700; font-family: inherit; padding: 0.3rem 0.5rem; border-radius: 4px; cursor: pointer; text-decoration: underline; } .lang-toggle-option:hover { background: rgba(255, 255, 255, 0.15); } .lang-toggle-option[aria-pressed="true"] { background: var(--color-white); color: var(--color-blue-dark); text-decoration: none; cursor: default; } .lang-toggle-option[aria-pressed="true"]:hover { background: var(--color-white); } .lang-toggle-divider { color: var(--color-white); opacity: 0.6; } /* Audience bar - a persistent choice between the NHS and private-healthcare pitch, shown under the main header on every page so a visitor always knows which one they're reading and can switch without hunting for a link in the body copy. Background is var(--color-ink), a fixed dark neutral, so it reads the same regardless of which page's accent colour (NHS blue or private teal) is active, or which light/dark theme is active - a stable wayfinding element, not themed content. */ .audience-bar { background: var(--color-ink); padding: 0.5rem 0; } .audience-bar-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; } .audience-bar-option { color: var(--color-white) !important; text-decoration: none !important; font-size: 0.85rem; font-weight: 700; padding: 0.3rem 0.85rem; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.35); } .audience-bar-option:hover, .audience-bar-option:focus-visible { border-color: var(--color-white); } .audience-bar-inner .lang-toggle { margin-left: auto; } .audience-bar-option[aria-current="page"] { background: var(--color-white); color: var(--color-ink) !important; border-color: var(--color-white); cursor: default; } @media (max-width: 619px) { .audience-bar-inner { justify-content: center; } .audience-bar-inner .lang-toggle { margin-left: 0; width: 100%; justify-content: center; } .hero-actions { justify-content: center; } } /* Buttons */ .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 4px; font-weight: 700; text-decoration: none; border: 2px solid transparent; } .btn-primary { background: var(--color-green); color: var(--color-white) !important; } .btn-primary:hover, .btn-primary:focus-visible { background: #00602c; } .btn-secondary { background: var(--color-surface); color: var(--color-link) !important; border-color: var(--color-link); } .btn-secondary:hover, .btn-secondary:focus-visible { background: var(--color-tint); } /* Hero */ .hero { background: linear-gradient(180deg, var(--color-tint) 0%, var(--color-surface) 100%); padding: 3rem 0; scroll-margin-top: 50px; } .hero-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 900px) { .hero-inner { grid-template-columns: 1.15fr 0.85fr; } } .eyebrow { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; font-weight: 700; color: var(--color-link); margin-bottom: 0.5rem; } .lead { font-size: 1.1rem; color: var(--color-text-muted); max-width: 62ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 1rem; } .hero-note { font-size: 0.9rem; color: var(--color-text-muted); max-width: 55ch; } .hero-media { display: flex; justify-content: center; } /* Clinical-first hero: copy on top, wide dashboard screenshot beneath */ .hero--stacked .hero-inner { grid-template-columns: 1fr; } .hero--stacked .hero-copy { max-width: 62rem; } .hero-media--wide { width: 100%; } .hero-media--wide .browser-shot { width: 100%; max-width: 1100px; height: auto; } .phone-shot { max-width: 260px; width: 100%; border-radius: 18px; border: 6px solid var(--color-text); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18); } /* Sections */ .section { padding: 3.5rem 0; scroll-margin-top: 50px; } .section-tint { background: var(--color-tint); } .section-body { color: var(--color-text-muted); max-width: 75ch; } .section-body-full { max-width: none; } /* Stats */ .stat-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2rem; } @media (min-width: 641px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } } .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-blue); border-radius: 6px; padding: 1.5rem; } .stat-figure { font-size: 2.25rem; font-weight: 700; color: var(--color-link); margin: 0 0 0.4rem; line-height: 1; } .stat-label { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; } .stat-source { margin: 0.9rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.75rem; text-align: right; } .stat-source a { color: inherit; } /* Flow diagram */ .flow-diagram { margin: 2rem 0; } .flow-row { display: flex; justify-content: center; } .flow-row-teams { gap: 1.25rem; flex-wrap: wrap; } .flow-row-teams + .flow-row-teams { margin-top: 1.25rem; } .flow-teams-panel { background: var(--color-tint); border: 1px dashed var(--color-border); border-radius: 10px; padding: 1.5rem 1.25rem 1.25rem; } .flow-teams-panel-label { display: block; text-align: center; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; font-weight: 700; color: var(--color-text-muted); margin-bottom: 1rem; } .flow-arrow { text-align: center; color: var(--color-link); font-size: 1.5rem; line-height: 1; margin: 0.35rem 0; } .flow-node { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 5px solid var(--color-blue); border-radius: 6px; padding: 1.1rem 1.4rem; max-width: 620px; width: 100%; } .flow-row-teams .flow-node { max-width: 320px; } .flow-node-tenant { border-left-color: var(--color-blue-dark); } .flow-node-icb { border-left-color: var(--color-blue); } .flow-node-loop { border-left-color: var(--color-green); max-width: 720px; } .flow-kicker { display: block; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; font-weight: 700; color: var(--color-link); margin-bottom: 0.25rem; } .flow-node strong { display: block; font-size: 1.05rem; margin-bottom: 0.4rem; } .flow-desc { display: block; color: var(--color-text-muted); font-size: 0.92rem; } /* Fixed pale-yellow background and ink text regardless of theme - like the brand chips in :root, a self-contained callout that doesn't need a dark-mode variant. */ .callout { background: #fff9c4; color: var(--color-ink); border: 1px solid var(--color-amber); border-radius: 6px; padding: 1.25rem 1.5rem; max-width: 75ch; margin-left: auto; margin-right: auto; margin-top: 2rem; margin-bottom: 2rem; text-align: center; } .callout p { margin: 0; } /* Pathways */ .pathway-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0 2.5rem; } @media (min-width: 641px) { .pathway-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 990px) { .pathway-grid { grid-template-columns: repeat(3, 1fr); } } .pathway-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 1.5rem; } .pathway-card h3 { margin-bottom: 0.65rem; } /* Prominent hand-off to the full assessment library, sitting directly under the pathway cards it summarises. */ .assessments-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; background: var(--color-surface); border: 2px solid var(--color-link); border-radius: 8px; padding: 1.5rem 1.75rem; margin: 0 0 3rem; } body.theme-private .assessments-cta { border-color: var(--color-blue); } .assessments-cta-copy { flex: 1 1 22rem; } .assessments-cta-copy h3 { font-size: 1.3rem; } .assessments-cta-copy p { color: var(--color-text-muted); margin: 0; max-width: 62ch; } .pathway-followup { margin-bottom: 2.5rem; } .two-col--spaced { margin-top: 1rem; } .pathway-card p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; } /* Instrument / assessment library (flows.html) - reuses the persona colour variables defined below for the map, so respondent type reads consistently whether you're looking at the map or this grid. */ .instrument-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 1.25rem 0 0; padding: 0; font-size: 0.85rem; color: var(--color-text-muted); } .instrument-legend li { display: flex; align-items: center; gap: 0.4rem; } .instrument-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--clr, var(--color-blue)); } .instrument-grid { margin-top: 1rem; } .instrument-card h3 { margin: 0 0 0.35rem; } .instrument-card p { margin-bottom: 0.85rem; } .instrument-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .instrument-pill { font-size: 0.78rem; font-weight: 600; padding: 0.28rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--clr, var(--color-blue)) 12%, white); color: var(--clr, var(--color-blue-dark)); border: 1px solid color-mix(in srgb, var(--clr, var(--color-blue)) 35%, white); white-space: nowrap; } /* Assessment library table (assessments.html) */ .instrument-table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--color-border); border-radius: 8px; } .instrument-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--color-surface); } .instrument-table th, .instrument-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); vertical-align: top; } .instrument-table thead th { background: var(--color-tint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); white-space: nowrap; } .instrument-table tbody th[scope="row"] { font-weight: 700; white-space: nowrap; } .instrument-table td { color: var(--color-text-muted); } .instrument-table tbody tr:last-child td, .instrument-table tbody tr:last-child th { border-bottom: none; } .instrument-table .instrument-group-row td { background: var(--color-tint); color: var(--color-text); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.5rem 1rem; } .instrument-table .instrument-dot { margin-right: 0.4rem; } /* Balanced variant: give the description column most of the width, instead of letting a nowrap row heading dictate the split. */ .instrument-table--balanced { table-layout: fixed; } .instrument-table--balanced tbody th[scope="row"] { white-space: normal; width: 26%; } .instrument-table--balanced td { width: auto; } /* Security & compliance */ .framework-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0 2.5rem; } @media (min-width: 700px) { .framework-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1150px) { .framework-grid { grid-template-columns: repeat(3, 1fr); } .framework-grid-3col { grid-template-columns: repeat(3, 1fr); } } .framework-card { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-blue-dark); border-radius: 6px; padding: 1.5rem; display: flex; flex-direction: column; } .framework-card p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; } .framework-card p + p { margin-top: 0.9rem; } .framework-card p:last-child { margin-top: auto; padding-top: 0.9rem; } .compliance-shot { margin-bottom: 2.5rem; } /* Two-column screenshot section */ .two-col { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } /* Sit the screenshot at the top of its column rather than floating it in the vertical centre next to a taller block of copy. */ .two-col--top { align-items: start; } @media (min-width: 900px) { .two-col { grid-template-columns: 1.1fr 0.9fr; } } /* Text-heavy variant: give the copy the wider column and let a shorter, stacked media column stick alongside it while the copy scrolls, instead of one image floating in a tall half-empty column. */ .two-col--text-lead { align-items: start; } @media (min-width: 900px) { .two-col--text-lead { grid-template-columns: 0.82fr 1.18fr; gap: 3rem; } .two-col--text-lead .two-col-media { position: sticky; top: 5rem; } } /* Sub-headed feature blocks inside a two-column copy panel: pull each h3 away from the paragraph above it so the list of points reads as distinct items, not a wall of text. */ .two-col-copy h3 { margin-top: 1.75rem; } .two-col-copy > :first-child { margin-top: 0; } .two-col-media--stack { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; } .two-col-media--stack .browser-shot { width: 100%; } .browser-shot { border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } /* Roles */ .role-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 641px) { .role-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 990px) { .role-grid { grid-template-columns: repeat(3, 1fr); } .role-grid-2col { grid-template-columns: repeat(2, 1fr); } } .role-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 1.25rem; } .role-card p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; } /* About */ .about-inner { max-width: 80ch; } .about-inner h3 { margin-top: 2rem; } .flows-teaser { text-align: center; margin-top: 2rem; } /* Flows page */ .flows-hero { padding-top: 3rem; padding-bottom: 2.5rem; } .jump-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .jump-nav a { font-size: 0.9rem; text-decoration: none; } .jump-nav a:hover, .jump-nav a:focus-visible { text-decoration: underline; } /* Accessibility utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body { counter-reset: scenario; } /* ============================================================ System map - interactive "transit map" diagram ============================================================ */ /* Persona colour tokens - one custom property per role, consumed by .map-line / .map-node-fill / .map-node-ring below. Keeping colour and geometry separate lets one class combo (persona + role) drive fill, stroke and legend swatches from a single source of truth. */ .persona-admin { --clr: #64748b; } .persona-patient { --clr: #0e7c86; } .persona-carer { --clr: #8952d1; } .persona-support-worker { --clr: #1f6fd6; } .persona-clinician { --clr: var(--color-green); } .persona-cso { --clr: #7a1f2b; } .persona-commissioner { --clr: #6b7280; } .persona-system { --clr: #334155; } .persona-hub { --clr: #111827; } .persona-risk { --clr: var(--color-red); } .persona-wait { --clr: var(--color-amber); } .map-toolbar { margin: 1.5rem 0 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; } .map-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; } .map-filter-label { font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); margin-right: 0.15rem; } .chip { font: inherit; font-size: 0.82rem; font-weight: 700; background: var(--color-surface); border: 1.5px solid var(--color-border); color: var(--color-text); border-radius: 999px; padding: 0.35rem 0.85rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .chip:hover { border-color: var(--color-blue); } .chip[aria-pressed="true"] { background: var(--color-blue-dark); border-color: var(--color-blue-dark); color: var(--color-white) !important; } .map-zoom { display: flex; justify-content: flex-end; gap: 0.4rem; } .map-zoom button { font: inherit; font-weight: 700; width: 2.1rem; height: 2.1rem; border-radius: 6px; border: 1.5px solid var(--color-border); background: var(--color-surface); cursor: pointer; } .map-zoom button:hover { border-color: var(--color-blue); } #map-zoom-reset { width: auto; padding: 0 0.75rem; font-size: 0.8rem; } .map-frame { display: flex; flex-direction: column; gap: 1.25rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); padding: 0.75rem; } .map-scroll { overflow: auto; border-radius: 8px; background: var(--color-surface); max-height: 70vh; } .system-map { display: block; width: 100%; min-width: 900px; height: auto; transform-origin: top left; transition: transform 0.2s ease; } /* Zone (region) backdrops */ .map-zone-fill { opacity: 0.6; } .zone-admin { fill: rgba(100, 116, 139, 0.12); stroke: rgba(100, 116, 139, 0.4); } .zone-patient { fill: rgba(14, 124, 134, 0.1); stroke: rgba(14, 124, 134, 0.32); } .zone-green { fill: rgba(31, 157, 85, 0.1); stroke: rgba(31, 157, 85, 0.32); } .zone-red { fill: rgba(213, 40, 27, 0.08); stroke: rgba(213, 40, 27, 0.3); } .zone-amber { fill: rgba(237, 139, 0, 0.1); stroke: rgba(237, 139, 0, 0.32); } .zone-blue { fill: rgba(31, 111, 214, 0.08); stroke: rgba(31, 111, 214, 0.3); } .zone-slate { fill: rgba(51, 65, 85, 0.08); stroke: rgba(51, 65, 85, 0.3); } .map-zone-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; fill: var(--color-text-muted); } /* Lines */ .map-line { fill: none; stroke: var(--clr); stroke-linecap: round; stroke-linejoin: round; } .line-highway { stroke-width: 5.5; } .line-standard { stroke-width: 3; } .line-side { stroke-width: 2.2; stroke-dasharray: 1 7; } .line-auto { stroke-width: 1.6; stroke-dasharray: 6 5; opacity: 0.6; } .map-loop-label { font-size: 11px; font-weight: 700; fill: var(--color-green); } /* Nodes */ .map-node { cursor: pointer; } .map-node-fill { fill: var(--clr); } .map-node-ring { fill: var(--color-surface); stroke: var(--clr); stroke-width: 4; } .map-node svg, .map-node use { overflow: visible; } .map-node-icon { stroke: var(--color-white); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .map-node-diamond { fill: var(--clr); } .map-label { font-size: 12px; font-weight: 700; fill: var(--color-text); text-anchor: middle; pointer-events: none; } .map-label-sub { font-size: 10px; font-weight: 400; fill: var(--color-text-muted); text-anchor: middle; pointer-events: none; } .map-node:hover .map-node-fill, .map-node:hover .map-node-diamond, .map-node.map-node-active .map-node-fill, .map-node.map-node-active .map-node-diamond { filter: drop-shadow(0 0 0 2px var(--color-surface)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.35)); } .map-node:focus-visible { outline: 3px solid var(--focus-yellow); outline-offset: 3px; } /* Dim / highlight states, toggled by JS */ .system-map.has-filter .map-el { opacity: 0.15; transition: opacity 0.2s ease; } .system-map.has-filter .map-el.map-match { opacity: 1; } /* Info panel */ .map-info-panel { border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem 1.1rem; background: var(--color-surface); font-size: 0.9rem; min-height: 3.5rem; } .map-info-empty { color: var(--color-text-muted); margin: 0; font-size: 0.88rem; } .map-info-title { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.5rem; } .map-info-swatch { width: 1.3rem; height: 1.3rem; border-radius: 50%; flex-shrink: 0; background: var(--clr); } .map-info-panel h4 { margin: 0; font-size: 1rem; } .map-info-panel p { margin: 0; color: var(--color-text-muted); font-size: 0.88rem; } .map-info-role { display: inline-block; margin-top: 0.6rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); } /* Legend */ .map-legend { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; border-top: 1px solid var(--color-border); padding-top: 1.5rem; } @media (min-width: 700px) { .map-legend { grid-template-columns: repeat(3, 1fr); } } .legend-group h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0 0 0.65rem; } .legend-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .legend-group li { display: flex; align-items: center; font-size: 0.88rem; gap: 0.6rem; } .legend-swatch { width: 1rem; height: 1rem; border-radius: 50%; flex-shrink: 0; background: var(--clr); } .legend-line { display: inline-block; width: 34px; height: 0; border-top: 4px solid var(--color-blue); flex-shrink: 0; } .legend-line.line-standard { border-top-width: 3px; } .legend-line.line-side { border-top-width: 2px; border-top-style: dotted; } .legend-line.line-auto { border-top-width: 2px; border-top-style: dashed; opacity: 0.7; } .legend-shape { flex-shrink: 0; background: var(--color-text-muted); } .legend-shape-circle { width: 1rem; height: 1rem; border-radius: 50%; } .legend-shape-hub { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--color-surface); border: 3px solid var(--color-text-muted); } .legend-shape-diamond { width: 0.8rem; height: 0.8rem; transform: rotate(45deg); } /* Map-linked buttons inside scenario/setup sections */ .map-jump { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; margin: 0.75rem 0 0; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1.5px solid var(--color-link); background: var(--color-surface); color: var(--color-link) !important; cursor: pointer; text-decoration: none; } .map-jump:hover { background: var(--color-tint); } @media (max-width: 640px) { .map-frame { padding: 0.5rem; } } /* Collapsible detail text, tucked under each diagram for anyone who wants the full narrative */ .detail-toggle { margin: 1.25rem 0 0.25rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); padding: 0 1.1rem; } .detail-toggle summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--color-link); padding: 0.85rem 0; list-style: none; } .detail-toggle summary::-webkit-details-marker { display: none; } .detail-toggle summary::before { content: "+"; display: inline-block; width: 1em; text-align: center; } .detail-toggle[open] summary::before { content: "\2212"; } .detail-toggle ol { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--color-text-muted); font-size: 0.92rem; } .detail-toggle li { margin-bottom: 0.6rem; } .detail-toggle li:last-child { margin-bottom: 0; } /* Scenario cards */ .scenario-card { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-blue); border-radius: 8px; padding: 1.75rem 2rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); } html[data-theme="dark"] .scenario-card { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .scenario-green { border-top-color: var(--color-green); } .scenario-red { border-top-color: var(--color-red); } .scenario-amber { border-top-color: var(--color-amber); } .scenario-blue { border-top-color: var(--color-blue); } .scenario-card { counter-increment: scenario; } .scenario-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .scenario-num { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--color-blue-dark); color: var(--color-white); font-weight: 700; font-size: 0.9rem; flex-shrink: 0; } .scenario-num::before { content: counter(scenario); } .scenario-header h3 { margin: 0; } .scenario-header .tag { margin-left: auto; } .scenario-intro { color: var(--color-text-muted); font-size: 0.95rem; margin: 0.75rem 0 0; } .tag { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .tag-green { background: #e3f2e1; color: var(--color-green); } .tag-amber { background: #fff3e0; color: #a35a00; } .tag-red { background: #fbe3e1; color: var(--color-red); } .tag-blue { background: #e3edf7; color: var(--color-blue-dark); } /* Contact */ .contact-inner { text-align: left; } /* Footer */ .site-footer { background: var(--color-blue-dark); color: var(--color-white); padding: 1.5rem 0; } .footer-inner p { margin: 0; font-size: 0.85rem; color: #cddce8; } .footer-inner .footer-links { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; } .footer-links a { color: #cddce8; text-decoration: underline; } .footer-links a:hover, .footer-links a:visited { color: var(--color-white); } /* Research page (research.html) */ .matrix-table th, .matrix-table td { text-align: center; } .matrix-table th:first-child, .matrix-table td:first-child, .matrix-table td:last-child { text-align: left; } .matrix-table td:first-child { font-weight: 700; min-width: 16ch; } .matrix-table td:last-child { min-width: 28ch; color: var(--color-text-muted); font-size: 0.85rem; } .matrix-yes { color: var(--color-green-text); font-weight: 700; } .matrix-partial { color: var(--color-amber-text); font-weight: 700; } .matrix-no { color: var(--color-red-text); font-weight: 700; } .matrix-na { color: var(--color-text-muted); font-size: 0.8rem; } .research-source-list { padding-left: 1.25rem; } .research-source-list li { margin-bottom: 0.4rem; } .content-list { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; } .content-list li { line-height: 1.5; } .content-list li::marker { color: var(--color-text-muted); } /* Mobile navigation - hamburger menu below 750px */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; } .nav-toggle-bar { display: block; width: 24px; height: 2px; margin: 0 auto; background: var(--color-white); transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 939px) { .nav-toggle { display: flex; } .site-nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin-top: 0.25rem; padding: 0.25rem 0 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.25); } .site-nav.is-open { display: flex; } .site-nav a:not([hidden]) { display: block; padding: 0.8rem 0.25rem; font-size: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .site-nav a:not([hidden]):hover, .site-nav a:not([hidden]):focus-visible { text-decoration: none; background: rgba(255, 255, 255, 0.08); } .site-nav a.nav-cta { margin-top: 1rem; padding: 0.75rem 1rem; text-align: center; border-bottom: 0; } .site-nav a.nav-cta:hover { background: var(--color-tint-fixed); } .site-nav .lang-toggle { justify-content: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.25); } .site-nav .theme-toggle { margin: 0.5rem auto 0; } } /* Light/dark theme toggle - icon-only button injected into .site-nav (or directly into .header-inner on pages with no nav) by assets/theme.js, mirroring apps/web's ThemeToggleButton. Sits on the always-coloured header bar, so its icon stays a fixed white regardless of theme, like the other header/nav content. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 4px; background: none; color: var(--color-white); cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.15); } /* ------------------------------------------------------------------------ User guides (guide/) - a docs-style layout: sticky left sidebar listing the guides and the current page's sections, a readable content column with screenshots, step lists and callouts. Reuses the site header/footer and theme tokens so light/dark mode and the private accent both carry over. ------------------------------------------------------------------------ */ .docs-hero { background: var(--color-tint); border-bottom: 1px solid var(--color-border); padding: 2.5rem 0 2rem; } .docs-hero h1 { margin-bottom: 0.5rem; } .docs-hero .lead { margin-bottom: 0; } .docs-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; } @media (min-width: 900px) { .docs-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 3.5rem; padding-top: 2.5rem; } } .docs-sidebar { font-size: 0.92rem; } /* The site header is sticky and 64px tall, so the sidebar sticks below it and headings scroll to rest just under it rather than behind it. */ @media (min-width: 900px) { .docs-sidebar { position: sticky; top: calc(64px + 1.5rem); align-self: start; max-height: calc(100vh - 64px - 3rem); overflow-y: auto; } } .docs-sidebar h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 0 0 0.5rem; } .docs-sidebar h2 + ul { margin-bottom: 1.75rem; } .docs-sidebar ul { list-style: none; margin: 0; padding: 0; } .docs-sidebar li { margin: 0; } .docs-sidebar a { display: block; padding: 0.4rem 0.75rem; border-left: 3px solid transparent; color: var(--color-text); text-decoration: none; border-radius: 0 4px 4px 0; } .docs-sidebar a:visited { color: var(--color-text); } .docs-sidebar a:hover, .docs-sidebar a:focus-visible { background: var(--color-tint); color: var(--color-link); outline: none; } .docs-sidebar a[aria-current="page"] { border-left-color: var(--color-blue); color: var(--color-link); font-weight: 700; background: var(--color-tint); } .docs-sidebar ul ul a { padding-left: 1.5rem; font-size: 0.88rem; color: var(--color-text-muted); } .docs-sidebar ul ul a.is-active { color: var(--color-link); border-left-color: var(--color-blue); } /* On small screens the sidebar collapses into a "Guides" disclosure so the content is reachable without scrolling past two lists. */ .docs-sidebar details { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.5rem 0.75rem; background: var(--color-surface); } .docs-sidebar summary { cursor: pointer; font-weight: 700; padding: 0.25rem 0; } .docs-sidebar details > *:not(summary) { margin-top: 0.75rem; } @media (min-width: 900px) { .docs-sidebar details { border: 0; padding: 0; background: none; } .docs-sidebar summary { display: none; } .docs-sidebar details > *:not(summary) { margin-top: 0; } } .docs-content { min-width: 0; max-width: 78ch; } .docs-content > section + section { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); } .docs-content h2 { font-size: 1.5rem; scroll-margin-top: calc(64px + 1.5rem); } .docs-content h3 { margin-top: 2rem; scroll-margin-top: calc(64px + 1.5rem); } .docs-content > section { scroll-margin-top: calc(64px + 1.5rem); } .docs-content p, .docs-content li { color: var(--color-text); } .docs-content ul, .docs-content ol { padding-left: 1.4rem; margin: 0 0 1rem; } .docs-content li { margin-bottom: 0.45rem; } .docs-content li > ul { margin-top: 0.4rem; } /* Inline reference to a control as it appears on screen ("Acknowledge"). */ .ui { display: inline-block; padding: 0.05rem 0.4rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-tint); font-size: 0.9em; font-weight: 600; white-space: nowrap; } /* Screenshots */ .docs-figure { margin: 1.5rem 0 2rem; } .docs-figure img { width: 100%; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); background: var(--color-surface); } .docs-figure figcaption { margin-top: 0.6rem; font-size: 0.88rem; color: var(--color-text-muted); } /* Numbered step lists */ .docs-steps { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; counter-reset: docs-step; } .docs-steps > li { position: relative; padding-left: 2.75rem; margin-bottom: 1rem; counter-increment: docs-step; } .docs-steps > li::before { content: counter(docs-step); position: absolute; left: 0; top: -0.1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--color-blue); color: var(--color-white); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; } .docs-steps > li > strong:first-child { display: block; margin-bottom: 0.15rem; } /* Callouts */ .docs-note { border-left: 4px solid var(--color-blue); background: var(--color-tint); border-radius: 0 6px 6px 0; padding: 0.9rem 1.1rem; margin: 1.25rem 0 1.5rem; } .docs-note p:last-child { margin-bottom: 0; } .docs-note > strong:first-child { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-link); margin-bottom: 0.3rem; } .docs-note--warn { border-left-color: var(--color-amber); } .docs-note--warn > strong:first-child { color: var(--color-amber-text); } .docs-note--safety { border-left-color: var(--color-red); } .docs-note--safety > strong:first-child { color: var(--color-red-text); } /* Inline status badges, matching the app's RED / AMBER / GREEN pills. */ .docs-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: var(--color-white); vertical-align: middle; } .docs-badge--red { background: var(--color-red); } .docs-badge--amber { background: var(--color-amber); color: var(--color-ink); } .docs-badge--green { background: var(--color-green); } .docs-badge--grey { background: var(--color-text-muted); } /* Definition-style tables (what a column / badge / status means). */ .docs-table-wrap { overflow-x: auto; margin: 1.25rem 0 1.5rem; border: 1px solid var(--color-border); border-radius: 8px; } .docs-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--color-surface); } .docs-table th, .docs-table td { text-align: left; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--color-border); vertical-align: top; } .docs-table thead th { background: var(--color-tint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); white-space: nowrap; } .docs-table tbody th[scope="row"] { font-weight: 700; white-space: nowrap; } .docs-table tbody tr:last-child th, .docs-table tbody tr:last-child td { border-bottom: none; } /* Role cards on the guides overview page. */ .docs-role-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0 2rem; } @media (min-width: 641px) { .docs-role-grid { grid-template-columns: repeat(3, 1fr); } } .docs-role-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-blue); border-radius: 6px; padding: 1.25rem; text-decoration: none; color: var(--color-text); } .docs-role-card:visited { color: var(--color-text); } .docs-role-card:hover, .docs-role-card:focus-visible { border-color: var(--color-blue); color: var(--color-text); } .docs-role-card h3 { color: var(--color-link); margin-bottom: 0.4rem; } .docs-role-card p { margin: 0 0 0.75rem; color: var(--color-text-muted); font-size: 0.95rem; flex-grow: 1; } .docs-role-card span { font-weight: 700; color: var(--color-link); } /* Previous / next page links at the foot of each guide. */ .docs-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .docs-pager a { display: inline-flex; flex-direction: column; padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-radius: 6px; text-decoration: none; min-width: 12rem; } .docs-pager a:hover, .docs-pager a:focus-visible { border-color: var(--color-blue); } .docs-pager a small { color: var(--color-text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .docs-pager a.docs-pager__next { margin-left: auto; text-align: right; } /* ROI calculator (roi-calculator.html) */ .roi-presets { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; } .roi-preset-btn { background: var(--color-surface); color: var(--color-link); border: 1px solid var(--color-link); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .roi-preset-btn:hover, .roi-preset-btn:focus-visible { background: var(--color-tint); } .roi-form { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-bottom: 1rem; } @media (min-width: 641px) { .roi-form { grid-template-columns: repeat(2, 1fr); } } .roi-field label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; } .roi-field input, .roi-field select { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); color: var(--color-text); font-size: 0.95rem; } .roi-field-note { display: block; color: var(--color-text-muted); font-size: 0.8rem; margin-top: 0.25rem; } .roi-checkbox-group { display: flex; flex-direction: column; gap: 0.4rem; } .roi-checkbox-group label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; font-size: 0.9rem; } .roi-checkbox-group input { width: auto; } .roi-details { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.9rem 1.1rem; margin-bottom: 1.5rem; } .roi-details summary { font-weight: 700; cursor: pointer; } .roi-details[open] summary { margin-bottom: 1rem; } .roi-results { margin-top: 2.5rem; } .roi-assumptions { text-align: left; } .roi-assumptions ul { margin: 0.5rem 0 0; padding-left: 1.2rem; } .roi-assumptions li { margin-bottom: 0.3rem; }