/* Dentista — site styles. Teal-led clinical palette, shared by the landing page, the privacy policy and the help guide so the three read as one product. */ :root { --teal: #008080; /* primary accent — actions, eyebrows, links */ --teal-bright: #0F9C9C; /* hover */ /* A true shade of the mark, not a colour near it. Sampled from icons/icon-1024.png, the logo teal is exactly #008080 — hue 180.0, saturation 100. The old --teal-deep was hue 180.7, saturation 91: a different colour, which is why the masthead read slightly blue-grey beside the mark. This is the same hue and saturation, darker. */ --teal-deep: #006666; /* grounded areas: header, footer */ --teal-wash: rgba(0, 128, 128, 0.07); --teal-edge: rgba(0, 128, 128, 0.16); --paper: #FFFFFF; --slate: #F8FAFC; /* section grounds */ --line: #E2E8F0; --line-soft: #F1F5F9; --ink: #1D1D1F; --ink-soft: #55585F; --ink-faint: #8A8F98; --ink-fainter:#A2A7AF; --clay: #9C4A2F; /* caries, reversals, alerts */ --clay-wash: #FFF7F5; --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --glass: rgba(255, 255, 255, 0.7); --glass-edge: rgba(241, 245, 249, 0.8); } * { box-sizing: border-box; } /* `clip` rather than `hidden`: hidden would make a scroll container and break the sticky header. The hero's radial glow deliberately bleeds past the viewport and would otherwise cause sideways scroll on narrow screens. */ html { scroll-behavior: smooth; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; } .wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; } .prose { max-width: 68ch; } a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--teal-bright); } :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* Small caps label used throughout — section eyebrows, table headers, meta. */ .eyebrow { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal); margin: 0 0 1.25rem; } .eyebrow.muted { color: var(--ink-faint); } /* ---------------------------------------------------------------- footer -- */ /* One footer for every page. The landing, privacy and help pages share this markup so the site reads as one product rather than three. */ footer.site { background: var(--slate); border-top: 1px solid var(--line-soft); color: var(--ink-soft); padding: 2.75rem 0; font-size: 0.88rem; margin-top: 2rem; } footer.site a { color: var(--ink-soft); text-decoration: none; } footer.site a:hover { color: var(--teal); } .foot-row { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; align-items: baseline; } .foot-brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; } .foot-brand b { font-size: 1.06rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); } .foot-brand span { color: var(--ink-faint); } .foot-links { display: flex; flex-wrap: wrap; gap: 1.5rem; } /* ------------------------------------------------------------ landing -- */ /* The masthead is glass — translucent white over a blur, so the page shows through it as it scrolls under. The solid teal band it wore for a day is gone; `--teal-deep` is back to grounding the footer area alone. The mark stays. It arrived with the teal bar but does not depend on it: on glass it reads as its own tile rather than as part of the band, which is the more usual way a masthead carries a logo anyway. */ .nav-sticky { position: sticky; top: 0; z-index: 60; background: var(--glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--glass-edge); } /* The square mark, not the round one — the round icon is the web client's. Its ground is #008080, the mark's own teal. The corner radius is the app-icon proportion (~22%), because a square icon with hard corners at 30px reads as a cropping mistake. No hairline: it was there to state the tile's edge against the #006666 bar, a step too small to see on its own. Against glass the tile is the only saturated thing in the header and states its own edge. */ .nav-logo { width: 30px; height: 30px; border-radius: 7px; display: block; flex: none; background: var(--teal); } .nav-sticky .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.25rem; min-height: 56px; padding-top: 0.55rem; padding-bottom: 0.55rem; } .nav-mark { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); } .nav-mark b { font-size: 1.19rem; font-weight: 600; letter-spacing: -0.03em; } /* --ink-soft, not --teal. The header is glass, so its ground is whatever is scrolling under it, and the worst of those is the teal band, where the bar composites to about #B2D9D9. Teal measured 3.14:1 there — under the 4.5:1 floor, and at 0.6rem uppercase this is unambiguously small text. --ink-soft is 4.69:1 on that ground and 7.05:1 everywhere else on the site. It costs the eyebrow its accent colour and makes it match the nav links, which is the price of a masthead you can see through: the one thing a translucent bar cannot promise is the colour behind its text. */ .nav-mark span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; font-size: 0.85rem; } /* :not(.btn) matters — `.nav-links a` is more specific than `.btn-primary`, so without it the pill button in the header loses its white text to this rule. */ .nav-links a:not(.btn) { color: var(--ink-soft); text-decoration: none; transition: color .2s ease; } .nav-links a:not(.btn):hover { color: var(--ink); } .btn { display: inline-block; text-decoration: none; font-size: 0.94rem; font-weight: 500; padding: 0.875rem 1.9rem; border-radius: 100px; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .btn-primary { background: var(--teal); color: #FFFFFF; } .btn-primary:hover { background: var(--teal-bright); color: #FFFFFF; transform: scale(1.04); } .btn-ghost { background: var(--glass); border: 1px solid rgba(226, 232, 240, 0.9); color: var(--ink); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .btn-ghost:hover { border-color: var(--teal); color: var(--ink); transform: scale(1.04); } .btn-sm { padding: 0.5rem 1.1rem; font-size: 0.84rem; } @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } } .hero { max-width: 1160px; margin: 0 auto; padding: 6rem 1.5rem 0; text-align: center; } .pill { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--teal-wash); border: 1px solid var(--teal-edge); color: var(--teal); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.44rem 0.9rem; border-radius: 100px; } .hero h1 { font-size: clamp(2.8rem, 6.6vw, 5rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.045em; margin: 1.9rem auto 0; max-width: 16ch; text-wrap: balance; } .hero .lede { font-size: 1.25rem; line-height: 1.6; color: var(--ink-soft); margin: 1.6rem auto 0; max-width: 58ch; text-wrap: pretty; } .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2.1rem; } /* Device mockup ---------------------------------------------------------- */ .device-wrap { position: relative; margin-top: 4rem; } .device-glow { /* Kept inside the wrap horizontally. Bleeding it sideways pushed the document wider than the viewport on narrow screens, and the gradient fades out well before the edges anyway, so nothing is lost visually. */ position: absolute; inset: -8% 0 12%; background: radial-gradient(60% 60% at 50% 20%, rgba(0,128,128,0.10), rgba(0,128,128,0) 70%); pointer-events: none; } .device { position: relative; max-width: 1000px; margin: 0 auto; } .device-lid { background: linear-gradient(180deg, var(--slate), #EEF2F6); border: 1px solid rgba(226,232,240,0.9); border-radius: 22px 22px 8px 8px; padding: 0.875rem 0.875rem 0; box-shadow: 0 40px 80px -50px rgba(29,29,31,0.5); } .device-screen { position: relative; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px 14px 4px 4px; overflow: hidden; max-height: 560px; text-align: left; } .device-base { height: 14px; background: linear-gradient(180deg, var(--line), #CBD5E1); border-radius: 0 0 12px 12px; margin: 0 auto; width: 104%; transform: translateX(-2%); box-shadow: 0 18px 30px -24px rgba(29,29,31,0.6); } .device-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 55%, #FFFFFF 100%); pointer-events: none; } .device-caption { font-family: var(--mono); font-size: 0.63rem; color: var(--ink-fainter); margin: 1.25rem 0 0; } .app-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--line-soft); background: rgba(248,250,252,0.8); } .app-bar-left { display: flex; align-items: center; gap: 0.6rem; } .dot { width: 9px; height: 9px; border-radius: 100px; background: var(--teal); } .app-panes { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line-soft); } /* min-width:0 is load-bearing. A flex item defaults to min-width:auto, so the odontogram's `min-width: max-content` pushed this pane wider than the device screen, which then clipped it — the chart could never scroll inside its own container the way it is meant to. */ .pane { flex: 1 1 300px; min-width: 0; background: var(--paper); padding: 1.25rem; } .pane-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.875rem; } .cal-head, .cal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; } .cal-head { margin-bottom: 0.6rem; } .cal-head span { font-family: var(--mono); font-size: 0.56rem; color: var(--ink-fainter); text-align: center; } .cal-grid div { height: 16px; border-radius: 3px; background: var(--line-soft); } .cal-grid div.busy { background: rgba(0,128,128,0.72); } .appt-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; } .appt { display: flex; align-items: center; gap: 0.6rem; } .appt time { font-family: var(--mono); font-size: 0.66rem; color: var(--teal); width: 44px; } .appt b { font-size: 0.78rem; font-weight: 400; color: var(--ink); } .appt span { font-size: 0.72rem; color: var(--ink-faint); } /* Odontogram ------------------------------------------------------------- The chart the app draws, at three sizes. Everything scales off --tooth, so the device pane, the feature card and the section differ in scale alone and the cell's proportions — the app's — survive at all three. */ .chart-scroll { overflow-x: auto; } .arches { --tooth: 19px; --gap: 3px; display: flex; flex-direction: column; align-items: center; width: max-content; margin: 0 auto; } .arch-label { align-self: flex-start; margin: 0 0 3px 1px; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-fainter); } .arch { display: flex; align-items: flex-start; gap: var(--gap); } /* The rule between the jaws, and the midline within each. Both are the app's: the first separates upper from lower, the second is what mesial points at. */ .arch-rule { width: 100%; height: 0; margin: 0.75rem 0 0; border: 0; border-top: 1px solid var(--line); } .arch-rule + .arch-label { margin-top: 0.6rem; } .arch .mid { width: 1px; height: calc(var(--tooth) + 6px); margin: -3px 4px 0; background: rgba(138, 143, 152, 0.3); } .quad { display: flex; gap: var(--gap); } .tooth-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; } .tooth { display: block; width: var(--tooth); height: var(--tooth); overflow: visible; } .tooth .ring { transition: stroke .2s ease, stroke-opacity .2s ease; } .tooth-slot:hover .ring { stroke: var(--teal); stroke-opacity: 1; } /* The number is the cell's summary line: the cell says what was found, the number says whether anything is owed. Its colour comes from the app. */ .tno { font-family: var(--mono); font-weight: 400; line-height: 1; font-size: max(7px, calc(var(--tooth) * 0.44)); } /* Inside the device preview the pane is only ~322px wide, so the arch is sized to fit it — 16 teeth × 14px plus gaps ≈ 262px — rather than left to scroll and clip its last tooth. The chart-scroll wrapper stays as the fallback for very narrow screens. */ .pane .arches { --tooth: 14px; --gap: 2px; } .chart-lg .arches { --tooth: 22px; --gap: 4px; } /* On a phone the section is ~289px across, which a 22px arch cannot fit. It steps down rather than scrolling: a chart you have to drag sideways hides half the numbers, and the numbers are half of what the chart says. */ @media (max-width: 560px) { .chart-lg .arches { --tooth: 15px; --gap: 2px; } } .legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.875rem; margin-top: 1rem; } .legend span { display: flex; align-items: center; gap: 0.375rem; font-size: 0.66rem; color: var(--ink-soft); } .legend .tooth-slot { --tooth: 13px; } /* Billing card ----------------------------------------------------------- */ .money-card { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 14px; padding: 1rem; box-shadow: 0 12px 28px -22px rgba(29,29,31,0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .money-card header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.875rem; } .money-card header b { font-size: 0.81rem; } .money-card header span { font-family: var(--mono); font-size: 0.63rem; color: var(--ink-faint); } .money-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.25rem; } .money-v { font-size: 2.1rem; font-weight: 500; letter-spacing: -0.04em; margin: 0 0 0.875rem; color: var(--teal); } .money-v.sub { font-size: 1.4rem; letter-spacing: -0.03em; margin: 0; color: var(--ink); } .ledger { margin-top: 0.875rem; } .ledger-row, .stmt-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 0.75rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); } .ledger-row > :first-child { font-size: 0.72rem; color: var(--ink-soft); } .ledger-row > :nth-child(2) { font-family: var(--mono); font-size: 0.69rem; font-variant-numeric: tabular-nums; } .tag { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; white-space: nowrap; } .tag-paid { background: rgba(0,128,128,0.10); color: var(--teal); } .tag-idle { background: var(--line-soft); color: var(--ink-faint); } .tag-rev { background: rgba(156,74,47,0.10); color: var(--clay); } .exam { padding: 1.25rem 1.25rem 2.5rem; border-top: 1px solid var(--line-soft); } .exam-row { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.75rem; } .exam-row dt { color: var(--ink-faint); margin: 0; } .exam-row dd { color: var(--ink-soft); margin: 0; } /* Sections --------------------------------------------------------------- */ .band { background: var(--slate); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .band-top { margin-top: 6.875rem; border-bottom: 0; } .sec { max-width: 1160px; margin: 0 auto; padding: 6.875rem 1.5rem; } .sec-intro { max-width: 56ch; margin-bottom: 3.5rem; } .sec h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; line-height: 1.07; letter-spacing: -0.04em; margin: 0 0 1.25rem; text-wrap: pretty; } .sec .lede { font-size: 1.06rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 1rem; max-width: 56ch; } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 3.5rem; align-items: start; } .split.centred { align-items: center; } .bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); grid-auto-flow: dense; gap: 1.25rem; } .card { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 24px; padding: 2rem; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 2px rgba(29,29,31,0.03), 0 22px 48px -34px rgba(29,29,31,0.35); transition: transform .3s ease, box-shadow .3s ease; } .card:hover { transform: scale(1.015); box-shadow: 0 1px 2px rgba(29,29,31,0.04), 0 30px 60px -32px rgba(29,29,31,0.4); } @media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } } .card.tall { grid-row: span 2; min-width: 0; padding: 2.4rem; display: flex; flex-direction: column; gap: 1.6rem; } .card h3 { font-size: 1.31rem; font-weight: 500; letter-spacing: -0.025em; margin: 0 0 0.75rem; } .card.tall h3 { font-size: 1.69rem; letter-spacing: -0.03em; margin: 0 0 0.875rem; } .card p { font-size: 0.91rem; line-height: 1.7; color: var(--ink-soft); margin: 0; } .card.tall p { font-size: 0.97rem; } .card .eyebrow { font-size: 0.66rem; letter-spacing: 0.12em; margin: 0 0 1rem; } .chart-inset { margin-top: auto; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px; padding: 1.125rem; overflow-x: auto; } .alert { display: flex; gap: 0.625rem; align-items: flex-start; background: var(--clay-wash); border: 1px solid rgba(156,74,47,0.16); border-radius: 12px; padding: 0.75rem 0.875rem; margin-top: 1.125rem; } .alert b { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--clay); color: #FFF; padding: 3px 8px; border-radius: 100px; white-space: nowrap; } .alert span { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5; } .stmt { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 24px; overflow: hidden; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 2px rgba(29,29,31,0.03), 0 30px 60px -40px rgba(29,29,31,0.45); } .stmt-head { display: flex; justify-content: space-between; align-items: baseline; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line-soft); } .stmt-head b { font-size: 0.88rem; } .stmt-head span { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); } .stmt-row { padding: 0.75rem 1.5rem; } .stmt-row > :first-child { font-size: 0.78rem; color: var(--ink-soft); } .stmt-row > :nth-child(2) { font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; } .stmt-foot { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; padding: 1rem 1.5rem; background: rgba(248,250,252,0.8); } .stmt-foot span { font-size: 0.75rem; color: var(--ink-faint); } .stmt-foot b { font-family: var(--mono); font-size: 0.69rem; color: var(--teal); font-weight: 400; } .mini-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.875rem; } .mini { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 24px; padding: 1.625rem; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 2px rgba(29,29,31,0.03), 0 18px 40px -34px rgba(29,29,31,0.35); transition: transform .3s ease; } .mini:hover { transform: scale(1.02); } @media (prefers-reduced-motion: reduce) { .mini:hover { transform: none; } } .mini h3 { font-size: 0.94rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 0.5rem; } .mini p { font-size: 0.88rem; line-height: 1.65; color: var(--ink-soft); margin: 0; } .facts { border-top: 1px solid rgba(226,232,240,0.9); } .fact { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(226,232,240,0.9); } .fact dt { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-fainter); padding-top: 3px; margin: 0; } .fact dd { font-size: 0.94rem; line-height: 1.6; color: var(--ink-soft); margin: 0; } .footnote { font-family: var(--mono); font-size: 0.66rem; line-height: 1.7; color: var(--ink-fainter); margin: 2.75rem 0 0; max-width: 70ch; } /* The pill says "Web*"; this resolves the asterisk without scrolling, and without the pill having to carry a caveat in 0.66rem uppercase mono. */ /* `.pill` is inline-flex with a 0.5rem gap, so a bare in it becomes its own flex item and sits 7px off the B — nothing to do with tracking, which is what it looks like. The label is wrapped in one span so the pill has a single child; the sup only has to shed the inherited 0.14em tracking. */ .pill-star { font-size: 1.05em; line-height: 0; letter-spacing: 0; margin-left: -0.06em; } .hero-note { margin: 1.5rem auto 0; max-width: 46ch; font-size: 0.8rem; line-height: 1.6; color: var(--ink-soft); } .hero-note b { font-weight: 600; color: var(--ink); } /* Scroll reveal. Blocks are visible by default so the page reads with no JS; the script opts them out only once it is running. */ [data-reveal].armed { opacity: 0; transform: translateY(24px); } [data-reveal].shown { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); } @media (prefers-reduced-motion: reduce) { [data-reveal].armed { opacity: 1; transform: none; } } /* ------------------------------------------------------ legal / help -- */ .legal { background: var(--paper); } .legal h1 { font-size: 2rem; letter-spacing: -0.03em; margin: 0 0 0.4rem; font-weight: 500; } .legal h2 { font-size: 1.18rem; margin: 2rem 0 0.5rem; font-weight: 600; } /* The header is sticky, so a jump to #two-amounts would otherwise land the heading underneath it. */ .legal h2[id] { scroll-margin-top: 5.5rem; } .legal .updated { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; } .legal ul { padding-left: 1.15rem; } .legal li { margin-bottom: 0.35rem; } .legal section, section.legal-body { padding: 3.25rem 0; } .notice { border-left: 3px solid #9A6712; background: #F7EEDC; padding: 0.9rem 1.1rem; border-radius: 0 8px 8px 0; font-size: 0.93rem; margin: 1.5rem 0; } .notice strong { color: #6E4A0C; } .toc { background: var(--slate); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem 1.1rem; margin: 1.75rem 0 2.5rem; } .toc h2 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.6rem; } .toc ol { margin: 0; padding-left: 1.3rem; } .toc li { margin-bottom: 0.3rem; } /* --------------------------------------------------- search the manual -- */ /* The manual and the FAQ are each one long page, and a Contents list only helps someone who already knows which section holds their answer. The box searches the page you are already on — the index is built from the headings at load, so a section written later is searchable without anyone remembering to add it. The markup is injected by script: with JavaScript off there is no dead control, and Contents below is the fallback it always was. The bar sits under the title and then pins beneath the site header, so it is in reach from anywhere in a page this long. --ms-top is the header's measured height rather than a guess: the nav wraps to two rows on a narrow screen, and a hard-coded offset would leave the bar tucked underneath it. --ms-bar is the bar's own height, which the headings need for their scroll offset. Both are set in search.js. */ .manual-search { position: sticky; top: var(--ms-top, 3.5rem); z-index: 40; margin: 1.25rem 0 1.75rem; padding: 0.7rem 0; background: var(--paper); } /* Pinned, it needs an edge, or the prose scrolls up and runs into it. */ .manual-search::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity 0.15s ease; } .manual-search.ms-stuck::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .manual-search::after { transition: none; } } /* A jump lands under two sticky things now, not one. */ body[data-search].legal h2[id] { scroll-margin-top: calc(var(--ms-top, 3.5rem) + var(--ms-bar, 4rem) + 0.6rem); } .ms-field { position: relative; display: flex; align-items: center; } .ms-field .ms-glass { position: absolute; left: 0.85rem; width: 15px; height: 15px; color: var(--ink-fainter); pointer-events: none; } .ms-field input { width: 100%; font-family: var(--sans); font-size: 0.98rem; color: var(--ink); padding: 0.68rem 2.5rem 0.68rem 2.45rem; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; -webkit-appearance: none; appearance: none; } .ms-field input::-webkit-search-decoration, .ms-field input::-webkit-search-cancel-button { -webkit-appearance: none; } .ms-field input::placeholder { color: var(--ink-fainter); } .ms-field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); } /* The slash key, shown only while the box is idle — a hint, not furniture. */ .ms-key { position: absolute; right: 0.7rem; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-fainter); border: 1px solid var(--line); border-radius: 5px; padding: 0.05rem 0.35rem; background: var(--slate); pointer-events: none; } .ms-clear { position: absolute; right: 0.5rem; width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; color: var(--ink-faint); background: none; border: 0; border-radius: 50%; cursor: pointer; } .ms-clear:hover { color: var(--ink); background: var(--line-soft); } /* display:flex would otherwise beat the browser's own rule for [hidden]. */ .ms-clear[hidden] { display: none; } /* The results hang off the bar rather than sitting in the flow: the bar stays one field tall wherever it is pinned, and nothing below it moves when a search opens or closes. It covers the Contents list, which is what Contents is for anyway. */ .ms-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(29, 29, 31, 0.10); padding: 0.4rem 0 0; max-height: min(60vh, 27rem); overflow-y: auto; } .ms-count { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 0; padding: 0.25rem 0.95rem 0.55rem; } .ms-results { list-style: none; margin: 0; padding: 0; } .ms-results li { border-top: 1px solid var(--line-soft); } .ms-results a { display: block; padding: 0.7rem 0.95rem; text-decoration: none; color: var(--ink); } .ms-results a:hover, .ms-results a.ms-on { background: var(--teal-wash); } .ms-title { display: flex; gap: 0.6rem; align-items: baseline; font-weight: 600; font-size: 0.95rem; color: var(--teal); } .ms-name { min-width: 0; } .ms-hits { margin-left: auto; font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-fainter); white-space: nowrap; } .ms-snip { display: block; font-size: 0.85rem; line-height: 1.55; color: var(--ink-soft); margin-top: 0.2rem; } /* One highlight colour for both places a match is shown: the snippet in the results, and the words themselves once you have jumped to the section. */ .ms-results mark, .legal .prose mark.ms-hit { background: rgba(0, 128, 128, 0.17); color: inherit; border-radius: 2px; padding: 0 1px; } @media (max-width: 640px) { .manual-search { margin: 1rem 0 1.4rem; padding: 0.55rem 0; } .ms-panel { max-height: 55vh; } } /* A printed manual has no search box in it. */ @media print { .manual-search { display: none; } } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .legal .where { border-left: 3px solid var(--teal); background: var(--slate); padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; font-size: 0.9rem; margin: 1rem 0 1.5rem; } .legal .where strong { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 0.25rem; } .legal .where p { margin: 0.2rem 0; } .ui { font-weight: 600; color: var(--teal); white-space: nowrap; } .legal table.money { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.93rem; } .legal table.money th, .legal table.money td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); } .legal table.money th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .legal table.money td.amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tablewrap { overflow-x: auto; } /* A screenshot in the manual. Portrait iPad captures at 695x1000, held to a size that sits beside the prose rather than interrupting it — the point is to confirm you are looking at the right screen, not to be read. width and height are declared so the text does not jump when they load. */ .shot { margin: 1.9rem 0 2.1rem; } .shot img { display: block; width: 100%; max-width: 330px; height: auto; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px -18px rgba(15, 30, 40, 0.45); } .shot figcaption { margin-top: 0.65rem; max-width: 44ch; font-size: 0.78rem; line-height: 1.55; color: var(--ink-faint); } @media (max-width: 560px) { .shot img { max-width: 100%; } } /* ------------------------------------------------------ the brand band -- */ /* The one place the mark's own teal appears at full size, exactly as sampled: #008080, not a shade of it. Only large text sits on it, and that text is pure white — at this lightness nothing dimmer clears the contrast floor. */ .band-brand { background: var(--teal); color: #FFFFFF; overflow: hidden; border-top: none; } .band-brand .eyebrow, .band-brand h2, .band-brand .lede { color: #FFFFFF; } /* No opacity on it. At .72 the eyebrow measured 3.24:1 on #008080; this teal is light enough that only pure white clears the floor, so nothing on this band gets dimmed. */ .band-brand .eyebrow { opacity: 1; } .brand-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2rem; align-items: center; } .brand-row > div { max-width: 34rem; } /* Deliberately oversized and allowed to run past the section's edges — the band clips it, which is what makes it read as a mark rather than a picture of one. */ .brand-tooth { width: 118%; max-width: none; height: auto; display: block; justify-self: end; margin: -3.5rem -14% -5rem 0; pointer-events: none; } /* Stacked, the tooth has the whole width to itself and would otherwise make a 946px band out of fifty-six words. It keeps its size and loses its roots to the bottom edge instead — cropped, not shrunk, which is the point of it. */ @media (max-width: 860px) { .brand-row { grid-template-columns: 1fr; gap: 0; } .brand-row > div { max-width: none; } .brand-tooth { width: 86%; margin: -1.5rem -14% -13rem auto; } } @media (max-width: 560px) { .brand-tooth { width: 96%; margin: -1rem -16% -10rem auto; } } /* ------------------------------------------------- the masthead on a phone -- It was 128px of teal in three rows, with five destinations wrapped across two of them. Now: the mark on one row, the links on the next. Two things go to make that fit. The "PATIENT RECORDS" line, because the mark and the name already say it and it was the widest thing on the first row. And "Data Privacy Act" — the longest label by half, for a section still on the page below and still linked from every footer. Five destinations do not fit in 375px without a third row, and three rows of navigation above a headline is not navigation, it is a wall. This block lives at the end of the file on purpose. `.nav-links` is defined further up, and a media query adds no specificity: sitting above that rule, every declaration the base also sets (font-size, gap) lost silently while `display: none` went on working — a half-applied state that looks like the query not matching at all. */ @media (max-width: 640px) { .nav-sticky .wrap { min-height: 48px; row-gap: 0.4rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .nav-mark span { display: none; } .nav-mark b { font-size: 1.08rem; } .nav-logo { width: 26px; height: 26px; border-radius: 6px; } /* Sized for the widest set on the site, which is the FAQ's — "Manual" plus the "Privacy policy" pill. At 0.82rem/1.1rem that page alone wrapped to a third row while the other three fit in two. */ .nav-links { width: 100%; gap: 0.3rem 0.92rem; font-size: 0.78rem; } /* $= not =: the inner pages link index.html#privacy, not #privacy. */ .nav-links a[href$="#privacy"] { display: none; } .nav-sticky .btn-sm { padding: 0.32rem 0.85rem; font-size: 0.78rem; } }