/* ============================================================ 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. */ /* ---------- the two bars iOS tints ---------- iOS 26 Safari ignores theme-color. It picks a fixed element that reaches a screen edge and is at least 80% of the viewport wide, reads its computed background-color, and decides from the alpha alone: alpha of exactly 1 gives a solid bar in that colour, any alpha between 0 and 1 gives glass, and alpha 0 means skip this one and try the next. Build 038, correcting 037 on a real iPhone. 037 split this into a top sampler at 55vh and #chin at the bottom so the two bars could differ, and made the top solid at rest. Two things were wrong with that. The address bar sits at the bottom on a default iPhone and at the top only if you move it, so "solid at rest" was visible either way and is not what anyone wants over a full-bleed hero. And 55vh contradicts the measurement recorded directly above: a fixed layer that is not the size of the viewport is passed over and the opaque body is read instead, which is solid whatever alpha this carries. So the two bars no longer differ. This is back to inset:0, the geometry measured to be sampled, and it is glass in every state: same per-page colour as before at 96% alpha, which reads as glass because the alpha is a yes/no switch for "see through" rather than a dial. #chin is glass, .veil is glass at 42%, and every other candidate is out of the render tree, so whichever one Safari picks the answer is the same. That agreement is the whole point; which candidate wins is not predictable. */ .tint{position:fixed;inset:0;background-color:var(--tint-glass,var(--tint)); z-index:-1;pointer-events:none} /* The bottom sampler: real, sampled, and paints nothing. opacity:0 does not remove it from the render tree, which is exactly why it works. Do not give it a backdrop-filter (forces a compositing layer and renders a seam) and do not put it at z-index:-1 (it becomes page canvas and tints both bars). */ #chin{position:fixed;bottom:-14px;left:0;width:100%;height:14px;min-height:14px; z-index:5;margin:0;padding:0;pointer-events:none;opacity:0;display:none; background-color:rgba(255,255,255,.02)} /* iPhone only. This @supports trio is the reliable sniff; nothing here can reach Android, iPad or the desktop. Build 042. Everything in this block exists to satisfy one line of CHIN-iOS-SAFARI.md: in the resting state, #chin must be the only element reaching the bottom edge. Builds 038 to 041 tried to satisfy a weaker rule I invented instead, that every candidate must merely agree on glass, and it does not hold. Four full-screen layers each at 96% alpha are each glass on their own and opaque once stacked, which is why the homepage was right and the four pages carrying .vh-ground were not: one layer there, two here. Giving .vh-ground a colour in 039 added a second dense layer rather than taking it off the edge, which is why that round made no difference. So the others leave the bottom edge instead of arguing over its colour. .tint keeps the top, where a solid bar is fine and wanted, and stops short. .veil leaves the render tree while the menu is shut, because visibility:hidden keeps a layout box and keeps it a candidate. */ @supports (-webkit-text-size-adjust:none) and (font:-apple-system-body) and (-webkit-touch-callout:none){ @media(max-width:760px){ #chin{display:block} /* so an absolutely positioned .vh-ground still covers the document */ body{position:relative} .tint{bottom:auto;height:55vh} .veil{display:none} body.menu-open .veil{display:block} } } 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 ---------- */ /* body > nav, not nav: the drawer now carries its own