/* ===================================================================== WHAT WE DO: five rooms of the yard. Redesign pass 2. Each room is a plate: an ink sketch, and the finished photograph that washes in over it like paint filling a drawing. Hold the picture and the photograph lifts away to show the drawing underneath. ===================================================================== */ .plaster{position:relative;isolation:isolate} .rooms{padding:clamp(40px,5vw,72px) 0 clamp(96px,10vw,150px);overflow:hidden} .rooms .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--tan-text)} .rooms .fan,.deco-rule .fan{width:24px;height:13px;fill:none;stroke:currentColor;stroke-width:1.1} /* an Art Deco rule between rooms of the house */ .deco-rule{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--tan-text); max-width:var(--container-max);margin:0 auto clamp(64px,8vw,110px);padding:0 var(--margin-desktop)} .deco-rule i{flex:1;height:5px;border-top:1px solid var(--outline-variant);border-bottom:1px solid var(--outline-variant);max-width:420px} .rooms-head{max-width:820px} .rooms-h{font-family:var(--display);font-weight:600;font-size:clamp(38px,4.6vw,68px);line-height:1.04; letter-spacing:-.022em;color:var(--ink-forest);margin:22px 0 26px} .rooms-h span{display:block;color:var(--tan-text)} .rooms-lede{font-size:18px;line-height:1.6;color:var(--on-surface-variant);max-width:56ch;margin:0} /* ---------- five picture cards, the first thing in the section --------- */ .rooms-pick{margin:clamp(48px,5vw,72px) 0 24px;color:var(--tan-text);font-size:11px;letter-spacing:.2em; display:flex;align-items:center;gap:18px} .rooms-pick::after{content:"";flex:1;height:1px;background:var(--outline-variant)} .rooms-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 22px;align-items:start} .room-card{grid-row:1} .room{grid-row:2;grid-column:1 / -1} .room-card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;position:relative; padding-bottom:20px;border-bottom:1px solid var(--outline-variant);-webkit-tap-highlight-color:transparent} .room-card:focus-visible{outline:1px solid var(--tan);outline-offset:6px} .rc-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#efe6d6;--c:7px; clip-path:polygon(calc(var(--c)*2) 0,calc(100% - var(--c)*2) 0,calc(100% - var(--c)*2) var(--c),calc(100% - var(--c)) var(--c), calc(100% - var(--c)) calc(var(--c)*2),100% calc(var(--c)*2),100% calc(100% - var(--c)*2),calc(100% - var(--c)) calc(100% - var(--c)*2), calc(100% - var(--c)) calc(100% - var(--c)),calc(100% - var(--c)*2) calc(100% - var(--c)),calc(100% - var(--c)*2) 100%,calc(var(--c)*2) 100%, calc(var(--c)*2) calc(100% - var(--c)),var(--c) calc(100% - var(--c)),var(--c) calc(100% - var(--c)*2),0 calc(100% - var(--c)*2), 0 calc(var(--c)*2),var(--c) calc(var(--c)*2),var(--c) var(--c),calc(var(--c)*2) var(--c))} .rc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1)} .room-card:hover .rc-img img{transform:scale(1.05)} /* each card is drawn, then painted, one after another as the row arrives */ .rooms.js .rc-photo{ -webkit-mask-image:url("art/rooms/wash.png");mask-image:url("art/rooms/wash.png"); -webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:0 6%;mask-position:0 6%; transition:-webkit-mask-position 1.6s cubic-bezier(.45,.05,.3,1) calc(.5s + var(--k) * .22s), mask-position 1.6s cubic-bezier(.45,.05,.3,1) calc(.5s + var(--k) * .22s),transform 1s cubic-bezier(.2,.7,.2,1)} .rooms-grid.lit .rc-photo{-webkit-mask-position:0 94%;mask-position:0 94%} .rooms.js .room-card{opacity:0;translate:0 26px; transition:opacity .8s ease calc(var(--k) * .1s),translate 1s cubic-bezier(.2,.7,.2,1) calc(var(--k) * .1s)} .rooms.js .rooms-grid.lit .room-card{opacity:1;translate:0 0} .rc-kind{display:flex;align-items:baseline;gap:10px;margin-top:18px;color:var(--outline);font-size:10px;letter-spacing:.2em} .rc-kind b{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--tan-text)} .rc-name{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.75vw,25px);line-height:1.15; color:var(--ink-forest);margin-top:8px} .rc-list{font-size:13.5px;line-height:1.55;color:var(--on-surface-variant);margin-top:9px;min-height:4.65em} .rc-go{display:flex;align-items:center;gap:0;margin-top:14px;color:var(--ink-forest);font-size:10px;letter-spacing:.18em} .rc-go svg{width:9px;height:14px;margin-left:10px;transition:transform .45s cubic-bezier(.3,.7,.3,1)} .rc-shut{display:none} .room-card.on .rc-open{display:none} .room-card.on .rc-shut{display:inline} .room-card:hover .rc-go svg{transform:translateY(3px)} .room-card::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink-forest); transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.6,.05,.25,1)} .room-card.on::after{transform:scaleX(1)} /* ---------- the bar that keeps the five rooms in reach -------------------- */ .rooms-bar{position:fixed;left:0;right:0;top:var(--rb-top,64px);z-index:90; background:rgba(244,240,233,.985); border-bottom:1px solid var(--outline-variant); transform:translateY(-110%);opacity:0;pointer-events:none; transition:transform .5s cubic-bezier(.3,.7,.3,1),opacity .35s ease} .rooms-bar.show{transform:none;opacity:1;pointer-events:auto} .rb-in{max-width:var(--container-max);margin:0 auto;padding:0 var(--margin-desktop);display:flex;align-items:center;gap:28px} .rb-label{color:var(--tan-text);font-size:10px;letter-spacing:.2em} .rb-item{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:7px;padding:14px 0 13px;position:relative; font-family:var(--display);font-weight:600;font-size:15px;color:var(--outline);transition:color .3s ease} .rb-item b{font-size:11px;color:var(--tan-text)} .rb-item:hover{color:var(--on-surface)} .rb-item.on{color:var(--ink-forest)} .rb-item.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink-forest)} .rb-item:focus-visible,.rb-all:focus-visible{outline:1px solid var(--tan);outline-offset:3px} .rb-all{all:unset;cursor:pointer;margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--ink-forest); font-size:10px;letter-spacing:.18em;padding:14px 0} .rb-all svg{width:9px;height:14px} /* ---------- a room ---------------------------------------------------- */ .room{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,112px); padding-top:clamp(56px,6vw,80px);align-items:start} .room[hidden]{display:none} .room-plate{margin:0;position:relative;max-width:440px;width:100%;justify-self:end} .room{padding-top:clamp(84px,8vw,120px)} /* stepped Art Deco corners, and a hairline frame that follows them */ .room-frame,.room-mat::before,.room-mat::after{ --c:12px; clip-path:polygon(calc(var(--c)*2) 0,calc(100% - var(--c)*2) 0,calc(100% - var(--c)*2) var(--c),calc(100% - var(--c)) var(--c), calc(100% - var(--c)) calc(var(--c)*2),100% calc(var(--c)*2),100% calc(100% - var(--c)*2),calc(100% - var(--c)) calc(100% - var(--c)*2), calc(100% - var(--c)) calc(100% - var(--c)),calc(100% - var(--c)*2) calc(100% - var(--c)),calc(100% - var(--c)*2) 100%,calc(var(--c)*2) 100%, calc(var(--c)*2) calc(100% - var(--c)),var(--c) calc(100% - var(--c)),var(--c) calc(100% - var(--c)*2),0 calc(100% - var(--c)*2), 0 calc(var(--c)*2),var(--c) calc(var(--c)*2),var(--c) var(--c),calc(var(--c)*2) var(--c))} .room-mat{position:relative} .room-mat::before,.room-mat::after{content:"";position:absolute;pointer-events:none;z-index:0} .room-mat::before{inset:-11px;background:var(--tan);--c:15px} .room-mat::after{inset:-10px;background:var(--surface);--c:14.5px} .room-frame{position:relative;z-index:1;aspect-ratio:4/5;overflow:hidden;background:#efe6d6; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab} .room-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none} /* the drawing goes down first, left to right like a pen */ .room-sketch{clip-path:inset(0 100% 0 0)} .room.drawn .room-sketch{clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.6,.05,.3,1)} /* then the photograph washes up over it from the bottom */ .room-photo{ -webkit-mask-image:url("art/rooms/wash.png");mask-image:url("art/rooms/wash.png"); -webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:0 6%;mask-position:0 6%; transition:-webkit-mask-position 1.9s cubic-bezier(.45,.05,.3,1),mask-position 1.9s cubic-bezier(.45,.05,.3,1)} .room.built .room-photo{-webkit-mask-position:0 94%;mask-position:0 94%} /* Easter egg: hold the picture and the photograph lifts off the drawing */ .room .room-frame.peek .room-photo{-webkit-mask-position:0 6%;mask-position:0 6%; transition-duration:.8s} .room-frame.peek{cursor:grabbing} /* the room's plant lives on the page, not on the picture: it comes in from the side of the page and sits behind the frame, so it seems to grow out from behind it. A new one grows in every time the room changes. */ .room-flora{position:absolute;z-index:-1;pointer-events:none;height:auto;max-width:none;opacity:0;rotate:var(--r,0deg)} .flora-fern{left:-38%;bottom:5%;width:54%;--r:-8deg;transform-origin:90% 100%} @keyframes flora-in{from{opacity:0;translate:34% 4%;rotate:calc(var(--r) + 10deg)}to{opacity:1;translate:0 0;rotate:var(--r)}} @keyframes flora-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}} .room.drawn .room-flora{animation:flora-in 1.7s cubic-bezier(.2,.7,.2,1) .3s both,flora-sway 9s ease-in-out 2.2s infinite} .room .plate-cap{margin-top:34px} .pl-hint{font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--outline)} .pl-hint::before{content:"\00b7";margin-right:12px;color:var(--tan-text)} /* ---------- the words ---------------------------------------------------- */ .room-text{padding-top:6px} .room-kind{color:var(--tan-text);font-size:11px;letter-spacing:.2em} .room-h{font-family:var(--display);font-weight:600;font-size:clamp(32px,3.3vw,50px);line-height:1.08; letter-spacing:-.018em;color:var(--ink-forest);margin:14px 0 18px} .room-p{font-size:18px;line-height:1.6;color:var(--on-surface-variant);max-width:48ch;margin:0 0 32px} .room-list{list-style:none;margin:0 0 36px;padding:0;border-top:1px solid var(--outline-variant)} .room-list a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:18px;align-items:center; padding:16px 0 15px;border-bottom:1px solid var(--outline-variant);position:relative; transition:padding-left .45s cubic-bezier(.3,.7,.3,1)} .room-list a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--tan); transition:width .45s cubic-bezier(.3,.7,.3,1)} .rs-t{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.25;color:var(--on-surface)} .rs-d{grid-row:2;font-size:14px;line-height:1.45;color:var(--outline);margin-top:3px} .room-list svg{grid-row:1 / span 2;grid-column:2;width:16px;height:10px;color:var(--tan-text); transition:transform .45s cubic-bezier(.3,.7,.3,1)} .room-list a:hover{padding-left:30px} .room-list a:hover::before{width:18px} .room-list a:hover svg{transform:translateX(5px);color:var(--ink-forest)} .room .btns{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center} /* the words settle in after the picture has started */ .room .room-text>*{opacity:0;translate:0 14px;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.7,.2,1)} .room.drawn .room-text>*{opacity:1;translate:0 0} .room.drawn .room-text>*:nth-child(2){transition-delay:.08s} .room.drawn .room-text>*:nth-child(3){transition-delay:.16s} .room.drawn .room-text>*:nth-child(4){transition-delay:.24s} .room.drawn .room-text>*:nth-child(5){transition-delay:.32s} /* ---------- Easter eggs ------------------------------------------------- */ .room-fx{position:absolute;inset:0;z-index:2;pointer-events:none} /* embers off the fire pit */ .ember{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffcf7a; box-shadow:0 0 6px 2px rgba(255,150,60,.75);animation:ember var(--t,1.8s) ease-out forwards} @keyframes ember{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:1} 100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,-120px)) scale(.3)}} /* fireflies at dusk */ .firefly{position:absolute;width:5px;height:5px;border-radius:50%;background:#f6f0a0; box-shadow:0 0 8px 3px rgba(240,236,140,.7);opacity:0; animation:ff-drift var(--d,9s) ease-in-out infinite alternate,ff-blink var(--b,2.6s) ease-in-out infinite} @keyframes ff-drift{from{transform:translate(0,0)}to{transform:translate(var(--mx,30px),var(--my,-24px))}} @keyframes ff-blink{0%,100%{opacity:0}45%,60%{opacity:1}} /* a Gulf fritillary that comes to the camellia */ .butterfly{all:unset;position:absolute;z-index:5;width:54px;cursor:pointer;left:0;top:0; transition:transform 2.6s cubic-bezier(.35,.1,.25,1),opacity .6s ease} .butterfly img{width:100%;height:auto;display:block;animation:flap .18s ease-in-out infinite alternate;transform-origin:50% 50%} .butterfly.landed img{animation:flap-rest 2.8s ease-in-out infinite} @keyframes flap{from{scale:1 1}to{scale:.28 1}} @keyframes flap-rest{0%,70%,100%{scale:1 1}78%{scale:.55 1}86%{scale:1 1}} /* ---------- phones and tablets --------------------------------------- */ @media(max-width:900px){ .rooms-grid{grid-template-columns:1fr;gap:0} .room-card,.room{grid-row:auto;grid-column:auto} .room-card{display:grid;grid-template-columns:118px 1fr;grid-template-rows:auto auto auto auto;column-gap:18px; padding:16px 0;align-items:start} .rc-img{grid-row:1 / span 4;--c:5px} .rc-kind{margin-top:2px} .rc-name{font-size:21px;margin-top:5px} .rc-list{min-height:0;font-size:13px;margin-top:5px} .rc-go{margin-top:9px} .room-card.on .rc-go svg{transform:rotate(180deg)} .room{grid-template-columns:1fr;gap:44px;padding:96px 0 44px;border-bottom:1px solid var(--outline-variant)} .room-plate{justify-self:center} .room-plate{max-width:440px;width:84%} .deco-rule{padding:0 var(--margin-mobile)} .rb-in{padding:0 var(--margin-mobile);gap:16px} .rb-label,.rb-item:not(.on){display:none} } @media (prefers-reduced-motion: reduce){ .room-sketch{clip-path:none} .room-photo{-webkit-mask-position:0 94%;mask-position:0 94%;transition:none} .room-flora{opacity:1;animation:none !important} .room .room-text>*{opacity:1;translate:none;transition:none} .rooms.js .room-card{opacity:1;translate:none;transition:none} .rooms.js .rc-photo{-webkit-mask-position:0 94%;mask-position:0 94%;transition:none} .rooms-bar{transition:none} } /* ===================================================================== THE ROOMS CHANGE THE PAGE, NOT THE PICTURE (pass 2d) Each room sets a mood on the whole section. rooms.js adds a class to the section and fills .rooms-fx, a layer behind everything. Outdoor living golden hour: the section warms, embers drift upward Surfaces an oyster shell ground pours in across the section, and a golf ball rolls over it into the putting green Water and light dusk: the section turns evening blue, fireflies Landscape a camellia comes out of the left side of the screen Walls and rock the fern comes out from behind the frame ===================================================================== */ .room{position:relative;padding-bottom:0} .rooms{padding-bottom:clamp(20px,2.5vw,36px)} .room-scene{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;pointer-events:none} .rooms-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden} /* ---------- colour moods ------------------------------------------------ */ @property --ink-forest{syntax:'';inherits:true;initial-value:#2c3a2b} @property --on-surface{syntax:'';inherits:true;initial-value:#1b1c1c} @property --on-surface-variant{syntax:'';inherits:true;initial-value:#434843} @property --outline{syntax:'';inherits:true;initial-value:#6e685d} @property --outline-variant{syntax:'';inherits:true;initial-value:#cdc6b8} @property --tan{syntax:'';inherits:true;initial-value:#a38a66} @property --surface{syntax:'';inherits:true;initial-value:#f4f0e9} .rooms{transition:--ink-forest 1.2s ease,--on-surface 1.2s ease,--on-surface-variant 1.2s ease,--outline 1.2s ease, --outline-variant 1.2s ease,--tan 1.2s ease,--surface 1.2s ease} .rooms-mood,.rooms-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.4s ease} .rooms-mood{background:linear-gradient(180deg,#1a2233 0%,#1d2836 40%,#1b2a2c 100%)} .rooms-glow{background: radial-gradient(90% 55% at 50% 100%,rgba(236,150,70,.30),rgba(236,150,70,0) 70%), linear-gradient(180deg,rgba(248,222,176,.55) 0%,rgba(242,204,150,.45) 55%,rgba(232,178,120,.42) 100%)} .rooms.golden .rooms-glow{opacity:1} .rooms.golden{--tan:#9a7440;--tan-text:#6e5024;--surface:#f3e1c3} .rooms.dusk{--ink-forest:#f1e9d8;--on-surface:#efe7d6;--on-surface-variant:#c9c2b3;--outline:#aaa392; --outline-variant:rgba(239,231,214,.2);--tan:#d8bc88;--tan-text:#d8bc88;--surface:#1c2634} .rooms.dusk .rooms-mood{opacity:1} .rooms.dusk::before{opacity:.12;transition:opacity 1.4s ease} .rooms.dusk .btn-primary{background:#fed65b;color:#241a00;border-color:#fed65b} .rooms-bar{transition:transform .5s cubic-bezier(.3,.7,.3,1),opacity .35s ease,background .9s ease} .rooms.dusk .rooms-bar{background:rgba(28,38,52,.94)} /* ---------- glowing specks: embers at golden hour, fireflies at dusk ------- */ .spark{position:absolute;border-radius:50%;opacity:0;will-change:transform,opacity} .spark.ember{width:5px;height:5px;background:#ffd48a;box-shadow:0 0 10px 3px rgba(255,140,50,.7),0 0 2px 1px #fff3d6; animation:rise var(--t,9s) linear var(--w,0s) infinite} @keyframes rise{0%{opacity:0;transform:translate(0,0)}12%{opacity:.95}70%{opacity:.7} 100%{opacity:0;transform:translate(var(--dx,20px),var(--dy,-420px))}} .spark.fly{width:5px;height:5px;background:#f6f0a0;box-shadow:0 0 9px 3px rgba(240,236,140,.65); animation:ff-drift var(--t,11s) ease-in-out infinite alternate,ff-blink var(--b,3s) ease-in-out var(--w,0s) infinite} /* ---------- Surfaces: an oyster shell ground ------------------------------- */ /* the ground is one canvas painted by rooms.js (shells), not a few hundred s */ .shell-ground{position:absolute;left:0;top:0;display:block;pointer-events:none} /* the putt: a real ball rolled by scrolling, a drafted aim line, a soft contact shadow */ .putt{position:absolute;inset:0;z-index:5;pointer-events:none} .putt-line{position:absolute;left:0;top:0;overflow:visible;transition:opacity .8s ease;will-change:transform} .putt-line .aim{fill:none;stroke:var(--tan);stroke-width:1.3;stroke-dasharray:.5 8;stroke-linecap:round} .putt-ball{position:absolute;left:0;top:0;display:block;will-change:transform} .putt-ball img{display:block;width:100%;height:100%;will-change:transform} /* the light stays put while the dimples turn under it */ .putt-ball::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85) 0,rgba(255,255,255,.25) 22%,rgba(255,255,255,0) 42%), radial-gradient(circle at 70% 76%,rgba(60,52,38,.34) 0,rgba(60,52,38,.12) 38%,rgba(60,52,38,0) 62%)} /* the line and the shadow change as the ball rolls: each on its own layer, so the photograph under them is never repainted for it */ .putt-shadow{position:absolute;left:0;top:0;border-radius:50%;will-change:transform; background:radial-gradient(closest-side,rgba(28,24,14,.5),rgba(28,24,14,0))} /* embers: one canvas the size of the screen, behind everything in the section */ .embers{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;transition:opacity 1.4s ease} /* ---------- Landscape: a camellia out of the left side of the screen ------ */ .scene-flora{position:absolute;left:0;height:auto;max-width:none;opacity:0} .scene-camellia{top:3%;width:clamp(210px,21vw,330px);transform-origin:0 60%} @keyframes edge-in{from{opacity:0;translate:-100% 0;rotate:-24deg}to{opacity:1;translate:-26% 0;rotate:-4deg}} .room.drawn .scene-camellia{animation:edge-in 1.8s cubic-bezier(.2,.7,.2,1) .2s both,flora-sway 10s ease-in-out 2.2s infinite} @media(max-width:900px){ .scene-camellia{top:70px;width:40vw} } @media (prefers-reduced-motion: reduce){ .scene-camellia{animation:none!important;opacity:1;translate:-26% 0} .spark{animation:none!important;opacity:.8} .rooms,.rooms-mood,.rooms-glow{transition:none} } /* the hint says what works on this device */ .hint-mouse{display:none} @media (hover:hover) and (pointer:fine){ .hint-mouse{display:inline} .hint-touch{display:none} .room-frame{cursor:crosshair} }