/* ============================================================ Allied health — the live page, built from the Claude Design redesign Page: /allied-health/ Source: "Allied Health Page.dc.html" The design was authored from this site's own palette, so every colour and gradient in it maps exactly onto an existing token — nothing here is an approximation. Ported to classes rather than the design's inline styles so the P0 "zero raw hex outside :root" rule holds. Exact mappings used throughout: #1C4159 brand-950 · #225278 --color-secondary · #2B648C brand-600 #438FB9 --color-primary · #67B8DC --color-accent #283641 --color-ink · #5a6b78 --color-ink-soft #EEF4F9 --color-surface-alt · #e7eef4 --color-border-soft linear-gradient(150deg,…) --grad-hero linear-gradient(135deg,…) --grad-deep linear-gradient(135deg,#67B8DC,#438FB9) --grad-primary linear-gradient(90deg,#225278,#67B8DC) --grad-line linear-gradient(135deg,#2B648C,#67B8DC) --grad-chip ============================================================ */ .ahd-sec { padding: var(--space-3xl) 0; position: relative; } .ahd-sec.on-white { background: var(--color-surface); } .ahd-sec.on-tint { background: var(--color-surface-alt); overflow: hidden; } /* The journey's .jcopy paints a ground to occlude the spine behind it (journey.css). On this page the journey sits on the tinted band, so tell it which ground to paint. */ .ahd-sec.on-tint .journey { --journey-ground: var(--color-surface-alt); } .ahd-sec.on-dark { background: var(--grad-deep); overflow: hidden; } .ahd-sec.on-dark-hero { background: var(--grad-hero); overflow: hidden; } /* Ambient wash + discs, straight from the design's absolute layers */ .ahd-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .ahd-wash.a { background: radial-gradient(900px 480px at 88% -8%, oklch(from var(--color-accent) l c h / 38%), transparent 60%), radial-gradient(700px 520px at -6% 108%, oklch(from var(--color-accent) l c h / 22%), transparent 60%); } .ahd-wash.b { background: radial-gradient(800px 460px at 12% -10%, oklch(from var(--color-accent) l c h / 32%), transparent 60%), radial-gradient(700px 520px at 104% 106%, oklch(from var(--color-accent) l c h / 20%), transparent 60%); } .ahd-disc { position: absolute; z-index: 0; border-radius: var(--radius-full); pointer-events: none; background: oklch(from var(--color-accent) l c h / 18%); } .ahd-disc.tinted { background: oklch(from var(--color-primary) l c h / 14%); } /* ---- Section heads ---- These defer to the site's own components: .eyebrow, .rule and .lede come from components.css and h2 from the framework scale, so this page reads at the same size as every other. Only the on-dark colour swaps and section rhythm live here. (First pass reimplemented all four at the design file's own sizes — the eyebrow landed at --step--2, roughly half the site's --text-md. Don't reintroduce that.) */ .ahd .eyebrow { color: var(--color-primary); } .ahd .eyebrow.on-dark { color: var(--color-accent); } .ahd-h2 { margin: 0 0 var(--space-s); color: var(--color-secondary); text-wrap: pretty; } /* Emphasis inside a section heading is carried by COLOUR, not weight — .ahd-h2 is already 800 and craft.md caps there. Matches .section-head h2 .hl and .jcopy h2 .hl elsewhere on the site; without this rule the span renders inert. */ .ahd-h2 .hl { color: var(--color-primary); } .ahd-h2.on-dark { color: #fff; } .ahd-rule { margin: 0 0 var(--space-m); } .ahd-rule.on-dark { background: linear-gradient(90deg, var(--color-accent), var(--brand-100)); } .ahd-rule.centred { margin-inline: auto; } .ahd-head-centred { max-width: 760px; margin: 0 auto var(--space-xl); text-align: center; } .ahd-lede { max-width: none; } .ahd-lede.on-dark { color: rgb(255 255 255 / 90%); } /* Sub-heading inside a body column — left aligned, one step under .ahd-h2. Used by #what, where "All the patient needs, in one place." moved out of the centred head and into the copy (owner, 2026-09-13) so it leads the paragraphs rather than floating under the rule. */ .ahd-subh { margin: 0 0 var(--space-s); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-secondary); line-height: var(--line-snug); letter-spacing: -.01em; } .ahd-subh.on-dark { color: #fff; } .ahd-body { margin: 0 0 var(--space-m); font-size: var(--text-md); color: var(--color-ink); text-wrap: pretty; } .ahd-body.on-dark { color: rgb(255 255 255 / 90%); } .ahd-body.on-dark strong { color: #fff; } /* The design's buttons are chunkier and bolder than the site default; .btn supplies everything else (12px radius, gradient fills, hover lift, focus ring). */ /* ⚠️ Do NOT reintroduce padding here. `.ahd .btn` is specificity 0,2,0 and beats .btn-sm and .btn-lg (0,1,0), so a padding override pins every button on the page to one hard-coded size and silently opts the whole page out of the button scale — which is what a 15px literal here did until 2026-08-18. Weight is safe; size belongs to the modifiers. */ .ahd .btn { font-weight: var(--weight-bold); } .ahd .btn-ghost { background: rgb(255 255 255 / 12%); border: 1.5px solid rgb(255 255 255 / 45%); backdrop-filter: blur(6px); color: #fff; } .ahd .btn-ghost:hover { background: rgb(255 255 255 / 20%); } /* Lede + rule variants. These were inline style attributes carried over from the port — the design file is inline-styled throughout, and converting only the structural rules left these one-offs behind. Named so they can be reused and reasoned about. */ .ahd-lede-hero { margin-bottom: var(--space-xs); max-width: 560px; } .ahd-lede-tight { margin-bottom: var(--space-m); max-width: 520px; } .ahd-lede-gap { margin-bottom: var(--space-l); } .ahd-rule-flush { margin-bottom: 0; } /* ic-play is a filled glyph, not a stroked one. */ .ahd-ic-solid { fill: currentColor; stroke: none; } /* Referral float card lines. */ .ahd-statcard.bl strong { display: block; font-size: var(--text-sm); color: var(--color-secondary); line-height: 1.2; } .ahd-statcard.bl span span { font-size: var(--text-xs); color: var(--color-ink-soft); } /* ---- Hero: design 1c (navy copy panel / full-bleed photo) ---- Full-bleed rather than the canvas's rounded card. The copy panel's left padding aligns its text to the site grid gutter so the hero reads as part of the page. Top padding clears the fixed nav, matching .ah-hero's 172px on the live allied health page. */ .ahd-hero1c { position: relative; overflow: hidden; background: var(--color-surface); } .ahd-hero1c-grid { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; min-height: 660px; } .ahd-hero1c-copy { position: relative; background: var(--grad-deep); display: flex; flex-direction: column; justify-content: center; padding: 172px var(--space-2xl) var(--space-3xl) max(var(--space-2xl), calc((100vw - var(--grid-max-width)) / 2 + var(--space-m))); } .ahd-hero1c-wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 420px at -10% -10%, oklch(from var(--color-accent) l c h / 34%), transparent 60%); } .ahd-hero1c-inner { position: relative; z-index: 1; max-width: 520px; } .ahd-hero1c-inner h1 { margin: 0 0 var(--space-s); color: #fff; line-height: 1.06; text-wrap: pretty; } .ahd-hero1c-inner h1 .hl { color: var(--color-accent); } .ahd-hero-tagline { margin: 0 0 var(--space-l); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-accent); } .ahd-hero-note { margin: var(--space-s) 0 0; font-size: var(--text-sm); color: rgb(255 255 255 / 72%); } .ahd-hero1c-media { position: relative; overflow: hidden; min-height: 420px; } .ahd-hero1c-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ahd-hero1c-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, oklch(from var(--brand-950) l c h / 55%), transparent 46%); } /* Floating card straddles the seam between the two panels. */ .ahd-float { position: absolute; z-index: 3; background: var(--color-surface); border-radius: 14px; padding: var(--space-2xs) var(--space-s); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 11px; animation: ahd-bob 6s ease-in-out infinite; } .ahd-hero1c-float { left: 46%; top: 172px; } .ahd-float-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--grad-chip); color: #fff; flex: none; } .ahd-float-ic svg { width: 18px; height: 18px; fill: none; stroke-width: 2; } .ahd-float strong { display: block; font-size: var(--text-md); color: var(--color-secondary); line-height: 1.2; } .ahd-float span span { font-size: var(--text-sm); color: var(--color-ink-soft); } @keyframes ahd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Centred on the photo column (which is the right 1fr of a 1.02fr 1fr grid, so its centre sits at ~74.75% of the hero width) rather than pinned to the right edge. */ .ahd-hero1c-stats { position: absolute; left: 74.75%; transform: translateX(-50%); bottom: var(--space-l); z-index: 3; box-sizing: border-box; width: min(520px, calc(50% - var(--space-l))); background: rgb(255 255 255 / 94%); backdrop-filter: blur(10px); border-radius: 18px; padding: var(--space-m); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-s); } .ahd-stat-n { font-size: 1.7rem; font-weight: var(--weight-extrabold); color: var(--color-secondary); line-height: 1.1; letter-spacing: -.02em; } .ahd-stat-l { font-size: var(--text-sm); color: var(--color-ink-soft); } @media (max-width: 1040px) { .ahd-hero1c-grid { grid-template-columns: 1fr; min-height: 0; } .ahd-hero1c-copy { padding: 140px var(--space-m) var(--space-2xl); } .ahd-hero1c-inner { max-width: none; } .ahd-hero1c-float { position: static; margin: var(--space-m) var(--space-m) 0; } .ahd-hero1c-stats { position: static; transform: none; left: auto; width: auto; margin: var(--space-m); } } @media (max-width: 640px) { .ahd-hero1c-stats { grid-template-columns: 1fr; } } /* ---- Generic split + cards ---- */ .ahd-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-2xl); align-items: center; } .ahd-split.flip { grid-template-columns: 1fr 1.1fr; } .ahd-split.tight { grid-template-columns: 1fr 1fr; align-items: start; } .ahd-split.narrow-left { grid-template-columns: .9fr 1.1fr; } /* ⚠️ .ahd-shot / .ahd-statcard* / .ahd-mark and the .ahd-statcard.br mobile stack were PROMOTED to components.css 2026-09-14 — partials/complexity.njk renders the same illustration + floating stat card on /gp/ and /specialists/, which don't load this file. Edit them there, not here. The .bl variant and .ahd-shot.is-narrow are allied-health-only and stayed here. */ /* A portrait shot at full column width dwarfs the numbered cards beside it — cap it and centre it in the column. The float card is positioned against .ahd-shot, so constrain the container rather than the img, or the card detaches from the image edge. */ .ahd-shot.is-narrow { max-width: 380px; margin-inline: auto; } /* #complexity carries an ILLUSTRATION, not a photo — a patient ringed by a wait list, a broken Medicare card, a phone on hold, cash and a clock, i.e. the three barriers the copy names. It is near-square (800x846) and already cropped at source, so no aspect-ratio crop here: cropping further would clip the orbiting elements, which are the whole point. ⚠️ Capped and centred so it balances three short paragraphs rather than towering over them. */ .ahd-card { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: 18px; padding: var(--space-l); box-shadow: var(--shadow-xs); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; } .ahd-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-accent); } .ahd-card h3 { margin: 0 0 var(--space-2xs); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-secondary); line-height: 1.25; } .ahd-card p { margin: 0; font-size: var(--text-md); color: var(--color-ink-soft); text-wrap: pretty; } .ahd-chip { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--grad-chip); color: #fff; margin-bottom: var(--space-s); } .ahd-chip svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ahd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); } /* Floating stat card over an image */ .ahd-statcard.bl { left: -20px; bottom: -22px; max-width: none; display: flex; align-items: center; gap: var(--space-xs); padding: 14px 18px; border-radius: 14px; } /* The "in" rides smaller than the numerals it joins, matching .prob-stat .num .in on the live page — otherwise "1 in 6" reads as three equal-weight characters. */ /* Citation markers on the problem stats — same treatment as the evidence list. */ .ahd-statcard-n .in { font-size: .52em; font-weight: var(--weight-semibold); vertical-align: middle; margin: 0 .12em; } .ahd-statcard-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--grad-chip); color: #fff; flex: none; } .ahd-statcard-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; } /* Quote callout (problem section). The .ahd-statrow block that sat here went with the stat boxes in #complexity, which is prose now. */ .ahd-note { border-left: 5px solid var(--color-accent); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-s) var(--space-m); color: var(--brand-600); font-size: var(--text-md); } .ahd-note strong { color: var(--color-secondary); } .ahd-note.on-tint { background: var(--color-surface-alt); } /* Citation buttons inside body copy — match .ahd-statrow-b / .ahd-statcard-l exactly. ⚠️ These survived the removal of the .ahd-reason boxes on purpose: the 5-session claim in #complexity still carries a