/* ============================================================ VICTORIA HAUS — four homes, Victoria Drive at East 23rd Japandi language: warm neutrals, generous air, one accent. Structure follows brockhouse.ca; unit selector follows the keyplan + named-unit pattern. ============================================================ */ :root{ --ink:#1B1A17; --ink-2:#3E3C36; --paper:#F7F5F0; --sand:#EDE8DE; --sand-2:#E3DCCE; --line:#DAD3C4; --moss:#5A6650; --moss-lt:#7C876F; --clay:#B4714E; --muted:#7A756B; /* 1440 left ~590px dead on each side of a 27" 2560px display — nearly half the screen. 1680 keeps text columns readable while using the room. */ --shell:1680px; --gutter:clamp(20px, 4vw, 72px); --band:clamp(64px, 9vw, 148px); --gap:clamp(18px, 2.2vw, 34px); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} /* The visible page background lives here, not on : body now carries the Safari toolbar tint. Must stay in normal flow, not fixed. A fixed overlay the size of the viewport gets sampled instead of the body and the tint is lost (measured on an iPhone: a 1px fixed strip is ignored, a full-screen one is not). */ .page{background:var(--paper);position:relative;z-index:0} /* Safari 26 takes the toolbar colour from a fixed layer the size of the viewport, and only from one that size: measured on an iPhone, a 1px fixed strip is ignored and the body is used instead, which then went white at scroll 0. This layer sits behind the opaque .page, so it is never seen, and it holds the colour steady wherever the page is scrolled. */ .tint{position:fixed;inset:0;background-color:var(--tint);z-index:-1;pointer-events:none} a{color:inherit} ::selection{background:var(--moss);color:#fff} .display{font-family:'Jost',var(--fallback),sans-serif;font-weight:300;letter-spacing:-.015em} .wrap{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)} body{animation:pagein .6s ease both} @keyframes pagein{from{opacity:0}to{opacity:1}} /* ---------- NAV ---------- */ nav{position:fixed;inset:0 0 auto 0;z-index:90;color:#fff;transition:background .45s ease,box-shadow .45s ease} /* viewport-fit:cover lets the page run under the notch, so anything fixed to the top has to add the inset back or it sits beneath the status bar. */ nav{padding-top:env(safe-area-inset-top)} nav .nav-in{max-width:var(--shell);margin-inline:auto;padding:26px var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:26px;transition:padding .45s ease} nav.solid{background:rgba(247,245,240,.94);backdrop-filter:blur(14px);color:var(--ink); box-shadow:0 1px 0 rgba(0,0,0,.07)} nav.solid .nav-in{padding-block:16px} /* RK: the wordmark read small and thin against the hero. Up two steps in size and from 300 to 500, with the tracking eased off so the extra weight does not make it sprawl. */ .logo{font-family:'Jost',sans-serif;font-weight:500;font-size:clamp(20px,1.8vw,26px); letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;line-height:1.12} .logo b{display:block;font-weight:500} nav ul{display:flex;gap:clamp(18px,2.4vw,38px);list-style:none;align-items:center} nav a.nl{text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;position:relative;padding:4px 0;white-space:nowrap} nav a.nl::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor; transition:width .4s cubic-bezier(.7,0,.3,1)} nav a.nl:hover::after,nav a.nl.active::after{width:100%} nav a.reg{text-decoration:none;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; border:1px solid currentColor;padding:11px 24px;transition:background .35s,color .35s,border-color .35s; white-space:nowrap} nav a.reg:hover{background:var(--moss);border-color:var(--moss);color:#fff} .burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer; position:relative;color:inherit;flex-shrink:0;margin-right:-10px} .burger i{position:absolute;left:11px;width:22px;height:1.4px;background:currentColor; transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .2s} .burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:23px}.burger i:nth-child(3){top:29px} body.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)} body.menu-open .burger i:nth-child(2){opacity:0} body.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .drawer{position:fixed;inset:0;z-index:85;background:var(--ink);color:var(--paper); display:flex;flex-direction:column;justify-content:center; padding:env(safe-area-inset-top) var(--gutter) env(safe-area-inset-bottom); opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .4s,transform .4s cubic-bezier(.2,.7,.2,1),visibility .4s} body.menu-open .drawer{opacity:1;visibility:visible;transform:none} body.menu-open{overflow:hidden} .drawer a{display:block;text-decoration:none;font-family:'Jost',sans-serif;font-weight:300; font-size:clamp(28px,7vw,42px);padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14); opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s,color .25s} body.menu-open .drawer a{opacity:1;transform:none} body.menu-open .drawer a:nth-child(1){transition-delay:.09s} body.menu-open .drawer a:nth-child(2){transition-delay:.15s} body.menu-open .drawer a:nth-child(3){transition-delay:.21s} body.menu-open .drawer a:nth-child(4){transition-delay:.27s} body.menu-open .drawer a:nth-child(5){transition-delay:.33s} .drawer a:hover{color:var(--moss-lt)} .drawer .d-meta{margin-top:38px;font-size:13.5px;line-height:1.9;color:#9A958A;opacity:0;transition:opacity .4s .4s} body.menu-open .drawer .d-meta{opacity:1} @media(max-width:960px){ nav ul{display:none}.burger{display:block} nav .nav-in{padding-block:18px}nav.solid .nav-in{padding-block:14px} } nav{z-index:95} body.menu-open nav{background:transparent;box-shadow:none;color:var(--paper)} /* ---------- HERO ---------- */ .hero{position:relative;height:clamp(560px,100svh,1020px);overflow:hidden;display:flex; align-items:flex-end;color:#fff;background:var(--ink)} .hero.sub{height:clamp(420px,66svh,700px)} .hero .media{position:absolute;inset:0;overflow:hidden} .hero .media img,.hero .media video{position:absolute;top:-12%;left:0;width:100%;height:124%; object-fit:cover;will-change:transform} .hero .media img{animation:heroZoom 2.6s cubic-bezier(.2,.6,.2,1) both} .hero .media video{opacity:0;transition:opacity 1.1s} .hero .media video.playing{opacity:1} /* Two-layer hero. The opener sits under the master; the master is transparent until it has been seeked into position, so a slow connection simply never reveals it and the visitor keeps watching the light version instead of a still. Both are the same clip and the same length, so the swap is invisible. */ .hero .media video.v-hq{opacity:0;transition:opacity .5s ease;z-index:2} .hero .media video.v-hq.playing{opacity:1} @keyframes heroZoom{from{transform:scale(1.09)}to{transform:scale(1.01)}} /* The still under a video hero has to be that video's own first frame, or the fade-in is a dissolve between two different photographs: measured at 83% of pixels changing on the homes header. For the same reason the still cannot keep its zoom while the video sits static underneath, so the animation is dropped wherever a video is present. */ .hero .media:has(video) img{animation:none;transform:scale(1.02)} .hero .shade{position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(15,14,12,.66) 0%,rgba(15,14,12,.08) 52%,rgba(15,14,12,.30) 100%)} .hero-inner{position:relative;width:100%;max-width:var(--shell);margin-inline:auto; padding:0 var(--gutter) clamp(52px,7vh,92px)} .hero h1{font-size:clamp(38px,6.4vw,88px);line-height:1.04;font-weight:300} /* The .ln mask that drives the line-by-line reveal was clipping descenders: a line-height under 1 makes the line box shorter than the glyphs, so the tails of g, y, q and the comma fell outside overflow:hidden. The padding gives them room and the matching negative margin gives the space back, so the line spacing is unchanged. */ .hero h1 .ln{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.12em} .hero h1 .ln span{display:block;transform:translateY(112%); animation:lineUp 1.05s cubic-bezier(.2,.7,.2,1) forwards} .hero h1 .ln:nth-child(2) span{animation-delay:.13s} @keyframes lineUp{to{transform:translateY(0)}} .hero .sub-copy{margin-top:22px;font-size:clamp(15px,1.15vw,17.5px);max-width:46ch;line-height:1.65; opacity:0;animation:fadeUp 1s .5s ease forwards;color:#EDEAE3} @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .hero .scrollcue{position:absolute;right:var(--gutter);bottom:clamp(52px,7vh,92px);font-size:10.5px; letter-spacing:.24em;text-transform:uppercase;writing-mode:vertical-rl;opacity:0; animation:fadeUp 1s .8s ease forwards} .hero .scrollcue::after{content:"";display:block;width:1px;height:52px;background:#fff;margin:14px auto 0; animation:cue 1.9s ease infinite} @keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* dark page head */ .page-head{background:var(--ink);color:var(--paper);position:relative;overflow:hidden; padding:calc(96px + clamp(56px,7vw,104px)) 0 clamp(52px,6vw,88px)} .page-head h1{font-size:clamp(34px,5.4vw,74px);line-height:1.05;font-weight:300} /* The .ln mask that drives the line-by-line reveal was clipping descenders: a line-height under 1 makes the line box shorter than the glyphs, so the tails of g, y, q and the comma fell outside overflow:hidden. The padding gives them room and the matching negative margin gives the space back, so the line spacing is unchanged. */ .page-head h1 .ln{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.12em} .page-head h1 .ln span{display:block;transform:translateY(112%); animation:lineUp 1.05s cubic-bezier(.2,.7,.2,1) forwards} .page-head h1 .ln:nth-child(2) span{animation-delay:.13s} .page-head p{margin-top:20px;color:#B0AAA0;font-size:clamp(15px,1.15vw,17.5px);max-width:56ch;line-height:1.7} /* ---------- SECTIONS ---------- */ section{padding-block:var(--band)} .page-head + section{padding-top:clamp(46px,6vw,92px)} .kicker{display:flex;align-items:center;gap:14px;color:var(--moss);font-size:11px;font-weight:600; letter-spacing:.26em;text-transform:uppercase;margin-bottom:24px} .kicker::before{content:"";width:38px;height:1px;background:var(--moss);flex-shrink:0} h2.title{font-size:clamp(28px,4vw,58px);line-height:1.1;max-width:17ch;font-weight:300} .lead{margin-top:24px;font-size:clamp(15.5px,1.2vw,18px);line-height:1.8;color:var(--ink-2);max-width:58ch} .note{font-size:13px;color:var(--muted);line-height:1.7} .reveal{opacity:0;transform:translateY(30px); transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} *{animation-duration:.01ms !important;animation-iteration-count:1 !important} } .frame{overflow:hidden;position:relative;background:var(--sand)} .frame > img{width:100%;height:100%;object-fit:cover} .frame img{transition:transform 1.3s cubic-bezier(.2,.7,.2,1);will-change:transform} .frame:hover img{transform:scale(1.045)} .cap{position:absolute;left:18px;bottom:16px;background:rgba(20,19,16,.55);color:#fff;font-size:11.5px; letter-spacing:.06em;padding:7px 14px;backdrop-filter:blur(6px)} .bleed{position:relative;overflow:hidden} .bleed img{width:100%;height:100%;object-fit:cover} /* stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:clamp(46px,5vw,78px)} .stat{border-top:1px solid var(--line);padding-top:24px} .stat b{font-family:'Jost',sans-serif;font-size:clamp(32px,3.4vw,52px);font-weight:300;display:block;line-height:1} .stat small{display:block;margin-top:10px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} @media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}} /* buttons */ .btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:12px; letter-spacing:.14em;text-transform:uppercase;padding:17px 32px;border:1px solid var(--ink); transition:background .35s,color .35s,border-color .35s;cursor:pointer;font-family:inherit;background:transparent;color:var(--ink)} .btn .arr{transition:transform .35s} .btn:hover .arr{transform:translateX(5px)} .btn:hover{background:var(--ink);color:var(--paper)} .btn-solid{background:var(--ink);color:var(--paper)} .btn-solid:hover{background:var(--moss);border-color:var(--moss);color:#fff} .btn-light{border-color:var(--paper);color:var(--paper)} .btn-light:hover{background:var(--paper);color:var(--ink)} /* ---------- REGISTER ---------- */ .register{background:var(--ink);color:var(--paper);position:relative;overflow:hidden} .register .inner{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(34px,5vw,90px); padding-block:var(--band);align-items:start} .register h2{font-size:clamp(28px,3.8vw,54px);line-height:1.1;font-weight:300} .register p{margin-top:20px;color:#ADA79D;line-height:1.8;max-width:44ch} .register form{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start} .register input,.register select{width:100%;padding:16px 18px;border:1px solid rgba(255,255,255,.2); font-size:15px;font-family:inherit;background:rgba(255,255,255,.05);color:#fff; transition:border-color .3s,background .3s;border-radius:0} .register input::placeholder{color:#8E887E} .register select{color:#8E887E} .register input:focus,.register select:focus{outline:none;border-color:var(--moss-lt);background:rgba(255,255,255,.09)} .register .full{grid-column:1/-1} .register button{grid-column:1/-1;background:var(--paper);color:var(--ink);border:0;padding:18px; font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer; font-family:inherit;transition:background .3s,color .3s} .register button:hover{background:var(--moss);color:#fff} .register .consent{grid-column:1/-1;font-size:11.5px;line-height:1.7;color:#8E887E;margin-top:2px} @media(max-width:900px){.register .inner{grid-template-columns:1fr;gap:38px}.register form{grid-template-columns:1fr}} /* ---------- FOOTER ---------- */ footer{background:#131211;color:#8A857C;font-size:12.5px} footer .f-in{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap; gap:26px 40px;padding-block:clamp(34px,4vw,56px)} footer b{color:#CFC9BE;font-weight:500} footer .fl{display:flex;flex-wrap:wrap;gap:10px 26px} footer .fl a{color:#CFC9BE;text-decoration:none;font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;transition:color .25s} footer .fl a:hover{color:#fff} footer .legal{width:100%;border-top:1px solid rgba(255,255,255,.08);padding:22px 0 clamp(30px,4vw,50px); font-size:11.5px;line-height:1.8;color:#6E6960;max-width:none} @media(max-width:700px){footer .f-in{flex-direction:column}} /* ---------- LIGHTBOX ---------- */ .lb{position:fixed;inset:0;z-index:200;background:rgba(16,15,13,.95);backdrop-filter:blur(6px); display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s} .lb.open{display:flex}.lb.show{opacity:1} .lb-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center; padding:clamp(56px,8vh,90px) clamp(16px,6vw,96px);overflow:hidden} .lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.5);cursor:zoom-in;transform-origin:center;user-select:none; transition:transform .34s cubic-bezier(.2,.7,.2,1),opacity .28s} .lb-stage img.zoomed{cursor:grab;transition:transform .18s ease-out} .lb-stage img.zoomed.grabbing{cursor:grabbing;transition:none} .lb-close,.lb-prev,.lb-next{position:absolute;z-index:3;border:0;cursor:pointer;color:#fff; background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:50%;display:grid; place-items:center;transition:background .3s,transform .3s} .lb-close{top:clamp(14px,2.4vh,26px);right:clamp(14px,2.4vw,30px);width:48px;height:48px;font-size:18px} .lb-close:hover{background:var(--clay);transform:rotate(90deg)} .lb-prev,.lb-next{top:50%;margin-top:-28px;width:56px;height:56px;font-size:22px} .lb-prev{left:clamp(10px,1.8vw,26px)}.lb-next{right:clamp(10px,1.8vw,26px)} .lb-prev:hover,.lb-next:hover{background:var(--moss)} .lb-bar{position:absolute;left:0;right:0;bottom:0;z-index:3; padding:0 clamp(14px,3vw,30px) clamp(14px,2.4vh,26px); display:flex;justify-content:space-between;align-items:flex-end;gap:16px;color:#fff;pointer-events:none} .lb-cap{font-size:13.5px;line-height:1.5;max-width:56ch;pointer-events:auto; background:rgba(18,17,15,.88);backdrop-filter:blur(10px);padding:14px 20px} .lb-cap b{display:block;font-family:'Jost',sans-serif;font-weight:400;font-size:18px;margin-bottom:4px} .lb-count{font-size:11.5px;letter-spacing:.16em;white-space:nowrap;pointer-events:auto; background:rgba(18,17,15,.88);backdrop-filter:blur(10px);padding:11px 17px;color:#CFC9BE} .lb-zoomhint{position:absolute;top:clamp(14px,2.4vh,26px);left:clamp(14px,2.4vw,30px);z-index:3; font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#CFC9BE; background:rgba(255,255,255,.09);padding:9px 16px;backdrop-filter:blur(8px);transition:opacity .25s} .lb.is-zoomed .lb-bar,.lb.is-zoomed .lb-zoomhint, .lb.is-zoomed .lb-prev,.lb.is-zoomed .lb-next{opacity:0;pointer-events:none} .lb-prev,.lb-next,.lb-bar{transition:opacity .25s} @media(max-width:700px){ .lb-prev,.lb-next{width:44px;height:44px;margin-top:-22px;font-size:18px} .lb-zoomhint{display:none}.lb-cap b{font-size:16px}.lb-cap{font-size:12.5px} } /* ---------- SMALL SCREENS ---------- */ @media(max-width:900px){ .hero .scrollcue{display:none} .hero .sub-copy{max-width:none} h2.title{max-width:none} }