/* ========================================================================== COZY HOME BY SHAM 1 hero · 2 services · 3 proof · 4 start · 5 why · 6 process · 7 close · 8 faq ========================================================================== */ /* ------------------------------------------------------------------- BASE */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%} body{ background:var(--cream);color:var(--ink); font:300 var(--t-body)/1.7 var(--sans); letter-spacing:.004em;-webkit-font-smoothing:antialiased;overflow-x:hidden; } body.lock{overflow:hidden} img,svg,picture,video{display:block;max-width:100%} img{height:auto} /* A is only a wrapper, it must fill its frame or the img inside falls back to its natural ratio and object-fit never applies. */ .ss__stage .lyr>picture,.ss__mob>picture,.pf__fig>picture,.cmp__lyr>picture, .fin__media,.hero__media,.op__fig>picture,.wy__fig .frame>picture{width:100%;height:100%} a{color:inherit;text-decoration:none} ul,ol{list-style:none;padding:0} button,input,select,textarea{font:inherit;color:inherit;background:none;border:0} button{cursor:pointer} .defs{position:absolute;width:0;height:0} /* A class-level `display` beats the UA rule for [hidden], which would leave the dialog and menu overlays displayed (and click-catching) at opacity 0. */ [hidden]{display:none!important} ::selection{background:var(--olive-700);color:var(--cream)} :focus-visible{outline:2px solid var(--olive-700);outline-offset:4px} .st :focus-visible,.fin :focus-visible,.ft :focus-visible,.menu :focus-visible, .inq :focus-visible,.pf__fig--over :focus-visible{outline-color:var(--champagne)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:1rem;top:-6rem;z-index:1000;background:var(--olive-900);color:var(--cream); padding:.9rem 1.4rem;border-radius:var(--r-pill);box-shadow:var(--sh-md); font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase; transition:top var(--d-fast) var(--ease)} .skip:focus{top:1rem} /* ------------------------------------------------------------- TYPOGRAPHY */ .eyebrow{font-size:var(--t-xs);font-weight:500;letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--ink-muted)} .st .eyebrow,.fin .eyebrow,.inq .eyebrow{color:var(--champagne)} .display,.title,.mega{font-family:var(--serif);font-weight:300;letter-spacing:-.018em;line-height:1} .display{font-size:var(--t-display)} .title{font-size:var(--t-title);line-height:1.04} .display em,.title em,.it{font-style:italic;font-weight:300;color:var(--bronze)} .st .display em,.fin .display em{color:var(--champagne)} .st .display,.fin .display{color:var(--cream)} p{text-wrap:pretty} .clip{display:block;overflow:hidden;padding-bottom:.08em} .clip__i{display:block;transform:translateY(105%)} .is-still .clip__i{transform:none} /* -------------------------------------------------------------- INSTAGRAM */ /* The one dark object on the ivory work section, so it reads as the way out of the page. No borrowed brand gradient: a rainbow ring on a warm olive and cream palette reads as a widget bolted on, not as part of the studio. The glyph sits in a champagne disc instead, which is the one place in this section the jewellery colour appears, and the hairline is champagne held back to a third. */ .ig{position:relative;display:inline-flex;align-items:center;gap:var(--s4); padding:.6rem 1.7rem .6rem .6rem;border-radius:var(--r-pill); color:var(--cream);isolation:isolate;overflow:hidden; background:linear-gradient(180deg,#24271C,#14160F); box-shadow: inset 0 0 0 1px rgba(217,201,169,.34), /* champagne rim, deliberately faint */ inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(20,22,15,.22), 0 16px 34px -16px rgba(20,22,15,.55); transition:transform var(--d) var(--ease-out),box-shadow var(--d) var(--ease)} /* the champagne wash arrives from the bottom edge on hover, the same wipe the filled buttons use, so the whole site hovers the same way */ .ig::before{content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,#2E3124,#1B1E15); transform:translateY(101%);transition:transform var(--d) var(--ease-out)} .ig:hover,.ig:focus-visible{transform:translateY(-2px); box-shadow: inset 0 0 0 1px rgba(217,201,169,.62), inset 0 1px 0 rgba(255,255,255,.10), 0 3px 8px rgba(20,22,15,.24), 0 26px 48px -18px rgba(20,22,15,.6)} .ig:hover::before,.ig:focus-visible::before{transform:translateY(0)} .ig:active{transform:translateY(0) scale(.99)} @media (prefers-reduced-motion:reduce){ .ig,.ig:hover,.ig:focus-visible{transform:none} } .ig__glyph{flex:none;display:grid;place-items:center; width:clamp(38px,3.4vw,44px);aspect-ratio:1;border-radius:50%; background:var(--champagne);color:var(--olive-950); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 3px rgba(20,22,15,.35); transition:background var(--d) var(--ease)} .ig:hover .ig__glyph,.ig:focus-visible .ig__glyph{background:var(--ivory)} .ig__glyph svg{width:21px;height:21px} .ig__txt{display:grid;gap:.2rem;text-align:left} .ig__l{font:500 .92rem/1.1 var(--sans);letter-spacing:.006em} .ig__h{font-size:.78rem;line-height:1.1;letter-spacing:.05em;color:var(--on-dark-mute)} /* ------------------------------------------------------------------ GHOST */ /* Oversized tone-on-tone words behind the content. They are what make the sections read as large rooms instead of stacked boxes. Purely decorative: aria-hidden in the markup, no pointer events, no selection, and held to a few percent of the ground so text sitting over one loses nothing measurable. `overflow:clip` rather than `hidden` so no section becomes a scroll container and nothing inside loses position:sticky. */ .sv,.pf,.st,.wy,.pr,.faq{position:relative;isolation:isolate;overflow:clip} .ghost{position:absolute;z-index:-1;pointer-events:none; -webkit-user-select:none;user-select:none; font-family:var(--serif);font-weight:400; font-size:clamp(6rem,21vw,19rem);line-height:.74;letter-spacing:-.045em; white-space:nowrap;color:rgba(65,68,55,.055)} /* Cream and ivory are bright enough to take a deepened watermark with room to spare. Limestone is not: darkening it pulls the eyebrow from 4.67:1 to 4.30:1. On that ground, and on the dark one, the watermark LIFTS the tone instead, which can only ever raise the contrast of the text over it. */ .pr .ghost{color:rgba(251,249,244,.10)} .st .ghost{color:rgba(243,239,230,.06)} /* bled off the edges by a fraction of their own size, so the crop scales with the type rather than drifting at different widths */ .ghost--tl{top:-.10em;left:-.05em} .ghost--tr{top:-.10em;right:-.05em} .ghost--bl{bottom:-.16em;left:-.05em} .ghost--br{bottom:-.16em;right:-.05em} @media (max-width:740px){ .ghost{font-size:clamp(4.5rem,30vw,9rem)} } /* ------------------------------------------------------------------- CTAs */ /* Sentence case at a readable size with almost no tracking. Tiny caps set at .2em is the thing that dates a button; the label should read as language, not as a specimen. */ .cta{display:inline-flex;align-items:center;gap:.6em; font:500 .9rem/1 var(--sans);letter-spacing:.006em; color:inherit;position:relative;white-space:nowrap} /* same box as the arrow, so a button carrying either glyph is the same height */ .cta__wa{width:19px;height:19px;flex:none} .cta--line{padding:.7em 0} .cta--line::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor; transform:scaleX(0);transform-origin:left;transition:transform var(--d) var(--ease-out)} .cta--line:hover::after,.cta--line:focus-visible::after{transform:scaleX(1)} /* Actions are pills with a contact shadow, and they compress a touch when pressed, so they read as objects rather than painted rectangles. */ .cta--fill{padding:1.05em 1.75em 1.05em 1.9em;color:var(--cream); background:linear-gradient(180deg,#4C5041,#3A3E31); border-radius:var(--r-pill);overflow:hidden;isolation:isolate; box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 1px 2px rgba(20,22,15,.22), 0 9px 22px -11px rgba(20,22,15,.6); transition:background var(--d) var(--ease),color var(--d) var(--ease), box-shadow var(--d) var(--ease),transform var(--d-fast) var(--ease)} .cta--fill::before{content:'';position:absolute;inset:0;border-radius:inherit; background:var(--olive-950);z-index:-1; transform:translateY(101%);transition:transform var(--d) var(--ease-out)} .cta--fill:hover::before,.cta--fill:focus-visible::before{transform:translateY(0)} .cta--fill:hover,.cta--fill:focus-visible{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(20,22,15,.24), 0 16px 32px -14px rgba(20,22,15,.66)} .cta--fill:active{transform:translateY(0) scale(.986); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(20,22,15,.3)} .cta--sm{padding:.85em 1.4em;font-size:.82rem} /* Glass action, the same box as .cta--fill, only the surface changes. A filled olive pill standing on photography reads as a foreign object dropped onto the picture; this one is mostly the picture. It is only used where the veil behind it is already deep, which is why it can open up this far. */ .cta--glass{ background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,0) 54%), rgba(26,24,21,.18); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); /* at this opacity the rim is doing the work of telling you it is a button, so it carries more light than the pill's own surface */ box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.26), 0 10px 26px -12px rgba(20,22,15,.4)} /* the wipe frosts rather than darkens */ .cta--glass::before{background:rgba(255,255,255,.15)} .cta--glass:hover,.cta--glass:focus-visible{ box-shadow:inset 0 1px 0 rgba(255,255,255,.36), inset 0 0 0 1px rgba(255,255,255,.38), 0 16px 32px -14px rgba(20,22,15,.46)} .cta--glass:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.16)} .cta--line-light{padding:calc(1.05em - 1px) calc(1.9em - 1px);border-radius:var(--r-pill); border:1px solid rgba(243,239,230,.34);color:var(--cream); box-shadow:inset 0 0 0 0 rgba(243,239,230,0); transition:background var(--d) var(--ease),border-color var(--d) var(--ease), transform var(--d-fast) var(--ease)} .cta--line-light:hover{background:rgba(243,239,230,.12);border-color:rgba(243,239,230,.7)} .cta--line-light:active{transform:scale(.982)} .cta--quiet{padding:.7em 0;color:var(--on-dark-mute)} .cta--quiet:hover{color:var(--on-dark)} .cta[disabled],.cta.off{opacity:.3;pointer-events:none} /* -------------------------------------------------------------------- NAV */ /* A floating glass pill: dark at the ends, lit from beneath in the middle, with a bevelled top edge. It hovers off the viewport rather than sitting flush against it. */ .nav{position:fixed;top:clamp(1rem,2.4vw,1.9rem);left:0;right:0;z-index:var(--z-nav); padding-inline:var(--gutter);transition:transform var(--d) var(--ease)} .nav.up{transform:translateY(calc(-100% - 1.5rem))} .nav__in{ max-width:min(78rem,100%);margin-inline:auto;position:relative;isolation:isolate; display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;gap:var(--s5); padding:.4rem clamp(.7rem,1.1vw,1.05rem);border-radius:var(--r-pill);color:var(--cream); /* Warm frosted glass so the photograph reads through it. The tint is a warm near-black, never olive, tinted chrome fights the picture. 58% is as far as it can open up: the photograph behind the left-hand links peaks at 0.80 sRGB, and any thinner the uppercase links drop under 4.5:1. */ background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 54%), rgba(26,24,21,.36); /* 36% is a floor, not a preference. Blurred, the photograph behind the left-hand links still reads 0.855 sRGB: that whole corner is sheer curtain in daylight, not one stray highlight. Below 36% with this crown the small uppercase links drop under 4.5:1. The blur earns its place here too, since it averages the specular hits out before the tint is applied. */ -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), /* light catching the top edge */ inset 0 0 0 1px rgba(255,255,255,.26), /* the rim, now the main event */ 0 10px 24px -16px rgba(20,22,15,.3)} /* barely there: a see-through object should not cast much */ /* The whole bar is present from the first screen, links, mark and button. Past the hero the chrome only sits heavier and the mark steps back a little, so the row slims without anything appearing or disappearing. */ .nav__in{transition:background var(--d) var(--ease),box-shadow var(--d) var(--ease)} /* Past the hero the glass sits over cream and limestone sections, which are far brighter than the photograph, so it takes more body to hold the type. */ .nav.solid .nav__in{ background: linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 54%), rgba(24,22,19,.80); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.09), 0 18px 38px -18px rgba(20,22,15,.5), 0 36px 72px -30px rgba(20,22,15,.6)} /* ---- the brand: the client's own artwork, used as drawn ---- The wordmark reads down the left end of the bar, where a masthead goes, rather than floating in the middle of the links. The artwork is the client's own stacked setting of the name, placed whole and never split. It carries a real alpha channel, so it no longer needs the `screen` blend the previous artwork depended on to drop its baked-in black. The extra left padding is not decoration. The bar is a pill, so at the height of the logo's top and bottom edges the rounded end has already cut about 14px into the track, and a logo sitting on the track's own padding would clip into that curve. */ .nav__brand{grid-area:1/1;justify-self:start;display:flex;align-items:center; padding-left:clamp(.5rem,1.1vw,1rem)} /* The wordmark is set on three lines, so its height is shared between COZY, HOME and the small BY SHAM under them. At 44px that third line closed up into a smudge; 52px is the point where it still reads. */ .nav__logo{flex:none;height:52px;width:auto; transition:opacity var(--d) var(--ease),height var(--d-slow) var(--ease-out)} /* the mark carries the landing view; once the bar goes solid it steps back so the row stays slim */ .nav.solid .nav__logo{height:45px} .nav__brand:hover .nav__logo{opacity:.82} /* Two equal outer tracks with the mark between them, which is the only way the mark lands on the true centre of the bar: the masthead and the button are nothing like the same width, so a middle track sized around them would put the mark off centre by the difference. Each side then pushes its two children apart, so the wordmark and the button sit at the outer ends and both runs of links close in on the mark. */ .nav__side{grid-area:1/1;display:flex;align-items:center;gap:var(--s5); min-width:0;justify-content:space-between} .nav__side--r{grid-area:1/3} /* margin-auto rather than relying on the row's space-between: below 1025px the links beside it are display:none, and space-between with a single visible child parks that child at the start of the track, which left the menu button stranded 94px short of the end of the bar. */ .nav__end{display:flex;align-items:center;gap:var(--s5);margin-left:auto} .nav__emblem{grid-area:1/2;justify-self:center;display:flex;align-items:center; color:var(--cream)} .nav__emblem svg{display:block;width:42px;height:42px; transition:width var(--d-slow) var(--ease-out),height var(--d-slow) var(--ease-out)} /* it steps back with the rest of the bar once the page is past the hero */ .nav.solid .nav__emblem svg{width:36px;height:36px} .nav__links{display:flex;gap:var(--s6)} .nav__links a{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:500; opacity:.95;position:relative;padding:6px 0;transition:opacity var(--d) var(--ease); text-shadow:0 1px 10px rgba(20,22,15,.5)} .nav__links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform var(--d) var(--ease-out)} .nav__links a:hover,.nav__links a.here{opacity:1} .nav__links a:hover::after,.nav__links a.here::after{transform:scaleX(1);transform-origin:left} /* ---- raised CTA ---- */ /* Outlined and see-through to match the bar, so nothing on the first screen is a solid block. The colour arrives on hover: .cta--fill already carries a wipe that slides up from the bottom edge, so it only needs repainting cream and the label flipping dark as it lands. */ .nav__cta{border:0;flex:none;padding:.85em 1.5em;color:var(--cream); background:none; /* with no fill, this hairline is the whole boundary of the control, so it has to clear 3:1 against the bar behind it (WCAG 1.4.11) */ box-shadow:inset 0 0 0 1px rgba(255,255,255,.58)} .nav__cta::before{background:var(--cream)} .nav__cta:hover,.nav__cta:focus-visible{color:var(--olive-950); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 2px 10px rgba(20,22,15,.22)} .nav__cta:active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .nav__cta:hover,.nav__cta:focus-visible{color:var(--olive-950)} /* ---- the burger sits in a recessed well ---- */ .burger{display:grid;flex:none;width:42px;height:42px;place-items:center;color:var(--cream); border-radius:13px; background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.07); transition:background var(--d) var(--ease)} .burger:hover{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(255,255,255,.09))} .burger__bars{display:grid;gap:4px;width:17px} .burger i{display:block;height:1.5px;border-radius:2px;background:currentColor; transition:transform var(--d) var(--ease),opacity var(--d-fast) var(--ease)} .burger[aria-expanded="true"] i:first-child{transform:translateY(5.5px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){opacity:0} .burger[aria-expanded="true"] i:last-child{transform:translateY(-5.5px) rotate(-45deg)} /* --------------------------------------------------------------- FULLMENU */ /* The drawer opens as glass over the page rather than a solid panel wiping down it. You can still sense where you were, which is what stops a menu feeling like a different screen you have been thrown to. The tint is .86, which sounds heavy for glass and is not: the page behind can be the ivory sections, and at anything thinner the cream type would be sitting on close to white. At .86 even pure white blurs down to about 50 of 255 behind it, so the type holds about 10:1 wherever the drawer is opened. Eight full width hairlines between eight links is what made the old one read as a list of rows. There is one rule now, between the destinations and the actions, and it is doing real work. */ .menu{position:fixed;inset:0;z-index:var(--z-menu);color:var(--cream); padding:calc(5.4rem + env(safe-area-inset-top)) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom)); display:flex;flex-direction:column;gap:var(--s6); overflow-y:auto;overscroll-behavior:contain; background:rgba(18,19,14,0); -webkit-backdrop-filter:blur(0px) saturate(100%); backdrop-filter:blur(0px) saturate(100%); opacity:0; transition:opacity .42s var(--ease-out),background .5s var(--ease-out), backdrop-filter .62s var(--ease-out)} .menu.open{opacity:1;background:rgba(18,19,14,.86); -webkit-backdrop-filter:blur(30px) saturate(125%); backdrop-filter:blur(30px) saturate(125%)} /* While the drawer is open the bar rides above it. The drawer is fixed to the whole viewport and sits over the navigation, which means it was covering the burger: the one control that dismisses it. Lifting the bar keeps the masthead in place and leaves the X in the corner where it is expected. The bar also stops hiding itself, since there is nothing to scroll. */ body.lock .nav{z-index:calc(var(--z-menu) + 1)} body.lock .nav.up{transform:none} .menu__links{display:flex;flex-direction:column} /* Baseline aligned, so the numerals sit on the same line as the words rather than floating beside them. The target is 52px; the type is a third smaller than it was, because a drawer that shouts its own navigation at you is the opposite of expensive. */ .menu__links a{display:flex;align-items:baseline;gap:clamp(.85rem,3.4vw,1.25rem); min-height:48px;padding:.26em 0; opacity:0;transform:translateY(16px)} .menu.open .menu__links a{opacity:1;transform:none; transition:opacity .62s var(--ease-out),transform .62s var(--ease-out)} .menu__n{flex:none;width:2ch; font:500 var(--t-xs)/1 var(--sans);letter-spacing:.18em; color:var(--champagne);opacity:.7; font-variant-numeric:lining-nums tabular-nums; transition:opacity var(--d) var(--ease)} .menu__t{position:relative;font-family:var(--serif);font-weight:300; font-size:clamp(1.45rem,5.6vw,2.05rem);line-height:1.05;letter-spacing:-.015em} /* the rule is drawn under the words only, not across the whole row */ .menu__t::after{content:'';position:absolute;left:0;right:0;bottom:-.16em;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform var(--d) var(--ease-out)} .menu__links a:hover .menu__t::after, .menu__links a:focus-visible .menu__t::after{transform:scaleX(1);transform-origin:left} /* where you already are */ .menu__links a[aria-current] .menu__n{opacity:1} .menu__links a[aria-current] .menu__t::after{transform:scaleX(1); background:var(--champagne)} .menu__foot{display:grid;gap:var(--s4);margin-top:auto; padding-top:var(--s5);border-top:1px solid var(--rule-dark-sf)} /* the row already sits in a grid with its own gap, so its own top margin was spacing it twice and pushing the icons off the bottom of the panel */ .menu__foot .menu__soc{margin-top:0} .menu__foot > *{opacity:0;transform:translateY(16px)} .menu.open .menu__foot > *{opacity:1;transform:none; transition:opacity .62s var(--ease-out),transform .62s var(--ease-out)} .menu__foot .cta--fill{justify-content:center} .menu__contact{display:grid;gap:.35rem;font-size:var(--t-sm);color:var(--on-dark-mute)} .menu__contact a:hover{color:var(--cream)} /* the same icon row as the footer, on the dark overlay */ .menu__soc{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:var(--s5); list-style:none;padding:0} .menu__soc a{width:46px;height:46px;display:grid;place-items:center; border-radius:50%;color:var(--on-dark-mute); transition:color var(--d) var(--ease),background var(--d) var(--ease), transform var(--d-fast) var(--ease)} .menu__soc svg{width:21px;height:21px} .menu__soc a:hover{color:var(--cream);background:rgba(243,239,230,.1)} .menu__soc a:active{transform:scale(.94)} /* ================================================================ 1 · HERO */ .hero{position:relative; /* lvh, not svh: svh is the height with the browser chrome showing, so the moment the URL bar retracts the viewport grows and the next section slides into view on its own. lvh is the chrome-hidden height, so the hero always covers the screen and the page below it only arrives on a scroll. The vh line is the fallback for browsers without the newer units. */ min-height:100vh;min-height:100lvh; display:grid;align-items:end; /* the block sits lower than it did: the foot was 64px on a 1440 screen and is 40 now, which is the client asking for the opening view to feel focused rather than spread */ isolation:isolate;overflow:hidden; /* The foot is shared. The facts band at the bottom cancels it with a negative margin so the band itself can reach the bottom of the screen, and pays the same air back as its own padding. */ --hero-pad-b:clamp(1.8rem,3vw,2.5rem); padding:var(--s11) var(--gutter) var(--hero-pad-b)} /* the film sits over the still, so the still is what shows whenever the film cannot or should not play */ .hero__v{position:absolute;inset:0;z-index:-1;width:100%;height:100%; object-fit:cover;object-position:50% 58%;display:block} /* below the hero's own breakpoint a 16:9 film centre cropped to a portrait screen keeps about a quarter of the room, so the phone keeps its still */ /* Mobile video is now decided in js/motion.js, based on the device's effective connection type: fast connections see the film, slow ones see the still. See heroFilm(). */ @media (prefers-reduced-motion:reduce){ .hero__v{display:none} } .hero__media{position:absolute;inset:0;z-index:-2} .hero__media img{width:100%;height:100%;object-fit:cover; transform:scale(1.05);animation:push 14s var(--ease-soft) forwards} @keyframes push{to{transform:scale(1)}} /* This photograph is bright the whole way down, including the polished floor in the bottom corners, so the base needs a real ramp, not the shallow pool the old darker image wanted. The top four-tenths of the frame is left completely alone, which is where the airiness lives. */ .hero__veil{position:absolute;inset:0;z-index:-1;background: /* A wide, low pool carrying the whole type block. It was 70% wide centred at 18%, which was right when the block ended at the buttons. The facts row now reaches about 46% across the frame, and its last label was sitting out past the edge of the pool at 3.93:1. Widening the pool and moving its centre right carries that label at 4.9:1 without touching the top four-tenths of the frame, which is where the airiness lives. */ radial-gradient(88% 115% at 24% 106%,rgba(18,20,14,.74),rgba(18,20,14,0) 84%), /* the base ramp, carrying the whole lower band the type occupies */ linear-gradient(to top,rgba(18,20,14,.48),rgba(18,20,14,.43) 22%, rgba(18,20,14,.34) 42%,rgba(18,20,14,.15) 58%,rgba(18,20,14,0) 72%), /* THE CROWN, and why it is as deep as it is. It carries the navigation, whose pill is almost fully see-through, and the opening hours, which have no plate and no pool of their own. The hours land on a window, and the window is blown out: the brightest pixel under that line measures 254,254,255, which is paper white. Cream on paper white is about one to one, so something has to take the light out of it, and the only shape that can do that without being seen doing it is one that spans the whole frame. Measured rather than guessed: 62% is what carries cream past 4.5:1 against that pixel, so the ramp holds near 62 through the band the mark sits in, 16% to 19% down, and then falls away quickly so the darkness stays in the top quarter instead of spreading into the room. */ linear-gradient(to bottom, rgba(18,20,14,.66), rgba(18,20,14,.63) 13%, rgba(18,20,14,.61) 20%, rgba(18,20,14,.34) 27%, rgba(18,20,14,.12) 34%, rgba(18,20,14,0) 43%)} .hero__in{position:relative;max-width:var(--maxw);margin-inline:auto;width:100%;color:var(--cream)} /* a wide, soft halo hugging the letterforms, invisible as a shadow, but it lifts the type clear of whatever the photograph is doing behind it */ .hero__h,.hero__line{ text-shadow:0 1px 2px rgba(18,20,14,.42),0 2px 18px rgba(18,20,14,.55), 0 8px 64px rgba(18,20,14,.72)} /* 24px under the heading read as a gap rather than as a pair. The line belongs to the heading, so it sits up against it. */ .hero__h{font-family:var(--serif);font-weight:300;font-size:var(--t-hero); line-height:.94;letter-spacing:var(--track-mega);margin-bottom:var(--s2)} .hero__h .it{color:var(--champagne)} .hero__line{max-width:30rem;color:var(--cream);font-size:var(--t-lede); letter-spacing:.01em;margin-bottom:var(--s5)} /* The buttons sit directly under the opening line now, with the facts moved below them into a band of their own. So this is the ordinary air between a sentence and the buttons answering it, not the gap that used to hold two groups apart. */ .hero__acts{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap; margin-top:clamp(.9rem,1.8vw,1.4rem)} /* ---- the facts, ruled across the foot of the first screen ---- */ /* They used to be a group in the left third, three short entries each with a 26px kicker over it. The client asked for them spread out, with the rule running across the screen, so they are a band now: one hairline from edge to edge, three columns holding the whole measure, hairlines between them. HOW THE RULE REACHES THE GLASS. The band steps out of the measure by exactly the distance back to the edge of the window, then pays the same distance back as padding. The rule runs edge to edge while the writing stays in line with the heading above it, at every width, with no second set of numbers to keep in step. --vw is the window without its scrollbar, which is the reason this does not put a horizontal scrollbar on a page that has nothing to scroll sideways to, the way 100vw would. It sits flush to the bottom of the hero: the negative bottom margin cancels the hero's own foot, and the band carries that air inside itself instead, so the shade under it goes all the way to the edge of the screen rather than stopping short of it. */ .hf{--bleed:max(var(--gutter),calc((var(--vw) - var(--maxw)) / 2)); list-style:none;position:relative;order:2; margin:clamp(2.1rem,4vw,3.4rem) calc(var(--bleed) * -1) calc(var(--hero-pad-b) * -1); padding:clamp(1rem,2vw,1.55rem) var(--bleed) var(--hero-pad-b); border-top:1px solid rgba(217,201,169,.34); display:grid;grid-auto-flow:column;grid-auto-columns:1fr} /* Four columns is too tight on a 375px phone: "Island-" clipped and "Mon to Fri, 9 to 2" wrapped to three lines. Two-up two-rows gives each fact enough width to breathe. */ @media (max-width:560px){ .hf{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto; gap:var(--s4) 0} /* re-establish the dividers for the 2x2 layout: a vertical hairline between columns, a horizontal one between rows */ .hf__i + .hf__i::before{display:none} .hf__i:nth-child(even){border-left:1px solid rgba(217,201,169,.3)} .hf__i:nth-child(n+3){border-top:1px solid rgba(217,201,169,.22); padding-top:var(--s4)} .hf__i:nth-child(odd){padding-left:0} } /* THE BAND'S OWN SHADE. The ramp on the veil was built for a group of words in the left third of the frame. The band reaches the right hand side now, where the window and the curtains are the brightest thing in the film, and the last label was reading 3.7 against them. This is a wash under the band alone, fading upward so it has no top edge to be seen, only a corner of the room in shade. */ /* Two washes, because the light in the frame is not even. The upward one carries the band; the sideways one answers the window, which is the brightest thing in the room and sits under the third column. Measured: WHERE WE WORK in champagne was reading 3.54 against the glass behind it and 4.98 with this. The left hand end is untouched, where the pool on the veil is already doing the work. */ .hf::after{content:'';position:absolute;z-index:-1;pointer-events:none; inset:0;background: linear-gradient(to right,rgba(18,20,14,0) 38%,rgba(18,20,14,.28) 100%), linear-gradient(to top, rgba(18,20,14,.56),rgba(18,20,14,.42) 58%,rgba(18,20,14,0))} /* a column, so the band can be ordered below the buttons without moving it in the markup, where a phone still needs it first */ .hero__foot{display:flex;flex-direction:column} .hf__i{display:grid;gap:.5rem;align-content:start; /* Two rows, label on row 1 and value on row 2. The value row is subgridded across all four items via a shared ancestor grid, so the values always sit on the same baseline no matter whether a label wraps onto a second line or not. */ grid-template-rows:auto 1fr; padding-inline:clamp(1.1rem,3vw,2.8rem)} .hf{align-items:stretch} .hf__i:first-child{padding-left:0} .hf__i:last-child{padding-right:0} /* The dividers fade out at the foot. A hairline that stops dead reads as a table border; one that fades reads as a pen stroke. They start level with the long rule, so the three meet at a corner rather than crossing. */ .hf__i + .hf__i{position:relative} .hf__i + .hf__i::before{content:'';position:absolute;pointer-events:none; left:0;top:calc(clamp(1rem,2vw,1.55rem) * -1);bottom:.2rem;width:1px; background:linear-gradient(to bottom, rgba(217,201,169,.34),rgba(217,201,169,.3) 40%,rgba(217,201,169,0))} /* the kicker over each entry has nothing left to do; the long rule does it */ .hf__r{display:none;width:26px;height:1px;background:var(--champagne); margin-bottom:.35rem} .hf__k{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase; color:var(--champagne);line-height:1.3; text-shadow:0 1px 10px rgba(18,20,14,.8); /* Reserve two lines of label height, so a one-word label ("Open") and a two-word one ("Opening hours") both push the value down by the same amount. Values below are then on the same baseline. */ min-height:calc(1.3em * 2)} /* Values anchor to the bottom of their cell: with labels of varying real line count, this is what makes the figure line up across all four. */ .hf__v{align-self:end} .hf__v{font-family:var(--serif);font-weight:300; font-size:clamp(1.2rem,2.4vw,1.95rem);line-height:1.15;letter-spacing:-.01em; color:var(--cream);text-wrap:balance; text-shadow:0 1px 12px rgba(18,20,14,.75),0 2px 30px rgba(18,20,14,.6)} @media (max-width:740px){ /* three across is too tight to read at this width, so they run two up and one under, which keeps the figures at a size worth printing */ /* a two column grid rather than a wrapping flex row: left on its own on the second line, the odd item stretched to the full width and the group came out lopsided */ /* Facts and actions become one grid. `display:contents` drops the list box so its three entries become cells of that grid directly, which is what lets the buttons take the fourth cell, beside Where we work, instead of starting a new row under it. The list keeps an explicit role, since contents has historically taken the list semantics with the box. The columns are not even: the right one is widened because it carries a button whose words cannot be made to wrap, while the left one only has to hold a short label. */ .hero__foot{display:flex;flex-direction:column;gap:0} /* THE PHONE GETS THE SAME BAND AS THE DESKTOP. It used to break the band up and scatter the three facts through a two column grid with the buttons, each with its own little kicker rule. That read as clutter, and it threw away the one device that makes the desktop foot work: a single line running the whole way across with the facts standing along it. Three across at this width is tight but it measures: the values are the widest thing in each column at about 80px and the columns are 105, so only the small caps labels wrap, which is what small caps labels are for. The buttons take a row of their own above it. */ .hf__r{display:none} .hf__i:nth-child(1){grid-column:auto;grid-row:auto} /* Champagne is a beautiful label colour and it holds 4.97:1 on the wide crop, but on the portrait photograph, at this height, it lands at 3.12. Cream carries 5.34 in the same spot. The kicker rule above each fact stays champagne, so the accent does not leave the group. */ .hf__k{color:var(--cream)} /* the tracking gives way rather than the line: at .14em WHERE WE WORK broke across two lines once the column narrowed to make room for the button */ .hf__k{letter-spacing:.09em} .hf__v{font-size:1.1rem} .hf__r{width:20px} } /* -------------------------------------------------- CENTRED SECTION HEADS */ /* Eyebrow, a short hairline echoing the rule beside JAMAICA in the hero, then the heading on a measure tight enough to break into balanced lines. */ .shead{justify-items:center;text-align:center} .shead .eyebrow{display:flex;flex-direction:column;align-items:center;gap:var(--s3)} .shead .eyebrow::after{content:'';width:54px;height:1px;background:currentColor;opacity:.45} .shead .display,.shead .title{max-width:20ch;text-wrap:balance} .shead p:not(.eyebrow){max-width:32rem;margin-inline:auto;text-wrap:pretty} /* section CTAs sit on the centre line so the block reads as one column */ .pf__foot,.pr__foot{display:flex;justify-content:center;align-items:center} /* ======================================================= 2 · SERVICES */ .sv{padding:var(--bay) var(--gutter);background:var(--cream)} .sv__head{max-width:var(--maxw);margin:0 auto var(--s8);display:grid;gap:var(--s4)} .ss{max-width:var(--maxw);margin-inline:auto;display:grid;gap:var(--s7)} .ss__list{border-top:1px solid var(--rule)} .ss__i{border-bottom:1px solid var(--rule)} .ss__b{width:100%;display:flex;align-items:baseline;gap:var(--s5);padding:var(--s5) 0;text-align:left} .ss__n{font:500 var(--t-xs)/1 var(--sans);letter-spacing:.28em;color:var(--ink-faint);flex:none; transition:color var(--d) var(--ease)} .ss__name{flex:1;font-family:var(--serif);font-weight:300;line-height:1.06; font-size:clamp(1.45rem,3.4vw,2.7rem);color:var(--ink-muted); transition:color var(--d) var(--ease)} .ss__plus{flex:none;position:relative;width:14px;height:14px;align-self:center;color:var(--ink-faint)} .ss__plus::before,.ss__plus::after{content:'';position:absolute;inset:50% 0 auto 0;height:1px; background:currentColor;transition:transform var(--d) var(--ease),opacity var(--d) var(--ease)} .ss__plus::after{transform:rotate(90deg)} .ss__i.on .ss__name{color:var(--ink)} .ss__i.on .ss__n{color:var(--bronze)} .ss__i.on .ss__plus::after{transform:rotate(0);opacity:0} .ss__i.on .ss__plus{color:var(--bronze)} .ss__p{overflow:hidden;height:0;transition:height var(--d) var(--ease-out)} .ss__p-in{padding:0 0 var(--s6);display:grid;gap:var(--s5);justify-items:start;max-width:34rem} .ss__mob{width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--limestone-lt); border-radius:var(--r-lg);box-shadow:var(--edge)} .ss__mob img{width:100%;height:100%;object-fit:cover} .ss__line{color:var(--ink-muted)} .ss__stage{display:none} /* ========================================================== 3 · THE PROOF */ .pf{padding:var(--bay) var(--gutter);background:var(--ivory)} .pf__head{max-width:var(--maxw);margin:0 auto var(--s8);display:grid;gap:var(--s4); justify-items:center} /* the portfolio link sits under the heading now, so it needs its own air above it rather than the tight gap the eyebrow and title share */ .pf__head .pf__portfolio{margin-top:var(--s4)} .pf__feature{max-width:var(--maxw);margin-inline:auto} .pf__fig{position:relative;overflow:hidden;background:var(--limestone-lt);aspect-ratio:16/9; border-radius:var(--r-lg);box-shadow:var(--edge)} .pf__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)} .pf__feature:hover .pf__fig img,.pf__s:hover .pf__fig img{transform:scale(1.035)} .pf__fig--over{max-height:84svh;border-radius:var(--r-xl);box-shadow:var(--sh-md),var(--edge)} .pf__fig--over::after{content:'';position:absolute;inset:auto 0 0 0;height:50%;z-index:1; background:linear-gradient(to top,rgba(20,22,15,.76),rgba(20,22,15,.26) 45%,transparent); pointer-events:none} .pf__cap{position:absolute;z-index:2;left:clamp(1.1rem,3vw,2.4rem);bottom:clamp(1rem,2.4vw,1.9rem); color:var(--cream);display:grid;gap:.5rem} .pf__t{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,4.4vw,3.4rem);line-height:1; letter-spacing:-.02em} .pf__m{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:rgba(243,239,230,.8)} .pf__pair{max-width:var(--maxw);margin:var(--s6) auto 0;display:grid;gap:var(--s6)} .pf__s .pf__fig{aspect-ratio:4/5} .pf__scap{padding-top:var(--s4);display:grid;gap:.35rem} .pf__st{font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.1} .pf__s .pf__m{color:var(--ink-muted)} .pf__cmp{max-width:var(--maxw);margin:var(--s9) auto 0} /* Full width is right for a landscape pair and far too tall for an upright one, so the upright frame is held to a portrait's width. The cap sits on the frame rather than on the carousel around it. Holding the whole carousel to 38rem pulled the control row in with it, which put the arrows against the edge of the photograph instead of the edge of the section. The row now runs the full measure and the controls range right against it, with the picture still centred inside. A definite width, not max-width. These are grid items now, and an auto inline margin stops a grid item stretching to its track, so max-width alone left the stage sized to its contents. Its slides are absolutely positioned, so those contents measure zero and the frame vanished entirely. */ /* `cmpx--tall` used to cap the frame at 38rem so an upright pair did not tower. Nothing adds that class any more: the stage is 16/9 and runs the full measure, matching the featured project above it. The rule is gone rather than left sitting here unreachable. See the note in proofSection() in js/app.js for the history. */ .pf__foot{max-width:var(--maxw);margin:var(--s7) auto 0} /* drag comparison */ .cmp{position:relative;aspect-ratio:16/9;overflow:hidden;--pos:50%;touch-action:pan-y;user-select:none; background:var(--limestone-lt);border-radius:var(--r-lg);box-shadow:var(--edge)} .cmp__lyr{position:absolute;inset:0} /* An upright photograph covered into the wide frame keeps a band across its middle by default. --cmp-focus moves that band, so a room whose subject sits low is not cropped off at the knees. */ .cmp__lyr img{width:100%;height:100%;object-fit:cover; object-position:50% var(--cmp-focus,50%)} .cmp__lyr--b{clip-path:inset(0 calc(100% - var(--pos)) 0 0)} .cmp__tag{position:absolute;bottom:1.2rem;font-size:var(--t-xs);letter-spacing:.2em; text-transform:uppercase;color:var(--cream);z-index:3;pointer-events:none; padding:.55em 1em;border-radius:var(--r-pill);background:rgba(20,22,15,.42); -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%); box-shadow:inset 0 0 0 1px rgba(243,239,230,.14)} .cmp__tag--b{left:1.2rem} .cmp__tag--a{right:1.2rem} .cmp__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;background:var(--cream); z-index:4;pointer-events:none} .cmp__grip{position:absolute;top:50%;left:50%;translate:-50% -50%;width:54px;height:54px; border-radius:50%;border:1px solid rgba(243,239,230,.65);background:rgba(20,22,15,.35)} .cmp__grip::before,.cmp__grip::after{content:'';position:absolute;top:50%;width:7px;height:7px; border-top:1px solid var(--cream);border-right:1px solid var(--cream)} .cmp__grip::before{left:15px;transform:translateY(-50%) rotate(-135deg)} .cmp__grip::after{right:15px;transform:translateY(-50%) rotate(45deg)} /* Placeholder plate. A fine hatch reads at any width, so a clipped plate never looks empty. KEEP THIS IN STEP WITH .rsv, further down the file. They are the same object: a picture the studio is holding space for. This one is absolutely positioned inside a figure and carries a dark variant for the before and after frames; .rsv fills its parent on the about spread and the portfolio tiles. Everything else about them, ground, mark, rule and label, matches on purpose, because two different treatments for a missing photograph is the sort of thing that makes a finished site look unfinished. */ .plate{position:absolute;inset:0;display:grid;place-items:center; background: repeating-linear-gradient(135deg,rgba(29,31,24,.05) 0 1px,transparent 1px 14px), linear-gradient(152deg,var(--limestone-lt),var(--limestone))} .plate--dark{background: repeating-linear-gradient(135deg,rgba(243,239,230,.05) 0 1px,transparent 1px 14px), linear-gradient(152deg,var(--olive-800),var(--olive-950))} /* the printed rule, inset from the trim, the way a reserved plate is marked */ .plate::after{content:'';position:absolute;inset:clamp(.7rem,1.6vw,1.15rem); border:1px solid rgba(125,95,58,.24);pointer-events:none} .plate--dark::after{border-color:rgba(217,201,169,.2)} .plate__m{width:clamp(56px,16%,104px);aspect-ratio:1/1; color:var(--bronze);opacity:.3} .plate--dark .plate__m{color:var(--champagne);opacity:.26} .plate__m svg{width:100%;height:100%;display:block} /* 11px caps: 5.12 on the light ground at its worst pixel, 5.58 on the flat, and 5.58 for the cream on the dark variant. See the note on .rsv__t. */ .plate__t{position:absolute;left:0;right:0;bottom:clamp(1.4rem,3vw,2.1rem); text-align:center;padding:0 1.5rem; font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase; color:#513B1F} .plate--dark .plate__t{color:var(--on-dark-mute)} .ph{display:inline-block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:500; padding:.4em .7em;border-radius:var(--r-pill);border:1px solid currentColor; vertical-align:middle;margin-left:.5em} /* ============================================================ 3b · REVIEWS */ /* A rail that drifts across the full width of the page. Edge-to-edge with the ends feathered away, so quotes appear to come from off-screen rather than from a container. */ /* ------------------------------------------------------- 4b · REVIEWS RAIL */ /* The band is set on olive, and that one decision is most of this redesign. On limestone a cream card had about four points of value between it and the ground, so five of them in a row read as a single beige mass with some rounding in it, and no amount of shadow work rescues that. On a dark ground the same cards become paper on a dark table: the shadow has somewhere to fall, the champagne rim catches the light, and the quotes carry. It buys the homepage a change of key too. Selected work, about, why and process all sit on light grounds, so without this the middle of the page runs five sections in the same register. Three things make it read as live rather than merely animated: the rail drifts, and holds still only once the pointer settles on a card the cards nearest the middle come forward and the outer ones fall back an idle voice note shimmers along its own waveform until it is played */ .rv{position:relative;isolation:isolate;padding:var(--bay) 0; background:var(--olive-950);color:var(--cream);overflow:hidden} /* light for the cards to sit in and a floor beneath them, so the band has depth of its own before anything has moved */ .rv::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(58% 46% at 50% 46%,rgba(203,176,125,.18),transparent 72%), radial-gradient(130% 62% at 50% 106%,rgba(0,0,0,.5),transparent 64%)} .rv__head{max-width:var(--maxw);margin:0 auto var(--s8);padding:0 var(--gutter); display:grid;gap:var(--s4);justify-items:center;text-align:center} /* the eyebrow and its hairline are coloured for the light grounds they usually sit on, and come out near 2.5:1 here */ .rv .eyebrow{color:var(--champagne)} .rv__rail{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y; /* the cards dissolve at the edges instead of being cut off by them */ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 clamp(3rem,9vw,9rem), #000 calc(100% - clamp(3rem,9vw,9rem)),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 clamp(3rem,9vw,9rem), #000 calc(100% - clamp(3rem,9vw,9rem)),transparent 100%)} .rv__rail.grabbing{cursor:grabbing} .rv__rail:focus-visible{outline:2px solid var(--champagne);outline-offset:6px} .rv__track{display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2.25rem); width:max-content;padding-inline:var(--gutter); padding-block:clamp(2.25rem,4vw,3.5rem);will-change:transform} /* ---- depth ---- */ /* The custom property is written by the rail every frame: 1 when the card is at the middle of the band, 0 at either edge. It defaults to 1, so with the script absent or motion reduced every card is simply full size. The alternating vertical drop the cards used to carry is gone. It was trying to make rhythm by offsetting a row of identical rectangles, and what it actually read as was a layout that had not quite settled. Depth does that job properly, and in the right axis. */ .rv__i{flex:none;width:clamp(290px,27vw,406px);--near:1; transform:scale(calc(.9 + var(--near) * .1)); opacity:calc(.76 + var(--near) * .24); will-change:transform,opacity} /* ---- the card ---- */ /* Paper: a ground that warms away from a top-left light, a champagne rim fine enough to read as an edge rather than a border, and a shadow with black in it, because the brown one that worked on limestone vanishes on olive. */ .rv__card{position:relative;isolation:isolate;overflow:hidden; display:grid;gap:clamp(1.3rem,2vw,1.8rem); padding:clamp(2.3rem,3.2vw,3rem) clamp(1.7rem,2.5vw,2.25rem) clamp(1.6rem,2.3vw,2.05rem); border-radius:var(--r-xl); background: radial-gradient(135% 95% at 0% 0%,rgba(255,255,255,.96),transparent 56%), linear-gradient(168deg,var(--ivory) 0%,#F1EADC 100%); box-shadow: inset 0 0 0 1px rgba(203,176,125,.5), inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(0,0,0,.36), 0 34px 62px -28px rgba(0,0,0,.9); transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)} /* the lift lives on the card and the depth scale on the item around it, so the two never write to the same transform and fight each other */ .rv__rail:not(.grabbing) .rv__card:hover{transform:translateY(-8px); box-shadow: inset 0 0 0 1px rgba(203,176,125,.82), inset 0 1px 0 rgba(255,255,255,1), 0 3px 7px rgba(0,0,0,.42), 0 48px 84px -30px rgba(0,0,0,1)} /* The quotation mark set oversized as a watermark behind the opening line, rather than a small glyph sitting politely in the margin. It used to hang at -.3em, on the idea that cropping it against the top edge would read as a bleed. At this size a serif quotation mark carries its ink in the top third of its own line box, so what survived the crop was two tails, and two champagne blobs in the corner of every card read as a rendering fault rather than as typography. It now sits inside the card, with the opacity dropped far enough that the first line of the quote still clears AA over it by a wide margin. */ .rv__card::before{content:'\201C';position:absolute;z-index:-1; top:.01em;left:.05em;font-family:var(--serif);font-weight:400; font-size:clamp(5.5rem,7.6vw,8.6rem);line-height:1; color:var(--champagne);opacity:.3;pointer-events:none} .rv__q{font-family:var(--serif);font-weight:300; font-size:clamp(1.1rem,1.6vw,1.36rem);line-height:1.58;color:var(--ink); letter-spacing:-.004em;text-wrap:pretty} /* ---- who said it ---- */ .rv__by{position:relative;display:flex;align-items:center;gap:var(--s4); padding-top:clamp(1.1rem,1.6vw,1.4rem)} .rv__by::before{content:'';position:absolute;top:0;left:0;width:34px;height:1px; background:var(--bronze);opacity:.5} /* the initial, taken from the name already on the card */ .rv__mono{flex:none;width:40px;height:40px;display:grid;place-items:center; border-radius:50%;font-family:var(--serif);font-weight:300;font-size:1.15rem; line-height:1;color:var(--bronze); background:radial-gradient(circle at 50% 30%,rgba(203,176,125,.34),rgba(203,176,125,.16)); box-shadow:inset 0 0 0 1px rgba(125,95,58,.22)} .rv__id{display:grid;gap:.2rem;min-width:0} .rv__who{font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase; color:var(--ink)} .rv__meta{font-size:var(--t-sm);color:var(--ink-muted)} /* One short word in the corner rather than a sentence on a pill under every quote. The rail shows five cards and then clones them, so that sentence was appearing fifteen times on one screen and was the loudest thing in the band. The full disclosure sits once, under the rail, where it reads. */ .rv__sample{position:absolute;top:0;right:0; font:500 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase; /* a deeper umber than --bronze. At 10px on the tag's own tinted ground, and with the card dimmed to .76 at the edge of the rail, bronze lands at 3.44:1. This carries 5.35:1 and still reads brown rather than grey. */ color:#513B1F;padding:.62em 1em; border-radius:0 var(--r-xl) 0 var(--r-md); background:rgba(125,95,58,.12)} /* ---- the card that holds a voice note ---- */ /* It is set in ink instead of paper. It is the one card on the rail you can do something with, and a strip of identical rectangles needs somewhere for the eye to land. The champagne rim and the bloom behind the band keep it reading as a card rather than a hole in the row. */ .rv__i--audio .rv__card{ background: radial-gradient(135% 95% at 0% 0%,rgba(203,176,125,.2),transparent 58%), linear-gradient(168deg,#242718 0%,#14160F 100%); box-shadow: inset 0 0 0 1px rgba(203,176,125,.36), inset 0 1px 0 rgba(203,176,125,.18), 0 2px 5px rgba(0,0,0,.4), 0 38px 70px -28px rgba(0,0,0,1)} .rv__rail:not(.grabbing) .rv__i--audio .rv__card:hover{ box-shadow: inset 0 0 0 1px rgba(203,176,125,.62), inset 0 1px 0 rgba(203,176,125,.26), 0 3px 7px rgba(0,0,0,.46), 0 52px 92px -30px rgba(0,0,0,1)} .rv__i--audio .rv__card::before{opacity:.26} .rv__i--audio .rv__q{color:var(--cream)} .rv__i--audio .rv__who{color:var(--cream)} .rv__i--audio .rv__meta{color:var(--on-dark-soft)} .rv__i--audio .rv__by::before{background:var(--champagne);opacity:.55} .rv__i--audio .rv__mono{color:var(--champagne); background:radial-gradient(circle at 50% 30%,rgba(203,176,125,.3),rgba(203,176,125,.1)); box-shadow:inset 0 0 0 1px rgba(203,176,125,.36)} .rv__i--audio .rv__sample{color:var(--champagne);background:rgba(203,176,125,.16)} /* ---- the voice note ---- */ /* A drawn waveform rather than a progress line. Two sets of bars sit on top of each other and the played one is clipped to the position, which is the same trick the before and after slider uses. */ .rv__kind{font:500 var(--t-xs)/1 var(--sans);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--bronze); display:inline-flex;align-items:center;gap:.55em} .rv__i--audio .rv__kind{color:var(--champagne)} .rv__kind::before{content:'';width:6px;height:6px;border-radius:50%; background:currentColor} /* it breathes while the note is playing, so the card looks live */ .rv__i--audio .rvp.on ~ .rv__by, .rv__card:has(.rvp.on) .rv__kind::before{animation:rvPulse 1.6s ease-in-out infinite} @keyframes rvPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}} .rvp{--p:0%;display:flex;align-items:center;gap:var(--s4); padding:clamp(.7rem,1.1vw,.95rem) clamp(.8rem,1.2vw,1.05rem); border-radius:var(--r-md); background:rgba(203,176,125,.1); box-shadow:inset 0 0 0 1px rgba(203,176,125,.28)} .rvp__b{flex:none;width:40px;height:40px;display:grid;place-items:center; border-radius:50%;color:var(--olive-950);background:var(--champagne); box-shadow:0 1px 3px rgba(0,0,0,.45); transition:background var(--d) var(--ease),transform var(--d-fast) var(--ease)} .rvp__b svg{width:17px;height:17px} .rvp__b:hover{background:var(--cream)} .rvp__b:active{transform:scale(.93)} .rvp__pause{display:none} .rvp.on .rvp__play{display:none} .rvp.on .rvp__pause{display:block} .rvp__track{position:relative;flex:1;min-width:0;height:30px;cursor:pointer} .rvp__track:focus-visible{outline:2px solid var(--champagne);outline-offset:3px; border-radius:4px} .rvp__w{position:absolute;inset:0;display:flex;align-items:center; gap:2px;pointer-events:none} .rvp__w i{flex:1;min-width:0;border-radius:2px;background:currentColor; transition:height .3s var(--ease-out)} .rvp__w--base{color:rgba(203,176,125,.32)} .rvp__w--on{color:var(--champagne); clip-path:inset(0 calc(100% - var(--p)) 0 0)} /* A third copy of the bars, masked to a narrow window that travels along the waveform while the note sits unplayed. It is the difference between a picture of a player and something with sound in it. It is decoration and not playback, so it goes the moment real progress takes over. */ .rvp__w--idle{color:var(--champagne);opacity:.5; -webkit-mask-image:linear-gradient(90deg,transparent,#000 50%,transparent); mask-image:linear-gradient(90deg,transparent,#000 50%,transparent); -webkit-mask-size:34% 100%;mask-size:34% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; animation:rvScan 4.4s var(--ease) infinite} @keyframes rvScan{ 0%{-webkit-mask-position:-38% 0;mask-position:-38% 0} 70%,100%{-webkit-mask-position:138% 0;mask-position:138% 0}} .rvp.on .rvp__w--idle{display:none} .rvp__t{flex:none;font-size:var(--t-xs);letter-spacing:.06em;color:var(--on-dark-soft); font-variant-numeric:tabular-nums;min-width:4ch;text-align:right} .rvp.bad{opacity:.55} /* ---- the foot ---- */ .rv__foot{max-width:var(--maxw);margin:var(--s7) auto 0;padding:0 var(--gutter); display:grid;gap:var(--s4);justify-items:center;text-align:center} .rv__hint{font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase; color:var(--on-dark-soft);display:inline-flex;align-items:center;gap:var(--s4)} .rv__hint::before,.rv__hint::after{content:'';width:clamp(16px,2vw,26px);height:1px; background:currentColor;opacity:.6} .rv__note{font-size:var(--t-sm);color:var(--on-dark-soft);font-style:italic; max-width:52ch} /* a thumb needs more than the drawn control: the button grows, and the seek bar keeps its 30px of waveform but takes a 44px hit area around it */ @media (pointer:coarse){ .rvp__b{width:46px;height:46px} .rvp__track{height:44px} .rvp__w{top:50%;bottom:auto;height:30px;transform:translateY(-50%)} } /* On a narrow screen a card already fills most of the band, so there is no room either side for the depth to be seen. Holding every card at full size there costs nothing and saves a compositor layer per card. */ @media (max-width:740px){ .rv__i{transform:none;opacity:1;will-change:auto} /* One card fills the screen at this width, so the row height is set by the tallest card in the set, which is the one carrying the player. A short quote was then floating in the middle of a 420px band with about 150px of empty ground above and below it, and reading as a layout fault. Stretching the items gives every card the same height; the writing then sits as one optically centred block inside it. Pushing the attribution to the foot instead was worse: on a two line quote it opened a hole through the middle of the card. */ .rv__track{align-items:stretch} .rv__i{display:grid} .rv__card{align-content:center} } @media (prefers-reduced-motion:reduce){ .rv__card,.rv__card:hover{transition:none;transform:none} .rv__i{transform:none;opacity:1} .rv__kind::before{animation:none} .rvp__w--idle{display:none} } /* no animation, no cloning, the rail becomes a normal scroller */ @media (prefers-reduced-motion:reduce){ .rv__rail{overflow-x:auto;cursor:auto;scroll-snap-type:x proximity} .rv__i{scroll-snap-align:center} } /* ======================================================= 4 · START (dark) */ .st{padding:var(--bay) var(--gutter);background:var(--olive-950);color:var(--cream)} .st__head{max-width:var(--maxw);margin:0 auto var(--s8);display:grid;gap:var(--s4)} .st__line{color:var(--on-dark-soft);max-width:34rem;text-wrap:pretty} .st__grid{max-width:var(--maxw);margin-inline:auto;display:grid;border-top:1px solid var(--rule-dark)} /* flex column so every option's CTA lands on the same baseline, however much detail sits above it */ .op{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s6) 0; border-bottom:1px solid var(--rule-dark)} .op__n{font:500 var(--t-xs)/1 var(--sans);letter-spacing:.28em;color:var(--champagne)} .op__name{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.05} .op__meta{font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase; color:var(--on-dark-mute)} .op__price{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.4vw,3rem);line-height:1; letter-spacing:-.02em;margin-top:calc(var(--s3) * -1)} .op__line{font-size:var(--t-sm);color:var(--on-dark-soft)} .op__inc{display:grid} .op__inc li{padding:.6rem 0;border-bottom:1px solid var(--rule-dark-sf); font-family:var(--serif);font-size:1.1rem} .op__rates{display:grid;gap:.5rem;padding-top:var(--s2)} .op__rate{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4)} .op__rate span{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase; color:var(--on-dark-mute);max-width:11rem} .op__rate b{font:400 1.18rem/1 var(--serif);color:var(--cream);flex:none} .op__adds{display:grid;gap:.5rem;padding-top:var(--s4);border-top:1px solid var(--rule-dark-sf)} .op__add{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-size:var(--t-sm)} .op__add span{color:var(--on-dark-mute)} .op__add b{font:400 1.05rem/1 var(--serif);color:var(--champagne)} .op__add i{font-style:normal;font-size:var(--t-xs);color:var(--on-dark-mute)} .op__foot{margin-top:auto;padding-top:var(--s5)} .op__foot .cta--fill{background:var(--cream);color:var(--olive-950);width:100%;justify-content:center} .op__foot .cta--fill::before{background:var(--champagne)} .st__custom{max-width:var(--maxw);margin:var(--s8) auto 0;padding-top:var(--s6); border-top:1px solid var(--rule-dark);display:grid;gap:var(--s5); justify-items:center;text-align:center} .st__ct{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.8vw,2rem);line-height:1.1} .st__cl{color:var(--on-dark-soft);font-size:var(--t-sm);max-width:36rem; margin:.6rem auto 0;text-wrap:pretty} /* ============================================================== 5 · WHY */ .wy{padding:var(--bay) var(--gutter);background:var(--cream);display:grid;gap:var(--s8); max-width:calc(var(--maxw) + var(--gutter) * 2);margin-inline:auto} .wy__body{display:grid;gap:var(--s4);align-content:center} .frame{overflow:hidden;position:relative;aspect-ratio:3/4; border-radius:var(--r-lg);box-shadow:var(--edge)} /* taller than the frame so the parallax shift never exposes an edge */ .frame img{width:100%;height:116%;object-fit:cover;position:absolute;inset:-8% 0 auto 0} .wy__list{margin-top:var(--s5);display:grid;gap:var(--s6)} /* ON A PHONE THESE TRAVEL SIDEWAYS RATHER THAN DOWN. Four points, 30 to 58 words each, cost 815px stacked. Two columns would cut the measure to 160px, which is unreadable for a paragraph. A rail keeps the full measure and costs the height of one. 82% rather than 100% so the next one shows at the edge and it is obvious there is more. The reviews already work this way; this is the page's own idiom. */ @media (max-width:740px){ .wy__list{display:flex;gap:var(--s4); margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none} .wy__list::-webkit-scrollbar{display:none} .wy__list li{flex:0 0 82%;scroll-snap-align:start} } .wy__list li{display:grid;gap:.4rem;padding-top:var(--s4);border-top:1px solid var(--rule)} .wy__n{font:500 var(--t-xs)/1 var(--sans);letter-spacing:.28em;color:var(--bronze)} .wy__name{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.1} .wy__line{color:var(--ink-muted);font-size:var(--t-sm);max-width:30rem} /* ========================================================== 6 · PROCESS */ .pr{padding:var(--bay) var(--gutter);background:var(--limestone-lt)} .pr__head{max-width:var(--maxw);margin:0 auto clamp(3rem,6vw,5.5rem);display:grid;gap:var(--s4)} .pr__line{color:var(--ink-muted);max-width:34rem;margin-inline:auto;text-wrap:pretty} .pr__foot{max-width:var(--maxw);margin:clamp(3.25rem,6vw,5.5rem) auto 0} .pr__foot .cta--fill{padding-inline:2.2em; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(92,78,54,.18), 0 14px 30px -14px rgba(92,78,54,.5)} .pr__foot .cta--fill:hover,.pr__foot .cta--fill:focus-visible{ box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 5px rgba(92,78,54,.2), 0 22px 44px -18px rgba(92,78,54,.55)} /* ------------------------------------------------------------------ BOOK */ /* A book that actually turns. The leaf is hinged on the spine, has a front and a back, and swings through 180 degrees; app.js swaps the static pages underneath it at the moment it lands, so the join is invisible. THE SPREAD IS TWO-TONE, AND THAT IS THE WHOLE REDESIGN ----------------------------------------------------- It used to be cream facing cream. Two pages of the same paper, the same value, with a soft fold drawn between them, which is why it read as two rounded rectangles rather than as a book: nothing on the spread had any more weight than anything else, and the left page was nine tenths empty. The verso is now an ink plate and the recto is paper, which is how an art monograph sets a chapter: a dark title page facing the text. It gives the spread a hierarchy, it gives the numeral somewhere to be gold, and it makes the turn itself worth watching, because now a page of light swings over and lands showing ink. Four things then do the work of making it read as paper rather than as a div on a hinge: the stack of page edges down the outer sides, the gutter shadow either side of the spine, the sheen that sweeps across a page as it catches the light on the way round, and a printed grain on both grounds. */ /* the tooth of the paper, tiled. It sits in the background stack rather than in an overlay so it never lies over the type and never touches contrast. */ .fb{max-width:var(--maxw);margin:0 auto; --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E")} .fb__book{position:relative;perspective:2600px;perspective-origin:50% 42%; border-radius:var(--r-xl)} .fb__book:focus-visible{outline:2px solid var(--olive-700);outline-offset:10px} /* the stack of page edges, which is most of why it reads as a book */ .fb__book::before,.fb__book::after{content:'';position:absolute;top:1.4%;bottom:1.4%; width:10px;border-radius:3px;z-index:0;pointer-events:none} .fb__book::before{left:-9px; background:repeating-linear-gradient(to right, rgba(65,68,55,.16) 0 1px,rgba(255,255,255,.55) 1px 3px)} .fb__book::after{right:-9px; background:repeating-linear-gradient(to left, rgba(65,68,55,.16) 0 1px,rgba(255,255,255,.55) 1px 3px)} /* a deeper, warmer shadow than before: the book has to sit on the limestone rather than float a millimetre above it */ /* The floor was 30rem. Consultation, the longest stage, measured 571px once her writing went in, so the book grew by 36px the moment you turned onto it and shrank again on the way out. The floor now clears the tallest page, which holds all eight at one height. Below 900px the stage sets min-height:0 and the pages simply flow, so this only bites on the spread. */ .fb__stage{position:relative;display:grid;grid-template-columns:1fr 1fr; min-height:clamp(37rem,58vh,40rem); transform-style:preserve-3d;touch-action:pan-y; border-radius:var(--r-xl); background:var(--ivory); box-shadow:inset 0 0 0 1px rgba(65,68,55,.09), 0 2px 6px rgba(20,22,15,.14), 0 44px 86px -34px rgba(20,22,15,.72)} .fb__side{position:relative;overflow:hidden;background:var(--ivory)} .fb__side--l{border-radius:var(--r-xl) 0 0 var(--r-xl)} .fb__side--r{border-radius:0 var(--r-xl) var(--r-xl) 0} /* the gutter: paper curving down into the fold on both sides. The ink half is darkened rather than lightened, so the fold reads on both grounds. */ .fb__spine{position:absolute;top:0;bottom:0;left:50%;width:76px; transform:translateX(-50%);z-index:4;pointer-events:none; background: linear-gradient(to right, rgba(20,22,15,0) 0%, rgba(0,0,0,.24) 44%, rgba(0,0,0,.42) 49.4%, rgba(0,0,0,.5) 50%, rgba(20,22,15,.16) 50.6%, rgba(20,22,15,.085) 56%, rgba(20,22,15,0) 100%)} /* ---- the verso: the chapter title page, in ink ---- */ /* There is no photography anywhere in the process, by request, so this page has to be carried by type alone. It gets the studio's mark, a printed rule inset from the trim the way a title page is ruled, and a numeral set large enough to be the picture. */ .fb__title{position:relative;display:grid;align-content:center;justify-items:center; height:100%;text-align:center;color:var(--cream); padding:clamp(3.4rem,6.5vw,5rem) clamp(1.6rem,4vw,3.5rem); background: var(--grain), radial-gradient(86% 64% at 50% 32%,rgba(203,176,125,.17),transparent 68%), linear-gradient(168deg,#262918 0%,#14160F 100%); background-size:160px 160px,auto,auto} /* the printed rule, inset from the trim */ .fb__title::before{content:'';position:absolute; inset:clamp(.95rem,2.1vw,1.6rem); border:1px solid rgba(203,176,125,.2);pointer-events:none} /* the running head, the way a book prints its title across the top of a chapter opening */ .fb__vh{position:absolute;top:clamp(2rem,3.8vw,3rem);left:50%; transform:translateX(-50%);white-space:nowrap; font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase; /* .8 put it at 4.53 against the lightest part of the bloom; .9 carries 5.26 and still reads as printed rather than stamped on */ color:var(--champagne);opacity:.9} /* The emblem is square, and at 40px across it was turning to mush anyway. It gets enough width here to be read as the house mark rather than as a smudge. */ .fb__mark{width:clamp(46px,5.2vw,62px);aspect-ratio:1/1; color:var(--champagne);opacity:.62; margin-bottom:clamp(1rem,2.2vw,1.6rem)} .fb__mark svg{width:100%;height:100%;display:block} .fb__lbl{font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase; color:var(--champagne);opacity:.9;margin-bottom:clamp(.7rem,1.4vw,1rem)} /* Lining, tabular figures with the tracking opened out. Cormorant's default figures are old style, and at this size with the old negative tracking the zero and the one ran together and the numeral read as the word OI. */ .fb__title .fb__n{font-size:clamp(4.6rem,10vw,8.4rem);line-height:.78; letter-spacing:.05em;margin-bottom:0;opacity:1;color:var(--champagne); font-variant-numeric:lining-nums tabular-nums; font-feature-settings:'lnum' 1,'tnum' 1} .ar__folio::before,.ar__folio::after{content:''; width:clamp(26px,6vw,54px);height:1px;background:var(--rule)} .fb__rule{display:block;width:44px;height:1px;background:var(--champagne); opacity:.5;margin:clamp(1.3rem,2.6vw,2rem) 0} .fb__title .fb__name{max-width:16ch;color:var(--cream)} /* the placeholder marker leaves the title line and becomes a corner tag, so the chapter name is not permanently sharing its baseline with a label */ .fb__title .ph{position:absolute;right:clamp(1.6rem,3.2vw,2.5rem); bottom:clamp(1.6rem,3.2vw,2.5rem);margin:0; color:var(--champagne);opacity:.75} /* ---- the recto: the writing, on paper ---- */ /* The head and the folio are pinned to the edges of the page, so the padding is what reserves room for them. It used to be one even value, which left the writing one pixel clear of the running head on a short stage and fifteen pixels UNDER it on the longest. Top and bottom are now set to clear each of them outright. */ .fb__page{position:relative;display:grid;align-content:center;height:100%; padding:clamp(2rem,4.5vw,3rem) clamp(1.6rem,4vw,3.5rem); background:var(--grain),var(--ivory); background-size:160px 160px,auto} /* The running head, with the rule a book would set beside it, pinned to the head of the page. Sitting in the flow it was vertically centred with the text and floated in the middle of a very tall page, which is the one place a running head never goes. */ .fb__rh{position:absolute;top:clamp(2.1rem,4.2vw,3.4rem); left:clamp(1.6rem,4vw,3.5rem);right:clamp(1.6rem,4vw,3.5rem);margin:0; display:flex;align-items:center;gap:var(--s4); font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase; color:var(--bronze)} .fb__rh::after{content:'';flex:1;height:1px;background:currentColor;opacity:.32} .fb__n{font-family:var(--serif);font-weight:300; font-size:clamp(2.6rem,5vw,4.2rem);line-height:.8;letter-spacing:-.04em; color:var(--bronze);margin-bottom:clamp(1.2rem,2.2vw,1.8rem)} .fb__name{font-family:var(--serif);font-weight:300; font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.08;letter-spacing:-.015em; text-wrap:balance} /* The recto used to carry one serif sentence. It now carries her opener, one or two paragraphs and, on the first two stages, her Come Prepared With list, so the writing is set as a proper column: a display line to open, and a smaller sans beneath it that can take sixty words without the page becoming a wall of large italic. */ /* 40ch left a 304px column inside a 500px page and ran the longest stage to six lines a paragraph, which is what pushed the book taller than the other seven. 46ch fills the page properly and takes a line off each paragraph. */ .fb__body{display:grid;gap:clamp(.8rem,1.5vw,1rem);max-width:46ch; align-content:center} .fb__lead{font-family:var(--serif);font-weight:300; font-size:clamp(1.15rem,2.2vw,1.62rem);line-height:1.24;letter-spacing:-.015em; color:var(--ink);text-wrap:balance} .fb__p{font-size:clamp(.875rem,1.15vw,.95rem);line-height:1.64; color:var(--ink-soft);text-wrap:pretty} /* Her list, set as a note between the paragraphs the way a book sets an aside: hairlines above and below rather than a tinted box, because the page is paper and a panel on it would read as a screen. */ .fb__prep{border-block:1px solid var(--rule); padding-block:clamp(.6rem,1.3vw,.8rem); display:grid;gap:clamp(.45rem,1vw,.58rem)} .fb__prep-h{font:500 var(--t-xs)/1 var(--sans);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--bronze)} .fb__prep-l{list-style:none;margin:0;padding:0; display:grid;gap:.32rem .9rem;font-size:clamp(.82rem,1.05vw,.9rem); line-height:1.5;color:var(--ink-soft)} /* She wrote these as one run separated by bullets, not as a tall stack. Two columns is closer to how she set it down, and it keeps the longest stage from pushing the book taller than the other seven. */ @media (min-width:901px){ .fb__prep-l{grid-template-columns:repeat(2,minmax(0,1fr))} /* the head and the folio are pinned to the edges here, so the padding is what keeps the writing off them. One even value left the longest stage fifteen pixels UNDER the running head. */ .fb__page{padding:clamp(4rem,7.5vw,5.6rem) clamp(1.6rem,4vw,3.5rem) clamp(3rem,5vw,3.9rem)} } .fb__prep-l li{position:relative;padding-left:.95rem} .fb__prep-l li::before{content:'';position:absolute;left:0;top:.6em; width:4px;height:4px;border-radius:50%;background:var(--bronze);opacity:.62} /* the folio moves to the outer corner, which is where a book sets it and where it stops looking like a caption floating under the column */ .fb__folio{position:absolute;left:auto;right:clamp(1.6rem,4vw,3.5rem); bottom:clamp(1.3rem,2.6vw,2.1rem);transform:none; font-size:var(--t-xs);letter-spacing:.3em;color:var(--ink-muted);opacity:.9; font-variant-numeric:tabular-nums} /* the light that runs across a page as it turns. Flat until the leaf moves. */ .fb__sheen{position:absolute;inset:0;pointer-events:none;opacity:0; background:linear-gradient(102deg, rgba(255,255,255,0) 38%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 62%)} /* ---- the turning leaf ---- */ .fb__leaf{position:absolute;top:0;left:50%;width:50%;height:100%; transform-style:preserve-3d;transform-origin:left center; z-index:6;display:none;will-change:transform} .fb__leaf.on{display:block} .fb__leaf.fwd{transform:rotateY(0deg)} .fb__leaf.bwd{transform:rotateY(-180deg)} /* 1.1s is long for an interface and exactly right for paper: a page has weight, and a quick flick reads as a slide rather than a turn */ .fb__leaf.turning{ transition:transform 1.1s cubic-bezier(.56,.02,.28,1)} .fb__leaf.fwd.turning{transform:rotateY(-180deg)} .fb__leaf.bwd.turning{transform:rotateY(0deg)} .fb__face{position:absolute;inset:0;overflow:hidden; backface-visibility:hidden;-webkit-backface-visibility:hidden; background:var(--ivory)} .fb__face--f{border-radius:0 var(--r-xl) var(--r-xl) 0; box-shadow:-1px 0 0 rgba(65,68,55,.1)} .fb__face--b{transform:rotateY(180deg); border-radius:var(--r-xl) 0 0 var(--r-xl); box-shadow:1px 0 0 rgba(65,68,55,.1)} .fb__face>*{width:100%;height:100%} /* the leaf darkens as it stands up and lifts again as it lands, which is what a page does between you and the light */ .fb__face::after{content:'';position:absolute;inset:0;pointer-events:none; background:rgba(20,22,15,.5);opacity:0} .fb__leaf.turning .fb__face::after{ animation:fbShade 1.1s cubic-bezier(.56,.02,.28,1) both} @keyframes fbShade{ 0% {opacity:0} 30% {opacity:.2} 50% {opacity:.32} 72% {opacity:.18} 100% {opacity:0} } .fb__leaf.turning .fb__sheen{ animation:fbSheen 1.1s cubic-bezier(.56,.02,.28,1) both} /* a narrow band of light crossing the page, not a wash over it: the shade and the sheen peak together, so anything stronger bleaches the type */ @keyframes fbSheen{ 0% {opacity:0;transform:translateX(-34%)} 40% {opacity:.26} 62% {opacity:.14} 100% {opacity:0;transform:translateX(34%)} } /* and the page beneath is briefly in its shadow */ .fb__leaf.turning~.fb__spine{animation:fbGutter 1.1s ease both} @keyframes fbGutter{0%{opacity:1}45%{opacity:.35}100%{opacity:1}} /* ---- turning ---- */ .fb__bar{margin-top:var(--s6);display:flex;align-items:center;justify-content:center; gap:clamp(.75rem,2vw,1.5rem)} .fb__nav{flex:none;width:48px;height:48px;display:grid;place-items:center; border-radius:50%;color:var(--ink-soft);background:var(--ivory); box-shadow:inset 0 0 0 1px rgba(65,68,55,.12),0 1px 2px rgba(20,22,15,.08); transition:background var(--d) var(--ease),color var(--d) var(--ease), transform var(--d-fast) var(--ease)} .fb__nav svg{width:20px;height:20px} .fb__nav:hover{background:var(--olive-700);color:var(--cream)} .fb__nav:active{transform:scale(.94)} /* The index is numbered rather than eight anonymous dashes. The dashes told you how many stages there were and nothing else, and they gave the reader no reason to go to any particular one. */ .fb__dots{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center} .fb__d{position:relative;min-width:40px;height:44px;padding:0 .2rem; display:grid;place-items:center; font:500 var(--t-xs)/1 var(--sans);letter-spacing:.12em; color:var(--ink-muted);font-variant-numeric:tabular-nums; transition:color var(--d) var(--ease)} .fb__d::after{content:'';position:absolute;left:50%;bottom:9px; transform:translateX(-50%);width:0;height:1px;background:#5E4526; transition:width var(--d) var(--ease)} .fb__d:hover{color:var(--ink)} /* deeper than --bronze, which lands at 3.76:1 on limestone at this size */ .fb__d.on{color:#5E4526} .fb__d.on::after{width:20px} @media (pointer:coarse){ .fb__d{min-width:44px} } /* ---- stacked, where there is no spine to hinge on ---- */ @media (max-width:900px){ .fb__book{perspective:none} .fb__book::before,.fb__book::after{display:none} .fb__stage{grid-template-columns:1fr;grid-template-rows:auto auto; min-height:0;transform-style:flat; transition:opacity .22s var(--ease),transform .22s var(--ease)} /* THE PAGE TURN ON A PHONE. No spread, no spine, so no half sheet to hinge. One card, turning: it lifts away on the edge being left behind and the next arrives from the other side. The perspective is inside the transform rather than on the parent, so nothing else in the book has to become a 3D context to get it. */ .fb__stage{backface-visibility:hidden} .fb__stage.x,.fb__stage.in{will-change:transform,opacity} /* the plain fade is what reduced motion still gets */ .fb__stage.x{opacity:0;transform:translateY(8px)} .fb__stage.x--f,.fb__stage.x--b, .fb__stage.in--f,.fb__stage.in--b{opacity:1;transform:none} .fb__stage.x--f{transform-origin:left center; animation:fbOutF .24s var(--ease-soft) both; box-shadow:-20px 0 44px -20px rgba(18,20,14,.5)} .fb__stage.x--b{transform-origin:right center; animation:fbOutB .24s var(--ease-soft) both; box-shadow:20px 0 44px -20px rgba(18,20,14,.5)} .fb__stage.in--f{transform-origin:right center; animation:fbInF .38s var(--ease-out) both; box-shadow:20px 0 44px -20px rgba(18,20,14,.4)} .fb__stage.in--b{transform-origin:left center; animation:fbInB .38s var(--ease-out) both; box-shadow:-20px 0 44px -20px rgba(18,20,14,.4)} .fb__side--l,.fb__side--r{border-radius:0} .fb__side--l{border-radius:var(--r-xl) var(--r-xl) 0 0} .fb__side--r{border-radius:0 0 var(--r-xl) var(--r-xl)} .fb__title{padding-block:clamp(3.4rem,11vw,4.6rem)} /* no room to pin anything on a short page: stacked, the card is a third of its desktop height and the corner tag was landing on the descenders of the stage name */ .fb__rh{position:static;margin-bottom:clamp(1.3rem,4vw,2rem)} .fb__title .ph{position:static;margin:var(--s5) 0 0} .fb__leaf,.fb__spine{display:none} .fb__folio{position:static;transform:none;margin-top:var(--s5);text-align:right} } @media (prefers-reduced-motion:reduce){ .fb__leaf.turning{transition:none} .fb__leaf.turning .fb__face::after, .fb__leaf.turning .fb__sheen, .fb__leaf.turning~.fb__spine{animation:none} } /* =========================================================== 7 · CLOSING */ .fin{position:relative;min-height:66svh;display:grid;align-items:center;isolation:isolate; overflow:hidden;padding:clamp(4rem,8vw,7rem) var(--gutter);color:var(--cream)} .fin__media{position:absolute;inset:0;z-index:-2} .fin__media img{width:100%;height:100%;object-fit:cover} /* centred content, so the scrim pools evenly rather than favouring one side */ .fin__veil{position:absolute;inset:0;z-index:-1;background: radial-gradient(118% 82% at 50% 48%,rgba(20,22,15,.68),rgba(20,22,15,.91) 76%)} .fin__in{max-width:52rem;margin-inline:auto;width:100%;display:grid;gap:var(--s4); justify-items:center;text-align:center} .fin__h{font-family:var(--serif);font-weight:300;font-size:clamp(2.3rem,6.6vw,5.2rem); line-height:.98;letter-spacing:-.025em} .fin__h span{display:block} .fin__h span:nth-child(2){font-style:italic;color:var(--champagne)} .fin__line{color:var(--on-dark-soft);font-size:var(--t-lede);max-width:26rem} .fin__acts{display:flex;align-items:center;justify-content:center;gap:var(--s5); flex-wrap:wrap;margin-top:var(--s3)} .fin__acts .cta--fill{background:var(--cream);color:var(--olive-950)} .fin__acts .cta--fill::before{background:var(--champagne)} /* -------------------------------------------------------------- NEWSLETTER */ /* A hairline, a label and one underlined field. No box, no panel. */ /* A single rounded field with the action sitting inside it, kept deliberately tight: this is the quietest thing in the section and should not eat the height the booking CTAs above it have earned. */ /* The rule above it was separating the newsletter from the two buttons that used to sit there. With those gone it would be a line under nothing, so it goes too and the spacing opens up instead. */ .nl{width:100%;max-width:25rem;margin-top:var(--s7);display:grid;gap:var(--s1); justify-items:center} .nl__l{font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase; font-weight:500;color:var(--champagne)} .nl__t{font-size:var(--t-sm);color:var(--on-dark-soft);text-align:center} .nl__row{margin-top:var(--s3);width:100%;display:flex;align-items:center;gap:var(--s2); padding:.32rem .32rem .32rem 1.2rem;border-radius:var(--r-pill); /* this hairline is the only thing marking the edge of the control, so it has to clear 3:1 against the photograph behind it */ border:1px solid rgba(243,239,230,.45);background:rgba(243,239,230,.08); transition:border-color var(--d) var(--ease),background var(--d) var(--ease)} .nl__row:focus-within{border-color:var(--champagne);background:rgba(243,239,230,.13)} .nl__row input{flex:1;min-width:0;background:none;border:0;padding:.6rem 0; color:var(--cream);font-size:.9rem;font-weight:300;letter-spacing:.02em} .nl__row input:focus{outline:none} .nl__row input::placeholder{color:rgba(243,239,230,.6);letter-spacing:.02em} /* ghost by default so it does not compete with the booking button above, and it fills on hover */ .nl__go{flex:none;padding:.72em 1.3em;border-radius:var(--r-pill); color:var(--cream);background:rgba(243,239,230,.15); font:500 .8rem/1 var(--sans);letter-spacing:.006em; transition:background var(--d) var(--ease),color var(--d) var(--ease), transform var(--d-fast) var(--ease)} .nl__go:hover,.nl__go:focus-visible{background:var(--cream);color:var(--olive-950)} .nl__go:active{transform:scale(.97)} /* no reserved strip: nothing follows the newsletter, so the message can simply appear rather than holding a blank line open all the time */ .nl__msg{font-size:var(--t-sm);color:var(--champagne);min-height:0} .nl__msg:not(:empty){margin-top:var(--s2)} .nl.bad .nl__row{border-color:#C4876B} .nl.bad .nl__msg{color:#DBA88C} .nl.done .nl__row{opacity:.32;pointer-events:none} /* =============================================================== 8 · FAQ */ .faq{padding:var(--bay) var(--gutter);background:var(--ivory)} .faq__head{max-width:var(--maxw);margin:0 auto var(--s6);display:grid;gap:var(--s4)} /* Each question is its own card rather than a row in a ruled list. Closed, it sits a shade deeper than the section ground; open, it rises to the lighter tone and takes a shadow, so opening one reads as the card lifting off the page rather than a panel unfolding below a line. */ .faq__list{max-width:min(var(--maxw),58rem);margin-inline:auto;display:grid;gap:var(--s3)} .fq{--pad:clamp(1.15rem,2vw,1.75rem);--col:var(--s4); border-radius:var(--r-xl);background:var(--cream); box-shadow:inset 0 0 0 1px transparent; transition:background var(--d) var(--ease),box-shadow var(--d) var(--ease), transform var(--d) var(--ease-out)} .fq:hover{background:#EFEADF} .fq.open{background:var(--ivory);transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(65,68,55,.10),var(--sh-md)} .fq__q{width:100%;display:grid;grid-template-columns:1fr auto; align-items:center;gap:var(--col); padding:clamp(1.1rem,1.9vw,1.5rem) var(--pad);text-align:left} .fq__t{font-family:var(--serif);font-weight:300; font-size:clamp(1.08rem,1.9vw,1.45rem);line-height:1.32;letter-spacing:-.008em; text-wrap:pretty;transition:color var(--d) var(--ease)} .fq:hover .fq__t{color:var(--bronze)} .fq.open .fq__t{color:var(--ink)} /* the plus turns through 135 degrees into a cross and fills as it goes */ .fq__s{flex:none;position:relative;display:grid;place-items:center; width:clamp(30px,3.1vw,38px);aspect-ratio:1;border-radius:50%; background:rgba(65,68,55,.07);color:var(--ink-soft); transition:transform var(--d) var(--ease-out),background var(--d) var(--ease), color var(--d) var(--ease)} .fq__s::before,.fq__s::after{content:'';position:absolute; width:clamp(11px,1.1vw,13px);height:1.5px;border-radius:1px;background:currentColor} .fq__s::after{transform:rotate(90deg)} .fq.open .fq__s{transform:rotate(135deg);background:var(--olive-700);color:var(--cream)} .fq__a{overflow:hidden;height:0;transition:height var(--d) var(--ease-out)} .fq__a-in{padding:0 var(--pad) clamp(1.25rem,2vw,1.65rem); max-width:52rem;color:var(--ink-soft);font-size:.95rem;line-height:1.66; text-wrap:pretty} .faq__more{max-width:min(var(--maxw),58rem);margin:var(--s7) auto 0;text-align:center; font-size:var(--t-sm);color:var(--ink-muted)} .faq__more-a{font:inherit;color:var(--bronze);position:relative;padding-bottom:2px} .faq__more-a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px; background:currentColor;opacity:.4;transition:opacity var(--d) var(--ease)} .faq__more-a:hover::after,.faq__more-a:focus-visible::after{opacity:1} @media (max-width:740px){ .fq{--col:var(--s3)} } /* ------------------------------------------------- BEFORE / AFTER CAROUSEL */ /* The slider itself is unchanged; this only steps between several of them. Every transformation is in the DOM at once and cross-faded, so moving between them never reloads and each slider keeps the position it was dragged to. Only the visible one takes pointer events, or a hidden slide would swallow drags meant for the one on top. */ .cmpx{position:relative;display:grid;gap:var(--s5)} .cmpx:focus-visible{outline:2px solid var(--olive-700);outline-offset:8px; border-radius:var(--r-lg)} /* No width cap. It existed to stop a 4/3 frame running 972px tall; at 16/9 the frame is 729px on a 1440 screen, the same as the featured project it is matching, and fits the window without help. */ .cmpx__stage{position:relative;aspect-ratio:var(--cmpx-ar,16/9);border-radius:var(--r-lg); overflow:hidden;background:var(--limestone-lt)} .cmpx__s{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .5s var(--ease-out),visibility 0s linear .5s} .cmpx__s.on{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s} .cmpx__s .cmp{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;height:100%} /* The controls sit above the frame, ranged right, rather than under it. Below a tall photograph they were past the fold on most screens, so people met the first transformation and never learned there were three. Above the frame the count is read before the picture, and it says how many there are before anyone decides to scroll on. They are filled rather than outlined for the same reason: on ivory, a cream disc with a hairline ring reads as decoration, and a control nobody recognises as a control is a control nobody presses. */ .cmpx__bar{display:flex;align-items:center;justify-content:space-between; gap:var(--s4) var(--s6);flex-wrap:wrap} .cmpx__hint{font-size:var(--t-xs);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--ink-muted);margin:0} /* auto rather than space-between alone, so the controls stay hard right even on the wrap, where the hint is no longer there to push them */ .cmpx__ctrl{display:flex;align-items:center;gap:var(--s4);margin-left:auto} .cmpx__nav{width:48px;height:48px;display:grid;place-items:center;border-radius:50%; color:var(--cream);background:var(--olive-700); box-shadow:0 1px 2px rgba(20,22,15,.18),0 12px 24px -14px rgba(20,22,15,.65); transition:background var(--d) var(--ease),color var(--d) var(--ease), transform var(--d-fast) var(--ease),box-shadow var(--d) var(--ease)} .cmpx__nav svg{width:20px;height:20px} .cmpx__nav:hover{background:var(--olive-950);transform:translateY(-2px); box-shadow:0 2px 5px rgba(20,22,15,.22),0 18px 32px -16px rgba(20,22,15,.75)} .cmpx__nav:active{transform:scale(.94)} .cmpx__count{font:500 var(--t-xs)/1 var(--sans);letter-spacing:.2em; color:var(--ink-muted);font-variant-numeric:tabular-nums;min-width:5.5em; text-align:center} .cmpx__cap{display:grid;gap:.35rem;justify-items:center;text-align:center} .cmpx__t{font-family:var(--serif);font-weight:300; font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.15} .cmpx__m{font-size:var(--t-sm);color:var(--ink-muted)} .cmpx__n{margin-top:.35rem;font-size:var(--t-sm);color:var(--ink-muted);font-style:italic; max-width:34rem} @media (max-width:740px){ .cmpx__stage{aspect-ratio:4/5} .cmpx__bar{gap:var(--s4)} } /* ------------------------------------------------------------- PORTFOLIO */ /* The page opens on a full-bleed rotator rather than a grid, so arriving here reads as an introduction to the work rather than a contact sheet. Slides cross-fade and hold a slow scale, which is enough movement to feel alive without turning into a slideshow that demands attention. */ .pb{position:relative;isolation:isolate;overflow:hidden; /* 66vh, the same opening height the about banner uses, so arriving on either page feels like arriving on the same site */ min-height:clamp(26rem,66vh,42rem); display:grid;place-items:center; padding:clamp(8rem,14vh,11rem) var(--gutter) clamp(4rem,8vh,6rem); color:var(--cream);text-align:center;background:var(--olive-950)} .pb__stage{position:absolute;inset:0;z-index:-2} .pb__s{position:absolute;inset:0;opacity:0;transform:scale(1.06); transition:opacity 1.1s var(--ease-out),transform 6s var(--ease-out)} .pb__s.on{opacity:1;transform:scale(1)} .pb__s>picture{width:100%;height:100%} .pb__s img,.pb__s video{width:100%;height:100%;object-fit:cover;display:block} @media (prefers-reduced-motion:reduce){ .pb__s{transition:opacity .2s linear;transform:none} .pb__s.on{transform:none} } .pb__veil{position:absolute;inset:0;z-index:-1;background: radial-gradient(120% 120% at 50% 50%,rgba(18,20,14,0),rgba(18,20,14,.4)), linear-gradient(rgba(18,20,14,.56),rgba(18,20,14,.56))} .pb__in{position:relative;max-width:44rem;display:grid;gap:var(--s4);justify-items:center} .pb .eyebrow{color:var(--champagne)} .pb__h{font-family:var(--serif);font-weight:300; font-size:clamp(2.8rem,8vw,6rem);line-height:.96;letter-spacing:var(--track-mega)} .pb__h em{color:var(--champagne)} .pb__line{color:var(--cream);max-width:30rem;text-wrap:pretty} .pb__h,.pb__line{text-shadow:0 1px 2px rgba(18,20,14,.4),0 6px 40px rgba(18,20,14,.6)} .pb__dots{position:absolute;left:0;right:0;bottom:clamp(1.6rem,4vh,2.6rem); display:flex;justify-content:center;gap:.55rem;z-index:1} .pb__d{width:44px;height:44px;display:grid;place-items:center;border-radius:50%} .pb__d::after{content:'';width:7px;height:7px;border-radius:50%; background:rgba(243,239,230,.45); transition:background var(--d) var(--ease),transform var(--d) var(--ease)} .pb__d:hover::after{background:rgba(243,239,230,.8)} .pb__d.on::after{background:var(--champagne);transform:scale(1.35)} /* ---- the tiles ---- */ .pg{padding:var(--bay) var(--gutter);background:var(--ivory)} .pg__notice{max-width:var(--maxw);margin:0 auto var(--s7);text-align:center; font-size:var(--t-sm);color:var(--ink-muted);font-style:italic} .pg__notice code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal; font-size:.92em;background:var(--cream);padding:.15em .45em;border-radius:var(--r-xs)} .pg__grid{max-width:var(--maxw);margin-inline:auto;display:grid;gap:var(--s6)} @media (min-width:701px){.pg__grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1101px){.pg__grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .pt{display:grid;gap:var(--s4)} .pt__fig{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3; background:var(--limestone-lt);box-shadow:var(--edge),var(--sh-sm); transition:box-shadow var(--d) var(--ease)} .pt__fig>picture{width:100%;height:100%} .pt__fig img{width:100%;height:100%;object-fit:cover; transform:scale(1);transition:transform 1.2s var(--ease-out)} .pt:not(.pt--held):hover .pt__fig img,.pt:focus-visible .pt__fig img{transform:scale(1.045)} .pt:not(.pt--held):hover .pt__fig{box-shadow:var(--edge),var(--sh-md)} .pt__name{font-family:var(--serif);font-weight:300; font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.12;letter-spacing:-.01em; transition:color var(--d) var(--ease)} .pt:not(.pt--held):hover .pt__name{color:var(--bronze)} .pt__meta{margin-top:.3rem;font-size:var(--t-sm);color:var(--ink-muted)} /* ---- the two bands ---- */ /* The client's list arrives in two groups, finished work and work still on site, and the page keeps that division rather than running seventeen tiles together. A rule, a label and a count: the same device a contents page uses, which is the right register for a portfolio and costs almost no ink. */ .pg__band{grid-column:1/-1;display:flex;align-items:center; gap:clamp(.9rem,2.2vw,1.5rem)} .pg__band:not(:first-child){margin-top:var(--s5)} .pg__band-t{order:0;font:500 var(--t-xs)/1 var(--sans); letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft)} .pg__band::after{content:'';order:1;flex:1;height:1px; background:linear-gradient(90deg,rgba(125,95,58,.34),rgba(125,95,58,.05))} /* lining figures: Cormorant sets oldstyle by default, and a tracked-in "10" runs the one into the nought */ .pg__band-n{order:2;font-family:var(--serif);font-weight:300;font-size:1.25rem; line-height:1;font-variant-numeric:lining-nums tabular-nums; letter-spacing:.02em;color:var(--bronze)} /* ---- a project with no photography yet ---- */ /* It is a plate, not a picture, and not a link either. Nothing about it should invite a click that would open on an empty page. */ .pt--held{cursor:default} .pt__fig>.rsv{position:absolute;inset:0} /* The work still on site is marked by the printed rule turning dashed, which is how a provisional plate has always been marked, and by the plate's own wording. Deepening the ground was the first idea and it was wrong: it drove the label down to 4.01 against its own background, under the 4.5 it needs at 11px. A dashed rule says the same thing and costs no contrast. */ .pt--soon .rsv::after{border-style:dashed} .pt--soon .rsv__m{opacity:.22} /* ---- the header with nothing to rotate ---- */ /* No photography has been supplied for the rotator yet. Rather than an empty black band, the emblem is held very faintly behind the title, and the veil stops darkening a ground that is already the darkest olive on the site. */ .pb--bare .pb__veil{background: radial-gradient(85% 85% at 50% 42%,rgba(243,239,230,.055),rgba(18,20,14,0) 72%)} .pb--bare::before{content:'';position:absolute;z-index:-1; left:50%;top:50%;translate:-50% -50%; width:min(31rem,62vw);aspect-ratio:1/1; background:var(--cream);opacity:.05;pointer-events:none; -webkit-mask:url(../assets/img/mark.png) center/contain no-repeat; mask:url(../assets/img/mark.png) center/contain no-repeat; /* mark.png is opaque greyscale, white line on black, with no alpha channel, which is what lets the SVG symbol mask it by luminance. A CSS mask reads ALPHA by default, and an opaque file is alpha 1 everywhere, so the square came through whole. These two lines switch it to luminance, and they sit after the shorthand because the shorthand resets mask-mode. */ -webkit-mask-source-type:luminance; mask-mode:luminance} /* --------------------------------------------------------- ONE PROJECT */ .pj{padding:calc(var(--bay) + 4rem) var(--gutter) var(--bay);background:var(--ivory)} .pj__head{max-width:var(--maxw);margin:0 auto var(--s8)} .pj__back{display:inline-flex;align-items:center;gap:.6em; font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase; color:var(--ink-muted);padding:.6rem 0;transition:color var(--d) var(--ease)} .pj__back:hover{color:var(--bronze)} .pj__back-i{width:18px;height:18px;flex:none;transition:transform var(--d) var(--ease-out)} .pj__back:hover .pj__back-i{transform:translateX(-4px)} .pj__meta{margin-top:var(--s6);font-size:var(--t-xs);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--bronze)} .pj__h{font-family:var(--serif);font-weight:300; font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.02;letter-spacing:-.022em; margin-top:var(--s3)} .pj__body{max-width:var(--maxw);margin-inline:auto} .pj__none{color:var(--ink-muted)} .pj__none a{color:var(--bronze);text-decoration:underline} .pj__b{margin-top:var(--bay)} .pj__b:first-child{margin-top:0} .pj__bt{font:500 var(--t-xs)/1 var(--sans);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--ink-soft); padding-bottom:var(--s4);border-bottom:1px solid var(--rule); margin-bottom:var(--s6);position:relative} .pj__bt::after{content:'';position:absolute;left:0;bottom:-1px;width:30px;height:1px; background:var(--bronze)} .pj__story{max-width:40rem;color:var(--ink-muted);line-height:1.7;text-wrap:pretty} .pj__hint{margin-top:var(--s4);font-size:var(--t-xs);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--ink-muted);text-align:center} .pj__video{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--edge),var(--sh-md); background:var(--limestone-lt)} .pj__video video{width:100%;height:auto;display:block} .pj__grid{display:grid;gap:var(--s5)} @media (min-width:901px){ .pj__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .pj__f--wide{grid-column:1 / -1} } .pj__f{overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3; background:var(--limestone-lt);box-shadow:var(--edge),var(--sh-sm)} .pj__f--wide{aspect-ratio:16/9} .pj__f>picture{width:100%;height:100%} .pj__f img{width:100%;height:100%;object-fit:cover} /* a real project reached by its URL before anything has been published on it */ .pj__held{display:grid;gap:var(--s6);justify-items:center;text-align:center} /* a held plate is a note, not a gallery. Run full width at 16/9 and it is a grey slab the size of a photograph that does not exist yet. */ .pj__held>.rsv{width:min(100%,26rem);aspect-ratio:4/3;border-radius:var(--r-lg); overflow:hidden;box-shadow:var(--edge),var(--sh-sm)} .pj__soon{color:var(--ink-muted);max-width:34rem;text-wrap:pretty} .pj__next{margin-top:var(--bay);padding-top:var(--s7);border-top:1px solid var(--rule); text-align:center} .pj__next a{display:inline-grid;gap:.4rem;padding:.6rem 0} .pj__next-l{font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase; color:var(--ink-muted)} .pj__next-n{font-family:var(--serif);font-weight:300; font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;letter-spacing:-.015em; transition:color var(--d) var(--ease)} .pj__next a:hover .pj__next-n{color:var(--bronze)} /* the homepage now offers the portfolio first and Instagram second */ .pf__foot{flex-wrap:wrap;gap:var(--s4)} /* -------------------------------------------------------- SERVICES BANNER */ /* The services page opens the way the homepage does: a full-bleed photograph with the type over it, so arriving here does not feel like dropping into a plain document. The scrim is even rather than pooled, because this type is centred and the photograph is bright right across the frame. */ .spb{position:relative;isolation:isolate;overflow:hidden; min-height:clamp(24rem,52vh,34rem); display:grid;place-items:center; padding:clamp(8rem,14vh,11rem) var(--gutter) clamp(3.5rem,7vh,5rem); color:var(--cream);text-align:center} .spb__media{position:absolute;inset:0;z-index:-2;width:100%;height:100%} .spb__media img{width:100%;height:100%;object-fit:cover} /* an even wash for the centred type, plus a vignette so the edges stay rich */ /* 64%, because the tub fills the middle of the frame and reads close to white: at 52% the champagne italic came out at 2.69:1 and the supporting line at 3.06:1. The photograph still shows through clearly. */ .spb__veil{position:absolute;inset:0;z-index:-1;background: radial-gradient(120% 120% at 50% 50%,rgba(18,20,14,0),rgba(18,20,14,.34)), linear-gradient(rgba(18,20,14,.64),rgba(18,20,14,.64))} .spb__in{position:relative;max-width:44rem;display:grid;gap:var(--s4); justify-items:center} .spb .eyebrow{color:var(--champagne)} .spb .eyebrow::after{background:currentColor} .spb__h{font-family:var(--serif);font-weight:300; font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;letter-spacing:var(--track-mega)} .spb__h em{color:var(--champagne)} .spb__line{color:var(--cream);max-width:32rem;text-wrap:pretty} .spb__act{margin-top:var(--s3)} /* the same halo the hero type carries, for the same reason */ .spb__h,.spb__line{text-shadow:0 1px 2px rgba(18,20,14,.4),0 6px 40px rgba(18,20,14,.6)} /* the page body starts below the banner and needs no top run-up of its own */ .sp{padding-top:var(--bay)} /* ---------------------------------------------------------- SERVICES PAGE */ /* Five services down one page is a long read, so it is set as five chapters rather than five stacked cards: an oversized numeral opening each one, the photograph holding its place while the detail scrolls past it, and a specification list set against hairlines instead of bullets. The index at the top sticks under the navigation and marks where you are, which is the difference between five services and one endless column. */ .sp{padding:0 0 var(--bay);background:var(--ivory);position:relative} /* ---- the sticky index ---- */ /* A shelf of frosted glass rather than a plain translucent strip: a highlight along its top edge, a warm hairline along the bottom, and just enough shadow under it that the page reads as passing beneath it. */ /* THE SHELF HAS TO BE OPAQUE. .985 still let the page text ghost through on a bright image behind it, so the shelf reads as a window. Solid cream, no backdrop blur: nothing underneath has anywhere to show through from. The bottom padding also stays non-zero so type passing below cannot touch the rail. */ .sp__jump{position:sticky;top:clamp(4.6rem,9vh,6.4rem);z-index:20; padding:var(--s3) var(--gutter) var(--s2); background:var(--cream); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 rgba(125,95,58,.18), 0 14px 26px -22px rgba(20,22,15,.55)} /* five full service names never fit one line, so the rail scrolls. The fade at each end is the only thing that says so, and js keeps the active item inside the visible part as you read down the page. The fade is deeper than it was, because at 24px the last name was being cut off mid-letter and reading as a layout that had run out of room rather than as a rail. */ /* THE ENTRIES ARE NEVER SLICED ANY MORE. The fade used to run from both ends, so whatever entry happened to sit at the left edge was cut through mid word: "01" rendered as a stump and the name beside it began halfway. Read quickly that does not look like a rail that scrolls, it looks like the page's words running through the shelf, which is exactly what the client reported twice. Two changes. The fade is on the right only, so the entry you are reading always starts whole at the left edge. And the rail snaps, so scrolling can only ever come to rest with an entry flush against that edge rather than halfway through one. */ .sx__ix{position:relative;max-width:var(--maxw);margin:0 auto; display:flex;gap:0; overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth; scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(to right,#000 0, #000 calc(100% - 56px),transparent 100%); mask-image:linear-gradient(to right,#000 0, #000 calc(100% - 56px),transparent 100%)} .sx__ix::-webkit-scrollbar{display:none} /* No pill. A filled lozenge sitting among plain text made the current service the heaviest object on the page, and it gave the rail a lumpy rhythm, because the one entry you were meant to read was suddenly a different shape from all of its neighbours. An index in a book marks its place with a rule, so this one does too, and the rule travels. */ .sx__ixa{position:relative;flex:0 0 auto;display:flex;align-items:baseline; scroll-snap-align:start; gap:.7em;min-height:46px; padding:.75rem clamp(.9rem,1.6vw,1.45rem) .85rem; white-space:nowrap;transition:color var(--d) var(--ease)} /* the hairline between entries, which is what gives a printed index its rhythm. It sits on the entry rather than in a gap, so the spacing holds whatever length the names run to. */ .sx__ixa::after{content:'';position:absolute;right:0;top:50%; transform:translateY(-50%);width:1px;height:13px; background:rgba(65,68,55,.18)} .sx__ixa:last-child::after{display:none} .sx__ixa:focus-visible{outline:2px solid var(--olive-700);outline-offset:-3px; border-radius:4px} /* lining, tabular figures: Cormorant sets old style by default, and at this size the zero and the one of 01 ran together into something like an O */ /* Full strength, not .75. Dimmed it came out at 3.32:1 on the ivory bar, and the active and inactive states are told apart by colour anyway. */ .sx__ixn{font-family:var(--serif);font-weight:300;font-size:.86rem; letter-spacing:.06em;color:var(--bronze);line-height:1; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:'lnum' 1,'tnum' 1; transition:color var(--d) var(--ease),opacity var(--d) var(--ease)} .sx__ixt{font-size:var(--t-xs);letter-spacing:.14em; text-transform:uppercase;color:var(--ink-muted); transition:color var(--d) var(--ease)} .sx__ixa:hover .sx__ixt{color:var(--ink)} .sx__ixa:hover .sx__ixn{color:#5E4526} .sx__ixa.on .sx__ixt{color:var(--ink)} /* deeper than --bronze, which does not make 4.5:1 at this size on ivory */ .sx__ixa.on .sx__ixn{color:#5E4526} /* The travelling rule. A width transition redraws the bar every frame; a scaled transform is composited, so it stays smooth while the rail is being scrolled underneath it at the same time. */ .sx__ind{position:absolute;left:0;bottom:0;width:1px;height:2px; background:#5E4526;border-radius:2px;pointer-events:none; transform:translateX(0) scaleX(0);transform-origin:left center; transition:transform .55s var(--ease-out)} @media (prefers-reduced-motion:reduce){ .sx__ind{transition:none} .sx__ix{scroll-behavior:auto} } /* ---- the placeholder notice, as a deliberate band ---- */ .sp__notice{max-width:var(--maxw);margin:var(--s7) auto 0; display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap; padding:var(--s4) var(--s5);margin-inline:auto;width:calc(100% - var(--gutter) * 2); border-radius:var(--r-md); background:rgba(125,95,58,.06); box-shadow:inset 0 0 0 1px rgba(125,95,58,.18); font-size:var(--t-sm);color:var(--ink-soft);line-height:1.6} .sx__nt{flex:none;font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase; color:var(--cream);background:var(--bronze); padding:.35em .8em;border-radius:var(--r-pill)} .sp__notice code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em;padding:.15em .45em;border-radius:5px; background:rgba(65,68,55,.1);color:var(--ink)} .sp__list{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gutter); display:grid;gap:clamp(5rem,12vw,9rem);margin-top:clamp(4rem,9vw,7rem)} /* ---- the chapter opener ---- */ .sx{scroll-margin-top:clamp(8rem,16vh,11rem)} .sx__open{display:grid;gap:var(--s5);align-items:start; padding-bottom:var(--s6);margin-bottom:clamp(2rem,5vw,3.5rem); border-bottom:1px solid var(--rule)} /* Lining, tabular figures with the tracking opened out. At -.05em Cormorant ran the zero and the one of 01 together and the standing numeral beside the service name read as the word OI. */ .sx__n{font-family:var(--serif);font-weight:300; font-size:clamp(3.4rem,9vw,7rem);line-height:.74;letter-spacing:.04em; color:var(--bronze);opacity:.28; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:'lnum' 1,'tnum' 1} .sx__name{font-family:var(--serif);font-weight:300; font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.04;letter-spacing:-.025em; text-wrap:balance} /* the tag is sized for body copy, so against a 3.4rem title it needs to sit off the baseline and keep its distance rather than butting the last word */ .sx__name .ph{vertical-align:middle;margin-left:.6em;transform:translateY(-.15em)} .sx__lead{margin-top:var(--s4);font-size:var(--t-lede);color:var(--ink-soft); line-height:1.6;max-width:36ch;text-wrap:pretty} /* ---- the body ---- */ .sx__grid{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:start} /* A picture at 4/5 in a column this wide came out 902px tall on a laptop, which is taller than the window it is sitting in, and a sticky figure you cannot see all of is not doing its job. It is a shorter portrait now, and capped, so the eye reaches the writing beside it. */ /* a headed entry: the claim in small caps, the sentence under it */ .sx__li--pair{display:grid;gap:.3rem} .sx__li-h{font-weight:500;font-size:var(--t-xs);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--ink)} .sx__li-p{color:var(--ink-muted);line-height:1.7} /* the sentence that introduces a list rather than belonging to it */ .sx__lead-in{color:var(--ink-muted);line-height:1.7;margin-bottom:var(--s4); max-width:46ch} /* Nineteen inclusions in one column is a scroll, not a list, so past eight entries it runs in more than one. A COLUMN WIDTH, NOT A COLUMN COUNT. `columns:2` past 640px asked for two columns whatever the container happened to be, and inside a narrow track it produced two 90px columns. A width tells the browser how narrow a column is allowed to get and it fits as many as it can, so this can never split a container that has no room to be split. */ .sx__ul--two{columns:17rem;column-gap:var(--s6)} .sx__ul--two li{break-inside:avoid} /* Landscape now, to match the photographs. The max-height that was capping an upright picture goes with it: a 3/2 in this column never needed one. */ .sx__figin{position:relative;border-radius:var(--r-xl);overflow:hidden; aspect-ratio:3/2; background:var(--limestone-lt); box-shadow:var(--sh-md)} .sx__figin>picture{display:block;width:100%;height:100%} .sx__figin img{width:100%;height:100%;object-fit:cover;display:block} .sx__what{font-family:var(--serif);font-weight:300; font-size:clamp(1.12rem,2.1vw,1.45rem);line-height:1.58;color:var(--ink); max-width:40ch;text-wrap:pretty} /* ---- the specification list ---- */ /* Label in its own narrow column against a hairline, the way a specification sheet sets one. It reads as considered rather than as a bulleted list with a heading over it. */ .sx__spec{margin-top:clamp(2rem,4vw,3rem);display:grid} .sx__row{display:grid;gap:.6rem;padding:var(--s5) 0; border-top:1px solid var(--rule)} .sx__row:last-child{border-bottom:1px solid var(--rule)} .sx__dt{font-size:var(--t-xs);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--ink-muted);padding-top:.15em} .sx__ul{display:grid;gap:.55rem} .sx__ul li{position:relative;padding-left:1.1rem;color:var(--ink-soft); line-height:1.65;text-wrap:pretty} .sx__ul li::before{content:'';position:absolute;left:0;top:.68em; width:5px;height:1px;background:var(--bronze);opacity:.8} /* ---- how it works ---- */ .sx__steps{margin-top:clamp(2.2rem,4.5vw,3.2rem)} .sx__st{font-size:var(--t-xs);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--ink-muted);margin-bottom:var(--s5)} .sx__ol{display:grid;gap:.25rem;counter-reset:none} .sx__ol li{display:grid;grid-template-columns:auto minmax(0,1fr); gap:var(--s5);align-items:baseline; padding:var(--s4) 0;border-top:1px solid rgba(65,68,55,.08)} .sx__ol li:first-child{border-top:0} .sx__sn{font-family:var(--serif);font-weight:300;font-size:1.35rem;line-height:1; color:var(--bronze);letter-spacing:-.02em;min-width:2ch} .sx__sl{color:var(--ink-soft);line-height:1.65;text-wrap:pretty} .sx__act{margin-top:clamp(2.2rem,4.5vw,3.2rem)} @media (min-width:860px){ /* the numeral sits out to the side of the title, the way a chapter number does in a printed contents page */ .sx__open{grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem); align-items:baseline} .sx__row{grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:var(--s5)} } @media (min-width:1000px){ /* the writing takes the larger share: this is a page of descriptions, and it was reading as a column of photographs with notes attached */ .sx__grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)} /* the photograph holds its place while the detail scrolls past it */ .sx__fig{position:sticky;top:clamp(9rem,18vh,12rem)} /* And the side it sits on alternates, so five chapters have a rhythm. `order` moves the figure into the second SLOT but the tracks keep their sizes, so on every even service the writing was landing in the narrow .72fr track meant for the photograph: a 190px column that wrapped her sentences to three words a line. The tracks have to swap with it. */ .sx:nth-child(even) .sx__fig{order:2} .sx:nth-child(even) .sx__grid{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)} } @media (max-width:999px){ .sx__figin{aspect-ratio:16/10;max-height:none} .sx__body{margin-top:var(--s5)} } @media (prefers-reduced-motion:reduce){ .sx__fig{position:static} } /* ------------------------------------------------------------------- QUIZ */ /* One set of styles, two homes: mounted inside the dark "Ready to start?" section on the homepage, and inside a dialog panel anywhere else. The inner pieces are identical; only the shell differs. */ .st__quiz{max-width:46rem;margin:var(--s7) auto 0} .qz__intro{display:flex;justify-content:center} .qz__arr{width:19px;height:19px;flex:none;margin-right:-.15em; transition:transform var(--d) var(--ease-out)} .cta:hover .qz__arr{transform:translateX(5px)} .qz__bar{height:2px;border-radius:2px;background:rgba(243,239,230,.14);overflow:hidden} .qz__bar span{display:block;height:100%;background:var(--champagne); transition:width var(--d-slow) var(--ease-out)} .qz__count{margin-top:var(--s5);font-size:var(--t-xs);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--on-dark-mute)} .qz__q{font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,2.8vw,2rem); line-height:1.16;letter-spacing:-.01em;margin-top:var(--s3)} .qz__opts{margin-top:var(--s5);display:grid;gap:.6rem} .qz__o{display:flex;align-items:center;gap:var(--s4);width:100%;text-align:left; padding:1.05rem 1.3rem;border-radius:var(--r-md);color:var(--cream); border:1px solid rgba(243,239,230,.18);background:rgba(243,239,230,.03); transition:border-color var(--d) var(--ease),background var(--d) var(--ease)} .qz__o:hover{border-color:rgba(243,239,230,.42);background:rgba(243,239,230,.07)} .qz__o.on{border-color:var(--champagne);background:rgba(217,201,169,.12)} .qz__dot{flex:none;width:16px;height:16px;border-radius:50%; border:1px solid rgba(243,239,230,.45);position:relative} .qz__o.on .qz__dot{border-color:var(--champagne)} .qz__o.on .qz__dot::after{content:'';position:absolute;inset:3px;border-radius:50%; background:var(--champagne)} .qz__nav{margin-top:var(--s4)} /* ---- the result ---- */ .qz__res{text-align:center} .qz__res-lead{margin-top:var(--s6);font-size:var(--t-xs);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--on-dark-mute)} .qz__res-name{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.04;letter-spacing:-.02em;margin-top:var(--s3);color:var(--champagne)} .qz__res-line{margin-top:var(--s4);color:var(--on-dark-soft);max-width:32rem; margin-inline:auto;text-wrap:pretty} /* the explanation is built from the visitor's own answers, so it is specific without asserting anything the studio has not said */ .qz__why{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule-dark)} .qz__why-t{font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase; color:var(--on-dark-mute)} .qz__chips{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center} .qz__chips li{font-size:var(--t-sm);color:var(--cream); padding:.45em 1em;border-radius:var(--r-pill); border:1px solid rgba(217,201,169,.34);background:rgba(217,201,169,.08)} .qz__res-acts{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s4); justify-content:center} .qz__res-acts .cta--fill{background:var(--cream);color:var(--olive-950)} .qz__res-acts .cta--fill::before{background:var(--champagne)} .qz__again{margin-top:var(--s4);color:var(--on-dark-mute)} /* ---- the dialog shell, used everywhere except the homepage ---- */ .qz--dlg{position:fixed;inset:0;z-index:var(--z-curtain);display:grid;place-items:center; padding:var(--gutter);background:rgba(14,15,10,.6);opacity:0; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:opacity var(--d) var(--ease)} .qz--dlg.open{opacity:1} .qz__panel{position:relative;width:min(40rem,100%);max-height:min(92svh,44rem);overflow-y:auto; background:var(--olive-950);color:var(--cream);border-radius:var(--r-xl); padding:var(--s8) clamp(1.5rem,3.5vw,3rem) var(--s7); box-shadow:inset 0 0 0 1px rgba(217,201,169,.2),0 40px 90px -30px rgba(20,22,15,.9); transform:translateY(1.5rem) scale(.99); transition:transform var(--d-slow) var(--ease-out)} .qz--dlg.open .qz__panel{transform:none} .qz__close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;color:var(--cream); opacity:.7;transition:opacity var(--d) var(--ease)} .qz__close:hover{opacity:1} .qz__close span[aria-hidden]{display:block;position:relative;width:18px;height:18px;margin:0 auto} .qz__close span[aria-hidden]::before,.qz__close span[aria-hidden]::after{ content:'';position:absolute;inset:50% 0 auto 0;height:1px;background:currentColor} .qz__close span[aria-hidden]::before{transform:rotate(45deg)} .qz__close span[aria-hidden]::after{transform:rotate(-45deg)} .qz--dlg .eyebrow{color:var(--champagne)} .qz__title{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.06;letter-spacing:-.015em;margin-top:var(--s3)} .qz__body{margin-top:var(--s6)} .qz--dlg .qz__res-lead{margin-top:var(--s5)} /* ---- the prompt under the services list, which only points here ---- */ .ss__prompt{margin-top:var(--s6);font-size:var(--t-sm);color:var(--ink-muted)} .ss__prompt-a{color:var(--bronze);position:relative;padding-bottom:2px;white-space:nowrap} .ss__prompt-a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px; background:currentColor;opacity:.4;transition:opacity var(--d) var(--ease)} .ss__prompt-a:hover::after,.ss__prompt-a:focus-visible::after{opacity:1} /* ----------------------------------------------------------------- FOOTER */ /* =========================================================== 9 . CONTACT */ /* One card, two halves: everything about reaching the studio on the left, where the studio is on the right. It sits on limestone rather than the ivory the questions above it use, so the page steps down in tone once before it reaches the dark of the footer instead of falling into it. */ .ct{padding:var(--bay) var(--gutter);background:var(--limestone-lt)} /* The writing takes the larger half, not the map. At .95 against 1.05 each of the two week columns came out 236px wide, and a day, a Today chip and an opening time need about 240 between them, so today's row was a line and a half. The map at 570px is still a map; the week at 297 a column is a week. */ .ct__card{max-width:var(--maxw);margin-inline:auto; display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); background:var(--ivory);border-radius:var(--r-xl);overflow:hidden; box-shadow:0 40px 90px -46px rgba(18,20,14,.45)} /* with no address in the config there is no map, so the writing takes it all */ .ct__card--solo{grid-template-columns:minmax(0,1fr)} .ct__side{padding:clamp(1.7rem,3.6vw,3.2rem)} /* the title at full section scale is too loud inside a card, where it is one of two headings rather than the only thing on the screen */ .ct .title{font-size:clamp(1.65rem,2.9vw,2.45rem)} /* the short hairline the client's reference sets its eyebrows with, which is the same kicker the hero uses over each fact */ .ct .eyebrow{display:flex;align-items:center;gap:.8rem;margin-bottom:var(--s3)} .ct .eyebrow::before{content:'';width:26px;height:1px;background:var(--bronze); flex:none;opacity:.7} .ct__second{margin-top:clamp(2.2rem,4.4vw,3.2rem)} /* ---- the details ---- */ .ct__list{list-style:none;margin:clamp(1.4rem,2.6vw,2rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:clamp(1.15rem,2.2vw,1.7rem)} .ct__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem; align-items:start} .ct__ico{display:grid;place-items:center;flex:none; width:2.55rem;height:2.55rem;border-radius:50%; background:var(--cream);color:var(--bronze); box-shadow:inset 0 0 0 1px rgba(125,95,58,.16)} .ct__ico svg{width:19px;height:19px} .ct__k{display:block;font-size:var(--t-xs);font-weight:500; letter-spacing:var(--track-caps);text-transform:uppercase; color:var(--ink-muted);margin-bottom:.34rem} .ct__v{display:block;font-family:var(--serif);font-size:1.08rem;line-height:1.4; color:var(--ink); /* two phone numbers, and Cormorant sets oldstyle figures unless told */ font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1} /* the underline is on the link, not the whole value, so the second phone number does not look like a continuation of the first */ .ct__v a{color:inherit;text-decoration:none; border-bottom:1px solid rgba(125,95,58,.32); transition:color var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out)} .ct__v a:hover{color:var(--bronze);border-bottom-color:var(--bronze)} /* a button that has to read as the same kind of thing as the links above it */ .ct__go{appearance:none;background:none;border:0;padding:0;cursor:pointer; font:inherit;color:var(--bronze); border-bottom:1px solid rgba(125,95,58,.32)} .ct__go:hover{border-bottom-color:var(--bronze)} /* ---- the week ---- */ /* Two columns of days, which is how a week is read at a glance, and a broken rule under each so the eye can travel from the day to the time without the solid line of a timetable. */ .ch{list-style:none;margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); column-gap:clamp(1rem,2vw,1.8rem)} /* FLEX, NOT A THREE TRACK GRID, and the reason is worth writing down. As a grid the middle track was minmax(0,1fr) and the time track was auto, so the time took its content width first and left the middle track 10px. The chip does not shrink, so on today's row it spilled 38px across the opening time. Every other row looked fine, which is how it went unnoticed. In a flex row nothing can be laid on top of anything: the time is pushed to the end with an auto margin and never shrinks, and if the three of them ever will not fit, the line wraps instead of overlapping. */ .ch__i{display:flex;align-items:baseline;flex-wrap:wrap;gap:.45rem .6rem; padding:.62rem .7rem;border-bottom:1px dashed rgba(58,61,50,.22)} .ch__d{flex:none;min-width:2.6rem;font-family:var(--serif);font-style:italic; font-size:1.02rem;color:var(--ink-soft)} .ch__t{flex:none;margin-left:auto;white-space:nowrap; font-size:.9rem;color:var(--ink-muted); font-variant-numeric:lining-nums tabular-nums; font-feature-settings:'lnum' 1,'tnum' 1} /* the chip only exists on the day being lived through */ .ch__now{flex:none;display:none; padding:.24em .7em;border-radius:var(--r-pill); background:var(--bronze);color:var(--ivory); font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase} .ch__i.is-today{background:var(--cream);border-radius:var(--r-sm); border-bottom-color:transparent} .ch__i.is-today .ch__d{color:var(--ink)} .ch__i.is-today .ch__now{display:inline-block} .ch__i.is-today .ch__t{color:var(--ink-soft)} /* ---- the map ---- */ .ct__map{position:relative;min-height:clamp(21rem,40vw,33rem); background:var(--limestone)} .ct__frame,.ct__frame iframe{position:absolute;inset:0;width:100%;height:100%} .ct__frame iframe{border:0;display:block} /* the same open or closed state the hero carries, said again where someone is deciding whether to drive over */ .ct__status{position:absolute;z-index:1; top:clamp(.85rem,1.8vw,1.25rem);right:clamp(.85rem,1.8vw,1.25rem); display:inline-flex;align-items:center;gap:.58rem; margin:0;padding:.56em 1.1em;border-radius:var(--r-pill); background:rgba(20,22,15,.9);color:var(--cream); font-size:var(--t-xs);font-weight:500;letter-spacing:.17em;text-transform:uppercase; box-shadow:0 14px 34px -14px rgba(18,20,14,.7)} .ct__status[hidden]{display:none} .ct__sdot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--champagne)} .ct__status.is-open .ct__sdot{background:#78B47A; box-shadow:0 0 12px rgba(120,180,122,.9)} .ct__place{position:absolute;z-index:1; left:clamp(.85rem,1.8vw,1.35rem);right:clamp(.85rem,1.8vw,1.35rem); bottom:clamp(.85rem,1.8vw,1.35rem); display:grid;grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(.8rem,1.6vw,1.15rem);align-items:center; padding:clamp(.75rem,1.5vw,1.05rem) clamp(.95rem,1.8vw,1.35rem); background:rgba(251,249,244,.93);backdrop-filter:blur(10px); border-radius:var(--r-lg);text-decoration:none;color:var(--ink); box-shadow:0 22px 50px -26px rgba(18,20,14,.6); transition:transform var(--d-fast) var(--ease-out),background var(--d-fast) var(--ease-out)} .ct__place:hover{transform:translateY(-2px);background:rgba(251,249,244,.98)} .ct__pico{display:grid;place-items:center;flex:none; width:2.5rem;height:2.5rem;border-radius:50%; background:var(--bronze);color:var(--ivory)} .ct__pico svg{width:18px;height:18px} .ct__pk{display:block;font-size:var(--t-xs);font-weight:500; letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-muted)} .ct__pv{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.3; color:var(--ink);font-variant-numeric:lining-nums; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ct__pgo{flex:none;font-size:var(--t-xs);font-weight:500; letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--bronze); border-bottom:1px solid rgba(125,95,58,.4);padding-bottom:.15rem} @media (max-width:980px){ /* the map goes under the writing rather than beside it, at a height that still shows the streets either side of the pin */ .ct__card{grid-template-columns:minmax(0,1fr)} .ct__map{min-height:clamp(17rem,52vw,24rem)} } /* only one of the two weeks is ever on */ .ch--brief{display:none} @media (max-width:560px){ /* the directions label drops off the card before the address has to wrap: the whole card is the link, so nothing is lost with it */ .ct__place{grid-template-columns:auto minmax(0,1fr)} .ct__pgo{display:none} .ch__i{padding-inline:.45rem} /* ---- THE DETAILS GO ONTO ONE LINE EACH ---- Measured at 281px: side by side leaves 78px for a value and the shortest needs 103, so pairing does not fit. Label left, value right does, with room to spare on every one of them, and it turns five items of two lines into five of one. The icons come off to buy that width; the labels were always the thing carrying the meaning. */ .ct__list{grid-template-columns:minmax(0,1fr);gap:0; border-top:1px solid rgba(58,61,50,.14)} .ct__ico{display:none} .ct__i{grid-template-columns:minmax(0,1fr);padding:.6rem .1rem; border-bottom:1px solid rgba(58,61,50,.14)} .ct__b{display:flex;align-items:baseline;justify-content:space-between; gap:.9rem;flex-wrap:wrap} .ct__k{margin-bottom:0;flex:none} .ct__v{text-align:right;font-size:1rem} /* ---- and the week becomes the short one ---- */ .ch--full{display:none} .ch--brief{display:grid} .ch--brief .ch__i{padding-inline:.1rem} } @media (prefers-reduced-motion:reduce){ .ct__place:hover{transform:none} } /* ====================================================== THE DATE PICKER */ /* It replaced the browser's own date box and a dropdown of hours, which are the two controls on this site that looked like somebody else's software. Built from js/calendar.js. The real input and select are still in here, named and read exactly as before, only out of sight, so the form does not know the difference and works without any of this. */ .cal__hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .cal__wrap{margin-top:var(--s5)} .cal{display:grid;gap:clamp(.9rem,2vw,1.4rem); grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start} .cal__grid,.cal__side{border-radius:var(--r-lg); border:1px solid rgba(243,239,230,.12);background:rgba(243,239,230,.035); padding:clamp(.9rem,2vw,1.3rem)} /* validation focuses a control nobody can see, so the grid takes the hint */ .cal.is-asked .cal__grid,.cal.is-asked .cal__side{ border-color:rgba(217,201,169,.55);box-shadow:0 0 0 3px rgba(217,201,169,.1)} /* ---- the month ---- */ .cal__head{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--s4)} .cal__month{flex:1;margin:0;text-align:center;font-family:var(--serif); font-size:1.32rem;line-height:1;color:var(--cream); font-variant-numeric:lining-nums tabular-nums} .cal__month em{font-style:italic;color:var(--champagne)} .cal__arrow{flex:none;width:36px;height:36px;border-radius:50%; border:1px solid rgba(243,239,230,.18);background:none;color:var(--cream); display:grid;place-items:center;cursor:pointer; transition:border-color var(--d) var(--ease),background var(--d) var(--ease)} .cal__arrow svg{width:17px;height:17px} .cal__arrow:hover:not([disabled]){border-color:var(--champagne); background:rgba(217,201,169,.12)} .cal__arrow[disabled]{opacity:.24;cursor:default} .cal__dows{display:grid;grid-template-columns:repeat(7,1fr);gap:2px; margin-bottom:.3rem} .cal__dows span{text-align:center;font-size:9.5px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,230,.42)} .cal__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .cal__d{aspect-ratio:1;min-height:38px;display:grid;place-items:center; border:0;border-radius:50%;background:none;color:var(--cream);cursor:pointer; font-family:var(--serif);font-size:1.02rem;line-height:1; font-variant-numeric:lining-nums;position:relative; transition:background var(--d-fast) var(--ease),color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease)} .cal__d--pad{visibility:hidden;cursor:default} .cal__d:hover:not([disabled]):not(.is-on){background:rgba(243,239,230,.09); box-shadow:inset 0 0 0 1px rgba(243,239,230,.2)} .cal__d:focus-visible{outline:2px solid var(--champagne);outline-offset:1px} /* chosen: filled, the way the rest of the site marks a chosen thing */ .cal__d.is-on{background:var(--champagne);color:var(--olive-950);font-weight:500} /* today gets a mark under the numeral, not a ring, so it cannot be mistaken for the day that has been chosen */ .cal__d.is-today::after{content:'';position:absolute;bottom:5px; width:3px;height:3px;border-radius:50%;background:var(--champagne)} .cal__d.is-on.is-today::after{background:var(--olive-950)} /* Closed. Hatched rather than merely faded, because faded on a dark ground reads as low contrast text rather than as a day you cannot have. */ .cal__d.is-off{color:rgba(243,239,230,.26);cursor:default; background:repeating-linear-gradient(-45deg, rgba(243,239,230,.07) 0 1px,transparent 1px 5px)} .cal__key{list-style:none;display:flex;flex-wrap:wrap;gap:1rem; margin:var(--s4) 0 0;padding:var(--s4) 0 0; border-top:1px solid rgba(243,239,230,.1)} .cal__key li{display:flex;align-items:center;gap:.45rem;font-size:9.5px; font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:rgba(243,239,230,.5)} .cal__sw{width:13px;height:13px;border-radius:50%;flex:none} .cal__sw--open{box-shadow:inset 0 0 0 1px rgba(243,239,230,.34)} .cal__sw--on{background:var(--champagne)} .cal__sw--off{background:repeating-linear-gradient(-45deg, rgba(243,239,230,.24) 0 1px,transparent 1px 4px); box-shadow:inset 0 0 0 1px rgba(243,239,230,.14)} /* ---- the times ---- */ .cal__side{min-height:100%;display:grid;align-content:start;gap:.2rem} .cal__pick{margin:0;font-family:var(--serif);font-size:1.3rem;line-height:1.2; color:var(--cream)} .cal__sub{margin:.15rem 0 var(--s4);font-size:var(--t-xs);font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--champagne)} .cal__times{display:grid;gap:.45rem; grid-template-columns:repeat(auto-fill,minmax(6.4rem,1fr))} .cal__t{padding:.62rem .5rem;border-radius:var(--r-sm); border:1px solid rgba(243,239,230,.16);background:rgba(243,239,230,.03); color:var(--cream);font-size:.86rem;cursor:pointer; font-variant-numeric:lining-nums tabular-nums; transition:border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease),color var(--d-fast) var(--ease)} .cal__t:hover{border-color:rgba(243,239,230,.4);background:rgba(243,239,230,.08)} .cal__t.is-on{background:var(--champagne);border-color:var(--champagne); color:var(--olive-950);font-weight:500} .cal__t:focus-visible{outline:2px solid var(--champagne);outline-offset:2px} .cal__none{margin:0;font-size:var(--t-sm);font-style:italic; color:var(--on-dark-mute)} /* before a day is chosen, the panel is not empty, it is an instruction */ .cal__blank{display:grid;justify-items:center;text-align:center;gap:.4rem; padding:clamp(1.2rem,3vw,2.2rem) .6rem} .cal__mark{display:block;width:34px;height:34px;color:var(--champagne); opacity:.75;margin-bottom:.2rem} .cal__mark svg{width:100%;height:100%} .cal__blank-h{margin:0;font-family:var(--serif);font-size:1.22rem; color:var(--cream)} .cal__blank-p{margin:0;max-width:19rem;font-size:var(--t-sm);line-height:1.55; color:var(--on-dark-mute)} .cal__blank-p strong{color:var(--champagne);font-weight:400} @media (max-width:760px){ /* one under the other, and the grid keeps its tap targets rather than shrinking them to fit a phone */ .cal{grid-template-columns:minmax(0,1fr)} .cal__d{min-height:40px;font-size:1.06rem} .cal__side{min-height:0} } @media (prefers-reduced-motion:reduce){ .cal__d,.cal__t,.cal__arrow{transition:none} } /* ======================================================== LISTEN TO THIS */ /* THE CONTROL LIVES IN THE META LINE. It was a panel of its own between the cover and the first paragraph, which read as a widget bolted onto a page that has no other widgets. It sits beside "2 min read" now, because "listen, 3 min" is the same kind of fact told to the same person at the same moment. Nothing is added to the page while it plays either: the control fills up rather than growing a bar underneath it. */ .lsn{display:inline-flex;align-items:center;gap:.5rem} .lsn__go{position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;gap:.42rem; padding:.38em .9em .38em .72em;border-radius:var(--r-pill); border:1px solid rgba(125,95,58,.4);background:none;color:var(--bronze); font:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit; cursor:pointer;white-space:nowrap; transition:border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease)} .lsn__go:hover{border-color:var(--bronze);background:rgba(125,95,58,.08)} .lsn__go:focus-visible{outline:2px solid var(--bronze);outline-offset:2px} /* the progress, as the control filling from the left */ .lsn__fill{position:absolute;z-index:-1;inset:0 auto 0 0;width:0; background:rgba(125,95,58,.16);transition:width .2s linear} .lsn__ico{display:grid;place-items:center;flex:none;width:13px;height:13px} .lsn__ico svg{width:100%;height:100%} .lsn__pause{display:none} .lsn.is-playing .lsn__play{display:none} .lsn.is-playing .lsn__pause{display:block} .lsn.is-playing .lsn__go{border-color:var(--bronze)} .lsn__l{display:block} .lsn__rate{padding:.3em .55em;border-radius:var(--r-pill); border:1px solid rgba(58,61,50,.22);background:none;color:var(--ink-muted); font:inherit;font-size:inherit;letter-spacing:inherit;cursor:pointer; font-variant-numeric:lining-nums tabular-nums; transition:border-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)} .lsn__rate[hidden]{display:none} .lsn__rate:hover{border-color:var(--bronze);color:var(--bronze)} /* ---- and the mark on each card in the list ---- */ .pc__lsn{display:inline-flex;align-items:center;gap:.34rem;color:var(--bronze)} .pc__lsn svg{width:11px;height:11px;flex:none} /* the card is a link, so the mark follows it on hover rather than sitting there looking like a second thing to press */ .pc:hover .pc__lsn{color:var(--ink)} @media (prefers-reduced-motion:reduce){ .lsn__fill{transition:none} } .ft{background:var(--olive-950);color:var(--cream);padding:var(--s9) var(--gutter) var(--s6)} /* One oversized italic line travelling across the footer, edge to edge, with the ends feathered so it reads as coming from off-screen. */ .ft__marquee{margin:0 calc(var(--gutter) * -1) var(--s8);overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)} .ft__track{display:flex;align-items:center;width:max-content;will-change:transform} .ft__s{font-family:var(--serif);font-weight:300;font-style:italic; font-size:clamp(2.6rem,10vw,9rem);line-height:1.1;letter-spacing:-.025em; color:var(--champagne);white-space:nowrap} .ft__dot{flex:none;width:clamp(6px,.7vw,11px);aspect-ratio:1;border-radius:50%; background:var(--olive-500);margin:0 clamp(1.4rem,3.4vw,3.2rem)} .ft__grid{max-width:var(--maxw);margin-inline:auto;display:grid;gap:var(--s6); padding-top:var(--s7);border-top:1px solid var(--rule-dark-sf)} /* The same wordmark the bar carries, so the name is set identically at both ends of the page. It has a real alpha channel, unlike the artwork this replaces, so it no longer needs the `screen` blend that was dropping the old file's baked-in black. */ .ft__brand{isolation:isolate} .ft__logo{display:block;height:78px;width:auto;margin-bottom:var(--s4)} .ft__legal{font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-mute)} .ft__tag{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--champagne);margin-top:.5rem} .ft__col h3{font:500 var(--t-xs)/1 var(--sans);letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--olive-300);margin-bottom:var(--s4)} .ft__col ul{display:grid;gap:.5rem} .ft__col a,.ft__col li{font-size:var(--t-sm);color:var(--on-dark-soft)} .ft__col a:hover{color:var(--cream)} .ft__base{max-width:var(--maxw);margin:var(--s7) auto 0;padding-top:var(--s4); border-top:1px solid var(--rule-dark-sf); display:flex;justify-content:center;align-items:center;gap:var(--s4); flex-wrap:wrap;text-align:center; font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase; color:var(--on-dark-mute)} /* a small separator between the notice and the location, dropped when the row wraps onto two lines so nothing dangles */ .ft__dot-s{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55} /* ------------------------------------------------- OPEN HOURS, ON THE HERO */ /* The same live state as the footer, said in one line, opening the type block above the headline. It carries its own ground rather than sitting bare on the photograph, and that is a contrast decision before it is a style one: this sits high in the frame where the veil has thinned almost to nothing, and bare type there would be at the mercy of whatever the film happens to be showing. The glass is the material the bar, the back button and the WhatsApp pill are already made of, so it reads as part of the furniture rather than a badge stuck on. The champagne rim is what separates it from the reference it came from, which is a green dot and a clock icon on bare photography. */ /* Ranged top right, clear of the bar above it. The right edge lines up with the content column rather than the window, so it sits on the same measure as everything else on the page. The tint is back down to .46, which is as sheer as this can be made. What pays for it is the accent: at .46 the backdrop behind the glass reads about 102 of 255 up here, and --champagne on that is 3.70:1, which is not readable. A lighter warm tone carries 4.73 on the same ground, so the open state takes that instead and the glass gets to stay thin. */ /* Printed onto the hero, not floated over it. It used to be a glass capsule: a tinted, blurred, champagne rimmed pill that read as an object sitting on the page. The client wanted it to feel part of the page instead, so the capsule is gone entirely. What holds it now is a hairline under the words, the way a caption is ruled off, and a shadow on the type itself rather than a plate behind it. Dropped a little and brought in from the edge at the same time. */ .hs{position:absolute;z-index:2; top:clamp(8.2rem,16vh,11rem); /* the fallback, until placeHours() in js/app.js lines it up with the gap between About and FAQ in the bar. It is also what a phone keeps. */ right:calc(max(var(--gutter),calc((100% - var(--maxw)) / 2)) + clamp(.75rem,2.4vw,2.2rem)); display:inline-flex;align-items:center;gap:.8rem; padding:0 0 .6rem; border-bottom:1px solid rgba(217,201,169,.5); isolation:isolate; text-shadow:0 1px 2px rgba(18,20,14,.8),0 2px 9px rgba(18,20,14,.95), 0 10px 34px rgba(18,20,14,.85)} /* No plate, and no pool behind it either. An ellipse sized to the writing was legible but it read as a smudge on the photograph, which the client saw straight away. What it was doing has moved into the crown on the veil instead: one gradient, the full width of the frame, no edge anywhere to notice. See .hero__veil. */ .hs[hidden]{display:none} /* Closed is champagne, not olive. Olive on a dark photograph is a hole in the page, and the whole job of the dot is to be seen. Open is still the one that turns green and breathes. */ .hs__dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%; background:var(--champagne);box-shadow:0 0 0 1px rgba(18,20,14,.5)} .hs.is-open .hs__dot{background:#78B47A; box-shadow:0 0 0 1px rgba(120,180,122,.4),0 0 14px rgba(120,180,122,.85)} /* the ring only runs while the studio is open; a pulse on a closed sign is movement that means nothing */ .hs.is-open .hs__dot::after{content:'';position:absolute;inset:0;border-radius:50%; box-shadow:0 0 0 1px rgba(120,180,122,.85); animation:hsPulse 2.4s var(--ease-out) infinite} @keyframes hsPulse{ 0% {transform:scale(1);opacity:.9} 70% {transform:scale(3.4);opacity:0} 100%{transform:scale(3.4);opacity:0} } .hs__s{font-family:var(--serif);font-style:italic;font-weight:300; font-size:1.22rem;line-height:1;color:var(--cream);white-space:nowrap} /* lighter than --champagne so it survives the thinner glass; still warm, so the open state is still the one that turns gold */ .hs.is-open .hs__s{color:#EDE3CE} /* a hairline, not a bullet: the same rule the rest of the page divides with */ .hs__r{flex:none;width:1px;height:17px;background:rgba(217,201,169,.45)} /* full strength: dimmed to .88 it came out at 4.46 against the thinner glass. The hairline and the change of face already separate it from the status, so it does not need to be quieter as well. */ .hs__n{font-size:.78rem;font-weight:500;letter-spacing:.17em; text-transform:uppercase;color:var(--cream);white-space:nowrap} @media (max-width:740px){ /* dropped to sit just above the lamp in the photograph rather than up under the bar. The crown below is stretched to follow it. */ .hs{gap:.62rem;padding:0 0 .45rem; top:clamp(8rem,17vh,10.5rem)} .hs__s{font-size:1.02rem} .hs__n{letter-spacing:.1em;font-size:11px} .hs__r{height:13px} } @media (prefers-reduced-motion:reduce){ .hs.is-open .hs__dot::after{animation:none;opacity:.5} } /* -------------------------------------------------------------- OPEN HOURS */ /* The live badge, under the phone numbers, which is the moment someone is deciding whether to call. It says more than the reference it came from: as well as open or closed it says what happens next, so "Closed" is never a dead end, it is "Closed, opens tomorrow 8:30am". The dot is the only true green on the site. It is pulled well towards olive so it belongs here rather than looking like a borrowed status light, and it breathes: a ring expands out of it and fades, which is what makes the badge read as something running rather than a printed line. */ .oh{margin-top:var(--s6);display:grid;gap:var(--s4); padding-top:var(--s5);border-top:1px solid var(--rule-dark-sf)} .oh__now{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .7rem; margin:0} .oh__dot{position:relative;flex:none;align-self:center; width:8px;height:8px;border-radius:50%; background:var(--olive-500);box-shadow:0 0 0 1px rgba(243,239,230,.18)} .oh__now.is-open .oh__dot{background:#6FA871; box-shadow:0 0 0 1px rgba(111,168,113,.35),0 0 12px rgba(111,168,113,.7)} /* the ring only runs while the studio is actually open: a pulse on a closed sign would be movement that means nothing */ .oh__now.is-open .oh__dot::after{content:'';position:absolute;inset:0; border-radius:50%;box-shadow:0 0 0 1px rgba(111,168,113,.8); animation:ohPulse 2.4s var(--ease-out) infinite} @keyframes ohPulse{ 0% {transform:scale(1);opacity:.9} 70% {transform:scale(3.2);opacity:0} 100%{transform:scale(3.2);opacity:0} } /* --on-dark-mute and --on-dark-soft are the same value in the token file, so "muted" was not dimming anything and Closed was coming out brighter than Open, which is backwards. The closed state is dialled back with opacity instead: 8.2:1, still well clear, and now quieter than the champagne it turns for when the studio is actually open. */ .oh__s{font-family:var(--serif);font-style:italic;font-weight:300; font-size:1.15rem;line-height:1;color:var(--on-dark-soft);opacity:.7} .oh__now.is-open .oh__s{color:var(--champagne);opacity:1} .oh__note{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase; color:var(--on-dark-soft)} /* the schedule itself, set as a small table rather than one run-on line, so the two different days are read at a glance instead of parsed */ .oh__list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem} .oh__list li{display:flex;align-items:baseline;gap:var(--s4); font-size:var(--t-xs);letter-spacing:.1em} /* the day sits behind the time rather than beside it at equal weight, which is the difference between a table you scan and two columns you read */ .oh__d{text-transform:uppercase;color:var(--on-dark-soft);opacity:.62; letter-spacing:var(--track-caps);flex:none;min-width:6.4rem} .oh__t{color:var(--on-dark-soft);font-variant-numeric:tabular-nums; margin-left:auto;text-align:right} @media (prefers-reduced-motion:reduce){ .oh__now.is-open .oh__dot::after{animation:none;opacity:.45} } /* ------------------------------------------------------------ PAGE CURTAIN */ /* The site changes page behind a set of vertical slats, which is the one piece of furniture the studio's own mark is drawn around: there are blinds in the emblem, so the transition is made of blinds. It opens on its own, in CSS, with nothing asked of the script. That matters. A transition that waits to be told to go away leaves the page unreadable if the script fails; this one lifts regardless, and js only has to handle the closing half on the way out. The slats close downward from the top and then keep going downward as they open, so the curtain passes through the page in one direction rather than retracting back the way it came. */ .curtain{position:fixed;inset:0;z-index:var(--z-page);pointer-events:none; display:grid;grid-template-columns:repeat(6,1fr)} .curtain__s{transform-origin:50% 100%; background:linear-gradient(176deg,#282B1B 0%,var(--olive-950) 100%); animation:curtainOut .58s var(--ease-out) both; animation-delay:calc(var(--i,0) * .045s)} /* the stagger reads left to right, the way a blind is drawn */ .curtain__s:nth-child(1){--i:0} .curtain__s:nth-child(2){--i:1} .curtain__s:nth-child(3){--i:2} .curtain__s:nth-child(4){--i:3} .curtain__s:nth-child(5){--i:4} .curtain__s:nth-child(6){--i:5} @keyframes curtainOut{from{transform:scaleY(1)}to{transform:scaleY(0)}} .curtain__mark{position:absolute;inset:0;display:grid;place-items:center; color:var(--champagne); animation:curtainMarkOut .42s var(--ease) .12s both} .curtain__mark svg{width:clamp(66px,9vw,108px);height:clamp(66px,9vw,108px); display:block} @keyframes curtainMarkOut{ from{opacity:1;transform:scale(1)} to {opacity:0;transform:scale(1.1)} } /* ---- closing, on the way out ---- */ /* the delay has to be restated: the shorthand above it resets animation-delay to 0, which closed all six slats in one flat move and threw away the stagger that makes it read as a blind being drawn */ .curtain--close .curtain__s{transform-origin:50% 0; animation:curtainIn .44s var(--ease) both; animation-delay:calc(var(--i,0) * .04s)} @keyframes curtainIn{from{transform:scaleY(0)}to{transform:scaleY(1)}} /* the overshoot in the curve is the pop: the mark arrives a shade past full size and settles, which is what makes it land rather than simply appear */ /* it has to have landed before the link is followed at 680ms, so it settles at 600 and the slats finish at 640 */ .curtain--close .curtain__mark{ animation:curtainMarkIn .44s cubic-bezier(.22,1.5,.36,1) .16s both} @keyframes curtainMarkIn{ from{opacity:0;transform:scale(.66)} to {opacity:1;transform:scale(1)} } @media (prefers-reduced-motion:reduce){ .curtain{display:none} } /* ------------------------------------------------------------ BACK BUTTON */ /* Bottom left, facing the WhatsApp button, so the two floating controls read as a pair rather than as clutter. It is not up under the bar because the bar takes itself off screen on the way down the page, and because the services page already has its sticky index sitting there. Unlike the WhatsApp pill this one keeps its label out at all times. A control that only says where it goes once you hover it is no use to the person who did not know there was a way back. */ .backb{position:fixed;left:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem); z-index:var(--z-float); display:inline-flex;align-items:center;gap:.7rem;height:50px; padding:0 1.2rem 0 .85rem;border-radius:999px;color:var(--cream); background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 54%), rgba(26,24,21,.74); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.16), 0 16px 32px -18px rgba(20,22,15,.85); transform:translateY(160%); transition:transform var(--d) var(--ease-out),background var(--d) var(--ease)} .backb.in{transform:translateY(0)} .backb__ico{flex:none;width:26px;height:26px;display:grid;place-items:center; border-radius:50%;color:var(--champagne); box-shadow:inset 0 0 0 1px rgba(203,176,125,.45); transition:transform var(--d) var(--ease-out),background var(--d) var(--ease)} .backb__ico svg{width:14px;height:14px} .backb__t{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase; font-weight:500;white-space:nowrap} .backb:hover{background: linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 54%), rgba(26,24,21,.88)} .backb:hover .backb__ico{transform:translateX(-3px);background:rgba(203,176,125,.16)} .backb:focus-visible{outline:2px solid var(--champagne);outline-offset:4px} .backb:active{transform:scale(.97)} @media (prefers-reduced-motion:reduce){ .backb,.backb__ico{transition:none} .menu,.menu__links a,.menu__foot > *{transition:none} .menu__links a,.menu__foot > *{opacity:1;transform:none} } /* --------------------------------------------------------------- WHATSAPP */ .wa{position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:var(--z-float); display:inline-flex;align-items:center;gap:0;height:50px;padding:0 15px; background:var(--olive-800);color:var(--cream);border:1px solid var(--rule-dark);border-radius:999px; transform:translateY(160%); transition:gap var(--d) var(--ease),background var(--d) var(--ease),transform var(--d) var(--ease-out)} .wa.in{transform:translateY(0)} .wa__ico{width:22px;height:22px;flex:none} .wa__txt{max-width:0;overflow:hidden;white-space:nowrap;font-size:var(--t-xs); letter-spacing:.2em;text-transform:uppercase;font-weight:500;transition:max-width var(--d) var(--ease)} .wa:hover,.wa:focus-visible{background:var(--olive-700);gap:10px} .wa:hover .wa__txt,.wa:focus-visible .wa__txt{max-width:11rem} .sticky-cta{display:none} /* ------------------------------------------------------------------ GRAIN */ .grain{position:fixed;inset:0;z-index:998;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} /* ------------------------------------------------------------- INQUIRY UI */ .inq{position:fixed;inset:0;z-index:1000;display:grid;place-items:stretch; background:rgba(20,22,15,.62);opacity:0;transition:opacity var(--d) var(--ease)} .inq.open{opacity:1} .inq__panel{position:relative;background:var(--olive-950);color:var(--cream);overflow-y:auto; padding:var(--s8) var(--gutter) var(--s7);display:flex;flex-direction:column; transform:translateY(2rem);transition:transform var(--d-slow) var(--ease-out); /* A scroll that stops at the edge of the panel. Without this, running out of panel hands the wheel to the page behind, which is locked, so the whole thing just stops dead under your finger. */ overscroll-behavior:contain; /* and a bar that belongs to this page rather than the operating system: the stock one is a light grey slab down a dark panel */ scrollbar-width:thin;scrollbar-color:rgba(217,201,169,.38) transparent} .inq__panel::-webkit-scrollbar{width:11px} .inq__panel::-webkit-scrollbar-track{background:transparent} .inq__panel::-webkit-scrollbar-thumb{background:rgba(217,201,169,.3); border:3px solid transparent;background-clip:content-box;border-radius:999px} .inq__panel::-webkit-scrollbar-thumb:hover{background:rgba(217,201,169,.6); border:3px solid transparent;background-clip:content-box} .inq{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .inq.open .inq__panel{transform:none} .inq__close{position:absolute;top:1.2rem;right:var(--gutter);width:44px;height:44px;color:var(--cream)} .inq__close span[aria-hidden]{display:block;position:relative;width:20px;height:20px;margin:0 auto} .inq__close span[aria-hidden]::before,.inq__close span[aria-hidden]::after{ content:'';position:absolute;top:50%;left:0;width:100%;height:1px;background:currentColor} .inq__close span[aria-hidden]::before{transform:rotate(45deg)} .inq__close span[aria-hidden]::after{transform:rotate(-45deg)} .inq__top{max-width:52rem;margin:0 auto var(--s7);width:100%;display:grid;gap:var(--s4)} .inq__rail{display:flex;gap:var(--s2);flex-wrap:wrap} .inq__rail li{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-xs); letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,230,.55); transition:color var(--d) var(--ease)} .inq__rail li::after{content:'';width:16px;height:1px;background:currentColor;opacity:.6} .inq__rail li:last-child::after{display:none} .inq__rail li.on{color:var(--cream)} .inq__rail li.done{color:var(--champagne)} .inq__form{max-width:52rem;margin-inline:auto;width:100%;flex:1;display:flex;flex-direction:column} .inq__steps{flex:1} /* fieldset carries a UA border and padding, reset it, and min-width:0 keeps it from blowing out its flex parent */ .step{display:none;border:0;padding:0;margin:0;min-width:0} .step.on{display:block;animation:stepIn .45s var(--ease-out)} @keyframes stepIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .step__h{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.05;margin-bottom:var(--s6)} .step__note{margin-top:var(--s4);font-size:var(--t-sm);color:var(--champagne);font-style:italic} /* an intro line sits right on top of the first label without this */ .step__note+.flds,.step__note+.rev,.step__note+.fld{margin-top:var(--s5)} .opts{display:grid;gap:.55rem} .opt{display:flex;align-items:flex-start;gap:var(--s4);width:100%;text-align:left; padding:1.05rem 1.35rem;border-radius:var(--r-md); border:1px solid rgba(243,239,230,.13);background:rgba(243,239,230,.03);color:inherit; transition:border-color var(--d) var(--ease),background var(--d) var(--ease), transform var(--d-fast) var(--ease)} .opt:hover{border-color:rgba(243,239,230,.34);background:rgba(243,239,230,.07)} .opt:active{transform:scale(.993)} .opt[aria-checked="true"]{border-color:var(--champagne);background:rgba(217,201,169,.11)} .opt__dot{flex:none;width:12px;height:12px;margin-top:.5em;border-radius:50%; border:1px solid rgba(243,239,230,.5);position:relative} .opt[aria-checked="true"] .opt__dot{border-color:var(--champagne)} .opt[aria-checked="true"] .opt__dot::after{content:'';position:absolute;inset:2px;border-radius:50%; background:var(--champagne)} .opt__m{display:grid;gap:2px} .opt__l{font-family:var(--serif);font-size:1.18rem;line-height:1.25} .opt__n{font-size:var(--t-sm);color:var(--champagne)} .opt__n.quote{color:var(--on-dark-mute);font-style:italic} .flds{display:grid;gap:var(--s5)} .fld{display:grid;gap:.45rem} .fld--w{grid-column:1/-1} .fld label,.fld>span{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase; color:var(--on-dark-mute)} .fld label i{color:var(--champagne);font-style:normal} .fld input,.fld select,.fld textarea{background:none;border:0;border-bottom:1px solid var(--rule-dark); padding:.65rem 0;color:var(--cream);font-size:1rem;font-weight:300;border-radius:0; transition:border-color var(--d) var(--ease)} .fld textarea{border:1px solid rgba(243,239,230,.14);border-radius:var(--r-sm);padding:.8rem .9rem} .fld textarea:focus{border-color:var(--champagne)} .fld textarea{resize:vertical} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--champagne)} .fld input::placeholder,.fld textarea::placeholder{color:rgba(243,239,230,.45)} /* The chevron for every select, drawn as a CSS triangle on the .fld wrapper. No background image anywhere, so nothing can tile. :has() is supported on every current browser; where it is not, the select simply shows the native OS arrow, which is fine. */ .fld{position:relative} .fld:has(select)::after{content:'';position:absolute;pointer-events:none; /* Anchored to the bottom of the field, because top:50% would put it in the middle of (label + select) and the field is label on top with the control below. The select itself is around 48-56px tall after padding; this lands the chevron on its visible centre. */ right:1rem;bottom:1.1rem;width:9px;height:9px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg);opacity:.6} /* currentColor is enough: the dialog cascades --ink (cream ground) or --cream (dark ground) via .inq__panel, so the arrow follows the text contrast without a special rule either way. */ .fld select{appearance:-webkit-appearance:none;appearance:none; /* The arrow is drawn as a CSS pseudo-element on .fld below rather than as a background image. Three different versions of this rule layered background-images on top of each other, and on at least one browser the end result tiled the chevron across the whole field. A pseudo element cannot repeat and cannot be confused with another. */ padding-right:2.6rem} .fld select option{background:var(--olive-950);color:var(--cream)} .fld.bad input{border-bottom-color:#C4876B} .fld__e{font-size:var(--t-xs);color:#DBA88C;letter-spacing:.04em} .chips{display:flex;gap:.5rem;flex-wrap:wrap} .chip{padding:.7em 1.5em;border-radius:var(--r-pill); border:1px solid rgba(243,239,230,.16);font-size:var(--t-sm); transition:background var(--d) var(--ease),border-color var(--d) var(--ease), transform var(--d-fast) var(--ease)} .chip:hover{border-color:rgba(243,239,230,.42);background:rgba(243,239,230,.06)} .chip:active{transform:scale(.97)} .chip[aria-checked="true"]{background:var(--cream);color:var(--olive-950);border-color:var(--cream)} .sumry{display:grid;gap:.55rem;padding:var(--s5);border-radius:var(--r-md); border:1px solid rgba(243,239,230,.12);background:rgba(243,239,230,.03);margin-bottom:var(--s5)} .sumry__r{display:flex;justify-content:space-between;gap:var(--s5);font-size:var(--t-sm); padding-bottom:.45rem;border-bottom:1px solid var(--rule-dark-sf)} .sumry__r:last-child{border-bottom:0} .sumry__r span:first-child{color:var(--on-dark-mute);letter-spacing:.06em} .sumry__r span:last-child{text-align:right} .sumry__r.total span:last-child{font:400 1.3rem/1 var(--serif);color:var(--champagne)} .send{display:grid;gap:.75rem} .send .cta--fill{background:var(--cream);color:var(--olive-950);justify-content:center} .send .cta--fill::before{background:var(--champagne)} .send .cta--line{justify-content:center;border-radius:var(--r-pill); border:1px solid rgba(243,239,230,.2);padding:calc(1.05em - 1px) calc(1.9em - 1px)} .send .cta--line::after{display:none} .send .cta--line:hover{background:rgba(243,239,230,.09);border-color:rgba(243,239,230,.45)} .send__n{font-size:var(--t-sm);color:var(--on-dark-mute);margin-top:var(--s4)} /* ------------------------------------------------- BOOKING, ADDED FIELDS */ /* The questionnaire, the optional inspiration step and the review screen. Everything here sits inside the dialog, which is a dark olive ground, so the borders are cream at low alpha rather than the ink rules used on the page itself. */ .fld.bad input,.fld.bad select,.fld.bad textarea{border-color:#C4876B} /* a group of chips has no border to redden, so the question itself carries the error state. The hint and the message under it are exempt. */ .fld.bad>label,.fld.bad>span:not(.fld__hint):not(.fld__e){color:#DBA88C} /* beats `.fld>span`, which would otherwise put the hint in tracked-out caps */ .fld>.fld__hint{font-size:var(--t-xs);color:var(--on-dark-mute);letter-spacing:.04em; line-height:1.55;text-transform:none;font-weight:400} /* same reason: an error message appended to a `.fld` is a direct child span, so without this it inherits the label's caps and loses its warning colour */ .fld>.fld__e{color:#DBA88C;letter-spacing:.04em;text-transform:none;line-height:1.55} .step__opt{font-family:var(--sans);font-style:normal;font-size:var(--t-xs); letter-spacing:.18em;text-transform:uppercase;color:var(--champagne); vertical-align:middle;margin-left:.6em} /* the one note on the flow that has to be read, not skimmed */ .step__note--flag{font-style:normal;color:var(--on-dark-mute); padding:var(--s4) var(--s5);margin-top:var(--s5); border-radius:var(--r-md);border:1px solid rgba(243,239,230,.14); border-left:2px solid var(--champagne);line-height:1.65} /* ---- multi-select chips ---- */ .chips--multi{gap:.45rem} .chip--box{display:inline-flex;align-items:center;gap:.6em;padding-left:1.1em} .chip__tick{flex:none;width:15px;height:15px;border-radius:4px; border:1px solid rgba(243,239,230,.34);position:relative; transition:background var(--d) var(--ease),border-color var(--d) var(--ease)} .chip__tick::after{content:'';position:absolute;left:4px;top:1px; width:4px;height:8px;border:solid var(--olive-950);border-width:0 1.5px 1.5px 0; transform:rotate(45deg) scale(.4);opacity:0; transition:opacity var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)} .chip[aria-pressed="true"]{background:var(--cream);color:var(--olive-950); border-color:var(--cream)} .chip[aria-pressed="true"] .chip__tick{background:var(--olive-950); border-color:var(--olive-950)} .chip[aria-pressed="true"] .chip__tick::after{opacity:1;transform:rotate(45deg) scale(1)} /* A grid or flex item's automatic minimum size is its min-content, so one long filename set in `nowrap` will widen every track above it and push the whole step off a phone screen. `min-width:0` all the way down the chain is what lets the ellipsis in `.fl__n` actually do its job. */ .fld,.lnks,.lnk,.fls,.fl{min-width:0} /* ---- inspiration links ---- */ .lnks{display:grid;gap:.5rem} .lnk{display:flex;align-items:center;gap:.5rem} .lnk input{flex:1;min-width:0} .lnk__x{flex:none;width:32px;height:32px;display:grid;place-items:center; border-radius:50%;color:var(--on-dark-mute); transition:background var(--d) var(--ease),color var(--d) var(--ease)} .lnk__x svg{width:14px;height:14px} .lnk__x:hover{background:rgba(243,239,230,.1);color:var(--cream)} .addln{justify-self:start;position:relative;margin-top:.3rem;padding:.5em 0; font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase; color:var(--champagne);border-bottom:1px solid rgba(203,176,125,.4); transition:border-color var(--d) var(--ease)} .addln:hover{border-bottom-color:var(--champagne)} /* ---- photographs ---- */ .drop{display:grid;gap:.3rem;justify-items:center;text-align:center; padding:var(--s5);border-radius:var(--r-md);cursor:pointer; border:1px dashed rgba(243,239,230,.24); transition:border-color var(--d) var(--ease),background var(--d) var(--ease)} .drop:hover{border-color:var(--champagne);background:rgba(243,239,230,.04)} .drop__l{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase; color:var(--cream)} .drop__n{font-size:var(--t-xs);color:var(--on-dark-mute);text-transform:none; letter-spacing:.04em} #iqPhotos:focus-visible+.fls,.drop:has(+#iqPhotos:focus-visible){outline:2px solid var(--champagne); outline-offset:3px} .fls{display:grid;gap:.35rem;margin-top:.6rem} .fl{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem; border-radius:var(--r-sm);background:rgba(243,239,230,.05); font-size:var(--t-sm)} .fl__n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fl__x{flex:none;width:26px;height:26px;display:grid;place-items:center; border-radius:50%;color:var(--on-dark-mute); transition:background var(--d) var(--ease),color var(--d) var(--ease)} .fl__x svg{width:12px;height:12px} .fl__x:hover{background:rgba(243,239,230,.12);color:var(--cream)} /* ---- review ---- */ .rev{display:grid;gap:.75rem;margin-top:var(--s5)} .rev__g{border-radius:var(--r-md);padding:var(--s5); background:rgba(243,239,230,.04); box-shadow:inset 0 0 0 1px rgba(243,239,230,.09)} .rev__h{display:flex;align-items:baseline;justify-content:space-between; gap:var(--s4);margin-bottom:var(--s4)} .rev__h h3{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase; color:var(--champagne);font-weight:400} .rev__h em{font-style:normal;color:var(--on-dark-mute);letter-spacing:.14em; font-size:.85em;margin-left:.7em;opacity:.85} .rev__e{flex:none;position:relative;font-size:var(--t-xs);letter-spacing:.16em; text-transform:uppercase;color:var(--on-dark-mute);border-bottom:1px solid transparent; transition:color var(--d) var(--ease),border-color var(--d) var(--ease)} .rev__e:hover{color:var(--cream);border-bottom-color:rgba(243,239,230,.5)} .rev__l{display:grid;gap:.4rem} .rev__r{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr); gap:var(--s4);font-size:var(--t-sm);align-items:baseline} .rev__r dt{color:var(--on-dark-mute);letter-spacing:.06em} /* answers are printed as typed, so a pasted link or a paragraph of vision keeps its line breaks instead of running together */ .rev__r dd{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6} @media (max-width:560px){ .rev__r{grid-template-columns:1fr;gap:.1rem} .rev__r dt{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase} } /* ------------------------------------------------------------- SITE VISIT */ /* Shares the booking dialog's shell and fields. Only the access gate, the package cards and the add-on rows are new. */ /* ---- the access gate ---- */ .gate{margin-top:var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r-md); font-size:var(--t-sm);line-height:1.65;color:var(--on-dark-mute); border:1px solid rgba(243,239,230,.14);border-left:2px solid var(--champagne)} .gate strong{color:var(--cream);font-weight:400} .gate--ok{border-left-color:#8FA97B;color:var(--cream)} .gate--warn{border-left-color:#C4876B} .gate--wait{opacity:.7} /* a button that has to read as a link because it sits inside a sentence */ .lnkbtn{color:var(--champagne);border-bottom:1px solid rgba(203,176,125,.45); font:inherit;letter-spacing:inherit;text-transform:none; transition:border-color var(--d) var(--ease)} .lnkbtn:hover{border-bottom-color:var(--champagne)} /* the standalone variant, sized for a thumb and clear of the field above it */ .lnkbtn--row{justify-self:start;margin-top:.5rem;padding:.75em 0; font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase; min-height:44px;display:inline-flex;align-items:center} /* ---- package cards ---- */ .pk{display:grid;gap:.6rem;margin-top:var(--s5)} .pk__c{display:grid;gap:.75rem;text-align:left;padding:var(--s5); border-radius:var(--r-md);background:rgba(243,239,230,.04); box-shadow:inset 0 0 0 1px rgba(243,239,230,.1); transition:background var(--d) var(--ease),box-shadow var(--d) var(--ease), transform var(--d-fast) var(--ease)} .pk__c:hover{background:rgba(243,239,230,.07); box-shadow:inset 0 0 0 1px rgba(243,239,230,.24)} .pk__c:active{transform:scale(.995)} .pk__c.on{background:rgba(203,176,125,.1); box-shadow:inset 0 0 0 1px var(--champagne)} .pk.bad .pk__c{box-shadow:inset 0 0 0 1px rgba(196,135,107,.6)} .pk__top{display:flex;align-items:baseline;justify-content:space-between; gap:var(--s4);flex-wrap:wrap} .pk__n{font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,2.4vw,1.6rem); line-height:1.1;letter-spacing:-.01em;color:var(--cream)} .pk__p{font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,2.2vw,1.45rem); color:var(--champagne);white-space:nowrap} .pk__inc{display:flex;flex-wrap:wrap;gap:.4rem} .pk__i{font-size:var(--t-xs);letter-spacing:.06em;color:var(--on-dark-mute); padding:.35em .8em;border-radius:var(--r-pill); background:rgba(243,239,230,.06)} .pk__c.on .pk__i{background:rgba(243,239,230,.1);color:var(--cream)} /* ---- add-ons ---- */ .ao{margin-top:var(--s6)} .ao__h{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase; color:var(--champagne);font-weight:400;margin-bottom:var(--s4)} .ao__list{display:grid;gap:.6rem} .ao__r{display:grid;gap:.5rem;padding:var(--s4) var(--s5);border-radius:var(--r-md); box-shadow:inset 0 0 0 1px rgba(243,239,230,.09); transition:box-shadow var(--d) var(--ease),background var(--d) var(--ease)} .ao__r.on{background:rgba(243,239,230,.04); box-shadow:inset 0 0 0 1px rgba(243,239,230,.18)} .ao__t{justify-self:start} .ao__n{font-size:var(--t-xs);color:var(--on-dark-mute);line-height:1.6} /* the quantity only appears once the add-on is ticked, so it never asks a question the visitor has not opted into */ .stp{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap; padding-top:.3rem} .stp label{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase; color:var(--on-dark-mute)} .stp input{width:5.5rem;background:none;border:0; border-bottom:1px solid var(--rule-dark);color:var(--cream); padding:.35rem 0;font-size:1rem} .stp input:focus{outline:none;border-bottom-color:var(--champagne)} .stp__v{margin-left:auto;font-family:var(--serif);font-weight:300; font-size:1.15rem;color:var(--champagne)} @media (min-width:720px){ .pk{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (pointer:coarse){ .stp input{font-size:16px;padding:.6rem 0} } /* thumbs need a target, and the chips are the densest thing in the dialog */ @media (pointer:coarse){ .chip{padding:.85em 1.4em} .lnk__x,.fl__x{width:44px;height:44px} /* the Edit label is small by design, so the target is grown around it with a pseudo-element rather than with padding, which would break the baseline it shares with the section heading. Same trick for "Add another link", whose underline would otherwise drift away from the text. */ .rev__e::after,.addln::after{content:'';position:absolute;left:-12px;right:-12px; top:50%;height:44px;transform:translateY(-50%)} /* "Back" is short enough to fall a pixel under on a narrow phone */ .inq__nav .cta--quiet{min-width:44px;justify-content:center} } .inq__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap; margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule-dark)} .inq__meta{font-size:var(--t-sm);color:var(--champagne);flex:1;text-align:center;min-width:9rem} .inq__meta b{font:400 1.25rem/1 var(--serif);color:var(--cream)} .inq__nav .cta--fill{background:var(--cream);color:var(--olive-950)} .inq__nav .cta--fill::before{background:var(--champagne)} .inq__done{display:grid;place-content:center;justify-items:center;gap:var(--s5);text-align:center; flex:1;max-width:38rem;margin-inline:auto} .inq__done .mark{width:64px;height:64px;color:var(--champagne)} .inq__done h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1} .inq__done p{color:var(--on-dark-soft)} /* ------------------------------------------------------------- PAY BLOCK */ /* Sits on the done panel, which is dark ground, so everything here is the on-dark set. Rendered by js/paylink.js only once the server has signed an amount, so if payment is not configured none of this is ever on the page. */ .payb{width:100%;display:grid;justify-items:center;gap:var(--s3); margin-top:var(--s2);padding:var(--s6) var(--s5) var(--s5); border:1px solid rgba(217,201,169,.26);border-radius:var(--r-md); background:rgba(217,201,169,.045)} .payb__k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--champagne)} .payb__amt{display:flex;align-items:baseline;gap:.4rem; font-family:var(--serif);font-weight:300;color:var(--on-dark);line-height:1} .payb__cur{font-size:.9rem;letter-spacing:.1em;color:var(--on-dark-mute)} .payb__n{font-size:clamp(2.1rem,6vw,2.9rem)} /* The itemisation, so the figure is shown rather than asserted. Only drawn when there is more than one line, since repeating a single total under itself reads as a mistake. */ .payb__l{list-style:none;width:100%;max-width:26rem;display:grid;gap:var(--s2); margin:var(--s1) 0 var(--s2);padding-top:var(--s3); border-top:1px solid rgba(217,201,169,.18); font-size:.82rem;color:var(--on-dark-soft)} .payb__l li{display:flex;justify-content:space-between;gap:var(--s4);text-align:left} /* The same inversion .send uses. Plain .cta--fill is a dark olive pill built for the ivory page, and on this panel it is dark on dark: legible, but it stops reading as the thing to press. Cream on olive is how every other primary action inside this dialog is drawn. */ .payb__go{width:100%;max-width:26rem;justify-content:center; background:var(--cream);color:var(--olive-950)} .payb__go::before{background:var(--champagne)} .payb__f{font-size:.78rem;line-height:1.55;color:var(--on-dark-mute);max-width:30rem} .payb__ref{font-size:.7rem;letter-spacing:.08em;color:var(--on-dark-mute);opacity:.75} /* ============================================================ BREAKPOINTS */ @media (min-width:601px){ .flds{grid-template-columns:1fr 1fr} .send{grid-template-columns:1fr 1fr} .pf__pair{grid-template-columns:1fr 1fr} } @media (min-width:741px){ .st__custom{gap:var(--s6)} .ft__grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr} .inq{place-items:center;padding:var(--s5)} .inq__panel{width:min(62rem,100%);max-height:min(94svh,58rem); padding:var(--s8) var(--s8) var(--s7);border-radius:var(--r-xl); box-shadow:var(--sh-lg),var(--edge-dark)} .inq__close{right:var(--s6)} } @media (min-width:901px){ .wy{grid-template-columns:.92fr 1.08fr;gap:var(--s9);align-items:center} .st__grid{grid-template-columns:repeat(3,1fr)} .op{border-bottom:0;border-right:1px solid var(--rule-dark);padding:var(--s7) var(--s6)} .op:first-child{padding-left:0} .op:last-child{border-right:0;padding-right:0} } @media (min-width:1025px){ .ss{grid-template-columns:1.05fr .95fr;gap:var(--s9);align-items:start} .ss__mob{display:none} .ss__p-in{padding-bottom:var(--s5)} /* A solid plate in the brand olive sits behind the photograph, offset down and to the right, so the image reads as a card lifted off a backing board rather than a picture pasted onto the page. It is drawn as a hard-edged box-shadow with no blur and no spread, which takes the element's own corner radius for free and, unlike a pseudo-element, is painted outside the `overflow:hidden` this stage needs for its cross-fading layers. The soft shadow is listed first so it falls ON the plate. Against an olive this dark it barely registers, but the warm photograph against the deep green is separation enough on its own. */ /* 3/2, not the 4/5 it was. The service photographs are landscape and two of them are composites an upright frame would have cut in half. */ .ss__stage{display:block;position:sticky;top:calc(50svh - 22svh);aspect-ratio:3/2; overflow:hidden;background:var(--limestone-lt); --plate:clamp(16px,2.1vw,30px); border-radius:var(--r-xl); box-shadow:var(--edge),var(--sh-md), var(--plate) var(--plate) 0 0 var(--olive-700)} .ss__stage .lyr{position:absolute;inset:0;opacity:0;transform:scale(1.06); transition:opacity .9s var(--ease-out),transform 1.6s var(--ease-out)} .ss__stage .lyr.on{opacity:1;transform:scale(1)} .ss__stage .lyr img{width:100%;height:100%;object-fit:cover} } @media (max-width:1200px){ .nav__links{gap:var(--s4)} .nav__links a{letter-spacing:.1em} .nav__side,.nav__end{gap:var(--s4)} .nav__emblem svg{width:38px;height:38px} .nav.solid .nav__emblem svg{width:33px;height:33px} .nav__cta{padding:.8em 1rem} .nav__logo{height:48px} .nav.solid .nav__logo{height:42px} } /* With every link on the bar there is nothing behind the menu button that is not already visible, so it goes. */ @media (min-width:1025px){ .burger{display:none} } /* Both side tracks are an equal 1fr, so the heavier right side, three links plus the button, runs out of room before the left one does. Below this the whole set folds into the menu rather than being squeezed. */ @media (max-width:1024px){ .nav__links{display:none} .nav__cta{display:none} /* masthead on the left, menu button on the right */ .nav__in{gap:var(--s3)} } @media (max-width:900px){ .nav__in{padding:.45rem .6rem} .nav__logo{height:44px} .nav.solid .nav__logo{height:39px} .nav__emblem svg{width:34px;height:34px} .nav.solid .nav__emblem svg{width:31px;height:31px} .burger{width:40px;height:40px} .fin__veil{background:linear-gradient(to top,rgba(20,22,15,.9),rgba(20,22,15,.8))} /* conversion bar, introduced after the hero */ .sticky-cta{display:flex;position:fixed;left:var(--gutter);right:var(--gutter); bottom:calc(.9rem + env(safe-area-inset-bottom));z-index:var(--z-float); align-items:center;justify-content:center;gap:1rem; padding:1.05rem 1.5rem;border-radius:var(--r-pill); background:var(--olive-700);color:var(--cream);box-shadow:var(--sh-md); font:500 .9rem/1 var(--sans);letter-spacing:.006em; transform:translateY(200%);transition:transform var(--d) var(--ease-out)} .sticky-cta:active{transform:scale(.985)} .sticky-cta.in{transform:none} .wa{bottom:calc(4.6rem + env(safe-area-inset-bottom));height:46px;padding:0 13px} /* lifted over the conversion bar on the same line as the WhatsApp pill */ .backb{bottom:calc(4.6rem + env(safe-area-inset-bottom));height:46px; padding:0 .95rem 0 .7rem;gap:.55rem} .backb__t{letter-spacing:.14em} .wa__ico{width:20px;height:20px} } /* ------------------------------------------------- SHORT / LANDSCAPE */ /* A phone on its side is about 375px tall, and the hero's contents came to 432px, so it pushed its own call to action off the screen and the dialog's Continue landed below the fold. Everything gets shorter rather than smaller: less padding first, type second. The hero keeps its full height, so the section below it still waits for a scroll. */ @media (orientation:landscape) and (max-height:520px){ .hero{padding-top:6rem;padding-bottom:2rem} .hero__h{font-size:clamp(1.9rem,7.2vw,3.1rem);margin-bottom:.9rem} .hero__line{margin-bottom:1.1rem;font-size:1rem} /* a landscape phone has width to spare and no height at all, so the facts give up their air rather than their place */ .hf{margin-top:clamp(.8rem,2vw,1.2rem);padding-top:.85rem} .hero__acts{margin-top:1rem} .hf__v{font-size:1rem} .hf__r{margin-bottom:.2rem} .hero__veil{background: radial-gradient(110% 120% at 22% 104%,rgba(18,20,14,.66),rgba(18,20,14,0) 84%), linear-gradient(to top,rgba(18,20,14,.56),rgba(18,20,14,.3) 40%,rgba(18,20,14,0) 82%), linear-gradient(to bottom,rgba(18,20,14,.52),rgba(18,20,14,.3) 16%,rgba(18,20,14,0) 34%)} .inq__panel{padding-top:var(--s5)} .inq__rail{margin-bottom:var(--s4)} /* Back / total / Continue sticks to the bottom of the scrolling panel, so the primary action is reachable without hunting for it. It stays in flow, so nothing is hidden underneath it. */ .inq__panel{padding-bottom:0} .inq__nav{position:sticky;bottom:0;margin-top:auto; background:var(--olive-950); padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom)); box-shadow:0 -16px 26px -14px rgba(20,22,15,.95)} .menu{padding-top:5rem} .fin{min-height:auto} } /* ------------------------------------------------------- TOUCH TARGETS */ /* Everything you can tap gets to 44px on a touch screen. Several of these were fine with a mouse and much too small with a thumb: the footer links were 16px tall, the text buttons 35px. Where the target grows, the list gap shrinks to match, so the footer does not get dramatically longer. Keyed on the pointer, not just the width: a tablet is 768px or wider and is still a thumb. The width arm matches the navigation's own breakpoint, so "compact layout" and "touch sizing" are the same threshold. */ @media (pointer:coarse),(max-width:1024px){ .cta--line{padding:1.05em 0} .cta--quiet{padding:1.05em .2em} .chip{padding:.85em 1.5em} .sp__jump{gap:0 var(--s5)} .sp__jump a{padding:.82rem 0} /* tel: and mailto: are the highest-intent taps on a phone, and these were 22px tall */ .menu__contact{gap:0} .menu__contact a{display:inline-block;padding:.7rem 0} .burger{width:44px;height:44px} /* the panel runs to the bottom edge under viewport-fit=cover, so the last control has to clear the home indicator */ .menu{padding-bottom:calc(var(--s7) + env(safe-area-inset-bottom))} /* Back / total / Continue sticks to the bottom of the scrolling panel, so the primary action is reachable without hunting for it. It stays in flow, so nothing is hidden underneath it. */ .inq__panel{padding-bottom:0} .inq__nav{position:sticky;bottom:0;margin-top:auto; background:var(--olive-950); padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom)); box-shadow:0 -16px 26px -14px rgba(20,22,15,.95)} /* Footer nav links become full width rows so a thumb has something to hit. The opening hours are a