/* ========================================================================== Client revision 2, October 2026. Loaded after site.css, inner-redesign.css and revision.css. It answers the client's four Loom reviews (L1.1 to L4.7) and the lead's design list (P1 to P13); every block names the items it answers. Nothing above this file was edited, so the approved design and the September round still read on their own. Two decisions run through the whole file. 1. The header, utility bar and mobile booking bar are the home page's, on every page (P1). The home page carries no `.premium-inner` on , so each rule here out-ranks the interior stylesheet's version of the same selector by one class or type, and also comes later in the cascade. 2. Every button and pill is the orthodontics hero's: .65rem corners, 700 weight, 48 and 56px heights (P5). That includes the header's booking button, which takes the brand purple the mobile booking bar already uses, so "Book a Consultation" looks the same wherever it appears. ========================================================================== */ /* The sticky "On this page" bar sits under the header. assets/js/revision-2.js publishes the measured height; these are the values it measures. */ :root { --header-h: 63px; } @media (min-width: 64rem) { :root { --header-h: 81px; } } @media (min-width: 64rem) and (max-width: 73.6875rem) { :root { --header-h: 152px; } } /* -------------------------------------------------------------------------- P1, P9, L1.1, L2.1. Utility bar: the home bar on every page -------------------------------------------------------------------------- */ body.premium-inner .util { min-height: 0; background: var(--ink-deep); background-image: none; color: rgba(255, 255, 255, 0.72); font-size: 0.88rem; } body.premium-inner .util__in { min-height: 46px; gap: 1rem; } .util .util__left, .util .util__right, .premium-inner .util .util__left, .premium-inner .util .util__right { gap: 1.35rem; } .premium-inner .util .util__in a { color: rgba(255, 255, 255, 0.82); font-size: inherit; font-weight: 500; min-height: 40px; } .premium-inner .util .util__in a:hover { color: #fff; } .util .util__primary a, .premium-inner .util .util__primary a { color: #fff; font-weight: 600; } .util .util__primary a:last-child, .premium-inner .util .util__primary a:last-child { font-weight: 700; letter-spacing: 0.01em; } .util .util__primary a:hover, .premium-inner .util .util__primary a:hover { color: var(--cyan); } .premium-inner .util .util__sep { display: block; } .premium-inner .util .util__social { display: flex; } /* P9: the utility menu is a run of adjacent links with no whitespace between them, and only the interior stylesheet ever spaced them. */ .utility-extra, .premium-inner .util .utility-extra { display: flex; align-items: center; gap: 1.35rem; } .premium-inner .util .utility-extra a + a::before { content: none; } /* -------------------------------------------------------------------------- P1, L3.6, L4.5. Header: one shell, one height, one layout -------------------------------------------------------------------------- */ .site-header, body.premium-inner .site-header { position: sticky; top: 0; z-index: 70; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 30px -28px rgba(25, 13, 50, 0.55); -webkit-backdrop-filter: none; backdrop-filter: none; } body.admin-bar .site-header, body.admin-bar.premium-inner .site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .site-header, body.admin-bar.premium-inner .site-header { top: 46px; } } .site-header__in, .premium-inner .site-header > .site-header__in { min-height: 62px; gap: 0.5rem; justify-content: space-between; flex-wrap: nowrap; padding-top: 0; } @media (min-width: 64rem) { .site-header__in, .premium-inner .site-header > .site-header__in { min-height: 80px; gap: 1.25rem; } } /* The brand lockup: mark, rule and practice name, at the home page's sizes. Scoped to the header so the footer lockup is untouched. */ .premium-inner .site-header .brand { flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 0; } .premium-inner .site-header .brand img, .premium-inner .site-header .brand .brand__logo { width: 104px; height: auto; } .premium-inner .site-header .brand__sep { display: none; height: 28px; } .premium-inner .site-header .brand__desc { display: block; font-size: 0.56rem; line-height: 1.25; letter-spacing: 0.05em; max-width: 8.5rem; } @media (min-width: 26rem) { .premium-inner .site-header .brand img, .premium-inner .site-header .brand .brand__logo { width: 118px; } .premium-inner .site-header .brand__desc { max-width: 10rem; } } @media (min-width: 40rem) { .premium-inner .site-header .brand { flex-direction: row; align-items: center; gap: 0.7rem; } .premium-inner .site-header .brand__sep { display: block; } .premium-inner .site-header .brand img, .premium-inner .site-header .brand .brand__logo { width: 132px; } .premium-inner .site-header .brand__desc { font-size: 0.62rem; max-width: none; } } @media (min-width: 64rem) { .premium-inner .site-header .brand img, .premium-inner .site-header .brand .brand__logo { width: 158px; } .premium-inner .site-header .brand__sep { height: 33px; } } /* L3.6, L4.5: Visit and Call sit in the header on every phone, not only on the home page. The interior stylesheet hid them outright. */ .premium-inner .site-header .header-actions > .icon-btn.icon-btn--label { display: inline-flex; } @media (min-width: 64rem) { .premium-inner .site-header .header-actions > .icon-btn.icon-btn--label { display: none; } } /* P1, P5: the header's booking button is the orthodontics button, in the brand purple of the mobile booking bar. */ .site-header .header-actions .cta-desktop, .premium-inner .site-header .header-actions .cta-desktop { min-height: 48px; padding-inline: 1.45rem; border: 1px solid var(--ortho); border-radius: 0.65rem; background: var(--ortho); color: #fff; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.005em; box-shadow: 0 13px 28px -20px rgba(70, 45, 136, 0.75); } .site-header .header-actions .cta-desktop:hover, .premium-inner .site-header .header-actions .cta-desktop:hover { background: var(--ortho-dark); border-color: var(--ortho-dark); color: #fff; transform: translateY(-1px); } /* P1, P3: the primary navigation, with ONE active indicator. The interior stylesheet drew a grow-in bar (::after) under the same link that site.css already underlines, so the current page showed two lines. */ .premium-inner .site-header .nav-desktop a::after, .premium-inner .site-header .nav-desktop a:hover::after, .premium-inner .site-header .nav-desktop a[aria-current="page"]::after { content: none; } @media (min-width: 64rem) { .premium-inner .site-header .nav-desktop ul { gap: 1.35rem; } .premium-inner .site-header .nav-desktop a { position: static; padding-block: 0 2px; color: var(--ink); font-size: 0.9rem; font-weight: 600; } .premium-inner .site-header .nav-desktop > ul > li > a { display: inline-block; padding-top: 0; margin-top: 0; } .nav-desktop a:hover, .premium-inner .site-header .nav-desktop a:hover { color: var(--ortho); } .nav-desktop .current-menu-item > a, .premium-inner .site-header .nav-desktop .current-menu-item > a, .premium-inner .site-header .nav-desktop a[aria-current="page"] { color: var(--ortho); border-bottom: 2px solid var(--ortho); } .nav-desktop ul { gap: 1.35rem; } .nav-desktop a { font-size: 0.9rem; font-weight: 600; } } /* 1024 to 1179px: the nav takes its own row under the brand, as the home page already did (site.css), because one row would clip the booking button. */ @media (min-width: 64rem) and (max-width: 73.6875rem) { .site-header__in, .premium-inner .site-header > .site-header__in { flex-wrap: wrap; min-height: 0; padding-top: 0.85rem; } .site-header .brand, .site-header .header-actions, .premium-inner .site-header .brand, .premium-inner .site-header .header-actions { min-height: 56px; } .premium-inner .site-header .nav-desktop { order: 3; flex-basis: 100%; border-top: 1px solid var(--line); margin-top: 0.5rem; } .site-header .nav-desktop ul, .premium-inner .site-header .nav-desktop ul { gap: 1.5rem; } /* One row height on every page: a later site.css rule gave the home links an 18px padding trick here, which collapsed the home row to 31px. */ .site-header .nav-desktop > ul > li > a, .premium-inner .site-header .nav-desktop > ul > li > a { display: inline-flex; align-items: center; min-height: 46px; padding: 0; margin: 0; } .premium-inner .site-header .brand__sep, .premium-inner .site-header .brand__desc { display: block; } } /* P1: the mobile booking bar, drawer and focus ring match the home page. */ body.premium-inner .actionbar { background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -14px rgba(26, 18, 54, 0.4); -webkit-backdrop-filter: none; backdrop-filter: none; } .actionbar a, body.premium-inner .actionbar a { border-radius: 0.65rem; font-size: 0.9rem; font-weight: 700; } body.premium-inner .actionbar .actionbar__call { background: transparent; } .actionbar a.actionbar__book, body.premium-inner .actionbar a.actionbar__book { border-radius: 0.65rem; font-size: 1rem; font-weight: 700; } .premium-inner .site-header :where(a, button):focus-visible, .premium-inner .nav-drawer :where(a, button):focus-visible { outline: 3px solid var(--ortho); outline-offset: 2px; border-radius: 3px; } /* -------------------------------------------------------------------------- P5, P2. One button, one pill -------------------------------------------------------------------------- */ .btn, .premium-inner .btn { border-radius: 0.65rem; font-weight: 700; letter-spacing: -0.005em; } .btn:hover, .premium-inner .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(23, 13, 48, 0.7); } .btn:active, .premium-inner .btn:active { transform: none; } .btn--outline, .premium-inner .btn--outline { border-color: var(--ink); background: #fff; } /* Restated because the two lines above out-rank site.css's hover rules. */ .btn--outline:hover, .premium-inner .btn--outline:hover { border-color: var(--ink); background: var(--ink); color: #fff; } .pill, .premium-inner .pill { min-height: 48px; padding-inline: 1.1rem; border-color: #dcd5e7; border-radius: 0.65rem; font-weight: 600; box-shadow: 0 10px 26px -24px rgba(28, 16, 53, 0.5); } .pill:hover, .premium-inner .pill:hover { border-color: var(--ortho); color: var(--ink); } /* The hero cluster (inc/template-tags.php, elite_ortho_hero_actions). */ .hero-cta { margin-top: 1.75rem; gap: 0.75rem; } .hero-pills { gap: 0.6rem; margin-top: 1rem; } .premium-inner .ihero__copy > .hero-cta { margin-top: 0.5rem; } .premium-inner .ihero__copy > .hero-pills { margin-top: -0.25rem; } /* L4.4: the rating, at the top of every page, in one line. */ .hero-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.55rem; margin-top: 1.1rem; font-size: 0.9rem; color: var(--body); text-decoration: none; } .hero-rating .stars { color: var(--star); } .hero-rating strong { font-family: var(--display); font-size: 1.02rem; font-weight: 700; color: var(--ink); } a.hero-rating:hover span { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .premium-inner .ihero__copy > .hero-rating { margin-top: -0.2rem; } /* P11: booking rows inside a page (elite_ortho_inline_cta). */ .inline-cta { margin-top: 2rem; } .inline-cta--center { justify-content: center; } .inline-cta .btn:not(.btn--lg), .premium-inner .inline-cta .btn:not(.btn--lg) { min-height: 48px; padding-inline: 1.35rem; font-size: 0.93rem; } .faqpage__nav .inline-cta, .premium-inner .faqpage__nav .inline-cta { margin-top: 1.25rem; } /* The FAQ column styles every link in it as a jump link (inner-redesign.css); that must not reach its booking button or the telephone link in its text. */ .premium-inner .faqpage__nav .inline-cta a.btn { display: inline-flex; justify-content: center; padding-block: 0; border-color: transparent; border-radius: 0.65rem; color: #fff; } .premium-inner .faqpage__nav .inline-cta a.btn--ortho:hover { background: var(--ortho-dark); color: #fff; } .premium-inner .faqpage__nav .inline-cta a.btn--ped:hover { background: var(--ped-dark); color: #fff; } .premium-inner .faqpage__nav p a { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--lane); font-weight: 700; } /* Everything that sticks follows the real header, not a copied height. */ .premium-inner .faqpage__nav, .premium-inner .faq-layout > div:first-child, .premium-inner .profile-label { top: calc(var(--header-h, 81px) + 1.5rem); } .faq-layout .inline-cta, .premium-inner .faq-layout .inline-cta { margin-top: 1.25rem; } .person__acts, .premium-inner .person__acts { margin-top: 0.9rem; gap: 0.5rem 1.1rem; } /* -------------------------------------------------------------------------- P4, L2.11. Every button reads on a dark surface The outline button was written for light sections only, so on the booking band and the other dark panels it went dark on dark. -------------------------------------------------------------------------- */ :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark, .cost-tile, .svc--cta, .section--ink, .site-footer) .btn--outline, .premium-inner :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark, .cost-tile, .svc--cta, .section--ink, .site-footer) .btn--outline { border-color: rgba(255, 255, 255, 0.6); background: transparent; color: #fff; } :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark, .cost-tile, .svc--cta, .section--ink, .site-footer) .btn--outline:is(:hover, :focus-visible), .premium-inner :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark, .cost-tile, .svc--cta, .section--ink, .site-footer) .btn--outline:is(:hover, :focus-visible) { border-color: #fff; background: #fff; color: var(--ink); } :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark, .section--ink) .btn--ink, .premium-inner :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark, .section--ink) .btn--ink { background: #fff; color: var(--ink); } :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark, .section--ink) .btn--ink:hover, .premium-inner :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark, .section--ink) .btn--ink:hover { background: var(--ortho-tint); color: var(--ink); } :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark) .tlink, .premium-inner :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark) .tlink { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.35); } :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark) .book-cta__note { color: rgba(255, 255, 255, 0.75); } :is(.band, .closing-panel, .footer-conversion, .card--ink, .panel--dark) .book-cta__note a { color: #fff; } /* -------------------------------------------------------------------------- L1.4. No arrows on buttons or call-to-action links The glyphs in the templates are gone; these are the ones the approved stylesheet draws. The cost tile keeps a cue, as words. -------------------------------------------------------------------------- */ .premium-inner .svc--cta > span:last-child::after, .premium-inner .sect-head > .tlink::after, .premium-inner .cost-tile::after, .premium-inner .svc__more::after { content: none; } .premium-inner .cost-tile .tlink { display: inline-flex; color: #b8f1ef; border-bottom-color: rgba(184, 241, 239, 0.4); } /* -------------------------------------------------------------------------- P8. The treatment page's "On this page" bar sticks under the header -------------------------------------------------------------------------- */ .subnav, .premium-inner .subnav { position: sticky; top: var(--header-h, 63px); z-index: 35; overflow: visible; } @media (min-width: 64rem) { .premium-inner .subnav a { min-height: 3.6rem; padding: 0 1rem; } } .premium-inner .subnav a.is-current { color: var(--lane); } @media (max-width: 47.99rem) { .premium-inner .subnav { margin-top: 1rem; } .premium-inner .subnav .wrap { padding-inline: var(--gut); } .premium-inner .subnav ul { flex-wrap: wrap; justify-content: center; gap: 0 0.1rem; min-width: 0; padding: 0; } .premium-inner .subnav a { min-height: 40px; padding: 0 0.55rem; font-size: 0.8rem; } } /* -------------------------------------------------------------------------- P7. Breadcrumbs: same everywhere, AA contrast on the hero gradient -------------------------------------------------------------------------- */ .premium-inner .breadcrumbs, .premium-inner .breadcrumbs a { color: #6b6279; } .premium-inner .breadcrumbs a:hover { color: var(--lane); } /* -------------------------------------------------------------------------- L3.2, L3.7. Section labels read at a sensible ratio to their headings; the home eyebrow is one line on a phone -------------------------------------------------------------------------- */ .sect-head .eyebrow, .premium-inner .sect-head .eyebrow { font-size: 0.86rem; letter-spacing: 0.1em; } .section--ink .eyebrow { color: rgba(255, 255, 255, 0.82); } .panel__k, .premium-inner .panel__k { font-size: 0.8rem; } /* -------------------------------------------------------------------------- L1.7, L2.10. The whole support team fits the row, however many there are -------------------------------------------------------------------------- */ @media (min-width: 64rem) { .rail--staff { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); } } /* -------------------------------------------------------------------------- L4.2. "Four things families tell us": the other three fold on a phone -------------------------------------------------------------------------- */ .readmore--numbered { margin-top: 0; } .readmore--numbered > summary { padding-block: 0.75rem; } .readmore--numbered .readmore__body { padding-top: 0; } /* -------------------------------------------------------------------------- L2.3, P11. The insurance and financing summary, rebuilt Same content and settings, clearer hierarchy: carriers carry a mark, each way to pay is an icon row, and both cards end in a way to act. -------------------------------------------------------------------------- */ .ins-summary__grid { align-items: stretch; gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem); } .ins-summary .card { height: 100%; border-radius: 1.25rem; } .ins-summary .card__body { height: 100%; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); gap: 1rem; } .ins-summary .card__body > :is(.carriers, .ins-card__note, .pay-list, .pay-card__foot, .book-cta) { align-self: stretch; } .ins-summary h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.35rem); line-height: 1.08; } .ins-card__lede { color: var(--body); } .ins-card .ins-card__k { margin-top: 0.35rem; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ped); } .carriers { list-style: none; padding: 0; } .ins-card .carriers { margin-top: 0; } .carrier { gap: 0.45rem; padding: 0.45rem 0.85rem 0.45rem 0.7rem; } .carrier svg { color: var(--ped); flex-shrink: 0; } .ins-card__note { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: 0.75rem; background: var(--mist); color: var(--body); font-size: var(--fs-sm); line-height: 1.5; } .ins-card__note svg { flex-shrink: 0; margin-top: 2px; color: var(--ortho); } .ins-summary .ins-card__acts { margin-top: auto; padding-top: 0.5rem; } .pay-card .tag { background: rgba(255, 255, 255, 0.12); color: #fff; } .pay-list { display: grid; margin: 0.25rem 0 0; padding: 0; list-style: none; } .pay-list__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .pay-list__item:first-child { padding-top: 0.4rem; border-top: 0; } .pay-list__item .disc { width: 44px; height: 44px; border-radius: 0.8rem; } .pay-list__item h3 { font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.015em; color: #fff; } .pay-list__item p { margin-top: 0.3rem; font-size: 0.93rem; line-height: 1.55; color: rgba(255, 255, 255, 0.72); } .ins-summary .pay-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); } .pay-card__promise { display: flex; align-items: flex-start; gap: 0.5rem; max-width: 32ch; font-size: 0.88rem; line-height: 1.45; color: rgba(255, 255, 255, 0.75); } .pay-card__promise svg { flex-shrink: 0; margin-top: 2px; color: var(--cyan); } /* -------------------------------------------------------------------------- P6. One gutter on phones and tablets The interior stylesheet widened it on tablets only; home and inner pages now share the same edge. -------------------------------------------------------------------------- */ @media (max-width: 63.99rem) { :root, body.premium-inner { --gut: clamp(1.25rem, 4vw, 2rem); } } /* ========================================================================== P10, P12, P13, L3.7, L3.11, L4.1. Phones Sizes and spacing only: the same components in the same order and colours, smaller type and tighter rhythm, so the first screen shows the heading, the buttons and the rating on every page. ========================================================================== */ @media (max-width: 47.99rem) { /* Section rhythm: 48px, down from 52px (home) and 64px (inner pages). */ :root, body.premium-inner { --sect: 3rem; } /* Type scale. Home and inner headings now match (were 33px and 42px). */ h1, .premium-inner .ihero__copy h1, .premium-inner .ihero--profile .ihero__copy h1 { font-size: clamp(2rem, 8.8vw, 2.4rem); line-height: 1.04; letter-spacing: -0.04em; } h2, .premium-inner h2 { font-size: clamp(1.6rem, 6.8vw, 1.9rem); line-height: 1.1; letter-spacing: -0.035em; } h3 { font-size: 1.22rem; } .lede, .premium-inner .lede, .premium-inner .ihero__copy .lede { font-size: 1rem; line-height: 1.58; } .eyebrow, .premium-inner .eyebrow { font-size: 0.76rem; } .sect-head .eyebrow, .premium-inner .sect-head .eyebrow { font-size: 0.8rem; } /* L3.7: the home eyebrow ends in "Wayne NJ" on one line. */ .eyebrow--dual { white-space: nowrap; gap: 0.5rem; font-size: clamp(0.62rem, 2.75vw, 0.76rem); letter-spacing: 0.07em; } .eyebrow--dual::before, .eyebrow--dual::after { width: 1rem; } /* Heroes: less padding, tighter stack, buttons full width, the rating in view. The Directions and contact pills step aside on a phone: the sticky header already carries Visit and Call, and the booking bar carries Book. */ .home-hero { padding-top: 1.5rem; } .premium-inner .ihero { padding-block: 1.25rem 2.5rem; } .premium-inner .ihero__copy { gap: 0.85rem; } .premium-inner .breadcrumbs { margin-bottom: 0; } .premium-inner .breadcrumbs a, .premium-inner .breadcrumbs > span { min-height: 34px; } .hero-cta { flex-direction: column; align-items: stretch; gap: 0.6rem; margin-top: 1.4rem; } .hero-cta .btn { width: 100%; } /* The interior hero copy is a flex column that shrinks its children. */ .premium-inner .ihero__copy > .hero-cta { align-self: stretch; width: 100%; } .hero-pills { display: none; } .hero-rating { margin-top: 0.9rem; font-size: 0.85rem; } /* Buttons: 52px for the large one, 48px for the rest. */ .btn--lg, .premium-inner .btn--lg, .book-cta .btn, .premium-inner .book-cta .btn { min-height: 52px; padding-inline: 1.25rem; font-size: 0.97rem; } .inline-cta .btn:not(.btn--lg), .premium-inner .inline-cta .btn:not(.btn--lg) { min-height: 48px; } .inline-cta { margin-top: 1.5rem; } /* L4.4: on the home page the rating card comes before the portraits. */ .home-hero .split--wide-left > div + div { display: flex; flex-direction: column-reverse; margin-top: 1.5rem !important; } .home-hero .split--wide-left > div + div > .card { margin-top: 0 !important; margin-bottom: 1rem; } /* Facts bar under treatment and clinician heroes: same list, tighter rows. */ .premium-inner .fact { padding: 0.8rem 0; } /* L3.11, L4.1: a doctor on a phone is a photograph, a specialty, a name and the next step, on every page, as on the home page. */ .premium-inner .person--wide { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 1rem; padding: 0.9rem; min-height: 0; } .premium-inner .person--wide > a { padding: 0; background: none; } .premium-inner .person--wide .person__photo { width: 92px; max-width: none; height: auto; aspect-ratio: 1 / 1.1; border-radius: 999px 999px 12px 12px; } .premium-inner .person--wide .person__photo img { object-fit: cover; object-position: center top; } /* The chip would be clipped by the 92px photo column; the booking button under the name already names the specialty. */ .premium-inner .person--wide .person__chip { display: none; } .premium-inner .person--wide > div { padding: 0; } .premium-inner .person--wide h3 { margin-top: 0.2rem; font-size: 1.1rem; } .premium-inner .person--wide > div > p, .premium-inner .person--wide .checks, .premium-inner .meet__body > p:not(.eyebrow):not(.meet__role), .premium-inner .meet__body .checks { display: none; } .premium-inner .person--wide .person__acts { margin-top: 0.6rem; } .premium-inner .meet { gap: 1.25rem; } .premium-inner .meet__photo { max-width: 12rem; } .premium-inner .meet__body h2 { font-size: 1.5rem; } /* Insurance summary on a phone. */ .ins-summary .card__body { padding: 1.35rem; } .ins-summary .pay-card__foot .btn { width: 100%; } }