/* 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} :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-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:rgba(255,255,255,.75); color:var(--ink)} .tb-ctl svg{width:18px; height:18px; flex:none} .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:rgba(255,255,255,.75)} .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:rgba(36,36,36,.06); 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:rgba(255,255,255,.75); 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:rgba(255,255,255,.75)} .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} @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} }