@import url("assets/fonts/fonts.css"); /* ============================================================ HALO Wellness Clinic Two registers, one clinic. Light for care, night for recovery. ============================================================ */ :root{ --paper:#F6F8F9; --paper-2:#FFFFFF; --paper-3:#EDF2F4; --ink:#0D1A22; --ink-2:#3E5361; /* 4.03:1 on paper and 3.81:1 on the tint, both under AA, and this is the label colour for kickers, captions, hours and the trademark line, so it was failing on every page. Same hue and chroma, darker: 4.8:1 and 4.5:1. */ --ink-3:#5E717D; --rule:#DCE4E8; --rule-2:#C7D3D9; --az:#0A8FCE; --az-deep:#06618F; --night:#0A141B; --night-2:#0F1F29; --night-rule:#1D303C; --night-ink:#E8F0F4; --night-ink-2:#9BB0BC; --az-lit:#3FB4E8; /* Yellow is the recognition colour, and it has one job: it appears only where the clinic's earned record is being stated. Azure is the clinic, yellow is the record. Sampled from the Best of Las Vegas gold winner certificate the clinic already holds (its own artwork runs #A47C3F to #D2B25C), then taken to a true yellow. The whole ramp sits at hue 51. The first cut sampled the certificate directly and landed at hue 46, which is amber, and its dark cuts fell to hue 41, which is brown. One hue across all four steps is what makes the dark cuts read as dark yellow rather than as a different colour. Yellow is a night colour and the ramp exists because of that: the reference tone is 1.4:1 on paper, failing even the 3:1 graphics floor, so light grounds get the deeper cuts and never the reference tone. For a yellow, saturation and luminance rise together, so lightness is the only honest lever against those floors. */ --yellow:#F2D21C; /* reference. The mark, artwork, large graphics on night */ --yellow-lit:#F5DA4E; /* small text and hairlines on night: 13.3:1 */ --yellow-line:#9C8506; /* hairlines and graphics on paper: 3.4:1 */ --yellow-deep:#7C6A05; /* yellow text on paper: 5.0:1, AA */ --ui:'Switzer',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --ed:'Newsreader',ui-serif,Georgia,'Times New Roman',serif; --gut:clamp(20px,4.6vw,72px); --maxw:1360px; --bg:var(--paper); --fg:var(--ink); --fg2:var(--ink-2); --fg3:var(--ink-3); --line:var(--rule); --sig:var(--az); --sig-text:var(--az-deep); } :root{--night-3:#14242F} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--ui);font-size:17px;line-height:1.55; font-feature-settings:"kern","liga","cv05"; -webkit-font-smoothing:antialiased; overflow-x:clip; } img,svg{max-width:100%;display:block} img{height:auto} a{color:inherit} h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-0.012em;line-height:1.08} p{margin:0} ul{margin:0;padding:0;list-style:none} /* ---------- shell ---------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} /* Every register paints its OWN ground. A plain .band with no background was relying on 's background, which is fine on index.html (paper) but wrong on recovery.html: body.page-night forces the whole page dark for the hero, and the light-register bands further down the page (Visit) inherited that dark body background while keeping light-register text colours — dark ink on a dark body, unreadable. Each band is now self-contained regardless of body. */ .band{position:relative;padding-block:clamp(64px,9vw,132px);background:var(--paper)} /* AZURE IS CARE. YELLOW IS PERFORMANCE. The clinic's whole proposition is two sides in one suite: family chiropractic on the light register, the recovery floor on the night one. Giving each side its own accent is why yellow now has real territory instead of appearing once a page. Recognition stays yellow too, and reads as part of the same idea: earned things are yellow. The mark stays azure on both, because the mark is the clinic rather than either half of it. */ .band--night{ background:var(--night);color:var(--night-ink); --bg:var(--night);--fg:var(--night-ink);--fg2:var(--night-ink-2);--fg3:var(--night-ink-2); --line:var(--night-rule);--sig:var(--yellow);--sig-text:var(--yellow-lit); } .band--tint{background:var(--paper-3);--bg:var(--paper-3)} /* ---------- type roles ---------- */ .kicker{ font-size:11.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase; color:var(--fg3);display:flex;align-items:center;gap:.7em; } .kicker::before{content:"";width:26px;height:1px;background:var(--sig);flex:none} .h-xl{font-size:clamp(2.5rem,6.2vw,4.6rem);line-height:1.02;letter-spacing:-0.021em;font-weight:500} .h-lg{font-size:clamp(1.95rem,3.9vw,3.15rem);line-height:1.06;letter-spacing:-0.018em} .h-md{font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.16;letter-spacing:-0.012em} .h-sm{font-size:1.06rem;line-height:1.3;letter-spacing:-0.004em;font-weight:600} .lede{font-size:clamp(1.06rem,1.5vw,1.26rem);line-height:1.5;color:var(--fg2);max-width:34ch} .body{color:var(--fg2);max-width:62ch} .body + .body{margin-top:1em} .ed{font-family:var(--ed);font-weight:380;font-style:italic;letter-spacing:0} .num{font-variant-numeric:tabular-nums lining-nums} .small{font-size:14px;line-height:1.5;color:var(--fg3)} .mark-az{color:var(--sig-text)} /* ---------- links + buttons ---------- */ .lnk{ display:inline-flex;align-items:center;gap:.55em;min-height:44px; text-decoration:none;font-weight:500;font-size:15px;color:var(--fg); border-bottom:1px solid var(--line);transition:border-color .35s ease,color .35s ease; } .lnk .ar{transition:transform .45s cubic-bezier(.22,1,.3,1)} .lnk:hover,.lnk:focus-visible{color:var(--sig-text);border-color:var(--sig)} .lnk:hover .ar,.lnk:focus-visible .ar{transform:translateX(5px)} /* A slow yellow shimmer across the primary call button. It runs on a long cycle with a long pause, so it reads as a highlight catching the surface rather than a loading bar. Masked to the button, so nothing escapes the pill. */ .btn{position:relative;overflow:hidden;isolation:isolate} .btn > *{position:relative;z-index:1} .btn--call::after{ content:"";position:absolute;top:0;bottom:0;left:0;right:0;z-index:0; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.20) 47%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.20) 53%, transparent 62%); background-size:260% 100%;background-repeat:no-repeat; animation:btn-shimmer 6.5s ease-in-out 1.2s infinite; } .band--night .btn--call::after{ background-image:linear-gradient(105deg, transparent 38%, rgba(10,20,27,.10) 47%, rgba(10,20,27,.16) 50%, rgba(10,20,27,.10) 53%, transparent 62%); } /* animating background-position, not transform: the highlight travels inside the pill instead of a wedge sliding across it, which is what made it look like a band rather than light. 70% of the cycle is an empty hold. */ @keyframes btn-shimmer{ 0%{background-position:170% 0} 30%,100%{background-position:-70% 0} } @media (prefers-reduced-motion:reduce){.btn--call::after{animation:none;opacity:0}} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; min-height:52px;padding:0 26px;border-radius:999px; font-weight:600;font-size:15.5px;letter-spacing:.005em;text-decoration:none; background:var(--ink);color:#fff;border:1px solid var(--ink); transition:background .35s ease,border-color .35s ease,color .35s ease; } .btn:hover,.btn:focus-visible{background:var(--az-deep);border-color:var(--az-deep)} .band--night .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)} .band--night .btn:hover{background:#fff;border-color:#fff;color:var(--ink)} .btn--ghost{background:transparent;color:var(--fg);border-color:var(--rule-2)} .btn--ghost:hover,.btn--ghost:focus-visible{background:transparent;color:var(--sig-text);border-color:var(--sig)} .band--night .btn--ghost{background:transparent;color:var(--night-ink);border-color:#2A414F} .band--night .btn--ghost:hover{background:transparent;color:var(--yellow-lit);border-color:var(--yellow)} :where(a,button,summary):focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:2px} /* ---------- header ---------- */ .hdr{ position:sticky;top:0;z-index:60;background:rgba(246,248,249,.92); border-bottom:1px solid var(--rule); transition:background .4s ease,border-color .4s ease,color .4s ease; } @supports (backdrop-filter:blur(6px)){.hdr{background:rgba(246,248,249,.82);backdrop-filter:blur(9px) saturate(1.1)}} .hdr__in{display:flex;align-items:center;gap:24px;min-height:92px} .hdr__logo{display:flex;align-items:center;flex:none;text-decoration:none;min-height:44px} .hdr__logo svg,.hdr__logo img{height:54px;width:auto} .hdr__logo .lg-night{display:none} .nav{display:flex;gap:4px;margin-left:auto} .nav a{ display:inline-flex;align-items:center;min-height:44px;padding:0 14px; text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-2); border-radius:2px;transition:color .3s ease;position:relative; } .nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:16px;height:1px;background:var(--sig);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.3,1)} .nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"]{color:var(--ink)} .nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{transform:scaleX(1)} .hdr__call{display:flex;align-items:center;gap:14px;flex:none} .hdr__tel{ display:inline-flex;align-items:center;gap:.5em;min-height:44px;text-decoration:none; font-weight:600;font-size:15px;letter-spacing:.005em;color:var(--ink); } .hdr__tel:hover{color:var(--az-deep)} .hdr.is-night{background:rgba(10,20,27,.9);border-color:#1D303C;color:var(--night-ink)} @supports (backdrop-filter:blur(6px)){.hdr.is-night{background:rgba(10,20,27,.78)}} .hdr.is-night .nav a{color:var(--night-ink-2)} .hdr.is-night .nav a:hover,.hdr.is-night .nav a[aria-current="page"]{color:var(--night-ink)} .hdr.is-night .hdr__tel{color:var(--night-ink)} .hdr.is-night .hdr__tel:hover{color:var(--az-lit)} .hdr.is-night .lg-day{display:none} .hdr.is-night .lg-night{display:block} .hdr.is-night .btn--ghost{color:var(--night-ink);border-color:#2A414F} .menu-btn{display:none} .drawer{display:none} /* ---------- hero ---------- */ .hero{position:relative;padding-top:clamp(38px,5vw,64px);padding-bottom:clamp(48px,6vw,86px);overflow:visible} .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(28px,5vw,72px);align-items:center} .hero__copy{position:relative;z-index:2;padding-bottom:8px} .hero h1{margin-top:22px;max-width:15ch;text-wrap:balance} .hero h1 .ed{color:var(--sig-text)} /* On night, --sig-text is the yellow cut, so the italic joins the register instead of leaving azure and yellow competing inside one band. The halo arcs behind the equipment stay azure: that is the mark, not the register. */ .band--night .ed,.page-night .hero h1 .ed{color:var(--sig-text)} .hero__lede{margin-top:24px} .hero__act{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center} .hero__meta{margin-top:34px;padding-top:20px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:8px 34px} .hero__meta div{min-width:130px} .hero__meta dt{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .hero__meta dd{margin:5px 0 0;font-size:15px;font-weight:500} .hero__fig{position:relative;align-self:center;height:clamp(400px,54vw,620px);overflow:hidden;border-radius:2px} .hero__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;border-radius:2px} .hero__ring{position:absolute;overflow:clip;inset:auto -18% 6% auto;width:min(46vw,560px);aspect-ratio:1;z-index:0;pointer-events:none;opacity:.5} .hero__ring svg{width:100%;height:100%;overflow:visible} /* The hero credential sat as loose type over the page. It is a stated award, so it now reads as a label: a bordered container in the yellow register, the same family as the filled .chip-yellow in the award band. Outlined rather than filled because this line is long, and a filled bar that wide would shout. */ .award{ position:absolute;left:0;bottom:calc(100% + 16px); display:inline-flex;align-items:center;gap:9px; padding:8px 16px 8px 13px;border:0;border-radius:999px;background:var(--ink); font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#EDF3F6; } .band--night .award,.page-night .award{background:rgba(255,255,255,.08);color:var(--night-ink)} .award span{width:7px;height:7px;border-radius:50%;background:var(--az);flex:none} /* ---------- ruled index ---------- */ .facts{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .facts ul{display:grid;grid-template-columns:repeat(4,1fr)} .facts li{padding:26px 22px 26px 0;border-left:1px solid var(--rule);padding-left:22px} .facts li:first-child{border-left:0;padding-left:0} .facts b{display:block;font-size:clamp(1.1rem,1.6vw,1.34rem);font-weight:500;letter-spacing:-0.01em} .facts .small{margin-top:7px;max-width:24ch} /* ---------- section head ---------- */ .shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(22px,4vw,64px);align-items:end;margin-bottom:clamp(34px,4.4vw,60px)} .shead h2{margin-top:18px;max-width:22ch;text-wrap:balance} .shead__aside{padding-bottom:6px} /* ---------- split feature ---------- */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4.6vw,70px);align-items:center} .split--wide{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)} .split figure{margin:0;position:relative} .split img{width:100%;object-fit:cover;border-radius:2px} .cap{margin-top:12px;font-size:12.5px;letter-spacing:.06em;color:var(--fg3);text-transform:uppercase;font-weight:500} /* photo that breaks the right edge */ .bleed-r{margin-right:calc(var(--gut) * -1)} @media (min-width:1500px){.bleed-r{margin-right:calc((100vw - var(--maxw))/-2 - var(--gut))}} /* ---------- steps ---------- */ .steps{border-top:1px solid var(--line);counter-reset:s} .steps li{ display:grid;grid-template-columns:54px minmax(0,232px) minmax(0,1fr);gap:clamp(14px,2vw,30px); padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline; } .steps li::before{ counter-increment:s;content:counter(s,decimal-leading-zero); font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--sig-text); font-variant-numeric:tabular-nums; } .steps p{color:var(--fg2);max-width:72ch} /* ---------- modality index ---------- */ .index{ display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:clamp(20px,2.4vw,34px) clamp(24px,3vw,48px); } .index__row{padding-top:20px;border-top:1px solid var(--line)} .index__row h3{font-size:1.02rem;font-weight:600;letter-spacing:-0.004em} .index__row p{margin-top:9px;color:var(--fg2);font-size:15px;line-height:1.5;max-width:40ch} /* ---------- gallery strip ---------- */ .strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)} .strip figure{margin:0} .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px} /* ---------- equipment (night) ---------- */ .kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,42px) clamp(20px,3vw,52px)} .kit__item{display:flex;flex-direction:column;padding-top:22px;border-top:1px solid var(--night-rule)} .kit__ph{ position:relative;height:clamp(140px,15vw,210px);display:flex;align-items:center;justify-content:center; margin-bottom:22px; } .kit__ph img{max-height:100%;width:auto;object-fit:contain} .kit h3{font-size:1.04rem;font-weight:600;margin-bottom:9px} .kit p{font-size:15px;color:var(--night-ink-2);max-width:44ch} /* ---------- testimonials ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,52px)} .quote{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--line)} .quote blockquote{margin:0;font-family:var(--ed);font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.42;font-weight:380;color:var(--fg)} .quote figcaption{font-size:13.5px;color:var(--fg3);margin-top:auto} .quote figcaption b{display:block;color:var(--fg);font-weight:600;font-size:14.5px;letter-spacing:-0.002em} .quote__ph{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;max-width:170px} /* ---------- team ---------- */ .team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)} /* The bio is short and the portrait is tall, so top-aligning them left a void under every bio, eight times down the page. Centred, the row is composed and the void is gone. */ /* The portrait used to be capped at 340px inside a 600px column, which left a 260px hole between picture and text on every row. The column is now sized to the picture instead of the picture being shrunk inside the column. */ .member-row{align-items:center;grid-template-columns:minmax(0,.48fr) minmax(0,1fr)} .member-row:first-of-type{grid-template-columns:minmax(0,.58fr) minmax(0,1fr)} @media (max-width:820px){.member-row,.member-row:first-of-type{grid-template-columns:1fr}} .member-row--flip > :first-child{order:2} .member-row--flip > :last-child{order:1} @media (max-width:820px){.member-row--flip > :first-child{order:0}.member-row--flip > :last-child{order:0}} .member figure{margin:0} .member img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;filter:grayscale(.16) contrast(1.02)} .member h3{margin-top:16px;font-size:1.02rem;font-weight:600} .member .role{font-size:13.5px;color:var(--fg3);margin-top:4px} .member p{margin-top:10px;font-size:14.5px;color:var(--fg2);line-height:1.5} /* ---------- visit ---------- */ .visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(28px,4.4vw,72px);align-items:start} .dl{border-top:1px solid var(--line)} .dl__row{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:18px;padding:11px 0;border-bottom:1px solid var(--line);align-items:center} .dl__row dt{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3)} .dl__row dd{margin:0;font-size:15.5px;font-weight:500} .dl__row dd a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid var(--line)} .dl__row dd a.inline{display:inline;min-height:0} .dl__row dd a:hover{color:var(--sig-text);border-color:var(--sig)} /* ---------- crossing marker ---------- */ .cross{position:relative;height:0} .cross__ring{ position:absolute;left:50%;top:-52px;transform:translateX(-50%); width:104px;height:104px;pointer-events:none; } /* ---------- footer ---------- */ .foot{background:var(--night);color:var(--night-ink-2);padding-block:clamp(48px,6vw,78px); --line:var(--night-rule);--fg3:var(--night-ink-2);--sig:var(--yellow);--sig-text:var(--yellow-lit)} .foot__top{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,.62fr));gap:clamp(24px,3vw,48px);padding-bottom:44px;border-bottom:1px solid var(--night-rule)} .foot__logo svg,.foot__logo img{height:76px;width:auto} .foot h4{font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#6E8593;margin-bottom:16px} .foot li + li{margin-top:2px} .foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:15px;color:var(--night-ink-2);border-bottom:1px solid transparent;transition:color .3s ease,border-color .3s ease} .foot a:hover,.foot a:focus-visible{color:var(--night-ink);border-color:var(--yellow)} .foot__base{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:13px;color:#6E8593} .foot__disc{max-width:70ch;line-height:1.5} /* ---------- reading progress ---------- A hairline across the top of the viewport, above the header. It is an indicator rather than decoration, so it stays under reduced motion; only the easing is dropped. Driven by a custom property, so the JS writes one number and never touches layout. */ .progress{ position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none; background:transparent; } .progress i{ display:block;height:100%;width:100%;transform:scaleX(var(--sp,0));transform-origin:left; background:linear-gradient(90deg,var(--yellow-deep),var(--yellow)); transition:transform .12s linear; } .hdr.is-night ~ * .progress,.progress{will-change:transform} @media (prefers-reduced-motion:reduce){.progress i{transition:none}} /* ---------- headline reveal: a wipe, not a fade-up ---------- The register bans fade-up as the default gesture and the site was using it on everything, headlines included. Headlines now wipe in from the left, which is the same direction as the section rule that draws under them, so the two read as one movement. Body copy keeps a short fade, at 8px rather than 14. */ /* A curtain in the band's own ground slides off the headline, rather than the headline being clipped open. Two reasons, and the second is the important one: it transitions `transform`, which is cheap and composited, and it FAILS VISIBLE. A clip-path wipe that does not run leaves the headline invisible, which is the worst possible failure on a client site; a curtain that does not run leaves the headline showing and only the flourish missing. */ .js .rv-wipe{position:relative} /* THE CURTAIN MUST END AT ZERO WIDTH. The first version slid it translateX(101%) and left it there: an opaque paper rectangle, pointer-events:none, parked one column to the right - directly over the hero portrait, which it "cropped" for three rounds of debugging (elementFromPoint saw straight through it). With transform-origin:left and scaleX(0) added, the left edge still sweeps across the headline left-to-right, the right edge never leaves the headline box, and the end state is nothing at all. */ .js .rv-wipe::after{ content:"";position:absolute;inset:-2px -3px -2px -2px;pointer-events:none; background:var(--bg);transform-origin:left;transform:translateX(0) scaleX(1); transition:transform 1.05s cubic-bezier(.22,1,.3,1); } .js .rv-wipe.in::after{transform:translateX(101%) scaleX(0)} @media (prefers-reduced-motion:reduce){.js .rv-wipe::after{display:none}} /* ---------- lift on the things you can act on ---------- */ .kit__item,.vid{transition:transform .5s cubic-bezier(.22,1,.3,1)} .kit__item:hover{transform:translateY(-4px)} .vid:hover,.vid:focus-visible{transform:translateY(-3px)} @media (prefers-reduced-motion:reduce){ .kit__item,.vid{transition:none} .kit__item:hover,.vid:hover,.vid:focus-visible{transform:none} } /* ---------- ambient motion ---------- */ .ring-svg{width:100%;height:100%;display:block;overflow:visible} .ring-spin{transform-origin:50% 50%;animation:ring-turn 96s linear infinite} .ring-spin--slow{animation-duration:150s;animation-direction:reverse} @keyframes ring-turn{to{transform:rotate(360deg)}} .drift{will-change:transform} /* reveal — only armed when JS says so, so no-JS keeps everything visible */ .js .rv{opacity:0;transform:translateY(8px);transition:opacity .9s cubic-bezier(.22,1,.3,1),transform .9s cubic-bezier(.22,1,.3,1)} .js .rv.in{opacity:1;transform:none} .js .rv-line{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.22,1,.3,1)} .js .rv-line.in{transform:scaleX(1)} .js .rv-img{clip-path:inset(0 0 12% 0);opacity:.001;transition:clip-path 1.15s cubic-bezier(.22,1,.3,1),opacity .7s ease} .js .rv-img.in{clip-path:inset(0 0 0 0);opacity:1} @media (prefers-reduced-motion:reduce){ .ring-spin,.ring-spin--slow{animation:none} .js .rv,.js .rv-line,.js .rv-img{opacity:1;transform:none;clip-path:none;transition:none} .drift{transform:none !important} *{scroll-behavior:auto !important} } /* ---------- responsive ---------- */ @media (max-width:1100px){ .facts ul{grid-template-columns:repeat(2,1fr)} .facts li:nth-child(3){border-left:0;padding-left:0} .kit{grid-template-columns:repeat(2,minmax(0,1fr))} .team{grid-template-columns:repeat(3,minmax(0,1fr))} .foot__top{grid-template-columns:1fr 1fr} } @media (max-width:920px){ .nav{display:none} .menu-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; margin-left:auto;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px; background:transparent;border:1px solid var(--rule-2);color:inherit;font:inherit; font-size:14px;font-weight:500;cursor:pointer; } .hdr.is-night .menu-btn{border-color:#2A414F} .hdr__call .btn--ghost{display:none} .drawer{ position:fixed;inset:92px 0 auto 0;z-index:55;background:var(--paper); border-bottom:1px solid var(--rule);padding:8px var(--gut) 26px; display:none; } .drawer.open{display:block} .drawer a{display:flex;align-items:center;min-height:54px;text-decoration:none;font-size:18px;font-weight:500;border-bottom:1px solid var(--rule)} .hero__grid{grid-template-columns:1fr;gap:34px} .hero__fig{order:-1} .hero__fig{height:clamp(300px,64vw,420px)} .hero__ring{inset:auto -30% auto auto;top:-6%;width:min(74vw,420px);opacity:.4} .award{position:static;margin-bottom:18px} .shead,.split,.split--wide,.visit{grid-template-columns:1fr} .split figure{order:-1} .bleed-r{margin-right:calc(var(--gut) * -1)} .steps li{grid-template-columns:44px 1fr;gap:14px} .steps li h3{grid-column:2} .steps li p{grid-column:2} .index__row{grid-template-columns:1fr;gap:8px} .quotes{grid-template-columns:1fr} .quote__ph{max-width:132px} .strip{grid-template-columns:repeat(2,1fr)} } @media (max-width:620px){ body{font-size:16.5px} .facts ul{grid-template-columns:1fr} .facts li{border-left:0;padding-left:0;padding-block:20px;border-top:1px solid var(--rule)} .facts li:first-child{border-top:0} .kit{grid-template-columns:1fr} .team{grid-template-columns:repeat(2,minmax(0,1fr))} .foot__top{grid-template-columns:1fr} .hero__meta{gap:18px 24px} } /* ---------- the halo, ambient ---------- */ .halo3d{perspective:1100px;pointer-events:none} .halo3d__tilt{transform:rotateX(73deg)} .halo3d__tilt svg{width:100%;height:auto;display:block;animation:ring-turn 118s linear infinite;transform-origin:50% 50%} .halo3d--b .halo3d__tilt{transform:rotateX(78deg)} .halo3d--b .halo3d__tilt svg{animation-duration:172s;animation-direction:reverse} @media (prefers-reduced-motion:reduce){.halo3d__tilt svg{animation:none}} .skip{position:absolute;left:-9999px;top:0;z-index:99;background:#0D1A22;color:#fff;padding:12px 18px;border-radius:0 0 3px 0;font-size:15px;text-decoration:none;font-weight:500} .skip:focus{left:0} .foot-h{font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#6E8593;margin:0 0 10px} .foot .plain{display:block;min-height:0;color:#8FA6B3;font-size:15px;padding-block:6px} .clipbox{position:relative;overflow:hidden} /* a page that opens on the night register carries it behind the bar too */ body.page-night{background:var(--night)} body.page-night .hdr{background:rgba(10,20,27,.9);border-color:#1D303C} /* Visit: the picture column was running ~400px past the copy column. Wider exterior crop, half-width room shot tucked under it, so the two balance. */ .visit__pics{margin:0;display:block} .visit__pics img:first-child{aspect-ratio:21/9;object-fit:cover;object-position:50% 58%;width:100%} .visit__pics .room{width:62%;margin-left:auto;margin-top:clamp(10px,1.4vw,18px);aspect-ratio:4/5;object-fit:cover;object-position:50% 42%} .visit__pics .cap{text-align:left} @media (max-width:920px){ .visit__pics img:first-child{aspect-ratio:16/9} .visit__pics .room{width:72%} } /* ============================================================ Performance pass — the sports-medicine register. Pushed after review: more charge in the night band, technical detail on the recovery stack, and motion that runs continuously instead of only firing once on reveal. ============================================================ */ /* ---- the crossing: the ground actually changes as you scroll it ---- */ .crossing{position:relative;height:0;overflow:visible;z-index:1} .crossing__rule{ position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--rule); transform-origin:left; } .band--night{position:relative;isolation:isolate} /* a slow sweep of light across the top of the night band, driven by scroll */ .band--night::before{ content:"";position:absolute;inset:0 0 auto 0;height:min(52vh,520px);pointer-events:none;z-index:0; background:radial-gradient(120% 100% at var(--sweep-x,50%) 0%, rgba(242,210,28,.10) 0%, rgba(242,210,28,.04) 34%, transparent 70%); } .band--night > *{position:relative;z-index:1} /* Fine grain over every night ground. A flat dark field reads as a screen; a dark field with tooth reads as a surface, and that difference is most of what "premium" means on a dark register. Generated by feTurbulence in an inline data URI, so nothing is fetched and there is no bitmap to ship. Sits under the content (z-index 0) and never takes pointer events. */ /* The grain sits ABOVE the content, not under it. The equipment plates are composited onto a flat #0A141B in the WebP, so with the grain underneath they read as clean rectangles cut into a textured field. Over the top, one texture covers plate and ground alike and the seam disappears. Low enough that type is untouched: overlay blend at .22 moves an #E8F0F4 heading by well under 1%. */ .band--night::after,.foot::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.22; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"); background-size:140px 140px;mix-blend-mode:overlay; } .foot{position:relative;isolation:isolate} .foot > *{position:relative;z-index:1} /* The halo as an ambient watermark. The brand book calls the ring "an ambient element that turns slowly through the site" and until now it was not on the site at all: ring() was written and never placed. It is the brand's own device rather than generic decoration, drawn as a hairline at low opacity so it reads as a watermark and never competes with the type. */ .halo-amb{ position:absolute;pointer-events:none;z-index:0; width:clamp(360px,46vw,720px);aspect-ratio:1;opacity:.5; } .halo-amb--tr{top:-14%;right:-10%} .halo-amb--bl{bottom:-18%;left:-12%} .band{isolation:isolate} .band > .wrap{position:relative;z-index:1} @media (max-width:900px){.halo-amb{opacity:.35;width:clamp(300px,72vw,460px)}} /* ---- technical spec rows on the recovery stack ---- */ .kit__item{position:relative} .kit__spec{ margin-top:14px;padding-top:12px;border-top:1px solid var(--night-rule); display:flex;flex-wrap:wrap;gap:6px 10px; } .kit__spec span{ font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:#7E96A4;padding:4px 9px;border:1px solid var(--night-rule);border-radius:2px; font-variant-numeric:tabular-nums; } .kit__idx{ position:absolute;right:0;top:22px;font-size:10.5px;font-weight:600;letter-spacing:.14em; color:var(--yellow-lit);font-variant-numeric:tabular-nums; } .kit__ph{position:relative} /* continuous float, phase-offset per item, so the row is never in lockstep */ .kit__ph img{animation:kit-float 9s ease-in-out infinite} .kit__item:nth-child(2n) .kit__ph img{animation-duration:11s;animation-delay:-2.4s} .kit__item:nth-child(3n) .kit__ph img{animation-duration:13s;animation-delay:-5.1s} @keyframes kit-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}} /* ---- performance band ---- */ .perf{position:relative;overflow:hidden} .perf__field{ position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:repeating-linear-gradient(102deg, rgba(63,180,232,.10) 0 1px, transparent 1px 128px); animation:field-drift 42s linear infinite; } @keyframes field-drift{to{transform:translate3d(128px,0,0)}} .perf__stat{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--night-rule); } .perf__stat div{padding:22px 20px 22px 0;border-left:1px solid var(--night-rule);padding-left:20px} .perf__stat div:first-child{border-left:0;padding-left:0} .perf__stat b{display:block;font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500;letter-spacing:-.015em; color:var(--night-ink);font-variant-numeric:tabular-nums lining-nums} .perf__stat p{margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--night-ink-2);max-width:22ch} /* ---- athlete proof on the night ground ---- */ .proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,46px)} .proof figure{margin:0;display:flex;flex-direction:column;gap:16px;padding-top:22px; border-top:1px solid var(--night-rule)} .proof img{width:100%;max-width:158px;aspect-ratio:4/5;object-fit:cover;border-radius:2px; filter:saturate(.86) contrast(1.04)} .proof blockquote{margin:0;font-family:var(--ed);font-style:italic;font-weight:380; font-size:clamp(1.08rem,1.5vw,1.26rem);line-height:1.42;color:var(--night-ink)} .proof p{font-size:14px;line-height:1.5;color:var(--night-ink-2)} .proof figcaption{margin-top:auto;font-size:13px;color:var(--night-ink-2)} .proof figcaption b{display:block;color:var(--night-ink);font-weight:600;font-size:14.5px} /* ---- hero: the portrait breathes ---- */ .hero__fig img{animation:hero-breathe 26s ease-in-out infinite;transform-origin:52% 30%} @keyframes hero-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}} /* ---- a hairline that draws itself across a section rule ---- */ .js .sweep{position:relative;overflow:hidden} .js .sweep::after{ content:"";position:absolute;left:0;top:0;height:1px;width:100%; background:linear-gradient(90deg,transparent,var(--sig),transparent); transform:translateX(-100%); } .js .sweep.in::after{animation:sweep-across 2.4s cubic-bezier(.3,0,.2,1) .25s both} /* A rule under each section head that draws in from the left rather than arriving whole. It is a real element, not a pseudo-element, because .sweep already owns ::after and brings overflow:hidden with it. It reuses .rv-line, which the observer already drives, so there is one reveal mechanism and not two. The register bans fade-up as the default gesture; this is the light register's alternative. */ .shead{position:relative} .rule-draw{position:absolute;left:0;right:0;bottom:calc(clamp(34px,4.4vw,60px) * -0.42); height:1px;background:var(--line);display:block} .band--night .rule-draw{background:var(--night-rule)} @keyframes sweep-across{to{transform:translateX(100%)}} @media (prefers-reduced-motion:reduce){ .kit__ph img,.perf__field,.hero__fig img{animation:none} .js .sweep.in::after{animation:none;opacity:0} .band--night::before{--sweep-x:50%} } @media (max-width:1100px){ .perf__stat{grid-template-columns:repeat(2,1fr)} .proof{grid-template-columns:1fr} } @media (max-width:620px){ .perf__stat{grid-template-columns:1fr} .perf__stat div{border-left:0;padding-left:0;border-top:1px solid var(--night-rule)} .perf__stat div:first-child{border-top:0} } /* ---------- award ---------- */ .award-band{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2)} .award-band__in{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:clamp(24px,4vw,64px); align-items:center;padding-block:clamp(26px,3.2vw,44px)} .award-band img{width:100%;max-width:250px;height:auto;border-radius:2px} .award-band h2{font-size:clamp(1.3rem,2.2vw,1.85rem);letter-spacing:-.012em;max-width:20ch} .award-band p{margin-top:14px;color:var(--fg2);max-width:60ch} .award-band .small{margin-top:14px;color:var(--fg3);font-size:12.5px;max-width:64ch} /* ---------- FAQ, as a ruled index rather than a card stack ---------- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ display:grid;grid-template-columns:1fr 24px;gap:16px;align-items:start; padding:22px 0;cursor:pointer;list-style:none;font-size:clamp(1rem,1.4vw,1.14rem); font-weight:500;letter-spacing:-.006em;color:var(--fg);min-height:44px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";justify-self:end;align-self:center;width:13px;height:13px;flex:none; background:linear-gradient(var(--sig),var(--sig)) center/100% 1.4px no-repeat, linear-gradient(var(--sig),var(--sig)) center/1.4px 100% no-repeat; transition:transform .4s cubic-bezier(.22,1,.3,1); } /* plus becomes minus: drop the vertical bar and turn a half circle, so the change animates instead of snapping */ .faq details[open] summary::after{transform:rotate(180deg); background:linear-gradient(var(--sig),var(--sig)) center/100% 1.4px no-repeat} .faq summary:hover,.faq summary:focus-visible{color:var(--sig-text)} .faq .a{padding:0 0 24px;color:var(--fg2);max-width:70ch} .faq .a p + p{margin-top:.8em} @media (max-width:920px){ .award-band__in{grid-template-columns:1fr} .award-band img{max-width:200px} } /* the clinic's name, stated in the hero rather than left to the logo alone */ .hero__lede b{font-weight:600;color:var(--ink)} /* ============================================================ The spinal column, and the appointment request. ============================================================ */ /* ---- the spinal column, as a scroll element ---- The column sticks in the viewport while the text scrolls past it, and it adjusts top down as you go: each vertebra settles onto the true curve when the scroll position passes it. Nothing is pinned and the page never stops moving, so this is a scrub off scroll position rather than scroll-jacking. --p defaults to 1, which means with scripting off the anatomy is correct. */ .spine-band{overflow:clip} .spine-scroll{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,1fr); gap:clamp(24px,5vw,80px);align-items:start} .spine-rail{position:sticky;top:0;height:100svh;display:flex;align-items:center; justify-content:center;--p:1} .spine{height:min(72svh,620px);width:auto;overflow:visible} .spine .discs ellipse{fill:#E8D48A;transition:fill .5s ease} .spine[data-focus] .discs ellipse{fill:#EFDFA4} .spine .verts path{fill:var(--ink);transition:fill .5s ease} .spine .lab line{stroke:var(--rule-2);stroke-width:1;transition:stroke .5s ease} .spine .lab text{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;fill:var(--ink-3);transition:fill .5s ease;dominant-baseline:middle} /* each vertebra resolves on its own, in sequence down the column */ .spine .vi{ --ai:clamp(0, calc(var(--p, 1) * 26 - var(--i)), 1); transform-box:fill-box;transform-origin:center; transform:translateX(calc(var(--x) * (1 - var(--ai)) * 1px)) rotate(calc(var(--r) * (1 - var(--ai)) * 1deg)); } /* the region the copy is talking about */ .spine[data-focus="cervical"] .r-cervical path, .spine[data-focus="thoracic"] .r-thoracic path, .spine[data-focus="lumbar"] .r-lumbar path{fill:var(--az-deep)} .spine[data-focus="cervical"] .lab-cervical text, .spine[data-focus="thoracic"] .lab-thoracic text, .spine[data-focus="lumbar"] .lab-lumbar text{fill:var(--az-deep)} .spine[data-focus="cervical"] .lab-cervical line, .spine[data-focus="thoracic"] .lab-thoracic line, .spine[data-focus="lumbar"] .lab-lumbar line{stroke:var(--az)} .spine-steps{padding-block:clamp(40px,8vh,90px)} .ss{min-height:76svh;display:flex;flex-direction:column;justify-content:center; padding-block:clamp(20px,4vh,44px)} .ss__n{font-size:11.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase; color:var(--ink-3);display:flex;align-items:center;gap:.7em;margin-bottom:16px} .ss__n::before{content:"";width:26px;height:1px;background:var(--az);flex:none} .ss h3{font-size:clamp(1.5rem,2.8vw,2.3rem);letter-spacing:-.016em;max-width:18ch; text-wrap:balance} .ss p{margin-top:18px;color:var(--ink-2);max-width:44ch; font-size:clamp(1rem,1.35vw,1.1rem);line-height:1.5} .ss__c{margin-top:20px;font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums} /* ---- appointment request ---- */ .req{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr); gap:clamp(26px,4.4vw,72px);align-items:start} .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px} .f{display:flex;flex-direction:column;gap:7px} .f--wide{grid-column:1/-1} .f label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3)} .f label .req-star{color:var(--az-deep)} .f input,.f select,.f textarea{ font:inherit;font-size:15.5px;color:var(--ink);background:var(--paper-2); border:1px solid var(--rule-2);border-radius:2px;padding:12px 14px;min-height:48px; transition:border-color .25s ease;width:100%; } .f textarea{min-height:104px;resize:vertical;line-height:1.5} .f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--az)} .f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{ outline:2px solid var(--az);outline-offset:2px} .form__act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center; margin-top:6px} .form__note{font-size:13.5px;color:var(--ink-3);max-width:46ch} .form__status{grid-column:1/-1;font-size:14.5px;color:var(--az-deep);min-height:0} .form__status:empty{display:none} @media (max-width:920px){ .spine-scroll,.req{grid-template-columns:1fr} /* a sticky rail would eat a phone screen, so the column runs in flow and the steps follow it */ .spine-rail{position:static;height:auto;padding-block:8px 26px} .spine{height:clamp(280px,42svh,400px)} .spine-steps{padding-block:0} .ss{min-height:0;padding-block:22px;border-top:1px solid var(--rule)} .form{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){.spine-rail{--p:1 !important} .spine .verts path,.spine .discs ellipse,.spine .lab text,.spine .lab line{transition:none}} /* ---------- videos: facade, no third party until pressed ---------- */ .vidgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(14px,2vw,22px)} .vid{ position:relative;aspect-ratio:16/9;border:0;border-radius:2px;padding:0;cursor:pointer; overflow:hidden;background:var(--night);display:block;width:100%; } .vid img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)} .vid__vimeo{ position:absolute;inset:0; background:linear-gradient(135deg,var(--night) 0%,#142530 100%); } .vid::after{content:"";position:absolute;inset:0;background:rgba(10,20,27,.28);transition:background .3s ease} .vid:hover::after,.vid:focus-visible::after{background:rgba(10,20,27,.14)} /* A flat grey disc is what a video player looks like when nobody drew one. This is a hairline ring over a blurred pane, so the frame behind it stays visible, and it fills with azure on hover. */ .vid__play{ position:absolute;left:50%;top:50%;width:74px;height:74px;border-radius:50%; background:rgba(246,248,249,.14);border:1px solid rgba(246,248,249,.72); transform:translate(-50%,-50%); transition:transform .45s cubic-bezier(.22,1,.3,1),background .35s ease,border-color .35s ease; } @supports (backdrop-filter:blur(4px)){.vid__play{backdrop-filter:blur(5px) saturate(1.1)}} .vid__play::before{ content:"";position:absolute;left:56%;top:50%;transform:translate(-50%,-50%); border-style:solid;border-width:9px 0 9px 15px; border-color:transparent transparent transparent #F6F8F9;transition:border-color .35s ease; } .vid:hover .vid__play,.vid:focus-visible .vid__play{ transform:translate(-50%,-50%) scale(1.07);background:var(--az);border-color:var(--az); } .vid:hover .vid__play::before,.vid:focus-visible .vid__play::before{border-left-color:#fff} /* The label moved to the top. Several supplied thumbnails carry their own baked in caption along the bottom edge, and ours was landing on top of it. */ .vid__label{ position:absolute;left:14px;top:12px;right:14px;color:#fff;font-size:11.5px;font-weight:600; letter-spacing:.15em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6); } .vid::before{ content:"";position:absolute;inset:0 0 auto 0;height:82px;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(6,14,20,.62),transparent); } .vid__label{z-index:2} .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---------- yellow: the recognition register ---------- Reassigning the signal tokens rather than restyling components, so anything inside .is-yellow (kickers, rules, links) picks it up with no extra rules. The register bans an accent applied for decoration rather than meaning, so this class only ever wraps a stated credential: the Best of Las Vegas record. */ .is-yellow{--sig:var(--yellow-line);--sig-text:var(--yellow-deep)} /* On night the reference tone carries graphics and rules at full strength; text drops to the lighter cut so a 13px credential line does not vibrate. */ .band--night .is-yellow,.is-yellow.on-night{--sig:var(--yellow);--sig-text:var(--yellow-lit)} /* On paper, yellow is a FILL; on night it is ink. That is the whole rule, and it follows from the physics: the reference tone is 1.4:1 against paper, so as ink it is illegible and as legal ink it is 5:1 and reads olive. Filled, with ink on top, it is 10.9:1 and unmistakably yellow. So the light register gets the reference tone as bars, chips and plates, never as type or hairlines. */ .award .dot-yellow{background:var(--yellow);box-shadow:0 0 0 1px var(--yellow-deep)} .award-band{border-top:3px solid var(--yellow);border-bottom:3px solid var(--yellow);--bg:var(--paper-2)} .chip-yellow{display:inline-flex;align-items:center;align-self:flex-start; background:var(--yellow);color:var(--ink);font-size:11px;font-weight:600; letter-spacing:.19em;text-transform:uppercase;padding:6px 11px;border-radius:2px} /* The certificate sits on a night plate inside the paper band. On paper the deepest legal yellow is 5:1 and reads olive, so the reference tone has nowhere to appear in a light register. A dark plate gives the one moment on this page that is purely about the award a ground the true yellow can live on, and it is how an award is actually presented. */ .award-band .plate{margin:0;background:var(--night);border-radius:2px; padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:16px;align-items:center; box-shadow:inset 0 0 0 1px var(--yellow)} .award-band .plate img{width:100%;max-width:216px;height:auto;border-radius:2px} .award-band .plate figcaption{font-size:11px;font-weight:600;letter-spacing:.19em; text-transform:uppercase;color:var(--yellow);display:flex;align-items:center;gap:.7em} .award-band .plate figcaption::before,.award-band .plate figcaption::after{ content:"";width:18px;height:1px;background:var(--yellow);flex:none} /* The one yellow figure in the spec row is the award figure. The other three are counts of what the clinic has, which is azure's job, and the contrast between them is what states the rule without a caption. */ .perf__stat .is-yellow{border-left-color:var(--yellow)} .perf__stat .is-yellow b{color:var(--yellow)} .perf__stat .is-yellow p{color:#C8BE93} /* Named athletes: the title under the name is an earned one, so it takes yellow while the name itself stays in the page's own ink. */ .proof figcaption .cred{color:var(--yellow-lit)} /* Footer recognition line, on the night ground. */ /* The certificate says "six years running" better than a sentence about it did, and it is the clinic's own artwork rather than our restatement of it. */ .foot__award{margin:20px 0 0;padding-top:20px;border-top:1px solid rgba(242,210,28,.24);max-width:196px} .foot__award img{width:100%;height:auto;border-radius:2px} .foot__award figcaption{margin-top:11px;font-size:10.5px;font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:var(--yellow-lit)} /* ============================================================ CLEAN-ROOM HERO (hx-*) Rebuilt from zero after the old hero cropped the portrait through a rule interaction that survived every subtraction. Nothing here negotiates a ratio: the image is a plain block at its intrinsic 4/5 and cannot crop. These rules sit at the end of the sheet on purpose - last wins. ============================================================ */ .hx-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(28px,5vw,76px);align-items:center} .hx-copy{position:relative;z-index:2} .hx-photo{margin:0;justify-self:end;width:min(100%,470px)} .hx-photo img{display:block;width:100%;height:auto;border-radius:2px} @media (max-width:920px){ .hx-grid{grid-template-columns:1fr} .hx-photo{order:-1;justify-self:start;width:min(100%,400px)} .hx-copy .award{position:static;margin-bottom:18px} } /* ============================================================ PRINTS, NOT RECTANGLES Every photograph is mounted like a physical print: a white paper border around the image and a shadow with real vertical offset, so the card reads as sitting ON the page rather than printed into it. The white border holds on the night ground too - a print is white-edged whatever wall it hangs on - and it is what separates "framed element" from "coloured rectangle". Video facades keep the lift but not the border, because their overlay pseudo-elements cover the padding box. ============================================================ */ .hx-photo, .split figure, .member-row figure, .member figure, figure.rv-img:not(.visit__pics), .quote__ph, .foot__award{ background:#fff; padding:clamp(7px,0.75vw,11px); border-radius:3px; box-shadow: 0 1px 2px rgba(13,26,34,.10), 0 6px 14px -6px rgba(13,26,34,.16), 0 22px 44px -18px rgba(13,26,34,.30), 0 48px 90px -40px rgba(13,26,34,.28); transition:transform .55s cubic-bezier(.22,1,.3,1),box-shadow .55s cubic-bezier(.22,1,.3,1); } .split figure img,.member-row figure img,.member figure img,figure.rv-img:not(.visit__pics) img,.quote__ph img,.foot__award img{ border-radius:2px;display:block} /* A caption inside the mount sits on WHITE now, whatever band the figure is in. The night bands' caption colour was picked for the night ground and fell to 2.25:1 on the mount - the deep audit caught it. Ink, always. */ figure.rv-img:not(.visit__pics) .cap,.split figure .cap{padding:10px 4px 2px;color:var(--ink-3)} .band--night .split figure, .band--night figure.rv-img, .band--night .quote__ph, .foot__award{ box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 22px -8px rgba(0,0,0,.55), 0 30px 60px -22px rgba(0,0,0,.7); } .vid{box-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -12px rgba(0,0,0,.55)} .hx-photo:hover,.split figure:hover,.member-row figure:hover,.member figure:hover,figure.rv-img:not(.visit__pics):hover{ transform:translateY(-6px) rotate(-.35deg); box-shadow: 0 2px 4px rgba(13,26,34,.10), 0 10px 20px -6px rgba(13,26,34,.18), 0 34px 62px -20px rgba(13,26,34,.34), 0 64px 110px -44px rgba(13,26,34,.30); } @media (prefers-reduced-motion:reduce){ .hx-photo,.split figure,.member-row figure,.member figure,figure.rv-img:not(.visit__pics),.quote__ph,.foot__award{transition:none} .hx-photo:hover,.split figure:hover,.member-row figure:hover,.member figure:hover,figure.rv-img:not(.visit__pics):hover{transform:none} } /* ============================================================ YELLOW CTA + YELLOW CREDENTIAL PILL The primary call button and the Best of Las Vegas pill carry the recognition colour as a FILL with ink on top (11.8:1), per the register rule that yellow on light grounds is a fill, never ink. The night bands keep their paper-plate CTA: .band--night .btn outranks .btn--call there. The white sheen reads as gloss crossing the yellow. Appended last so it wins the earlier ink-fill rules. ============================================================ */ /* SUPERSEDED: a large flat plane of saturated yellow reads as mustard however legal its contrast. Yellow now LIGHTS the control instead of filling it - see the glow block at the end of this sheet. */ /* the collage's images are prints in their own right */ .visit__pics img{background:#fff;padding:clamp(6px,0.6vw,9px);border-radius:3px; box-shadow:0 1px 2px rgba(13,26,34,.10),0 14px 30px -12px rgba(13,26,34,.26),0 40px 70px -30px rgba(13,26,34,.28)} /* ============================================================ LIT CONTROLS - yellow as light, not as paint The flat yellow fill was contrast-legal (11.8:1) and still looked cheap, because a big flat plane of a saturated hue reads as mustard no matter what. The fix is not a different yellow, it is a different JOB for it: the surface stays ink, and yellow becomes the light falling on it. Each control gets four things that make a lit object read as three dimensional: a vertical gradient (a surface facing up catches more light), a warm rim along the top edge (the lit edge), a dark inner line along the bottom (the shaded edge), and a coloured glow pooling outward (light spilling onto the page). Pressing it swaps the top rim for an inset shadow, so the object goes down into the page. White on the ink surface is 16:1, versus 11.8:1 for ink on the yellow fill - so this is also the more legible of the two. ============================================================ */ .btn--call{ background:linear-gradient(180deg,#1B2A34 0%,#0E1A22 62%,#0A141B 100%); color:#fff; border:1px solid rgba(242,210,28,.42); box-shadow: inset 0 1px 0 rgba(242,210,28,.34), inset 0 -1px 0 rgba(0,0,0,.55), 0 1px 2px rgba(13,26,34,.28), 0 8px 18px -8px rgba(13,26,34,.40), 0 6px 30px -8px rgba(242,210,28,.42); transition:box-shadow .4s ease,transform .28s cubic-bezier(.22,1,.3,1),border-color .4s ease; } .btn--call:hover,.btn--call:focus-visible{ color:#fff; border-color:rgba(242,210,28,.85); transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(242,210,28,.55), inset 0 -1px 0 rgba(0,0,0,.55), 0 2px 4px rgba(13,26,34,.28), 0 14px 26px -10px rgba(13,26,34,.42), 0 10px 46px -8px rgba(242,210,28,.70); } .btn--call:active{ transform:translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(242,210,28,.14), 0 2px 10px -4px rgba(242,210,28,.40); } /* the night register uses the same lit object, so the CTA is one thing across the whole site; the rim is what separates it from the ground */ /* .band--night .btn sets color:var(--ink) for the paper plate and is more specific than .btn--call, so the label went dark-on-dark here. The colour has to be restated at matching specificity. */ .band--night .btn--call,.page-night .btn--call,.foot .btn--call{ color:#fff; background:linear-gradient(180deg,#16242E 0%,#0B161D 100%); border-color:rgba(242,210,28,.55); box-shadow: inset 0 1px 0 rgba(242,210,28,.40), inset 0 -1px 0 rgba(0,0,0,.6), 0 10px 24px -10px rgba(0,0,0,.7), 0 8px 38px -8px rgba(242,210,28,.50); } /* the credential pill is the same object at label scale: ink plate, warm rim, and the dot as the actual light source */ .award{ background:linear-gradient(180deg,#18262F 0%,#0D1A22 100%); color:#EDF3F6; border:1px solid rgba(242,210,28,.34); box-shadow: inset 0 1px 0 rgba(242,210,28,.26), 0 1px 2px rgba(13,26,34,.24), 0 5px 22px -8px rgba(242,210,28,.38); } .band--night .award,.page-night .award{ background:linear-gradient(180deg,#16242E 0%,#0B161D 100%); color:var(--night-ink); border-color:rgba(242,210,28,.42); } .award .dot-yellow{ background:var(--yellow); box-shadow:0 0 0 1px rgba(242,210,28,.35),0 0 9px 1px rgba(242,210,28,.85); } @media (prefers-reduced-motion:reduce){ .btn--call{transition:none} .btn--call:hover,.btn--call:focus-visible,.btn--call:active{transform:none} } /* Every dark ground the CTA can land on has to restate the label colour, and the footer is a dark ground that is NOT .band--night - which is exactly how it slipped through. Listed explicitly rather than inherited. */ .band--night .btn--call:hover,.band--night .btn--call:focus-visible, .page-night .btn--call:hover,.page-night .btn--call:focus-visible, .foot .btn--call:hover,.foot .btn--call:focus-visible{color:#fff} /* ============================================================ MOBILE PASS Three faults, one cause. `.hero__meta` held three columns at min-width:130px plus two 34px gaps - 458px of demand inside a 390px screen - and because html{overflow-x:clip} swallows the result, the page never reported a scroll and the QA called it clean. Everything downstream inherited that width, which is why the care headline and body copy were cut off too. One over-wide element drags the whole page, so the fix is to remove the demand, not to clip harder. The stacking order changes as well: the portrait led the page, so a visitor met a 420px face before a single word about the clinic. Copy first, picture after, and the picture is a banner rather than a slab. ============================================================ */ @media (max-width:920px){ /* headline before portrait: say what this is, then show who */ .hx-photo{order:2;justify-self:stretch;width:100%;margin-top:26px} .hx-copy{order:1} .hx-photo img{width:100%;height:clamp(230px,52vw,300px);object-fit:cover;object-position:50% 22%} /* the width offender */ .hero__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px} .hero__meta div{min-width:0} /* let the CTA row breathe instead of running off the edge */ .hero__act{gap:16px 14px} .hero__act .btn{width:100%;justify-content:center} .hero__act .lnk{width:100%} /* the credential pill is a long line; let it wrap as a block */ .award{white-space:normal;line-height:1.35;padding:9px 14px 9px 12px} .award .dot-yellow{align-self:flex-start;margin-top:3px} } @media (max-width:600px){ .hero__meta{grid-template-columns:1fr;gap:14px} .h-xl{font-size:clamp(2.05rem,8.6vw,2.7rem)} .award{font-size:10.5px;letter-spacing:.11em} } /* nothing in the content column may demand more width than it has */ @media (max-width:920px){ .wrap > *,.split,.shead,.steps li,.facts li,.its,.it{min-width:0} .split,.shead{grid-template-columns:1fr} }