/* MENU.CSS — the top bar and the side expansion. * * WHY THIS EXISTS. Fred took the live site to a community dinner on 7 September 2026. * Twenty people, and the complaint was universal: "a menu saying what the site is * about" was ABSENT, and navigation was "very difficult." The design had been settled * three sittings running and never built: * * 3 Sep 18:36 — "a top menu bar with the rooms and submenues with hover for brief * descriptions... Seven at top, expanded on the side." * 4 Sep 03:08 — "whatever is highlighted moves to the left as sort of a title for * the menu." * 4 Sep 03:14 — "The door must have a clear Label That describes what it is for. * And perhaps The next level of menus should have something like the * three doors... which then expand to specialized menus. with * meaningful descriptions. A drill down." * * And the diagnosis of why the PREVIOUS top menu failed, from the same night, which is * the thing this file has to avoid reproducing: * * "The first reaction to this menu is going to be what's this got to do with my * question? The second reaction is gonna be click... I'm out of here. It's almost * written for us as self aggrandisement." * * So no room names in the bar. Every top item is a state the reader is in, written in * her words. The room names live one level down, where she has already said which * situation is hers. * * COLOUR. Tokens only, from theme.css, with fallbacks so the bar is still legible if * this file loads and theme.css does not. Dark is scoped to :root[data-theme="dark"] * exactly as theme.css does it — the boot script in every always writes an * explicit data-theme, so there is no third state to design for. */ :root{ --vsi-bar-h:3rem } /* The bar is fixed and the body is padded by the same amount, set from menu.js against the MEASURED height rather than this number — a two-line bar at 320px would otherwise sit on top of the first sentence, which is the page's most important one. */ .vsi-bar{ position:fixed; top:0; left:0; right:0; z-index:900; display:flex; align-items:stretch; gap:0; background:var(--paper-raised,#FBFAF5); border-bottom:1px solid var(--edge,#ded5c4); font:15px/1.35 Georgia,'Iowan Old Style',serif; box-shadow:0 1px 0 rgba(0,0,0,.03); } :root[data-theme="dark"] .vsi-bar{ background:var(--paper-raised,#211D18); border-bottom-color:var(--edge,#3A342B); box-shadow:0 1px 0 rgba(0,0,0,.35); } .vsi-bar-home{ flex:0 0 auto; display:flex; align-items:center; gap:.5rem; padding:.55rem .85rem; color:var(--navy,#1F3864); text-decoration:none; font:600 .95rem/1.2 Georgia,'Iowan Old Style',serif; white-space:nowrap; } .vsi-bar-home:hover,.vsi-bar-home:focus-visible{ text-decoration:underline } :root[data-theme="dark"] .vsi-bar-home{ color:var(--navy,#D8C9A8) } .vsi-doors{ display:flex; align-items:stretch; flex:1 1 auto; min-width:0 } /* A door is a button, not a link: it opens something on this page and never takes the reader anywhere. The label is a sentence in her voice, so it wraps rather than truncating — a clipped label is a label that has to be guessed at. */ .vsi-door{ appearance:none; background:none; border:0; border-left:1px solid transparent; padding:.5rem .75rem; margin:0; cursor:pointer; text-align:left; color:var(--ink,#18213B); font:15px/1.25 Georgia,'Iowan Old Style',serif; display:flex; align-items:center; min-width:0; } .vsi-door:hover{ background:var(--notice,#fff8e6) } :root[data-theme="dark"] .vsi-door{ color:var(--ink,#EDE6D8) } :root[data-theme="dark"] .vsi-door:hover{ background:var(--notice,#2A2318) } .vsi-door[aria-expanded="true"]{ background:var(--notice,#fff8e6); box-shadow:inset 0 -3px 0 var(--brass,#B8863B); } :root[data-theme="dark"] .vsi-door[aria-expanded="true"]{ background:var(--notice,#2A2318); box-shadow:inset 0 -3px 0 var(--brass,#C79A4A); } .vsi-door:focus-visible{ outline:2px solid var(--brass-deep,#8A6222); outline-offset:-2px } /* The urgent door is marked, not coloured like an alarm. From the record: "Red flags never sit behind a click... urgency cannot be drilled down to." The mark is what makes it findable in one sweep of the eye; the CONTENT of that door is plain text in the panel rather than a list of links, so opening it is already the answer. */ .vsi-door.urgent .vsi-door-l::before{ content:''; display:inline-block; width:.5rem; height:.5rem; margin-right:.4rem; border-radius:50%; background:var(--clay,#c0523a); vertical-align:.05em; } :root[data-theme="dark"] .vsi-door.urgent .vsi-door-l::before{ background:var(--clay,#E0836B) } .vsi-door-l{ display:block } /* ---- the panel ---------------------------------------------------------- * Left side, under the bar, its own scroll. It overlays the page rather than pushing * it, because pushing moves the sentence the reader was in the middle of. */ .vsi-panel{ position:fixed; left:0; top:var(--vsi-bar-h); z-index:899; width:min(24rem,92vw); max-height:calc(100vh - var(--vsi-bar-h)); overflow:auto; -webkit-overflow-scrolling:touch; background:var(--paper-raised,#FBFAF5); border-right:1px solid var(--edge,#ded5c4); border-bottom:1px solid var(--edge,#ded5c4); box-shadow:0 8px 28px rgba(0,0,0,.12); padding:1rem 1rem 1.4rem; font:15px/1.5 Georgia,'Iowan Old Style',serif; color:var(--ink,#18213B); } :root[data-theme="dark"] .vsi-panel{ background:var(--paper-raised,#211D18); color:var(--ink,#EDE6D8); border-color:var(--edge,#3A342B); box-shadow:0 8px 28px rgba(0,0,0,.5); } /* WHICH MENU AM I IN. Fred, 4 Sep: "whatever is highlighted moves to the left as sort of a title for the menu." The door's own label is the title, and it stays there for as long as the door is open. The siblings do not vanish — they are still in the bar above, lit — so she never has to climb back out to see the others. */ .vsi-p-title{ margin:0 0 .2rem; font:600 1.06rem/1.3 Georgia,'Iowan Old Style',serif; color:var(--navy,#1F3864); } :root[data-theme="dark"] .vsi-p-title{ color:var(--navy,#D8C9A8) } .vsi-p-line{ margin:0 0 .9rem; color:var(--soft,#5c6274); font-size:.94rem } :root[data-theme="dark"] .vsi-p-line{ color:var(--soft,#A79C8B) } .vsi-p-list{ list-style:none; margin:0; padding:0 } .vsi-p-list > li{ margin:0 0 .1rem } /* A bare label is "the fucking listing that got rejected in the first place" — 1 Sep 2026. Every entry carries a title AND a line saying what is in it. */ .vsi-go{ display:block; width:100%; text-align:left; appearance:none; background:none; border:0; border-radius:.35rem; padding:.5rem .55rem; cursor:pointer; color:inherit; font:inherit; text-decoration:none; } .vsi-go:hover,.vsi-go:focus-visible{ background:var(--notice,#fff8e6) } :root[data-theme="dark"] .vsi-go:hover, :root[data-theme="dark"] .vsi-go:focus-visible{ background:var(--notice,#2A2318) } .vsi-go .n{ display:block; color:var(--navy,#1F3864); font-weight:600 } :root[data-theme="dark"] .vsi-go .n{ color:var(--navy,#D8C9A8) } .vsi-go .w{ display:block; color:var(--soft,#5c6274); font-size:.9rem; margin-top:.1rem } :root[data-theme="dark"] .vsi-go .w{ color:var(--soft,#A79C8B) } /* THE DRILL DOWN — the second level. Sections are declared in bridges.js, so this is what is actually inside the page rather than a promise about it. */ .vsi-more{ appearance:none; background:none; border:0; cursor:pointer; padding:.15rem .55rem .5rem; font:.86rem/1.3 system-ui,sans-serif; color:var(--brass-deep,#8A6222); } :root[data-theme="dark"] .vsi-more{ color:var(--brass-deep,#D9AE60) } .vsi-more:hover{ text-decoration:underline } .vsi-secs{ list-style:none; margin:0 0 .5rem; padding:0 0 0 .9rem; border-left:2px solid var(--edge,#ded5c4) } :root[data-theme="dark"] .vsi-secs{ border-left-color:var(--edge,#3A342B) } .vsi-sec{ appearance:none; background:none; border:0; cursor:pointer; text-align:left; padding:.28rem .4rem; font:.92rem/1.35 Georgia,'Iowan Old Style',serif; color:var(--acc,#1f4e6b); } :root[data-theme="dark"] .vsi-sec{ color:var(--acc,#8ec4e4) } .vsi-sec:hover{ text-decoration:underline } /* The urgent door's contents are prose, not links. */ .vsi-said{ margin:0 0 .7rem; padding:.55rem .65rem; border-radius:.35rem; background:var(--notice,#fff8e6); border:1px solid var(--notice-edge,#e8d9a8) } :root[data-theme="dark"] .vsi-said{ background:var(--notice,#2A2318); border-color:var(--notice-edge,#4A3F2B) } .vsi-said p{ margin:0 0 .4rem } .vsi-said p:last-child{ margin-bottom:0 } .vsi-said b{ color:var(--navy,#1F3864) } :root[data-theme="dark"] .vsi-said b{ color:var(--navy,#D8C9A8) } .vsi-p-foot{ margin:.9rem 0 0; padding-top:.7rem; border-top:1px solid var(--edge,#ded5c4); display:flex; gap:.6rem; flex-wrap:wrap } :root[data-theme="dark"] .vsi-p-foot{ border-top-color:var(--edge,#3A342B) } .vsi-p-foot button{ appearance:none; background:none; border:0; cursor:pointer; padding:.2rem 0; font:.88rem/1.3 system-ui,sans-serif; color:var(--brass-deep,#8A6222); } :root[data-theme="dark"] .vsi-p-foot button{ color:var(--brass-deep,#D9AE60) } .vsi-p-foot button:hover{ text-decoration:underline } /* ---- narrow --------------------------------------------------------------- * Seven sentences do not fit across a phone, and a row that scrolls sideways hides * items four to seven behind a gesture nobody performs. So on a phone the bar carries * one control, and the seven doors become the FIRST level of the panel: same drill * down, one more tap. */ .vsi-open{ flex:1 1 auto; appearance:none; background:none; border:0; cursor:pointer; text-align:right; padding:.55rem .85rem; color:var(--navy,#1F3864); font:600 .95rem/1.2 Georgia,'Iowan Old Style',serif; } :root[data-theme="dark"] .vsi-open{ color:var(--navy,#D8C9A8) } .vsi-back{ appearance:none; background:none; border:0; cursor:pointer; padding:0 0 .5rem; font:.88rem/1.3 system-ui,sans-serif; color:var(--brass-deep,#8A6222); } :root[data-theme="dark"] .vsi-back{ color:var(--brass-deep,#D9AE60) } @media (max-width:61rem){ .vsi-doors{ display:none } .vsi-panel{ width:min(30rem,100vw) } } @media (min-width:61.0625rem){ .vsi-open{ display:none } } /* The existing left-edge rail and this panel both live at the left edge. While the panel is open the rail would sit on top of it, so it stands aside. */ .vsi-menu-open #map-tab{ opacity:0; pointer-events:none } @media print{ .vsi-bar,.vsi-panel{ display:none } } /* THE LAMP MOVES DOWN BY THE HEIGHT OF THE BAR. "Dim the lights" is position:fixed at top:14px on every page and was drawn before there was a bar to sit under. Measured 8 Sep 2026 at 390px: the bar is 37px tall and the lamp was behind it, so the one control a reader at 2am reaches for first had become unclickable. The offset is computed from the measured bar height, not from a constant, because the bar is two lines tall on a narrow screen and one on a wide. */ .lamp{ top:calc(var(--vsi-bar-h) + .45rem) }