/* The glass pill top bar (docs/DESIGN.md "Twenty-second pass"). Every class is tb- prefixed so nothing here reaches the page below. The real nav stays in the layout, hidden only under html.js-topbar (set by the inline script), so the page underneath does not shift and JavaScript off still gets a nav. */ html.js-topbar nav.nav[aria-label="Main"]{visibility:hidden} /* Chambers, business and the connector wrap the nav in a sticky .navshell that blurs and draws a hairline once scrolled. Under the bar it is only a spacer: hidden, out of the sticky flow, and it takes no clicks. Its right-hand side goes too, so the phone layouts that wrapped it into a second row of chips do not reserve an empty row above the page. */ html.js-topbar .navshell{visibility:hidden; position:relative; pointer-events:none} html.js-topbar .navshell .nav-right{display:none} :root{ --tb-glass:rgba(245,239,230,.80); /* A card is a list of text over whatever the page has below it, so it is solid parchment, not glass: in WebKit the page copy read through the language card at 80% and still at 94% (measured headless, 2026-09-26), while a solid card was clean in both engines. The pill keeps the glass. */ --tb-card-glass:var(--canvas); --tb-edge:rgba(36,36,36,.09); --tb-shadow:0 1px 2px rgba(36,30,20,.05), 0 8px 32px rgba(36,30,20,.10), inset 0 1px 0 rgba(255,255,255,.6); --tb-blur:blur(16px) saturate(1.4); --tb-ink:#444444; --tb-cta-edge:rgba(36,36,36,.30); --tb-h:48px; --tb-ctl:40px; } .tb-bar{position:fixed; left:0; right:0; top:calc(14px + env(safe-area-inset-top, 0px)); z-index:55; padding:0 16px; pointer-events:none; transition:top .45s var(--ease), padding .45s var(--ease)} .tb-pill{pointer-events:auto; margin:0 auto; max-width:760px; height:var(--tb-h); display:flex; align-items:center; gap:6px; padding:0 4px 0 14px; border-radius:999px; background:var(--tb-glass); border:1px solid var(--tb-edge); box-shadow:var(--tb-shadow); -webkit-backdrop-filter:var(--tb-blur); backdrop-filter:var(--tb-blur); transition:max-width .45s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), padding .45s var(--ease)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .tb-pill,.tb-card{background:var(--canvas)} } /* Morph: at the top it sits exactly where the old nav sat, flat; after 24px of scroll it tightens into the pill. */ html:not([data-tb-scrolled]) .tb-bar{top:18px; padding:0 20px} @media(min-width:640px){ html:not([data-tb-scrolled]) .tb-bar{padding:0 28px} } @media(min-width:1024px){ html:not([data-tb-scrolled]) .tb-bar{padding:0 32px} } html:not([data-tb-scrolled]) .tb-pill{ max-width:976px; padding:0; background-color:transparent; border-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none} html:not([data-tb-scrolled]) .tb-cards{max-width:976px} .tb-brand{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:400; font-size:21px; color:var(--ink); text-decoration:none; min-height:var(--tb-ctl); flex:none; border-radius:10px; position:relative} .tb-brand::after{content:""; position:absolute; inset:-2px -4px} .tb-brand .dot{color:var(--accent-ink)} .tb-brand .mark{width:26px; height:26px; border-radius:8px} .tb-brand .mark .scales{width:14px; height:14px} .tb-right{display:flex; align-items:center; gap:4px; margin-left:auto; flex:none; min-width:0} .tb-ctl{height:var(--tb-ctl); min-width:var(--tb-ctl); border:0; background:transparent; color:var(--tb-ink); border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 12px; cursor:pointer; position:relative; font:600 var(--fs-sm)/1 var(--font-body); white-space:nowrap; transition:background-color .2s ease, color .2s ease} .tb-ctl::after{content:""; position:absolute; inset:-2px 0} .tb-ctl:hover,.tb-ctl[aria-expanded="true"]{background:var(--veil); color:var(--ink)} .tb-ctl svg{width:18px; height:18px; flex:none} .tb-theme{padding:0; width:var(--tb-ctl)} /* The page's own call to action: a small outline chip, so it never competes with the ink primary button in the hero. Below 560px it leaves the pill and is the last row of the Menu card instead. */ .tb-cta{height:34px; min-width:0; padding:0 14px; border:1px solid var(--tb-cta-edge); color:var(--ink); font-size:var(--fs-xs); margin:0 2px; text-decoration:none} .tb-cta::after{inset:-5px -2px} .tb-ctl .tb-chev{width:14px; height:14px; transition:transform .25s var(--ease)} .tb-ctl[aria-expanded="true"] .tb-chev{transform:rotate(180deg)} @media(max-width:560px){ .tb-menubtn .tb-lbl{display:none} .tb-menubtn{padding:0; width:var(--tb-ctl)} } /* cards that drop from the bar */ .tb-cards{position:relative; max-width:760px; margin:0 auto; height:0} .tb-card{pointer-events:auto; position:absolute; top:8px; border-radius:var(--r-xl); padding:8px; background:var(--tb-card-glass); border:1px solid var(--tb-edge); box-shadow:var(--tb-shadow); -webkit-backdrop-filter:var(--tb-blur); backdrop-filter:var(--tb-blur); animation:tb-drop .3s var(--ease) both} @keyframes tb-drop{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}} .tb-menucard{width:min(340px, calc(100vw - 32px))} .tb-dest{display:grid; grid-template-columns:36px 1fr; gap:2px 12px; align-items:center; padding:10px 12px; border-radius:var(--r-md); text-decoration:none; color:var(--ink); min-height:var(--tap); width:100%; border:0; background:transparent; cursor:pointer; text-align:left; font-family:var(--font-body)} .tb-dest:hover{background:var(--veil)} .tb-dest[aria-current="page"]{background:var(--panel); box-shadow:var(--shadow-1)} .tb-dest .tb-ic{grid-row:span 2; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--chip-bg); color:var(--ink)} .tb-dest[aria-current="page"] .tb-ic{background:var(--ink); color:var(--canvas)} .tb-dest .tb-ic svg{width:18px; height:18px} .tb-dest b{font-size:var(--fs-md); font-weight:600} .tb-dest span{font-size:var(--fs-sm); color:var(--muted); line-height:1.35} .tb-sep{height:1px; background:var(--hair); margin:6px 10px} .tb-quiet{display:flex; align-items:center; justify-content:space-between; min-height:var(--tap); padding:0 12px; border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--muted); text-decoration:none} .tb-quiet:hover{background:var(--veil); color:var(--ink)} .tb-quiet svg{width:16px; height:16px} /* language 1: greeting */ /* Sized to the word showing, not a fixed box: a 62px minimum left a gap between a short word ("English") and the chevron. During the roll the width eases to each word, so the chevron glides instead of jumping. */ .tb-greet{display:inline-grid; overflow:hidden; height:20px; text-align:left; transition:width .45s var(--ease)} .tb-greet span{grid-area:1/1; line-height:20px; white-space:nowrap} .tb-greet + .tb-chev{margin-left:-3px} .tb-greet span.in{animation:tb-in .45s var(--ease) both} .tb-greet span.out{animation:tb-out .45s var(--ease) both} @keyframes tb-in{from{transform:translateY(100%); opacity:0} to{transform:none; opacity:1}} @keyframes tb-out{from{transform:none; opacity:1} to{transform:translateY(-100%); opacity:0}} .tb-langcard{width:min(290px, calc(100vw - 32px))} .tb-lopt{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px; width:100%; text-align:left; border:0; background:transparent; cursor:pointer; padding:10px 12px; border-radius:var(--r-md); min-height:var(--tap); color:var(--ink); font-family:var(--font-body)} .tb-lopt:hover{background:var(--veil)} .tb-lopt b{font-size:var(--fs-md); font-weight:600} .tb-lopt span{grid-column:1; font-size:var(--fs-sm); color:var(--muted)} .tb-lopt .tb-tick{grid-row:1/span 2; grid-column:2; width:18px; height:18px; color:var(--accent-ink); opacity:0} .tb-lopt[aria-checked="true"]{background:var(--panel); box-shadow:var(--shadow-1)} .tb-lopt[aria-checked="true"] .tb-tick{opacity:1} /* After .tb-quiet, so the phone/desktop swap beats its display:flex. */ @media(max-width:560px){ .tb-cta{display:none} } @media(min-width:561px){ .tb-cta-row{display:none} } @media print{ .tb-bar{display:none} } @media (prefers-reduced-motion:reduce){ .tb-bar,.tb-pill,.tb-card,.tb-greet,.tb-greet span{transition:none!important; animation:none!important} }