/* ═══════════════════════════════════════════════════════ METHODOLOGY.CSS — Page-specific styles for /methodology/ Anchor: /about/ + info-page.css vocabulary. Reuses tokens / nav / components / layout + info-page.css. Page-specific classes prefixed `meth-`. The page presents two dense clinical references (Guidance UTI and Guidance Prostatitis) behind a sticky test switcher. Progressive enhancement: with no JS both panels render stacked (full content for print / SEO / no-JS). With JS the `has-js` class on hides the inactive panel and the switcher behaves as a tablist. ═══════════════════════════════════════════════════════ */ /* ── HERO ACTIONS ──────────────────────────────────────── Two "view sample report" buttons sit under the hero title. Wrap on mobile, side-by-side on wider screens. */ .meth-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-top: var(--gap-lg); } /* Placeholder button — present but not yet wired to a PDF. Visibly muted + non-interactive until the asset lands. */ .meth-btn-placeholder { opacity: 0.55; pointer-events: none; cursor: default; } /* ── STICKY TEST SWITCHER ──────────────────────────────── Standalone sticky bar (the tier-3 local-nav is desktop-only, so the switcher lives in the page flow to work on mobile too). Sits below the fixed site nav; z-index under the nav (1000). */ .meth-switch { position: sticky; top: 64px; /* under the 64px mobile nav bar */ z-index: 900; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid rgba(57, 55, 143, 0.10); box-shadow: 0 1px 0 rgba(57, 55, 143, 0.04); } @media (min-width: 1024px) { .meth-switch { top: 88px; /* under the collapsed desktop local-nav */ } } .meth-switch__inner { display: flex; gap: 6px; justify-content: center; padding-top: 10px; padding-bottom: 10px; } .meth-switch__btn { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--color-purple-mid); background: transparent; border: 1px solid transparent; border-radius: var(--radius-full); padding: 9px 20px; cursor: pointer; white-space: nowrap; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .meth-switch__btn sup { font-size: 0.55em; vertical-align: super; } .meth-switch__btn:hover { color: var(--color-purple); background: rgba(57, 55, 143, 0.06); } .meth-switch__btn.is-active { color: #ffffff; background: var(--color-coral); border-color: var(--color-coral); box-shadow: 0 6px 16px -6px rgba(232, 32, 101, 0.5); } .meth-switch__btn:focus-visible { outline: 2px solid var(--color-purple); outline-offset: 2px; } /* ── TEST PANELS ───────────────────────────────────────── Each test is a tabpanel. No-JS: both stack (visible). With JS (`has-js`) only the active panel shows. */ .meth-test { padding: var(--gap-2xl) 0 var(--gap-3xl); background: #ffffff; } .has-js .meth-test:not(.is-active) { display: none; } /* No-JS fallback: a hairline divider + label between stacked panels */ .meth-test + .meth-test { border-top: 1px solid rgba(57, 55, 143, 0.12); } .has-js .meth-test + .meth-test { border-top: 0; } .meth-test__inner { max-width: 760px; } .meth-test__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-purple); text-align: center; margin: 0 0 var(--gap-2xl); } .meth-test__title sup { font-size: 0.4em; vertical-align: super; font-weight: 500; } /* ── CONTENT BLOCK ─────────────────────────────────────── A titled chunk of reference content. */ .meth-block { margin: 0 0 var(--gap-2xl); } .meth-block:last-child { margin-bottom: 0; } .meth-block__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-purple); text-align: center; margin: 0 0 var(--gap-md); } .meth-block p { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--on-surface); margin: 0 0 var(--gap-md); } .meth-block p:last-child { margin-bottom: 0; } .meth-block a { color: var(--color-coral-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s ease; } .meth-block a:hover { color: var(--color-coral); } /* Numbered "assay components" list — restore decimal markers (base.css resets ul, ol to list-style:none site-wide). */ .meth-block ol { list-style: decimal; margin: 0 0 var(--gap-md); padding-left: 1.4em; } .meth-block ol li { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--on-surface); margin-bottom: var(--gap-sm); } /* Sub-label inside a block (e.g. "ESBL Phenotype Assay") */ .meth-sublabel { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-coral-dark); margin: var(--gap-lg) 0 6px; } /* ── SEMI-QUANTITATIVE RANGES ──────────────────────────── Plain bulleted list of cells/mL ranges (verbatim of the original — base.css resets list markers, so restore disc). */ .meth-ranges { list-style: disc; margin: 0 0 var(--gap-md); padding-left: 1.4em; } .meth-ranges li { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--on-surface); margin-bottom: 6px; } /* ── FOOTNOTES ───────────────────────────────────────────*/ .meth-footnote { font-size: 13px !important; line-height: 1.55 !important; color: var(--on-surface-variant) !important; } .meth-footnote em { font-style: italic; } /* ── ACCORDION (heavy reference lists) ─────────────────── Native
. Authored `open` so no-JS / print / SEO see everything. methodology.js collapses the heavy ones on mobile. */ .meth-accordion { border: 1px solid rgba(57, 55, 143, 0.12); border-radius: var(--radius-lg); margin: 0 0 var(--gap-md); background: #ffffff; overflow: hidden; } .meth-accordion > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); padding: 14px 18px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-purple); background: rgba(57, 55, 143, 0.04); transition: background 0.2s ease; } .meth-accordion > summary::-webkit-details-marker { display: none; } .meth-accordion > summary:hover { background: rgba(57, 55, 143, 0.08); } .meth-accordion > summary::after { content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--color-coral); border-bottom: 2px solid var(--color-coral); transform: rotate(45deg); transition: transform 0.2s ease; } .meth-accordion[open] > summary::after { transform: rotate(-135deg); } .meth-accordion__body { padding: var(--gap-md) 18px var(--gap-lg); } /* On desktop, keep heavy lists open and non-collapsible (always reference-visible); hide the toggle affordance. */ @media (min-width: 1024px) { .meth-accordion > summary { cursor: default; pointer-events: none; } .meth-accordion > summary::after { display: none; } } /* ── ORGANISM / GENE LISTS ─────────────────────────────── Responsive multi-column. 1 col mobile → up to 3 on desktop. */ .meth-organisms { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px 24px; } @media (min-width: 480px) { .meth-organisms { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .meth-organisms { grid-template-columns: repeat(3, 1fr); } } .meth-organisms li { font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--on-surface); padding-left: 18px; position: relative; } .meth-organisms li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--color-coral); border-radius: 50%; } .meth-organisms li em, .meth-organisms li i { font-style: italic; } /* Simple single-column bullet list (bacterial groups, etc.) */ .meth-list { list-style: disc; margin: 0 0 var(--gap-md); padding-left: 1.4em; } .meth-list li { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--on-surface); margin-bottom: 6px; } .meth-list li em { font-style: italic; } /* ── GENE GROUP LINES ──────────────────────────────────── Resistance-gene classes: a bold class label + comma list. */ .meth-genes p { font-size: 15px; margin-bottom: 10px; } .meth-genes strong { color: var(--color-purple); } /* ── REFERENCES ──────────────────────────────────────────*/ .meth-refs { list-style: decimal; margin: 0; padding-left: 1.6em; } .meth-refs li { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--on-surface-variant); margin-bottom: 10px; } .meth-refs li em { font-style: italic; } .meth-refs li a { word-break: break-word; } /* ── CALLOUT (Candida auris note) ────────────────────────*/ .meth-callout { background: linear-gradient(180deg, rgba(232, 32, 101, 0.05) 0%, rgba(143, 202, 235, 0.06) 100%); border: 1px solid rgba(232, 32, 101, 0.14); border-radius: var(--radius-lg); padding: var(--gap-lg); } .meth-callout__title { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--color-coral-dark); margin: 0 0 var(--gap-sm); } .meth-callout p { margin: 0; font-size: 15px; }