/* ========================================================================== Medical Staff & Team (resource 30, template Team) Built to design/team/ — Ryan's "team page.zip", 2026-09-18. Brief: docs/pages/medical-staff-and-team.md New file for this page family. Nothing here is appended to another stylesheet and nothing in another stylesheet is reordered. Two theme collisions are handled explicitly, both documented in docs/BUILD-RECIPE.md: 1. The ICA theme sets h1/h2 colour DIRECTLY, and a direct rule beats the design's inherited colour. Home-page headings rendered at 1.14:1 and were effectively invisible. Every heading on a dark band below restates its colour, scoped to that band. 2. The design's navy is --bs-tertiary-hex (#1e2d3b), NOT --bs-heading-color-hex, which on this theme is #212124 and renders a band ink-black. ========================================================================== */ .tm { --tm-navy: #1e2d3b; --tm-blue: #0072bc; --tm-blue-2: #0086dd; --tm-gold: #ffd240; --tm-gold-2: #f5c51e; --tm-grey: #808992; --tm-pale: #f2f8fc; --tm-sky: #80b7e3; --tm-mist: #d8ecf9; --tm-ink: #212124; --tm-body: #495356; --tm-muted: #6b7478; --tm-line: #e7e7e7; --tm-font: 'Catamaran', -apple-system, BlinkMacSystemFont, sans-serif; } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .tm .tm-wrap { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } .tm .tm-sec { background: #fff; border-bottom: 1px solid var(--tm-line); } .tm .tm-sec--light { background: #fff; } .tm .tm-sec > .tm-wrap { padding-top: 68px; padding-bottom: 68px; } .tm .tm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Type. Headings restate colour because the theme sets h1/h2 directly. -------------------------------------------------------------------------- */ .tm .tm-kicker { font-family: var(--tm-font); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tm-blue); margin: 0 0 12px; } .tm .tm-kicker--light { color: var(--tm-sky); } .tm .tm-kicker--gold { color: var(--tm-gold); } .tm .tm-h1 { font-family: var(--tm-font); font-weight: 800; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 18px; max-width: 20ch; text-wrap: balance; color: #fff; /* theme collision: must be explicit */ } .tm .tm-h2 { font-family: var(--tm-font); font-weight: 800; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 16px; max-width: 24ch; text-wrap: balance; color: var(--tm-ink); } .tm .tm-h2--light { color: #fff; max-width: 22ch; } .tm .tm-prose { font-size: 18px; line-height: 1.6; color: var(--tm-body); } .tm .tm-prose p { margin: 0 0 14px; max-width: 58ch; } .tm .tm-prose p:last-child { margin-bottom: 0; } .tm .tm-prose--center { font-size: 17px; } .tm .tm-prose--center p { margin-left: auto; margin-right: auto; max-width: none; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .tm .tm-btnrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .tm .tm-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--tm-font); font-weight: 700; font-size: 17px; padding: 15px 26px; border-radius: 8px; text-decoration: none; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .tm .tm-btn--primary { background: var(--tm-blue); color: #fff; } .tm .tm-btn--primary:hover, .tm .tm-btn--primary:focus-visible { background: var(--tm-blue-2); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,114,188,.35); } .tm .tm-btn--gold { background: var(--tm-gold); color: var(--tm-ink); } .tm .tm-btn--gold:hover, .tm .tm-btn--gold:focus-visible { background: var(--tm-gold-2); color: var(--tm-ink); transform: translateY(-2px); } .tm .tm-btn--ghost { color: #fff; border: 1px solid rgba(255,255,255,.34); padding: 15px 24px; } .tm .tm-btn--ghost:hover, .tm .tm-btn--ghost:focus-visible { background: rgba(255,255,255,.10); border-color: var(--tm-sky); color: #fff; } /* -------------------------------------------------------------------------- 1. Hero / 6. Careers band — both navy, both over the same photo -------------------------------------------------------------------------- */ .tm .tm-hero, .tm .tm-careers { position: relative; background: var(--tm-navy); color: #fff; overflow: hidden; } .tm .tm-hero__pic, .tm .tm-careers__pic { position: absolute; inset: 0; display: block; } .tm .tm-hero__img, .tm .tm-careers__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tm .tm-hero__img { opacity: .18; animation: tmDrift 26s ease-in-out infinite alternate; } .tm .tm-careers__img { opacity: .22; } .tm .tm-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #1e2d3b 24%, rgba(30,45,59,.84) 70%, rgba(30,45,59,.58) 100%); } .tm .tm-careers__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #1e2d3b 30%, rgba(30,45,59,.70) 100%); } .tm .tm-hero__inner { position: relative; padding-top: 64px; padding-bottom: 58px; } .tm .tm-careers__inner { position: relative; padding-top: 64px; padding-bottom: 64px; } .tm .tm-hero__lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--tm-pale); max-width: 62ch; margin: 0 0 28px; } .tm .tm-careers__lede { font-size: 18px; line-height: 1.6; color: var(--tm-pale); max-width: 60ch; margin: 0 0 26px; } .tm .tm-careers__inner > * { max-width: 60ch; } .tm .tm-careers__inner .tm-btnrow { max-width: none; } @keyframes tmDrift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-2%, -1%, 0); } } /* -------------------------------------------------------------------------- 2. Credential band CONTRAST: the export's own palette fails WCAG AA inside this band, and only inside this band. Measured against the brand blue (#0072bc): --tm-sky #80b7e3 on blue = 2.37:1 (needs 3.0 for 30px bold) FAIL --tm-mist #d8ecf9 on blue = 4.18:1 (needs 4.5 for 15px body) FAIL Both tokens are fine everywhere else — #80b7e3 on navy is 6.56:1 — so they are lightened HERE ONLY rather than being changed globally: #b3d4ee on blue = 3.28:1 PASS #ecf6fc on blue = 4.63:1 PASS This is the band that states accreditations, so it is the last place on the page that should be hard to read. Do not revert these to the raw tokens. -------------------------------------------------------------------------- */ .tm .tm-stats { background: var(--tm-blue); color: #fff; --tm-stat-accent: #b3d4ee; --tm-stat-note: #ecf6fc; } .tm .tm-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; padding-top: 24px; padding-bottom: 24px; } .tm .tm-stat { display: flex; gap: 12px; align-items: flex-start; } .tm .tm-stat__val { font-family: var(--tm-font); font-weight: 800; font-size: 30px; color: var(--tm-stat-accent); line-height: 1; } .tm .tm-stat__body { min-width: 0; } .tm .tm-stat__label { font-weight: 700; font-size: 16px; margin: 0; color: #fff; } .tm .tm-stat__note { font-size: 15px; color: var(--tm-stat-note); line-height: 1.4; margin: 0; } /* -------------------------------------------------------------------------- 3. How the team is built -------------------------------------------------------------------------- */ .tm .tm-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 44px; align-items: start; } .tm .tm-roles__cards { display: grid; gap: 14px; } .tm .tm-role { background: var(--tm-pale); border: 1px solid var(--tm-line); border-radius: 10px; padding: 22px; } .tm .tm-role__title { font-family: var(--tm-font); font-weight: 800; font-size: 18px; margin: 0 0 6px; color: var(--tm-ink); } .tm .tm-role__text { font-size: 16px; line-height: 1.5; color: var(--tm-body); margin: 0; } /* -------------------------------------------------------------------------- 4. The roster -------------------------------------------------------------------------- */ .tm .tm-roster__head { max-width: 70ch; margin: 0 auto 44px; text-align: center; } .tm .tm-roster__head .tm-h2 { font-weight: 700; font-size: clamp(28px, 3.6vw, 38px); line-height: 1.2; margin: 0 0 12px; max-width: none; color: var(--tm-navy); } .tm .tm-grid { max-width: 1294px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px; row-gap: 100px; } /* The portrait overflows the top of its panel by 56px, so each card reserves that space rather than letting the image clip or push the grid. */ .tm .tm-card { position: relative; display: block; width: 100%; padding-top: 56px; text-align: center; } .tm .tm-card__pan { position: relative; display: block; width: 100%; aspect-ratio: 414 / 396; border-radius: 14px; background: var(--tm-blue); transition: transform .25s ease, filter .25s ease; } /* Four-colour cycle. Presentation only — no colour is stored per person. */ .tm .tm-grid > .tm-card:nth-child(4n+1) .tm-card__pan { background: var(--tm-blue); } .tm .tm-grid > .tm-card:nth-child(4n+2) .tm-card__pan { background: var(--tm-gold); } .tm .tm-grid > .tm-card:nth-child(4n+3) .tm-card__pan { background: var(--tm-grey); } .tm .tm-grid > .tm-card:nth-child(4n+4) .tm-card__pan { background: var(--tm-pale); } .tm .tm-card__img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: calc(100% + 56px); width: auto; max-width: none; display: block; } .tm .tm-card__name { display: block; font-family: var(--tm-font); font-weight: 600; font-size: 22px; line-height: 1.3; margin: 20px 0 4px; color: var(--tm-ink); } .tm .tm-card__role { display: block; font-size: 16px; line-height: 1.4; color: var(--tm-muted); } /* The whole card is the hit area for rows that have a biography. Rows without one get no link at all, so they get no hover affordance and no pointer. */ .tm .tm-card__link { position: absolute; inset: 0; z-index: 2; border-radius: 14px; } .tm .tm-card--bio:hover .tm-card__pan { transform: translateY(-6px); filter: brightness(.94); } .tm .tm-card--bio:focus-within .tm-card__pan { transform: translateY(-6px); filter: brightness(.94); } .tm .tm-card__link:focus-visible { outline: 3px solid var(--tm-blue); outline-offset: 4px; } .tm .tm-card--nobio { cursor: default; } /* -------------------------------------------------------------------------- 5. Biography panel FAILS OPEN BY CONSTRUCTION. The card links are real in-page anchors and :target does the opening, so every biography is readable with JavaScript off or broken. team.js only upgrades the interaction. Nothing here hides content behind a class that a script has to add. -------------------------------------------------------------------------- */ .tm .tm-bio { position: fixed; inset: 0; z-index: 1080; display: none; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; } .tm .tm-bio:target, .tm .tm-bio.is-open { display: flex; } .tm .tm-bio__scrim { position: absolute; inset: 0; background: rgba(30,45,59,.90); display: block; } .tm .tm-bio__sheet { position: relative; width: min(880px, 100%); background: #fff; border-radius: 12px; overflow: hidden; margin: auto; display: flex; flex-wrap: wrap; align-items: stretch; } .tm .tm-bio__img { flex: 1 1 200px; min-width: 0; max-width: 240px; max-height: 360px; min-height: 240px; display: block; background-color: var(--tm-mist); background-size: cover; background-position: top center; } .tm .tm-bio__text { flex: 1 1 340px; min-width: 0; padding: 28px 30px 32px; } .tm .tm-bio__kicker { font-family: var(--tm-font); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tm-blue); margin: 0 0 8px; } .tm .tm-bio__name { font-family: var(--tm-font); font-weight: 800; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; margin: 0 0 16px; color: var(--tm-navy); } /* The stored richtext is rendered whole. It can contain

,