/* ========================================================================== LIFT — the finishing layer that runs last. Three jobs: kill the dead half-rows that made sections read as bland, put the type at luxury scale, and give the quiet furniture (cards, lists, images, rules) something to do when you look at it or move over it. Everything here is additive: remove the file and the site still works. ========================================================================== */ /* ---------- 1. the editorial masthead -------------------------------------- A heading in the left 60% with an empty right 40% is what "bland" looked like. Where a section has a standfirst, it sits beside the title and the two share a baseline, the way a magazine opener does. */ @media (min-width:1040px){ .shell > .sec-head:has(> .lede){ display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); column-gap:clamp(40px,5.4vw,96px);align-items:end} .shell > .sec-head:has(> .lede) > .eyebrow{grid-column:1;grid-row:1;margin-bottom:0} .shell > .sec-head:has(> .lede) > h2{grid-column:1;grid-row:2;max-width:none;margin-bottom:0;align-self:end} .shell > .sec-head:has(> .lede) > .lede{grid-column:2;grid-row:2;max-width:44ch;margin:0 0 .35em; align-self:end;padding-left:clamp(18px,2vw,30px);border-left:1px solid var(--line)} .shell > .sec-head:has(> .lede) > *:not(.eyebrow):not(h2):not(.lede){grid-column:1 / -1;margin-top:18px} /* dark grounds need the rule to read against ink */ .g-ink .shell > .sec-head:has(> .lede) > .lede,.on-ink .shell > .sec-head:has(> .lede) > .lede{ border-left-color:rgba(245,240,236,.2)} } /* ---------- 2. luxury is scale --------------------------------------------- */ .sec-head h2{font-size:clamp(31px,3.9vw,54px);line-height:1.04;letter-spacing:-.012em} .sec-head .eyebrow{font-size:12px;letter-spacing:.26em} /* the opening rule grows with the heading */ .demo1 .sec-head::after{width:clamp(56px,7vw,112px)} /* ---------- 3. a section counter in the corner ----------------------------- Quiet, right-aligned, and it gives the masthead row a third point of interest without adding words. */ @media (min-width:1040px){ .sec > .shell,.sec--lg > .shell{position:relative} /* keyed off the shell, not the section: `sec--lg` never carried `.sec`, so two sections a page were silently missing their folio */ .shell[data-n]::before{content:attr(data-n);position:absolute;top:2px;right:0; font-family:var(--caps);font-size:12px;letter-spacing:.28em;color:var(--gold-deep);opacity:0; font-variant-numeric:lining-nums tabular-nums;pointer-events:none; transform:translateY(-6px);transition:opacity .8s var(--ease) .2s,transform .8s var(--ease) .2s} [data-n]:has(.rv.in) > .shell[data-n]::before{opacity:.55;transform:none} .g-ink[data-n] > .shell[data-n]::before{color:var(--gold)} } /* ---------- 4. cards earn their keep --------------------------------------- Flat white boxes on cream read as unfinished. The cards that already lift get depth under them; the ones that never had anything get a gold rule that draws on hover. Hooks checked against the existing sheets first. */ @media (hover:hover) and (min-width:901px){ .rel-card,.lf-card,.jn-tile,.ix-card{ transition:transform .5s var(--ease),box-shadow .5s var(--ease), border-color .5s var(--ease),background .5s var(--ease),padding-left .5s var(--ease)} .rel-card:hover,.lf-card:hover,.jn-tile:hover{box-shadow:0 26px 56px -34px rgba(38,29,18,.42)} } .cx-card,.sc-col{position:relative} .cx-card::after,.sc-col::after{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:var(--gold);background-image:var(--foil); transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)} .cx-card.in::after,.sc-col.in::after,.rv.in .cx-card::after,.rv.in .sc-col::after{transform:none} .sec-head + * .cx-card::after{transition-delay:.1s} /* ---------- 5. rows that respond ------------------------------------------- Hairline lists are the house style. On hover the row warms from the left, which is the pop of colour without a single bubble. */ .cx-row,.pr-row,.acc-item,.lg-row,.fq-item{position:relative;isolation:isolate} .cx-row::before,.pr-row::before,.acc-item::before,.lg-row::before,.fq-item::before{ content:"";position:absolute;inset:0 -16px;z-index:-1;border-radius:2px; background:linear-gradient(90deg,rgba(198,168,124,.18),rgba(198,168,124,0) 74%); opacity:0;transition:opacity .45s var(--ease)} @media (hover:hover) and (min-width:901px){ .cx-row:hover::before,.pr-row:hover::before,.acc-item:hover::before, .lg-row:hover::before,.fq-item:hover::before{opacity:1} } .g-ink .cx-row::before,.g-ink .pr-row::before,.g-ink .acc-item::before, .on-ink .pr-row::before,.on-ink .acc-item::before{ background:linear-gradient(90deg,rgba(198,168,124,.14),rgba(198,168,124,0) 74%)} /* ---------- 6. photography, framed ----------------------------------------- */ .ch-media::after{content:"";position:absolute;inset:18px -18px -18px 18px; border:1px solid var(--gold);opacity:.34;pointer-events:none;z-index:0} .ch-media > *{position:relative;z-index:1} @media (max-width:900px){.ch-media::after{display:none}} /* ---------- 7. the gold hairline that follows the page ---------------------- */ .sec + .sec{position:relative} /* ---------- 8. buttons get a little weight --------------------------------- */ @media (hover:hover) and (min-width:901px){ .btn{will-change:transform} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} } /* ---------- 9. mobile + tablet: the masthead stacks, nothing crowds --------- */ @media (max-width:1039px){ .sec-head h2{font-size:clamp(28px,5.4vw,40px)} .sec-head .lede{max-width:56ch} } @media (max-width:640px){ .sec-head h2{font-size:clamp(26px,7vw,34px);line-height:1.08} .sec-head .eyebrow{letter-spacing:.2em} } @media (prefers-reduced-motion:reduce){ .rel-card,.lf-card,.jn-tile,.ix-card,.btn{transition:none} .btn:hover{transform:none} .cx-card::after,.sc-col::after{transition:none;transform:none} .cx-row::before,.pr-row::before,.acc-item::before,.lg-row::before,.fq-item::before{transition:none} } /* ---------- 10. no bubble chips, anywhere ---------------------------------- House rule: a control is a square-cornered plate or a hairline row, never a pill. Squaring these here keeps the fix in one place instead of thirteen. */ .fq-chip,.ex-tab,.hh-tabs,.hh-tab,.tw-switch,.tw-tab,.fd-opt,.lp-tick, .fm-switch,.fm-switch button,.fm-list button,.chip,.pl-opt,.pk-btn,.fl-play, .ch-tab,.st-tab,.rg-tab,.bk-tab,.pt-tab{border-radius:2px} .fq-chip{min-height:44px} /* ========================================================================== AT A GLANCE — every treatment in the same four columns Hairline rows, no cards, no pills. On a phone each row folds into a stack with its own labels rather than scrolling sideways. ========================================================================== */ .cp-wrap{margin-top:clamp(24px,3vw,40px)} .cp-heads{display:grid;grid-template-columns:minmax(0,2.5fr) repeat(3,minmax(0,1.35fr)) minmax(0,1fr) 34px; gap:clamp(12px,1.6vw,26px);align-items:end; padding-bottom:8px;border-bottom:1px solid var(--ink)} .cp-h{display:flex;align-items:center;gap:7px;padding:10px 0;min-height:44px;background:none;border:0; font-family:var(--caps);font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:var(--mute);cursor:pointer;text-align:left; transition:color .3s var(--ease)} .cp-h:hover{color:var(--ink)} .cp-h i{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);opacity:0;transition:opacity .3s var(--ease)} .cp-h[aria-pressed="true"]{color:var(--gold-deep)} .cp-h[aria-pressed="true"] i{opacity:1} .cp-row{display:grid;grid-template-columns:minmax(0,2.5fr) repeat(3,minmax(0,1.35fr)) minmax(0,1fr) 34px; gap:clamp(12px,1.6vw,26px);align-items:center; padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink-soft); transition:color .35s var(--ease)} .cp-row:hover{color:var(--ink)} .cp-c{font-size:14.5px;line-height:1.5} .cp-c--name{display:flex;flex-direction:column;gap:3px} .cp-c--name b{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);font-weight:400;color:var(--ink); line-height:1.2} .cp-c--name em{font-style:normal;font-size:13.5px;color:var(--mute);line-height:1.45} .cp-c--cost{font-family:var(--caps);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--gold-deep);white-space:nowrap} .cp-go{display:flex;justify-content:flex-end;color:var(--gold);opacity:0; transition:opacity .35s var(--ease),transform .35s var(--ease)} .cp-go svg{width:17px;height:17px} .cp-row:hover .cp-go{opacity:1;transform:translateX(4px)} .cp-note{margin:clamp(20px,2.4vw,30px) 0 0;max-width:62ch;font-size:14px;color:var(--mute)} .cp-c[data-k]::before{content:attr(data-k);display:none} @media (max-width:1040px){ .cp-heads{grid-template-columns:minmax(0,2.4fr) repeat(2,minmax(0,1.3fr)) minmax(0,1fr) 30px} .cp-row{grid-template-columns:minmax(0,2.4fr) repeat(2,minmax(0,1.3fr)) minmax(0,1fr) 30px} .cp-heads .cp-h:nth-child(4),.cp-row .cp-c:nth-child(4){display:none} } @media (max-width:760px){ .cp-heads{display:flex;flex-wrap:wrap;gap:4px 18px;border-bottom-width:1px} .cp-row{grid-template-columns:1fr;gap:0;padding:20px 0 22px} /* the 1040px rule hid the fourth column; bring it back at the same weight or it keeps its display and stops being a labelled row */ .cp-heads .cp-h:nth-child(4){display:flex} .cp-row .cp-c:nth-child(4){display:grid} .cp-c[data-k]{display:grid;grid-template-columns:9.4em minmax(0,1fr);gap:10px; padding:5px 0;font-size:14px} .cp-c[data-k]::before{display:block;font-family:var(--caps);font-size:12px;letter-spacing:.12em; text-transform:uppercase;color:var(--gold-deep);padding-top:3px;white-space:nowrap} .cp-c--name{margin-bottom:8px} .cp-go{display:none} } /* ========================================================================== WHAT HAPPENS NEXT — contact ========================================================================== */ .nx-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(32px,4.6vw,80px);align-items:start;margin-top:clamp(24px,3vw,44px)} .nx-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .nx-step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,2.2vw,32px); padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--line)} .nx-n{grid-row:1 / span 3;font-family:var(--caps);font-size:12.5px;letter-spacing:.2em; color:var(--gold-deep);padding-top:5px;font-variant-numeric:lining-nums tabular-nums} .nx-when{margin:0 0 4px;font-family:var(--caps);font-size:12px;letter-spacing:.22em; text-transform:uppercase;color:var(--mute)} .nx-step h3{margin:0 0 8px;font-size:clamp(20px,2vw,27px);line-height:1.15} .nx-b{margin:0;line-height:1.72;color:var(--ink-soft);max-width:54ch} .nx-week{position:sticky;top:calc(var(--hdr-h,88px) + 24px); padding:clamp(22px,2.6vw,32px);background:var(--paper);border:1px solid var(--line)} .nx-h{margin:0 0 14px;font-family:var(--caps);font-size:12px;letter-spacing:.22em; text-transform:uppercase;color:var(--gold-deep)} .nx-days{list-style:none;margin:0 0 16px;padding:0} .nx-day{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--ink-soft)} .nx-day:last-child{border-bottom:0} .nx-d{font-family:var(--caps);font-size:12px;letter-spacing:.18em;text-transform:uppercase} .nx-day.is-shut{color:var(--mute)} .nx-day.is-late .nx-t{color:var(--gold-deep)} .nx-day.is-today{color:var(--ink);font-weight:500} .nx-day.is-today .nx-d{position:relative} .nx-day.is-today .nx-d::before{content:"";position:absolute;left:-13px;top:50%;width:5px;height:5px; margin-top:-2.5px;border-radius:50%;background:var(--gold)} .nx-now{margin:0 0 10px;font-family:var(--caps);font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:var(--gold-deep)} .nx-now .is-closed{color:var(--mute)} .nx-late{margin:0 0 18px;font-size:13.5px;line-height:1.65;color:var(--mute)} .nx-cta{width:100%} @media (max-width:900px){ .nx-grid{grid-template-columns:1fr;gap:30px} .nx-week{position:static} .nx-step{grid-template-columns:auto minmax(0,1fr)} } /* ========================================================================== WHAT EVERY PRICE INCLUDES — four across one line, never three and a hole ========================================================================== */ .in-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.4vw,38px);margin:clamp(26px,3vw,44px) 0 0;padding:0} .in-tile{padding-top:20px;border-top:1px solid var(--ink)} .in-n{display:block;margin-bottom:12px;font-family:var(--caps);font-size:12px;letter-spacing:.24em; color:var(--gold-deep);font-variant-numeric:lining-nums tabular-nums} .in-tile h3{margin:0 0 9px;font-size:clamp(18px,1.55vw,21px);line-height:1.2} .in-tile p{margin:0;font-size:14.5px;line-height:1.68;color:var(--ink-soft)} .in-moves{margin-top:clamp(36px,4vw,60px);padding-top:clamp(24px,2.6vw,34px); border-top:1px solid var(--line)} .in-h{margin:0 0 14px;font-family:var(--caps);font-size:12px;letter-spacing:.22em; text-transform:uppercase;color:var(--gold-deep)} .in-rows{list-style:none;margin:0;padding:0} .in-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:clamp(16px,2.6vw,44px);padding:16px 0;border-bottom:1px solid var(--line)} .in-row:last-child{border-bottom:0} .in-k{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);line-height:1.3;color:var(--ink)} .in-v{font-size:14.5px;line-height:1.7;color:var(--ink-soft)} @media (max-width:1040px){.in-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){ .in-grid{grid-template-columns:1fr;gap:0} .in-tile{padding:20px 0;border-top:1px solid var(--line)} .in-tile:first-child{border-top-color:var(--ink)} .in-row{grid-template-columns:1fr;gap:6px} } /* ========================================================================== THE HALF HOUR — the consultation clock, drawn from the real minute ========================================================================== */ .mn-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,22vw,280px); gap:clamp(30px,4.5vw,80px);align-items:center;margin-top:clamp(20px,2.4vw,32px)} .mn-clock svg{display:block;width:100%;height:auto;overflow:visible} .mn-ring{fill:none;stroke:var(--line);stroke-width:.6} .mn-tick{stroke:var(--line);stroke-width:.6} .mn-tick--5{stroke:var(--gold);stroke-width:1} .mn-arc{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round; transform:rotate(-90deg);transform-origin:50% 50%; stroke-dasharray:276.46; stroke-dashoffset:calc(276.46 - 276.46 * var(--f, 0)); transition:stroke-dashoffset .8s var(--ease)} .mn-hand{stroke:var(--ink);fill:var(--ink);stroke-width:1.1;stroke-linecap:round; transform:rotate(calc(var(--f, 0) * 360deg));transform-origin:50% 50%; transition:transform .8s var(--ease)} .mn-cap{margin:16px 0 0;text-align:center;font-family:var(--caps);font-size:12px; letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)} @media (max-width:900px){ .mn-body{grid-template-columns:1fr;gap:26px} .mn-clock{max-width:200px;margin:0 auto} } @media (prefers-reduced-motion:reduce){.mn-arc,.mn-hand{transition:none}} /* ---- a pinned screen is a full screen: the type has to carry it ---------- */ @media (min-width:901px){ .is-driven .tl-panel h3,.is-driven .mn-panel h3,.is-driven .dl-panel h3, .is-driven .cn-panel h3{font-size:clamp(34px,3.4vw,50px);line-height:1.06;margin-bottom:14px} .is-driven .tl-panel p:not(.tl-n),.is-driven .mn-panel p:not(.tl-n), .is-driven .dl-panel p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.72;max-width:52ch} .is-driven .tl-ghost{font-size:clamp(150px,19vw,280px)} } /* ---- the long read gets a face: a photograph that sticks with the spine --- */ .rt-shot{margin:clamp(22px,2.6vw,32px) 0 0} .rt-shot-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover} .rt-shot figcaption{margin-top:12px;font-size:13px;line-height:1.55;color:var(--mute)} @media (max-width:980px){ .rt-shot{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center; margin-top:24px} .rt-shot figcaption{margin-top:0} } /* ---- related cards carry the photograph of where they are going ---------- */ .rel-card{display:flex;flex-direction:column;overflow:hidden} .rel-shot{display:block;position:relative;overflow:hidden;margin:-1px -1px 18px;aspect-ratio:16/10; background:var(--sand)} .rel-img{display:block;width:100%;height:100%;object-fit:cover; transition:transform 1s var(--ease)} @media (hover:hover) and (min-width:901px){.rel-card:hover .rel-img{transform:scale(1.045)}} .rel-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:38%; background:linear-gradient(180deg,rgba(32,27,22,0),rgba(32,27,22,.14))} @media (prefers-reduced-motion:reduce){.rel-img{transition:none}.rel-card:hover .rel-img{transform:none}} /* ---- the band photograph had been collapsing to nothing ------------------- wipes() adds `.wipe` to `.band-media`, and `.wipe{position:relative}` in modules.css outranked `.band-media{position:absolute}` in base.css purely by load order. The media then shrank to its content, the content was an image sized 100% of nothing, and the whole photograph disappeared — which is why the line over it had nothing to sit on. */ .band-media.wipe{position:absolute;inset:0} /* ========================================================================== GLOW — the light the brand is named for. Everything here is paint: a warm bloom behind the type, a slow drift of light across the dark grounds, gold rules that carry a little halo, and a specular sweep across a photograph as it arrives. No layout moves. ========================================================================== */ /* ---- 1. a champagne bloom behind every section opener -------------------- */ .sec > .shell > .sec-head{position:relative} .sec > .shell > .sec-head::before{ content:"";position:absolute;left:-14%;top:-120%;width:62%;height:340%; background:radial-gradient(52% 44% at 22% 50%, rgba(210,180,135,.30) 0%, rgba(210,180,135,.13) 42%, rgba(210,180,135,0) 72%); opacity:0;transform:scale(.92);pointer-events:none;z-index:-1; transition:opacity 1.5s var(--ease) .1s,transform 1.8s var(--ease) .1s} .sec > .shell > .sec-head.in::before{opacity:1;transform:none} .g-ink .sec-head::before,.on-ink .sec-head::before{ background:radial-gradient(52% 44% at 22% 50%, rgba(210,180,135,.20) 0%, rgba(210,180,135,.08) 44%, rgba(210,180,135,0) 74%)} /* ---- 2. the dark grounds breathe ---------------------------------------- A very slow wash of warm light across the ink sections. 34s, two layers, so it never repeats visibly and never asks the compositor for much. */ .g-ink{position:relative;isolation:isolate} /* the wash moves by background-position, not by transform: scaling a full-bleed absolute layer pushed it past the right edge and gave the page a horizontal scrollbar */ .g-ink::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(44% 58% at 50% 50%, rgba(198,168,124,.17), rgba(198,168,124,0) 70%), radial-gradient(38% 52% at 50% 50%, rgba(168,131,79,.15), rgba(168,131,79,0) 72%); background-repeat:no-repeat,no-repeat; background-size:150% 150%,140% 140%; animation:auroraDrift 34s ease-in-out infinite alternate} @keyframes auroraDrift{ 0%{background-position:6% 4%,92% 92%} 100%{background-position:26% 22%,70% 72%}} /* ---- 3. gold rules carry a halo ------------------------------------------ */ .demo1 .sec-head::after{box-shadow:0 0 16px rgba(198,168,124,.55)} .band-rule{box-shadow:0 0 18px rgba(198,168,124,.5)} .cx-card::after,.sc-col::after{box-shadow:0 0 18px rgba(198,168,124,.45)} /* ---- 4. a photograph arrives with a sweep of light ----------------------- */ .ch-frame,.rel-shot,.pt-fig .ch-frame--wide,.bk-fig .ch-frame,.rt-shot{position:relative;overflow:hidden} .ch-frame::before,.rel-shot::before,.rt-shot::before{ content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:34%;z-index:3; background:linear-gradient(100deg,rgba(255,250,240,0),rgba(255,250,240,.42),rgba(255,250,240,0)); transform:translateX(-160%) skewX(-14deg);pointer-events:none} .rv.in .ch-frame::before,.rv.in .rel-shot::before,.in .rt-shot::before, .ch-frame.in::before,.rel-card.in .rel-shot::before{ animation:glowSweep 1500ms cubic-bezier(.3,.1,.2,1) 260ms 1} @keyframes glowSweep{to{transform:translateX(420%) skewX(-14deg)}} /* ---- 5. cards hold a little light on hover ------------------------------- */ @media (hover:hover) and (min-width:901px){ .rel-card,.lf-card,.jn-tile,.ix-card,.cx-card{position:relative} .rel-card::after,.lf-card::after,.jn-tile::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(38% 60% at 50% 0%, rgba(210,180,135,.22), rgba(210,180,135,0) 70%); transition:opacity .5s var(--ease)} .rel-card:hover::after,.lf-card:hover::after,.jn-tile:hover::after{opacity:1} } /* ---- 6. the ink call-to-action glows from within ------------------------- */ .btn--ink{position:relative} .btn--ink::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:2px;opacity:0; background:radial-gradient(60% 120% at 50% 110%, rgba(210,180,135,.55), rgba(210,180,135,0) 70%); transition:opacity .45s var(--ease)} @media (hover:hover) and (min-width:901px){.btn--ink:hover::before{opacity:1}} /* ---- 7. the big ghost numerals pick up the foil -------------------------- */ .tl-ghost span,.cx-count,.rt-n,.nx-n,.in-n,.cp-c--cost{ text-shadow:0 0 22px rgba(198,168,124,.28)} @media (prefers-reduced-motion:reduce){ .sec > .shell > .sec-head::before{transition:none;opacity:1;transform:none} .g-ink::after{animation:none} .ch-frame::before,.rel-shot::before,.rt-shot::before{display:none} .btn--ink::before{transition:none} } /* ---- the mark catches the light once, as the page settles ---------------- */ @media (prefers-reduced-motion:no-preference){ .demo1 .brand-mark{position:relative} .demo1 .brand:not(.is-lit) .brand-mark{animation:markLight 2200ms var(--ease) 500ms 1} @keyframes markLight{ 0%,100%{filter:none} 45%{filter:drop-shadow(0 0 12px rgba(210,180,135,.55))}} } /* ---- anchors travel, they do not jump ----------------------------------- */ html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ---- a sticky offset left behind on a non-sticky box --------------------- `.wt-media` is sticky with `top:112px` on desktop. The mobile rule turned the position static, but a later unconditional rule set it back to relative — and `top:112px` on a relative box shifts it 112px DOWN, straight over the heading beneath it. */ /* restore the two sticky photographs. `.ch-media` was made relative by the gold frame above, and `.wt-media` by an unconditional rule in site.css: both then took their sticky `top` as a 112px downward shove, which on a phone pushed the picture straight over the heading under it. */ @media (min-width:901px){ .wt-media,.ch-media{position:sticky} } @media (max-width:900px){ .wt-media,.ch-media{position:static} .prac-media,.prose-media,.rt-fig{top:auto} } /* ---- mobile banners: stop cropping a landscape into a letterbox ---------- The hero reserves a band at the top for the photograph and puts the copy underneath, but the image was still filling the whole hero — a 16:9 frame squeezed into 458x1350, which shows 19% of its width. Whatever the object position, the face fell outside it. The picture now fills the band it was always meant to, so roughly 60% of the frame is visible and the subject is actually in it. */ @media (max-width:900px){ .pagehero-bg{bottom:auto;height:clamp(280px,66vw,360px)} .pagehero-img{height:100%;object-position:50% 32%} .pagehero-bg::after{background: linear-gradient(180deg, rgba(250,247,242,.04) 0 58%, rgba(250,247,242,.55) 82%, var(--cream) 100%)} .pagehero--blend .pagehero-bg{height:clamp(300px,72vw,400px)} .pagehero--blend .pagehero-img{-webkit-mask-image:none;mask-image:none;object-position:50% 22%} } /* ---- the FAQ topics were a 375px wall before the first question --------- Eight topics wrapping to six rows on a phone read as a blank screen. One scrolling row instead: the questions start where they should. */ @media (max-width:760px){ .fq-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px} .fq-chips::-webkit-scrollbar{display:none} .fq-chip{flex:0 0 auto;scroll-snap-align:start} .fq-count{margin-top:10px} } /* ---- the footer's Explore column lines up with the treatments ------------ "Your Consultation" was wrapping to two lines, which knocked every row below it out of step with the list beside it. Give the column the width it needs and the two lists sit on the same rhythm. A two-column Explore was tried first and its second column ran straight into Get in Touch. */ @media (min-width:1061px){ .fx-col--explore{min-width:max-content} .fx-col--explore a{white-space:nowrap} } /* ========================================================================== CHOICE ROWS — tidy, never ragged Every one of these was a wrapping flex row, so on a phone they broke into one box, then one, then two of different widths: the "messy boxes" the client kept pointing at. They are grids now, so the cells are equal and the rows are level, and below 560px each choice takes its own full-width line. ========================================================================== */ .pk-row,.pl-opts,.fd-opts,.ex-tabs{display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .pk-btn,.pl-opt,.fd-opt,.ex-tab{width:100%;justify-content:center;text-align:center} @media (max-width:560px){ .pk-row,.pl-opts,.fd-opts,.ex-tabs{grid-template-columns:1fr;gap:0; border-top:1px solid var(--line)} .pk-btn,.pl-opt,.fd-opt,.ex-tab{border:0;border-bottom:1px solid var(--line); border-radius:0;justify-content:space-between;text-align:left; padding-inline:2px;min-height:54px} /* a chosen row reads by its rule and its ink, not by a filled box */ .pl-opt[aria-pressed="true"],.fd-opt[aria-pressed="true"],.ex-tab[aria-pressed="true"]{ background:transparent;color:var(--ink);border-bottom-color:var(--ink)} .pl-opt[aria-pressed="true"]::after,.fd-opt[aria-pressed="true"]::after, .ex-tab[aria-pressed="true"]::after{content:"";width:7px;height:7px;flex:none; border-radius:50%;background:var(--gold)} .pk-btn::after{content:"";width:7px;height:7px;flex:none;border-right:1px solid var(--gold); border-top:1px solid var(--gold);transform:rotate(45deg)} .g-ink .pk-btn,.on-ink .pk-btn,.g-ink .pl-opt,.on-ink .pl-opt{ border-bottom-color:rgba(245,240,236,.18)} } /* ========================================================================== THE GOLD ICONS — ring, or message on WhatsApp, from any page ========================================================================== */ .hdr-ico{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;flex:none;color:var(--gold-deep);border-radius:50%; transition:color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)} .hdr-ico svg{width:21px;height:21px;display:block} @media (hover:hover) and (min-width:901px){ .hdr-ico:hover{color:var(--ink);background:rgba(198,168,124,.16);transform:translateY(-1px)} } .hdr-ico:focus-visible{outline:2px solid var(--gold);outline-offset:2px} @media (max-width:900px){ /* on a phone the icons are the quickest way to reach her, so they stay and the written number goes */ .hdr-tel{display:none} .hdr-ico{width:42px;height:42px} } @media (max-width:420px){ .hdr-btn{display:none} } /* ---- sliders you can actually work with a thumb ------------------------- `touch-action:pan-y` is the important one: a horizontal drag now moves the slider instead of fighting the page, and a vertical drag still scrolls. */ input[type=range]{touch-action:pan-y} @media (pointer:coarse){ .lf-range input,.em-range input,.dp-range input,.lp-range input, .mn-range input,.ba-range input,.tw-weeks input{height:52px} .lf-range input::-webkit-slider-thumb,.em-range input::-webkit-slider-thumb, .dp-range input::-webkit-slider-thumb,.lp-range input::-webkit-slider-thumb, .mn-range input::-webkit-slider-thumb,.ba-range input::-webkit-slider-thumb, .tw-weeks input::-webkit-slider-thumb{ width:34px;height:34px;margin-top:-16px; box-shadow:0 6px 18px rgba(46,36,24,.24);transition:none} .lf-range input::-moz-range-thumb,.em-range input::-moz-range-thumb, .dp-range input::-moz-range-thumb,.lp-range input::-moz-range-thumb, .mn-range input::-moz-range-thumb,.ba-range input::-moz-range-thumb{ width:34px;height:34px} .lf-range input::-webkit-slider-runnable-track,.em-range input::-webkit-slider-runnable-track, .dp-range input::-webkit-slider-runnable-track,.lp-range input::-webkit-slider-runnable-track, .mn-range input::-webkit-slider-runnable-track,.ba-range input::-webkit-slider-runnable-track{height:3px} } /* ========================================================================== THE PHONE MENU — the same six headings as the bar, and it scrolls It used to be eighteen links centred in a fixed panel with no overflow, so the list ran off both ends of the screen and nothing could reach them. ========================================================================== */ .navpanel-in{height:100%;display:flex;flex-direction:column;justify-content:flex-start; gap:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; padding:calc(var(--hdr-h,88px) + 18px) var(--gutter) 32px} .np-nav{display:flex;flex-direction:column;border-top:1px solid var(--line)} .np-row{display:flex;align-items:center;justify-content:space-between;gap:10px} .navpanel-in .np-link{flex:1;display:block;font-family:var(--serif); font-size:clamp(23px,5.6vw,30px);line-height:1.2;color:var(--ink); padding:15px 0;border-bottom:1px solid var(--line)} .np-row .np-link{border-bottom:0} .np-row{border-bottom:1px solid var(--line)} .navpanel-in .np-link.is-here{font-style:italic;color:var(--gold-deep)} .np-more{flex:none;width:52px;height:52px;display:grid;place-items:center; background:none;border:0;color:var(--gold-deep);cursor:pointer} .np-more svg{width:14px;height:9px;transition:transform .35s var(--ease)} .np-more[aria-expanded="true"] svg{transform:rotate(180deg)} .np-sub{display:flex;flex-direction:column;padding:2px 0 10px} .np-sub[hidden]{display:none} .navpanel-in .np-sub a{font-family:var(--body);font-size:16px;color:var(--ink-soft); padding:12px 0 12px 18px;border-bottom:1px solid var(--line-soft);position:relative} .navpanel-in .np-sub a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px; background:var(--gold)} .navpanel-in .np-sub a.is-here{color:var(--gold-deep);font-style:italic} .np-foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column; align-items:stretch;gap:14px} .np-foot .btn{width:100%} .np-tel{text-align:center;font-family:var(--caps);font-size:13px;letter-spacing:.16em; color:var(--gold-deep)} @media (min-width:901px){.navpanel{display:none}} /* ---- the phone menu is a panel, not a pane of glass ---------------------- It was picking up the floating-panel treatment: 66% opacity over a 20px blur, so the page showed through the menu. And `.navpanel-in a` (0-1-1) outranked `.btn--ink` (0-1-0), which painted the call to action ink on ink — a black box with an invisible label. */ .navpanel{background:var(--cream);backdrop-filter:none;-webkit-backdrop-filter:none; box-shadow:none} .navpanel-in .np-foot a.btn--ink{color:var(--cream);background:var(--ink); min-height:var(--tap-lg);padding:0 26px;border-bottom:0; font-family:var(--caps);font-size:13.5px;letter-spacing:.16em;text-transform:uppercase} /* ========================================================================== THE BAR — the mark in the middle Three headings to its left, three and the actions to its right, and the lockup larger than either. A centred mark reads as the clinic's own letterhead rather than as a website header. ========================================================================== */ @media (min-width:901px){ /* the bar spans the window rather than the text shell: with the mark in the middle the two flanks need the full width, or the right group overflows its track and prints across the lockup */ .hdr-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;gap:clamp(14px,2vw,34px); max-width:none;padding-inline:clamp(24px,3vw,56px)} .nav--l{justify-self:start;margin-left:0} .hdr-right{display:flex;align-items:center;justify-content:flex-end; gap:clamp(10px,1.4vw,22px);min-width:0} .nav--r{margin-left:0} .hdr-act{margin-left:0} /* the lockup keeps a clear space around it, so a flank can never sit against the mark however tight the window gets */ .brand{justify-self:center;padding-inline:clamp(12px,1.8vw,32px)} .demo1 .brand-mark{height:clamp(74px,7vw,112px)} .demo1 .hdr.is-stuck .brand-mark{height:clamp(56px,5vw,80px)} .is-home .demo1 .brand-mark{height:clamp(82px,8.4vw,130px)} .is-home .demo1 .hdr.is-stuck .brand-mark{height:clamp(56px,5vw,80px)} /* the rule between the links and the actions belongs on the right group */ .nav+.hdr-act::before{display:none} .nav--r+.hdr-act::before{content:"";display:block;width:1px;height:20px; background:var(--line);flex:none;margin-inline:clamp(4px,.8vw,12px)} /* the right track carries three links, two icons and the button, so none of them may be allowed to squash the others: the links were crushed to 25px of a 200px need and printed over one another */ .nav--l,.nav--r{flex:0 0 auto;gap:clamp(8px,1vw,20px)} .hdr-act{flex:0 0 auto} } @media (min-width:901px){ /* With the mark in the middle there is no honest room for the button as well as six links and two icons: it kept pushing the right-hand flank back across the lockup. The gold icons are the quick actions, every page opens with this same button a screen below, and the bar is the better for the quiet. */ .hdr-btn,.hdr-tel{display:none} } @media (max-width:900px){ .nav--l,.nav--r{display:none} .hdr-right{display:contents} } /* ---- a heavier push on the banner --------------------------------------- The slow zoom travelled 1.03 to 1.13 over thirty seconds, which barely registered. It now runs from 1.04 to 1.26 across twenty-two, so the photograph is visibly moving without ever looking restless. The scroll drift underneath it goes further too. */ .pagehero-img{animation-duration:22s !important} @keyframes phkb{from{transform:scale(1.04)}to{transform:scale(1.26)}} @supports (animation-timeline: view()){ @keyframes drift{from{translate:0 -9%}to{translate:0 9%}} .band-img,.pagehero-img{scale:1.2} } @media (prefers-reduced-motion:reduce){ .pagehero-img{animation:none !important;transform:none} } /* ========================================================================== THE BAR — clear at the top, glass once you move ========================================================================== */ .demo1 .hdr{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none; border-bottom-color:transparent; transition:background .5s var(--ease),backdrop-filter .5s var(--ease), border-color .5s var(--ease),box-shadow .5s var(--ease)} /* a whisper of ground under the links so they stay readable over a photograph, without the bar reading as a bar */ .demo1 .hdr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg, rgba(250,247,242,.72) 0%, rgba(250,247,242,.42) 55%, rgba(250,247,242,0) 100%); transition:opacity .5s var(--ease)} .demo1 .hdr.is-stuck{ background:color-mix(in srgb, var(--cream) 70%, transparent); backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3); border-bottom-color:var(--line);box-shadow:0 12px 34px -26px rgba(46,36,24,.4)} .demo1 .hdr.is-stuck::before{opacity:0} /* the panel is opaque, so the bar must not be see-through over it */ .demo1 .hdr:has(~ .navpanel.is-open), .demo1 .hdr.is-menu{background:var(--cream);backdrop-filter:none} /* ---- the Treatments list opens from the link, not across the window ------ It was centred on an 86px link at 290px wide, so it began 59px off the left edge of the screen and the first column was cut in half. */ .navdrop{left:0;transform:translate(0,8px)} .navitem--has:hover .navdrop,.navitem--has:focus-within .navdrop{transform:translate(0,0)} .navdrop-in{min-width:min(320px,calc(100vw - 2 * var(--gutter))); max-width:calc(100vw - 2 * var(--gutter))} /* ========================================================================== THE FILM — lighter around it, and lighter in it The surround was near-black ink and the video carried a wash dark enough for text on all four sides, so the whole section read heavy and dull. ========================================================================== */ .md-filmwide{background:var(--nude,#DED3C2)} .fw-frame{box-shadow:0 34px 80px -42px rgba(46,36,24,.5)} /* the wash only has to carry the words, so it lives on the left and the foot and leaves the rest of the picture alone */ .fw-wash{background: linear-gradient(90deg, rgba(24,19,14,.82) 0 30%, rgba(24,19,14,.52) 50%, rgba(24,19,14,.16) 70%, rgba(24,19,14,0) 86%), linear-gradient(0deg, rgba(24,19,14,.46) 0 8%, rgba(24,19,14,0) 32%)} .fw-video{filter:brightness(1.11) saturate(1.12) contrast(1.03)} /* a fine gold line instead of a dark edge */ .fw-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(210,180,135,.42)} @media (max-width:900px){ .fw-wash{background:linear-gradient(0deg, rgba(24,19,14,.82) 0 32%, rgba(24,19,14,.18) 74%)} } /* ---- her two profiles, under the mark in the footer ---------------------- */ .fx-social{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:2px} .fx-social a{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:50%;color:var(--gold-lite); transition:color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)} .fx-social svg{width:19px;height:19px;display:block} @media (hover:hover) and (min-width:901px){ .fx-social a:hover{color:var(--cream);background:rgba(210,180,135,.16);transform:translateY(-1px)} } .fx-social a:focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* ========================================================================== THE BAR FLOATS OVER THE BANNER It was sticky, which means it held its own place in the flow and the photograph began underneath it — so the bar showed the page, not the picture. Fixed, with no ground of its own, the banner runs up behind it. ========================================================================== */ .demo1 .hdr{position:fixed;top:0;left:0;right:0} /* The banner runs up behind the bar, so the bar has no ground of its own — only the faintest warm veil at the very top, gone by 110px. Measured: with no veil at all the menu reads 1.15:1 over dark hair and 2.6:1 over a bright window, and cream type on a dark veil disappeared into pale rooms. This is the lightest treatment that keeps the words readable on every banner. */ .demo1 .hdr::before{display:block;height:min(100%,118px);bottom:auto; background:linear-gradient(180deg, rgba(250,247,242,var(--veil,.80)) 0%, rgba(250,247,242,calc(var(--veil,.80) * .42)) 62%, rgba(250,247,242,0) 100%)} .demo1 .hdr:not(.is-stuck) .navlink{color:var(--ink); text-shadow:0 0 6px rgba(250,247,242,.95)} .demo1 .hdr:not(.is-stuck) .navlink.is-here{color:var(--gold-deep)} .demo1 .hdr:not(.is-stuck) .hdr-ico{color:var(--gold-deep); filter:drop-shadow(0 0 5px rgba(250,247,242,.95))} .demo1 .hdr:not(.is-stuck) .burger span{box-shadow:0 0 5px rgba(250,247,242,.9)} .demo1 .hdr:not(.is-stuck) .brand-mark{filter:drop-shadow(0 0 8px rgba(250,247,242,.9))} /* ---- a short last row must not leave a grey slab ------------------------ The tile grid drew its hairlines by showing its own grey background through 1px gaps. Any count that does not fill the last row then shows that grey as a panel two cells wide. The lines move onto the tiles, so an empty cell is simply nothing at all. */ .cq-grid{background:transparent;gap:1px} .cq-tile{box-shadow:0 0 0 1px var(--line)} /* ── 320px (iPhone SE and small Android) ───────────────────────────────── Three faults showed up only at 320 wide, and all three had the same shape: a box that cannot shrink pushed the layout wider than the screen. Because the body clips horizontally the page could not be scrolled to reach the lost strip, so the burger simply sat off the right edge. */ /* A multi-column list does not shrink its columns below the longest word; it overflows instead. Giving `columns` a WIDTH as well as a count makes the browser drop to one column when two will not fit, which is what these lists want: two on a large phone, one on a small one. */ .fx-side--left ul,.fx-col--explore ul{columns:164px 2} .rt-spine ol{columns:156px 2} /* The day counter is a flex row of a large numeral and a spaced caps label. Neither can shrink, so a long stage name pushed the section out. It wraps onto a second line instead. */ .dc-big{flex-wrap:wrap} @media (max-width:420px){ .dc-big{gap:4px 12px} .dc-big span{letter-spacing:.14em} } /* The strapline is sized to fit its line, which at 320 wide worked out at 10.3px. Tightening the letter-spacing buys back the room it needs to stay above a legible floor. */ @media (max-width:420px){ .hero-strap{letter-spacing:.18em;font-size:clamp(11.5px,calc((100vw - 48px) / 22.6),13.5px)} } /* Same 320px fault, three more places where a box refused to shrink. */ /* The price row is a flex line of a name and a value the price must not break across. Letting the ROW wrap keeps the figure whole and drops it onto its own line when the two will not sit side by side. */ @media (max-width:560px){ .pr-row{flex-wrap:wrap;gap:2px 18px} } /* A