/* ========================================================================== TIME Orthopedics — Sections The photographic hero and each page's layout. ========================================================================== */ .section__title { margin-bottom: var(--sp-6); } /* ========================================================================== HERO — scroll-expand Ported from a React/framer-motion component to vanilla CSS + JS, since this site has no build step. The frame opens on the clinic mark, then cross-fades into the photograph as it grows from 300px to full-bleed while the two halves of the title travel apart. The stage is pinned with CSS sticky inside a tall track; scrolling that extra height drives it. Nothing locks the page. hero.js writes one custom property: --p 0 -> 1 expansion progress The defaults below are the FINISHED state, so with JavaScript off (or reduced motion on) the hero simply renders open and readable. ========================================================================== */ .hero { --p: 1; /* finished state, for no-JS and reduced motion */ position: relative; background: var(--white); } /* An inline script in sets html.hero-live before the first paint. Every scroll-dependent rule hangs off that class, so the hero degrades to a plain, fully-open image when the script never runs — and it is never painted in the open state first. */ .hero-live .hero { --p: 0; } .hero__track { position: relative; } .hero-live .hero__track { height: 320vh; } .hero__stage { position: relative; height: 100dvh; min-height: 32rem; display: grid; place-items: center; overflow: hidden; } .hero-live .hero__stage { position: sticky; top: 0; } /* ---- Backdrop: the same photograph, blurred, fading out ------------------ */ .hero__backdrop { position: absolute; inset: 0; z-index: 0; opacity: calc(1 - var(--p)); } .hero__backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; filter: blur(16px) saturate(115%); transform: scale(1.12); } .hero__backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 42, 0.62) 0%, rgba(20, 14, 42, 0.46) 26%, rgba(20, 14, 42, 0.18) 48%, rgba(20, 14, 42, 0.30) 74%, rgba(20, 14, 42, 0.52) 100%); } /* ---- The frame that expands ---------------------------------------------- */ .hero__frame { position: relative; z-index: 2; margin: 0; overflow: hidden; border-radius: calc(var(--r-lg) * (1 - var(--p))); /* squares off at full bleed */ background: transparent; /* An angled cut across the foot of the image, opening up as it expands, so the hero ends on a diagonal into the white page rather than a flat edge. */ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--p) * 5.5vw)); /* The shadow fades in with the photograph so nothing frames empty space */ box-shadow: 0 30px 80px -30px rgba(20, 14, 42, calc(var(--p) * 0.55)); /* 300px -> exactly full-bleed, whatever the screen */ width: calc(300px + var(--p) * (100vw - 300px)); height: calc(360px + var(--p) * (100dvh - 360px)); } /* The bare figure mark, floating over the blurred backdrop. It sits above the frame so it stays visible while the photograph fades up behind it, and grows very slightly as it dissolves. */ .hero__mark { position: absolute; z-index: 3; display: block; pointer-events: none; opacity: calc(1.05 - var(--p) * 3.6); /* gone by roughly p = 0.29 */ transform: scale(calc(1 + var(--p) * 0.7)); } .hero__mark img { /* Also bounded by viewport height — on short laptop screens the width-only clamp grew it into the subtitle. The floor (11rem) sets the phone size and the 26vw term sets the tablet one; desktop is governed by the 17rem cap and the 30vh bound, so it is unchanged at 270px. That matters — desktop has only ~46px of clearance to the subtitle, while a phone has over 100px. */ width: min(clamp(11rem, 26vw, 17rem), 30vh); height: auto; filter: drop-shadow(0 8px 34px rgba(20, 14, 42, 0.5)); } /* … and cross-fades into the photograph as it grows */ .hero__frame-photo { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; opacity: calc((var(--p) - 0.10) * 2.8); /* full by roughly p = 0.46 */ } /* Two washes, both fading in on the same curve as the photograph so that at rest there is no panel behind the mark — just the mark, floating. The first is the brand colour bleeding in from the right, so the image resolves into indigo rather than stopping at a hard edge. The second is a vertical vignette that keeps the white title legible. */ .hero__frame-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(102deg, rgba(65, 48, 145, 0) 18%, rgba(65, 48, 145, 0.30) 48%, rgba(65, 48, 145, 0.62) 76%, rgba(47, 33, 105, 0.82) 100%), linear-gradient(180deg, rgba(20, 14, 42, 0.42) 0%, rgba(20, 14, 42, 0.08) 38%, rgba(20, 14, 42, 0.08) 62%, rgba(20, 14, 42, 0.44) 100%); opacity: calc((var(--p) - 0.10) * 2.8); } /* ---- Overlay: title above and below the mark, meta at the foot ----------- */ .hero__overlay { position: absolute; z-index: 4; inset: 0; pointer-events: none; padding-inline: var(--gutter); } .hero__title { margin: 0; color: var(--white); text-shadow: 0 4px 40px rgba(20, 14, 42, 0.6); opacity: calc(1 - var(--p) * 0.85); } .hero__title-a, .hero__title-b { position: absolute; left: 50%; translate: -50% 0; /* centring, applied before `transform` */ width: max-content; max-width: calc(100% - var(--gutter) * 2); text-align: center; display: block; } .hero__title-a { top: calc(var(--nav-h) + 3.5vh); font-size: clamp(2.2rem, 6.4vw, 4.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; transform: translateX(calc(var(--p) * -150vw)); } .hero__title-b { bottom: 20vh; font-size: clamp(1.15rem, 2.55vw, 2.15rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; white-space: normal; width: min(28ch, 100%); transform: translateX(calc(var(--p) * 150vw)); } .hero__title .tm { font-size: 0.38em; vertical-align: super; letter-spacing: 0; opacity: 0.85; } /* The three statements settle onto the left of the open image. They arrive only at the very end of the expansion, once the title has cleared out. */ .hero__timely { position: absolute; z-index: 5; left: var(--gutter); top: 50%; translate: 0 -50%; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); max-width: min(30rem, 46vw); opacity: calc((var(--p) - 0.74) * 4); } .hero__timely li { padding-left: var(--sp-5); border-left: 2px solid var(--lime); font-family: var(--font-display); font-size: clamp(1.5rem, 3.1vw, 2.75rem); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.15; color: var(--white); text-shadow: 0 2px 28px rgba(20, 14, 42, 0.75); } /* The photograph's left side is a bright sunset, so the statements need a wash of their own — measured, not guessed. An earlier version started the gradient at -100vw, which meant the text sat in its faded tail and read at 1.85:1. It now spans from the viewport edge to just past the text. */ .hero__timely::before { content: ""; position: absolute; z-index: -1; inset: -13vh -9rem -13vh calc(var(--gutter) * -1); background: linear-gradient(90deg, rgba(20, 14, 42, 0.78) 0%, rgba(20, 14, 42, 0.74) 58%, rgba(20, 14, 42, 0) 100%); /* Soften the top and bottom so it reads as light, not a panel */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%); } @media (max-width: 767px) { .hero__timely { max-width: 74vw; } .hero__timely li { font-size: 1.35rem; } } .hero__meta { position: absolute; left: 50%; bottom: 6vh; translate: -50% 0; width: min(46rem, calc(100% - var(--gutter) * 2)); display: grid; gap: var(--sp-4); justify-items: center; text-align: center; opacity: calc(1 - var(--p) * 1.5); } .hero__tagline { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.95rem, 1.5vw, 1.3rem); letter-spacing: var(--tracking-tight); color: var(--white); text-shadow: 0 2px 24px rgba(20, 14, 42, 0.7); transform: translateX(calc(var(--p) * -60vw)); } .hero__cue { font-size: var(--step--1); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(255, 255, 255, 0.88); text-shadow: 0 2px 18px rgba(20, 14, 42, 0.8); opacity: calc(1 - var(--p) * 2.4); } .hero__cue::after { content: ""; display: block; width: 1px; height: 1.6rem; margin: var(--sp-3) auto 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent); } /* ---- Revealed copy -------------------------------------------------------- */ .hero__reveal { position: relative; z-index: 4; background: var(--white); padding-block: var(--section-y); } .hero__reveal-inner { max-width: 62rem; } .hero__reveal-title { font-size: var(--step-5); margin-bottom: var(--sp-4); } .hero__reveal-lede { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--indigo); margin-bottom: var(--sp-5); } .hero__reveal-body { font-size: var(--step-1); line-height: 1.6; color: var(--text-muted); max-width: var(--measure); } .hero__reveal .btn-row { margin-top: var(--sp-7); } /* -------------------------------------------------------------------------- Timepiece — the joint at the centre, time running around it The knee keeps its own colour so it is unmistakably a knee; a sixty-tick dial rotates around it, one step a second. It sits in its own grid column, so it can never overlap the copy. -------------------------------------------------------------------------- */ .hero__reveal-grid { display: grid; gap: var(--sp-8); align-items: center; } @media (min-width: 1000px) { .hero__reveal-grid { grid-template-columns: minmax(0, 1fr) auto; } } .timepiece { position: relative; width: clamp(15rem, 27vw, 24rem); aspect-ratio: 1; justify-self: end; display: grid; place-items: center; pointer-events: none; } /* Below the two-column breakpoint the grid stacks, so it sits under the copy rather than beside it — centred and smaller, but still there. */ @media (max-width: 999px) { .timepiece { width: min(15rem, 58vw); justify-self: center; margin-top: var(--sp-4); } .hero__reveal-grid { gap: var(--sp-7); } } @media (max-width: 420px) { .timepiece { width: min(12.5rem, 62vw); } } /* ---- The joint ------------------------------------------------------------ */ .timepiece__knee { width: 74%; height: 74%; object-fit: cover; border-radius: 50%; /* The render is lit on near-black, so a dark disc is its natural setting — one accent on an otherwise light page, not a dark panel. */ background: var(--indigo-dark); box-shadow: 0 0 0 1px rgba(65, 48, 145, 0.20), 0 24px 60px -28px rgba(25, 18, 51, 0.55); } /* ---- The dial ------------------------------------------------------------- */ .dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .dial__ring { fill: none; stroke: var(--indigo); stroke-width: 0.7; opacity: 0.30; /* Drawn on as the block reveals: circumference of r=94 is ~590.6 */ stroke-dasharray: 591; stroke-dashoffset: 591; transform-origin: 100px 100px; transform: rotate(-90deg); } .timepiece.is-visible .dial__ring { animation: dial-draw 1.5s var(--ease-out) 0.15s forwards; } @keyframes dial-draw { to { stroke-dashoffset: 0; } } .dial__ticks { opacity: 0; } .timepiece.is-visible .dial__ticks { animation: dial-in 0.9s var(--ease-out) 0.55s forwards; } .dial__hand { opacity: 0; } .timepiece.is-visible .dial__hand { animation: dial-in 0.6s var(--ease-out) 1.1s forwards; } @keyframes dial-in { to { opacity: 1; } } .dial__ticks line { stroke: var(--indigo); stroke-width: 0.9; opacity: 0.28; } .dial__ticks line.dial__tick--major { stroke-width: 1.8; opacity: 0.48; } .dial__hand line { stroke: var(--indigo); stroke-width: 2.4; stroke-linecap: round; } .dial__hand circle { fill: var(--indigo); } /* One step a second, sixty to the minute. The marker runs in the ring outside the joint, so it never crosses it. */ .timepiece.is-visible .dial__hand { transform-origin: 100px 100px; animation: dial-in 0.6s var(--ease-out) 1.1s forwards, dial-tick 60s steps(60, end) 1.1s infinite; } @keyframes dial-tick { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .dial__ring { stroke-dashoffset: 0; } .dial__ticks, .dial__hand, .timepiece.is-visible .dial__ticks, .timepiece.is-visible .dial__hand { animation: none; opacity: 1; } } /* ---- Small screens -------------------------------------------------------- */ @media (max-width: 767px) { .hero__frame { width: calc(280px + var(--p) * (100vw - 280px)); height: calc(380px + var(--p) * (100dvh - 380px)); } .hero__title-a { top: calc(var(--nav-h) + 2vh); transform: translateX(calc(var(--p) * -180vw)); } .hero__title-b { bottom: 22vh; transform: translateX(calc(var(--p) * 180vw)); } } /* The sticky call bar occupies the foot of the screen below 980px, and it was covering the scroll cue by 36-54px — enough to bury the downward rule under it and clip the type. Lift the cue clear so the whole cue reads, as it already does on desktop where the bar is hidden. This has to sit after the max-width: 767px block above: that block also sets .hero__meta bottom, at the same specificity, so an earlier rule would lose. */ @media (max-width: 979px) { .hero__meta { bottom: calc(5.5rem + env(safe-area-inset-bottom) + 1.5vh); } } /* Short viewports: pull the title in so it clears the frame. The subtitle also lifts and the mark's height bound tightens, because raising the scroll cue clear of the call bar took the room they used to share. */ @media (max-height: 700px) { .hero__title-a { top: calc(var(--nav-h) + 1vh); } .hero__title-b { bottom: 27vh; } .hero__mark img { width: min(clamp(11rem, 26vw, 17rem), 22vh); } } /* Below ~600px of viewport height there is genuinely not room for the mark, both title halves, the cue and the call bar. The cue is the one that can go: it is a decorative affordance, the page obviously scrolls at that size, and the reduced-motion path already hides it. */ @media (max-height: 600px) { .hero__cue { display: none; } .hero__title-b { bottom: 17vh; } } /* ---- Reduced motion: no lock, no expansion, everything already open ------- */ @media (prefers-reduced-motion: reduce) { .hero, .hero-live .hero { --p: 1; } .hero-live .hero__track { height: auto; } .hero-live .hero__stage { position: relative; } .hero__cue { display: none; } } /* ========================================================================== INNER PAGE HEADER ========================================================================== */ /* Three devices, all cheap and all brand-native: a band of indigo rules running off the right edge, an outsized index numeral ghosted behind the title, and an angled foot that echoes the diagonal the home hero ends on. */ .page-head { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(105deg, var(--paper) 0%, var(--paper) 52%, var(--paper-2) 100%); padding-block: calc(var(--nav-h) + var(--sp-8)) calc(var(--section-y) + 3vw); /* Angled foot, same direction as the hero's */ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3.5vw)); } .page-head__inner { position: relative; z-index: 2; } /* Rules: four hairlines of increasing weight, running off the right edge */ .page-head__rules { position: absolute; z-index: 1; top: calc(var(--nav-h) + var(--sp-6)); right: 0; width: min(34rem, 42vw); display: grid; gap: 0.9rem; pointer-events: none; } .page-head__rules i { display: block; height: 1px; background: var(--indigo); opacity: 0.16; justify-self: end; } .page-head__rules i:nth-child(1) { width: 100%; } .page-head__rules i:nth-child(2) { width: 76%; opacity: 0.24; height: 2px; } .page-head__rules i:nth-child(3) { width: 52%; opacity: 0.16; } .page-head__rules i:nth-child(4) { width: 30%; opacity: 0.34; height: 3px; background: var(--lime); } /* The clinic mark, blown up and deliberately run off the right edge so the header crops it. It is the same artwork as the masthead, recoloured to indigo with its alpha intact so it reads on a light ground. */ .page-head__mark { position: absolute; z-index: 0; /* Sits fully inside the header — cropped, the ring and figure read as a face with the top sliced off. */ right: clamp(1.5rem, 5vw, 6rem); /* Anchored to the top, not centred. The three headers are different heights (their ledes run 1-3 lines), so centring made the mark drift between pages. Offset clears the rule work above it, which ends about 194px down. */ top: calc(var(--nav-h) + 6rem); width: clamp(13rem, 30vw, 26rem); height: auto; opacity: 0.11; pointer-events: none; user-select: none; } .page-head__title { font-size: var(--step-5); margin-bottom: var(--sp-5); /* A short lime keyline above the title, tying back to the masthead */ position: relative; } .page-head__title::before { content: ""; display: block; width: 3.5rem; height: 4px; margin-bottom: var(--sp-5); background: var(--indigo); } @media (max-width: 700px) { .page-head__rules { display: none; } .page-head__mark { width: 13rem; right: 1rem; top: calc(var(--nav-h) + 2.5rem); opacity: 0.10; } } /* ========================================================================== STICKY TAB RAIL ========================================================================== */ .rail { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); background: var(--white); border-bottom: 1px solid var(--line); } .rail .shell { display: flex; } /* Wrap rather than clip, so a tab is never half-cut off the right edge. Below the breakpoint there is not enough width to wrap sensibly, so it becomes a horizontal scroller instead. */ .rail .tabs { flex-wrap: wrap; row-gap: 0; } @media (max-width: 900px) { .rail .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .rail .tabs::-webkit-scrollbar { display: none; } } /* ========================================================================== HOME — promise ========================================================================== */ .promise .card { display: flex; flex-direction: column; } /* ========================================================================== HOME — welcome ========================================================================== */ .welcome { display: grid; gap: var(--sp-7); align-items: start; } @media (min-width: 900px) { .welcome { grid-template-columns: 1fr 1fr; gap: var(--sp-9); } } .welcome__body .btn-row { margin-top: var(--sp-6); } /* ========================================================================== SERVICE TILES — photographic ========================================================================== */ .services-grid { margin-top: var(--sp-6); } .service-tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); color: var(--text); text-decoration: none; overflow: hidden; transition: border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); } .service-tile:hover { border-color: var(--indigo); box-shadow: var(--shadow-md); } .service-tile__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); } .service-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .service-tile:hover .service-tile__media img { transform: scale(1.05); } .service-tile__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; } /* These carry the clinic's full service names verbatim, so the type is sized to take a long line — the regenerative one runs to ~95 characters. */ .service-tile h3 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.015em; } .service-tile__go { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); font-size: var(--step--1); font-weight: 600; color: var(--indigo); } .service-tile__go svg { width: 1.05em; height: 1.05em; } /* ========================================================================== SERVICES PAGE ========================================================================== */ .svc { display: grid; gap: var(--sp-7); align-items: center; } @media (min-width: 960px) { .svc { grid-template-columns: 0.85fr 1fr; gap: var(--sp-9); } .svc--flip .svc__visual { order: 2; } } .svc__visual { border-radius: var(--r-md); overflow: hidden; background: var(--paper-2); /* The supplied panels are ~386x593; capping the width keeps them crisp rather than upscaled. */ max-width: 30rem; aspect-ratio: 386 / 593; } .svc__visual img { width: 100%; height: 100%; object-fit: cover; } .svc__list { list-style: none; padding: 0; margin-top: var(--sp-5); display: grid; gap: var(--sp-3); } .svc__list li { position: relative; padding-left: var(--sp-6); color: var(--text-muted); } .svc__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.85rem; height: 2px; background: var(--indigo); } .svc__body .btn-row { margin-top: var(--sp-6); } /* ========================================================================== HOME — lead surgeon ========================================================================== */ .surgeon__grid { display: grid; gap: var(--sp-7); align-items: center; } @media (min-width: 960px) { .surgeon__grid { grid-template-columns: 0.8fr 1fr; gap: var(--sp-9); } } .surgeon__figure { border-radius: var(--r-md); overflow: hidden; background: var(--paper-2); aspect-ratio: 4 / 5; max-width: 28rem; } .surgeon__figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 14%; } /* ========================================================================== HOME — mission ========================================================================== */ /* The supplied photograph carries its own diagonal white cut on the left, which is exactly where the copy sits — so it needs no heavy scrim. */ .mission { position: relative; background: var(--white); overflow: hidden; isolation: isolate; } .mission__media { position: absolute; inset: 0; z-index: 0; } .mission__media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; } /* Only enough of a wash to guarantee the text side stays legible at every width, since the photo's own diagonal only lines up on wide screens. */ .mission::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(96deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 34%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0.10) 68%, rgba(255, 255, 255, 0) 80%); } .mission__inner { position: relative; z-index: 2; } .mission__copy { max-width: 34rem; } .mission__quote { margin-block: var(--sp-5) var(--sp-6); } .mission__quote p { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.1; text-wrap: balance; color: var(--text); } /* Narrow screens keep the photograph behind the copy, but the wash was heavy enough that the clinician and the knee were barely discernible. Lightened so the image reads, and the crop moved onto the hands rather than the treatment table. Measured against the darkest pixels actually rendered behind the body copy — the floor here is legibility, not taste. */ @media (max-width: 900px) { .mission__media img { object-position: 66% 52%; } .mission::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.90) 55%, rgba(255, 255, 255, 0.78) 100%); } } .mission__seal { margin-top: var(--sp-8); font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--indigo); } /* Phones only. Set on one line under the photograph the closing statement read as a stray caption sitting on the image's edge, with dead space beneath it. Stacked, it becomes a mark that fills that space and lands like a full stop on the section — and it borrows the ruled-list treatment the hero already uses for the three Timely statements, so it reads as part of the same voice. `width: min-content` does the stacking, so the markup stays one sentence. */ @media (max-width: 700px) { .mission__seal { width: min-content; margin-top: var(--sp-7); padding-left: var(--sp-5); border-left: 3px solid var(--indigo); font-size: var(--step-3); line-height: 1.02; letter-spacing: var(--tracking-tight); } } /* ========================================================================== HOME — testimonial + team ========================================================================== */ .testimonial-grid { display: grid; gap: var(--sp-7); align-items: center; } @media (min-width: 900px) { .testimonial-grid { grid-template-columns: 1.15fr 1fr; gap: var(--sp-9); } } .testimonial blockquote p { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.15; text-wrap: balance; } .testimonial figcaption { margin-top: var(--sp-5); font-weight: 600; display: flex; align-items: baseline; gap: var(--sp-3); } .testimonial figcaption span { font-weight: 400; color: var(--text-muted); } .team-callout { display: grid; gap: var(--sp-5); justify-items: start; padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); } .team-callout p { color: var(--text-muted); } /* Squared thumbnails, laid out as a strip rather than overlapping discs */ .team-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); width: 100%; } .team-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 14%; border-radius: var(--r-sm); background: var(--paper-2); } /* ========================================================================== PROVIDERS ========================================================================== */ .provider-grid { margin-top: var(--sp-6); } .provider-bio { display: grid; gap: var(--sp-7); align-items: start; } @media (min-width: 960px) { .provider-bio { grid-template-columns: 0.75fr 1fr; gap: var(--sp-9); } .provider-bio--flip .provider-bio__figure { order: 2; } } .provider-bio__figure { max-width: 26rem; } .provider-bio__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5); font-size: var(--step--1); color: var(--text-muted); } .provider-bio__meta span { display: inline-flex; align-items: center; gap: var(--sp-4); } .provider-bio__meta span:not(:last-child)::after { content: ""; width: 4px; height: 1px; background: currentColor; opacity: 0.6; } .provider-bio__body { max-width: var(--measure); color: var(--text-muted); } .provider-bio__body > * + * { margin-top: var(--sp-4); } /* ========================================================================== POLICIES ========================================================================== */ .policy { display: grid; gap: var(--sp-4); padding-block: var(--sp-7); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 5rem); } @media (min-width: 820px) { .policy { grid-template-columns: 5rem 1fr; gap: var(--sp-6); } } .policy__num { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--indigo); letter-spacing: var(--tracking-tight); line-height: 1; } .policy__title { font-size: var(--step-1); margin-bottom: var(--sp-3); } .policy__body { color: var(--text-muted); max-width: var(--measure); } .policy__body > * + * { margin-top: var(--sp-3); } .policy__body strong { color: var(--text); font-weight: 600; } /* ========================================================================== CONTACT ========================================================================== */ .contact-numbers { display: grid; gap: var(--sp-5); } @media (min-width: 700px) { .contact-numbers { grid-template-columns: repeat(3, 1fr); } } .contact-number { padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); } .contact-number dt { font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-3); } .contact-number dd { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; letter-spacing: var(--tracking-tight); } .contact-number dd a { text-decoration: none; color: var(--indigo); } .contact-number dd a:hover { text-decoration: underline; } .location--full { scroll-margin-top: calc(var(--nav-h) + 2rem); } /* ========================================================================== 404 ========================================================================== */ .notfound__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-6); } .notfound__list li { display: grid; gap: var(--sp-2); padding-left: var(--sp-5); border-left: 2px solid var(--line); } .notfound__list a { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--text); text-decoration: none; } .notfound__list a:hover { color: var(--indigo); } .notfound__list li:hover { border-left-color: var(--indigo); } .notfound__list span { color: var(--text-muted); }