/* Navigate storefront styles. * * Product register: the user is mid-task, often in a hurry, sometimes on a phone in a * waiting room. The interface should disappear into finding a clinician. * * Per-deployment identity arrives as CSS custom properties set on by the * template. Nothing below hard-codes a brand colour, so a new storefront is a theme * record and not a stylesheet. * * The data is text-only — no photos, no bios, no availability. So the design is * deliberately text-forward rather than a photo directory with holes in it: the name is * the largest thing on the row, and everything else supports scanning. */ :root { --step--1: 0.8125rem; --step-0: 0.9375rem; --step-1: 1.0625rem; --step-2: 1.25rem; --step-3: 1.5rem; --step-4: 1.875rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --radius: 6px; --radius-lg: 10px; /* Semantic scale so no rule ever invents a z-index. */ --z-sticky: 100; --z-dropdown: 200; --z-toast: 400; --ease: cubic-bezier(0.22, 1, 0.36, 1); --fast: 160ms; --medium: 220ms; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: var(--step-0); line-height: 1.5; font-feature-settings: "cv05" 1, "ss01" 1; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; letter-spacing: -0.014em; } a { color: inherit; } /* One focus treatment everywhere. Visible against both the light surface and the ink masthead, which is why it is an outline with an offset rather than a background. */ :where(a, button, input, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); } .skip-link { position: absolute; left: var(--space-4); top: -3rem; z-index: var(--z-toast); background: var(--accent); color: var(--accent-contrast); padding: var(--space-2) var(--space-4); border-radius: var(--radius); transition: top var(--fast) var(--ease); } .skip-link:focus { top: var(--space-4); } /* ---------- masthead ---------- */ .masthead { background: var(--masthead-bg); color: var(--masthead-ink); border-bottom: 1px solid var(--line); } .masthead__inner { max-width: 78rem; margin: 0 auto; padding: var(--space-4) var(--space-5); display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; } .masthead__logo { font-size: var(--step-2); font-weight: 650; letter-spacing: -0.02em; text-decoration: none; } .masthead__tagline { font-size: var(--step--1); opacity: 0.72; } .masthead__switch { margin-left: auto; font-size: var(--step--1); opacity: 0.72; text-decoration: none; } .masthead__switch:hover { opacity: 1; } /* ---------- search ---------- */ .searchbar { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: var(--z-sticky); } .searchbar__inner { max-width: 78rem; margin: 0 auto; padding: var(--space-4) var(--space-5); display: flex; gap: var(--space-3); } .searchbar__field { flex: 1; display: flex; align-items: center; gap: var(--space-3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0 var(--space-4); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } .searchbar__field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent); } .searchbar__field svg { flex: none; color: var(--ink-muted); } .searchbar input { flex: 1; border: 0; background: none; padding: var(--space-3) 0; font: inherit; color: inherit; min-width: 0; } .searchbar input:focus { outline: none; } /* Placeholders must clear 4.5:1 like any other text — the default muted grey does not. */ .searchbar input::placeholder { color: var(--ink-muted); opacity: 1; } .button { /* Set explicitly because .button is used on both